/** @define DeprecatedLoadingOverlay */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.DeprecatedLoadingOverlay {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  left: 0;
  overflow: auto;
  padding: 0.5rem;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100vw; }

.DeprecatedLoadingOverlay-content {
  margin-top: auto;
  margin-bottom: auto; }

.DeprecatedLoadingOverlay-partner {
  width: 100%; }

.DeprecatedLoadingOverlay-partnerTitle {
  color: #777;
  font-family: 'Centrale Sans Rounded', Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 0.5rem;
  position: relative; }
  @media screen and (min-width: 40rem) {
    .DeprecatedLoadingOverlay-partnerTitle {
      font-size: 1.75rem; } }

.DeprecatedLoadingOverlay-partnerGnLogo {
  display: block;
  margin: 0 auto 1rem;
  max-width: 13rem;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .DeprecatedLoadingOverlay-partnerGnLogo {
      display: inline-block;
      margin: 0 0.25rem 0 0; } }

.DeprecatedLoadingOverlay-partnerLogo {
  margin: 0 auto 2rem;
  max-width: 37.5rem;
  width: 80%; }

.DeprecatedLoadingOverlay-partnerLogoImg {
  max-height: 20rem; }

.DeprecatedLoadingOverlay-partnerName {
  color: #333;
  font-size: 1.17rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 2rem; }

.DeprecatedLoadingOverlay-heading {
  color: #555;
  font-family: 'Tikal Sans', Verdana, sans-serif;
  font-size: '1.5rem';
  margin-top: 0; }

.DeprecatedLoadingOverlay-dotBounce {
  display: block;
  margin-bottom: 2rem;
  padding-top: 2rem;
  width: 100%; }

@-webkit-keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

@keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

.DeprecatedLoadingOverlay-dot {
  -webkit-animation: dot-bounce 1500ms ease-in infinite;
          animation: dot-bounce 1500ms ease-in infinite;
  background-color: #5e1cca;
  border-radius: 100rem;
  display: inline-block;
  height: 1rem;
  margin: 0 0.25rem;
  vertical-align: middle;
  width: 1rem; }
  .DeprecatedLoadingOverlay-dot:nth-of-type(2) {
    -webkit-animation-delay: 100ms;
            animation-delay: 100ms; }
  .DeprecatedLoadingOverlay-dot:nth-of-type(3) {
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms; }

/* Modifier: Wide sponsor logo
   ========================================================================== */
.DeprecatedLoadingOverlay-partnerLogo--wide {
  max-width: 37.5rem; }

.DeprecatedLoadingOverlay-partnerLogo--wide .DeprecatedLoadingOverlay-partnerLogoImg {
  max-height: 10rem; }

/* Modifier: Skinny sponsor logo
  ========================================================================== */
.DeprecatedLoadingOverlay-partnerLogo--skinny {
  max-width: 25rem; }

.DeprecatedLoadingOverlay-partnerLogo--skinny .DeprecatedLoadingOverlay-partnerLogoImg {
  max-height: 10rem; }
@font-face {
  font-family: 'Tikal Sans';
  font-weight: bold;
  font-style: normal;
  src: url(/assets/0ccc697642241138318e81addc16c568.woff2) format("woff2"), url(/assets/d14cd196185674db11b133ac9491a150.woff) format("woff"); }

/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2015 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Typedepot
 * License URL: http://www.fontspring.com/licenses/typedepot/webfont
 *
 *
 */
@font-face {
  font-family: 'Centrale Sans Rounded';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/70d721134655f2adb68cc6d8b41e8971.woff2) format("woff2"), url(/assets/297bcce846f6001d1131fda27bf447eb.woff) format("woff"); }

html,
.gn-body {
  height: 100%;
  width: 100%; }

.gn-body {
  background-color: #f5f5f5; }
/** @define SplashScreen */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SplashScreen {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  left: 0;
  overflow: auto;
  padding: 0.5rem;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100vw; }

.SplashScreen-content {
  margin-top: auto;
  margin-bottom: auto; }

.SplashScreen-partner {
  width: 100%; }

.SplashScreen-partnerTitle {
  color: #777;
  font-family: 'Centrale Sans Rounded', Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 0.5rem;
  position: relative; }
  @media screen and (min-width: 40rem) {
    .SplashScreen-partnerTitle {
      font-size: 1.75rem; } }

.SplashScreen-partnerGnLogo {
  display: block;
  margin: 0 auto 1rem;
  max-width: 13rem;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .SplashScreen-partnerGnLogo {
      display: inline-block;
      margin: 0 0.25rem 0 0; } }

.SplashScreen-partnerLogo {
  margin: 0 auto 2rem;
  max-width: 37.5rem;
  width: 80%; }

.SplashScreen-partnerLogoImg {
  max-height: 20rem; }

.SplashScreen-partnerName {
  color: #333;
  font-size: 1.17rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 2rem; }

.SplashScreen-heading {
  color: #555;
  font-family: 'Tikal Sans', Verdana, sans-serif;
  font-size: '1.5rem';
  margin-top: 0; }

.SplashScreen-dotBounce {
  display: block;
  margin-bottom: 2rem;
  padding-top: 2rem;
  width: 100%; }

@-webkit-keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

@keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

.SplashScreen-dot {
  -webkit-animation: dot-bounce 1500ms ease-in infinite;
          animation: dot-bounce 1500ms ease-in infinite;
  background-color: #5e1cca;
  border-radius: 100rem;
  display: inline-block;
  height: 1rem;
  margin: 0 0.25rem;
  vertical-align: middle;
  width: 1rem; }
  .SplashScreen-dot:nth-of-type(2) {
    -webkit-animation-delay: 100ms;
            animation-delay: 100ms; }
  .SplashScreen-dot:nth-of-type(3) {
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms; }

/* Modifier: Wide sponsor logo
   ========================================================================== */
.SplashScreen-partnerLogo--wide {
  max-width: 37.5rem; }

.SplashScreen-partnerLogo--wide .SplashScreen-partnerLogoImg {
  max-height: 10rem; }

/* Modifier: Skinny sponsor logo
  ========================================================================== */
.SplashScreen-partnerLogo--skinny {
  max-width: 25rem; }

.SplashScreen-partnerLogo--skinny .SplashScreen-partnerLogoImg {
  max-height: 10rem; }
button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit; }
/** @define Btn */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
/**
 * 1. Required to position pseudo elements behind text.
 */
.Btn {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
  display: inline-block;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 0.3125rem;
  padding: 1em 2em;
  position: relative;
  /* 1 */
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  z-index: 100;
  /* 1 */ }
  @media screen and (min-width: 60rem) {
    .Btn {
      font-size: 1.25rem; } }

/* State: Disabled
   ========================================================================== */
.Btn.is-disabled {
  color: #757575;
  cursor: not-allowed; }
  .Btn.is-disabled::after {
    background-color: #fff; }
  .Btn.is-disabled::before {
    background-color: #ccc; }
  .Btn.is-disabled:hover {
    -webkit-transform: none;
            transform: none; }
    .Btn.is-disabled:hover::before {
      -webkit-transform: none;
              transform: none; }

/* Modifiers: Position
   ========================================================================== */
/**
 * 1. HACK: Overrides modal button width. Remove !important when new modals are released
 */
.Btn--block {
  display: block;
  width: calc(100% - 0.5rem) !important;
  /* 1 */ }

/* Modifier: Primary action.
   ========================================================================== */
.Btn--primary, .Btn--primary:visited {
  color: #fff;
  margin-right: 0.5rem;
  position: relative;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }

.Btn--primary::before, .Btn--primary::after {
  border: 0.125rem solid #000;
  content: '';
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  width: 100%; }

.Btn--primary::after {
  background-color: #5e1cca;
  border-radius: 0.25rem;
  left: 0;
  top: 0;
  z-index: -100; }

.Btn--primary::before {
  background-color: #ddfd48;
  border-radius: 0.3125rem;
  left: 0.3125rem;
  top: 0.3125rem;
  z-index: -100; }

.Btn--primary:hover, .Btn--primary:active {
  -webkit-transform: translate(0, -0.125rem);
          transform: translate(0, -0.125rem); }

.Btn--primary:hover::before, .Btn--primary:active::before {
  -webkit-transform: translate(0, 0.125rem);
          transform: translate(0, 0.125rem); }

.Btn--primary:active::after {
  background-color: #49169d; }

/* Modifier: Primary action alternate for use on darker backgrounds.
   ========================================================================== */
.Btn--primaryAlt, .Btn--primaryAlt:visited {
  color: #000;
  margin-right: 0.5rem;
  position: relative;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }

.Btn--primaryAlt::before, .Btn--primaryAlt::after {
  border: 0.125rem solid #000;
  content: '';
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  width: 100%; }

.Btn--primaryAlt::after {
  background-color: #ddfd48;
  border-radius: 0.25rem;
  left: 0;
  top: 0;
  z-index: -100; }

.Btn--primaryAlt::before {
  background-color: #eb0055;
  border-radius: 0.3125rem;
  left: 0.3125rem;
  top: 0.3125rem;
  z-index: -100; }

.Btn--primaryAlt:hover, .Btn--primaryAlt:active {
  -webkit-transform: translate(0, -0.125rem);
          transform: translate(0, -0.125rem); }

.Btn--primaryAlt:hover::before, .Btn--primaryAlt:active::before {
  -webkit-transform: translate(0, 0.125rem);
          transform: translate(0, 0.125rem); }

.Btn--primaryAlt:active::after {
  background-color: #d4fc16; }

/* Modifier: Secondary action.
   ========================================================================== */
.Btn--secondary, .Btn--secondary:visited {
  color: #333;
  margin-right: 0.5rem;
  position: relative;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }

.Btn--secondary::before, .Btn--secondary::after {
  border: 0.125rem solid #000;
  content: '';
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  width: 100%; }

.Btn--secondary::after {
  background-color: #fff;
  border-radius: 0.25rem;
  left: 0;
  top: 0;
  z-index: -100; }

.Btn--secondary::before {
  background-color: #ddfd48;
  border-radius: 0.3125rem;
  left: 0.3125rem;
  top: 0.3125rem;
  z-index: -100; }

.Btn--secondary:hover, .Btn--secondary:active {
  -webkit-transform: translate(0, -0.125rem);
          transform: translate(0, -0.125rem); }

.Btn--secondary:hover::before, .Btn--secondary:active::before {
  -webkit-transform: translate(0, 0.125rem);
          transform: translate(0, 0.125rem); }

.Btn--secondary:active::after {
  background-color: #e6e6e6; }

/* Modifier: Clever CTA button.
   ========================================================================== */
.Btn--clever, .Btn--clever:visited {
  color: #fff;
  margin-right: 0.5rem;
  position: relative;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }

.Btn--clever::before, .Btn--clever::after {
  border: 0.125rem solid #000;
  content: '';
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  width: 100%; }

.Btn--clever::after {
  background-color: #436cf2;
  border-radius: 0.25rem;
  left: 0;
  top: 0;
  z-index: -100; }

.Btn--clever::before {
  background-color: #fff;
  border-radius: 0.3125rem;
  left: 0.3125rem;
  top: 0.3125rem;
  z-index: -100; }

.Btn--clever:hover, .Btn--clever:active {
  -webkit-transform: translate(0, -0.125rem);
          transform: translate(0, -0.125rem); }

.Btn--clever:hover::before, .Btn--clever:active::before {
  -webkit-transform: translate(0, 0.125rem);
          transform: translate(0, 0.125rem); }

.Btn--clever:active::after {
  background-color: #1347ef; }

/* Modifier: Danger styling used for destructive actions.
   ========================================================================== */
.Btn--danger, .Btn--danger:visited {
  color: #fff;
  margin-right: 0.5rem;
  position: relative;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }

.Btn--danger::before, .Btn--danger::after {
  border: 0.125rem solid #000;
  content: '';
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  width: 100%; }

.Btn--danger::after {
  background-color: #eb0055;
  border-radius: 0.25rem;
  left: 0;
  top: 0;
  z-index: -100; }

.Btn--danger::before {
  background-color: #ddfd48;
  border-radius: 0.3125rem;
  left: 0.3125rem;
  top: 0.3125rem;
  z-index: -100; }

.Btn--danger:hover, .Btn--danger:active {
  -webkit-transform: translate(0, -0.125rem);
          transform: translate(0, -0.125rem); }

.Btn--danger:hover::before, .Btn--danger:active::before {
  -webkit-transform: translate(0, 0.125rem);
          transform: translate(0, 0.125rem); }

.Btn--danger:active::after {
  background-color: #b80043; }

/* Modifier: Fixed height button used for displaying columns of buttons.
   ========================================================================== */
.Btn--fixedHeight {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 0;
  padding-top: 0; }

/* Modifier: Small button style.
   ========================================================================== */
.Btn--sm {
  font-size: 1rem;
  padding: 0.5em 1em; }

/* Modifier: Apply small button sizing for screens beneath projector width.
   ========================================================================== */
@media screen and (max-width: 50rem) {
  .Btn--dynamicSize {
    font-size: 1rem;
    padding: 0.5em 1em; } }

/* Modifier: Remove horizontal padding; for rendering button with a declared
   width (e.g. within a grid).
   ========================================================================== */
.Btn--noPadX {
  padding-right: 0;
  padding-left: 0; }
/** @define BtnAdd */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.BtnAdd {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: transparent;
  border-radius: 5px;
  border: 3px dashed #999;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #666;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.75rem;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 1rem;
  padding: 1rem;
  text-align: center;
  width: 100%; }
  .BtnAdd:hover {
    background-color: transparent;
    border-color: gray;
    color: #666666; }
  @media screen and (min-width: 600px) {
    .BtnAdd {
      font-size: 1.25rem; } }

.BtnAdd-icon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: currentColor;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1rem;
  height: 2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 0.5rem;
  padding-top: 0.2em;
  width: 2rem; }

.BtnAdd-text {
  display: block;
  font-family: "tk", Verdana, sans-serif;
  font-weight: bold;
  line-height: 1.25;
  margin: 0; }

/* Modifier: Bar
   ========================================================================== */
.BtnAdd--bar {
  padding: 1.5rem 1rem; }
/** @define BtnIcon */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.BtnIcon {
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border-radius: 50%;
  border: none;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1rem;
  height: 3em;
  line-height: 1.5;
  outline: none;
  padding: 0;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 3em; }
  @media screen and (min-width: 60rem) {
    .BtnIcon {
      font-size: 1.25rem; } }
  .BtnIcon::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 4px solid #fff;
    border-radius: 100em;
    opacity: 0; }

.BtnIcon:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1); }

.BtnIcon.animated {
  -webkit-animation: pop-button 0.4s ease-in-out 1;
          animation: pop-button 0.4s ease-in-out 1;
  opacity: 1 !important;
  z-index: 100; }
  .BtnIcon.animated::after {
    -webkit-animation: pop-border 0.4s ease-in-out 1 forwards;
            animation: pop-border 0.4s ease-in-out 1 forwards; }

.BtnIcon-icon,
.BtnIcon-icon:before {
  background-position: center center;
  background-size: contain;
  display: inline-block;
  font-size: 1.25em;
  height: 1em;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 1em; }

/* Modifiers: Appearance
   ========================================================================== */
.BtnIcon--back {
  background-color: #000;
  border: 2px solid #fff; }
  .BtnIcon--back::after {
    border-color: #000; }

.BtnIcon--danger {
  background-color: #eb0055; }
  .BtnIcon--danger::after {
    border-color: #eb0055; }

.BtnIcon--dark {
  background-color: #2d0a6e;
  color: #fff; }
  .BtnIcon--dark::after {
    border-color: #2d0a6e; }

.BtnIcon-icon--lg {
  font-size: 1.75em; }

/* Modifier: Favorite appearance
   ========================================================================== */
.BtnIcon--favorite {
  background-color: #f5f5f5; }

.BtnIcon--favorite::after {
  border-color: #fc41d9; }

.BtnIcon--favorite.is-active,
.BtnIcon--favorite.is-active:active {
  background-color: #fc41d9; }
/** @define BtnLink */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.BtnLink {
  border-bottom: 1px solid currentColor;
  color: #5e1cca;
  display: inline-block;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1em;
  padding: 0;
  position: relative;
  vertical-align: baseline; }

.BtnLink:visited {
  color: #5e1cca; }

.BtnLink:hover,
.BtnLink:active {
  color: #49169d; }

/* Modifiers: Appearance
   ========================================================================== */
.BtnLink--light,
.BtnLink--light:visited {
  color: #fff; }

.BtnLink--light:hover,
.BtnLink--light:active {
  color: #e6e6e6; }

.BtnLink--dark,
.BtnLink--dark:visited {
  color: #000; }

.BtnLink--dark:hover,
.BtnLink--dark:active {
  color: black; }

.BtnLink--grayDark,
.BtnLink--grayDark:visited {
  color: #333; }

.BtnLink--grayDark:hover,
.BtnLink--grayDark:active {
  color: black; }
/** @define OverlayBackdrop */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.OverlayBackdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 700;
  background: rgba(0, 0, 0, 0.5);
  -webkit-overflow-scrolling: touch; }

/**
 * 1. TODO: Safari is struggling to consistenly render an `OverlayBackdrop` that is a
 *    child of a flexbox element. This is used to force the element open.
 */
.no-ios .OverlayBackdrop {
  min-height: 100vh;
  /* 1 */
  overflow: hidden; }

/* Modifiers: Color
   ========================================================================== */
.OverlayBackdrop--purple {
  background: rgba(28, 8, 61, 0.75); }

.OverlayBackdrop--dark {
  background-color: rgba(0, 0, 0, 0.8); }
@charset "UTF-8";
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
.row::after {
  clear: both;
  content: "";
  display: table; }

/* Mixins
   ========================================================================== */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

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

.hidden,
.is-hidden {
  display: none !important;
  visibility: hidden !important; }

.clearfix:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  visibility: hidden; }

.clearfix {
  display: block; }

@media screen and (min-width: 600px) {
  .br-medium {
    display: block; } }

/**
 * 1. Elements with this class are not full width while transitioning in IE.
 */
.is-transitioning {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  /* 1 */
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; }

.is-sliding {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-box-shadow: -0.25rem 0 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: -0.25rem 0 0.125rem rgba(0, 0, 0, 0.1);
  z-index: 200; }

.is-slidingUp,
.is-slidingDown {
  z-index: 700; }

html,
.gn-body,
#js-root,
#js-rootMarionette {
  height: 100%;
  margin: 0;
  width: 100%; }

html {
  font-size: 100%; }

.gn-body {
  background: #f5f5f5;
  color: #333;
  font-family: "csr", Verdana, sans-serif;
  line-height: 1.5;
  overflow-y: scroll; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "tk", Verdana, sans-serif;
  font-weight: 700; }

h1,
h2 {
  line-height: 1.2;
  color: #5e1cca; }

h3,
h4 {
  line-height: 1.4; }

.h4-hack {
  font-size: 1em; }

a {
  color: #5e1cca;
  text-decoration: none; }

strong {
  font-weight: 700; }

hr {
  border-bottom: 1px solid #e6e6e6;
  border-left: none;
  border-right: none;
  border-top: none;
  margin: 1.5em 0; }

sub,
sup {
  font-size: 0.65em; }

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

.inline-callout {
  color: #fecf2f;
  font-size: 1.15em;
  font-weight: 700; }

.page-title {
  margin-top: 1em;
  margin-bottom: 1em;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.25rem;
  color: #666;
  letter-spacing: -0.05em;
  text-align: center;
  word-wrap: break-word; }
  @media screen and (min-width: 40rem) {
    .page-title {
      font-size: 2rem; } }
  .page-title + .page-subtitle {
    margin: -1.5em auto 2.5em;
    max-width: 30em;
    text-align: center; }

.empty-text {
  font-size: 1.25em;
  color: #aaaaaa;
  font-style: italic;
  text-align: center; }

.u-offPage {
  left: -99999px;
  position: absolute;
  top: -99999px; }

.u-headerReset {
  margin-top: 1em;
  margin-bottom: 0.5em;
  color: #333;
  font-weight: bold;
  line-height: 1.5; }

input,
textarea,
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #fff;
  border-radius: 4px;
  border: 3px solid #6e6e6e;
  color: #666;
  font-size: 1.5em;
  padding: 1em 0.75em;
  width: 100%; }
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #5e1cca;
    outline: none; }
  input[disabled]:not(.input-fake),
  textarea[disabled]:not(.input-fake),
  select[disabled]:not(.input-fake) {
    background: #ccc; }

input::-ms-clear, input::-ms-reveal {
  display: none; }

input::-webkit-input-placeholder {
  -webkit-font-smoothing: antialiased;
  color: #555;
  font-weight: normal; }

input::-moz-placeholder {
  -webkit-font-smoothing: antialiased;
  color: #555;
  font-weight: normal; }

input:-ms-input-placeholder {
  -webkit-font-smoothing: antialiased;
  color: #555;
  font-weight: normal; }

input::-ms-input-placeholder {
  -webkit-font-smoothing: antialiased;
  color: #555;
  font-weight: normal; }

input::placeholder {
  -webkit-font-smoothing: antialiased;
  color: #555;
  font-weight: normal; }

textarea {
  resize: vertical; }

.inputs-sm input,
.inputs-sm textarea,
.inputs-sm select {
  font-size: 1em; }

select, select:focus, select:active {
  border-color: #6e6e6e;
  -webkit-box-shadow: 0 2px 0 #6e6e6e;
          box-shadow: 0 2px 0 #6e6e6e;
  color: #666; }

select:focus {
  border-color: #5e1cca;
  -webkit-box-shadow: 0 2px #5e1cca;
          box-shadow: 0 2px #5e1cca; }

select.parsley-error {
  border-color: #eb0055;
  -webkit-box-shadow: 0 2px 0 #eb0055;
          box-shadow: 0 2px 0 #eb0055; }

.select-wrapper, .select-wrapper-simple {
  position: relative; }
  .parsley-error.select-wrapper select, .parsley-error.select-wrapper-simple select {
    border-color: #eb0055;
    -webkit-box-shadow: 0 2px 0 #eb0055;
            box-shadow: 0 2px 0 #eb0055; }

.select-wrapper {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 0.3em; }
  .select-wrapper:before {
    content: "\E014";
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'gn-icons';
    color: #6e6e6e;
    font-size: 1.75em;
    margin-right: calc(0.5em + 4px);
    padding: 0.15em;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
  .select-wrapper select {
    font-family: "csr", Verdana, sans-serif;
    padding-right: 2.75em; }

/**
 * Hide the drop-down button for IE select inputs. http://bit.ly/2dECKIe
 */
select::-ms-expand {
  display: none; }

.select-wrapper-simple select {
  border-bottom-width: 1px;
  border-radius: 0;
  border: 0 dashed #ccc;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #666;
  font-size: 1.25em;
  padding: 0.25em 0; }
  @media screen and (min-width: 1020px) {
    .select-wrapper-simple select {
      font-size: 1em; } }

.row {
  margin-bottom: 1em;
  position: relative; }
  .row .form-group {
    margin-bottom: 0; }

@media screen and (max-width: 599px) {
  .row.city-state-zip .form-group:first-child {
    float: left;
    display: block;
    margin-right: 2.1645%;
    width: 100%;
    margin-bottom: 1em; }
    .row.city-state-zip .form-group:first-child:last-child {
      margin-right: 0; }
  .row.city-state-zip .form-group:nth-child(2), .row.city-state-zip .form-group:last-child {
    float: left;
    display: block;
    margin-right: 2.1645%;
    width: 48.91775%; }
    .row.city-state-zip .form-group:nth-child(2):last-child, .row.city-state-zip .form-group:last-child:last-child {
      margin-right: 0; } }

@media screen and (min-width: 600px) {
  .row.city-state-zip .form-group:first-child {
    float: left;
    display: block;
    margin-right: 2.1645%;
    width: 48.91775%; }
    .row.city-state-zip .form-group:first-child:last-child {
      margin-right: 0; }
  .row.city-state-zip .form-group:nth-child(2) {
    float: left;
    display: block;
    margin-right: 2.1645%;
    width: 19.11977%; }
    .row.city-state-zip .form-group:nth-child(2):last-child {
      margin-right: 0; }
  .row.city-state-zip .form-group:last-child {
    float: left;
    display: block;
    margin-right: 2.1645%;
    width: 27.63348%; }
    .row.city-state-zip .form-group:last-child:last-child {
      margin-right: 0; } }

.column {
  position: relative; }
  @media screen and (min-width: 600px) {
    .column {
      width: 49%;
      float: left; } }

.column + .column {
  margin-top: 1em; }
  @media screen and (min-width: 600px) {
    .column + .column {
      float: right;
      margin-top: 0; } }

input.parsley-error, input.parsley-error:focus,
textarea.parsley-error,
textarea.parsley-error:focus,
select.parsley-error,
select.parsley-error:focus {
  border-color: #eb0055; }

.parsley-errors-list {
  background-color: #eb0055;
  border-radius: 4px 0 4px 0;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 0.875em;
  list-style: none;
  margin: 0;
  padding: 0.2em 0.5em;
  pointer-events: none;
  position: absolute;
  right: 0;
  white-space: nowrap;
  z-index: 2; }
  .parsley-errors-list.filled {
    display: block; }
  .parsley-errors-list li {
    font-size: 0.875em;
    font-weight: 700; }

label {
  color: #333;
  cursor: pointer;
  display: inline-block; }
  @media screen and (max-width: 600px) {
    label {
      font-size: 1em; } }

.form-group {
  margin-bottom: 1em;
  position: relative; }
  .form-group .form-control {
    vertical-align: middle; }

.form-control {
  font-family: "csr", Verdana, sans-serif;
  width: 100%; }

.FormSearch {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.FormSearch-query {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
  padding-right: 3%; }
  @media screen and (min-width: 600px) {
    .FormSearch-query {
      -webkit-box-flex: 4.5;
          -ms-flex: 4.5;
              flex: 4.5; } }

.FormSearch-submit {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  margin-bottom: 0.25em;
  padding-left: 0;
  padding-right: 0; }
  @media screen and (min-width: 600px) {
    .FormSearch-submit {
      -webkit-box-flex: 1.5;
          -ms-flex: 1.5;
              flex: 1.5; } }

.view-404 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2em;
  text-align: center;
  background: #666; }
  @media screen and (min-width: 600px) {
    .view-404 {
      background: url(https://assets-gnp-ssl.gonoodle.com/image-assets/marketing-variation/bg-home-hero.jpg) center center no-repeat;
      background-size: cover; } }
  .view-404 h1 {
    margin: 0;
    color: #fff;
    font-family: "tk", Verdana, sans-serif;
    font-size: 2em; }
  .view-404 p {
    margin: 0 auto;
    color: #fff;
    font-size: 1.25em; }

@media screen and (min-width: 600px) {
  .view-404 .nav-utility {
    position: absolute;
    top: 2em;
    right: 2em;
    z-index: 3; } }

.view-404 .nav-utility .Btn {
  font-size: 1.25em;
  font-family: "tk", Verdana, sans-serif;
  margin-left: 0.5em; }

.text-404 {
  padding: 4em; }
  @media screen and (min-width: 600px) {
    .text-404 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 80%;
      z-index: 2; } }
  @media screen and (min-width: 600px) {
    .text-404 .inner {
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      position: absolute;
      top: 50%;
      left: 0;
      right: 0; } }
  .text-404 .Btn {
    margin-top: 3em; }

.champ-404 {
  display: none; }
  @media screen and (min-width: 600px) {
    .champ-404 {
      display: block; } }
  .champ-404 img {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    display: block;
    position: fixed;
    right: 10%;
    bottom: -10%;
    left: 50%;
    height: 34%;
    z-index: 1; }
  .champ-404 .question-mark {
    -webkit-animation: float-up 2s linear infinite;
            animation: float-up 2s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: fixed;
    bottom: 26%;
    left: 45%;
    font-family: "tk", Verdana, sans-serif;
    color: #ccc;
    font-size: 3em;
    opacity: 0; }
    .champ-404 .question-mark:nth-child(2) {
      -webkit-animation-delay: 0.45s;
              animation-delay: 0.45s;
      left: 50%;
      bottom: 28%; }
    .champ-404 .question-mark:nth-child(3) {
      -webkit-animation-delay: 0.85s;
              animation-delay: 0.85s;
      left: 55%;
      bottom: 24%; }

.Icon,
[class^='icon'] {
  display: inline-block;
  position: relative;
  top: -0.1em;
  width: 1em;
  height: 1em;
  background-position: center center;
  background-size: contain;
  vertical-align: middle; }

/* Modifier: Alternate sizing to fill the parent container
   ========================================================================== */
.Icon--sizeFill {
  height: 100%;
  width: 100%; }

/* Modifier: Add 50% transparency
   ========================================================================== */
.Icon--fade {
  opacity: 0.5; }

/* Modifier: Add 66% transparency
   ========================================================================== */
.Icon--lighten {
  opacity: 0.66; }

.header-simple {
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-box-shadow: 0 0.25rem 0.1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25rem 0.1rem rgba(0, 0, 0, 0.15); }
  .header-simple .header-title {
    padding: 2em 0;
    text-align: center; }
    .header-simple .header-title h1 {
      margin: 0;
      text-align: center;
      font-size: 1.5em;
      font-family: "tk", Verdana, sans-serif;
      color: #333;
      letter-spacing: -0.05em; }
      @media screen and (min-width: 600px) {
        .header-simple .header-title h1 {
          font-size: 2em; } }

.footer-fixed {
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 5; }

.uv-popover {
  position: fixed !important; }

#uv-link {
  position: fixed;
  bottom: 0;
  left: 40px;
  padding: 6px 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #007ec8;
  display: inline-block;
  color: #fff;
  font-weight: bold; }

.bar {
  display: table;
  width: 100%;
  table-layout: fixed;
  position: relative;
  margin-bottom: 1.5em;
  padding: 1em;
  background: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25em 0.125em rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25em 0.125em rgba(0, 0, 0, 0.1);
  text-align: left; }
  .bar .bar-content {
    display: table-cell;
    width: 83.33333%;
    vertical-align: middle; }
    @media screen and (min-width: 40rem) {
      .bar .bar-content {
        display: table-cell;
        width: 75%; } }
  .bar .bar-title {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    display: inline-block;
    color: #000;
    font-size: 1.15em;
    font-weight: 700;
    margin: 0;
    max-width: 100%;
    vertical-align: middle; }
  .bar .bar-nav {
    display: table-cell;
    width: 16.66667%;
    vertical-align: middle;
    text-align: right; }
    @media screen and (min-width: 40rem) {
      .bar .bar-nav {
        display: table-cell;
        width: 25%; } }
  .no-touchevents .bar .bar-nav {
    opacity: 0; }
    .no-touchevents .bar .bar-nav .BtnIcon {
      font-size: 0.875em; }
  .bar:hover .bar-nav {
    opacity: 1; }

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }

@-webkit-keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0; }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
    opacity: 1; }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    opacity: 1; } }

@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0; }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
    opacity: 1; }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    opacity: 1; } }

.bounceIn {
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn; }

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
    opacity: 0; }
  40% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
            transform: rotate3d(0, 1, 0, -20deg); }
  60% {
    -webkit-transform: rotate3d(0, 1, 0, 10deg);
            transform: rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: rotate3d(0, 1, 0, -5deg);
            transform: rotate3d(0, 1, 0, -5deg); } }

@keyframes flipInY {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
    opacity: 0; }
  40% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
            transform: rotate3d(0, 1, 0, -20deg); }
  60% {
    -webkit-transform: rotate3d(0, 1, 0, 10deg);
            transform: rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: rotate3d(0, 1, 0, -5deg);
            transform: rotate3d(0, 1, 0, -5deg); } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
          animation-name: flipInY; }

@-webkit-keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0); }
  100% {
    -webkit-transform: none;
            transform: none; } }

@keyframes bounceInDown {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0); }
  100% {
    -webkit-transform: none;
            transform: none; } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
          animation-name: bounceInDown; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn; }

@-webkit-keyframes flipOutY {
  30% {
    -webkit-transform: rotate3d(0, 1, 0, -15deg);
            transform: rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

@keyframes flipOutY {
  30% {
    -webkit-transform: rotate3d(0, 1, 0, -15deg);
            transform: rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
          animation-name: flipOutY;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s; }

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn; }

@-webkit-keyframes pop-in-simple {
  0%,
  20% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  85%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes pop-in-simple {
  0%,
  20% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  60% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }
  85%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes pop-in-fade-simple {
  0% {
    -webkit-transform: scaleX(0.5) scaleY(0.3) translateZ(0);
            transform: scaleX(0.5) scaleY(0.3) translateZ(0);
    opacity: 0; }
  40% {
    -webkit-transform: scaleX(1.1) scaleY(1.04) translateZ(0);
            transform: scaleX(1.1) scaleY(1.04) translateZ(0);
    opacity: 1; }
  70%,
  100% {
    -webkit-transform: scaleX(1) scaleY(1) translateZ(0);
            transform: scaleX(1) scaleY(1) translateZ(0); } }

@keyframes pop-in-fade-simple {
  0% {
    -webkit-transform: scaleX(0.5) scaleY(0.3) translateZ(0);
            transform: scaleX(0.5) scaleY(0.3) translateZ(0);
    opacity: 0; }
  40% {
    -webkit-transform: scaleX(1.1) scaleY(1.04) translateZ(0);
            transform: scaleX(1.1) scaleY(1.04) translateZ(0);
    opacity: 1; }
  70%,
  100% {
    -webkit-transform: scaleX(1) scaleY(1) translateZ(0);
            transform: scaleX(1) scaleY(1) translateZ(0); } }

@-webkit-keyframes move-bg {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -34em 0; } }

@keyframes move-bg {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -34em 0; } }

@-webkit-keyframes letter-bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.04) translateY(-0.05em);
            transform: scale(1.04) translateY(-0.05em); } }

@keyframes letter-bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.04) translateY(-0.05em);
            transform: scale(1.04) translateY(-0.05em); } }

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg); } }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg); } }

@-webkit-keyframes spin-arrow {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: scale(1.2) rotate(-180deg);
            transform: scale(1.2) rotate(-180deg); }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }

@keyframes spin-arrow {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: scale(1.2) rotate(-180deg);
            transform: scale(1.2) rotate(-180deg); }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg); } }

@-webkit-keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(2) rotate(12deg);
            transform: scale(2) rotate(12deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg); } }

@keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(2) rotate(12deg);
            transform: scale(2) rotate(12deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg); } }

@-webkit-keyframes float-up {
  from {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0; }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; }
  100% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0; } }

@keyframes float-up {
  from {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
    opacity: 0; }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; }
  100% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0; } }

@-webkit-keyframes spin-in {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0); }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1); } }

@keyframes spin-in {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0); }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1); } }

@-webkit-keyframes pop-border {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0; } }

@keyframes pop-border {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0; } }

@-webkit-keyframes pop-button {
  0%,
  75%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); } }

@keyframes pop-button {
  0%,
  75%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); } }

@-webkit-keyframes subtleRubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.1, 0.85, 1);
            transform: scale3d(1.1, 0.85, 1); }
  50% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1); }
  70% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@keyframes subtleRubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.1, 0.85, 1);
            transform: scale3d(1.1, 0.85, 1); }
  50% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1); }
  70% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@-webkit-keyframes pulse-wiggle {
  0%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); } }

@keyframes pulse-wiggle {
  0%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); } }

@-webkit-keyframes box-top {
  5% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  10% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  15% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  20% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  25%,
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes box-top {
  5% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  10% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  15% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  20% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  25%,
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }

@-webkit-keyframes jellyFade {
  0% {
    -webkit-transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 0; }
  3.333333% {
    -webkit-transform: matrix3d(0.27125, 0, 0, 0, 0, 0.27125, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.27125, 0, 0, 0, 0, 0.27125, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 1; }
  6.666667% {
    -webkit-transform: matrix3d(0.68901, 0, 0, 0, 0, 0.68901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.68901, 0, 0, 0, 0, 0.68901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% {
    -webkit-transform: matrix3d(0.99573, 0, 0, 0, 0, 0.99573, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99573, 0, 0, 0, 0, 0.99573, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% {
    -webkit-transform: matrix3d(1.1207, 0, 0, 0, 0, 1.1207, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.1207, 0, 0, 0, 0, 1.1207, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% {
    -webkit-transform: matrix3d(1.12409, 0, 0, 0, 0, 1.12409, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.12409, 0, 0, 0, 0, 1.12409, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% {
    -webkit-transform: matrix3d(1.08207, 0, 0, 0, 0, 1.08207, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.08207, 0, 0, 0, 0, 1.08207, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% {
    -webkit-transform: matrix3d(1.03978, 0, 0, 0, 0, 1.03978, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.03978, 0, 0, 0, 0, 1.03978, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% {
    -webkit-transform: matrix3d(1.01256, 0, 0, 0, 0, 1.01256, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.01256, 0, 0, 0, 0, 1.01256, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% {
    -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% {
    -webkit-transform: matrix3d(0.99637, 0, 0, 0, 0, 0.99637, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99637, 0, 0, 0, 0, 0.99637, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% {
    -webkit-transform: matrix3d(0.99686, 0, 0, 0, 0, 0.99686, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99686, 0, 0, 0, 0, 0.99686, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% {
    -webkit-transform: matrix3d(0.9983, 0, 0, 0, 0, 0.9983, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.9983, 0, 0, 0, 0, 0.9983, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% {
    -webkit-transform: matrix3d(0.99939, 0, 0, 0, 0, 0.99939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99939, 0, 0, 0, 0, 0.99939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% {
    -webkit-transform: matrix3d(0.99989, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99989, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% {
    -webkit-transform: matrix3d(0.99996, 0, 0, 0, 0, 0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99996, 0, 0, 0, 0, 0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% {
    -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% {
    -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% {
    -webkit-transform: matrix3d(0.99993, 0, 0, 0, 0, 0.99993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99993, 0, 0, 0, 0, 0.99993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% {
    -webkit-transform: matrix3d(0.99997, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99997, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% {
    -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% {
    -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% {
    -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% {
    -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@keyframes jellyFade {
  0% {
    -webkit-transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 0; }
  3.333333% {
    -webkit-transform: matrix3d(0.27125, 0, 0, 0, 0, 0.27125, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.27125, 0, 0, 0, 0, 0.27125, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 1; }
  6.666667% {
    -webkit-transform: matrix3d(0.68901, 0, 0, 0, 0, 0.68901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.68901, 0, 0, 0, 0, 0.68901, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% {
    -webkit-transform: matrix3d(0.99573, 0, 0, 0, 0, 0.99573, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99573, 0, 0, 0, 0, 0.99573, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% {
    -webkit-transform: matrix3d(1.1207, 0, 0, 0, 0, 1.1207, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.1207, 0, 0, 0, 0, 1.1207, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% {
    -webkit-transform: matrix3d(1.12409, 0, 0, 0, 0, 1.12409, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.12409, 0, 0, 0, 0, 1.12409, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% {
    -webkit-transform: matrix3d(1.08207, 0, 0, 0, 0, 1.08207, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.08207, 0, 0, 0, 0, 1.08207, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% {
    -webkit-transform: matrix3d(1.03978, 0, 0, 0, 0, 1.03978, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.03978, 0, 0, 0, 0, 1.03978, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% {
    -webkit-transform: matrix3d(1.01256, 0, 0, 0, 0, 1.01256, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.01256, 0, 0, 0, 0, 1.01256, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% {
    -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% {
    -webkit-transform: matrix3d(0.99637, 0, 0, 0, 0, 0.99637, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99637, 0, 0, 0, 0, 0.99637, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% {
    -webkit-transform: matrix3d(0.99686, 0, 0, 0, 0, 0.99686, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99686, 0, 0, 0, 0, 0.99686, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% {
    -webkit-transform: matrix3d(0.9983, 0, 0, 0, 0, 0.9983, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.9983, 0, 0, 0, 0, 0.9983, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% {
    -webkit-transform: matrix3d(0.99939, 0, 0, 0, 0, 0.99939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99939, 0, 0, 0, 0, 0.99939, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% {
    -webkit-transform: matrix3d(0.99989, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99989, 0, 0, 0, 0, 0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% {
    -webkit-transform: matrix3d(0.99996, 0, 0, 0, 0, 0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99996, 0, 0, 0, 0, 0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% {
    -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% {
    -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99991, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% {
    -webkit-transform: matrix3d(0.99993, 0, 0, 0, 0, 0.99993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99993, 0, 0, 0, 0, 0.99993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% {
    -webkit-transform: matrix3d(0.99997, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0.99997, 0, 0, 0, 0, 0.99997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% {
    -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% {
    -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% {
    -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% {
    -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1.00001, 0, 0, 0, 0, 1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@-webkit-keyframes arrowBounce {
  from,
  10% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0); }
  25% {
    -webkit-transform: translateX(-50%) translateY(-0.35rem);
            transform: translateX(-50%) translateY(-0.35rem); }
  32% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0); }
  38% {
    -webkit-transform: translateX(-50%) translateY(-0.15rem);
            transform: translateX(-50%) translateY(-0.15rem); }
  45%,
  100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0); } }

@keyframes arrowBounce {
  from,
  10% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0); }
  25% {
    -webkit-transform: translateX(-50%) translateY(-0.35rem);
            transform: translateX(-50%) translateY(-0.35rem); }
  32% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0); }
  38% {
    -webkit-transform: translateX(-50%) translateY(-0.15rem);
            transform: translateX(-50%) translateY(-0.15rem); }
  45%,
  100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0); } }

@-webkit-keyframes softBounceUp {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.11% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.889, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 0.889, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  7.71% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.183, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.183, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.21% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.12% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  19.02% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.92% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 0.937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.73% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  45.55% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  57.26% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.07% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80.88% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  92.59% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }

@keyframes softBounceUp {
  0% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.11% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.889, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 0.889, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  7.71% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.183, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.183, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.21% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.12% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  19.02% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.92% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 0.937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.73% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  45.55% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  57.26% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.07% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80.88% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  92.59% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }
@charset "UTF-8";
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
.Modal-buttons::after {
  clear: both;
  content: "";
  display: table; }

/* Mixins
   ========================================================================== */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

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

.AnimatedEllipsis-dot {
  display: inline-block;
  width: 0.2rem;
  opacity: 0;
  -webkit-animation-name: dot-pulse;
          animation-name: dot-pulse;
  -webkit-animation-duration: 2000ms;
          animation-duration: 2000ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms; }
  .AnimatedEllipsis-dot:nth-child(2) {
    -webkit-animation-delay: 350ms;
            animation-delay: 350ms; }
  .AnimatedEllipsis-dot:nth-child(3) {
    -webkit-animation-delay: 700ms;
            animation-delay: 700ms; }

@-webkit-keyframes dot-pulse {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes dot-pulse {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/** @define AppShell */
.AppShell {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%; }

.AppShell-header {
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

.AppShell-content {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  position: relative; }

.AppShell-dockBottom {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0; }

.AppShell-toast {
  bottom: 0;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: fixed;
  width: 100%;
  z-index: 600; }

.AppShell-indicator {
  bottom: 1rem;
  left: 50%;
  position: fixed;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 600; }

/* Modifier: With Champ bar.
   ========================================================================== */
.AppShell--withChampBar .AppShell-footer {
  padding-bottom: 3rem; }
  @media (min-width: 50rem) {
    .AppShell--withChampBar .AppShell-footer {
      padding-bottom: 4.2rem; } }

/* State: Transitioning child content
  ========================================================================== */
.AppShell-content.is-transitioningContent {
  overflow: hidden; }

/** @define Arrange */
/**
 * This component lets you lay out a row of cells in various ways. You can
 * specify whether a cell should be wide enough to fit its content, or take up
 * the remaining space in the row. It's also possible to give all cells an
 * equal width, and to control their vertical alignment.
 */
/**
 * 1. Protect against the component expanding beyond the confines of its
 *    container if properties affecting the box-model are applied to the
 *    component. Mainly necessary because of (5).
 * 2. Rely on table layout.
 * 3. Zero out the default spacing that might be on an element (e.g., `ul`).
 * 4. Make sure the component fills at least the full width of its parent.
 * 5. Reset the table-layout algorithm in case a component is nested.
 */
.Arrange {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  display: table;
  /* 2 */
  margin: 0;
  /* 3 */
  min-width: 100%;
  /* 4 */
  padding: 0;
  /* 3 */
  table-layout: auto;
  /* 5 */ }

/**
 * There are two possible types of child. `sizeFill` will expand to fill all
 * of the remaining space not filled by `sizeFit` elements.
 *
 * 1. Zero out any default spacing that might be on an element (e.g., `li`);
 *    Margin has no effect when coupled with `display: table-cell`.
 * 2. All cells are top-aligned by default
 */
.Arrange-sizeFill,
.Arrange-sizeFit {
  display: table-cell;
  padding: 0;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/**
 * Make sure the main content block expands to fill the remaining space.
 */
.Arrange-sizeFill {
  width: 100%; }

/**
 * Where possible, protect against large images breaking the layout. Prevent them from
 * exceeding the width of the main content block by making them fluid.
 *
 * Only work for all browsers with the `Arrange--equally` variant. For Firefox
 * and IE to constrain image dimensions for other layouts, large images will
 * need their width set to `100%`.
 */
.Arrange-sizeFill img {
  height: auto;
  max-width: 100%; }

/**
 * Defend against a side-effect of this layout pattern: images in
 * 'Arrange-sizeFit' cannot be fluid, otherwise they lose their ability to
 * provide size to a cell.
 */
.Arrange-sizeFit img {
  max-width: none !important;
  width: auto !important; }

/* Vertical alignment modifiers
   ========================================================================== */
.Arrange--middle > .Arrange-sizeFill,
.Arrange--middle > .Arrange-sizeFit {
  vertical-align: middle; }

.Arrange--bottom > .Arrange-sizeFill,
.Arrange--bottom > .Arrange-sizeFit {
  vertical-align: bottom; }

/* Equal-width modifier
   ========================================================================== */
/**
 * This layout algorithm will create equal-width table cells, irrespective of
 * the width of their content.
 *
 * 1. The layout algorithm requires a set width to correctly calculate table
 *    cell width.
 */
.Arrange--equal {
  table-layout: fixed;
  width: 100%;
  /* 1 */ }

/**
 * Give the cells an equal width. This value ensures that Arrange is still 100%
 * wide when gutters are used in conjunctions with equal-width cells.
 *
 * It's recommended that only 'Arrange-sizeFill' be used for equal width cells.
 * Their inner images will automatically be responsive.
 */
.Arrange--equal > .Arrange-sizeFill,
.Arrange--equal > .Arrange-sizeFit {
  width: 1%; }

/* Gutter modifier
   ========================================================================== */
/**
 * Add a gutter between cells
 *
 * NOTE: this can trigger a horizontal scrollbar if the component is as wide as
 * the viewport. Use padding on a container, or `overflow-x:hidden` to protect
 * against it.
 */
.Arrange--withGutter {
  margin: 0 calc(-0.5 * var(--Arrange-gutter-size)); }

.Arrange--withGutter > .Arrange-sizeFit,
.Arrange--withGutter > .Arrange-sizeFill {
  padding: 0 calc(0.5 * var(--Arrange-gutter-size)); }

.Card {
  background: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  overflow: hidden; }

.Card-media {
  width: 100%; }

.Card-mediaImg {
  width: 100%;
  vertical-align: top; }

.Card-mediaPlay {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  background-size: 40% 40%;
  background-position: calc(50% + 3px) center;
  border-radius: 100rem; }

.Card-content {
  padding: 1rem;
  text-align: left; }

.Card-meta,
.Card-title,
.Card-body {
  margin-top: 0;
  margin-bottom: 0.5rem; }

.Card-meta {
  margin: 0;
  color: #555;
  font-size: 0.75rem; }

.Card-newIndicator {
  font-weight: bold;
  text-transform: uppercase; }

.Card-newIndicator::before {
  content: '';
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.25rem;
  background-color: #5e1cca;
  border-radius: 100rem; }

.Card-title {
  color: #333;
  font-size: 1.25rem;
  font-weight: bold; }

.Card-body,
.Card-list {
  font-size: 0.875rem;
  color: #333; }

.Card-list {
  padding-left: 1.15rem; }

.Card-suffix {
  font-size: 0.875rem;
  width: 100%;
  margin-top: auto;
  padding: 0.5rem;
  background-color: #555;
  color: #fff;
  font-weight: bold;
  text-align: center; }

/* Media overlay modifier
   ========================================================================== */
.Card--overlay .Card-media {
  position: relative; }

.Card--overlay .Card-media::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(85, 85, 85, 0.5); }

/* Modifier: Extra horizontal padding on wide screens.
   ========================================================================== */
@media screen and (min-width: 50rem) {
  .Card--fat .Card-content {
    padding-left: 4rem;
    padding-right: 4rem; } }

/* Modifier: Cap width for fixed media.
   ========================================================================== */
.Card--capWidth {
  max-width: 18.75rem; }

.CardPage {
  background-color: #fff; }
  @media screen and (min-width: 60rem) {
    .CardPage {
      background-color: #f5f5f5; } }

.CardPage-content {
  max-width: 60rem;
  margin: 0;
  padding: 2rem;
  background-color: #fff;
  border-radius: 0; }
  @media screen and (min-width: 60rem) {
    .CardPage-content {
      margin: 2rem auto;
      padding: 4rem;
      border-radius: 6px; } }

/**
 * 1. Force Chrome to render avatar on a separate layer. Without this, the child
 *    image ignores the parent's `border-radius` and overflows.
 */
.ChampAvatar {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  border: 0.3em solid #fff;
  border-radius: 100rem;
  overflow: hidden;
  will-change: transform;
  /* 1 */
  position: relative; }

.ChampAvatar-champ {
  height: 150%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  width: 150%; }

.ChampAvatar-img {
  height: 100%;
  left: 50%;
  max-width: none;
  position: absolute;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }

/* Modifier: vw controlled border width
   ========================================================================== */
.ChampAvatar--vwBorder {
  border-width: 0.33vw; }

/* Modifier: Light gray border.
   ========================================================================== */
.ChampAvatar--grayBorder {
  background-color: #fff;
  border-color: #f5f5f5; }

/* Modifier: Green background
   ========================================================================== */
.ChampAvatar--greenBackground {
  background-color: #48c842; }

/* Modifier: No Champ chosen after graduation
   ========================================================================== */
.ChampAvatar--noChamp:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 4em;
  color: #999;
  content: '?';
  font-family: "tk", Verdana, sans-serif; }

.DropDown {
  position: relative; }

.DropDown-menu {
  position: absolute;
  top: 100%;
  left: -0.15em;
  display: none;
  width: 16em;
  margin-top: 0.5rem;
  padding: 0.25em 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
  text-align: left;
  z-index: 100;
  line-height: 1.5; }
  @media screen and (min-width: 20rem) and (max-width: 39.9375rem) {
    .DropDown-menu {
      font-size: 0.875rem; } }

.DropDown-menuItem {
  border-bottom: 1px solid #eee;
  color: #5e1cca;
  display: block;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.75em 1em;
  text-align: inherit;
  text-decoration: none;
  width: 100%; }
  .DropDown-menuItem:hover {
    background-color: #f7f7f7; }

.DropDown-menuItem:last-child {
  border-bottom: 0; }

/* Modifiers: Alignment
   ========================================================================== */
.DropDown--alignRight .DropDown-menu {
  right: -0.15em;
  left: auto; }

/* States
   ========================================================================== */
.DropDown.is-open .DropDown-menu {
  display: block; }

/**
 * Structure for a header with three sections: left, middle, and right. Left and right are intended
 * for navigation buttons. Middle should contain headers only.
 */
.HeaderSimple {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

/* Left and right sections for navigation buttons.
   ========================================================================== */
.HeaderSimple-left,
.HeaderSimple-right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }

.HeaderSimple-left {
  left: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .HeaderSimple-left {
      left: 2rem; } }

.HeaderSimple-right {
  right: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .HeaderSimple-right {
      right: 2rem; } }

/* Middle section for header.
   ========================================================================== */
.HeaderSimple-mid {
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .HeaderSimple-mid {
      width: calc(100% - 12rem); } }

.HeaderSimple-title {
  font-size: 1.5rem;
  margin-top: 4.5vh;
  margin-bottom: 4.5vh; }
  @media screen and (min-width: 40rem) {
    .HeaderSimple-title {
      font-size: 2rem; } }
  @media screen and (min-width: 100rem) {
    .HeaderSimple-title {
      font-size: 2.5rem; } }

.HeaderSimple-subTitle {
  font-size: 1rem;
  margin: -4.5vh auto 4.5vh;
  max-width: 32em; }
  @media screen and (min-width: 40rem) {
    .HeaderSimple-subTitle {
      font-size: 1.25rem; } }

@-webkit-keyframes fadePulse {
  0% {
    opacity: 0.05; }
  50% {
    opacity: 0.1; }
  100% {
    opacity: 0.05; } }

@keyframes fadePulse {
  0% {
    opacity: 0.05; }
  50% {
    opacity: 0.1; }
  100% {
    opacity: 0.05; } }

.Image {
  background-color: #e2e2e2;
  display: block;
  height: 0;
  padding-top: 100%;
  position: relative;
  width: 100%; }

.Image::before {
  -webkit-animation: fadePulse 1500ms infinite;
          animation: fadePulse 1500ms infinite;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45%;
  height: 0;
  padding-top: 83.333%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+cGhvdG88L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik04LjAxNTYyNSw2LjAxNTYyNSBDOC4wMTU2MjUsNi42NzE4NzUgNy43ODEyNSw3LjIzNDM3NSA3LjMxMjUsNy43MDMxMjUgQzYuODQzNzUsOC4xNzE4NzUgNi4yODEyNSw4LjQwNjI1IDUuNTc4MTI1LDguNDA2MjUgQzQuOTIxODc1LDguNDA2MjUgNC4zNTkzNzUsOC4xNzE4NzUgMy44OTA2MjUsNy43MDMxMjUgQzMuNDIxODc1LDcuMjM0Mzc1IDMuMTg3NSw2LjY3MTg3NSAzLjE4NzUsNi4wMTU2MjUgQzMuMTg3NSw1LjMxMjUgMy40MjE4NzUsNC43NSAzLjg5MDYyNSw0LjI4MTI1IEM0LjM1OTM3NSwzLjgxMjUgNC45MjE4NzUsMy41NzgxMjUgNS41NzgxMjUsMy41NzgxMjUgQzYuMjgxMjUsMy41NzgxMjUgNi44NDM3NSwzLjgxMjUgNy4zMTI1LDQuMjgxMjUgQzcuNzgxMjUsNC43NSA4LjAxNTYyNSw1LjMxMjUgOC4wMTU2MjUsNi4wMTU2MjUgTDguMDE1NjI1LDYuMDE1NjI1IFogTTIwLjgxMjUsMTAuNzk2ODc1IEwyMC44MTI1LDE2LjQyMTg3NSBMMy4xODc1LDE2LjQyMTg3NSBMMy4xODc1LDEzLjk4NDM3NSBMNy4yMTg3NSwxMCBMOS4xODc1LDEyLjAxNTYyNSBMMTUuNjA5Mzc1LDUuNTkzNzUgTDIwLjgxMjUsMTAuNzk2ODc1IFogTTIxLjk4NDM3NSwxLjk4NDM3NSBMMi4wMTU2MjUsMS45ODQzNzUgQzEuODc1LDEuOTg0Mzc1IDEuNzgxMjUsMi4wMzEyNSAxLjczNDM3NSwyLjEyNSBDMS42NDA2MjUsMi4yMTg3NSAxLjU5Mzc1LDIuMzEyNSAxLjU5Mzc1LDIuNDA2MjUgTDEuNTkzNzUsMTcuNTkzNzUgQzEuNTkzNzUsMTcuNjg3NSAxLjY0MDYyNSwxNy43ODEyNSAxLjczNDM3NSwxNy44NzUgQzEuNzgxMjUsMTcuOTY4NzUgMS44NzUsMTguMDE1NjI1IDIuMDE1NjI1LDE4LjAxNTYyNSBMMjEuOTg0Mzc1LDE4LjAxNTYyNSBDMjIuMTI1LDE4LjAxNTYyNSAyMi4yMTg3NSwxNy45Njg3NSAyMi4yNjU2MjUsMTcuODc1IEMyMi4zNTkzNzUsMTcuNzgxMjUgMjIuNDA2MjUsMTcuNjg3NSAyMi40MDYyNSwxNy41OTM3NSBMMjIuNDA2MjUsMi40MDYyNSBDMjIuNDA2MjUsMi4zMTI1IDIyLjM1OTM3NSwyLjIxODc1IDIyLjI2NTYyNSwyLjEyNSBDMjIuMjE4NzUsMi4wMzEyNSAyMi4xMjUsMS45ODQzNzUgMjEuOTg0Mzc1LDEuOTg0Mzc1IEwyMS45ODQzNzUsMS45ODQzNzUgWiBNMjQsMi40MDYyNSBMMjQsMTcuNTkzNzUgQzI0LDE4LjE1NjI1IDIzLjgxMjUsMTguNjI1IDIzLjM5MDYyNSwxOSBDMjMuMDE1NjI1LDE5LjQyMTg3NSAyMi41NDY4NzUsMTkuNjA5Mzc1IDIxLjk4NDM3NSwxOS42MDkzNzUgTDIuMDE1NjI1LDE5LjYwOTM3NSBDMS40NTMxMjUsMTkuNjA5Mzc1IDAuOTg0Mzc1LDE5LjQyMTg3NSAwLjYwOTM3NSwxOSBDMC4xODc1LDE4LjYyNSAwLDE4LjE1NjI1IDAsMTcuNTkzNzUgTDAsMi40MDYyNSBDMCwxLjg0Mzc1IDAuMTg3NSwxLjM3NSAwLjYwOTM3NSwxIEMwLjk4NDM3NSwwLjU3ODEyNSAxLjQ1MzEyNSwwLjM5MDYyNSAyLjAxNTYyNSwwLjM5MDYyNSBMMjEuOTg0Mzc1LDAuMzkwNjI1IEMyMi41NDY4NzUsMC4zOTA2MjUgMjMuMDE1NjI1LDAuNTc4MTI1IDIzLjM5MDYyNSwxIEMyMy44MTI1LDEuMzc1IDI0LDEuODQzNzUgMjQsMi40MDYyNSBMMjQsMi40MDYyNSBaIiBpZD0icGhvdG8iIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0.1; }

.Image.isLoaded::before {
  -webkit-animation: none;
          animation: none;
  opacity: 0; }

.Image-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.Image-fadeIn {
  opacity: 0; }

.Indicator {
  background-color: #5e1cca;
  border-radius: 100rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.5em 1.25em;
  text-transform: uppercase;
  white-space: nowrap; }

.Indicator--warning {
  background-color: #fecf2f;
  color: #000; }

.LogoFlip {
  display: none;
  position: relative;
  width: 14em;
  height: 14em;
  margin: 0 auto;
  cursor: default;
  z-index: -1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }
  @media screen and (min-width: 40rem) {
    .LogoFlip {
      display: block; } }
  .LogoFlip::before {
    -webkit-animation: rotate 34s linear infinite;
            animation: rotate 34s linear infinite;
    content: '';
    display: block;
    position: absolute;
    top: -8em;
    right: -8em;
    bottom: -8em;
    left: -8em;
    background: url("https://assets-gnp-ssl.gonoodle.com/image-assets/teacher/progress/progress-starburst-bg.png") center center no-repeat;
    background-size: contain;
    z-index: 1; }

.LogoFlip-image {
  display: block;
  max-width: 100%;
  z-index: 8; }

.LogoFlip-flipper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.LogoFlip-side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.LogoFlip-front {
  z-index: 3; }

.LogoFlip-back {
  z-index: 2; }

.MasqueradeIndicator {
  background-color: #eb0055;
  border-radius: 6px;
  border: 0.25em solid #fff;
  -webkit-box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
  color: #fff;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.5em 0.75em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap; }
  @media only screen and (min-width: 40rem) {
    .MasqueradeIndicator {
      font-size: 0.875rem; } }

.Pagination {
  margin-bottom: 4rem;
  font-size: 0.875rem;
  text-align: center; }

.Pagination-innerContainer {
  display: inline-block; }

.Pagination-page {
  display: inline-block;
  padding: 0.2rem 0.95rem;
  border-radius: 6px;
  color: #777; }

.Pagination-page--active {
  background-color: #5e1cca;
  color: #fff; }

.Pagination-navItem {
  padding: 0.25rem 0.75rem;
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15); }

.Pagination-navItem:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: translateY(0.25em);
          transform: translateY(0.25em); }

.Pagination-navItemIcon {
  opacity: 0.35; }

.PopIn {
  -webkit-animation-duration: 0.375s;
          animation-duration: 0.375s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: pop-in-fade-simple;
          animation-name: pop-in-fade-simple;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(0);
          transform: translateZ(0) scale(0);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.PopIn:nth-of-type(1) {
  -webkit-animation-delay: 0.19s;
          animation-delay: 0.19s; }

.PopIn:nth-of-type(2) {
  -webkit-animation-delay: 0.23s;
          animation-delay: 0.23s; }

.PopIn:nth-of-type(3) {
  -webkit-animation-delay: 0.27s;
          animation-delay: 0.27s; }

.PopIn:nth-of-type(4) {
  -webkit-animation-delay: 0.31s;
          animation-delay: 0.31s; }

.PopIn:nth-of-type(5) {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s; }

.PopIn:nth-of-type(6) {
  -webkit-animation-delay: 0.39s;
          animation-delay: 0.39s; }

.PopIn:nth-of-type(7) {
  -webkit-animation-delay: 0.43s;
          animation-delay: 0.43s; }

.PopIn:nth-of-type(8) {
  -webkit-animation-delay: 0.47s;
          animation-delay: 0.47s; }

.PopIn:nth-of-type(9) {
  -webkit-animation-delay: 0.51s;
          animation-delay: 0.51s; }

.PopIn:nth-of-type(10) {
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s; }

.PopIn:nth-of-type(11) {
  -webkit-animation-delay: 0.59s;
          animation-delay: 0.59s; }

.PopIn:nth-of-type(12) {
  -webkit-animation-delay: 0.63s;
          animation-delay: 0.63s; }

.PopIn:nth-of-type(13) {
  -webkit-animation-delay: 0.67s;
          animation-delay: 0.67s; }

.PopIn:nth-of-type(14) {
  -webkit-animation-delay: 0.71s;
          animation-delay: 0.71s; }

.PopIn:nth-of-type(15) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s; }

.PopIn:nth-of-type(16) {
  -webkit-animation-delay: 0.79s;
          animation-delay: 0.79s; }

.PopIn:nth-of-type(17) {
  -webkit-animation-delay: 0.83s;
          animation-delay: 0.83s; }

.PopIn:nth-of-type(18) {
  -webkit-animation-delay: 0.87s;
          animation-delay: 0.87s; }

.PopIn:nth-of-type(19) {
  -webkit-animation-delay: 0.91s;
          animation-delay: 0.91s; }

.PopIn:nth-of-type(20) {
  -webkit-animation-delay: 0.95s;
          animation-delay: 0.95s; }

.selectized + .parsley-errors-list {
  right: 5.5em; }

.selectize-input {
  background-color: #fff;
  border-radius: 4px;
  border: 3px solid #6e6e6e;
  -webkit-box-shadow: 0 2px 0 #6e6e6e;
          box-shadow: 0 2px 0 #6e6e6e;
  color: #666;
  cursor: pointer;
  font-size: 1.5em;
  padding: 1em 0.75em;
  position: relative;
  width: 100%; }
  .selectize-input:before {
    content: "\E014";
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'gn-icons';
    color: #666;
    font-size: 1.25em;
    padding: 0 0.75em;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); }
    @media screen and (max-width: 600px) {
      .selectize-input:before {
        display: none; } }
  .selectize-input.input-active {
    border-color: #5e1cca;
    -webkit-box-shadow: 0 3px 0 #5e1cca;
            box-shadow: 0 3px 0 #5e1cca; }
    .selectize-input.input-active:before {
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-transform: none;
      line-height: 1;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      font-family: 'gn-icons';
      color: #5e1cca; }
  .selectize-input.dropdown-active {
    border-bottom-color: #5e1cca;
    border-radius: 4px 4px 0 0;
    -webkit-box-shadow: 0 2px 0 #5e1cca;
            box-shadow: 0 2px 0 #5e1cca; }

.selectize-control.no-results .selectize-input {
  border-radius: 4px 4px 0 0;
  -webkit-box-shadow: 0 2px 0 #5e1cca;
          box-shadow: 0 2px 0 #5e1cca; }

.selectize-input .item {
  display: inline-block; }

.selectize-input input {
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  padding: 0; }

.selectize-dropdown {
  border-radius: 0 0 4px 4px;
  color: #fff;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  z-index: 200; }

.selectize-dropdown-content {
  max-height: 20em;
  overflow-x: hidden;
  overflow-y: auto; }

.selectize-dropdown-content > div {
  background-color: #5e1cca;
  cursor: pointer;
  font-size: 1.25em;
  padding: 0.75em; }
  .selectize-dropdown-content > div:hover, .selectize-dropdown-content > div.active {
    background-color: #5519b6; }

.selectize-dropdown-content > div:last-child {
  border-radius: 0 0 4px 4px; }

.selectize-dropdown-content .no-results {
  font-size: 0.875em;
  font-weight: 400;
  padding-left: 1.5em; }

.Tabs-nav {
  background-color: #f5f5f5;
  border-bottom: 1px solid #dbdbdb;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 1rem 0; }

.Tabs-btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #777;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: bold;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem;
  position: relative;
  text-align: center;
  top: 1px;
  /* Cover up bottom border */ }
  .Tabs-btn.is-active {
    background-color: #fff;
    border-radius: 6px 6px 0 0;
    border: 1px solid #dbdbdb;
    border-bottom-color: #fff;
    color: #000; }
  .Tabs-btn:hover {
    color: #5e1cca; }

/* Modifier: Make tab nav display correctly in modals
   ========================================================================== */
/**
 * 1. Use 2 pixel `calc` to allow Modal's pseudo element's border visibility.
 */
.Tabs--modal .Tabs-nav {
  margin: 2px calc(-1rem + 2px) calc(2rem + 2px);
  /* 1 */ }
  @media screen and (min-width: 600px) {
    .Tabs--modal .Tabs-nav {
      margin: 2px calc(-2rem + 2px) calc(2rem + 2px);
      /* 1 */ } }

.qtip {
  position: absolute;
  left: -28000px;
  top: -28000px;
  -webkit-transform: translateY(-25%);
          transform: translateY(-25%);
  display: none;
  max-width: 17.5rem;
  min-width: 3rem;
  padding: 0 1rem;
  background: #fff;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.25);
          box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.25); }

.qtip-tip {
  position: absolute;
  background-color: #fff;
  border-color: #fff; }

.qtip-bodyIE {
  min-width: 80%; }

/* Modifier: A gray background
   ========================================================================== */
.qtip--dark {
  background-color: #eee; }
  .qtip--dark .qtip-tip {
    background-color: #eee;
    border-color: #eee; }

.TopBar {
  background-color: #5e1cca; }

.TopBar-link {
  display: inline-block;
  padding: 1rem;
  color: #fff; }

.TopBar-title {
  font-size: 1.25rem;
  margin: 0;
  padding: 1rem;
  background: #5e1cca;
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .TopBar-title {
      font-size: 1.5rem; } }
  @media screen and (min-width: 60rem) {
    .TopBar-title {
      font-size: 1.75rem; } }

.TopBar-titleLink {
  color: #fff;
  display: block;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  margin-left: 0;
  margin-top: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .TopBar-titleLink {
      display: inline;
      margin-left: 0.25rem;
      position: relative;
      top: -0.2rem;
      /* Visually align */ } }

.TopBar-titleLinkText {
  border-bottom: 1px solid currentColor; }

.TopBar-sponsor {
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
  background-color: #fff;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .TopBar-sponsor {
      text-align: right; } }
  @media screen and (min-width: 50rem) {
    .TopBar-sponsor {
      font-size: 1rem; } }

.TopBar-sponsorLink {
  color: #333; }

.TopBar-sponsorLink:hover {
  color: gray; }

.TopBar-sponsorText {
  border-bottom: 1px solid currentColor; }

.TopBar-sponsorImg {
  max-height: 3rem;
  max-width: 9.25rem;
  margin-left: 0.5rem;
  vertical-align: middle; }

.PlusPartnerLogo {
  max-width: 18.75rem;
  max-height: 9rem; }

.SponsorBanner {
  background-color: #1a6ef9;
  border-radius: 0.2rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  position: relative; }

.SponsorBanner--left {
  border-radius: 0.2rem 0.2rem 0.2rem 0; }

.SponsorBanner--left::before,
.SponsorBanner--right::before {
  border-top: 5px solid #043890;
  bottom: -5px;
  content: '';
  position: absolute; }

.SponsorBanner--left::before {
  border-left: 5px solid transparent;
  left: 0; }

.SponsorBanner--right {
  border-radius: 0.2rem 0.2rem 0 0.2rem; }

.SponsorBanner--right::before {
  border-right: 5px solid transparent;
  right: 0; }

.Toggle {
  -webkit-tap-hightlight-color: rgba(0, 0, 0, 0);
  display: block;
  position: relative;
  padding: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  @media screen and (min-width: 40rem) {
    .Toggle {
      display: table;
      min-width: 100%;
      table-layout: auto; } }

.Toggle-input {
  display: none; }

.Toggle-label,
.Toggle-wrapper {
  display: block; }
  @media screen and (min-width: 40rem) {
    .Toggle-label,
    .Toggle-wrapper {
      display: table-cell;
      padding: 0;
      vertical-align: middle; } }

.Toggle-label {
  margin-bottom: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .Toggle-label {
      margin-bottom: 0;
      padding-right: 1rem;
      text-align: left; } }

.Toggle-wrapper {
  width: 7.25em;
  font-size: 0.75rem; }
  @media screen and (min-width: 40rem) {
    .Toggle-wrapper {
      font-size: 0.85rem; } }

.Toggle-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow: hidden;
  background-color: #eee;
  border-radius: 5px;
  color: #999;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-property: background-color color;
  transition-property: background-color color;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out; }
  .Toggle-inner::before, .Toggle-inner::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    width: 50%;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem; }
  .Toggle-inner::before {
    content: 'On';
    padding-left: 1.25em;
    text-align: left; }
  .Toggle-inner::after {
    content: 'Off';
    padding-right: 1.25em;
    text-align: right; }

.Toggle-switch {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3em;
  margin: 0.5em;
  background-color: #fff;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(0, 0, 0, 0.15);
  -webkit-transform: translateX(-3.25em);
          transform: translateX(-3.25em);
  -webkit-transition: -webkit-transform 300ms ease-in-out;
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out; }

.Toggle-input:checked + .Toggle-wrapper .Toggle-inner {
  background-color: #5e1cca;
  color: #fff; }

.Toggle-input:checked + .Toggle-wrapper .Toggle-switch {
  -webkit-transform: translateX(0);
          transform: translateX(0); }

.PlusPartnerCredit {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
  background-color: #fff;
  border-radius: 6px;
  text-align: center; }

.PlusPartnerCredit-byline {
  color: #777; }

.PlusPartnerCredit-featureImage {
  max-width: 5.75rem;
  margin-top: -3.5rem; }

.Flash {
  position: relative;
  margin: 2rem auto;
  padding: 1em;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  color: #333; }
  @media screen and (min-width: 40rem) {
    .Flash {
      font-size: 1rem; } }
  @media screen and (min-width: 60rem) {
    .Flash {
      font-size: 1.125rem; } }
  .Flash > p:first-of-type {
    margin-top: 0; }
  .Flash > p:last-of-type {
    margin-bottom: 0; }

.Flash-container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 300; }

.Flash-container--bottom {
  top: auto;
  bottom: 0; }

.Flash-message {
  vertical-align: middle; }

/**
 * This `.Flash--withIcon` modifier must come immediately before the `-icon`
 * decendents below in order for Neat's `row` and `span-columns` mixins to work
 * properly.
 */
.Flash--withIcon {
  display: table;
  width: 100%;
  table-layout: fixed;
  width: auto; }

.Flash-icon {
  font-size: 2rem;
  vertical-align: middle; }
  @media screen and (min-width: 600px) {
    .Flash-icon {
      margin-right: 1rem; } }

.Flash-iconContainer {
  display: inline-block; }
  @media screen and (max-width: 599px) {
    .Flash-iconContainer {
      display: table-cell;
      width: 16.66667%;
      vertical-align: middle; } }

.Flash-iconContainer + .Flash-message {
  display: inline-block; }
  @media screen and (max-width: 599px) {
    .Flash-iconContainer + .Flash-message {
      display: table-cell;
      width: 83.33333%;
      padding-left: 0.5rem;
      text-align: left;
      vertical-align: middle; } }

.Flash-action {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 1rem; }
  @media screen and (min-width: 600px) {
    .Flash-action {
      right: 1.35rem; } }

.Flash-help {
  font-size: 2rem; }

/* Modifier: Smaller, compact Flash.
   ========================================================================== */
.Flash--sm {
  font-size: 0.85rem;
  padding: 0.5em; }

/* Modifier: Larger Flash.
   ========================================================================== */
@media screen and (min-width: 600px) {
  .Flash--lg {
    font-size: 1rem;
    padding: 2rem; } }

@media screen and (min-width: 1020px) {
  .Flash--lg {
    font-size: 1.5rem; } }

/* DEPRECATED: Use u-sizeFull. Modifier: Full width of parent.
   ========================================================================== */
.Flash--fullWidth {
  width: 100%; }

/* Modifier: Right padding for icons
   ========================================================================== */
.Flash--padRight {
  padding-right: 4rem;
  text-align: left; }
  @media screen and (min-width: 600px) {
    .Flash--padRight {
      text-align: center; } }

/* Modifier: Informative context color.
   ========================================================================== */
.Flash--info {
  background: #fecf2f;
  color: #fff;
  -webkit-box-shadow: 0 0.25rem 0 #e5ba2a;
          box-shadow: 0 0.25rem 0 #e5ba2a; }
  .Flash--info a,
  .Flash--info .BtnLink {
    color: #fff;
    border-bottom-color: #fff; }
  .Flash--info a:visited,
  .Flash--info .BtnLink:visited {
    color: #fff; }
  .Flash--info a:hover,
  .Flash--info a:active,
  .Flash--info .BtnLink:hover,
  .Flash--info .BtnLink:active {
    color: #e6e6e6; }

/* Modifier: Success context color.
   ========================================================================== */
.Flash--success {
  background: #5e1cca;
  color: #fff;
  -webkit-box-shadow: 0 0.25rem 0 #5519b6;
          box-shadow: 0 0.25rem 0 #5519b6; }
  .Flash--success a,
  .Flash--success .BtnLink {
    color: #fff;
    border-bottom-color: #fff; }
  .Flash--success a:visited,
  .Flash--success .BtnLink:visited {
    color: #fff; }
  .Flash--success a:hover,
  .Flash--success a:active,
  .Flash--success .BtnLink:hover,
  .Flash--success .BtnLink:active {
    color: #e6e6e6; }

/* Modifier: Warning context color.
   ========================================================================== */
.Flash--warning {
  background: #fecf2f;
  color: #333;
  -webkit-box-shadow: 0 0.25rem 0 #e5ba2a;
          box-shadow: 0 0.25rem 0 #e5ba2a; }
  .Flash--warning a,
  .Flash--warning .BtnLink {
    color: #333;
    border-bottom-color: #333; }
  .Flash--warning a:visited,
  .Flash--warning .BtnLink:visited {
    color: #333; }
  .Flash--warning a:hover,
  .Flash--warning a:active,
  .Flash--warning .BtnLink:hover,
  .Flash--warning .BtnLink:active {
    color: #1a1a1a; }

/* Modifier: Error context color.
   ========================================================================== */
.Flash--error {
  background: #eb0055;
  color: #fff;
  -webkit-box-shadow: 0 0.25rem 0 #d4004d;
          box-shadow: 0 0.25rem 0 #d4004d; }
  .Flash--error a,
  .Flash--error .BtnLink {
    color: #fff;
    border-bottom-color: #fff; }
  .Flash--error a:visited,
  .Flash--error .BtnLink:visited {
    color: #fff; }
  .Flash--error a:hover,
  .Flash--error a:active,
  .Flash--error .BtnLink:hover,
  .Flash--error .BtnLink:active {
    color: #e6e6e6; }

/* Modifier: Subdued gray.
   ========================================================================== */
.Flash--subdued {
  background: #bababa;
  color: #333;
  -webkit-box-shadow: 0 0.25rem 0 #a7a7a7;
          box-shadow: 0 0.25rem 0 #a7a7a7; }
  .Flash--subdued a,
  .Flash--subdued .BtnLink {
    color: #333;
    border-bottom-color: #333; }
  .Flash--subdued a:visited,
  .Flash--subdued .BtnLink:visited {
    color: #333; }
  .Flash--subdued a:hover,
  .Flash--subdued a:active,
  .Flash--subdued .BtnLink:hover,
  .Flash--subdued .BtnLink:active {
    color: #1a1a1a; }

/* Modifier: Create a flush appearance
   ========================================================================== */
.Flash--flat {
  margin: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none; }

/* Modifier: No drop shadow
   ========================================================================== */
.Flash--noShadow {
  -webkit-box-shadow: none;
          box-shadow: none; }

/* Modifier: Bouncing animation
   ========================================================================== */
@-webkit-keyframes jello {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  40% {
    -webkit-transform: scale3d(1, 1.5, 1);
            transform: scale3d(1, 1.5, 1); }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  65% {
    -webkit-transform: scale3d(1, 1.1, 1);
            transform: scale3d(1, 1.1, 1); }
  75% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }
@keyframes jello {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  40% {
    -webkit-transform: scale3d(1, 1.5, 1);
            transform: scale3d(1, 1.5, 1); }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  65% {
    -webkit-transform: scale3d(1, 1.1, 1);
            transform: scale3d(1, 1.1, 1); }
  75% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.Flash--jello {
  -webkit-animation: jello 1.5s ease-in-out infinite;
          animation: jello 1.5s ease-in-out infinite;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  will-change: transform; }

/* State: Paused animation
   ========================================================================== */
/**
 * 1. For whatever reason, iOS does ignores `animation-play-state: paused;`
 */
.Flash.is-paused {
  -webkit-animation: none;
          animation: none;
  /* 1 */ }

.Modal,
.bbm-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  bottom: 0;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
  z-index: 700; }
  .Modal:before,
  .bbm-wrapper:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; }
  @media screen and (min-width: 600px) {
    .Modal,
    .bbm-wrapper {
      padding: 1rem; } }

.Modal-inner,
.bbm-modal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.15s ease-in-out 0.15s;
  transition: all 0.15s ease-in-out 0.15s;
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
  margin: 0 auto;
  max-width: 29.6875rem;
  padding: 2rem 1rem 1rem;
  position: relative;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .Modal-inner,
    .bbm-modal {
      padding-left: 2rem;
      padding-right: 2rem; } }
  .Modal-inner.bbm-modal--open,
  .bbm-modal.bbm-modal--open {
    -webkit-transform: scale(1);
            transform: scale(1); }

.Modal-inner::after,
.Modal-inner::before,
.bbm-modal::after,
.bbm-modal::before {
  content: '';
  height: 100%;
  position: absolute;
  width: 100%; }

.Modal-inner::after,
.bbm-modal::after {
  background-color: #fff;
  border: 0.125rem solid #000;
  left: 0;
  top: 0;
  z-index: -2; }

.Modal-inner::before,
.bbm-modal::before {
  background-color: #5e1cca;
  border: 0.125rem solid #000;
  left: 0.5rem;
  position: absolute;
  top: 0.5rem;
  z-index: -3; }

.Modal-content {
  font-size: 1.125rem;
  text-align: center; }

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll; }

/**
 * iOS Mobile Safari has issues rendering fix position elements alongside * the virtual
 * keyboard (1). Since we have modals with inputs within them, we instead render all modals for iOS
 * devices with absolute positioning.
 *
 * 1. http://getbootstrap.com/getting-started/#virtual-keyboards
 */
html.ios .gn-body.bbm-open::after {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 500;
  background-color: rgba(34, 34, 34, 0.25); }

html.ios .bbm-wrapper {
  position: absolute;
  height: 100%;
  background: transparent;
  overflow: visible; }

.Modal-header,
.modal-header {
  margin-bottom: 1.5em;
  text-align: center; }
  .Modal-header h1,
  .modal-header h1 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
    color: #333; }

.Modal-body,
.modal-body {
  color: #333; }

.modal-close-small {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  display: block;
  font-size: 1.125rem;
  width: 2em;
  height: 2em;
  padding: 1em;
  z-index: 2;
  background-color: #000;
  border: 3px solid #fff;
  border-radius: 100em;
  color: #fff;
  font-weight: 700;
  text-align: center;
  cursor: pointer; }
  .modal-close-small:before {
    content: "\E019";
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'gn-icons';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -0.5em;
    margin-left: -0.5em; }
  .modal-close-small:hover {
    background-color: #5e1cca;
    color: #fff; }

.bbm-wrapper.modal-fullscreen {
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  padding: 2em; }
  .bbm-wrapper.modal-fullscreen::before {
    display: none; }
  .bbm-wrapper.modal-fullscreen .bbm-modal {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transition: opacity 0.3s ease-in-out 0.5s;
    transition: opacity 0.3s ease-in-out 0.5s;
    max-width: none;
    min-height: 100%;
    padding: 1.5em;
    background-color: #2d0a6e;
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    color: #fff;
    opacity: 0; }
    .bbm-wrapper.modal-fullscreen .bbm-modal.bbm-modal--open {
      opacity: 1; }
    .bbm-wrapper.modal-fullscreen .bbm-modal h1 {
      color: #fff; }

/**
 * 1. Two pixel calc used to allow Modal pseudo element border visibility.
 */
.modal-image {
  position: relative;
  margin: calc(-2rem + 2px) calc(-1rem + 2px) calc(2rem + 2px);
  /* 1 */
  overflow: hidden; }
  @media screen and (min-width: 50rem) {
    .modal-image {
      margin-right: calc(-2rem + 2px);
      /* 1 */
      margin-left: calc(-2rem + 2px);
      /* 1 */ } }
  .modal-image img {
    position: relative;
    display: block;
    max-width: 100%; }

.modal-body .modal-image {
  margin-top: 2em;
  margin-bottom: 0; }
  .modal-body .modal-image + .Modal-buttons {
    margin-top: 0; }

/* Modifier: Modal topper used to display an image above the top of a modal.
   ========================================================================== */
.Modal--topper .bbm-modal {
  padding-top: 0; }

.Modal--topper .bbm-modal::before,
.Modal--topper .Modal-topper {
  border-radius: 100rem;
  height: 9.25rem;
  width: 9.25rem; }

/**
 * Add a circle element behind the topper image. This is to support putting a
 * modal with a topper into the loading state.
 */
.Modal--topper .bbm-modal::before {
  background-color: #fff;
  content: '';
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 0; }

.Modal--topper .Modal-topper {
  margin: -4.625rem auto 2em;
  overflow: hidden;
  position: relative;
  z-index: 100; }

/* Modifier: Use tab component with a modal
   ========================================================================== */
.Modal--tabs .bbm-modal {
  padding-top: 0; }

.Modal-buttons {
  border-top: 0.125rem solid #eee;
  margin-top: 2rem;
  padding-top: 1rem;
  position: relative;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .Modal-buttons {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-right: -1rem;
      margin-left: -1rem; } }
  .Modal-buttons .Btn {
    display: block;
    font-size: 1em;
    margin-bottom: 1em;
    width: 100%; }
    .Modal-buttons .Btn:last-child {
      margin-bottom: 0; }
    @media screen and (min-width: 50rem) {
      .Modal-buttons .Btn {
        margin-bottom: 0; }
        .Modal-buttons .Btn:only-child {
          -webkit-box-flex: 1;
              -ms-flex-positive: 1;
                  flex-grow: 1; }
        .Modal-buttons .Btn:not(:only-child) {
          margin-left: auto;
          margin-right: auto;
          padding-left: 0.5em;
          padding-right: 0.5em;
          width: 46%; } }
  .Modal-buttons .Btn--block:not(:last-child) {
    margin-bottom: 1em; }

.Modal-buttons--centered {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .Modal-buttons--centered .Btn:only-child {
    display: inline-block;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    width: auto; }

.Modal--centered .bbm-modal,
.modal-centered .bbm-modal {
  text-align: center; }
  .Modal--centered .bbm-modal .flash,
  .modal-centered .bbm-modal .flash {
    padding: 0.5em 1em;
    font-size: 0.9em;
    text-align: left; }

.modal-p0 .bbm-modal {
  padding: 0; }

.Modal--sm .bbm-modal {
  max-width: 25rem; }

.Modal--lg .bbm-modal {
  max-width: 30rem; }

.Modal--xlg .bbm-modal {
  max-width: 35rem; }

.Modal--xxlg .bbm-modal {
  max-width: 56rem; }

.view-session-expired .bbm-modal {
  max-width: 26em; }
  .view-session-expired .bbm-modal p {
    margin: 0; }
  .view-session-expired .bbm-modal .Btn {
    display: block;
    text-align: center; }

/* State: Loading state that blurs the modal content beneath the indicator.
   ========================================================================== */
.Modal.is-loading .Modal-content {
  opacity: 0.1; }

.modal-demo-ftue .bbm-modal,
.modal-points-intro .bbm-modal {
  max-width: 26em;
  overflow: hidden; }
  .modal-demo-ftue .bbm-modal .modal-header,
  .modal-points-intro .bbm-modal .modal-header {
    padding-bottom: 0; }
  .modal-demo-ftue .bbm-modal p,
  .modal-points-intro .bbm-modal p {
    text-align: center; }

/** @define Grid */
/**
 * Core grid component
 *
 * DO NOT apply dimension or offset utilities to the `Grid` element. All cell
 * widths and offsets should be applied to child grid cells.
 */
/* Grid container
   ========================================================================== */
/**
 * All content must be contained within child `Grid-cell` elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 */
.Grid {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* 1 */
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  margin: 0;
  /* 1 */
  padding: 0;
  /* 1 */ }

/**
 * Modifier: prevent cells stretching to fill parent height
 */
.Grid--noStretch {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start; }

/**
 * Modifier: center align all grid cells
 */
.Grid--alignCenter {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

/**
 * Modifier: right align all grid cells
 */
.Grid--alignRight {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

/**
 * Modifier: middle-align grid cells
 */
.Grid--alignMiddle {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

/**
 * Modifier: bottom-align grid cells
 */
.Grid--alignBottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; }

/**
 * Modifier: allow cells to equal distribute width
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis - http://git.io/vllWx
 */
.Grid--fit > .Grid-cell {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  /* 1 */ }

/**
 * Modifier: all cells match height of tallest cell in a row
 */
.Grid--equalHeight > .Grid-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

/**
 * Modifier: gutters
 */
.Grid--withGutter {
  margin: 0 calc(-0.5 * 0.625rem); }
  @media screen and (min-width: 40rem) {
    .Grid--withGutter {
      margin: 0 -0.625rem; } }

.Grid--withGutter > .Grid-cell {
  padding: 0 calc(0.5 * 0.625rem); }
  @media screen and (min-width: 40rem) {
    .Grid--withGutter > .Grid-cell {
      padding: 0 0.625rem; } }

/* Grid cell
   ========================================================================== */
/**
 * No explicit width by default. Rely on combining `Grid-cell` with a dimension
 * utility or a component class that extends 'Grid'.
 *
 * 1. Set flex items to full width by default
 */
.Grid-cell {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  /* 1 */ }

/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `Grid` object.
 */
.Grid-cell--center {
  margin: 0 auto; }
@font-face {
  font-family: 'gn-icons';
  font-weight: normal;
  font-style: normal;
  src: url(/assets/ea1737c6bbb7354606c840569c4a0048.woff2) format("woff2"), url(/assets/44c253d693425c37042a7aaecb909bff.woff) format("woff"); }

/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2015 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Typedepot
 * License URL: http://www.fontspring.com/licenses/typedepot/webfont
 *
 *
 */
@font-face {
  font-family: 'csr';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/70d721134655f2adb68cc6d8b41e8971.woff2) format("woff2"), url(/assets/297bcce846f6001d1131fda27bf447eb.woff) format("woff"); }

@font-face {
  font-family: 'csr';
  font-weight: 700;
  font-style: normal;
  src: url(/assets/d66b24cdb422f656d479973cc002be48.woff2) format("woff2"), url(/assets/fe2da2a6996edb261f9e124f46cf9a0c.woff) format("woff"); }

@font-face {
  font-family: 'tk';
  font-weight: bold;
  font-style: normal;
  src: url(/assets/0ccc697642241138318e81addc16c568.woff2) format("woff2"), url(/assets/d14cd196185674db11b133ac9491a150.woff) format("woff"); }
@charset "UTF-8";
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
.layout-video-manager {
  max-width: 80em;
  margin: 0 auto;
  padding: 1em 1em 10em;
  text-align: center; }
  @media screen and (min-width: 600px) {
    .layout-video-manager {
      padding: 2em 2em 10em; } }

/* Mixins
   ========================================================================== */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

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

.layout-dashboard {
  background: #666 url("https://assets-gnp-ssl.gonoodle.com/image-assets/shared/backgrounds/bg-gray-swirly.png"); }

.dashboard-wrapper {
  position: relative;
  background-color: #f5f5f5;
  overflow: auto;
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
  z-index: 200; }

@-webkit-keyframes nav-active {
  0% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5); }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }

@keyframes nav-active {
  0% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5); }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }

.dashboard-header {
  position: relative;
  padding: 1em 2em;
  margin-bottom: 2em;
  border-top: 10px solid #5e1cca;
  z-index: 10;
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none; }
  @media screen and (min-width: 600px) {
    .dashboard-header {
      display: table;
      width: 100%;
      table-layout: fixed; } }
  .dashboard-header .dashboard-logo {
    display: block;
    width: 10rem;
    margin: 0 auto 1em; }
    @media screen and (min-width: 600px) {
      .dashboard-header .dashboard-logo {
        display: inline-block;
        vertical-align: middle;
        margin-right: 1em;
        margin-bottom: 0; } }
  .dashboard-header .nav-dashboard {
    text-align: center; }
    @media screen and (min-width: 600px) {
      .dashboard-header .nav-dashboard {
        display: table-cell;
        width: 77.08333%;
        text-align: left; } }
    .dashboard-header .nav-dashboard .Btn {
      position: relative;
      padding: 0.25em 0.5em;
      margin-bottom: 1em;
      font-family: "tk", Verdana, sans-serif;
      letter-spacing: -0.05em;
      color: #5e1cca;
      border-radius: 0.3125em; }
      @media screen and (min-width: 600px) {
        .dashboard-header .nav-dashboard .Btn {
          margin-bottom: 0;
          padding: 0.875em 1em; } }
      @media screen and (min-width: 1020px) {
        .dashboard-header .nav-dashboard .Btn {
          margin-right: 0.25em; }
          .dashboard-header .nav-dashboard .Btn:last-child {
            margin-right: 0; } }
      .dashboard-header .nav-dashboard .Btn:hover {
        color: #49169d; }
      .dashboard-header .nav-dashboard .Btn.active {
        color: #fff;
        cursor: pointer; }
        .dashboard-header .nav-dashboard .Btn.active span {
          -webkit-transform: scaleY(0.5);
                  transform: scaleY(0.5);
          -webkit-animation: nav-active 0.2s 1 forwards;
                  animation: nav-active 0.2s 1 forwards;
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: -1;
          border-radius: 0.3125em;
          background: #5e1cca; }
  .dashboard-header .nav-tools {
    text-align: center; }
    @media screen and (min-width: 600px) {
      .dashboard-header .nav-tools {
        display: table-cell;
        width: 22.91667%;
        text-align: right; } }
    .dashboard-header .nav-tools .DropDown {
      display: inline-block; }
    .dashboard-header .nav-tools .BtnIcon {
      margin: 0 0 0.25em 0.5em;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0); }
      .dashboard-header .nav-tools .BtnIcon:first-child {
        margin-left: 0; }
      @media screen and (min-width: 1020px) {
        .dashboard-header .nav-tools .BtnIcon {
          margin-left: 1em; }
          .dashboard-header .nav-tools .BtnIcon:first-child {
            margin-left: 0; } }

.layout-dashboard.dashboard-first-use .nav-dashboard .Btn,
.layout-dashboard.dashboard-first-use .DashboardFooter {
  display: none; }

.view-settings {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  padding: 2em; }
  @media screen and (min-width: 600px) {
    .view-settings {
      width: 28em; } }
  .view-settings .setting-item {
    margin-bottom: 1em; }
    .view-settings .setting-item:last-child {
      margin: 0; }
  .view-settings .Btn {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    margin-bottom: 1em; }

.setting-item hr {
  margin-right: -2em;
  margin-left: -2em; }

.change-schools {
  margin-left: 0.25em;
  font-size: 0.85em;
  color: #5e1cca; }

.settings-group-wrapper {
  margin-bottom: 1.25em;
  padding: 1em;
  overflow: hidden;
  border-radius: 4px;
  background-color: #fff;
  -webkit-box-shadow: 0 4px 0 #ccc;
          box-shadow: 0 4px 0 #ccc; }

.settings-group-header {
  padding: 1em;
  margin: -1em -1em 0;
  background-color: #eee; }

.subscription-settings .settings-group-header {
  margin-bottom: 2em;
  background-color: #eee; }

.subscription-settings img {
  display: block;
  max-width: 25%;
  margin: -2em auto; }

.subscription-settings a {
  border-bottom: 1px solid #5e1cca; }

.bbm-modal .password-wrapper {
  padding-left: 3em; }

/**
 * 1. HACK: Account for IE including the scrollbar width when determining the 100% width of the
 *    footer. The use of `div` scrolling rather than `body` may be a cause for this issue. We should
 *    considering bringing back `body` scrolling.
 */
.ie .DashboardFooter {
  width: calc(100% - 16px);
  /* 1 */ }

.plus-partner-promotion {
  padding: 1em 0;
  background-color: #fff;
  text-align: center; }
  .plus-partner-promotion::before {
    content: '';
    display: block;
    position: absolute;
    top: -0.9em;
    right: 0;
    left: 0;
    width: 100%;
    height: 1em;
    background: url("https://assets-gnp-ssl.gonoodle.com/image-assets/teacher/misc/scalloped-border.svg") left top repeat-x;
    background-size: contain; }
  .plus-partner-promotion .plus-partner-logo {
    position: relative;
    margin-right: 1em;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    max-width: 10em;
    max-height: 4em;
    background: transparent; }
  .plus-partner-promotion p {
    display: inline-block;
    vertical-align: middle;
    font-family: "csr", Verdana, sans-serif;
    color: #666; }
    .plus-partner-promotion p a {
      border-bottom: 1px solid #5e1cca;
      color: #5e1cca;
      font-weight: 700; }

.plus-promotion {
  padding: 1.5em 1em;
  background: #5e1cca;
  text-align: center; }
  .plus-promotion::before {
    content: '';
    display: block;
    position: absolute;
    top: -0.9em;
    right: 0;
    left: 0;
    width: 100%;
    height: 1em;
    background: url("https://assets-gnp-ssl.gonoodle.com/image-assets/teacher/misc/scalloped-border-orange.svg") left top repeat-x;
    background-size: contain; }
  .plus-promotion p {
    color: #fff; }
  .plus-promotion p,
  .plus-promotion .Btn {
    display: inline-block;
    font-size: 1em;
    font-weight: 700; }
  .plus-promotion .BtnLink {
    border-color: #fff;
    color: #fff; }
  .plus-promotion .Btn, .plus-promotion .Btn:hover, .plus-promotion .Btn:visited, .plus-promotion .Btn:active {
    color: #333; }
  @media screen and (min-width: 600px) {
    .plus-promotion .Btn {
      margin-left: 1em; } }

.plus-promotion.expiring {
  background-color: #eb0055; }
  .plus-promotion.expiring::before {
    display: none; }

.trial-remaining {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  padding: 0.5em 0;
  background-color: #fff;
  text-align: center;
  z-index: 1; }
  .trial-remaining::before {
    content: '';
    display: block;
    position: absolute;
    top: -0.9em;
    right: 0;
    left: 0;
    width: 100%;
    height: 1em;
    background: url("https://assets-gnp-ssl.gonoodle.com/image-assets/teacher/misc/scalloped-border.svg") left top repeat-x;
    background-size: contain; }
  .trial-remaining p:first-child {
    font-size: 1.25em;
    margin-bottom: 0.25em; }
  .trial-remaining p:last-child {
    margin-top: 0;
    font-size: 1em;
    font-weight: 400;
    color: #999; }
  .trial-remaining strong {
    display: inline-block;
    vertical-align: middle;
    font-family: "tk", Verdana, sans-serif;
    font-size: 2.25em;
    color: #5e1cca;
    line-height: 1.1; }

.modal-invite-parents .bbm-modal {
  max-width: 32em;
  padding: 2em 2em;
  text-align: left; }

.modal-invite-parents .modal-image {
  margin-left: -1.875em;
  margin-right: -1.875em; }

.modal-invite-parents .Modal-buttons {
  margin-left: 0;
  margin-right: 0; }

.modal-invite-parents .Btn {
  margin-bottom: 1em; }
  .modal-invite-parents .Btn:last-child {
    margin-bottom: 0; }

.simple-resource-manager {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0; }
  .simple-resource-manager .layout-resource-manager-inner {
    display: inline-block;
    vertical-align: middle;
    width: 100%; }

.layout-resource-manager-inner {
  margin: 0 auto;
  max-width: 80em;
  overflow: hidden;
  padding: 0 1rem;
  text-align: center; }
  @media screen and (min-width: 600px) {
    .layout-resource-manager-inner {
      padding: 0 2rem; } }

.view-resource-list {
  position: relative; }

.view-resource-list .tooltip {
  bottom: -6em;
  left: auto;
  right: 16em;
  top: auto; }

.resource-item {
  cursor: pointer;
  display: inline-block;
  height: 14rem;
  margin-bottom: 2em;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  width: 100%;
  z-index: 0; }
  @media screen and (min-width: 600px) and (max-width: 1019px) {
    .resource-item {
      margin-right: 2%;
      width: 48%; }
      .resource-item:nth-child(2n) {
        margin-right: 0; } }
  @media screen and (min-width: 1020px) {
    .resource-item {
      margin-right: 3%;
      width: 31%; }
      .resource-item:nth-child(3n) {
        margin-right: 0; } }
  .resource-item:last-child {
    margin-right: 0; }
  .resource-item p {
    margin: 0;
    opacity: 0.65; }
    .resource-item p span {
      font-weight: 700; }

html.no-touchevents .resource-item:hover .champ-bg {
  background-size: 108%; }

.resource-item .champ-bg {
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100%;
  border-radius: 0.5em 0.5em 0 0;
  height: 8em;
  left: 0;
  overflow: hidden;
  padding: 1em 2em;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  .resource-item .champ-bg::before {
    background: transparent;
    bottom: 0;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background 0.15s ease-in-out;
    transition: background 0.15s ease-in-out;
    width: 100%; }

.resource-item:hover .champ-bg::before {
  background: rgba(102, 102, 102, 0.5); }

.resource-item.no-champ .champ-bg::before {
  display: none; }

.current-resource-champ {
  height: 8em;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  left: 50%;
  margin-left: -4em;
  margin-top: -4em;
  position: absolute;
  top: 36%;
  width: 8em;
  z-index: 2; }

.resource-item .resource-meta {
  background-color: #fff;
  border-radius: 0 0 0.5em 0.5em;
  bottom: 0;
  -webkit-box-shadow: 0 4px 0 #ccc;
          box-shadow: 0 4px 0 #ccc;
  color: #333;
  font-size: 1.25em;
  font-weight: 700;
  left: 0;
  margin: 0;
  padding: 0.75em 1em;
  padding-top: 1.5em;
  position: absolute;
  right: 0;
  text-align: center; }

.resource-item .resource-name {
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  font-family: "tk", Verdana, sans-serif; }

.resource-item .resource-time {
  color: #666;
  font-size: 0.75em; }

.resource-options {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 2; }
  .resource-options .BtnIcon {
    left: 1em;
    position: absolute;
    top: 0.5em; }
    .resource-options .BtnIcon + .BtnIcon {
      left: auto;
      right: 1em; }

.no-touchevents .resource-item .resource-options {
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out; }
  .no-touchevents .resource-item .resource-options .BtnIcon {
    font-size: 0.85em; }

.no-touchevents .resource-item:hover .resource-options {
  opacity: 1; }

.no-champ .resource-options .BtnIcon {
  background-color: #eee; }
  .no-champ .resource-options .BtnIcon:hover, .no-champ .resource-options .BtnIcon:active {
    background: #e0e0e0; }

.new-resource-link {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none; }
  .new-resource-link.subtleRubberBand {
    -webkit-animation: subtleRubberBand 0.65s ease-in-out 1;
            animation: subtleRubberBand 0.65s ease-in-out 1; }

.new-resource-link-BtnAdd {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.selectize-wrapper select.parsley-error ~ .selectize-control .selectize-input {
  border-color: #eb0055;
  -webkit-box-shadow: 0 4px 0 #eb0055;
          box-shadow: 0 4px 0 #eb0055; }
  .selectize-wrapper select.parsley-error ~ .selectize-control .selectize-input:after {
    border-color: #eb0055; }
  .selectize-wrapper select.parsley-error ~ .selectize-control .selectize-input:before {
    border-top-color: #eb0055; }

.selectize-wrapper .parsley-errors-list {
  right: 5em; }

.modal-delete-class .bbm-modal {
  max-width: 32em; }

.layout-class-manager.first-use {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .layout-class-manager.first-use #region-classrooms-main {
    margin: auto;
    width: 100%; }

.CleverClassroomTooltip {
  height: 6.875rem;
  padding: 1rem;
  width: 13.125rem; }

.Classroom-editButton--clever {
  background-color: #eee;
  cursor: not-allowed; }
  .Classroom-editButton--clever:hover {
    -webkit-transform: none;
            transform: none; }
  .Classroom-editButton--clever .icon-pencil {
    opacity: 0.4; }

.CleverClassroomIndicator {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #436cf2;
  bottom: 0.125rem;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1.375rem;
  left: -0.375rem;
  position: absolute;
  width: 8.75rem; }
  .CleverClassroomIndicator .CleverClassroomIndicator-icon {
    background-image: url(/assets/2658b8c55edf634139c47dffc0bb5c0e.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    height: 1.25rem;
    margin-top: 0.1875rem;
    width: 1.25rem; }

.Arcade {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-flow: row-reverse;
          flex-flow: row-reverse;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 1rem 1.5rem;
  font-size: 4rem; }
  @media screen and (min-width: 620px) {
    .Arcade {
      padding: 2rem 2rem; } }
  @media screen and (min-width: 720px) {
    .Arcade {
      padding: 0 2.25rem 3rem;
      font-size: 6rem; } }
  @media screen and (min-width: 1140px) {
    .Arcade {
      font-size: 8rem; } }
  @media screen and (min-width: 1440px) {
    .Arcade {
      padding: 0 4rem 4rem;
      font-size: 9.5rem; } }

/**
 * 1. IE 10 needs this to respect .Arcade flexbox layout.
 */
.BtnArcade {
  position: relative;
  display: block; }

/**
 * 1. IE 10 needs margin-left auto to keep Play button on right side when it's the only button on
 *    the page.
 */
.BtnArcade-play {
  margin-left: auto; }

.BtnArcade-button {
  width: 1em;
  height: 1em;
  font-size: 1em;
  z-index: 2;
  border: 0.05em solid #fff;
  border-radius: 50%;
  -webkit-box-shadow: inset 0.05em 0.05em 0 rgba(255, 255, 255, 0.25), inset -0.05em -0.05em 0 rgba(0, 0, 0, 0.1);
          box-shadow: inset 0.05em 0.05em 0 rgba(255, 255, 255, 0.25), inset -0.05em -0.05em 0 rgba(0, 0, 0, 0.1);
  background: #5e1cca; }
  .BtnArcade:hover .BtnArcade-button {
    background: #49169d; }

.BtnArcade-image {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%; }
  .BtnArcade:hover .BtnArcade-image {
    -webkit-transform: translate(-50%, -50%) scale(1.15) rotate(-3deg);
            transform: translate(-50%, -50%) scale(1.15) rotate(-3deg); }

.BtnArcade-label {
  position: absolute;
  bottom: -1em;
  left: 50%;
  padding: 0.2em 0.75em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
  font-family: "tk", Verdana, sans-serif;
  font-weight: 700;
  font-size: 0.125em;
  background-color: #fff;
  color: #000;
  border-radius: 100em;
  -webkit-box-shadow: 0 0.2em 0 #ddd;
          box-shadow: 0 0.2em 0 #ddd;
  white-space: nowrap; }

.BtnArcade-champsImage {
  width: 122%; }

.BtnArcade-playImage {
  top: calc(50% + 0.01em);
  left: calc(50% + 0.06em);
  width: 45%; }

.BtnArcade-danceParty:hover .BtnArcade-dancePartyButton {
  background: #534a79; }

.BtnArcade-dancePartyButton {
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  background: #281d57; }
  .BtnArcade-dancePartyButton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0.05em #fff;
            box-shadow: 0 0 0 0.05em #fff; }

.BtnArcade-dancePartyImage {
  width: 80%;
  -webkit-transition: -webkit-transform 0.1s ease-in-out;
  transition: -webkit-transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; }
  .BtnArcade:hover .BtnArcade-dancePartyImage {
    -webkit-transform: translate(-50%, -51%) scale(1.06);
            transform: translate(-50%, -51%) scale(1.06); }
  .BtnArcade-dancePartyImage .DiscoBall::before {
    top: -50%;
    height: 100%; }

.layout-resource-champ {
  background-color: #666;
  background-image: url("https://assets-gnp-ssl.gonoodle.com/image-assets/teacher/stages/waterfall-5.jpg");
  background-position: center bottom;
  background-size: cover;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .layout-resource-champ .flash {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    text-align: center; }

.CurrentChamp {
  height: 100%; }

.champ-header {
  text-align: center; }
  .champ-header h1.classroom-name {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    margin: 0 auto 0.125em;
    max-width: 50%; }
  .champ-header .classroom-total-time {
    color: #666; }
    .champ-header .classroom-total-time:before {
      content: "\E006";
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-transform: none;
      line-height: 1;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      font-family: 'gn-icons';
      vertical-align: -0.145em;
      margin-right: 0.5em; }
  .champ-header #btn-help {
    position: absolute;
    top: 50%;
    right: 2em;
    margin-top: -1.5em;
    z-index: 10; }

.view-current-champ {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  width: 100%; }

.layout-resource-champ .view-current-champ {
  width: calc(100% - 2em);
  max-height: calc(100% - 6rem);
  min-height: 18rem;
  left: 1em; }
  .layout-resource-champ .view-current-champ.level-1 {
    height: calc(40% - 6rem); }
  .layout-resource-champ .view-current-champ.level-2 {
    height: calc(55% - 6rem); }
  .layout-resource-champ .view-current-champ.level-3 {
    height: calc(70% - 6rem); }
  .layout-resource-champ .view-current-champ.level-4 {
    height: calc(82% - 6rem); }

.layout-resource-champ .view-current-champ .champ-image,
.layout-resource-champ .view-current-champ .champ-meta {
  cursor: pointer; }

.view-current-champ.is-chatting .Champ-progressBar {
  opacity: 0; }

.view-current-champ.is-chatting .champ-chat {
  opacity: 1; }

.champ-meta {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 36em;
  max-width: 100%;
  margin-left: -0.1em;
  padding-bottom: 2.5em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-perspective: 50vw;
          perspective: 50vw;
  text-align: center; }
  html.no-preserve3d .champ-meta {
    -webkit-perspective: none;
            perspective: none; }

.Champ-progressBar {
  width: 100%;
  font-size: 0.875rem; }

.layout-resource-champ .champ-image:hover + .champ-meta .ProgressBar-name {
  opacity: 0; }

.layout-resource-champ .champ-image:hover + .champ-meta .ProgressBar-xp {
  opacity: 1; }

.view-reset-resource {
  width: 23em;
  position: absolute;
  top: 7.5rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 0.75em;
  background-color: #fff;
  border: 0.3125em solid #000;
  border-radius: 100em;
  font-size: 0.75rem;
  text-align: center;
  z-index: 100; }
  @media screen and (min-width: 40rem) {
    .view-reset-resource {
      top: 6em;
      left: 2em;
      -webkit-transform: none;
              transform: none; } }
  .view-reset-resource .select-wrapper,
  .view-reset-resource button {
    display: inline-block;
    position: relative;
    width: 30%;
    margin-right: 5%;
    vertical-align: middle; }
  .view-reset-resource input,
  .view-reset-resource button {
    padding: 0.5em; }
  .view-reset-resource .select-wrapper select {
    padding: 0.25em 0.75em; }
  .view-reset-resource button {
    width: auto;
    margin: 0;
    padding: 0;
    line-height: 1.5; }
    .view-reset-resource button:before {
      content: "\E002";
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-transform: none;
      line-height: 1;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      font-family: 'gn-icons';
      font-size: 2.5em;
      vertical-align: middle; }

.champ-chat {
  position: relative;
  bottom: 0;
  display: inline-block;
  width: auto;
  padding: 1em 3em;
  margin-bottom: -4.15rem;
  vertical-align: bottom;
  border: 0.3125rem solid #000;
  opacity: 0;
  background-color: #fff;
  border-radius: 100em;
  -webkit-box-shadow: none;
          box-shadow: none;
  text-align: center; }
  @media screen and (min-width: 600px) {
    .champ-chat {
      margin-right: -5em;
      margin-left: -5em; } }
  .champ-chat::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: -2.1em;
    right: auto;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border: 1em solid transparent;
    border-top-color: #000; }
  .champ-chat p {
    margin: 0;
    color: #000;
    font-family: "tk", Verdana, sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center; }

.view-current-champ .champ-image {
  max-width: calc(100% - 2rem);
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }

/** @define ProgressBar */
/**
 * The font-size of the component's parent will determine the scale this
 * entire component.
 */
.ProgressBar {
  background-color: rgba(0, 0, 0, 0.75);
  border: 0.3em solid #000;
  border-radius: 100rem;
  bottom: 0;
  display: inline-block;
  height: 4.15em;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1em;
  position: relative;
  vertical-align: bottom;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .ProgressBar {
      font-size: 1.25em; } }
  @media screen and (max-height: 39.9375rem) and (max-width: 49.9375rem) and (orientation: landscape) {
    .ProgressBar {
      font-size: 0.565em;
      width: 80%; } }

.ProgressBar::before {
  border: 1em solid transparent;
  border-top-color: #000;
  bottom: -2.1em;
  content: '';
  display: block;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }

/* Highlight on top of progress bar */
.ProgressBar::after {
  border-radius: 100rem;
  -webkit-box-shadow: inset 0 0.75em 0 rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0.75em 0 rgba(255, 255, 255, 0.15);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.ProgressBar-meterWrapper {
  border-radius: 100rem;
  height: 100%;
  overflow: hidden;
  padding-right: 4em;
  position: relative; }

.ProgressBar-meterWrapper::before {
  background-color: #5e1cca;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  width: 2.25rem; }

.ProgressBar-meter {
  background-color: #5e1cca;
  -webkit-box-shadow: 4px 0 6px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 0 6px rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 0; }

.ProgressBar-meter {
  height: 100%;
  margin-left: calc(2.25rem - 1px); }

.ProgressBar-icon {
  font-size: 2.15em;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.ProgressBar-mysteryBoxIcon {
  font-size: 2.75em;
  -webkit-transform: translate(-50%, -50%) rotate(-10deg);
          transform: translate(-50%, -50%) rotate(-10deg);
  will-change: transform; }

.ProgressBar-goalWrap {
  height: 5em;
  position: absolute;
  right: -0.5em;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
  width: 5em;
  z-index: 100; }

.ProgressBar-goal {
  background-color: #000;
  border: 0.45em solid #000;
  border-radius: 100rem;
  color: #fff;
  height: 100%;
  position: relative; }

/* Highlight on top of goal */
.ProgressBar-goal::after {
  border-radius: 100rem;
  -webkit-box-shadow: inset 0 0.75em 0 rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0.75em 0 rgba(255, 255, 255, 0.15);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.ProgressBar-name,
.ProgressBar-xp {
  color: #fff;
  display: inline-block;
  font-size: 1.5em;
  font-weight: 700;
  left: 50%;
  line-height: 1;
  position: absolute;
  text-align: center;
  text-shadow: 0 2px 0 #000;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 100; }

@-webkit-keyframes bubble-pop {
  0% {
    opacity: 0.5;
    -webkit-transform: scale(2.5);
            transform: scale(2.5); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); } }

@keyframes bubble-pop {
  0% {
    opacity: 0.5;
    -webkit-transform: scale(2.5);
            transform: scale(2.5); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); } }

.ProgressBar-bubble {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: #5e1cca;
  border: 0.1em solid #4b16a2;
  border-radius: 100em;
  font-size: 1em;
  height: 1em;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 1em;
  z-index: 200; }

@media screen and (min-width: 40rem) {
  .ProgressBar-bubble {
    font-size: 2em; } }

.ProgressBar-bubble:nth-of-type(2) {
  left: 25%;
  top: 100%; }

.ProgressBar-bubble:nth-of-type(3) {
  left: 40%;
  top: -90%; }

.ProgressBar-bubble:nth-of-type(4) {
  left: 55%;
  top: 110%; }

.ProgressBar-bubble:nth-of-type(5) {
  left: 70%;
  top: -100%; }

.ProgressBar-bubble:nth-of-type(6) {
  left: 95%;
  top: 90%; }

/* Modifier: large size
   ========================================================================== */
.ProgressBar--lg {
  font-size: 0.75rem; }
  @media screen and (min-width: 50rem) {
    .ProgressBar--lg {
      font-size: 1.5rem; } }

/* Modifier: fading name and XP swapping
   ========================================================================== */
.ProgressBar--fadeSwapMeta .ProgressBar-name,
.ProgressBar--fadeSwapMeta .ProgressBar-xp {
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s; }

.ProgressBar--fadeSwapMeta .ProgressBar-xp {
  opacity: 0; }

.ProgressBar--fadeSwapMeta:hover .ProgressBar-name {
  opacity: 0; }

.ProgressBar--fadeSwapMeta:hover .ProgressBar-xp {
  opacity: 1; }

/* Modifier: Only display the XP, no name
   ========================================================================== */
.ProgressBar--noName .ProgressBar-name {
  opacity: 0; }

.ProgressBar--noName .ProgressBar-xp {
  opacity: 1; }

/* Modifier: Pop in animation
   ========================================================================== */
.ProgressBar--popIn {
  -webkit-animation: flipInY 1s ease-in-out 1;
          animation: flipInY 1s ease-in-out 1; }

/* Modifier: Pop out animation
   ========================================================================== */
.ProgressBar--popOut {
  -webkit-animation: flipOutY 0.5s ease-in-out 1 both;
          animation: flipOutY 0.5s ease-in-out 1 both; }

/* State: Disable bubble animation for filled progress bar
   ========================================================================== */
.ProgressBar--bubbling .ProgressBar-bubble {
  -webkit-animation: bubble-pop 1.25s ease-in-out infinite;
          animation: bubble-pop 1.25s ease-in-out infinite; }

.ProgressBar--bubbling .ProgressBar-bubble:nth-of-type(2) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s; }

.ProgressBar--bubbling .ProgressBar-bubble:nth-of-type(3) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }

.ProgressBar--bubbling .ProgressBar-bubble:nth-of-type(4) {
  left: 55%; }

.ProgressBar--bubbling .ProgressBar-bubble:nth-of-type(5) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s; }

.ProgressBar--bubbling .ProgressBar-bubble:nth-of-type(6) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s; }

/* Modifier: Animation to fill the goal bubble with purple and shake
   ========================================================================== */
@-webkit-keyframes progress-goal-fill {
  0% {
    background-color: #000;
    border-color: #000; }
  100% {
    background-color: #5e1cca;
    border-color: #000; } }
@keyframes progress-goal-fill {
  0% {
    background-color: #000;
    border-color: #000; }
  100% {
    background-color: #5e1cca;
    border-color: #000; } }

@-webkit-keyframes progress-meter-shake {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  5% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); }
  10% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); }
  15% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  20% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  30% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); }
  35% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); }
  40% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); }
  45% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  50% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  55% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  60% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  65% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  70% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  75% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg); }
  80% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  85% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg); }
  90% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  95% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); } }

@keyframes progress-meter-shake {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  5% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); }
  10% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); }
  15% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  20% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  30% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); }
  35% {
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg); }
  40% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); }
  45% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  50% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  55% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  60% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  65% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg); }
  70% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  75% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg); }
  80% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg); }
  85% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg); }
  90% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg); }
  95% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg); } }

.ProgressBar--shake .ProgressBar-goal {
  z-index: 12;
  -webkit-animation: progress-meter-shake 1s ease-in-out infinite, progress-goal-fill 1s ease-in-out 1 forwards;
          animation: progress-meter-shake 1s ease-in-out infinite, progress-goal-fill 1s ease-in-out 1 forwards; }

/* Modifier: Animation to "explode" the goal and fill the page
   ========================================================================== */
@-webkit-keyframes progress-goal-blow-up {
  0% {
    background-color: #5e1cca;
    border-color: #5e1cca;
    -webkit-transform: scale(1);
            transform: scale(1); }
  30% {
    background-color: #5e1cca;
    border-color: #5e1cca; }
  100% {
    background-color: #5e1cca;
    border-color: #5e1cca;
    -webkit-transform: rotate(-450deg) scale(100);
            transform: rotate(-450deg) scale(100); } }
@keyframes progress-goal-blow-up {
  0% {
    background-color: #5e1cca;
    border-color: #5e1cca;
    -webkit-transform: scale(1);
            transform: scale(1); }
  30% {
    background-color: #5e1cca;
    border-color: #5e1cca; }
  100% {
    background-color: #5e1cca;
    border-color: #5e1cca;
    -webkit-transform: rotate(-450deg) scale(100);
            transform: rotate(-450deg) scale(100); } }

@-webkit-keyframes progress-goal-icon-fade {
  0% {
    opacity: 1; }
  30%,
  100% {
    opacity: 0; } }

@keyframes progress-goal-icon-fade {
  0% {
    opacity: 1; }
  30%,
  100% {
    opacity: 0; } }

.ProgressBar--explode .ProgressBar-goal {
  -webkit-animation: progress-goal-blow-up 1.5s ease-in-out 1 forwards;
          animation: progress-goal-blow-up 1.5s ease-in-out 1 forwards; }

.ProgressBar--explode .ProgressBar-icon {
  -webkit-animation: progress-goal-icon-fade 1.5s ease-in-out 1 forwards;
          animation: progress-goal-icon-fade 1.5s ease-in-out 1 forwards; }

.view-champs {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  z-index: 600; }

.view-champs.is-transitioning {
  position: fixed !important; }

.view-champs.is-unverified {
  padding-bottom: 7.25rem; }

.champs-list {
  max-width: calc(100% - 2em);
  margin: 0 auto; }

.no-touchevents .champ-card:not(.current):hover {
  -webkit-box-shadow: 0 0.75rem 0.5rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.75rem 0.5rem rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(1.03);
          transform: scale(1.03); }

.champ-card .champ-name {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  color: #333; }
  .champ-card .champ-name h3 {
    margin: 0 0 0.5em;
    padding: 1em 0.75em;
    line-height: 1.1;
    font-size: 1rem; }
    @media screen and (min-width: 1440px) {
      .champ-card .champ-name h3 {
        font-size: 1.5em; } }

.champ-card img {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  margin: 0 auto;
  position: absolute;
  right: auto;
  bottom: -42%;
  left: 50%;
  height: 120%;
  width: 85%; }

.champ-card.squeaky-laroo img {
  bottom: -30%;
  width: 62%; }

.champ-card.bart-reynolds img {
  width: 92%; }

.champ-card.bartleby-trunks img {
  bottom: -35%; }

.champ-card.tangy-bodangy img {
  bottom: -36%;
  width: 110%; }

.champ-card.squatchy-berger img {
  bottom: -35%;
  width: 90%; }

.champ-card.tiny-o-flexem img {
  bottom: -44%; }

.champ-card.mcpufferson img {
  bottom: -38%;
  left: 42%;
  width: 92%; }

.champ-card.oogles-fitzlemon img {
  bottom: -36%; }

.champ-card.freckles-sinclair img {
  bottom: -35%; }

.champ-card.om-petalhead img {
  bottom: -30%;
  width: 75%; }

.champ-card.blob-ross img {
  bottom: -30%; }

.champ-card.mc-wigglewomp img {
  bottom: -35%; }

.champ-card.shane-fonda img {
  bottom: -35%; }

.champ-card.gulps-wodda img {
  bottom: -35%; }

.champ-card.little-rufus img {
  width: 100%;
  left: 55%; }

.champ-card.level-2 img {
  width: 110%; }

.champ-card.level-2.flappy-tuckler img {
  width: 90%; }

.champ-card.level-2.little-rufus img {
  bottom: -35%; }

.champ-card.level-3 img {
  width: 120%; }

.champ-card.level-3.flo-yo img {
  left: 40%; }

.champ-card.level-4 img {
  width: 130%; }

.champ-card.level-4.little-rufus img {
  bottom: -30%; }

.champ-card.level-4.flo-yo img {
  left: 30%; }

.champ-card.graduated {
  background: #5e1cca; }
  .champ-card.graduated .champ-name {
    color: #fff; }
  .champ-card.graduated img {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    position: absolute;
    bottom: -28%;
    left: 50%;
    max-width: none;
    width: 135%;
    height: auto; }

.champ-card.current {
  -webkit-transform: scale(1.08) rotate(-1deg);
          transform: scale(1.08) rotate(-1deg);
  z-index: 2;
  -webkit-box-shadow: 0.65em 0.65em 0 rgba(103, 57, 14, 0.2);
          box-shadow: 0.65em 0.65em 0 rgba(103, 57, 14, 0.2); }
  .champ-card.current::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 0.375rem solid #fecf2f;
    border-radius: 0.675rem;
    -webkit-box-shadow: 0 0 0 0.25rem #fecf2f;
            box-shadow: 0 0 0 0.25rem #fecf2f; }

.champ-card.graduated.rad-chad img {
  width: 120%;
  bottom: -38%; }

.champ-card.graduated.freckles-sinclair img {
  width: 150%;
  bottom: -20%; }

.champ-card.graduated.tiny-o-flexem img {
  width: 125%;
  bottom: -40%; }

.champ-card.graduated.tangy-bodangy img {
  width: 150%;
  bottom: -5%;
  left: 38%; }

.champ-card.graduated.weevil-labeevil img {
  width: 145%; }

.champ-card.graduated.bart-reynolds img {
  width: 155%; }

.champ-card.graduated.chris-shabob img {
  width: 125%;
  bottom: -45%; }

.champ-card.graduated.flo-yo img {
  width: 130%;
  bottom: -12%; }

.champ-card.graduated.penny-gee img {
  width: 125%; }

.champ-card.graduated.squeaky-laroo img {
  width: 170%;
  bottom: -15%;
  left: 35%; }

.champ-card.graduated.om-petalhead img {
  bottom: -20%; }

.champ-card.graduated.just-gary img {
  width: 165%;
  bottom: -65%; }

.champ-card.graduated.blob-ross img {
  bottom: -55%; }

.champ-card.graduated.vince-pylon img {
  width: 150%;
  bottom: -55%; }

.champ-card.graduated.shane-fonda img {
  width: 155%; }

.layout-video-manager {
  max-width: 65em; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

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

.u-alignBaseline {
  vertical-align: baseline; }

.u-alignTop {
  vertical-align: top; }

.u-alignMiddle {
  vertical-align: middle; }

.u-alignBottom {
  vertical-align: bottom; }

.u-bgDefault {
  background-color: #f5f5f5 !important; }

.u-bgGrayDark {
  background-color: #333 !important; }

.u-bgPrimary {
  background-color: #5e1cca !important; }

.u-bgSmoke {
  background-color: #eee !important; }

.u-bgWhite {
  background-color: #fff !important; }

.u-bgShadow {
  -webkit-box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15); }

.u-bgPurpleGradient {
  background: linear-gradient(165deg, #619ad0 0%, #8e53f0 100%); }

.u-rounded {
  border-radius: 6px; }

.u-circle {
  border-radius: 50%; }

.u-roundedTop {
  border-radius: 6px 6px 0 0; }

.u-roundedRight {
  border-radius: 0 6px 6px 0; }

.u-roundedBottom {
  border-radius: 0 0 6px 6px; }

.u-roundedLeft {
  border-radius: 6px 0 0 6px; }

.u-notRounded {
  border-radius: 0; }

.u-borderTop {
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

.u-borderRight {
  border-right: 1px solid rgba(0, 0, 0, 0.1); }

.u-borderBottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.u-borderLeft {
  border-left: 1px solid rgba(0, 0, 0, 0.1); }

.u-black {
  color: #000; }

.u-grayDarker {
  color: #222; }

.u-grayDark {
  color: #333; }

.u-gray {
  color: #555; }

.u-grayLight {
  color: #777; }

.u-grayLighter {
  color: #eee; }

.u-white {
  color: #fff; }

.u-colorPrimary {
  color: #5e1cca; }

.u-colorDanger {
  color: #eb0055; }

.u-blockInput {
  cursor: not-allowed; }

.u-inline {
  display: inline !important; }

.u-block {
  display: block !important; }

.u-inlineBlock {
  display: inline-block !important; }

.u-table {
  display: table !important; }

.u-tableCell {
  display: table-cell !important; }

.u-fullScreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-overflow-scrolling: touch; }

.u-overflowHidden {
  overflow: hidden; }

.u-overflowScroll {
  overflow: scroll; }

.u-overflowAuto {
  overflow: auto; }

.u-clearfix:before,
.u-clearfix:after {
  content: ' ';
  display: table; }

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

.u-left {
  float: left; }

.u-right {
  float: right; }

.u-fit {
  max-width: 100%; }

.u-borderBox {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.u-maxWidth1 {
  max-width: 30rem; }

.u-maxWidth2 {
  max-width: 60rem; }

.u-maxWidth3 {
  max-width: 100rem; }

.u-minFullWidth {
  min-width: 100vh; }

.u-minFullHeight {
  min-height: 100vh; }

.u-heightFull {
  height: 100vh; }

.u-heightFill {
  height: 100%; }

.u-fullScreenTransition.is-transitioning {
  position: fixed !important;
  z-index: 700; }

.u-padScreen {
  padding-right: 0.5rem;
  padding-left: 0.5rem; }
  @media screen and (min-width: 600px) {
    .u-padScreen {
      padding-right: 1rem;
      padding-left: 1rem; } }
  @media screen and (min-width: 50rem) {
    .u-padScreen {
      padding-right: 2rem;
      padding-left: 2rem; } }

.u-scrollbarMeasure {
  height: 50px;
  overflow: scroll;
  position: absolute;
  top: -9999px;
  width: 50px; }

/** @define utilities */
/* Applies to flex container
   ========================================================================== */
/**
 * Container
 */
.u-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; }

.u-flexInline {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important; }

/**
 * Direction: row
 */
.u-flexRow {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important; }

.u-flexRowReverse {
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: reverse !important;
      -ms-flex-direction: row-reverse !important;
          flex-direction: row-reverse !important; }

/**
 * Direction: column
 */
.u-flexCol {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important; }

.u-flexColReverse {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: reverse !important;
      -ms-flex-direction: column-reverse !important;
          flex-direction: column-reverse !important; }

/**
 * Wrap
 */
.u-flexWrap {
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important; }

.u-flexNoWrap {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; }

.u-flexWrapReverse {
  -ms-flex-wrap: wrap-reverse !important;
      flex-wrap: wrap-reverse !important; }

/**
 * Align items along the main axis of the current line of the flex container
 */
.u-flexJustifyStart {
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important; }

.u-flexJustifyEnd {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important; }

.u-flexJustifyCenter {
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important; }

.u-flexJustifyBetween {
  -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important; }

.u-flexJustifyAround {
  -ms-flex-pack: distribute !important;
      justify-content: space-around !important; }

/**
 * Align items in the cross axis of the current line of the flex container
 * Similar to `justify-content` but in the perpendicular direction
 */
.u-flexAlignItemsStart {
  -webkit-box-align: start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important; }

.u-flexAlignItemsEnd {
  -webkit-box-align: end !important;
      -ms-flex-align: end !important;
          align-items: flex-end !important; }

.u-flexAlignItemsCenter {
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important; }

.u-flexAlignItemsStretch {
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important; }

.u-flexAlignItemsBaseline {
  -webkit-box-align: baseline !important;
      -ms-flex-align: baseline !important;
          align-items: baseline !important; }

/**
 * Aligns items within the flex container when there is extra
 * space in the cross-axis
 *
 * Has no effect when there is only one line of flex items.
 */
.u-flexAlignContentStart {
  -ms-flex-line-pack: start !important;
      align-content: flex-start !important; }

.u-flexAlignContentEnd {
  -ms-flex-line-pack: end !important;
      align-content: flex-end !important; }

.u-flexAlignContentCenter {
  -ms-flex-line-pack: center !important;
      align-content: center !important; }

.u-flexAlignContentStretch {
  -ms-flex-line-pack: stretch !important;
      align-content: stretch !important; }

.u-flexAlignContentBetween {
  -ms-flex-line-pack: justify !important;
      align-content: space-between !important; }

.u-flexAlignContentAround {
  -ms-flex-line-pack: distribute !important;
      align-content: space-around !important; }

/**
 * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
 */
/* postcss-bem-linter: ignore */
.u-flex > *,
.u-flexInline > * {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  /* 1 */ }

/* Applies to flex items
   ========================================================================== */
/**
 * Override default alignment of single item when specified by `align-items`
 */
.u-flexAlignSelfStart {
  -ms-flex-item-align: start !important;
      align-self: flex-start !important; }

.u-flexAlignSelfEnd {
  -ms-flex-item-align: end !important;
      align-self: flex-end !important; }

.u-flexAlignSelfCenter {
  -ms-flex-item-align: center !important;
      align-self: center !important; }

.u-flexAlignSelfStretch {
  -ms-flex-item-align: stretch !important;
      align-self: stretch !important; }

.u-flexAlignSelfBaseline {
  -ms-flex-item-align: baseline !important;
      align-self: baseline !important; }

.u-flexAlignSelfAuto {
  -ms-flex-item-align: auto !important;
      align-self: auto !important; }

/**
 * Change order without editing underlying HTML
 */
.u-flexOrderFirst {
  -webkit-box-ordinal-group: 0 !important;
      -ms-flex-order: -1 !important;
          order: -1 !important; }

.u-flexOrderLast {
  -webkit-box-ordinal-group: 2 !important;
      -ms-flex-order: 1 !important;
          order: 1 !important; }

.u-flexOrderNone {
  -webkit-box-ordinal-group: 1 !important;
      -ms-flex-order: 0 !important;
          order: 0 !important; }

/**
 * Specify the flex grow factor, which determines how much the flex item will
 * grow relative to the rest of the flex items in the flex container.
 *
 * Supports 1-5 proportions
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    - http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
 *    instead of `auto` as this matches what the default would be with `flex`
 *    shorthand - http://git.io/vllWx
 */
.u-flexGrow1 {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 0% !important;
          flex: 1 1 0% !important;
  /* 1 */ }

.u-flexGrow2 {
  -webkit-box-flex: 2 !important;
      -ms-flex: 2 1 0% !important;
          flex: 2 1 0% !important; }

.u-flexGrow3 {
  -webkit-box-flex: 3 !important;
      -ms-flex: 3 1 0% !important;
          flex: 3 1 0% !important; }

.u-flexGrow4 {
  -webkit-box-flex: 4 !important;
      -ms-flex: 4 1 0% !important;
          flex: 4 1 0% !important; }

.u-flexGrow5 {
  -webkit-box-flex: 5 !important;
      -ms-flex: 5 1 0% !important;
          flex: 5 1 0% !important; }

/**
 * Aligning with `auto` margins
 * http://www.w3.org/TR/css-flexbox-1/#auto-margins
 */
.u-flexExpand {
  margin: auto !important; }

.u-flexExpandLeft {
  margin-left: auto !important; }

.u-flexExpandRight {
  margin-right: auto !important; }

.u-flexExpandTop {
  margin-top: auto !important; }

.u-flexExpandBottom {
  margin-bottom: auto !important; }

.u-m0 {
  margin: 0 !important; }

.u-mt0 {
  margin-top: 0 !important; }

.u-mr0 {
  margin-right: 0 !important; }

.u-mb0 {
  margin-bottom: 0 !important; }

.u-ml0 {
  margin-left: 0 !important; }

.u-mx0 {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.u-my0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

.u-m1 {
  margin: 0.5rem !important; }

.u-mt1 {
  margin-top: 0.5rem !important; }

.u-mr1 {
  margin-right: 0.5rem !important; }

.u-mb1 {
  margin-bottom: 0.5rem !important; }

.u-ml1 {
  margin-left: 0.5rem !important; }

.u-mx1 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important; }

.u-my1 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important; }

.u-m2 {
  margin: 1rem !important; }

.u-mt2 {
  margin-top: 1rem !important; }

.u-mr2 {
  margin-right: 1rem !important; }

.u-mb2 {
  margin-bottom: 1rem !important; }

.u-ml2 {
  margin-left: 1rem !important; }

.u-mx2 {
  margin-left: 1rem !important;
  margin-right: 1rem !important; }

.u-my2 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important; }

.u-m3 {
  margin: 2rem !important; }

.u-mt3 {
  margin-top: 2rem !important; }

.u-mr3 {
  margin-right: 2rem !important; }

.u-mb3 {
  margin-bottom: 2rem !important; }

.u-ml3 {
  margin-left: 2rem !important; }

.u-mx3 {
  margin-left: 2rem !important;
  margin-right: 2rem !important; }

.u-my3 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important; }

.u-m4 {
  margin: 4rem !important; }

.u-mt4 {
  margin-top: 4rem !important; }

.u-mr4 {
  margin-right: 4rem !important; }

.u-mb4 {
  margin-bottom: 4rem !important; }

.u-ml4 {
  margin-left: 4rem !important; }

.u-mx4 {
  margin-left: 4rem !important;
  margin-right: 4rem !important; }

.u-my4 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important; }

.u-mtn3 {
  margin-top: -2rem !important; }

.u-mxn1 {
  margin-left: -0.5rem !important;
  margin-right: -0.5rem !important; }

.u-mxn2 {
  margin-left: -1rem !important;
  margin-right: -1rem !important; }

.u-mxn3 {
  margin-left: -2rem !important;
  margin-right: -2rem !important; }

.u-mxn4 {
  margin-left: -4rem !important;
  margin-right: -4rem !important; }

.u-mxn3 {
  margin-left: -2rem !important;
  margin-right: -2rem !important; }

.u-mAuto {
  margin: auto !important; }

.u-mlAuto {
  margin-left: auto !important; }

.u-mrAuto {
  margin-right: auto !important; }

.u-mxAuto {
  margin-left: auto !important;
  margin-right: auto !important; }

.u-p0 {
  padding: 0 !important; }

.u-pt0 {
  padding-top: 0 !important; }

.u-pr0 {
  padding-right: 0 !important; }

.u-pb0 {
  padding-bottom: 0 !important; }

.u-pl0 {
  padding-left: 0 !important; }

.u-px0 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.u-py0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.u-p1 {
  padding: 0.5rem !important; }

.u-pt1 {
  padding-top: 0.5rem !important; }

.u-pr1 {
  padding-right: 0.5rem !important; }

.u-pb1 {
  padding-bottom: 0.5rem !important; }

.u-pl1 {
  padding-left: 0.5rem !important; }

.u-py1 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important; }

.u-px1 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important; }

.u-p2 {
  padding: 1rem !important; }

.u-pt2 {
  padding-top: 1rem !important; }

.u-pr2 {
  padding-right: 1rem !important; }

.u-pb2 {
  padding-bottom: 1rem !important; }

.u-pl2 {
  padding-left: 1rem !important; }

.u-py2 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important; }

.u-px2 {
  padding-left: 1rem !important;
  padding-right: 1rem !important; }

.u-p3 {
  padding: 2rem !important; }

.u-pt3 {
  padding-top: 2rem !important; }

.u-pr3 {
  padding-right: 2rem !important; }

.u-pb3 {
  padding-bottom: 2rem !important; }

.u-pl3 {
  padding-left: 2rem !important; }

.u-py3 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important; }

.u-px3 {
  padding-left: 2rem !important;
  padding-right: 2rem !important; }

.u-p4 {
  padding: 4rem !important; }

.u-pt4 {
  padding-top: 4rem !important; }

.u-pr4 {
  padding-right: 4rem !important; }

.u-pb4 {
  padding-bottom: 4rem !important; }

.u-pl4 {
  padding-left: 4rem !important; }

.u-py4 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important; }

.u-px4 {
  padding-left: 4rem !important;
  padding-right: 4rem !important; }

.u-relative {
  position: relative; }

.u-absolute {
  position: absolute; }

.u-fixed {
  position: fixed; }

.u-top0 {
  top: 0; }

.u-right0 {
  right: 0; }

.u-bottom0 {
  bottom: 0; }

.u-left0 {
  left: 0; }

.u-top1 {
  top: 0.5rem; }

.u-right1 {
  right: 0.5rem; }

.u-bottom1 {
  bottom: 0.5rem; }

.u-left1 {
  left: 0.5rem; }

.u-top2 {
  top: 1rem; }

.u-right2 {
  right: 1rem; }

.u-bottom2 {
  bottom: 1rem; }

.u-left2 {
  left: 1rem; }

.u-top3 {
  top: 2rem; }

.u-right3 {
  right: 2rem; }

.u-bottom3 {
  bottom: 2rem; }

.u-left3 {
  left: 2rem; }

.u-top4 {
  top: 4rem; }

.u-right4 {
  right: 4rem; }

.u-bottom4 {
  bottom: 4rem; }

.u-left4 {
  left: 4rem; }

.u-z1 {
  z-index: 1; }

.u-z2 {
  z-index: 2; }

.u-z3 {
  z-index: 3; }

.u-z4 {
  z-index: 4; }

.u-z5 {
  z-index: 5; }

.u-z6 {
  z-index: 6; }

.u-sm-show,
.u-md-show,
.u-pj-show,
.u-lg-show,
.u-xlg-show {
  display: none !important; }

@media screen and (min-width: 20rem) and (max-width: 39.9375rem) {
  .u-sm-show {
    display: block !important; } }

@media screen and (min-width: 40rem) {
  .u-md-show {
    display: block !important; } }

@media screen and (min-width: 50rem) {
  .u-pj-show {
    display: block !important; } }

@media screen and (min-width: 60rem) {
  .u-lg-show {
    display: block !important; } }

@media screen and (min-width: 100rem) {
  .u-xlg-show {
    display: block !important; } }

@media screen and (min-width: 20rem) and (max-width: 39.9375rem) {
  .u-sm-hide {
    display: none !important; } }

@media screen and (min-width: 40rem) {
  .u-md-hide {
    display: none !important; } }

@media screen and (min-width: 50rem) {
  .u-pj-hide {
    display: none !important; } }

@media screen and (min-width: 60rem) {
  .u-lg-hide {
    display: none !important; } }

@media screen and (min-width: 100rem) {
  .u-xlg-hide {
    display: none !important; } }

.u-displayNone {
  display: none !important; }

.u-hide {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); }

/**
 * @define utilities
 * Sizing utilities
 */
/* Proportional widths
   ========================================================================== */
/**
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
 *
 * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
 *    http://git.io/vllMD
 * 2. GoNoodle removed repeating decimals as it caused IE10/11 cells to erroneously wrap
 *    https://git.io/vgdod
 */
/* postcss-bem-linter: ignore */
[class*='u-size'] {
  -ms-flex-preferred-size: auto !important;
      flex-basis: auto !important;
  /* 1 */ }

.u-size1of12 {
  width: 8.333% !important;
  /* 2 */ }

.u-size1of10 {
  width: 10% !important; }

.u-size1of8 {
  width: 12.5% !important; }

.u-size1of6,
.u-size2of12 {
  width: 16.667% !important;
  /* 2 */ }

.u-size1of5,
.u-size2of10 {
  width: 20% !important; }

.u-size1of4,
.u-size2of8,
.u-size3of12 {
  width: 25% !important; }

.u-size3of10 {
  width: 30% !important; }

.u-size1of3,
.u-size2of6,
.u-size4of12 {
  width: 33.333% !important;
  /* 2 */ }

.u-size3of8 {
  width: 37.5% !important; }

.u-size2of5,
.u-size4of10 {
  width: 40% !important; }

.u-size5of12 {
  width: 41.667% !important;
  /* 2 */ }

.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
  width: 50% !important; }

.u-size7of12 {
  width: 58.333% !important;
  /* 2 */ }

.u-size3of5,
.u-size6of10 {
  width: 60% !important; }

.u-size5of8 {
  width: 62.5% !important; }

.u-size2of3,
.u-size4of6,
.u-size8of12 {
  width: 66.667% !important;
  /* 2 */ }

.u-size7of10 {
  width: 70% !important; }

.u-size3of4,
.u-size6of8,
.u-size9of12 {
  width: 75% !important; }

.u-size4of5,
.u-size8of10 {
  width: 80% !important; }

.u-size5of6,
.u-size10of12 {
  width: 83.333% !important;
  /* 2 */ }

.u-size7of8 {
  width: 87.5% !important; }

.u-size9of10 {
  width: 90% !important; }

.u-size11of12 {
  width: 91.667% !important;
  /* 2 */ }

/* Intrinsic widths
   ========================================================================== */
/**
 * Make an element fill the remaining space.
 *
 * 1. Be explicit to work around IE10 bug with shorthand flex - http://git.io/vllC7
 * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes - http://git.io/vllMt
 */
.u-sizeFill {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 0% !important;
          flex: 1 1 0% !important;
  /* 1 */
  -ms-flex-preferred-size: 0% !important;
      flex-basis: 0% !important;
  /* 2 */ }

/**
 * An alternative method to make an element fill the remaining space.
 * Distributes space based on the initial width and height of the element
 *
 * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
 */
.u-sizeFillAlt {
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 auto !important;
          flex: 1 1 auto !important;
  -ms-flex-preferred-size: auto !important;
      flex-basis: auto !important; }

/**
 * Make an element the width of its parent.
 */
.u-sizeFull {
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  display: block !important;
  width: 100% !important; }

/**
 * @define utilities
 * Size: breakpoint 1 (small)
 */
@media (min-width: 20rem) and (max-width: 40rem) {
  /* Proportional widths: breakpoint 1 (small)
     ========================================================================== */
  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   * 2. GoNoodle removed repeating decimals as it caused IE10/11 cells to erroneously wrap
   *    https://git.io/vgdod
   */
  /* postcss-bem-linter: ignore */
  [class*='u-sm-size'] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */ }
  .u-sm-size1of12 {
    width: 8.333% !important;
    /* 2 */ }
  .u-sm-size1of10 {
    width: 10% !important; }
  .u-sm-size1of8 {
    width: 12.5% !important; }
  .u-sm-size1of6,
  .u-sm-size2of12 {
    width: 16.667% !important;
    /* 2 */ }
  .u-sm-size1of5,
  .u-sm-size2of10 {
    width: 20% !important; }
  .u-sm-size1of4,
  .u-sm-size2of8,
  .u-sm-size3of12 {
    width: 25% !important; }
  .u-sm-size3of10 {
    width: 30% !important; }
  .u-sm-size1of3,
  .u-sm-size2of6,
  .u-sm-size4of12 {
    width: 33.333% !important;
    /* 2 */ }
  .u-sm-size3of8 {
    width: 37.5% !important; }
  .u-sm-size2of5,
  .u-sm-size4of10 {
    width: 40% !important; }
  .u-sm-size5of12 {
    width: 41.667% !important;
    /* 2 */ }
  .u-sm-size1of2,
  .u-sm-size2of4,
  .u-sm-size3of6,
  .u-sm-size4of8,
  .u-sm-size5of10,
  .u-sm-size6of12 {
    width: 50% !important; }
  .u-sm-size7of12 {
    width: 58.333% !important;
    /* 2 */ }
  .u-sm-size3of5,
  .u-sm-size6of10 {
    width: 60% !important; }
  .u-sm-size5of8 {
    width: 62.5% !important; }
  .u-sm-size2of3,
  .u-sm-size4of6,
  .u-sm-size8of12 {
    width: 66.667% !important;
    /* 2 */ }
  .u-sm-size7of10 {
    width: 70% !important; }
  .u-sm-size3of4,
  .u-sm-size6of8,
  .u-sm-size9of12 {
    width: 75% !important; }
  .u-sm-size4of5,
  .u-sm-size8of10 {
    width: 80% !important; }
  .u-sm-size5of6,
  .u-sm-size10of12 {
    width: 83.333% !important;
    /* 2 */ }
  .u-sm-size7of8 {
    width: 87.5% !important; }
  .u-sm-size9of10 {
    width: 90% !important; }
  .u-sm-size11of12 {
    width: 91.667% !important;
    /* 2 */ }
  /* Intrinsic widths
     ========================================================================== */
  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex - http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes - http://git.io/vllMt
   */
  .u-sm-sizeFill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important;
    /* 1 */
    -ms-flex-preferred-size: 0% !important;
        flex-basis: 0% !important;
    /* 2 */ }
  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */
  .u-sm-sizeFillAlt {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important; }
  /**
   * Make an element the width of its parent.
   */
  .u-sm-sizeFull {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    display: block !important;
    width: 100% !important; } }

/**
 * @define utilities
 * Size: breakpoint 2 (medium)
 */
@media (min-width: 40rem) {
  /* Proportional widths: breakpoint 1 (md)
     ========================================================================== */
  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   * 2. GoNoodle removed repeating decimals as it caused IE10/11 cells to erroneously wrap
   *    https://git.io/vgdod
   */
  /* postcss-bem-linter: ignore */
  [class*='u-md-size'] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */ }
  .u-md-size1of12 {
    width: 8.333% !important;
    /* 2 */ }
  .u-md-size1of10 {
    width: 10% !important; }
  .u-md-size1of8 {
    width: 12.5% !important; }
  .u-md-size1of6,
  .u-md-size2of12 {
    width: 16.667% !important;
    /* 2 */ }
  .u-md-size1of5,
  .u-md-size2of10 {
    width: 20% !important; }
  .u-md-size1of4,
  .u-md-size2of8,
  .u-md-size3of12 {
    width: 25% !important; }
  .u-md-size3of10 {
    width: 30% !important; }
  .u-md-size1of3,
  .u-md-size2of6,
  .u-md-size4of12 {
    width: 33.333% !important;
    /* 2 */ }
  .u-md-size3of8 {
    width: 37.5% !important; }
  .u-md-size2of5,
  .u-md-size4of10 {
    width: 40% !important; }
  .u-md-size5of12 {
    width: 41.667% !important;
    /* 2 */ }
  .u-md-size1of2,
  .u-md-size2of4,
  .u-md-size3of6,
  .u-md-size4of8,
  .u-md-size5of10,
  .u-md-size6of12 {
    width: 50% !important; }
  .u-md-size7of12 {
    width: 58.333% !important;
    /* 2 */ }
  .u-md-size3of5,
  .u-md-size6of10 {
    width: 60% !important; }
  .u-md-size5of8 {
    width: 62.5% !important; }
  .u-md-size2of3,
  .u-md-size4of6,
  .u-md-size8of12 {
    width: 66.667% !important;
    /* 2 */ }
  .u-md-size7of10 {
    width: 70% !important; }
  .u-md-size3of4,
  .u-md-size6of8,
  .u-md-size9of12 {
    width: 75% !important; }
  .u-md-size4of5,
  .u-md-size8of10 {
    width: 80% !important; }
  .u-md-size5of6,
  .u-md-size10of12 {
    width: calc(100% * 5 / 6) !important; }
  .u-md-size7of8 {
    width: 87.5% !important; }
  .u-md-size9of10 {
    width: 90% !important; }
  .u-md-size11of12 {
    width: 91.667% !important;
    /* 2 */ }
  /* Intrinsic widths
     ========================================================================== */
  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex - http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes - http://git.io/vllMt
   */
  .u-md-sizeFill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important;
    /* 1 */
    -ms-flex-preferred-size: 0% !important;
        flex-basis: 0% !important;
    /* 2 */ }
  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */
  .u-md-sizeFillAlt {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important; }
  /**
   * Make an element the width of its parent.
   */
  .u-md-sizeFull {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    display: block !important;
    width: 100% !important; } }

/**
 * @define utilities
 * Size: breakpoint 3 (projector)
 */
@media (min-width: 50rem) {
  /* Proportional widths: breakpoint 1 (pj)
     ========================================================================== */
  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   * 2. GoNoodle removed repeating decimals as it caused IE10/11 cells to erroneously wrap
   *    https://git.io/vgdod
   */
  /* postcss-bem-linter: ignore */
  [class*='u-pj-size'] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */ }
  .u-pj-size1of12 {
    width: 8.333% !important;
    /* 2 */ }
  .u-pj-size1of10 {
    width: 10% !important; }
  .u-pj-size1of8 {
    width: 12.5% !important; }
  .u-pj-size1of6,
  .u-pj-size2of12 {
    width: 16.667% !important;
    /* 2 */ }
  .u-pj-size1of5,
  .u-pj-size2of10 {
    width: 20% !important; }
  .u-pj-size1of4,
  .u-pj-size2of8,
  .u-pj-size3of12 {
    width: 25% !important; }
  .u-pj-size3of10 {
    width: 30% !important; }
  .u-pj-size1of3,
  .u-pj-size2of6,
  .u-pj-size4of12 {
    width: 33.333% !important;
    /* 2 */ }
  .u-pj-size3of8 {
    width: 37.5% !important; }
  .u-pj-size2of5,
  .u-pj-size4of10 {
    width: 40% !important; }
  .u-pj-size5of12 {
    width: 41.667% !important;
    /* 2 */ }
  .u-pj-size1of2,
  .u-pj-size2of4,
  .u-pj-size3of6,
  .u-pj-size4of8,
  .u-pj-size5of10,
  .u-pj-size6of12 {
    width: 50% !important; }
  .u-pj-size7of12 {
    width: 58.333% !important;
    /* 2 */ }
  .u-pj-size3of5,
  .u-pj-size6of10 {
    width: 60% !important; }
  .u-pj-size5of8 {
    width: 62.5% !important; }
  .u-pj-size2of3,
  .u-pj-size4of6,
  .u-pj-size8of12 {
    width: 66.667% !important;
    /* 2 */ }
  .u-pj-size7of10 {
    width: 70% !important; }
  .u-pj-size3of4,
  .u-pj-size6of8,
  .u-pj-size9of12 {
    width: 75% !important; }
  .u-pj-size4of5,
  .u-pj-size8of10 {
    width: 80% !important; }
  .u-pj-size5of6,
  .u-pj-size10of12 {
    width: calc(100% * 5 / 6) !important; }
  .u-pj-size7of8 {
    width: 87.5% !important; }
  .u-pj-size9of10 {
    width: 90% !important; }
  .u-pj-size11of12 {
    width: 91.667% !important;
    /* 2 */ }
  /* Intrinsic widths
     ========================================================================== */
  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex - http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes - http://git.io/vllMt
   */
  .u-pj-sizeFill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important;
    /* 1 */
    -ms-flex-preferred-size: 0% !important;
        flex-basis: 0% !important;
    /* 2 */ }
  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */
  .u-pj-sizeFillAlt {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important; }
  /**
   * Make an element the width of its parent.
   */
  .u-pj-sizeFull {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    display: block !important;
    width: 100% !important; } }

/**
 * @define utilities
 * Size: breakpoint 3 (large)
 */
@media (min-width: 60rem) {
  /* Proportional widths: breakpoint 1 (lg)
     ========================================================================== */
  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   * 2. GoNoodle removed repeating decimals as it caused IE10/11 cells to erroneously wrap
   *    https://git.io/vgdod
   */
  /* postcss-bem-linter: ignore */
  [class*='u-lg-size'] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */ }
  .u-lg-size1of12 {
    width: 8.333% !important;
    /* 2 */ }
  .u-lg-size1of10 {
    width: 10% !important; }
  .u-lg-size1of8 {
    width: 12.5% !important; }
  .u-lg-size1of6,
  .u-lg-size2of12 {
    width: 16.667% !important;
    /* 2 */ }
  .u-lg-size1of5,
  .u-lg-size2of10 {
    width: 20% !important; }
  .u-lg-size1of4,
  .u-lg-size2of8,
  .u-lg-size3of12 {
    width: 25% !important; }
  .u-lg-size3of10 {
    width: 30% !important; }
  .u-lg-size1of3,
  .u-lg-size2of6,
  .u-lg-size4of12 {
    width: 33.333% !important;
    /* 2 */ }
  .u-lg-size3of8 {
    width: 37.5% !important; }
  .u-lg-size2of5,
  .u-lg-size4of10 {
    width: 40% !important; }
  .u-lg-size5of12 {
    width: 41.667% !important;
    /* 2 */ }
  .u-lg-size1of2,
  .u-lg-size2of4,
  .u-lg-size3of6,
  .u-lg-size4of8,
  .u-lg-size5of10,
  .u-lg-size6of12 {
    width: 50% !important; }
  .u-lg-size7of12 {
    width: 58.333% !important;
    /* 2 */ }
  .u-lg-size3of5,
  .u-lg-size6of10 {
    width: 60% !important; }
  .u-lg-size5of8 {
    width: 62.5% !important; }
  .u-lg-size2of3,
  .u-lg-size4of6,
  .u-lg-size8of12 {
    width: 66.667% !important;
    /* 2 */ }
  .u-lg-size7of10 {
    width: 70% !important; }
  .u-lg-size3of4,
  .u-lg-size6of8,
  .u-lg-size9of12 {
    width: 75% !important; }
  .u-lg-size4of5,
  .u-lg-size8of10 {
    width: 80% !important; }
  .u-lg-size5of6,
  .u-lg-size10of12 {
    width: 83.333% !important;
    /* 2 */ }
  .u-lg-size7of8 {
    width: 87.5% !important; }
  .u-lg-size9of10 {
    width: 90% !important; }
  .u-lg-size11of12 {
    width: 91.667% !important;
    /* 2 */ }
  /* Intrinsic widths
     ========================================================================== */
  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex - http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes - http://git.io/vllMt
   */
  .u-lg-sizeFill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important;
    /* 1 */
    -ms-flex-preferred-size: 0% !important;
        flex-basis: 0% !important;
    /* 2 */ }
  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */
  .u-lg-sizeFillAlt {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important; }
  /**
   * Make an element the width of its parent.
   */
  .u-lg-sizeFull {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    display: block !important;
    width: 100% !important; } }

/**
 * @define utilities
 * Size: breakpoint 4 (xlarge)
 */
@media (min-width: 100rem) {
  /* Proportional widths: breakpoint 1 (xlg)
     ========================================================================== */
  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   * 2. GoNoodle removed repeating decimals as it caused IE10/11 cells to erroneously wrap
   *    https://git.io/vgdod
   */
  /* postcss-bem-linter: ignore */
  [class*='u-xlg-size'] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */ }
  .u-xlg-size1of12 {
    width: 8.333% !important;
    /* 2 */ }
  .u-xlg-size1of10 {
    width: 10% !important; }
  .u-xlg-size1of8 {
    width: 12.5% !important; }
  .u-xlg-size1of6,
  .u-xlg-size2of12 {
    width: 16.667% !important;
    /* 2 */ }
  .u-xlg-size1of5,
  .u-xlg-size2of10 {
    width: 20% !important; }
  .u-xlg-size1of4,
  .u-xlg-size2of8,
  .u-xlg-size3of12 {
    width: 25% !important; }
  .u-xlg-size3of10 {
    width: 30% !important; }
  .u-xlg-size1of3,
  .u-xlg-size2of6,
  .u-xlg-size4of12 {
    width: 33.333% !important;
    /* 2 */ }
  .u-xlg-size3of8 {
    width: 37.5% !important; }
  .u-xlg-size2of5,
  .u-xlg-size4of10 {
    width: 40% !important; }
  .u-xlg-size5of12 {
    width: 41.667% !important;
    /* 2 */ }
  .u-xlg-size1of2,
  .u-xlg-size2of4,
  .u-xlg-size3of6,
  .u-xlg-size4of8,
  .u-xlg-size5of10,
  .u-xlg-size6of12 {
    width: 50% !important; }
  .u-xlg-size7of12 {
    width: 58.333% !important;
    /* 2 */ }
  .u-xlg-size3of5,
  .u-xlg-size6of10 {
    width: 60% !important; }
  .u-xlg-size5of8 {
    width: 62.5% !important; }
  .u-xlg-size2of3,
  .u-xlg-size4of6,
  .u-xlg-size8of12 {
    width: 66.667% !important;
    /* 2 */ }
  .u-xlg-size7of10 {
    width: 70% !important; }
  .u-xlg-size3of4,
  .u-xlg-size6of8,
  .u-xlg-size9of12 {
    width: 75% !important; }
  .u-xlg-size4of5,
  .u-xlg-size8of10 {
    width: 80% !important; }
  .u-xlg-size5of6,
  .u-xlg-size10of12 {
    width: 83.333% !important;
    /* 2 */ }
  .u-xlg-size7of8 {
    width: 87.5% !important; }
  .u-xlg-size9of10 {
    width: 90% !important; }
  .u-xlg-size11of12 {
    width: 91.667% !important;
    /* 2 */ }
  /* Intrinsic widths
     ========================================================================== */
  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex - http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes - http://git.io/vllMt
   */
  .u-xlg-sizeFill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important;
    /* 1 */
    -ms-flex-preferred-size: 0% !important;
        flex-basis: 0% !important;
    /* 2 */ }
  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */
  .u-xlg-sizeFillAlt {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important; }
  /**
   * Make an element the width of its parent.
   */
  .u-xlg-sizeFull {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    display: block !important;
    width: 100% !important; } }

/**
 * @define utilities
 * Size: breakpoint 5 (xxlarge)
 */
@media (min-width: 122rem) {
  /* Proportional widths: breakpoint 1 (xxlg)
     ========================================================================== */
  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   * 2. GoNoodle removed repeating decimals as it caused IE10/11 cells to erroneously wrap
   *    https://git.io/vgdod
   */
  /* postcss-bem-linter: ignore */
  [class*='u-xxlg-size'] {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    /* 1 */ }
  .u-xxlg-size1of12 {
    width: 8.333% !important;
    /* 2 */ }
  .u-xxlg-size1of10 {
    width: 10% !important; }
  .u-xxlg-size1of8 {
    width: 12.5% !important; }
  .u-xxlg-size1of6,
  .u-xxlg-size2of12 {
    width: 16.667% !important;
    /* 2 */ }
  .u-xxlg-size1of5,
  .u-xxlg-size2of10 {
    width: 20% !important; }
  .u-xxlg-size1of4,
  .u-xxlg-size2of8,
  .u-xxlg-size3of12 {
    width: 25% !important; }
  .u-xxlg-size3of10 {
    width: 30% !important; }
  .u-xxlg-size1of3,
  .u-xxlg-size2of6,
  .u-xxlg-size4of12 {
    width: 33.333% !important;
    /* 2 */ }
  .u-xxlg-size3of8 {
    width: 37.5% !important; }
  .u-xxlg-size2of5,
  .u-xxlg-size4of10 {
    width: 40% !important; }
  .u-xxlg-size5of12 {
    width: 41.667% !important;
    /* 2 */ }
  .u-xxlg-size1of2,
  .u-xxlg-size2of4,
  .u-xxlg-size3of6,
  .u-xxlg-size4of8,
  .u-xxlg-size5of10,
  .u-xxlg-size6of12 {
    width: 50% !important; }
  .u-xxlg-size7of12 {
    width: 58.333% !important;
    /* 2 */ }
  .u-xxlg-size3of5,
  .u-xxlg-size6of10 {
    width: 60% !important; }
  .u-xxlg-size5of8 {
    width: 62.5% !important; }
  .u-xxlg-size2of3,
  .u-xxlg-size4of6,
  .u-xxlg-size8of12 {
    width: 66.667% !important;
    /* 2 */ }
  .u-xxlg-size7of10 {
    width: 70% !important; }
  .u-xxlg-size3of4,
  .u-xxlg-size6of8,
  .u-xxlg-size9of12 {
    width: 75% !important; }
  .u-xxlg-size4of5,
  .u-xxlg-size8of10 {
    width: 80% !important; }
  .u-xxlg-size5of6,
  .u-xxlg-size10of12 {
    width: 83.333% !important;
    /* 2 */ }
  .u-xxlg-size7of8 {
    width: 87.5% !important; }
  .u-xxlg-size9of10 {
    width: 90% !important; }
  .u-xxlg-size11of12 {
    width: 91.667% !important;
    /* 2 */ }
  /* Intrinsic widths
     ========================================================================== */
  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex - http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes - http://git.io/vllMt
   */
  .u-xxlg-sizeFill {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 0% !important;
            flex: 1 1 0% !important;
    /* 1 */
    -ms-flex-preferred-size: 0% !important;
        flex-basis: 0% !important;
    /* 2 */ }
  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */
  .u-xxlg-sizeFillAlt {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important; }
  /**
   * Make an element the width of its parent.
   */
  .u-xxlg-sizeFull {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    display: block !important;
    width: 100% !important; } }

/**
 * HACK
 * This is to be used as a stop gap while we move away from altering the body element text size.
 * Apply this class to legacy layouts. Do not use it within the resource portion of the application.
 */
.u-scaleText {
  font-size: 0.85rem; }
  @media (min-width: 1440px) {
    .u-scaleText {
      font-size: 1rem; } }

.u-sansSerif {
  font-family: "tk", Verdana, sans-serif; }

.u-sansSerifAlt {
  font-family: "csr", Verdana, sans-serif; }

.u-bold {
  font-weight: bold; }

.u-bold900 {
  font-weight: 700; }

.u-regular {
  font-weight: normal; }

.u-italic {
  font-style: italic; }

.u-caps {
  text-transform: uppercase; }

.u-strike {
  text-decoration: line-through; }

.u-alignLeft {
  text-align: left; }

.u-alignCenter {
  text-align: center; }

.u-alignRight {
  text-align: right; }

.u-justify {
  text-align: justify; }

@media screen and (min-width: 40rem) {
  .u-md-alignLeft {
    text-align: left; }
  .u-md-alignCenter {
    text-align: center; }
  .u-md-alignRight {
    text-align: right; }
  .u-md-justify {
    text-align: justify; } }

.u-nowrap {
  white-space: nowrap; }

.u-breakWord {
  word-wrap: break-word; }

.u-capLineLength {
  max-width: 38em; }

.u-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

/**
 * 1. This addition is hacky. The typescale need to be defined with the design team and the
 *    code refactored.
 */
.u-h00 {
  font-size: 4rem !important; }

.u-h0 {
  font-size: 3rem !important; }

.u-h1 {
  font-size: 2.25rem !important; }

.u-h2 {
  font-size: 2rem !important; }

.u-h3 {
  font-size: 1.5rem !important; }

.u-h4 {
  font-size: 1.25rem !important; }

.u-h5 {
  font-size: 1rem !important; }

.u-h6a {
  font-size: 0.875rem !important; }

.u-h6 {
  font-size: 0.75rem !important; }

/* 1 */
@media screen and (min-width: 40rem) {
  .u-md-h00 {
    font-size: 4rem !important; }
  .u-md-h0 {
    font-size: 3rem !important; }
  .u-md-h1 {
    font-size: 2.25rem !important; }
  .u-md-h2 {
    font-size: 2rem !important; }
  .u-md-h3 {
    font-size: 1.5rem !important; }
  .u-md-h4 {
    font-size: 1.25rem !important; }
  .u-md-h5 {
    font-size: 1rem !important; }
  .u-md-h6a {
    font-size: 0.875rem !important; }
  /* 1 */
  .u-md-h6 {
    font-size: 0.75rem !important; } }

@media screen and (min-width: 50rem) {
  .u-pj-h00 {
    font-size: 4rem !important; }
  .u-pj-h0 {
    font-size: 3rem !important; }
  .u-pj-h1 {
    font-size: 2.25rem !important; }
  .u-pj-h2 {
    font-size: 2rem !important; }
  .u-pj-h3 {
    font-size: 1.5rem !important; }
  .u-pj-h4 {
    font-size: 1.25rem !important; }
  .u-pj-h5 {
    font-size: 1rem !important; }
  .u-pj-h6a {
    font-size: 0.875rem !important; }
  /* 1 */
  .u-pj-h6 {
    font-size: 0.75rem !important; } }
/** @define TextField */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
/**
 * 1. This unfortunate specificity is required to override the browser's input
 *    `:not(:focus)` styles. This felt like the least brittle approach.
 * 2. IE must use `color`, as `opacity` will hide the entire field, not just the placeholder.
 * 3. Required to apply styles to Stripe inputs housed within an iframe.
 */
.TextField {
  display: block;
  font-size: 1rem;
  position: relative; }

@media screen and (min-width: 40rem) {
  .TextField {
    font-size: 1.25rem; } }

.TextField-label {
  color: #555;
  cursor: text;
  font-size: 1em;
  left: 0.95em;
  pointer-events: none;
  position: absolute;
  top: 1.125em;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transition-property: color, opacity, -webkit-transform;
  transition-property: color, opacity, -webkit-transform;
  transition-property: color, opacity, transform;
  transition-property: color, opacity, transform, -webkit-transform; }

.TextField-input {
  border: 3px solid #6e6e6e;
  border-radius: 4px;
  color: #000;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1em;
  padding: 1.5em 0.75em 0.5em; }

.TextField-input::-webkit-input-placeholder, .TextField-toggle:active:active ~ .TextField-input::-webkit-input-placeholder, .TextField-toggle:focus:focus ~ .TextField-input::-webkit-input-placeholder {
  /* 1 */
  color: #555;
  opacity: 1;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms; }

.TextField-input::-moz-placeholder, .TextField-toggle:active:active ~ .TextField-input::-moz-placeholder, .TextField-toggle:focus:focus ~ .TextField-input::-moz-placeholder {
  /* 1 */
  color: #555;
  opacity: 1;
  -moz-transition: opacity 200ms;
  transition: opacity 200ms; }

.TextField-input:-ms-input-placeholder, .TextField-toggle:active:active ~ .TextField-input:-ms-input-placeholder, .TextField-toggle:focus:focus ~ .TextField-input:-ms-input-placeholder {
  /* 1 */
  color: #555;
  opacity: 1;
  -ms-transition: opacity 200ms;
  transition: opacity 200ms; }

.TextField-input::-ms-input-placeholder, .TextField-toggle:active:active ~ .TextField-input::-ms-input-placeholder, .TextField-toggle:focus:focus ~ .TextField-input::-ms-input-placeholder {
  /* 1 */
  color: #555;
  opacity: 1;
  -ms-transition: opacity 200ms;
  transition: opacity 200ms; }

.TextField-input::placeholder,
.TextField-toggle:active:active ~ .TextField-input::placeholder,
.TextField-toggle:focus:focus ~ .TextField-input::placeholder {
  /* 1 */
  color: #555;
  opacity: 1;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms; }

/* State: Focused
   ========================================================================== */
.TextField-input:focus,
.TextField-input.is-focused,
.TextField-toggle:active:active ~ .TextField-input,
.TextField-toggle:focus:focus ~ .TextField-input {
  /* 1 */
  border-color: #5e1cca;
  outline: none; }

.TextField-input:focus ~ .TextField-label,
.TextField-input.StripeElement.is-focused ~ .TextField-label,
.TextField-toggle:active:active ~ .TextField-label,
.TextField-toggle:focus:focus ~ .TextField-label {
  /* 1 */
  color: #000; }

/* State: Focused or empty input. Active or focused visibility toggle.
   ========================================================================== */
.TextField-input:focus ~ .TextField-label,
.TextField-input.StripeElement.is-focused ~ .TextField-label,
.TextField-input:not(.is-empty) ~ .TextField-label,
.TextField-toggle:active:active ~ .TextField-label,
.TextField-toggle:focus:focus ~ .TextField-label {
  /* 1 */
  -webkit-transform: scale(0.7) translateY(-1.25rem);
          transform: scale(0.7) translateY(-1.25rem); }

/* State: Not focused
   ========================================================================== */
.TextField-input:not(:focus) ~ .TextField-label,
.TextField-input.StripeElement:not(.is-focused) ~ .TextField-label {
  /* 3 */
  color: #555; }

/* State: Not focused, empty input
   ========================================================================== */
.TextField-input.is-empty:not(:focus) ~ .TextField-label,
.TextField-input.StripeElement.is-empty:not(.is-focused) ~ .TextField-label {
  /* 3 */
  color: #555; }

.TextField-input.is-empty:not(:focus)::-webkit-input-placeholder {
  color: transparent;
  /* 2 */ }

.TextField-input.is-empty:not(:focus)::-moz-placeholder {
  color: transparent;
  /* 2 */ }

.TextField-input.is-empty:not(:focus):-ms-input-placeholder {
  color: transparent;
  /* 2 */ }

.TextField-input.is-empty:not(:focus)::-ms-input-placeholder {
  color: transparent;
  /* 2 */ }

.TextField-input.is-empty:not(:focus)::placeholder {
  color: transparent;
  /* 2 */ }

.TextField-input.StripeElement.is-empty:not(.is-focused) iframe {
  /* 3 */
  opacity: 0; }

/* State: Disabled.
   ========================================================================== */
.TextField-input:disabled {
  color: #333; }

.TextField-input:disabled ~ .TextField-label {
  color: #666; }

/* Modifer: Toggleable visibility of input value (e.g. password fields).
   ========================================================================== */
.TextField--withVisibilityToggle .TextField-input {
  padding-right: 4rem; }

.TextField--withVisibilityToggle .TextField-toggle {
  bottom: 0;
  font-size: 2.5rem;
  line-height: 1.6;
  padding: 0 0.3em;
  position: absolute;
  right: 0;
  top: 0; }

.TextField--withVisibilityToggle .TextField-icon {
  opacity: 0.25; }

.TextField--withVisibilityToggle .TextField-iconInvisible {
  display: none; }

/* State: Hidden value state for toggleable field.
   ========================================================================== */
.TextField--withVisibilityToggle.is-hidingValue .TextField-iconInvisible {
  display: inline-block; }

.TextField--withVisibilityToggle.is-hidingValue .TextField-iconVisible {
  display: none; }
@charset "UTF-8";
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit; }

/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
#signup-wrapper::after, .signup-form::after, .signup-form form::after, .SignUpSteps::after {
  clear: both;
  content: "";
  display: table; }

/* Mixins
   ========================================================================== */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

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

/* Base
 * --------------------------------------------------------------*/
#signup-wrapper {
  position: relative;
  min-height: 100vh; }

.signup-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: calc(100vh - 5rem); }
  .signup-form > .inner {
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    padding: 2em 1em; }
    @media screen and (min-width: 600px) {
      .signup-form > .inner {
        padding: 2em 1em 2em; } }
  .signup-form .school-select-wrapper,
  .signup-form .add-zip-code-wrapper {
    top: 0; }

.signup-header {
  color: #000;
  font-size: 3rem;
  margin: 0 0 0.5em; }

@media screen and (max-width: 599px) {
  .signup-form .Modal-buttons .Btn--primary,
  .signup-form .Modal-buttons .Btn--secondary {
    display: block;
    width: 100%; } }

@media screen and (min-width: 600px) {
  .signup-form .Modal-buttons .Btn--secondary {
    float: left; } }

.signup-form .Modal-buttons .Btn--primary {
  margin-bottom: 1em; }
  @media screen and (min-width: 600px) {
    .signup-form .Modal-buttons .Btn--primary {
      float: right; } }

.SignUp-title {
  margin: 0 0 0.5em;
  text-align: center;
  font-weight: 700;
  color: #333;
  font-size: 3em; }

.SignUp-subTitle {
  font-size: 2em;
  margin: 0 0 0.75em;
  color: gray;
  font-weight: 700;
  text-align: center; }

.update-explanation {
  max-width: 38em;
  margin: 2em auto;
  text-align: center; }

.signup-form .Modal-buttons {
  margin: 2em 0 1.5em; }
  @media screen and (min-width: 600px) {
    .signup-form .Modal-buttons {
      display: table;
      width: 100%;
      table-layout: fixed; } }

.signup-form .Modal-buttons.single {
  text-align: center; }
  .signup-form .Modal-buttons.single .Btn {
    display: inline-block;
    float: none;
    line-height: 1.5;
    margin: 0 0.25em; }
    .signup-form .Modal-buttons.single .Btn:first-child {
      margin-left: 0; }
    .signup-form .Modal-buttons.single .Btn:last-child {
      margin-right: 0; }

.user-profile-wrapper,
.school-select-wrapper,
.add-school-wrapper,
.add-zip-code-wrapper {
  width: auto;
  width: 100%;
  max-width: 48em; }

.SignUp-checkboxWrapper {
  margin-top: 1rem; }

#remote-login {
  display: none; }

.SignUp-helpBtn {
  display: block;
  margin: auto; }
  @media screen and (min-width: 40rem) {
    .SignUp-helpBtn {
      bottom: 1.5rem;
      margin-bottom: 0;
      position: absolute;
      right: 1.5rem; } }

#bender {
  position: absolute;
  left: -9999px; }

.grecaptcha-badge {
  visibility: hidden; }

.SignUp-recaptchaText {
  margin: 1.5rem 0; }
  @media screen and (min-width: 40rem) {
    .SignUp-recaptchaText {
      margin: 1rem 0; } }

/* Components
 * --------------------------------------------------------------*/
body.users .modal .modal-inner {
  max-width: 28em; }

body.users .modal .Btn {
  float: none; }
  body.users .modal .Btn:first-child {
    margin-bottom: 1em; }
  body.users .modal .Btn:only-child {
    margin-bottom: 0; }

.activation-code-wrapper {
  bottom: 0;
  right: 0;
  padding: 1em 0;
  text-align: center; }
  @media screen and (min-width: 600px) {
    .activation-code-wrapper {
      position: fixed;
      right: 2em;
      bottom: 2em;
      padding: 0; } }
  .activation-code-wrapper .Btn {
    padding: 0.5em 1em; }
    @media screen and (max-width: 599px) {
      .activation-code-wrapper .Btn {
        padding: 0;
        background: none;
        color: #999;
        border-radius: 0;
        display: inline-block;
        -webkit-box-shadow: none;
                box-shadow: none; } }

/* Pages
 * --------------------------------------------------------------*/
@media screen and (min-width: 40rem) {
  .login_action,
  .brain_breaks.show {
    background-image: url(/assets/0dc50484c7abd6f53f6dfee410acb16f.svg), url(/assets/9be00c0b41e68658b505c472b2378338.svg), url(/assets/6228b50b1ce6f0fc25830bb0c4671843.svg);
    background-position: left bottom, left bottom, right top;
    background-repeat: no-repeat;
    background-size: 20vh, 20vh, 20vh; } }

.login_action .logo-wrapper,
.brain_breaks.show .logo-wrapper {
  display: none; }

.Login-logo {
  left: 0;
  max-width: 10rem;
  position: fixed;
  top: 0;
  width: 100%; }
  @media screen and (min-width: 40rem) and (min-height: 600px) {
    .Login-logo {
      max-width: 18rem; } }

.Login-links {
  bottom: 6rem;
  left: 50%;
  position: fixed;
  text-align: center;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .Login-links {
      bottom: 1rem; } }

.signup-form .login-wrapper {
  max-width: 36em; }
  .signup-form .login-wrapper form {
    background: none;
    border: none;
    padding: 0; }
    .signup-form .login-wrapper form input {
      margin: 0; }

.signup-form .SignupButtons {
  max-width: 36em; }

.signup-form .check-your-email {
  font-size: 2.5em; }

.ForgotPassword {
  color: #333;
  max-width: 45rem !important; }

.ForgotPassword-title {
  color: #333;
  font-size: 3em;
  font-weight: 700;
  margin: 0 0 0.5em;
  text-align: center; }

.ForgotPassword-innerContainer {
  margin-left: auto;
  margin-right: auto;
  max-width: 36em;
  width: 100%; }

.ForgotPassword-copy {
  font-size: 1.15rem; }

.CleverAction {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.CleverAction .action-text {
  color: #666;
  font-size: 1.2em;
  height: 100%; }

.CleverBtn {
  height: 3.7rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.CleverBtn .CleverAction-icon {
  background-image: url(/assets/2658b8c55edf634139c47dffc0bb5c0e.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  height: 2.5rem;
  margin-left: 0.35rem;
  margin-top: 0.35rem;
  text-align: center;
  width: 2.5rem; }

.CleverBtn .CleverAction-text {
  -ms-flex-preferred-size: 75%;
      flex-basis: 75%; }

@media screen and (min-width: 600px) {
  .new_action .signup-steps-wrapper:not(.is-hidden) + .signup-form {
    padding-top: 8.5em; } }

.signup-steps-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

.SignUpSteps {
  display: none; }
  @media screen and (min-width: 600px) {
    .SignUpSteps {
      display: block;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #fff;
      counter-reset: step-counter; } }

.SignUpSteps li {
  position: relative;
  margin: 0;
  padding: 2em;
  width: 50%;
  float: left;
  list-style: none;
  text-align: center;
  color: #555;
  counter-increment: step-counter; }
  .SignUpSteps li::before, .SignUpSteps li::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #ccc; }
  .SignUpSteps li::after {
    -webkit-transition: 0.8s ease-in-out width;
    transition: 0.8s ease-in-out width;
    width: 0;
    background: #5e1cca; }

.SignUpSteps .label {
  vertical-align: middle;
  font-size: 1em;
  font-weight: 700; }
  @media screen and (min-width: 1020px) {
    .SignUpSteps .label {
      display: inline-block;
      font-size: 1.5em; } }

.SignUpSteps .checkmark {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  width: 1em;
  height: 1em;
  padding: 1em;
  border: 4px solid #555;
  border-radius: 100em;
  text-align: center; }
  .SignUpSteps .checkmark::before {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    content: counter(step-counter);
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    font-weight: 700; }
  .SignUpSteps .checkmark:after {
    content: "\E021";
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'gn-icons';
    -webkit-transform: translate(-50%, -50%) scale(1.5);
            transform: translate(-50%, -50%) scale(1.5);
    -webkit-transition: 0.2s ease-in-out all;
    transition: 0.2s ease-in-out all;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2.5em;
    color: #5e1cca;
    opacity: 0; }

.SignUpSteps li.active {
  color: #5e1cca; }
  .SignUpSteps li.active::after {
    width: 100%; }
  .SignUpSteps li.active .checkmark {
    border-color: #5e1cca; }

.SignUpSteps li.completed {
  border-bottom-color: #5e1cca;
  color: #5e1cca; }
  .SignUpSteps li.completed::after {
    width: 100%; }
  .SignUpSteps li.completed .checkmark {
    -webkit-transition: 0.2s ease-in-out all;
    transition: 0.2s ease-in-out all;
    border-color: transparent;
    background: transparent;
    color: #fff; }
    .SignUpSteps li.completed .checkmark:after {
      content: "\E021";
      -webkit-transform: translate(-50%, -50%) scale(1);
              transform: translate(-50%, -50%) scale(1);
      opacity: 1; }

.school-name {
  font-weight: 700; }

.school-select-wrapper .selectize-input {
  -webkit-box-shadow: none;
          box-shadow: none; }
  .school-select-wrapper .selectize-input input {
    min-width: 100%; }
  .school-select-wrapper .selectize-input::after {
    background: #5e1cca;
    border-radius: 0 0 4px 4px;
    color: #fff;
    content: 'Searching...';
    display: none;
    left: -3px;
    line-height: 2em;
    overflow: hidden;
    padding: 1em;
    position: absolute;
    right: -3px;
    text-indent: 2em;
    top: 100%;
    z-index: 200; }
  .school-select-wrapper .selectize-input::before {
    background: url(/assets/9ae1046a522d37ea643bb7d389a26696.gif) center center no-repeat;
    bottom: -2.675em;
    content: '';
    display: none;
    height: 2em;
    left: 0.25em;
    padding: 0;
    position: absolute;
    right: auto;
    top: auto;
    -webkit-transform: none;
            transform: none;
    width: 2em;
    z-index: 201; }

.school-select-wrapper .selectize-control.loading .selectize-input {
  border-radius: 4px 4px 0 0;
  -webkit-box-shadow: 0 2px 0 #5e1cca;
          box-shadow: 0 2px 0 #5e1cca; }
  .school-select-wrapper .selectize-control.loading .selectize-input::before, .school-select-wrapper .selectize-control.loading .selectize-input::after {
    display: block; }

.add-school {
  margin-top: 4.5em;
  text-align: center;
  color: #999; }
  .add-school a {
    font-weight: 700;
    color: #5e1cca;
    border-bottom: 1px solid #5e1cca; }

.confirm-school .inner {
  text-align: center; }
  .confirm-school .inner h2 {
    margin-top: 0;
    font-size: 2em; }

.schools-list {
  margin-bottom: 3em; }

.school-radio-wrapper {
  display: block;
  position: relative;
  padding: 2em;
  padding-left: 5em;
  border-width: 1px 1px 0;
  text-align: left;
  background-color: #fff;
  cursor: pointer; }
  .school-radio-wrapper:first-child {
    border-radius: 6px 6px 0 0; }
  .school-radio-wrapper:last-child {
    -webkit-box-shadow: 0 4px 0 #ccc;
            box-shadow: 0 4px 0 #ccc;
    border-radius: 0 0 6px 6px; }
  .school-radio-wrapper:only-child {
    border-radius: 6px; }
  .school-radio-wrapper input {
    display: none; }
  .school-radio-wrapper .checkmark {
    color: transparent; }
    .school-radio-wrapper .checkmark:before {
      content: "\E00A";
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-transform: none;
      line-height: 1;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      font-family: 'gn-icons';
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      position: absolute;
      top: 50%;
      left: 1em;
      padding: 0.5em;
      font-size: 1.25em;
      background-color: #fff;
      border-radius: 100em;
      background: transparent;
      border: 2px solid #eee; }
  .school-radio-wrapper:hover .checkmark {
    background: #eee;
    color: #ccc; }
  .school-radio-wrapper.selected {
    background: #5e1cca;
    color: #fff; }
    .school-radio-wrapper.selected:last-child {
      -webkit-box-shadow: 0 4px 0 #49169d;
              box-shadow: 0 4px 0 #49169d; }
  .school-radio-wrapper.selected .checkmark:before {
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'gn-icons';
    background-color: #fff;
    color: #5e1cca;
    border-color: #fff; }

.user-profile-wrapper .Btn {
  position: relative;
  float: right; }
  @media screen and (min-width: 600px) {
    .user-profile-wrapper .Btn {
      top: 0; } }

#introduced_by.parsley-error ~ .selectize-control .selectize-input {
  border-color: #eb0055;
  -webkit-box-shadow: 0 4px 0 #eb0055;
          box-shadow: 0 4px 0 #eb0055; }
  #introduced_by.parsley-error ~ .selectize-control .selectize-input::after {
    border-color: #eb0055; }
  #introduced_by.parsley-error ~ .selectize-control .selectize-input::before {
    border-top-color: #eb0055; }

.age-verify-wrapper .columns .form-control {
  width: 100%; }
  @media screen and (min-width: 600px) {
    .age-verify-wrapper .columns .form-control {
      width: 49%; } }

.age-verify-wrapper .month-day {
  margin-top: 1em; }

.age-verify-wrapper .inner::after {
  clear: both;
  content: "";
  display: block; }

@media screen and (max-width: 599px) {
  .age-verify-wrapper .inner + .Flash {
    margin-top: 0; } }

.age-verify-wrapper .BtnIcon {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  color: #fff;
  display: none;
  font-size: 0.95em;
  left: -3.75em;
  padding: 0.4em 0.85em;
  position: absolute;
  top: 1.5em; }
  @media screen and (min-width: 765px) {
    .age-verify-wrapper .BtnIcon {
      display: block; } }

.activities #signup-wrapper {
  padding-bottom: 0; }

.view-activity-unauthenticated {
  position: relative;
  padding: 2em;
  text-align: center; }
  .view-activity-unauthenticated:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; }
  @media screen and (min-width: 600px) {
    .view-activity-unauthenticated {
      display: inline-block;
      vertical-align: middle;
      width: 99%;
      padding: 4em; } }
  .view-activity-unauthenticated .link-gn {
    display: inline-block;
    width: 8em;
    height: 8em; }
    @media screen and (min-width: 900px) {
      .view-activity-unauthenticated .link-gn {
        position: fixed;
        top: 2em;
        left: 2em;
        width: 6em;
        height: 6em; } }
    .view-activity-unauthenticated .link-gn .login-logo {
      width: 100%; }
  .view-activity-unauthenticated .Tile-container {
    width: 100%;
    max-width: 28rem;
    margin: 2em auto; }
    @media screen and (min-width: 900px) {
      .view-activity-unauthenticated .Tile-container {
        display: inline-block;
        width: 49%;
        vertical-align: middle;
        margin: 0; } }
    @media screen and (min-width: 1020px) {
      .view-activity-unauthenticated .Tile-container {
        max-width: 36rem; } }
  @media screen and (min-width: 900px) {
    .view-activity-unauthenticated .account-actions {
      display: inline-block;
      width: 49%;
      max-width: 28em;
      padding: 0 2em;
      vertical-align: middle; } }
  @media screen and (min-width: 1020px) {
    .view-activity-unauthenticated .account-actions {
      max-width: 32em; } }
  .view-activity-unauthenticated .account-actions h2 {
    color: #fff;
    font-size: 2.5em;
    font-family: "tk", Verdana, sans-serif; }
    .view-activity-unauthenticated .account-actions h2 span {
      display: block; }
  .view-activity-unauthenticated .account-actions .Btn {
    float: none;
    margin-top: 1rem;
    font-weight: 700; }
  .view-activity-unauthenticated .account-actions p {
    color: #fff; }
    .view-activity-unauthenticated .account-actions p a {
      color: #fff;
      font-weight: 700;
      border-bottom: 2px solid #fff; }

/* Utilities
 * --------------------------------------------------------------*/
/**
 * HACK
 * This is to be used as a stop gap while we move away from altering the body element text size.
 * Apply this class to legacy layouts. Do not use it within the resource portion of the application.
 */
.u-scaleText {
  font-size: 0.85rem; }
  @media (min-width: 1440px) {
    .u-scaleText {
      font-size: 1rem; } }

.u-sansSerif {
  font-family: "tk", Verdana, sans-serif; }

.u-sansSerifAlt {
  font-family: "csr", Verdana, sans-serif; }

.u-bold {
  font-weight: bold; }

.u-bold900 {
  font-weight: 700; }

.u-regular {
  font-weight: normal; }

.u-italic {
  font-style: italic; }

.u-caps {
  text-transform: uppercase; }

.u-strike {
  text-decoration: line-through; }

.u-alignLeft {
  text-align: left; }

.u-alignCenter {
  text-align: center; }

.u-alignRight {
  text-align: right; }

.u-justify {
  text-align: justify; }

@media screen and (min-width: 40rem) {
  .u-md-alignLeft {
    text-align: left; }
  .u-md-alignCenter {
    text-align: center; }
  .u-md-alignRight {
    text-align: right; }
  .u-md-justify {
    text-align: justify; } }

.u-nowrap {
  white-space: nowrap; }

.u-breakWord {
  word-wrap: break-word; }

.u-capLineLength {
  max-width: 38em; }

.u-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
/** @define BackgroundImage */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.BackgroundImage,
.BackgroundImage-img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  will-change: transform; }

.BackgroundImage {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -100; }

.BackgroundImage-img {
  -o-object-fit: cover;
     object-fit: cover; }
.CleverAgeVerificationModal-text {
  margin-bottom: 2rem; }
/** @define MaintenanceMode */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.MaintenanceMode {
  background: #fff url(/assets/2fe2c7030c7f360c0eb1ebc50edf1ace.jpg) repeat 0 0;
  background-size: 1536px auto;
  min-height: 100%;
  text-align: center;
  width: 100%; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .MaintenanceMode {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }

.MaintenanceMode-logo {
  max-width: 10rem;
  width: 50vw; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .MaintenanceMode-logo {
      left: 0;
      max-width: 15rem;
      position: absolute;
      top: 0; } }

.MaintenanceMode-copy {
  margin-bottom: auto;
  margin-top: auto;
  padding: 0.5rem; }

.MaintenanceMode-champ {
  margin-left: auto;
  margin-right: auto;
  max-width: 20rem;
  width: 80vw; }

.MaintenanceMode-heading {
  color: #333;
  font-size: 1.5rem; }
  @media screen and (min-width: 40rem) {
    .MaintenanceMode-heading {
      font-size: 2rem; } }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.CleverFamilySignUp {
  background: #fff url(/assets/2fe2c7030c7f360c0eb1ebc50edf1ace.jpg) repeat 0 0;
  background-size: 1536px auto;
  min-height: 100vh;
  text-align: center;
  width: 100%; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .CleverFamilySignUp {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.CleverLibraryAuth-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

.CleverLibraryAuthViews {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: calc(100vh - 5rem); }

.CleverLibraryAuthViews-inner {
  margin-bottom: auto;
  margin-top: auto;
  padding: 2rem 1rem; }

.Clever-logo {
  max-width: 10rem;
  width: 50vw; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .Clever-logo {
      left: 0;
      max-width: 15rem;
      position: absolute;
      top: 0; } }

.CleverLibraryAuthViews-mainSection {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  max-width: 35rem;
  padding: 0.5rem;
  text-align: center; }

.CleverLibraryAuthViews-footer {
  border-top: 0.125rem solid #eee;
  margin-top: 2.5rem;
  padding-top: 2rem; }
.CleverSignUpWithNewEmailModal-text {
  margin-bottom: 2rem; }

.CleverSignUpWithNewEmailModal-contact {
  margin-top: 2rem; }
/** @define Checkbox */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Checkbox {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1rem;
  line-height: 1.25;
  position: relative;
  text-align: left; }

@media screen and (min-width: 40rem) {
  .Checkbox {
    font-size: 1.25rem; } }

/**
 * 1. Required styles to override legacy global styles on inputs. Ideally we can remove this one
 *    day when we do not apply styles to inputs globally.
 */
.Checkbox-input {
  border: none;
  /* 1 */
  opacity: 0;
  position: absolute;
  width: auto;
  /* 1 */
  z-index: -100; }

.Checkbox-input:disabled ~ .Checkbox-indicator,
.Checkbox-input:disabled ~ .Checkbox-label {
  cursor: not-allowed;
  opacity: 0.5; }

.Checkbox-indicator {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ddd;
  border-radius: 0.375em;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 6px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 6px rgba(0, 0, 0, 0.05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 1.5em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 0.25em;
  margin-right: 1em;
  width: 1.5em; }

/**
 * 1. Undo the negative top alignment applied to all `Icon`s. The negative value is an attempt to
 *    properly vertically align icons in the app. It should be revisited and likely removed.
 */
.Checkbox-icon {
  opacity: 0;
  top: 0;
  /* 1 */
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out; }

.Checkbox-input:focus:not(:disabled) ~ .Checkbox-indicator,
.Checkbox-input:active:not(:disabled) ~ .Checkbox-indicator {
  -webkit-box-shadow: 0 0 0 0.075em #fff, 0 0 0 0.25em #5e1cca;
          box-shadow: 0 0 0 0.075em #fff, 0 0 0 0.25em #5e1cca; }

.Checkbox-input:checked ~ .Checkbox-indicator {
  background-color: #5e1cca; }

.Checkbox-input:checked ~ .Checkbox-indicator .Checkbox-icon {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1); }

/* Modifier: align checkbox to top of accompanying text if multi-line
   ========================================================================== */
.Checkbox--alignStart {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start; }
/** @define CleverLibraryErrorMessage */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.CleverLibraryErrorMessage {
  background: #fff url(/assets/2fe2c7030c7f360c0eb1ebc50edf1ace.jpg) repeat 0 0;
  background-size: 1536px auto;
  min-height: 100%;
  text-align: center;
  width: 100%; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .CleverLibraryErrorMessage {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }

.CleverLibraryErrorMessage-logo {
  max-width: 10rem;
  width: 50vw; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .CleverLibraryErrorMessage-logo {
      left: 0;
      max-width: 15rem;
      position: absolute;
      top: 0; } }

.CleverLibraryErrorMessage-copy {
  margin-bottom: auto;
  margin-top: auto;
  padding: 0.5rem;
  max-width: 36rem; }

.CleverLibraryErrorMessage-champ {
  margin-left: auto;
  margin-right: auto;
  max-width: 20rem;
  width: 80vw; }

.CleverLibraryErrorMessage-contactLink {
  font-weight: bold;
  color: #000; }

.CleverLibraryErrorMessage-heading {
  color: #333;
  font-size: 1.5rem; }
  @media screen and (min-width: 40rem) {
    .CleverLibraryErrorMessage-heading {
      font-size: 2rem; } }
/** @define Clever */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.CleverLogin {
  background: #fff url(/assets/2fe2c7030c7f360c0eb1ebc50edf1ace.jpg) repeat 0 0;
  background-size: 1536px auto;
  min-height: 100vh;
  text-align: center;
  width: 100%; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .CleverLogin {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }

.Clever-logo {
  max-width: 10rem;
  width: 50vw; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .Clever-logo {
      left: 0;
      max-width: 15rem;
      position: absolute;
      top: 0; } }

.Clever-innerContainer {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  padding: 0.5rem;
  max-width: 36rem; }

.Clever-heading {
  margin-top: 6rem;
  color: #333;
  font-size: 3rem; }
  @media screen and (min-width: 40rem) {
    .Clever-heading {
      font-size: 3rem; } }

.Clever-body {
  font-size: 1.25rem; }

.Clever-action {
  margin: 1rem 0;
  width: 20rem;
  font-size: 1rem; }

.Clever-footer {
  border-top: 0.125rem solid #eee;
  margin-top: 2.5rem;
  padding-top: 2rem; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ConnectAccountToCleverOrSignup-inner {
  border-bottom: 0.125rem solid #eee;
  margin-bottom: 2rem;
  text-align: center; }

.ConnectAccountToCleverOrSignup-connectAccount {
  margin-bottom: 3rem;
  margin-top: 2rem; }

.ConnectAccountToCleverOrSignup-newAccount {
  margin-bottom: 3rem; }
/** @define ResetPasswordConfirmation */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ResetPasswordConfirmation {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh; }

.ResetPasswordConfirmation-inner {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  padding: 0.5rem;
  max-width: 36rem; }

.ResetPasswordConfirmation-title {
  color: #333;
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  text-align: center; }

.ResetPasswordConfirmation-appBadgesSection {
  margin-top: 4rem;
  text-align: center; }

.ResetPasswordConfirmation-gamesTitle {
  margin-bottom: 1rem;
  font-size: 1.5rem; }

.ResetPasswordConfirmation-appBadgesContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly; }

.ResetPasswordConfirmation-continueBtn {
  margin-top: 3rem; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SignupButtons {
  max-width: 36rem;
  width: 100%; }

.SignupButtons-signupText {
  margin-bottom: 2rem; }

.SignupButtons-buttons {
  border-bottom: 0.125rem solid #eee;
  margin-bottom: 2rem; }

.SignupButtons-emailSignup {
  font-size: 1.0625rem;
  height: 4rem;
  margin-bottom: 2rem; }

.SignupButtons-cleverSignup {
  margin-bottom: 2rem; }

@media only screen and (min-width: 40rem) {
  .SignupButtons-cleverSignup .CleverAction-text {
    -ms-flex-preferred-size: 83%;
        flex-basis: 83%; } }

.SignupButtons-cleverSignup:hover {
  -webkit-transform: translate(0, -0.125rem);
          transform: translate(0, -0.125rem); }
/** @define ActivitiesListWithTitle */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivitiesListWithTitle--withGroupFilter {
  padding: 0.675rem 0.5rem; }
  @media screen and (min-width: 40rem) {
    .ActivitiesListWithTitle--withGroupFilter {
      padding-right: 1rem;
      padding-left: 1rem; } }
  @media screen and (min-width: 50rem) {
    .ActivitiesListWithTitle--withGroupFilter {
      padding-right: 2rem;
      padding-left: 2rem; } }

.ActivitiesListWithTitle--withGroupFilter .ActivitiesList {
  padding-right: 0;
  padding-left: 0; }

.ActivitiesListWithTitle--withGroupFilter .SharePrompt {
  padding-right: 0;
  padding-left: 0; }
/** @define ActivitiesList */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivitiesList {
  padding-right: 0.5rem;
  padding-left: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .ActivitiesList {
      padding-right: 1rem;
      padding-left: 1rem; } }
  @media screen and (min-width: 50rem) {
    .ActivitiesList {
      padding-right: 2rem;
      padding-left: 2rem; } }

.ActivitiesList-item {
  margin-left: auto;
  margin-right: auto;
  max-width: 24rem; }
  @media screen and (min-width: 40rem) {
    .ActivitiesList-item {
      margin-left: 0;
      margin-right: 0;
      max-width: 36rem; } }

.ActivitiesList-item {
  margin-bottom: 1rem; }
  @media screen and (min-width: 40rem) {
    .ActivitiesList-item {
      margin-bottom: 2rem; } }

.favorites-empty {
  max-width: 969px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
  border: 2px solid #e6e6e6;
  border-radius: 0.5rem;
  text-align: center;
  background-color: #fff; }
  .favorites-empty img {
    display: block;
    max-width: 100%;
    margin: 0 auto; }
  .favorites-empty h2 {
    margin-top: 2rem;
    margin-bottom: 0.375rem;
    font-size: 2rem;
    color: #333; }
  .favorites-empty p {
    margin-top: 0;
    color: #666; }
/** @define Tile */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Tile {
  background: #fff;
  border: 0.125rem solid #000;
  border-radius: 0.25rem;
  min-width: 8rem;
  overflow: hidden;
  position: relative;
  text-align: left; }
  @media screen and (min-width: 23.4375rem) {
    .Tile {
      font-size: 1.15rem; } }
  @media screen and (min-width: 31.25rem) {
    .Tile {
      font-size: 1.25rem; } }
  @media screen and (min-width: 56.25rem) {
    .Tile {
      font-size: 1.5rem; } }

.Tile-innerContainer {
  display: inline-block;
  width: 100%; }

.Tile-images {
  overflow: hidden;
  position: relative; }

.Tile-trialReminder {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.Tile-lockedOverlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.Tile-badge {
  height: 2.25em;
  left: 0;
  position: absolute;
  top: -0.13em;
  width: 2.25em;
  z-index: 200; }

.Tile-badge-questionSets {
  height: 3.75rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 12.5rem;
  z-index: 200; }

.Tile-sponsorBanner {
  left: -5px;
  position: absolute;
  top: 0.5rem; }

.Tile-placeholder {
  height: 0;
  padding-top: 56.25%; }

.Tile-thumb,
.Tile-maintenance {
  height: auto;
  vertical-align: bottom;
  width: 100%; }

.Tile-thumb,
.Tile-maintenance {
  left: 0;
  position: absolute;
  top: 0; }

.Tile-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0.5rem 0;
  padding: 0 0.5em; }

.Tile-title {
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.5em 0;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .Tile-title {
      display: inline-block;
      margin: 0;
      width: calc(100% - 4.25em); } }

.Tile-meta {
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.875rem;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .Tile-meta {
      width: auto;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; } }

.Tile-relation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 3;
      -ms-flex: 3 1 auto;
          flex: 3 1 auto;
  margin-right: 0.5em;
  overflow: hidden; }
  @media screen and (min-width: 50rem) {
    .Tile-relation {
      display: none; } }

.Tile-relationIcon {
  width: 1.38462em;
  height: 1.38462em;
  margin-right: 0.25em;
  vertical-align: baseline; }
  @media screen and (min-width: 50rem) {
    .Tile-relationIcon {
      font-size: 1.125rem; } }
  @media screen and (min-width: 56.25rem) {
    .Tile-relationIcon {
      font-size: 1.375rem; } }

.Tile-relationTitle {
  width: calc(100% - (1.38462em + 0.4em)); }

.Tile-relationName {
  display: inline-block;
  overflow: hidden; }

.Tile-duration {
  text-align: right;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  white-space: nowrap; }

.Tile-gameIndicator {
  background: -webkit-gradient(linear, left top, left bottom, from(#7328ff), to(#ba1aba));
  background: linear-gradient(180deg, #7328ff 0%, #ba1aba 100%);
  border-radius: 21px;
  color: #fff;
  font-family: "csr", Verdana, sans-serif;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1;
  padding: 0.3rem 0.5rem; }

.Tile-duration:only-child {
  text-align: left; }

.Tile-durationIcon {
  height: 0.75rem;
  position: relative;
  vertical-align: middle;
  width: 0.75rem; }

.Tile-nav {
  display: none; }

@media screen and (min-width: 50rem) {
  .Tile-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

.Tile-button {
  border-left: 1px solid #eee;
  color: #000;
  font-size: 0.875rem;
  padding: 0.6em 0.512846154em;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .Tile-button {
      font-size: 0.8125rem;
      padding: 0.75em 0.512846154em; } }
  @media screen and (min-width: 56.25rem) {
    .Tile-button {
      font-size: 0.9375rem;
      padding-right: 0.8em;
      padding-left: 0.8em; } }
  @media screen and (min-width: 100rem) {
    .Tile-button {
      padding-right: 0.75em;
      padding-left: 0.75em; } }
  .Tile-button:first-child {
    border-left: none; }

.Tile-buttonRelation {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 4;
      -ms-flex: 4 1 100%;
          flex: 4 1 100%;
  padding-bottom: 0.43rem;
  padding-top: 0.5rem;
  text-align: left; }

.Tile-shareBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  font-size: 1em;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-right: 0.75rem; }

@media screen and (min-width: 50rem) {
  .Tile-shareBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

.Tile-shareBtnIcon {
  height: 1.2rem;
  position: relative;
  width: 1.5rem; }

.Tile-shareBtnPrompt {
  color: #000;
  font-size: 0.875rem;
  margin-left: 0.3rem;
  white-space: nowrap; }

.Tile-action {
  font-size: 0.85rem;
  display: none;
  position: absolute;
  top: 1rem;
  left: 1rem;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out; }
  @media screen and (min-width: 50rem) {
    .Tile-action {
      display: block; } }

.Tile-action.is-active {
  opacity: 1; }

.Tile-favorite {
  right: 1rem;
  left: auto; }

.Tile-moreBtn {
  left: auto;
  right: 1rem;
  top: 4rem; }

.Tile:hover .Tile-action {
  opacity: 1; }

.touchevents .Tile-action {
  display: block;
  opacity: 1; }

/* Modifier: Flash requirement and unsupported message for games
   ========================================================================== */
.no-flash .Tile--flash,
.Tile--unsupported {
  pointer-events: none; }
  .no-flash .Tile--flash .Tile-images::after,
  .Tile--unsupported .Tile-images::after {
    background: #666;
    border-radius: 100rem;
    border: 3px solid #fff;
    color: #fff;
    content: 'Requires Flash Player';
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 700;
    left: 50%;
    padding: 0.25rem 0.5rem;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 2; }
    @media screen and (min-width: 31.25rem) {
      .no-flash .Tile--flash .Tile-images::after,
      .Tile--unsupported .Tile-images::after {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem; } }
    @media screen and (min-width: 56.25rem) {
      .no-flash .Tile--flash .Tile-images::after,
      .Tile--unsupported .Tile-images::after {
        font-size: 1rem; } }
  .no-flash .Tile--flash .Tile-images .Tile-thumb,
  .Tile--unsupported .Tile-images .Tile-thumb {
    opacity: 0.25; }
  .no-flash .Tile--flash .Tile-info,
  .Tile--unsupported .Tile-info {
    opacity: 0.5; }

.Tile--unsupported .Tile-images::after {
  content: 'Device Not Supported'; }

/* Modifier: Used for displaying tiles outside of lists. This ensures the
 * Channel is always visible.
   ========================================================================== */
@media screen and (min-width: 50rem) {
  .Tile--simple .Tile-buttonRelation {
    display: block; }
    .Tile--simple .Tile-buttonRelation:hover {
      background-color: transparent; } }

.Tile--simple .Tile-relationTitle {
  width: auto; }

/* Modifier: Cap the width of a Tile
   ========================================================================== */
.Tile--capWidth {
  max-width: 36rem; }
/** @define LockedOverlay */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.LockedOverlay {
  background-color: rgba(45, 10, 110, 0.8);
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  height: 100%;
  padding: 0.5rem;
  width: 100%; }
  @media screen and (min-width: 25rem) and (max-width: 39.94rem) {
    .LockedOverlay {
      font-size: 80%; } }
  @media screen and (min-width: 40rem) and (max-width: 64rem) {
    .LockedOverlay {
      font-size: 45%; } }
  @media screen and (min-width: 64.06rem) and (max-width: 75rem) {
    .LockedOverlay {
      font-size: 60%; } }
  @media screen and (min-width: 75.06rem) {
    .LockedOverlay {
      font-size: 65%; } }

.LockedOverlay-content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 101; }

.LockedOverlay-lock {
  padding-right: 0.25rem;
  text-align: right; }

.LockedOverlay-lockIcon {
  height: 3em;
  margin-top: 0.5rem;
  width: 3em; }

.LockedOverlay-text {
  width: 50%; }

.LockedOverlay-logoText {
  padding-bottom: 0.1rem; }
/** @define ShareActivityModal */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ShareActivityModal .bbm-modal {
  max-width: 37rem; }

.ShareActivityModal-platformBtn {
  background-position: center top;
  display: inline-block;
  height: 4.25rem;
  margin: 0 0.5rem 1.5rem;
  padding: 0;
  position: relative;
  vertical-align: top;
  width: 4.25rem; }

.ShareActivityModal-facebook {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAAXNSR0IArs4c6QAACn5JREFUeAHlXH9sVVcd/94fr78oELZB1tRSlgUcQQHRGSeLtFDBwTo3tqHZdJkmhqYmuCWLBk00M1H+wQRJbFoTDcHNOLaoWWF1WGgljpkobMyxZRjMSu2AMthGoe177957/HxOe9vyfPfd+8r7UZ4nuTnv3XPuOd/P536/53zPr2tIAUNDa0+1oS7XWmLVeaLqxFPLUf0XRVT9mBhGH+I/i2m8YYrR74rbr4w5A71tjVcKJaaRz4oaHu+psCtHVirPbRRDPi9KlimRGsM0K0zTFqWUKM/RMeUwDEMM3Gfs8b7njULAs3j2JJ49aphWjzNS+XrvnsbRfMmdF0KaWl76lBjeVzwlzUC71LLLDaWgE8rF5UEhQEuUQIIM6Iph6dh14go/3jYN6RRlPtfdvvG1KMVkkyd3hChlNLUe2Ig32Yo332Ta5WVjb9nJRp7QvNQgapfnxBPQpG5oT1t326aXQFREljNXkRNCGrd2rrMMY7syjHVQa/HcZHQtyCxfcCq0x7RiMCtXoH6HXKV29HQ0Hwp+IFrKdRHyhdY/1sU8+8ew/q+DCMtzE9FqzXEu0yojMS7ewm+SpvPDI23390+3imkT0tjy4hbLsHYaZqwOto36c6Kx08WB5wxBWwVikv2ucp/qab9v33QKy5oQ9hxm+dAOaMQTFIK9xEwKbGP4cqAxu7z47O3Z9khZEbK+5eUFrjh7TDt2j5ucCVoR9CqgLbFyNLzJLkvsxw+2bxgMypl6PzIhDS1/WGRK7AXLin16zERSiyrcfw/9uYuLcaqh+oDoy9ggRbnOMcNxHurd88C7UST0n8+Yd+23D9SLq/ajVf8EuruMefOVSCcukfTEsgy5eW6F1M6vkgU3Vcnc6pjEbFO7No7ryUjclXjC1fGV4YQMJ0wZGPzozaGR0XuP/urBvjD5QglZ3/L7BY6KdVl22apiaUY86crsqpjcvfJWWXtnrdyxaJ7Mm1Mehk2nJ5KObPvZ3+Wt0xeOV9ruPQfbN2c0H7ZAgYENqKsu7y0WGXRok44na1bVyDfvu0Nur5sbKGtQQlnMEvGS7IFWuSq+F5juz9TQZiSEvYlpV25wnbwNHYJwwATQRoCQrZuXyqMbF8MRDVXmtGX5owQ3OSqxiqoNSoZ2IOOTaTPjphmUsG5r50Powr5TLDNxXCUtDy6Vr21aMm0yUrERCzERW2qa/z8tIWtbOmshxS7053gtqe24/2j+YjaKX7qrTr66YXGOKyEWYAI2jTFN6WkJwWM/gTtcy3FCoQO70/nzKuVbMJV8BGLS2IAxXfn/Q0hTS2eDaViPFstU2IhuvLtOk5JO4FzcIzZiJNbU8q4h5OGH91kYNf4IcxBobAtvKmwAqyttafrsx1LlnPb/9I0xp1VMm1iJeWrh1/QyF2+pWG+KvaZYo1YXjtWS+nlSXzN7qoyRftMpo3b5vYr/kO6t2F2lBGLEvMoaYkZSl588hRBlKO/FbaZtIvaTCxs7EHzJwrkQNHoXe+LU+9J5pE/+PTAkowlOR3LIORlIxaWP4mLDm00NmMo0PEdtgzX8CU9p1iYIady6fznsai0GRKnPFe4/RFp4a3Xk+o4cf0+e/uUxGYW7btvsPKZSMVkMCU6XQqzETOw9HXKCT0zSprxH0PqWFaPt8EXH9KnchHFKlEDz2Lv/lB7fVJRjTGuZYgF4uisdGWN1KPY4nF16xK9TE6LnOMRs5hxoMYOJN1wFcFHC+UvD8p/Bq3pgFyV/UB5iNoGdHDCPJsQoG16BXx8vht8xVVBqvIU3HSUMjzi6EU1rC1EKGM+jMQO75gD3xmo3nLWmVY7ful3JorjiZeVcSG4CzQbYwQHL04RAZVZjKJWb8m/AUoidHGhCGlr3VWPeaVmxzaWYPBI7OSAXcDrKayFMjV5RK6ZURax7HHsNuTBNTxbCi8XkY65ssojIpls1sJMDcmFjta3WwmqbW4Au18UcRxIudlCg+x21sfQAYhTTBHyNwX4GGkl0XWWxsb4jqF7eN8mBcmq5BL+S/n6+A4n4zNL5ejowqC6CvK022jim5pZZ8t3HVoQSMnhpRH538HRQlRP3NQfgAoQYTYVYbKJ2LMY45csNt00IcT0/OMkcpSyOdZ7p+pf2ZDPVpzkAF+h/VX0hNITCkJRChzPnrginI8OC5gBchBtXWEkzPP3cxZGs/E2s8Bh9QaPEGY41knjnLw5jFByeVXMALmgy3XqCLPyZGzLH4AcjkeZXNAfggvuVXi9VDWG3zMkhdr1hQXMALuCpqgGvCLPrYQLmIn3oakIu4+I8S1ggB+TC9Ew5gy4HKzjhLIYVOtPSP7gcF04ThFoAsJMDcmEqIz4AIGcxC513PFy5L2QgIXHsGAirdRz7WXJh97ZtuYKlvZPYEbQonyNeTu2d7r8sB/7aF8iJB6/+c59cEGlN5sOhuLxy4lxgWUw4cepiJMXnRkGMGU6SCz3JjBHEK9jsuClj6deZyD0c/3jrgrz6z/OBJXEss/up1ZEIee/CVfnpr1/L6LrzJbDesID9jOKCA+Ybm3VX9mHPjeP90G7CvbqwCoLSaTKWFTxn6rgQDSCiBPYcFWVWRkKilMOhocYODphf06cSVScwafSOVp1opZRMrjFzkXc0Bz4h3EACs+nkDuH/t6B3RQO7v4lm0sAM87dY3sPO22gqWxrE0VyAGdh9PBOE9HTc+4an3MPYcumnlXxMrMRM7D7YCUKgGcowjd04kpG/VtWvdYbExErMxO6LNIUQkZvfHz2Ilay/YHnPTy/ZmBiJlZingryGkOef3+LiVMPTcNCwdaiU2xK46vDViZWYAwlhQnd7c6+nnGe5kb5UA7Gh7XiWWFMxXqMhfiJ8+++j9R0oRb+EmDQ2kR/4eKfGaQk53N48AJ3iaQc0NqVkOsQCTMCmMU5lYvx3WkKYdqij+QWcPfl5KZkOsRATsaXhQt8KJISpXnzOds8ZebkUSNHtBrAQUxAZvJ+RELqzluE+5jqJ4zcyKZRdYwAW30UPIiUjIXxInx6wzc2um3yTS8A3WqDMlF2AIewkBLGFEsJMh3+xqQ+bHptx2vLYjaQp2kwgM2UnBmIJC5EIYSG97Q+8a0tsI7qsLivG7VgzuffhEbMKdq9dlJmyE0OUEJkQFsaza+5o9WYctdiFPZ7cQhCljoLmoUyUjTJS1mzO21HQrBGNN0pP4pjqq5Zh74SN4pgqz+tOjI8KSsBkZdAK3a06Y8dUO6Z3TDUrDZmsXITnYhNGYrXnOnvg2brFHBCybsoAE9lDmaZ7Zpf4staQqaSMn6D+Bo66P2N5ajvc4oIddedaC4nQKwWecwh7S3Jy1P26CPHJ0WfulTqsP4bgOq1wjvExhIq8fAzBr9M0zQSG793Yl9/W0zHDPobgC+nH/ucysCGoGfsuIn8ug8sQO5+4S+5ctsAvKjVmQ/U2rs7h4eRzs2aVzeDPZaSKjv/cLp3NB1V4mmr399bI8tvn+KXx9ONZXCdxHcXVg4uL83k7FZkTk4GQacN4j/Q3JPIS/5M76LDrXC+BT+54K+DPNCGpnulYee+79OFQt8gcznGewdWPawAEFOyTO/8F2UyOUPCSumUAAAAASUVORK5CYII=);
  background-image: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAAXNSR0IArs4c6QAACn5JREFUeAHlXH9sVVcd/94fr78oELZB1tRSlgUcQQHRGSeLtFDBwTo3tqHZdJkmhqYmuCWLBk00M1H+wQRJbFoTDcHNOLaoWWF1WGgljpkobMyxZRjMSu2AMthGoe177957/HxOe9vyfPfd+8r7UZ4nuTnv3XPuOd/P536/53zPr2tIAUNDa0+1oS7XWmLVeaLqxFPLUf0XRVT9mBhGH+I/i2m8YYrR74rbr4w5A71tjVcKJaaRz4oaHu+psCtHVirPbRRDPi9KlimRGsM0K0zTFqWUKM/RMeUwDEMM3Gfs8b7njULAs3j2JJ49aphWjzNS+XrvnsbRfMmdF0KaWl76lBjeVzwlzUC71LLLDaWgE8rF5UEhQEuUQIIM6Iph6dh14go/3jYN6RRlPtfdvvG1KMVkkyd3hChlNLUe2Ig32Yo332Ta5WVjb9nJRp7QvNQgapfnxBPQpG5oT1t326aXQFREljNXkRNCGrd2rrMMY7syjHVQa/HcZHQtyCxfcCq0x7RiMCtXoH6HXKV29HQ0Hwp+IFrKdRHyhdY/1sU8+8ew/q+DCMtzE9FqzXEu0yojMS7ewm+SpvPDI23390+3imkT0tjy4hbLsHYaZqwOto36c6Kx08WB5wxBWwVikv2ucp/qab9v33QKy5oQ9hxm+dAOaMQTFIK9xEwKbGP4cqAxu7z47O3Z9khZEbK+5eUFrjh7TDt2j5ucCVoR9CqgLbFyNLzJLkvsxw+2bxgMypl6PzIhDS1/WGRK7AXLin16zERSiyrcfw/9uYuLcaqh+oDoy9ggRbnOMcNxHurd88C7UST0n8+Yd+23D9SLq/ajVf8EuruMefOVSCcukfTEsgy5eW6F1M6vkgU3Vcnc6pjEbFO7No7ryUjclXjC1fGV4YQMJ0wZGPzozaGR0XuP/urBvjD5QglZ3/L7BY6KdVl22apiaUY86crsqpjcvfJWWXtnrdyxaJ7Mm1Mehk2nJ5KObPvZ3+Wt0xeOV9ruPQfbN2c0H7ZAgYENqKsu7y0WGXRok44na1bVyDfvu0Nur5sbKGtQQlnMEvGS7IFWuSq+F5juz9TQZiSEvYlpV25wnbwNHYJwwATQRoCQrZuXyqMbF8MRDVXmtGX5owQ3OSqxiqoNSoZ2IOOTaTPjphmUsG5r50Powr5TLDNxXCUtDy6Vr21aMm0yUrERCzERW2qa/z8tIWtbOmshxS7053gtqe24/2j+YjaKX7qrTr66YXGOKyEWYAI2jTFN6WkJwWM/gTtcy3FCoQO70/nzKuVbMJV8BGLS2IAxXfn/Q0hTS2eDaViPFstU2IhuvLtOk5JO4FzcIzZiJNbU8q4h5OGH91kYNf4IcxBobAtvKmwAqyttafrsx1LlnPb/9I0xp1VMm1iJeWrh1/QyF2+pWG+KvaZYo1YXjtWS+nlSXzN7qoyRftMpo3b5vYr/kO6t2F2lBGLEvMoaYkZSl588hRBlKO/FbaZtIvaTCxs7EHzJwrkQNHoXe+LU+9J5pE/+PTAkowlOR3LIORlIxaWP4mLDm00NmMo0PEdtgzX8CU9p1iYIady6fznsai0GRKnPFe4/RFp4a3Xk+o4cf0+e/uUxGYW7btvsPKZSMVkMCU6XQqzETOw9HXKCT0zSprxH0PqWFaPt8EXH9KnchHFKlEDz2Lv/lB7fVJRjTGuZYgF4uisdGWN1KPY4nF16xK9TE6LnOMRs5hxoMYOJN1wFcFHC+UvD8p/Bq3pgFyV/UB5iNoGdHDCPJsQoG16BXx8vht8xVVBqvIU3HSUMjzi6EU1rC1EKGM+jMQO75gD3xmo3nLWmVY7ful3JorjiZeVcSG4CzQbYwQHL04RAZVZjKJWb8m/AUoidHGhCGlr3VWPeaVmxzaWYPBI7OSAXcDrKayFMjV5RK6ZURax7HHsNuTBNTxbCi8XkY65ssojIpls1sJMDcmFjta3WwmqbW4Au18UcRxIudlCg+x21sfQAYhTTBHyNwX4GGkl0XWWxsb4jqF7eN8mBcmq5BL+S/n6+A4n4zNL5ejowqC6CvK022jim5pZZ8t3HVoQSMnhpRH538HRQlRP3NQfgAoQYTYVYbKJ2LMY45csNt00IcT0/OMkcpSyOdZ7p+pf2ZDPVpzkAF+h/VX0hNITCkJRChzPnrginI8OC5gBchBtXWEkzPP3cxZGs/E2s8Bh9QaPEGY41knjnLw5jFByeVXMALmgy3XqCLPyZGzLH4AcjkeZXNAfggvuVXi9VDWG3zMkhdr1hQXMALuCpqgGvCLPrYQLmIn3oakIu4+I8S1ggB+TC9Ew5gy4HKzjhLIYVOtPSP7gcF04ThFoAsJMDcmEqIz4AIGcxC513PFy5L2QgIXHsGAirdRz7WXJh97ZtuYKlvZPYEbQonyNeTu2d7r8sB/7aF8iJB6/+c59cEGlN5sOhuLxy4lxgWUw4cepiJMXnRkGMGU6SCz3JjBHEK9jsuClj6deZyD0c/3jrgrz6z/OBJXEss/up1ZEIee/CVfnpr1/L6LrzJbDesID9jOKCA+Ybm3VX9mHPjeP90G7CvbqwCoLSaTKWFTxn6rgQDSCiBPYcFWVWRkKilMOhocYODphf06cSVScwafSOVp1opZRMrjFzkXc0Bz4h3EACs+nkDuH/t6B3RQO7v4lm0sAM87dY3sPO22gqWxrE0VyAGdh9PBOE9HTc+4an3MPYcumnlXxMrMRM7D7YCUKgGcowjd04kpG/VtWvdYbExErMxO6LNIUQkZvfHz2Ilay/YHnPTy/ZmBiJlZingryGkOef3+LiVMPTcNCwdaiU2xK46vDViZWYAwlhQnd7c6+nnGe5kb5UA7Gh7XiWWFMxXqMhfiJ8+++j9R0oRb+EmDQ2kR/4eKfGaQk53N48AJ3iaQc0NqVkOsQCTMCmMU5lYvx3WkKYdqij+QWcPfl5KZkOsRATsaXhQt8KJISpXnzOds8ZebkUSNHtBrAQUxAZvJ+RELqzluE+5jqJ4zcyKZRdYwAW30UPIiUjIXxInx6wzc2um3yTS8A3WqDMlF2AIewkBLGFEsJMh3+xqQ+bHptx2vLYjaQp2kwgM2UnBmIJC5EIYSG97Q+8a0tsI7qsLivG7VgzuffhEbMKdq9dlJmyE0OUEJkQFsaza+5o9WYctdiFPZ7cQhCljoLmoUyUjTJS1mzO21HQrBGNN0pP4pjqq5Zh74SN4pgqz+tOjI8KSsBkZdAK3a06Y8dUO6Z3TDUrDZmsXITnYhNGYrXnOnvg2brFHBCybsoAE9lDmaZ7Zpf4staQqaSMn6D+Bo66P2N5ajvc4oIddedaC4nQKwWecwh7S3Jy1P26CPHJ0WfulTqsP4bgOq1wjvExhIq8fAzBr9M0zQSG793Yl9/W0zHDPobgC+nH/ucysCGoGfsuIn8ug8sQO5+4S+5ctsAvKjVmQ/U2rs7h4eRzs2aVzeDPZaSKjv/cLp3NB1V4mmr399bI8tvn+KXx9ONZXCdxHcXVg4uL83k7FZkTk4GQacN4j/Q3JPIS/5M76LDrXC+BT+54K+DPNCGpnulYee+79OFQt8gcznGewdWPawAEFOyTO/8F2UyOUPCSumUAAAAASUVORK5CYII=) 1x, url(/assets/8efa93ecf31d91b9bbad6b3425479bff.png) 2x, url(/assets/8efa93ecf31d91b9bbad6b3425479bff.png) 3x);
  background-image: image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAYAAAA4E5OyAAAAAXNSR0IArs4c6QAACn5JREFUeAHlXH9sVVcd/94fr78oELZB1tRSlgUcQQHRGSeLtFDBwTo3tqHZdJkmhqYmuCWLBk00M1H+wQRJbFoTDcHNOLaoWWF1WGgljpkobMyxZRjMSu2AMthGoe177957/HxOe9vyfPfd+8r7UZ4nuTnv3XPuOd/P536/53zPr2tIAUNDa0+1oS7XWmLVeaLqxFPLUf0XRVT9mBhGH+I/i2m8YYrR74rbr4w5A71tjVcKJaaRz4oaHu+psCtHVirPbRRDPi9KlimRGsM0K0zTFqWUKM/RMeUwDEMM3Gfs8b7njULAs3j2JJ49aphWjzNS+XrvnsbRfMmdF0KaWl76lBjeVzwlzUC71LLLDaWgE8rF5UEhQEuUQIIM6Iph6dh14go/3jYN6RRlPtfdvvG1KMVkkyd3hChlNLUe2Ig32Yo332Ta5WVjb9nJRp7QvNQgapfnxBPQpG5oT1t326aXQFREljNXkRNCGrd2rrMMY7syjHVQa/HcZHQtyCxfcCq0x7RiMCtXoH6HXKV29HQ0Hwp+IFrKdRHyhdY/1sU8+8ew/q+DCMtzE9FqzXEu0yojMS7ewm+SpvPDI23390+3imkT0tjy4hbLsHYaZqwOto36c6Kx08WB5wxBWwVikv2ucp/qab9v33QKy5oQ9hxm+dAOaMQTFIK9xEwKbGP4cqAxu7z47O3Z9khZEbK+5eUFrjh7TDt2j5ucCVoR9CqgLbFyNLzJLkvsxw+2bxgMypl6PzIhDS1/WGRK7AXLin16zERSiyrcfw/9uYuLcaqh+oDoy9ggRbnOMcNxHurd88C7UST0n8+Yd+23D9SLq/ajVf8EuruMefOVSCcukfTEsgy5eW6F1M6vkgU3Vcnc6pjEbFO7No7ryUjclXjC1fGV4YQMJ0wZGPzozaGR0XuP/urBvjD5QglZ3/L7BY6KdVl22apiaUY86crsqpjcvfJWWXtnrdyxaJ7Mm1Mehk2nJ5KObPvZ3+Wt0xeOV9ruPQfbN2c0H7ZAgYENqKsu7y0WGXRok44na1bVyDfvu0Nur5sbKGtQQlnMEvGS7IFWuSq+F5juz9TQZiSEvYlpV25wnbwNHYJwwATQRoCQrZuXyqMbF8MRDVXmtGX5owQ3OSqxiqoNSoZ2IOOTaTPjphmUsG5r50Powr5TLDNxXCUtDy6Vr21aMm0yUrERCzERW2qa/z8tIWtbOmshxS7053gtqe24/2j+YjaKX7qrTr66YXGOKyEWYAI2jTFN6WkJwWM/gTtcy3FCoQO70/nzKuVbMJV8BGLS2IAxXfn/Q0hTS2eDaViPFstU2IhuvLtOk5JO4FzcIzZiJNbU8q4h5OGH91kYNf4IcxBobAtvKmwAqyttafrsx1LlnPb/9I0xp1VMm1iJeWrh1/QyF2+pWG+KvaZYo1YXjtWS+nlSXzN7qoyRftMpo3b5vYr/kO6t2F2lBGLEvMoaYkZSl588hRBlKO/FbaZtIvaTCxs7EHzJwrkQNHoXe+LU+9J5pE/+PTAkowlOR3LIORlIxaWP4mLDm00NmMo0PEdtgzX8CU9p1iYIady6fznsai0GRKnPFe4/RFp4a3Xk+o4cf0+e/uUxGYW7btvsPKZSMVkMCU6XQqzETOw9HXKCT0zSprxH0PqWFaPt8EXH9KnchHFKlEDz2Lv/lB7fVJRjTGuZYgF4uisdGWN1KPY4nF16xK9TE6LnOMRs5hxoMYOJN1wFcFHC+UvD8p/Bq3pgFyV/UB5iNoGdHDCPJsQoG16BXx8vht8xVVBqvIU3HSUMjzi6EU1rC1EKGM+jMQO75gD3xmo3nLWmVY7ful3JorjiZeVcSG4CzQbYwQHL04RAZVZjKJWb8m/AUoidHGhCGlr3VWPeaVmxzaWYPBI7OSAXcDrKayFMjV5RK6ZURax7HHsNuTBNTxbCi8XkY65ssojIpls1sJMDcmFjta3WwmqbW4Au18UcRxIudlCg+x21sfQAYhTTBHyNwX4GGkl0XWWxsb4jqF7eN8mBcmq5BL+S/n6+A4n4zNL5ejowqC6CvK022jim5pZZ8t3HVoQSMnhpRH538HRQlRP3NQfgAoQYTYVYbKJ2LMY45csNt00IcT0/OMkcpSyOdZ7p+pf2ZDPVpzkAF+h/VX0hNITCkJRChzPnrginI8OC5gBchBtXWEkzPP3cxZGs/E2s8Bh9QaPEGY41knjnLw5jFByeVXMALmgy3XqCLPyZGzLH4AcjkeZXNAfggvuVXi9VDWG3zMkhdr1hQXMALuCpqgGvCLPrYQLmIn3oakIu4+I8S1ggB+TC9Ew5gy4HKzjhLIYVOtPSP7gcF04ThFoAsJMDcmEqIz4AIGcxC513PFy5L2QgIXHsGAirdRz7WXJh97ZtuYKlvZPYEbQonyNeTu2d7r8sB/7aF8iJB6/+c59cEGlN5sOhuLxy4lxgWUw4cepiJMXnRkGMGU6SCz3JjBHEK9jsuClj6deZyD0c/3jrgrz6z/OBJXEss/up1ZEIee/CVfnpr1/L6LrzJbDesID9jOKCA+Ybm3VX9mHPjeP90G7CvbqwCoLSaTKWFTxn6rgQDSCiBPYcFWVWRkKilMOhocYODphf06cSVScwafSOVp1opZRMrjFzkXc0Bz4h3EACs+nkDuH/t6B3RQO7v4lm0sAM87dY3sPO22gqWxrE0VyAGdh9PBOE9HTc+4an3MPYcumnlXxMrMRM7D7YCUKgGcowjd04kpG/VtWvdYbExErMxO6LNIUQkZvfHz2Ilay/YHnPTy/ZmBiJlZingryGkOef3+LiVMPTcNCwdaiU2xK46vDViZWYAwlhQnd7c6+nnGe5kb5UA7Gh7XiWWFMxXqMhfiJ8+++j9R0oRb+EmDQ2kR/4eKfGaQk53N48AJ3iaQc0NqVkOsQCTMCmMU5lYvx3WkKYdqij+QWcPfl5KZkOsRATsaXhQt8KJISpXnzOds8ZebkUSNHtBrAQUxAZvJ+RELqzluE+5jqJ4zcyKZRdYwAW30UPIiUjIXxInx6wzc2um3yTS8A3WqDMlF2AIewkBLGFEsJMh3+xqQ+bHptx2vLYjaQp2kwgM2UnBmIJC5EIYSG97Q+8a0tsI7qsLivG7VgzuffhEbMKdq9dlJmyE0OUEJkQFsaza+5o9WYctdiFPZ7cQhCljoLmoUyUjTJS1mzO21HQrBGNN0pP4pjqq5Zh74SN4pgqz+tOjI8KSsBkZdAK3a06Y8dUO6Z3TDUrDZmsXITnYhNGYrXnOnvg2brFHBCybsoAE9lDmaZ7Zpf4staQqaSMn6D+Bo66P2N5ajvc4oIddedaC4nQKwWecwh7S3Jy1P26CPHJ0WfulTqsP4bgOq1wjvExhIq8fAzBr9M0zQSG793Yl9/W0zHDPobgC+nH/ucysCGoGfsuIn8ug8sQO5+4S+5ctsAvKjVmQ/U2rs7h4eRzs2aVzeDPZaSKjv/cLp3NB1V4mmr399bI8tvn+KXx9ONZXCdxHcXVg4uL83k7FZkTk4GQacN4j/Q3JPIS/5M76LDrXC+BT+54K+DPNCGpnulYee+79OFQt8gcznGewdWPawAEFOyTO/8F2UyOUPCSumUAAAAASUVORK5CYII=) 1x, url(/assets/8efa93ecf31d91b9bbad6b3425479bff.png) 2x, url(/assets/8efa93ecf31d91b9bbad6b3425479bff.png) 3x); }

.ShareActivityModal-twitter {
  background-image: url(/assets/4b9140e97b25aa2c969763af5d76288f.png);
  background-image: -webkit-image-set(url(/assets/4b9140e97b25aa2c969763af5d76288f.png) 1x, url(/assets/0bde7d07ffe405356e32a40966c780a3.png) 2x, url(/assets/0bde7d07ffe405356e32a40966c780a3.png) 3x);
  background-image: image-set(url(/assets/4b9140e97b25aa2c969763af5d76288f.png) 1x, url(/assets/0bde7d07ffe405356e32a40966c780a3.png) 2x, url(/assets/0bde7d07ffe405356e32a40966c780a3.png) 3x); }

.ShareActivityModal-pinterest {
  background-image: url(/assets/bf6cd274bc3f10d66a20d8bb25151f6e.png);
  background-image: -webkit-image-set(url(/assets/bf6cd274bc3f10d66a20d8bb25151f6e.png) 1x, url(/assets/307f6293521437dcee44aa3c0b6b0484.png) 2x, url(/assets/307f6293521437dcee44aa3c0b6b0484.png) 3x);
  background-image: image-set(url(/assets/bf6cd274bc3f10d66a20d8bb25151f6e.png) 1x, url(/assets/307f6293521437dcee44aa3c0b6b0484.png) 2x, url(/assets/307f6293521437dcee44aa3c0b6b0484.png) 3x); }

.ShareActivityModal-link {
  background-image: url(/assets/a019b054efbfb1c9b3142809214fd5ab.png);
  background-image: -webkit-image-set(url(/assets/a019b054efbfb1c9b3142809214fd5ab.png) 1x, url(/assets/623a6288f7f605c36cdacffa5f8cba6d.png) 2x, url(/assets/623a6288f7f605c36cdacffa5f8cba6d.png) 3x);
  background-image: image-set(url(/assets/a019b054efbfb1c9b3142809214fd5ab.png) 1x, url(/assets/623a6288f7f605c36cdacffa5f8cba6d.png) 2x, url(/assets/623a6288f7f605c36cdacffa5f8cba6d.png) 3x); }

.ShareActivityModal-classroom {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAACVdJREFUeAHlW1tsHNUZ/s/sen1d21mvL22IcSAKiMRKSQiFErsCFQlEXYTV8MBT1UpBCImLaCIe+tgHBK1KUStEpKL2JQ+gpiIpUqVWQdiJ2iYEGiVUrYtolEtl4rXjxI4vG3tP/+/fObOz41nP7Mab7NqfNHtmzm3+759zmzPfKioz9FBXO1G6n2+zhbS6i8PNRDrJYZwUH4CmKf7lQ6U4HCGl/83h50SxIdU/OsbnZYMqR816OLmDdOYZJvYok9zKYWn3UVxS0xku/WdS1gHVlzq50vaWZpiPFfpoMs7G7iGtf8jHPT5ZbjxKqX+SUu+yQ/arXSm0mhvGDTtAD3evo8zMi6QyL7AD1nktSmuL/pFO0GfzCfpyIS7H6GI9XctE6ZqOSvZGtUCN1gJ1RWbpjuiUHPfWTtA3YhMUUxlvldxT6DJp6y1qbnpT3Xt2cmmG8DElO0Brreho2w8oQ6/z7dCnHUzrGvrTzHo6PHMbnZhP0pyOOGnFnNSpRdpZm6KBhgv0eP0FcZKnfIos2ke7xn+rlNKetFCXJTlAH/16N2XmDvATf8h9Fzzhd65uZuIbSibtrs99DmcMNJynZ5tHpIW407hFHCOr7hm163/n8uJDXBTtAD3UwaQXD3I/7zD1X1hooNev9NKH/MRLegymohAhDH6CW8S+ltN0W3QmV0KpS0SRQdV/6VguMvisKAfo4QQPcPQ2HzFUjf69f2oz/frq3TRfYjMPNtE/Ry23iOeb/0V74iO5cUJRmlvDc6pv4l3/UktjQzlA690RGv7oZzy1vWSqGFusoz2pB+kUD3C3Ett4oNyf/Cu1R+ZyZijrTep7+MdKvb+Yi/Q/C3SAkB86cpBXK98zVZxOr6NnUw/Q6GKDibqlYVdkht5J/o16Y5dddqhD1P/IYJATgh0wlPyF+8n/kfv53on7bnqTdzHzPUWXeCPxCX2XxwcH3BJUf+pl59rnZFkHSJ/P0G9Muben7qI3Jreay4oM97aeoefiWEnbsOhHy40JBR2QHe0XjpgBD0/+hfFvmmorOnyr7e+5loCBkaKPFJodfB2QnefnT5ipDn3+6UvfrrhmX+gpoDu81/FxbkzAFGnV7vRbJ1jeSmSFJ4uc7DyP0R4D3s2e5rx2FXMNW2EzbBdgzcKchJunoiUOkOWtvcLDPI+prlJGe4/ty17CZtgODgJwwtLdgzwHZF9sZG0v2bDIudXzvMfeoi5hOzg44PcW/VlPq3PNJ3kOkLc6+8UGy1us8Kod4AAuNpJ0ddpZzCHOcYC8z+OV1gbW9tXU743d3hAcwMUBcxSudoTjAJ7ueDMj+z6Ptzq82KwWgAs4CcARXG24HMA7OTbwSlvutzpzr5sRggs4OcCulQ1xQHYPL7uNhc0MvM+vNoATuAl4y04480V2TwobmDawk1PqDo6pIyjsqm+lV3qfpJ3JTbzFR3R87Av6+ekPaHR2MqhoyengBG7fbzybrSPL+WS2C2D31ga2scoJkP/Dd16lJzbsoI76Fmqva5FzxCGtnMjjZnO2ZN8eW9cMLBqwh1dO4Mm3xJxpybkV4pBWToCbszBizuDOLYA/Wtj79ti9LXfzv799U0GOy6UVLFREAriBo0A4p/sxBmwxdWDruhRY3JHXN7ZRsj471aRmp+jitXHK6JWZS1ayfnC8n3eabWyx7M9Vcu3MlSY5ZAjyX2tcRzVWVA6cI84PGPAKoVBaMfUXqtvE53HkT3UWbyLie50gL9FEhgjNk3dn9YtDOkb7K2nXbq5dCHFI84NfXX5xfmW9cR6Om7kFaOdR4YtNuYGp7qm/vEYfnj9JY3NX5MA54so5DRpe+Rx1EmOAvUYk+VxlMhYTos+j2buBuEIA0b3Hf1coeUl8sfUvqcAVgU9yLsSj3AXwUVNgvtW5MoQ6xYAHmGZpBsFQhUNkWsn68zgy9zx3hLDFNwtG+/PTKTl8M9iRm5q7aKB7J21L9FBPUwe11jZKyuT8NTo7fYlOTZylw+dO0BdXR/OqCVt/XqGQF0p/nMCcIOPA9osDNJmRjz4hiwdnU9zEBrrvo6c3PkTbk3cEF+Acn6a+pPf+e4yd8Qk3zpWZSs2NW600fbr+sLkcRwtAZxUH4BN1MQ6Iqgi11TfJyi4WiVHMyn4FTmcWKb2Ylinx1d5B2pG809wwVAhH4di98Vv02umDdD2zQH71Y+YYn52mBR34Aci5Lzi6MMUOgCxF9yAS3+cv5nZPXPnyT2uY6IZ4OyVqmwiLFC+inN7J6/yfbNtNnbzWLxVw3K8e3EM/PfU+TV2fdapB/Q3RGHehJtrQ1E4T89N0fmqMHRXsCHDMQaXwMjRiIiBOCEJdpIa2JropWRf3JW/KD97+wA2RN/XAgairEPAAYAtsgm1B8HAc4YWQCJKknCfRt66e5k6qiQSPndsTG33LlxIZpi7YBNuCkMeRuaMFsBorC8hSghCP2XvtARlbYtkRPiBbqOSwdYWxzcPxc3ZAbIgHahlqocmBEmM5YFSvVATZBm7gKBDOsSFLdHiQojEgSIImZ7UC3BzRFXMG92xnhg5PUy+IQ5A0PFe4Lx3/6j+h/HPP750d9lD5b0YmcHMAzgyMATwTWgck5J/HGi4GdgOTt5pCNH9wc2BzFgeIAhMiREaTui5qLCfjKjmBwgzcBMzVqE6zLQCxUGDagBStcoc6Y2X4EFzAyYGLq8sBtJ9Zi8gGcyWkaKsF4OLM/+DIUlvDzXGAaG8hP7UBHR6EBtUOcAAXB8zRrTN2HCAZrIZfcijzIESI0OFVO8DBJahMQV/s5pTnANV37jLPC/tMBogQocOrVsB2cHDA3Lzi6iVjnchIhtuGeV3AklgSmcmTXz1cdSoRaAc/6PwoJ6CEnrhvvM8rqs5rASAsGVh4zCesvSWpACLEahoPYCtsdtSjIpJiMbWPonyJA8QJorqODPJomcY1FJgQIVYLYKujGhUOLKIuoCT3dQCIiq6OhceGNBSYECFWOva1nMlpBGEsxNPLKMiXjAFegnqVS2ULtgDHEay6ZjceMtdoCRAhYpCpFHTyNhdsytMJw2axfXkrAx0gamtWXfMLkzN/on9hhK2EKRI2HOo8kuvz4AtbQyjFJevy/slPXbN/mHC7YU3/ZcY4Yk3/acpxwlr+25xxAsI1+8dJtxPEEWv1r7NeR4gz1uKfp/0cIc6o8L/P/x/6QArHQCniQAAAAABJRU5ErkJggg==);
  background-image: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAACVdJREFUeAHlW1tsHNUZ/s/sen1d21mvL22IcSAKiMRKSQiFErsCFQlEXYTV8MBT1UpBCImLaCIe+tgHBK1KUStEpKL2JQ+gpiIpUqVWQdiJ2iYEGiVUrYtolEtl4rXjxI4vG3tP/+/fObOz41nP7Mab7NqfNHtmzm3+759zmzPfKioz9FBXO1G6n2+zhbS6i8PNRDrJYZwUH4CmKf7lQ6U4HCGl/83h50SxIdU/OsbnZYMqR816OLmDdOYZJvYok9zKYWn3UVxS0xku/WdS1gHVlzq50vaWZpiPFfpoMs7G7iGtf8jHPT5ZbjxKqX+SUu+yQ/arXSm0mhvGDTtAD3evo8zMi6QyL7AD1nktSmuL/pFO0GfzCfpyIS7H6GI9XctE6ZqOSvZGtUCN1gJ1RWbpjuiUHPfWTtA3YhMUUxlvldxT6DJp6y1qbnpT3Xt2cmmG8DElO0Brreho2w8oQ6/z7dCnHUzrGvrTzHo6PHMbnZhP0pyOOGnFnNSpRdpZm6KBhgv0eP0FcZKnfIos2ke7xn+rlNKetFCXJTlAH/16N2XmDvATf8h9Fzzhd65uZuIbSibtrs99DmcMNJynZ5tHpIW407hFHCOr7hm163/n8uJDXBTtAD3UwaQXD3I/7zD1X1hooNev9NKH/MRLegymohAhDH6CW8S+ltN0W3QmV0KpS0SRQdV/6VguMvisKAfo4QQPcPQ2HzFUjf69f2oz/frq3TRfYjMPNtE/Ry23iOeb/0V74iO5cUJRmlvDc6pv4l3/UktjQzlA690RGv7oZzy1vWSqGFusoz2pB+kUD3C3Ett4oNyf/Cu1R+ZyZijrTep7+MdKvb+Yi/Q/C3SAkB86cpBXK98zVZxOr6NnUw/Q6GKDibqlYVdkht5J/o16Y5dddqhD1P/IYJATgh0wlPyF+8n/kfv53on7bnqTdzHzPUWXeCPxCX2XxwcH3BJUf+pl59rnZFkHSJ/P0G9Muben7qI3Jreay4oM97aeoefiWEnbsOhHy40JBR2QHe0XjpgBD0/+hfFvmmorOnyr7e+5loCBkaKPFJodfB2QnefnT5ipDn3+6UvfrrhmX+gpoDu81/FxbkzAFGnV7vRbJ1jeSmSFJ4uc7DyP0R4D3s2e5rx2FXMNW2EzbBdgzcKchJunoiUOkOWtvcLDPI+prlJGe4/ty17CZtgODgJwwtLdgzwHZF9sZG0v2bDIudXzvMfeoi5hOzg44PcW/VlPq3PNJ3kOkLc6+8UGy1us8Kod4AAuNpJ0ddpZzCHOcYC8z+OV1gbW9tXU743d3hAcwMUBcxSudoTjAJ7ueDMj+z6Ptzq82KwWgAs4CcARXG24HMA7OTbwSlvutzpzr5sRggs4OcCulQ1xQHYPL7uNhc0MvM+vNoATuAl4y04480V2TwobmDawk1PqDo6pIyjsqm+lV3qfpJ3JTbzFR3R87Av6+ekPaHR2MqhoyengBG7fbzybrSPL+WS2C2D31ga2scoJkP/Dd16lJzbsoI76Fmqva5FzxCGtnMjjZnO2ZN8eW9cMLBqwh1dO4Mm3xJxpybkV4pBWToCbszBizuDOLYA/Wtj79ti9LXfzv799U0GOy6UVLFREAriBo0A4p/sxBmwxdWDruhRY3JHXN7ZRsj471aRmp+jitXHK6JWZS1ayfnC8n3eabWyx7M9Vcu3MlSY5ZAjyX2tcRzVWVA6cI84PGPAKoVBaMfUXqtvE53HkT3UWbyLie50gL9FEhgjNk3dn9YtDOkb7K2nXbq5dCHFI84NfXX5xfmW9cR6Om7kFaOdR4YtNuYGp7qm/vEYfnj9JY3NX5MA54so5DRpe+Rx1EmOAvUYk+VxlMhYTos+j2buBuEIA0b3Hf1coeUl8sfUvqcAVgU9yLsSj3AXwUVNgvtW5MoQ6xYAHmGZpBsFQhUNkWsn68zgy9zx3hLDFNwtG+/PTKTl8M9iRm5q7aKB7J21L9FBPUwe11jZKyuT8NTo7fYlOTZylw+dO0BdXR/OqCVt/XqGQF0p/nMCcIOPA9osDNJmRjz4hiwdnU9zEBrrvo6c3PkTbk3cEF+Acn6a+pPf+e4yd8Qk3zpWZSs2NW600fbr+sLkcRwtAZxUH4BN1MQ6Iqgi11TfJyi4WiVHMyn4FTmcWKb2Ylinx1d5B2pG809wwVAhH4di98Vv02umDdD2zQH71Y+YYn52mBR34Aci5Lzi6MMUOgCxF9yAS3+cv5nZPXPnyT2uY6IZ4OyVqmwiLFC+inN7J6/yfbNtNnbzWLxVw3K8e3EM/PfU+TV2fdapB/Q3RGHehJtrQ1E4T89N0fmqMHRXsCHDMQaXwMjRiIiBOCEJdpIa2JropWRf3JW/KD97+wA2RN/XAgairEPAAYAtsgm1B8HAc4YWQCJKknCfRt66e5k6qiQSPndsTG33LlxIZpi7YBNuCkMeRuaMFsBorC8hSghCP2XvtARlbYtkRPiBbqOSwdYWxzcPxc3ZAbIgHahlqocmBEmM5YFSvVATZBm7gKBDOsSFLdHiQojEgSIImZ7UC3BzRFXMG92xnhg5PUy+IQ5A0PFe4Lx3/6j+h/HPP750d9lD5b0YmcHMAzgyMATwTWgck5J/HGi4GdgOTt5pCNH9wc2BzFgeIAhMiREaTui5qLCfjKjmBwgzcBMzVqE6zLQCxUGDagBStcoc6Y2X4EFzAyYGLq8sBtJ9Zi8gGcyWkaKsF4OLM/+DIUlvDzXGAaG8hP7UBHR6EBtUOcAAXB8zRrTN2HCAZrIZfcijzIESI0OFVO8DBJahMQV/s5pTnANV37jLPC/tMBogQocOrVsB2cHDA3Lzi6iVjnchIhtuGeV3AklgSmcmTXz1cdSoRaAc/6PwoJ6CEnrhvvM8rqs5rASAsGVh4zCesvSWpACLEahoPYCtsdtSjIpJiMbWPonyJA8QJorqODPJomcY1FJgQIVYLYKujGhUOLKIuoCT3dQCIiq6OhceGNBSYECFWOva1nMlpBGEsxNPLKMiXjAFegnqVS2ULtgDHEay6ZjceMtdoCRAhYpCpFHTyNhdsytMJw2axfXkrAx0gamtWXfMLkzN/on9hhK2EKRI2HOo8kuvz4AtbQyjFJevy/slPXbN/mHC7YU3/ZcY4Yk3/acpxwlr+25xxAsI1+8dJtxPEEWv1r7NeR4gz1uKfp/0cIc6o8L/P/x/6QArHQCniQAAAAABJRU5ErkJggg==) 1x, url(/assets/b0fa575be9623f78e260bd37a70d9c20.png) 2x);
  background-image: image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAACVdJREFUeAHlW1tsHNUZ/s/sen1d21mvL22IcSAKiMRKSQiFErsCFQlEXYTV8MBT1UpBCImLaCIe+tgHBK1KUStEpKL2JQ+gpiIpUqVWQdiJ2iYEGiVUrYtolEtl4rXjxI4vG3tP/+/fObOz41nP7Mab7NqfNHtmzm3+759zmzPfKioz9FBXO1G6n2+zhbS6i8PNRDrJYZwUH4CmKf7lQ6U4HCGl/83h50SxIdU/OsbnZYMqR816OLmDdOYZJvYok9zKYWn3UVxS0xku/WdS1gHVlzq50vaWZpiPFfpoMs7G7iGtf8jHPT5ZbjxKqX+SUu+yQ/arXSm0mhvGDTtAD3evo8zMi6QyL7AD1nktSmuL/pFO0GfzCfpyIS7H6GI9XctE6ZqOSvZGtUCN1gJ1RWbpjuiUHPfWTtA3YhMUUxlvldxT6DJp6y1qbnpT3Xt2cmmG8DElO0Brreho2w8oQ6/z7dCnHUzrGvrTzHo6PHMbnZhP0pyOOGnFnNSpRdpZm6KBhgv0eP0FcZKnfIos2ke7xn+rlNKetFCXJTlAH/16N2XmDvATf8h9Fzzhd65uZuIbSibtrs99DmcMNJynZ5tHpIW407hFHCOr7hm163/n8uJDXBTtAD3UwaQXD3I/7zD1X1hooNev9NKH/MRLegymohAhDH6CW8S+ltN0W3QmV0KpS0SRQdV/6VguMvisKAfo4QQPcPQ2HzFUjf69f2oz/frq3TRfYjMPNtE/Ry23iOeb/0V74iO5cUJRmlvDc6pv4l3/UktjQzlA690RGv7oZzy1vWSqGFusoz2pB+kUD3C3Ett4oNyf/Cu1R+ZyZijrTep7+MdKvb+Yi/Q/C3SAkB86cpBXK98zVZxOr6NnUw/Q6GKDibqlYVdkht5J/o16Y5dddqhD1P/IYJATgh0wlPyF+8n/kfv53on7bnqTdzHzPUWXeCPxCX2XxwcH3BJUf+pl59rnZFkHSJ/P0G9Muben7qI3Jreay4oM97aeoefiWEnbsOhHy40JBR2QHe0XjpgBD0/+hfFvmmorOnyr7e+5loCBkaKPFJodfB2QnefnT5ipDn3+6UvfrrhmX+gpoDu81/FxbkzAFGnV7vRbJ1jeSmSFJ4uc7DyP0R4D3s2e5rx2FXMNW2EzbBdgzcKchJunoiUOkOWtvcLDPI+prlJGe4/ty17CZtgODgJwwtLdgzwHZF9sZG0v2bDIudXzvMfeoi5hOzg44PcW/VlPq3PNJ3kOkLc6+8UGy1us8Kod4AAuNpJ0ddpZzCHOcYC8z+OV1gbW9tXU743d3hAcwMUBcxSudoTjAJ7ueDMj+z6Ptzq82KwWgAs4CcARXG24HMA7OTbwSlvutzpzr5sRggs4OcCulQ1xQHYPL7uNhc0MvM+vNoATuAl4y04480V2TwobmDawk1PqDo6pIyjsqm+lV3qfpJ3JTbzFR3R87Av6+ekPaHR2MqhoyengBG7fbzybrSPL+WS2C2D31ga2scoJkP/Dd16lJzbsoI76Fmqva5FzxCGtnMjjZnO2ZN8eW9cMLBqwh1dO4Mm3xJxpybkV4pBWToCbszBizuDOLYA/Wtj79ti9LXfzv799U0GOy6UVLFREAriBo0A4p/sxBmwxdWDruhRY3JHXN7ZRsj471aRmp+jitXHK6JWZS1ayfnC8n3eabWyx7M9Vcu3MlSY5ZAjyX2tcRzVWVA6cI84PGPAKoVBaMfUXqtvE53HkT3UWbyLie50gL9FEhgjNk3dn9YtDOkb7K2nXbq5dCHFI84NfXX5xfmW9cR6Om7kFaOdR4YtNuYGp7qm/vEYfnj9JY3NX5MA54so5DRpe+Rx1EmOAvUYk+VxlMhYTos+j2buBuEIA0b3Hf1coeUl8sfUvqcAVgU9yLsSj3AXwUVNgvtW5MoQ6xYAHmGZpBsFQhUNkWsn68zgy9zx3hLDFNwtG+/PTKTl8M9iRm5q7aKB7J21L9FBPUwe11jZKyuT8NTo7fYlOTZylw+dO0BdXR/OqCVt/XqGQF0p/nMCcIOPA9osDNJmRjz4hiwdnU9zEBrrvo6c3PkTbk3cEF+Acn6a+pPf+e4yd8Qk3zpWZSs2NW600fbr+sLkcRwtAZxUH4BN1MQ6Iqgi11TfJyi4WiVHMyn4FTmcWKb2Ylinx1d5B2pG809wwVAhH4di98Vv02umDdD2zQH71Y+YYn52mBR34Aci5Lzi6MMUOgCxF9yAS3+cv5nZPXPnyT2uY6IZ4OyVqmwiLFC+inN7J6/yfbNtNnbzWLxVw3K8e3EM/PfU+TV2fdapB/Q3RGHehJtrQ1E4T89N0fmqMHRXsCHDMQaXwMjRiIiBOCEJdpIa2JropWRf3JW/KD97+wA2RN/XAgairEPAAYAtsgm1B8HAc4YWQCJKknCfRt66e5k6qiQSPndsTG33LlxIZpi7YBNuCkMeRuaMFsBorC8hSghCP2XvtARlbYtkRPiBbqOSwdYWxzcPxc3ZAbIgHahlqocmBEmM5YFSvVATZBm7gKBDOsSFLdHiQojEgSIImZ7UC3BzRFXMG92xnhg5PUy+IQ5A0PFe4Lx3/6j+h/HPP750d9lD5b0YmcHMAzgyMATwTWgck5J/HGi4GdgOTt5pCNH9wc2BzFgeIAhMiREaTui5qLCfjKjmBwgzcBMzVqE6zLQCxUGDagBStcoc6Y2X4EFzAyYGLq8sBtJ9Zi8gGcyWkaKsF4OLM/+DIUlvDzXGAaG8hP7UBHR6EBtUOcAAXB8zRrTN2HCAZrIZfcijzIESI0OFVO8DBJahMQV/s5pTnANV37jLPC/tMBogQocOrVsB2cHDA3Lzi6iVjnchIhtuGeV3AklgSmcmTXz1cdSoRaAc/6PwoJ6CEnrhvvM8rqs5rASAsGVh4zCesvSWpACLEahoPYCtsdtSjIpJiMbWPonyJA8QJorqODPJomcY1FJgQIVYLYKujGhUOLKIuoCT3dQCIiq6OhceGNBSYECFWOva1nMlpBGEsxNPLKMiXjAFegnqVS2ULtgDHEay6ZjceMtdoCRAhYpCpFHTyNhdsytMJw2axfXkrAx0gamtWXfMLkzN/on9hhK2EKRI2HOo8kuvz4AtbQyjFJevy/slPXbN/mHC7YU3/ZcY4Yk3/acpxwlr+25xxAsI1+8dJtxPEEWv1r7NeR4gz1uKfp/0cIc6o8L/P/x/6QArHQCniQAAAAABJRU5ErkJggg==) 1x, url(/assets/b0fa575be9623f78e260bd37a70d9c20.png) 2x);
  background-repeat: no-repeat;
  background-size: contain;
  height: 4.375rem;
  width: 4.375rem; }

.ShareActivityModal-link::after {
  bottom: -1.5rem;
  content: 'Copied!';
  display: block;
  left: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
  width: 100%; }

.ShareActivityModal-fallback {
  display: none; }

.ShareActivityModal-fallbackUrl {
  background-color: #eee;
  border: 1px solid #555;
  font-family: monospace;
  padding: 0.25rem; }

/* Modifier: Disabled button
   ========================================================================== */
.ShareActivityModal-platformBtn--disabled {
  cursor: not-allowed;
  opacity: 0.2; }

/* State: Copied
   ========================================================================== */
.ShareActivityModal-link.is-copied::after {
  opacity: 1; }

/* State: Copy failed
   ========================================================================== */
.ShareActivityModal.is-copyFailed .ShareActivityModal-fallback {
  display: block; }
/** @define TrialReminder */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.TrialReminder {
  background-color: #5e1cca;
  color: #fff;
  font-size: 0.875rem;
  padding: 0.5rem;
  text-align: center;
  width: 100%; }
/** @define PromotionalTile */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PromotionalTile {
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  color: #fff;
  display: block;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 100; }

.PromotionalTile-innerContainer {
  display: inline-block;
  width: 100%; }

.PromotionalTile-logo {
  left: 0;
  position: absolute;
  top: 0;
  width: 50%; }

.PromotionalTile-text {
  color: #000;
  font-family: "tk", Verdana, sans-serif;
  font-size: 0.9rem;
  padding: 20% 5% 0; }
  @media screen and (min-width: 50rem) {
    .PromotionalTile-text {
      font-size: 1rem; } }

.PromotionalTile-altText {
  color: #5e1cca;
  text-decoration: underline; }

.PromotionalTile-img {
  bottom: 0;
  position: absolute;
  width: 100%; }
/** @define ModalV2 */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ModalV2 {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 800; }
  @media screen and (min-width: 40rem) {
    .ModalV2 {
      padding: 2rem; } }

.ModalV2:before {
  content: '';
  display: inline-block;
  height: 100%;
  margin-right: -0.25rem;
  vertical-align: middle; }

.ModalV2-dialog {
  display: inline-block;
  max-width: 40rem;
  padding: 1rem;
  position: relative;
  vertical-align: middle;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .ModalV2-dialog {
      padding: 2rem; } }

.ModalV2-dialog::after,
.ModalV2-dialog::before {
  content: '';
  height: 100%;
  position: absolute;
  width: 100%; }

.ModalV2-dialog::after {
  background-color: #fff;
  left: 0;
  top: 0;
  z-index: -2; }
  @media screen and (min-width: 40rem) {
    .ModalV2-dialog::after {
      border: 0.125rem solid #000; } }

.ModalV2-dialog::before {
  background-color: #5e1cca;
  border: 0.125rem solid #000;
  display: none;
  left: 0.5rem;
  position: absolute;
  top: 0.5rem;
  z-index: -3; }
  @media screen and (min-width: 40rem) {
    .ModalV2-dialog::before {
      display: block; } }

.ModalV2-closeBtn {
  left: 1rem;
  position: absolute;
  top: 1rem;
  z-index: 300; }
  @media screen and (min-width: 50rem) {
    .ModalV2-closeBtn {
      left: -1rem;
      top: -1rem; } }

/* Modifier: Small size.
   ========================================================================== */
.ModalV2--sm .ModalV2-dialog {
  max-width: 20rem; }

/* Modifier: Medium size.
   ========================================================================== */
.ModalV2--md .ModalV2-dialog {
  max-width: 35rem; }

/* Modifier: Large size.
   ========================================================================== */
.ModalV2--lg .ModalV2-dialog {
  max-width: 67rem; }

/* Modifier: No dialog background, so that child has appearance control.
   ========================================================================== */
.ModalV2--noBg .ModalV2-dialog::before,
.ModalV2--noBg .ModalV2-dialog::after {
  display: none; }

.ModalV2--noBg .ModalV2-dialog {
  padding: 0; }
/** @define MoreInfo */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.MoreInfo {
  position: relative;
  text-align: left; }

.MoreInfo-primary {
  background-color: #fff;
  padding: 1rem; }
  @media screen and (min-width: 50rem) {
    .MoreInfo-primary {
      border: 0.125rem solid #000;
      min-height: 100%;
      padding: 4rem; } }

.MoreInfo-secondary {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #5e1cca;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 50rem) {
    .MoreInfo-secondary {
      border: 0.125rem solid #000;
      left: 0.5rem;
      min-height: 100%;
      position: absolute;
      top: 0.5rem;
      width: 100%;
      z-index: -100; } }

.MoreInfo-favorite {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: 1rem; }
  @media screen and (min-width: 50rem) {
    .MoreInfo-favorite {
      position: absolute;
      right: 4rem;
      top: 4rem; } }

.MoreInfo-header {
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABGdBTUEAALGPC/xhBQAAAKhJREFUCB1j1Hgz5el/BsajrCwslVcE0u8yoAGdDzOVf//5087I8N+aCSjHwfD/f+if338uqL+dloisFsQHiYPkQeoY////z6j1bqbLv/9/5wMFpRkZGS4DJUBY9/9/Bl0g/xkDI2PidaGs3Ywwk7Q/zhH68+vnNEbG/8FARSxABX+BcusY2Xgyb/DFvwWpgyuGabL8v4rz/fv3KtyCDHfPMqZ/g4mDaAATJETk0JAHbwAAAABJRU5ErkJggg==) center bottom repeat-x;
  background-image: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABGdBTUEAALGPC/xhBQAAAKhJREFUCB1j1Hgz5el/BsajrCwslVcE0u8yoAGdDzOVf//5087I8N+aCSjHwfD/f+if338uqL+dloisFsQHiYPkQeoY////z6j1bqbLv/9/5wMFpRkZGS4DJUBY9/9/Bl0g/xkDI2PidaGs3Ywwk7Q/zhH68+vnNEbG/8FARSxABX+BcusY2Xgyb/DFvwWpgyuGabL8v4rz/fv3KtyCDHfPMqZ/g4mDaAATJETk0JAHbwAAAABJRU5ErkJggg==) 1x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAKCAYAAACwoK7bAAAABGdBTUEAALGPC/xhBQAAAVVJREFUKBVj1Hgz9RMDw//HDAwM+xkYWZbeEM44DmSTDDTezrBk+P8nGqjRkYGBUZZR/fWU/yimMDJuZGdnSrvEm/kKRRwHR+/zdLGfP//NYvj/3x9ZCRMyB8wGKvj54+8J9dfT1DHk0ARAakBq0Q0FKWNiZGDYAnT6PTQ9ioyM/45qvJ3qhiYO52q8ne4OUgMUUIQLQhj3QWYCMQRofphp9P/P747//xlcYWJgmpFhH+N/xlVMzIzXQPx/f/9r/Wf8H8bwn8EJXR3Df5bym6IZZ0DicINhioCR2f7///8KGJ8YmpGJsfe6UFYpIyMjPL4wDAYZBAy7DKA3JwNdz4LXYEbGv0ADCm6IZE9BV4cZeUAVN0WzZrAwMOoxMjKsB7riN7omsBgw9TAz/tfHZihIPVYXIxtk/G4m/zeGvzb//jLIgjUwMz7hYOQ4ckEw8QOyOrqxAcO9b2jrvlbTAAAAAElFTkSuQmCC) 2x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAPCAYAAABqQqYpAAAABGdBTUEAALGPC/xhBQAAAjdJREFUOBHtVEtoE1EUvedNagK2ok2CoiJ0YwLV0IKLrsQPFD9FcOFnpYgotQvRRemqGxdV0I3QDyoICrqwgi60SOuiO0EQcfxVkSr+ScZGoi1tTOZ6X+nQzjiTTgV3Pgj3vXPPue/MezcPaaunwEQfQfyeoAYXGVW3zKVH3tI/Gpnvl+qK5V+7ie1mJqwB0Wqkct3iwT0ADEYU2p/VtpnuzN+v1o31Zko2n2XmZm8VXxPTJJANxvn1iWR7P/aWvcKw6z18wzCt7DkCHScm5afzBaeJImDik0+t7O0MX13sJ54P0zqtF96JIAO6RrCJmR3krlqK3wrDjT8uJ2egUEHztU7r5xMoQHVJD1wD4U0QmZk2TExOPKi3+rYEcebimqf5WjcXd88xCtB1+Z2W5pwd9fmehnKJO8T9/lnUPROzd1nhSrS2esDEgXEnq49+auznDth8UK5xp4N7o3zwTWKcGUm2PXJyLhMOmM71bWKy+4k44WB/RGlcInwB01cGL5f8ykr3LpvnAWPfy3jrkLeWrwlNShcuruWp4j2Z1nlFC14DHyIwtj2Pt77w0wY25siSo6+jMaNJ/loP/YRhMbm+x8SxpiADuk6gCZ00a45lq+NVm+Uou6WBShoLPYAyFC4YCdr4Knn4cyVd4HV4RalcbwrgTsF3yatX4807ayk4Ls/xnYgyTlX6eoevY2gTjmg7D0Tf5Ue3sk0NstkqweX9gCVN/AlKPVmxLHZ/GIcmHf7/uJAT+A01Kr40yet2PwAAAABJRU5ErkJggg==) 3x);
  background-image: image-set("~images/bg-squiggle-green.png" 1x, "~images/bg-squiggle-green_2x.png" 2x, "~images/bg-squiggle-green_3x.png" 3x);
  margin-bottom: 1rem;
  padding-bottom: 0.3125rem; }

.MoreInfo-body {
  margin-bottom: 2rem; }
  @media screen and (min-width: 50rem) {
    .MoreInfo-body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }

@media screen and (min-width: 50rem) {
  .MoreInfo-bodyLeft {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 55%;
            flex: 1 0 55%;
    margin-right: 1rem;
    max-width: 28rem; } }

.MoreInfo-bodyRight {
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .MoreInfo-bodyRight {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 35%;
              flex: 1 0 35%;
      max-width: 21rem; } }

.MoreInfo-thumb {
  border-radius: 6px;
  border: 0.1875rem solid #000;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative; }

.MoreInfo-lockedOverlay {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 100; }

.MoreInfo-img {
  vertical-align: bottom; }

.MoreInfo-title {
  color: #333;
  margin: 0 0 0.5rem; }

.MoreInfo-subTitle {
  color: #333;
  font-family: "csr", Verdana, sans-serif;
  font-weight: normal;
  margin: 0 0 0.5rem; }
  @media screen and (min-width: 40rem) {
    .MoreInfo-subTitle {
      font-size: 1.25rem; } }

.MoreInfo-list {
  margin-bottom: 1rem; }

.MoreInfo-listHeading {
  color: #5e1cca;
  margin: 0 0 0.5rem;
  text-transform: uppercase; }

.MoreInfo-lockIcon {
  font-size: 1.5rem; }

.MoreInfo-moreLike {
  display: none;
  text-align: right; }
  @media screen and (min-width: 50rem) {
    .MoreInfo-moreLike {
      display: block; } }

/* State: Secondary UI active.
   ========================================================================== */
.MoreInfo.is-activeSecondaryUI .MoreInfo-primary {
  width: 100%; }

.MoreInfo.is-activeSecondaryUI .MoreInfo-secondary {
  z-index: 200; }
/** @define MoreLikeActivity */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.MoreLikeActivity {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 1rem; }
  @media screen and (min-width: 50rem) {
    .MoreLikeActivity {
      padding: 4rem; } }

.MoreLikeActivity-body {
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2; }

.MoreLikeActivity-title {
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABGdBTUEAALGPC/xhBQAAAKhJREFUCB1j1Hgz5el/BsajrCwslVcE0u8yoAGdDzOVf//5087I8N+aCSjHwfD/f+if338uqL+dloisFsQHiYPkQeoY////z6j1bqbLv/9/5wMFpRkZGS4DJUBY9/9/Bl0g/xkDI2PidaGs3Ywwk7Q/zhH68+vnNEbG/8FARSxABX+BcusY2Xgyb/DFvwWpgyuGabL8v4rz/fv3KtyCDHfPMqZ/g4mDaAATJETk0JAHbwAAAABJRU5ErkJggg==) center bottom repeat-x;
  background-image: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABGdBTUEAALGPC/xhBQAAAKhJREFUCB1j1Hgz5el/BsajrCwslVcE0u8yoAGdDzOVf//5087I8N+aCSjHwfD/f+if338uqL+dloisFsQHiYPkQeoY////z6j1bqbLv/9/5wMFpRkZGS4DJUBY9/9/Bl0g/xkDI2PidaGs3Ywwk7Q/zhH68+vnNEbG/8FARSxABX+BcusY2Xgyb/DFvwWpgyuGabL8v4rz/fv3KtyCDHfPMqZ/g4mDaAATJETk0JAHbwAAAABJRU5ErkJggg==) 1x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAKCAYAAACwoK7bAAAABGdBTUEAALGPC/xhBQAAAVVJREFUKBVj1Hgz9RMDw//HDAwM+xkYWZbeEM44DmSTDDTezrBk+P8nGqjRkYGBUZZR/fWU/yimMDJuZGdnSrvEm/kKRRwHR+/zdLGfP//NYvj/3x9ZCRMyB8wGKvj54+8J9dfT1DHk0ARAakBq0Q0FKWNiZGDYAnT6PTQ9ioyM/45qvJ3qhiYO52q8ne4OUgMUUIQLQhj3QWYCMQRofphp9P/P747//xlcYWJgmpFhH+N/xlVMzIzXQPx/f/9r/Wf8H8bwn8EJXR3Df5bym6IZZ0DicINhioCR2f7///8KGJ8YmpGJsfe6UFYpIyMjPL4wDAYZBAy7DKA3JwNdz4LXYEbGv0ADCm6IZE9BV4cZeUAVN0WzZrAwMOoxMjKsB7riN7omsBgw9TAz/tfHZihIPVYXIxtk/G4m/zeGvzb//jLIgjUwMz7hYOQ4ckEw8QOyOrqxAcO9b2jrvlbTAAAAAElFTkSuQmCC) 2x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAPCAYAAABqQqYpAAAABGdBTUEAALGPC/xhBQAAAjdJREFUOBHtVEtoE1EUvedNagK2ok2CoiJ0YwLV0IKLrsQPFD9FcOFnpYgotQvRRemqGxdV0I3QDyoICrqwgi60SOuiO0EQcfxVkSr+ScZGoi1tTOZ6X+nQzjiTTgV3Pgj3vXPPue/MezcPaaunwEQfQfyeoAYXGVW3zKVH3tI/Gpnvl+qK5V+7ie1mJqwB0Wqkct3iwT0ADEYU2p/VtpnuzN+v1o31Zko2n2XmZm8VXxPTJJANxvn1iWR7P/aWvcKw6z18wzCt7DkCHScm5afzBaeJImDik0+t7O0MX13sJ54P0zqtF96JIAO6RrCJmR3krlqK3wrDjT8uJ2egUEHztU7r5xMoQHVJD1wD4U0QmZk2TExOPKi3+rYEcebimqf5WjcXd88xCtB1+Z2W5pwd9fmehnKJO8T9/lnUPROzd1nhSrS2esDEgXEnq49+auznDth8UK5xp4N7o3zwTWKcGUm2PXJyLhMOmM71bWKy+4k44WB/RGlcInwB01cGL5f8ykr3LpvnAWPfy3jrkLeWrwlNShcuruWp4j2Z1nlFC14DHyIwtj2Pt77w0wY25siSo6+jMaNJ/loP/YRhMbm+x8SxpiADuk6gCZ00a45lq+NVm+Uou6WBShoLPYAyFC4YCdr4Knn4cyVd4HV4RalcbwrgTsF3yatX4807ayk4Ls/xnYgyTlX6eoevY2gTjmg7D0Tf5Ue3sk0NstkqweX9gCVN/AlKPVmxLHZ/GIcmHf7/uJAT+A01Kr40yet2PwAAAABJRU5ErkJggg==) 3x);
  background-image: image-set("~images/bg-squiggle-green.png" 1x, "~images/bg-squiggle-green_2x.png" 2x, "~images/bg-squiggle-green_3x.png" 3x);
  color: #fff;
  display: inline-block;
  margin-bottom: 1rem;
  padding-bottom: 0.5em; }

.MoreLikeActivity-activity {
  max-width: 25rem; }

.MoreLikeActivity-moreInfo {
  display: none;
  text-align: right; }
  @media screen and (min-width: 50rem) {
    .MoreLikeActivity-moreInfo {
      display: block; } }
/** @define ActivityWithDescription */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivityTileWithDescription-body {
  color: #fff; }
/** @define EmptyMessage */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.EmptyMessage {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4rem 1rem;
  width: 100%; }
/** @define LoadingIndicator */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7); }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7); } }
@keyframes pulse {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7); }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7); } }

.LoadingIndicator {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%; }

.LoadingIndicator-dot {
  -webkit-animation: pulse 750ms ease-in-out infinite;
          animation: pulse 750ms ease-in-out infinite;
  border-radius: 100rem;
  content: '';
  display: inline-block;
  height: 1em;
  vertical-align: middle;
  width: 1em; }

.LoadingIndicator-icon {
  font-size: 0.5em;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  position: absolute;
  top: 50%; }

/* Modifier: Apply transparent overlay around pulse.
   ========================================================================== */
.LoadingIndicator--overlay {
  background: rgba(255, 255, 255, 0.8);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 200; }

/* State: Pause animation
   ========================================================================== */
.LoadingIndicator.is-paused .Loading-dot {
  -webkit-animation-play-state: paused;
          animation-play-state: paused; }
/** @define RadioCheck */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.RadioCheck {
  display: block;
  font-size: 1rem;
  position: relative;
  text-align: left; }
  @media screen and (min-width: 40rem) {
    .RadioCheck {
      font-size: 1.25rem; } }

.RadioCheck-input {
  border: none;
  opacity: 0;
  position: absolute;
  z-index: -1; }

.RadioCheck-content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 0.2em solid #ccc;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.8rem; }

.RadioCheck-indicator {
  display: inline-block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40px;
          flex: 0 0 40px;
  margin-right: 1rem;
  position: relative; }

.RadioCheck-indicator::after {
  border: 2px solid #ccc;
  border-radius: 100rem;
  bottom: 3px;
  content: '';
  display: block;
  left: 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out; }

.RadioCheck-indicatorActive {
  display: inline-block;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  height: 40px;
  opacity: 0;
  top: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  width: 40px; }

.RadioCheck-title,
.RadioCheck-altTitle {
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.25; }

.RadioCheck-altTitle {
  color: #5e1cca; }

.RadioCheck-subTitle {
  color: #777;
  font-size: 0.75em;
  line-height: 1.25; }

/* State: Focused
   ========================================================================== */
.RadioCheck-input:focus ~ .RadioCheck-content {
  border-color: #777; }

/* State: Checked
   ========================================================================== */
.RadioCheck-input:checked ~ .RadioCheck-content {
  border-color: #5e1cca; }

.RadioCheck-input:checked ~ .RadioCheck-content .RadioCheck-indicator::after {
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5); }

.RadioCheck-input:checked ~ .RadioCheck-content .RadioCheck-indicatorActive {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1); }

.RadioCheck-input:checked ~ .RadioCheck-content .RadioCheck-title {
  color: #5e1cca; }

/* State: Error
   ========================================================================== */
.RadioCheck.parsley-error .RadioCheck-content {
  border-color: #eb0055; }

/* Modifier: Modified title with strikethrough.
   ========================================================================== */
.RadioCheck--modified .RadioCheck-title {
  text-decoration: line-through; }

.RadioCheck--modified .RadioCheck-title,
.RadioCheck--modified .RadioCheck-altTitle {
  display: inline-block; }

.RadioCheck--modified .RadioCheck-input:checked ~ .RadioCheck-content .RadioCheck-title {
  color: #333; }

/* Modifier: Smaller text to accomodate more info
   ========================================================================== */
.RadioCheck--smallText .RadioCheck-labels {
  line-height: 0; }

.RadioCheck--smallText .RadioCheck-title,
.RadioCheck--smallText .RadioCheck-altTitle {
  font-size: 0.8em; }

.RadioCheck--smallText .RadioCheck-subTitle {
  font-size: 0.6em; }
/** @define BrandedHeader */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.BrandedHeader {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-position: center;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin: auto;
  max-width: 100rem;
  min-height: 17.5rem;
  padding: 1rem; }
  @media screen and (min-width: 60rem) {
    .BrandedHeader {
      padding-left: 2rem;
      padding-right: 2rem; } }

.BrandedHeader-description {
  color: #fff;
  margin: 0; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ChannelSpotlight {
  margin: 0 auto 1.5rem auto; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight {
      padding-left: 1rem;
      padding-right: 1rem; } }
  @media screen and (min-width: 50rem) {
    .ChannelSpotlight {
      padding-left: 2rem;
      padding-right: 2rem; } }

.ChannelSpotlight-inner {
  margin: 0 auto;
  max-width: 68rem;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight-inner {
      margin-bottom: 0;
      position: relative;
      top: -2.25rem; } }

.ChannelSpotlight-backgroundLayer {
  display: none; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight-backgroundLayer {
      border-bottom-width: 10px;
      border-color: #000;
      border-radius: 5px;
      border-style: solid;
      display: block;
      height: 100%;
      left: 50%;
      position: absolute;
      top: 5px;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      width: 98%; } }

.ChannelSpotlight-container {
  border-bottom-color: #000;
  border-bottom-style: solid;
  border-bottom-width: 6px;
  padding-top: 0.5rem;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight-container {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background-color: #fff;
      border: 2px solid #000;
      border-radius: 5px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      padding: 1.125rem 1.5rem;
      position: relative; } }

@media screen and (min-width: 40rem) {
  .ChannelSpotlight-container--wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-right: 0; } }

.ChannelSpotlight-videoTileBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-preferred-size: 30%;
      flex-basis: 30%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight-videoTileBox {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: start; } }

.ChannelSpotlight-videoTileBox--multi {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -ms-flex-preferred-size: 70%;
      flex-basis: 70%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  padding: 0 0.5rem;
  overflow-x: auto; }

@media screen and (min-width: 40rem) {
  .ChannelSpotlight-videoTileBox--wrap {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; } }

.SpotlightActivity {
  width: 100%;
  max-width: 18rem; }
  @media screen and (min-width: 40rem) {
    .SpotlightActivity {
      margin-right: 1.5rem; } }

.SpotlightActivity--multi {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 1rem; }
  @media screen and (min-width: 40rem) {
    .SpotlightActivity--multi {
      -ms-flex-negative: 1;
          flex-shrink: 1;
      padding-right: 0; } }

.SpotlightActivity--wrap {
  max-width: 18.85rem; }

.ChannelSpotlight-videoInfo {
  padding: 0.875rem 0.5rem; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight-videoInfo {
      -ms-flex-preferred-size: 70%;
          flex-basis: 70%;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
      margin-bottom: 1rem;
      padding-left: 3rem;
      padding-right: 3rem; } }

.ChannelSpotlight-videoInfo--multi {
  -ms-flex-preferred-size: 30%;
      flex-basis: 30%; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight-videoInfo--multi {
      padding-left: 0;
      padding-right: 1rem; } }

.ChannelSpotlight-videoInfo--wrap {
  padding-top: 2.5rem;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }

.ChannelSpotlight-logo {
  display: block;
  width: 100%;
  margin: 0 auto 1.5rem auto;
  max-width: 320px; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight-logo {
      max-width: 360px; } }

.ChannelSpotlight-description {
  color: #000;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0; }
  @media screen and (min-width: 40rem) {
    .ChannelSpotlight-description {
      font-size: 1.25rem;
      text-align: center; } }
/** @define FilterNav */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.FilterNav {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1); }

.FilterNav-toggle {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "tk", Verdana, sans-serif;
  font-weight: bold;
  padding: 1rem 1rem;
  text-align: left;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .FilterNav-toggle {
      cursor: default; } }

.FilterNav-toggleText {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  font-size: 1rem; }

.FilterNav-toggleIconActive,
.FilterNav-toggleIconInactive {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  top: auto; }
  @media screen and (min-width: 50rem) {
    .FilterNav-toggleIconActive,
    .FilterNav-toggleIconInactive {
      display: none; } }

.FilterNav-toggleIconActive {
  display: none; }

.FilterNav-filterItems {
  display: none;
  padding: 0 1rem 1rem; }
  @media screen and (min-width: 50rem) {
    .FilterNav-filterItems {
      display: block; } }

/* State: Open, displayed filters list.
   ========================================================================== */
.FilterNav.is-open .FilterNav-filterItems {
  display: block; }

.FilterNav.is-open .FilterNav-toggleIconActive {
  display: inline-block; }
  @media screen and (min-width: 50rem) {
    .FilterNav.is-open .FilterNav-toggleIconActive {
      display: none; } }

.FilterNav.is-open .FilterNav-toggleIconInactive {
  display: none; }
/** @define FilterNavItem */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.FilterNavItem {
  background-color: transparent;
  border-radius: 10rem;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #000;
  display: block;
  font-size: 1rem;
  margin: 0 0 0.25rem;
  padding: 0.25rem 0.75rem;
  text-align: left;
  width: auto; }

/* State: Active item.
   ========================================================================== */
.FilterNavItem.is-active {
  background-color: #5e1cca;
  color: #fff; }
/** @define SharePrompt */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SharePrompt {
  margin: 0 auto 1rem auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .SharePrompt {
      padding-left: 1rem;
      padding-right: 1rem; } }
  @media screen and (min-width: 50rem) {
    .SharePrompt {
      padding-left: 2rem;
      padding-right: 2rem; } }

.SharePrompt-inner {
  background-color: #eb0055;
  background-image: url(/assets/394fbd8f180e773bcb7fd2e45d26bfcf.svg);
  background-position: center center;
  background-size: cover;
  border-radius: 6px;
  padding: 0 1rem;
  text-align: center; }

.SharePrompt-copy {
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1rem;
  line-height: 2rem;
  padding: 2.5rem 0 1.5rem 0; }
  @media screen and (min-width: 40rem) {
    .SharePrompt-copy {
      font-size: 1.5rem;
      padding-bottom: 2.5rem; } }

.SharePrompt-buttons {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 2.5rem; }
  @media screen and (min-width: 40rem) {
    .SharePrompt-buttons {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.SharePrompt-button {
  font-size: 1rem;
  max-width: 16.25rem;
  padding: 1rem;
  width: 100%; }
  .SharePrompt-button:first-child {
    margin-bottom: 1.5rem; }
  @media screen and (min-width: 40rem) {
    .SharePrompt-button {
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%; }
      .SharePrompt-button:first-child {
        margin-bottom: 0.3125rem;
        margin-right: 2rem; } }
/** @define SponsorHeader */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SponsorHeader {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #5e1cca;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.5rem; }
  @media screen and (min-width: 50rem) {
    .SponsorHeader {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.SponsorHeader-text {
  color: #fff;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .SponsorHeader-text {
      margin: 0 1rem 0 0; } }

.SponsorHeader-logo {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  max-width: 24rem;
  text-align: center; }

.SponsorHeader-img {
  max-height: 4rem; }

.SponsorHeader-svg {
  width: 100%; }

/* Modifier: Theme to display atop light backgrounds.
   ========================================================================== */
.SponsorHeader--light {
  background-color: transparent; }
  .SponsorHeader--light .SponsorHeader-text {
    color: #333; }
/** @define ActivityGuideDetail */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivityGuideDetail {
  color: #000; }

.ActivityGuideDetail-inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  max-width: 78rem;
  padding-left: 2.25rem;
  padding-right: 2.25rem;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideDetail-inner {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      text-align: initial; } }
  @media screen and (min-width: 80rem) {
    .ActivityGuideDetail-inner {
      padding-left: 10rem;
      padding-right: 10rem; } }

.ActivityGuideDetail-details {
  padding: 2rem 1rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideDetail-details {
      -ms-flex-preferred-size: 70%;
          flex-basis: 70%;
      padding: 3rem 0; } }

.ActivityGuideDetail-title {
  color: inherit;
  font-size: 1.875rem;
  line-height: 1.1;
  margin: 0 0 0.5rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideDetail-title {
      font-size: 2.2rem;
      margin-bottom: 1rem;
      max-width: 34rem; } }
  @media screen and (min-width: 60rem) {
    .ActivityGuideDetail-title {
      font-size: 2.5rem;
      max-width: 36rem; } }

.ActivityGuideDetail-underline {
  margin: 0 auto 1.5rem;
  width: 4.75rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideDetail-underline {
      margin-bottom: 3.625rem;
      margin-left: initial;
      margin-right: initial; } }

.ActivityGuideDetail-description {
  letter-spacing: 0.035em;
  line-height: 1.5;
  margin-bottom: 2rem;
  margin-top: 0; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideDetail-description {
      font-size: 1.5rem;
      margin-bottom: 3rem;
      max-width: 31.25rem; } }
  @media screen and (min-width: 60rem) {
    .ActivityGuideDetail-description {
      max-width: 33.25rem; } }

.ActivityGuideDetail-container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 22rem;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideDetail-container {
      -ms-flex-preferred-size: 30%;
          flex-basis: 30%;
      margin: initial;
      max-width: initial; } }

.ActivityGuideDetail-imgWrapper {
  height: 0;
  padding-top: 133%;
  position: relative;
  width: 100%; }

.ActivityGuideDetail-image {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0; }

.ActivityGuideDetail-activities {
  background-color: #eee;
  background-image: url(/assets/8f50fc58bd93818b4f4b5f38118273a0.svg);
  background-position: center center;
  background-size: cover;
  padding: 1.375rem 0.625rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideDetail-activities {
      padding: 4.375rem 0; } }

.ActivityGuideDetail-listContainer {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 58rem;
  padding-left: 2rem;
  padding-right: 2rem; }

.ActivityGuideDetail-listItem {
  margin-bottom: 2rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideDetail-listItem {
      margin-bottom: 4.375rem; } }

.ActivityGuideDetail-listItem:nth-of-type(2) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }

/* Modifiers: Text Theme
   ========================================================================== */
.ActivityGuideDetail--light {
  color: #fff; }
/** @define ActivityWithDescription */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivityWithDescription {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 50rem) {
    .ActivityWithDescription {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.ActivityWithDescription-child {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%; }

.ActivityWithDescription-container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  -webkit-box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0.035em;
  line-height: 1.3;
  min-height: 10rem;
  padding: 3rem 2.25rem;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .ActivityWithDescription-container {
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-shadow: 0.25em 0.25em 0 rgba(0, 0, 0, 0.15);
              box-shadow: 0.25em 0.25em 0 rgba(0, 0, 0, 0.15);
      min-height: 15rem;
      padding: 3.75rem 0 3.75rem 3.5rem;
      text-align: initial; } }

.ActivityWithDescription-heading,
.ActivityWithDescription-description {
  max-width: 22.4rem; }

.ActivityWithDescription-heading {
  font-family: "csr", Verdana, sans-serif;
  font-size: 1.125em;
  margin-bottom: 1.1rem;
  margin-top: 0; }
  @media screen and (min-width: 50rem) {
    .ActivityWithDescription-heading {
      font-size: 1.625em; } }

.ActivityWithDescription-description {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0; }
  @media screen and (min-width: 50rem) {
    .ActivityWithDescription-description {
      font-size: 1.5rem;
      line-height: 1.33; } }
/** @define Sponsored Guide Logo */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SponsoredGuideLogo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left; }
  @media screen and (min-width: 50rem) {
    .SponsoredGuideLogo {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }

@media screen and (min-width: 50rem) {
  .SponsoredGuideLogo-bodyWrap {
    margin-right: 2rem;
    position: relative; } }

@media screen and (min-width: 60rem) {
  .SponsoredGuideLogo-bodyWrap {
    -ms-flex-preferred-size: 14rem;
        flex-basis: 14rem; } }

.SponsoredGuideLogo-partnerBody {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-size: 0.75rem;
  letter-spacing: 0.035em;
  line-height: 1.1;
  margin-bottom: 1rem; }
  @media screen and (min-width: 50rem) {
    .SponsoredGuideLogo-partnerBody {
      font-size: 1rem;
      max-width: 15rem; } }
  @media screen and (min-width: 60rem) {
    .SponsoredGuideLogo-partnerBody {
      text-align: right; } }

.SponsoredGuideLogo-logoWrap {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  max-width: 24rem; }

.SponsoredGuideLogo-partnerLogo {
  max-height: 6rem;
  width: 100%; }

.SponsoredGuideLogo-partnerLogo-Invert {
  -webkit-filter: invert(1);
          filter: invert(1); }

/* Modifier: Wide sponsor logo
========================================================================== */
.SponsoredGuideLogo--wide .SponsoredGuideLogo-logoWrap {
  max-width: 25rem; }
  @media screen and (min-width: 50rem) {
    .SponsoredGuideLogo--wide .SponsoredGuideLogo-logoWrap {
      -ms-flex-preferred-size: 24rem;
          flex-basis: 24rem;
      max-width: initial; } }

/* Modifier: Skinny sponsor logo
========================================================================== */
.SponsoredGuideLogo--skinny .SponsoredGuideLogo-logoWrap {
  max-height: 6rem; }
  @media screen and (min-width: 50rem) {
    .SponsoredGuideLogo--skinny .SponsoredGuideLogo-logoWrap {
      -ms-flex-preferred-size: 10rem;
          flex-basis: 10rem; } }
/** @define SingleActivityGuide */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
@media screen and (min-width: 50rem) {
  .SingleActivityGuide-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; } }

.SingleActivityGuide-activity {
  -ms-flex-preferred-size: 45%;
      flex-basis: 45%;
  margin-bottom: 2.5rem; }

.SingleActivityGuide-info {
  max-width: 28.3rem; }
  @media screen and (min-width: 50rem) {
    .SingleActivityGuide-info {
      margin-left: 3.1rem; } }
/** @define SingleActivityGuideInfo */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
@media screen and (min-width: 50rem) {
  .SingleActivityGuideInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; } }

.SingleActivityGuideInfo-authorInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem; }
  @media screen and (min-width: 50rem) {
    .SingleActivityGuideInfo-authorInfo {
      margin-bottom: 2.75rem; } }

.SingleActivityGuideInfo-authorAvatar {
  border: 1px solid #ccc;
  border-radius: 100%;
  min-height: 3.7rem;
  min-width: 3.7rem;
  overflow: hidden;
  position: relative; }

.SingleActivityGuideInfo-authorAvatar img {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.SingleActivityGuideInfo-authorBio {
  -ms-flex-item-align: center;
      align-self: center;
  font-size: 0.8rem;
  letter-spacing: 0.035rem;
  margin-left: 1.25rem; }
  @media screen and (min-width: 50rem) {
    .SingleActivityGuideInfo-authorBio {
      font-size: 1rem; } }

.SingleActivityGuideInfo-authorName {
  font-weight: bold; }

.SingleActivityGuideInfo-description {
  font-size: 0.9rem;
  letter-spacing: 0.035rem;
  line-height: 1.7rem; }
  @media screen and (min-width: 50rem) {
    .SingleActivityGuideInfo-description {
      font-size: 1.3rem;
      line-height: 1.9rem; } }
/** @define PlusUpSell */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PlusUpSell {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative; }

.PlusUpSell-back {
  margin-bottom: 2rem; }
  @media screen and (min-width: 50rem) {
    .PlusUpSell-back {
      left: 2rem;
      position: absolute;
      top: 2rem; } }

.PlusUpSell-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 1rem; }

.PlusUpSell-content {
  background-color: #fff;
  border-radius: 6px;
  max-width: 50rem;
  padding: 2rem 1rem; }
  @media screen and (min-width: 50rem) {
    .PlusUpSell-content {
      margin: auto;
      padding: 4rem 2rem;
      text-align: center;
      width: calc(100% - 17.6rem); } }

.PlusUpSell-title {
  color: #333;
  font-size: 1.25rem;
  margin-top: 0; }
  @media screen and (min-width: 50rem) {
    .PlusUpSell-title {
      font-size: 2.5rem; } }

@media screen and (min-width: 50rem) {
  .PlusUpSell-body {
    font-size: 1.25rem;
    margin-bottom: 4rem; } }

.PlusUpSell-footer {
  background-color: #fff;
  padding: 1rem; }
  @media screen and (min-width: 50rem) {
    .PlusUpSell-footer {
      padding: 2rem; } }

.PlusUpSell-logo {
  max-width: 20rem;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%; }

@media screen and (min-width: 50rem) {
  .PlusUpSell-art {
    background-image: url(/assets/4f7eda98e0b8a2fe68ff8c3321ef5232.svg), url(/assets/77e2fb5349ab6ff108ab96e9bc0e40a5.svg);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto 20%, auto 100%;
    bottom: 0;
    position: absolute;
    height: 22rem;
    right: 0;
    width: 8.8rem; } }
/** @define VideoActivity */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.VideoActivity {
  position: absolute; }

.VideoActivity-postRoll {
  bottom: 0;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  overflow: hidden;
  z-index: 100; }

/* Modifier: Video ended
   ========================================================================== */
.VideoActivity--ended .VideoActivity-postRoll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.VideoActivity--ended .VideoActivity-video {
  display: none; }
/** @define ActivityPlayer */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivityPlayer {
  background-color: #111;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  left: 0;
  margin: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 700; }
  .ActivityPlayer.is-transitioning {
    position: fixed !important; }
  .ActivityPlayer #flash-game-wrapper {
    height: 100%;
    width: 100%; }
    .ActivityPlayer #flash-game-wrapper object {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0; }
  .ActivityPlayer .vjs-fullscreen {
    padding-top: 0; }
  .ActivityPlayer .youtube-disclaimer h3 {
    font-size: 1em;
    margin: 0 0 1em 3em; }
  .ActivityPlayer .youtube-disclaimer p {
    margin-bottom: 1em; }
  .ActivityPlayer .youtube-disclaimer .Btn--primary {
    margin-left: 0; }
  .ActivityPlayer .play-time {
    margin-bottom: 0; }

.ActivityPlayer-sidebar {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 700; }

.VideoActivity,
.VideoActivity-video,
.GameActivity,
#video-activity {
  height: 100%;
  width: 100%; }

.ActivityPlayer-top {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
  padding: 0.5rem;
  position: relative;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .ActivityPlayer-top {
      padding: 1rem 2rem; } }

.ActivityPlayer-top::after {
  background: transparent;
  content: '';
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transition: background 0.8s ease-in-out;
  transition: background 0.8s ease-in-out;
  width: 100%; }

.ActivityPlayer-top.overlay {
  -webkit-filter: blur(2px);
          filter: blur(2px); }
  .ActivityPlayer-top.overlay::after {
    background-color: rgba(0, 0, 0, 0.8);
    pointer-events: all; }

.ActivityPlayer-bottom {
  position: relative;
  width: 100%; }

.ActivityPlayer-content {
  background-color: #000;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  height: 100%;
  min-height: 200px;
  position: relative;
  width: 100%; }

.ActivityPlayer-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.ActivityPlayer-action {
  margin-right: 1rem; }
  .ActivityPlayer-action:first-child {
    margin-right: 0; }

/**
 * 1. Hide spacer forcing fullscreen button to be misaligned for YouTube videos.
 */
.vjs-custom-control-spacer {
  display: none;
  /* 1 */ }

/**
 * 1. Override videojs poster background-size to be contain instead of cover
 */
.vjs-youtube .vjs-poster {
  background-size: contain !important;
  /* 1 */ }

.iframeblocker {
  cursor: pointer;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2; }

.vjs-youtube.vjs-user-inactive .iframeblocker {
  display: block; }

.vjs-quality-button > div:first-child > span:first-child {
  position: relative;
  top: 7px; }
/** @define ActivityInfo */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivityInfo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  -webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.ActivityInfo-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 2;
      -ms-flex: 2 0 auto;
          flex: 2 0 auto;
  padding: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .ActivityInfo-meta {
      padding: 1rem 0 1rem 2rem; } }

.ActivityInfo-channelIcon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding-right: 0.75em;
  width: 3.75em; }

.ActivityInfo-channelIconImg {
  max-height: 3.75em;
  max-width: 3.75em;
  width: 100%; }

.ActivityInfo-metaText {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

.ActivityInfo-title,
.ActivityInfo-subTitle {
  line-height: 1.4; }

.ActivityInfo-title {
  color: #333;
  font-size: 0.875rem;
  margin: 0;
  white-space: nowrap; }
  @media screen and (min-width: 50rem) {
    .ActivityInfo-title {
      font-size: 1.25em; } }

.ActivityInfo-subTitle {
  color: #555;
  font-family: "csr", Verdana, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  margin: 0; }
  @media screen and (min-width: 50rem) {
    .ActivityInfo-subTitle {
      font-size: 1em; } }

.ActivityInfo-infoLink {
  border-bottom: 1px solid currentColor;
  color: #777; }
  .ActivityInfo-infoLink:hover {
    color: #5e5e5e; }

.ActivityInfo-sponsor {
  display: none;
  text-align: right; }
  @media screen and (min-width: 50rem) {
    .ActivityInfo-sponsor {
      display: block;
      padding-right: 1em; } }

.ActivityInfo-sponsorLink {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: 4rem; }
  .ActivityInfo-sponsorLink:hover {
    color: gray; }

.ActivityInfo-sponsorText {
  border-bottom: 1px solid currentColor;
  display: inline-block; }

.ActivityInfo-sponsorLogo {
  margin-left: 0.5rem;
  max-height: 4rem;
  vertical-align: middle; }

.ActivityInfo-adProductVideoPlayer {
  display: none; }
  @media screen and (min-width: 40rem) {
    .ActivityInfo-adProductVideoPlayer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; } }

.ActivityInfo-adProductVideoPlayerLogo {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 15rem;
          flex: 0 1 15rem; }

.ActivityInfo-localSponsor {
  display: none; }
  @media screen and (min-width: 40rem) {
    .ActivityInfo-localSponsor {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      padding: 0 2rem; } }

.ActivityInfo-localSponsorText {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 15rem;
          flex: 0 0 15rem;
  text-align: right; }

.ActivityInfo-localSponsorLogo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 10rem;
          flex: 0 1 10rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.ActivityInfo-localSponsorLogoImg {
  height: 100%;
  max-height: 4rem;
  padding-left: 1rem;
  vertical-align: middle;
  width: 100%; }

.ActivityInfo-localSponsorName {
  color: #333;
  overflow: hidden;
  padding-left: 0.25em;
  text-overflow: ellipsis;
  white-space: nowrap; }

/* Modifier: Plus content designation.
   ========================================================================== */
.ActivityInfo--plus {
  background-color: #5e1cca; }

.ActivityInfo--plus .ActivityInfo-title,
.ActivityInfo--plus .ActivityInfo-localSponsorText,
.ActivityInfo--plus .ActivityInfo-localSponsorLogoImg,
.ActivityInfo--plus .ActivityInfo-localSponsorName {
  color: #fff; }

.ActivityInfo--plus .ActivityInfo-subTitle {
  color: #bfbfbf; }

/* Modifier: Wide sponsor logo
   ========================================================================== */
.ActivityInfo-localSponsorLogo--wide {
  -ms-flex-preferred-size: 20rem;
      flex-basis: 20rem; }

.ActivityInfo-localSponsorLogo--wide .ActivityInfo-localSponsorLogoImg {
  max-height: 3rem; }

/* Modifier: Skinny sponsor logo
  ========================================================================== */
.ActivityInfo-localSponsorLogo--skinny {
  -ms-flex-preferred-size: 4rem;
      flex-basis: 4rem; }

.ActivityInfo-localSponsorLogo--skinny .ActivityInfo-localSponsorLogoImg {
  max-height: 4rem; }

.ActivityInfo-adProductVideoPlayerLogo--wide {
  -ms-flex-preferred-size: 20rem;
      flex-basis: 20rem; }

.ActivityInfo-localSponsorLogo--skinny {
  -ms-flex-preferred-size: 10rem;
      flex-basis: 10rem; }
/** @define LearningExtensionsSidebar */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.LearningExtensionsSidebar {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #f5f5f5;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  pointer-events: all;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionsSidebar {
      width: 75%; } }

.LearningExtensionsSidebarOverlay {
  pointer-events: all; }

.LearningExtensionsSidebar-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  z-index: 100; }

.LearningExtensionsSidebar-close {
  margin: 1.5rem; }

.LearningExtensionsSidebar-headerText {
  font-size: 1.25rem; }

.LearningExtensionsSidebar-scrollContainer {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  padding: 0 1.5rem;
  overflow-y: scroll; }

.LearningExtensionsSidebar-lock {
  background-color: #eb0055;
  border-radius: 100%;
  border: 0.5rem solid #f5f5f5;
  height: 8rem;
  left: 50%;
  position: absolute;
  top: -4rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 8rem; }

.LearningExtensionsSidebar-lockIcon {
  font-size: 3rem;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.LearningExtensionsSidebar-freeCta {
  background-color: #f5f5f5;
  bottom: 0;
  padding: 4rem 1.5rem 2rem 1.5rem;
  position: absolute;
  text-align: center;
  width: 100%; }

.LearningExtensionsSidebar-freeCtaText {
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.25rem;
  margin: 0 auto;
  padding-bottom: 1rem; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionsSidebar-freeCtaText {
      max-width: 50rem; } }

@media screen and (min-width: 40rem) {
  .LearningExtensionsSidebar-freeCtaBtn {
    min-width: 20rem;
    width: 50%; } }
/** @define LearningExtensionPreview */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.LearningExtensionPreview {
  background-color: #5e1cca;
  background-image: url(/assets/e6c647df60888ba9c6093f1bcffb1df3.jpg);
  background-image: -webkit-image-set(url(/assets/e6c647df60888ba9c6093f1bcffb1df3.jpg) 1x, url(/assets/8e0eea6eb06c5d3ebb1f0ab000d954a8.jpg) 2x, url(/assets/91f695e820a3ab768a0f6e1333895f1f.jpg) 3x);
  background-image: image-set("./images/bg-shapes-purple-le-sm.jpg" 1x, "./images/bg-shapes-purple-le-sm_2x.jpg" 2x, "./images/bg-shapes-purple-le-sm_3x.jpg" 3x);
  background-position: center center;
  background-size: cover;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: auto;
  margin: 1.5rem auto;
  padding: 1.5rem 0.6rem 0;
  position: relative; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionPreview {
      background-image: url(/assets/f45b880ed990882fede8ae36e1996dbe.jpg);
      background-image: -webkit-image-set(url(/assets/e6c647df60888ba9c6093f1bcffb1df3.jpg) 1x, url(/assets/f9de94a58afebb8e0fb764e486f6ab94.jpg) 2x, url(/assets/babd14341c01510533b2e28a60c5d2ab.jpg) 3x);
      background-image: image-set("./images/bg-shapes-purple-le-sm.jpg" 1x, "./images/bg-shapes-purple-le-lg_2x.jpg" 2x, "./images/bg-shapes-purple-le-lg_3x.jpg" 3x);
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      height: 25rem;
      max-width: 50rem;
      padding: 2rem 1.5rem 0; } }

.LearningExtensionPreview-info,
.LearningExtensionPreview-download {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  overflow: hidden; }

.LearningExtensionPreview-info {
  padding-right: 1rem; }

.LearningExtensionPreview-title,
.LearningExtensionPreview-subject {
  background-color: #000;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  color: #fff;
  display: inline;
  line-height: 1.75;
  margin: 0;
  padding: 0.5rem; }

.LearningExtensionPreview-title {
  font-size: 1.25rem; }
  @media screen and (min-width: 50rem) {
    .LearningExtensionPreview-title {
      font-size: 1.5rem; } }

.LearningExtensionPreview-subjectWrap {
  margin: 1rem 0; }
  @media screen and (min-width: 50rem) {
    .LearningExtensionPreview-subjectWrap {
      margin: 1rem 0 2rem 0; } }

.LearningExtensionPreview-subject {
  font-size: 1.1rem; }

.LearningExtensionPreview-description {
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1rem; }

.LearningExtensionPreview-imgWrap {
  height: 0;
  padding-top: 73%;
  position: relative;
  width: 100%; }

.LearningExtensionPreview-img {
  background-color: #fff;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

.LearningExtensionPreview-btn {
  background-color: #27eb94;
  border: 0.5rem solid #fff;
  bottom: 50%;
  font-size: 3rem;
  height: 8rem;
  left: 50%;
  pointer-events: none;
  position: absolute;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  width: 8rem; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionPreview-btn {
      bottom: 0;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0); } }
/** @define PostRollPoster */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PostRollPoster {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  overflow: hidden; }

.PostRollPoster-anchor,
.PostRollPoster-media,
.PostRollPoster-image {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: top;
  width: 100%; }

.PostRollPoster-actions {
  background-color: rgba(0, 0, 0, 0.75);
  bottom: 0;
  display: none;
  left: 0;
  padding: 0.75rem;
  position: absolute;
  text-align: center;
  width: 100%; }
  @media only screen and (min-width: 40rem) {
    .PostRollPoster-actions {
      display: block; } }
  @media only screen and (min-width: 100rem) {
    .PostRollPoster-actions {
      padding: 1rem; } }

.PostRollPoster-cta {
  font-size: 0.5rem;
  margin-right: 2rem;
  margin-bottom: 0.25em; }
  @media screen and (min-width: 50rem) {
    .PostRollPoster-cta {
      font-size: 0.75rem; } }
  @media screen and (min-width: 60rem) {
    .PostRollPoster-cta {
      font-size: 1rem; } }
  @media screen and (min-width: 100rem) {
    .PostRollPoster-cta {
      font-size: 1rem; } }

.PostRollPoster-cta:last-child {
  margin-right: 0; }

.PostRollPoster-ctaIcon {
  margin-right: 0.5em;
  opacity: 0.5; }

.PostRollPoster-copy {
  color: #fff;
  display: none;
  font-size: 1rem;
  margin: 0;
  pointer-events: none;
  position: absolute;
  right: 6%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }
  @media screen and (min-width: 40rem) {
    .PostRollPoster-copy {
      display: block; } }
  @media screen and (min-width: 50rem) {
    .PostRollPoster-copy {
      font-size: 1.25rem; } }
  @media screen and (min-width: 60rem) {
    .PostRollPoster-copy {
      font-size: 1.75rem; } }
  @media screen and (min-width: 100rem) {
    .PostRollPoster-copy {
      font-size: 2.5rem; } }
/** @define VideoPlayer */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
/**
 * 1. Force element injected by player library to fill parent.
 * 2. Important required to override JWPlayer styles.
 */
.VideoPlayer,
.VideoPlayer > *:first-child:first-child {
  height: 100% !important;
  /* 2 */
  width: 100%; }

.VideoPlayer .vjs-big-play-button {
  border: 0.25rem solid #fff; }

/**
 * 1. Vertically align play icon within round button.
 * 2. Remove once Luna skin is used globally.
 */
.VideoPlayer .vjs-big-play-button::before,
.VideoPlayer .vjs-icon-placeholder::before {
  line-height: 1.88;
  /* 1 */ }

/**
 * Update videojs-youtube skin play button
 */
.vjs-youtube .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  color: #fff;
  font-size: 4.9em;
  height: 2em;
  left: 50%;
  line-height: 2em;
  margin-left: -1em;
  margin-top: -1em;
  top: 50%;
  -webkit-transition: border-color 0.4s, outline 0.4s, background-color 0.4s;
  transition: border-color 0.4s, outline 0.4s, background-color 0.4s;
  width: 2em; }

.vjs-youtube:hover .vjs-big-play-button {
  background-color: #5e1cca; }
/** @define PlaybackErrorMessage */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PlaybackErrorMessage {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.5rem;
  text-align: center;
  width: 100%; }

.PlaybackErrorMessage-heading {
  color: #333; }

.PlaybackErrorMessage-body {
  margin: 0 0 1rem;
  max-width: 30em; }
/** @define VideoOverlay */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.VideoOverlay {
  font-family: "tk", Verdana, sans-serif;
  font-weight: bold;
  left: 45%;
  line-height: 1.25;
  pointer-events: none;
  position: absolute;
  text-align: left;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%; }

.VideoOverlay-heading {
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  color: #000;
  font-size: 4.5vw;
  margin: 0; }

@media screen and (min-aspect-ratio: 3 / 2) {
  .VideoOverlay-heading {
    font-size: 8vh; } }

@media screen and (max-height: 38.75rem) {
  .VideoOverlay-heading {
    font-size: 5vh; } }

.VideoOverlay-list {
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
  color: #2d0a6e;
  font-size: 3.25vw;
  margin: 0;
  padding-left: 1em; }
  @media screen and (min-aspect-ratio: 3 / 2) {
    .VideoOverlay-list {
      font-size: 6vh; } }
  @media screen and (max-height: 38.75rem) {
    .VideoOverlay-list {
      font-size: 2.5vh; } }

.u-hideOverlay .VideoOverlay {
  display: none; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  90% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  90% {
    opacity: 1; } }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20%);
            transform: translateY(20%); }
  90% {
    opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20%);
            transform: translateY(20%); }
  90% {
    opacity: 1; }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }
/** @define CategoriesTeacher */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.CategoriesTeacher {
  margin: 0 auto;
  max-width: 70rem;
  padding: 0 1rem;
  width: 100%; }

.CategoriesTeacher-category {
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 1rem; }
  @media screen and (min-width: 40rem) {
    .CategoriesTeacher-category {
      background-size: 100% auto; } }
  @media screen and (min-width: 60rem) {
    .CategoriesTeacher-category {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      padding: 2rem 0; } }

.CategoriesTeacher-titleWrap {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 2px solid currentColor;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  width: 100%; }

.CategoriesTeacher-titleIcon {
  height: 3rem;
  width: 3rem;
  margin-right: 0.5rem; }

.CategoriesTeacher-title {
  color: #000;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%; }

.CategoriesTeacher-icon {
  display: none;
  height: 2rem;
  margin-right: 1rem;
  width: 2rem; }
  @media screen and (min-width: 60rem) {
    .CategoriesTeacher-icon {
      display: block;
      height: 5.313rem;
      margin-right: 0;
      width: 5.313rem; } }

.CategoriesTeacher-subcategories {
  -ms-flex-line-pack: start;
      align-content: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 100%; }

.CategoriesTeacher-subcategory {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.75rem;
  font-weight: bold;
  height: 3.75rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 1rem 1rem 0;
  position: relative;
  text-align: center;
  width: calc(50% - 1rem); }
  @media screen and (min-width: 50rem) {
    .CategoriesTeacher-subcategory {
      font-size: 1rem;
      height: 3.75rem;
      width: calc(33% - 1rem); } }
  @media screen and (min-width: 60rem) {
    .CategoriesTeacher-subcategory {
      margin: 0 2rem 1rem 0;
      width: calc(25% - 1.5rem); }
      .CategoriesTeacher-subcategory:nth-child(4n) {
        margin-right: 0; } }

.CategoriesTeacher-subcategoryBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1rem;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1.3;
  width: 100%; }
  .CategoriesTeacher-subcategoryBtn::before {
    background-color: currentColor; }
/** @define ChampStageTeacher */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ChampStageTeacher {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 500; }

.ChampStageTeacher-overlay {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  pointer-events: none; }

.ChampStageTeacher-overlay > * {
  pointer-events: all; }

.ChampStageTeacher-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: relative; }
/** @define ChampIntro */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ChampIntro {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-bottom: 1.5rem;
  position: relative; }
  @media (min-width: 40rem) {
    .ChampIntro {
      padding-bottom: 2rem; } }

.ChampIntro::after {
  border: 0.75rem solid transparent;
  border-bottom-width: 0;
  border-top-color: #fff;
  content: '';
  left: 1.5rem;
  position: absolute;
  top: calc(100% - 1.5rem); }
  @media (min-width: 40rem) {
    .ChampIntro::after {
      border-width: 1rem;
      left: 2.5rem;
      top: calc(100% - 2rem); } }

.ChampIntro-bubble {
  background-color: #fff;
  border-radius: 6px;
  max-width: 30rem;
  margin-left: 1rem;
  padding: 2rem; }

.ChampIntro-name {
  color: #5e1cca;
  font-size: 1.25rem;
  margin-top: 0; }

.ChampIntro-body {
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.375rem;
  line-height: 1.33;
  margin-top: 0; }
/** @define StageCollapsed */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
/**
 * 1. Magic number to 'pull' Champ name over Champ image. Also, IE11 does not allow using `calc`
 *    within `translateX`.
 */
.StageCollapsed {
  background-color: #000;
  -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 3rem;
  pointer-events: all;
  -webkit-transform-origin: bottom;
          transform-origin: bottom; }
  @media (min-width: 50rem) {
    .StageCollapsed {
      height: 4.2rem; } }

.StageCollapsed-preview {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  position: relative; }

.StageCollapsed-art {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  overflow: hidden;
  position: relative;
  width: 5rem; }
  @media (min-width: 50rem) {
    .StageCollapsed-art {
      width: 7rem; } }

.StageCollapsed-img {
  height: 150%;
  left: 50%;
  max-width: none;
  position: absolute;
  top: 0;
  -webkit-transform: translateX(-50%) translateX(-1rem);
          transform: translateX(-50%) translateX(-1rem);
  /* 1 */
  width: 150%; }

.StageCollapsed-name {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #000;
  -webkit-clip-path: polygon(0.3rem 0, 100% 0, calc(100% - 0.3rem) 100%, 0% 100%);
          clip-path: polygon(0.3rem 0, 100% 0, calc(100% - 0.3rem) 100%, 0% 100%);
  color: #fff;
  display: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font-family: "tk", Verdana, sans-serif;
  font-weight: bold;
  margin-left: -1rem;
  /* 1 */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: relative;
  text-align: center; }
  @media (min-width: 50rem) {
    .StageCollapsed-name {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.StageCollapsed-progress {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 2;
      -ms-flex: 2 1 100%;
          flex: 2 1 100%;
  padding: 0.5rem; }
  @media (min-width: 50rem) {
    .StageCollapsed-progress {
      padding: 1rem 0.5rem; } }
/** @define ProgressBarSimple */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ProgressBarSimple {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #eee;
  border-radius: 100rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "csr", Verdana, sans-serif;
  position: relative;
  width: 100%; }

.ProgressBarSimple-inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 100rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
  position: relative;
  width: 100%; }

.ProgressBarSimple-meter {
  background-color: #5e1cca;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  position: absolute;
  top: 0;
  width: 0; }

.ProgressBarSimple-inner::after {
  background-color: rgba(255, 255, 255, 0.1);
  bottom: 50%;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

.ProgressBarSimple-steps {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: calc(100% - 0rem);
  z-index: 100; }

.ProgressBarSimple-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  text-align: center; }

.ProgressBarSimple-indicator {
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #cdcdcd;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0.5rem;
  -webkit-transition: border 300ms ease-in-out;
  transition: border 300ms ease-in-out;
  width: 0.5rem; }
  @media (min-width: 50rem) {
    .ProgressBarSimple-indicator {
      height: 1rem;
      width: 1rem; } }

.ProgressBarSimple-terminus {
  background-color: #5e1cca;
  border-radius: 50%;
  bottom: calc(100% + 0.5rem);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  height: 3rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  text-align: center;
  width: 3rem; }
  @media (min-width: 50rem) {
    .ProgressBarSimple-terminus {
      font-size: 1.5rem;
      height: 5rem;
      width: 5rem; } }

.ProgressBarSimple-terminus::after {
  background-color: #5e1cca;
  content: '';
  height: 2rem;
  left: 50%;
  position: absolute;
  top: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0.3rem; }

.ProgressBarSimple-terminusTitle {
  font-family: "csr", Verdana, sans-serif;
  font-weight: normal;
  font-size: 0.75em;
  margin: 0; }
  @media (min-width: 50rem) {
    .ProgressBarSimple-terminusTitle {
      display: block; } }

/* State: Active step indicator.
   ========================================================================== */
.ProgressBarSimple-step.is-active .ProgressBarSimple-indicator {
  border-color: #2d0a6e;
  border-width: 3px; }
  @media (min-width: 50rem) {
    .ProgressBarSimple-step.is-active .ProgressBarSimple-indicator {
      border-width: 4px; } }

/* State: Terminus step indicator.
   ========================================================================== */
.ProgressBarSimple-step.is-terminus .ProgressBarSimple-indicator {
  border-color: #5e1cca;
  border-width: 6px; }
/** @define StageExpanded */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.StageExpanded {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100vh;
  left: 0;
  overflow-y: auto;
  pointer-events: all;
  position: absolute;
  right: 0;
  -webkit-transform-origin: bottom;
          transform-origin: bottom; }

/**
 * 1. Force browser to render element on separate stack to fix rendering bug caused by nested user
 * of overflow, flexbox, and absolute positioning. We may be able to fix this by simplifying the
 * surround layout.
 */
.StageExpanded-top {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background: #000 url(/assets/c675c9d9b44b582df0f1e60bf362bc22.svg) repeat center center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 66%;
          flex: 1 1 66%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  padding: 1rem;
  min-height: 15rem;
  position: relative;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  /* 1 */ }
  @media (min-width: 40rem) {
    .StageExpanded-top {
      padding: 4rem; } }

.StageExpanded-top::before {
  background: url(/assets/bb7528ee368f651fcaeaa9113ab55729.svg) no-repeat 0 0, url(/assets/2d85fd5e77b73d71dc8d1fb404f58ac2.svg) no-repeat 0 bottom;
  background-size: contain;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  width: 50%; }
  @media (max-aspect-ratio: 3 / 5) {
    .StageExpanded-top::before {
      width: 90%; } }
  @media (min-aspect-ratio: 20 / 15) {
    .StageExpanded-top::before {
      width: 35%; } }
  @media (min-aspect-ratio: 12 / 8) {
    .StageExpanded-top::before {
      width: 25%; } }

.StageExpanded-points {
  -ms-flex-item-align: center;
      align-self: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  position: relative; }

.StageExpanded-pointsText,
.StageExpanded-pointsShadow {
  border: 0.0625rem solid #000;
  border-radius: 10rem; }

.StageExpanded-pointsText {
  color: #fff;
  background-color: #5e1cca;
  border-radius: 10rem;
  padding: 0.25rem 1.75rem;
  position: relative;
  z-index: 100; }

.StageExpanded-pointsShadow {
  background-color: #27eb94;
  height: 100%;
  left: 0.1875rem;
  position: absolute;
  top: 0.1875rem;
  width: 100%; }

.StageExpanded-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 4rem; }

.StageExpanded-bottom {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative; }
  @media (min-width: 40rem) {
    .StageExpanded-bottom {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      max-height: 25rem; } }

.StageExpanded-bottom::after {
  background-color: #fff;
  content: '';
  height: 1rem;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(100% - 1px); }

.StageExpanded-art {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 40%;
          flex: 1 0 40%;
  max-width: 40rem;
  width: 50%;
  text-align: center;
  z-index: 100; }
  @media (min-width: 40rem) {
    .StageExpanded-art {
      padding: 0 2rem;
      width: 100%; } }

.StageExpanded-img {
  max-height: 25rem; }

.StageExpanded-info {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 60%;
          flex: 1 0 60%;
  max-width: 24rem;
  margin-bottom: 2rem;
  padding: 0 1rem; }
  @media (min-width: 40rem) {
    .StageExpanded-info {
      margin-bottom: 0;
      padding: 2rem 2rem 2rem 0;
      max-width: none; } }

.StageExpanded-name {
  color: #5e1cca;
  font-family: "tk", Verdana, sans-serif;
  font-size: 0.875rem; }
  @media (min-width: 40rem) {
    .StageExpanded-name {
      font-size: 1.5rem; } }

.StageExpanded-message {
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.125rem;
  margin-top: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0); }
  @media (min-width: 40rem) {
    .StageExpanded-message {
      font-size: 2rem;
      line-height: 1.25; } }
/** @define ChampInfo */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ChampInfo {
  background-color: rgba(51, 51, 51, 0.9); }

.ChampInfo .bbm-modal {
  background: none;
  max-width: 60rem;
  opacity: 1;
  overflow: hidden;
  padding: 0;
  text-align: left; }
  @media screen and (min-width: 100rem) {
    .ChampInfo .bbm-modal {
      max-width: 78rem; } }
  .ChampInfo .bbm-modal::before {
    background: #5e1cca url(/assets/873ec521c5db3956673f598b2c31faff.jpg) center center repeat;
    background-size: cover;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1; }

.ChampInfo-close {
  margin-left: 0.5em;
  margin-top: 0.5em; }

.ChampInfo-champImageWrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (min-width: 40rem) {
    .ChampInfo-champImageWrapper {
      bottom: 0;
      height: 100%;
      position: absolute;
      right: 0;
      width: 50%;
      z-index: 1; } }
  @media screen and (min-width: 100rem) {
    .ChampInfo-champImageWrapper {
      width: 55%; } }

.ChampInfo-champImage {
  margin: 0 auto;
  max-width: 25rem;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  width: 100%; }

.ChampInfo-metaWrapper {
  margin: 0 0 2rem; }
  @media screen and (min-width: 40rem) {
    .ChampInfo-metaWrapper {
      margin: 2rem 0 8rem 5rem;
      max-width: 28rem;
      position: relative;
      width: 45%;
      z-index: 2; } }
  @media screen and (min-width: 60rem) {
    .ChampInfo-metaWrapper {
      margin-top: 4rem; } }
  @media screen and (min-width: 100rem) {
    .ChampInfo-metaWrapper {
      margin: 4rem 0 16rem 8rem;
      max-width: 32rem; } }

.ChampInfo-meta {
  background-color: #fff;
  border-radius: 1rem;
  border: 0.5rem solid #eee;
  -webkit-box-shadow: 0.75rem 0.75rem 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0.75rem 0.75rem 0 rgba(0, 0, 0, 0.15);
  color: #999;
  padding: 1.5em 2rem 0; }
  @media screen and (min-width: 20rem) and (max-width: 39.9375rem) {
    .ChampInfo-meta {
      margin: 12rem 2rem 0; } }

.ChampInfo-metaTitle {
  color: #222;
  font-family: "tk", Verdana, sans-serif;
  font-size: 2rem;
  margin: 0; }

.ChampInfo-metaSubTitle {
  color: #555;
  font-family: "csr", Verdana, sans-serif;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 2.5rem;
  margin-top: 0; }
  @media screen and (min-width: 100rem) {
    .ChampInfo-metaSubTitle {
      font-size: 1.5rem; } }

.ChampInfo-metaStatus {
  background-color: #eee;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 -2rem 0;
  padding: 2rem 2rem 1.25rem;
  position: relative; }
  @media screen and (min-width: 60rem) {
    .ChampInfo-metaStatus {
      font-size: 1.0625rem; } }
  @media screen and (min-width: 100rem) {
    .ChampInfo-metaStatus {
      font-size: 1.25rem;
      margin-top: 0.75rem; } }
  @media screen and (min-width: 100rem) {
    .ChampInfo-metaStatus {
      margin-top: 0.75rem; } }
  .ChampInfo-metaStatus::before {
    background: url("https://assets-gnp-ssl.gonoodle.com/image-assets/modals/modal-tear5.svg") repeat-x top left;
    background-size: contain;
    content: '';
    height: 1.5rem;
    left: 0;
    position: absolute;
    right: 0;
    top: -0.5rem; }

.ChampInfo-metaStatusLink {
  border-color: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5); }
  .ChampInfo-metaStatusLink:hover {
    color: rgba(0, 0, 0, 0.65); }

.ChampInfo-playButton {
  margin-bottom: 2rem;
  margin-top: -1.5rem; }
/** @define Footer */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Footer {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #000;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5rem 1rem; }
  @media screen and (min-width: 50rem) {
    .Footer {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.Footer-logo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 7rem;
  width: 50vw; }
  @media screen and (min-width: 50rem) {
    .Footer-logo {
      margin-right: 1.5rem; } }

@media screen and (min-width: 50rem) {
  .Footer-logo--hasAwsLogo {
    margin-left: auto; } }

.Footer-body {
  text-align: center; }

.Footer-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out; }

.Footer-link:hover {
  opacity: 0.9; }

.Footer-awsLink {
  height: 2rem;
  margin-top: 0.5rem;
  width: 5.625rem; }
  @media screen and (min-width: 50rem) {
    .Footer-awsLink {
      margin-left: auto;
      margin-right: 1rem;
      margin-top: 0; } }
/** @define ChampCard */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ChampCard {
  background-color: #fff;
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: inline-block;
  margin: 0 4vw 5vw;
  max-width: 12.5rem;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  width: 36vw; }
  @media screen and (min-width: 40rem) {
    .ChampCard {
      margin-bottom: 3vw;
      margin-left: 1.5vw;
      margin-right: 1.5vw;
      width: 22vw; } }
  @media screen and (min-width: 60rem) {
    .ChampCard {
      width: 14vw; } }

.no-touchevents .ChampCard:not(.ChampCard--current):hover {
  -webkit-box-shadow: 0 0.75rem 0.5rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.75rem 0.5rem rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(1.03);
          transform: scale(1.03); }

.ChampCard-nameWrap {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #333;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 4.125rem; }

.ChampCard-name {
  color: #fff;
  font-size: 1rem;
  line-height: 1.1;
  margin: 0;
  padding: 0 0.75em; }
  @media screen and (min-width: 100rem) {
    .ChampCard-name {
      font-size: 1.25em; } }

.ChampCard-img {
  display: block; }

/* Modifiers: Champ status
   ========================================================================== */
.ChampCard--current {
  border-radius: 0.25rem;
  border: 0.25rem solid #fecf2f;
  -webkit-box-shadow: 0.65em 0.65em 0 rgba(103, 57, 14, 0.2);
          box-shadow: 0.65em 0.65em 0 rgba(103, 57, 14, 0.2);
  -webkit-transform: scale(1.08) rotate(-1deg);
          transform: scale(1.08) rotate(-1deg);
  z-index: 2; }

.ChampCard--graduated {
  background-color: #5e1cca; }
/** @define ChannelButton */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ChannelButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
  -webkit-perspective: 80vw;
          perspective: 80vw;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .ChannelButton {
      min-height: 15rem; } }

.ChannelButton-innerContainer {
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-perspective: 800;
          perspective: 800;
  position: relative;
  width: 100%; }

.ChannelButton-front,
.ChannelButton-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 0.5em;
  -webkit-box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: -webkit-transform 400ms ease-in-out 300ms;
  transition: -webkit-transform 400ms ease-in-out 300ms;
  transition: transform 400ms ease-in-out 300ms;
  transition: transform 400ms ease-in-out 300ms, -webkit-transform 400ms ease-in-out 300ms;
  width: 100%;
  will-change: transform, z-index; }

.ChannelButton-innerContainer:hover .ChannelButton-front {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

.ChannelButton-innerContainer:hover .ChannelButton-back {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg); }

/**
 * 1. IE11 on Windows 10 fails to properly render `backface-visibility: hidden;`
 *    for this transition. So, we have disabled the transition in all IE's for
 *    the time being.
 */
.ie .ChannelButton-front,
.ie .ChannelButton-back {
  -webkit-transition: none;
  transition: none;
  /* 1 */ }

/**
 * 1. Fix IE image ratio issues within flex items. http://bit.ly/1JmpjVM
 */
.ChannelButton-iconImg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* 1 */
  max-height: 100%;
  max-width: 100%; }

.ChannelButton-front {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

.ChannelButton-iconFront {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 45%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 50%; }

.ChannelButton-sponsor {
  background-color: #f2f2f2;
  color: #777;
  font-size: 0.625rem;
  padding: 0.75rem; }
  @media screen and (min-width: 50rem) {
    .ChannelButton-sponsor {
      font-size: 0.75rem; } }

.ChannelButton-sponsorFront {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0; }

.ChannelButton-back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg); }

.ChannelButton-backInner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 0.5rem; }
  @media screen and (min-width: 50rem) {
    .ChannelButton-backInner {
      padding-left: 1rem;
      padding-right: 1rem; } }

.ChannelButton-iconBack {
  margin-bottom: 0.5rem;
  width: 7rem; }

.ChannelButton-iconImgBack {
  max-height: 4rem;
  vertical-align: middle; }

/**
 * 1. Fix non-wrapping text in IE11.
 */
.ChannelButton-description {
  font-size: 0.625rem;
  max-width: 100%;
  /* 1 */ }
  @media screen and (min-width: 50rem) {
    .ChannelButton-description {
      font-size: 0.875rem; } }

.ChannelButton-new {
  font-size: 0.875rem;
  left: -0.3em;
  position: absolute;
  top: 1rem; }

.ChannelButton-newLabel {
  background-color: #5e1cca;
  border-radius: 3px 3px 3px 2px;
  color: #fff;
  font-weight: bold;
  padding: 0.25em 0.5em;
  position: relative;
  text-transform: uppercase;
  z-index: 1; }

.ChannelButton-new::before {
  border-color: #341070 transparent transparent transparent;
  border-style: solid;
  border-width: 0.3em 0 0 0.3em;
  content: '';
  display: block;
  height: 0;
  left: 0;
  position: absolute;
  -webkit-transform: translate(skewX(15deg));
          transform: translate(skewX(15deg));
  top: calc(100% - 0.1em);
  width: 0; }

.ChannelButton-newBack {
  left: auto;
  right: -0.3em; }

.ChannelButton-newBack::before {
  border-color: #341070 transparent transparent transparent;
  left: auto;
  right: 0;
  border-width: 0.3em 0.3em 0 0; }

.ChannelButton-newBackLabel {
  border-radius: 3px 3px 2px 3px; }
/** @define DebugBanner */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.DebugBanner {
  background-color: #f6fd37;
  border: 1px solid #000;
  border-left: none;
  border-top: none;
  border-radius: 0 0 6px 0;
  color: #000;
  font-size: 0.6875rem;
  left: 0;
  position: fixed;
  text-transform: uppercase;
  top: 0;
  z-index: 900; }

.DebugBanner-title {
  padding: 0 0.5rem; }

.DebugBanner-btn {
  pointer-events: all;
  text-decoration: underline;
  text-transform: uppercase; }

.DebugBanner-form {
  border-top: 1px solid #000;
  display: none;
  padding: 0.5rem; }

.DebugBanner-input {
  font-size: 0.5rem; }

/* State: Hover
   ========================================================================== */
.DebugBanner:hover .DebugBanner-form {
  display: block; }
/** @define DeprecatedLoadingOverlay */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.DeprecatedLoadingOverlay {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  left: 0;
  overflow: auto;
  padding: 0.5rem;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100vw;
  z-index: 800; }

.DeprecatedLoadingOverlay-content {
  margin-top: auto;
  margin-bottom: auto; }

.DeprecatedLoadingOverlay-letterBounce > span {
  -webkit-animation: letter-bounce 1200ms ease-in-out infinite;
          animation: letter-bounce 1200ms ease-in-out infinite;
  display: inline-block;
  margin: 0 0.0125rem; }
  .DeprecatedLoadingOverlay-letterBounce > span:nth-of-type(2n) {
    -webkit-animation-delay: 100ms;
            animation-delay: 100ms; }
  .DeprecatedLoadingOverlay-letterBounce > span:nth-of-type(3n) {
    -webkit-animation-delay: 350ms;
            animation-delay: 350ms; }
  .DeprecatedLoadingOverlay-letterBounce > span:nth-of-type(4n) {
    -webkit-animation-delay: 050ms;
            animation-delay: 050ms; }
  .DeprecatedLoadingOverlay-letterBounce > span:nth-of-type(5n) {
    -webkit-animation-delay: 550ms;
            animation-delay: 550ms; }
  .DeprecatedLoadingOverlay-letterBounce > span:nth-of-type(6n) {
    -webkit-animation-delay: 220ms;
            animation-delay: 220ms; }
  .DeprecatedLoadingOverlay-letterBounce > span:nth-of-type(7n) {
    -webkit-animation-delay: 750ms;
            animation-delay: 750ms; }

.DeprecatedLoadingOverlay-dotBounce {
  display: block;
  margin-bottom: 2rem;
  padding-top: 2rem;
  width: 100%; }

@-webkit-keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

@keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

.DeprecatedLoadingOverlay-dot {
  -webkit-animation: dot-bounce 1500ms ease-in infinite;
          animation: dot-bounce 1500ms ease-in infinite;
  background-color: #5e1cca;
  border-radius: 100rem;
  display: inline-block;
  height: 1rem;
  margin: 0 0.25rem;
  vertical-align: middle;
  width: 1rem; }
  .DeprecatedLoadingOverlay-dot:nth-of-type(2) {
    -webkit-animation-delay: 100ms;
            animation-delay: 100ms; }
  .DeprecatedLoadingOverlay-dot:nth-of-type(3) {
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms; }
/** @define PartnerStamp */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PartnerStamp {
  width: 100%; }

.PartnerStamp-title {
  color: #777;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 0.5rem;
  position: relative;
  text-align: center;
  z-index: 100; }
  @media screen and (min-width: 40rem) {
    .PartnerStamp-title {
      font-size: 1.75rem; } }

.PartnerStamp-gnLogo {
  display: block;
  margin: 0 auto 1rem;
  max-width: 13rem;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .PartnerStamp-gnLogo {
      display: inline-block;
      margin: 0 0.25rem 0 0; } }

.PartnerStamp-logo {
  margin: 0 auto 2rem;
  max-width: 37.5rem;
  width: 80%; }

.PartnerStamp-logoImg {
  max-height: 20rem; }

.PartnerStamp-name {
  margin-top: 0;
  margin-bottom: 2rem; }

/* Modifier: Compacted text and sizing.
   ========================================================================== */
.PartnerStamp--compact .PartnerStamp-title {
  font-size: 0.75rem; }
  @media screen and (min-width: 50rem) {
    .PartnerStamp--compact .PartnerStamp-title {
      font-size: 1rem; } }

.PartnerStamp--compact .PartnerStamp-gnLogo {
  max-width: 8rem; }

.PartnerStamp--compact .PartnerStamp-logo {
  max-width: 28rem; }
/** @define ActivityGuideModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivityGuideModule {
  color: #000; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule {
      padding: 1rem; } }

.ActivityGuideModule-inner {
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
  padding: 3.3rem 0 1.3075rem 0;
  position: relative; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-inner {
      border: 0.125rem solid #000;
      border-radius: 0.25rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: initial; } }

.ActivityGuideModule-left {
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-left {
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
      margin: 1.875rem 0 1.875rem 2.375rem;
      text-align: initial; } }
  @media screen and (min-width: 60rem) {
    .ActivityGuideModule-left {
      -ms-flex-preferred-size: 60%;
          flex-basis: 60%; } }
  @media screen and (min-width: 100rem) {
    .ActivityGuideModule-left {
      -ms-flex-preferred-size: 65%;
          flex-basis: 65%; } }

.ActivityGuideModule-heading {
  font-size: 2rem;
  line-height: 1.16;
  margin: 0 0 1rem 0;
  padding-left: 2rem;
  padding-right: 2rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-heading {
      font-size: 2.5rem;
      max-width: 41rem;
      padding: 0; } }

.ActivityGuideModule-zigzag {
  margin: 0 auto 1.5rem;
  width: 4.75rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-zigzag {
      margin-left: initial;
      margin-right: initial; } }

.ActivityGuideModule-body,
.ActivityGuideModule-linkText {
  letter-spacing: 0.035em;
  line-height: 1.5;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-body,
    .ActivityGuideModule-linkText {
      font-size: 1.25rem;
      margin: initial; } }

.ActivityGuideModule-body {
  margin-bottom: 5.5rem;
  max-width: 17.5rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-body {
      max-width: 43rem; } }

.ActivityGuideModule-linkContainer {
  display: block; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-linkContainer {
      display: inline-block; } }

.ActivityGuideModule-linkText {
  color: #fecf2f;
  position: relative;
  white-space: nowrap; }
  .ActivityGuideModule-linkText::after {
    content: '';
    border: 0.0625rem solid;
    bottom: 0.0625rem;
    left: 0;
    position: absolute;
    width: 100%; }
  .ActivityGuideModule-linkText:hover {
    color: #dfad01; }

.ActivityGuideModule-partner {
  margin-bottom: 2.5rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-partner {
      margin-bottom: initial; } }

.ActivityGuideModule-right {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  margin-bottom: 1.375rem;
  max-width: 20.5rem; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-right {
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
      margin-bottom: auto;
      max-width: 18rem; } }
  @media screen and (min-width: 60rem) {
    .ActivityGuideModule-right {
      -ms-flex-preferred-size: 40%;
          flex-basis: 40%; } }
  @media screen and (min-width: 100rem) {
    .ActivityGuideModule-right {
      -ms-flex-preferred-size: 35%;
          flex-basis: 35%; } }

.ActivityGuideModule-tile {
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideModule-tile {
      padding-bottom: 2rem;
      padding-top: 2rem; } }

/* Modifiers: Text Theme
   ========================================================================== */
.ActivityGuideModule--light {
  color: #fff; }
/** @define ActivityGuideTile */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivityGuideTile-wrap {
  margin-bottom: 0.5rem;
  margin-right: 0.5rem; }

.ActivityGuideTile {
  margin-bottom: 0.5rem;
  margin-right: 0.5rem; }

.ActivityGuideTile-link {
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 24rem;
  position: relative; }
  @media screen and (min-width: 50rem) {
    .ActivityGuideTile-link {
      min-height: 22rem; } }

.ActivityGuideTile-page,
.ActivityGuideTile-inner {
  background-color: #fff;
  border: 0.125rem solid #000;
  border-radius: 0.25rem;
  position: absolute; }

.ActivityGuideTile-inner {
  color: inherit;
  height: 100%;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  width: 100%;
  z-index: 2; }

.ActivityGuideTile-inner:hover {
  -webkit-transform: translateY(-0.1875rem);
          transform: translateY(-0.1875rem); }

.ActivityGuideTile-page {
  height: 100%;
  left: 0.25rem;
  top: 0.25rem;
  width: 100%;
  z-index: 1; }

.ActivityGuideTile-page:last-of-type {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 0; }

.ActivityGuideTile-top {
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  height: 42%;
  padding-bottom: 3.75rem;
  padding-left: 1.5rem;
  padding-top: 2.2rem;
  position: relative;
  width: 100%; }

.ActivityGuideTile-type {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  text-transform: uppercase; }

.ActivityGuideTile-title {
  color: #000;
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0;
  max-width: 14.625rem; }

.ActivityGuideTile-bottom {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom-left-radius: 0.125rem;
  border-bottom-right-radius: 0.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 58%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%; }
/** @define DiscoverLoadingOverlay */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.DiscoverLoadingOverlay {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  left: 0;
  overflow: auto;
  padding: 0.5rem;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100vw;
  z-index: 800; }

.DiscoverLoadingOverlay-content {
  padding: 2.5rem; }
  @media screen and (min-width: 40rem) {
    .DiscoverLoadingOverlay-content {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin-bottom: auto;
      margin-top: auto;
      padding: 0; } }

.DiscoverLoadingOverlay-champ {
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .DiscoverLoadingOverlay-champ {
      margin-right: 2rem;
      margin-top: 15rem;
      width: auto; } }

.DiscoverLoadingOverlay-textWrap {
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .DiscoverLoadingOverlay-textWrap {
      width: 35%; } }

.DiscoverLoadingOverlay-text {
  color: #000;
  font-size: 1.75rem;
  margin: 0;
  padding-bottom: 2rem;
  text-align: left; }

@-webkit-keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

@keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

.DiscoverLoadingOverlay-dotBounce {
  padding-bottom: 2rem;
  padding-top: 1rem; }
  @media screen and (min-width: 40rem) {
    .DiscoverLoadingOverlay-dotBounce {
      text-align: left; } }

.DiscoverLoadingOverlay-dot {
  -webkit-animation: dot-bounce 1500ms ease-in infinite;
          animation: dot-bounce 1500ms ease-in infinite;
  background-color: #5e1cca;
  border-radius: 100rem;
  display: inline-block;
  height: 1rem;
  margin: 0 0.25rem;
  vertical-align: middle;
  width: 1rem; }
  .DiscoverLoadingOverlay-dot:nth-of-type(2) {
    -webkit-animation-delay: 100ms;
            animation-delay: 100ms; }
  .DiscoverLoadingOverlay-dot:nth-of-type(3) {
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms; }
/** @define DailyModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.DailyModule {
  padding: 1rem 0;
  position: relative; }
  @media screen and (min-width: 50rem) {
    .DailyModule {
      padding: 1rem; } }

.DailyModule-inner {
  background-position: center center;
  background-size: cover;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  max-width: 75rem;
  padding-top: 2rem;
  position: relative; }
  @media screen and (min-width: 50rem) {
    .DailyModule-inner {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      border-radius: 6px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      overflow: hidden;
      padding: 0 1.5rem; } }

.DailyModule-content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto; }
  @media screen and (min-width: 60rem) {
    .DailyModule-content {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.DailyModule-titleContainer {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin-bottom: 1rem;
  max-width: 22.5rem;
  width: 100%; }
  @media screen and (min-width: 75rem) {
    .DailyModule-titleContainer {
      margin-bottom: 0; } }

.DailyModule-titleInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  max-width: 20rem;
  position: relative; }

.DailyModule-titleImage {
  bottom: 0;
  left: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%; }

.DailyModule-description {
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  margin: 0.5rem auto;
  max-width: 30rem;
  padding: 0 0.5rem;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .DailyModule-description {
      font-size: 1.125rem; } }
  @media screen and (min-width: 75rem) {
    .DailyModule-description {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      padding: 0 3rem; } }

.DailyModule-activity {
  margin: 0 auto;
  max-width: 20rem;
  min-width: 20rem;
  padding: 1rem;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .DailyModule-activity {
      max-width: 24rem;
      padding: 2rem;
      text-align: left;
      width: 50%; } }

/* Modifier: Description Light
   ========================================================================== */
.DailyModule--light .DailyModule-description {
  color: #fff; }

/* Modifier: Description Dark
   ========================================================================== */
.DailyModule--dark .DailyModule-description {
  color: #000; }
/** @define FourActivitiesModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.FourActivitiesModule {
  background-size: cover;
  text-align: center;
  padding: 1rem 0.675rem 0 0.675rem; }
  @media screen and (min-width: 40rem) {
    .FourActivitiesModule {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
  @media screen and (min-width: 50rem) {
    .FourActivitiesModule {
      padding-top: 0.625rem; } }

.FourActivitiesModule-inner {
  margin: 0 auto;
  max-width: 75rem; }

.FourActivitiesModule-subheader {
  color: #5e1cca;
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  width: 100%; }

.FourActivitiesModule-header {
  color: #333;
  font-family: "tk", Verdana, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
  padding-bottom: 1rem; }
  @media screen and (min-width: 50rem) {
    .FourActivitiesModule-header {
      text-align: left; } }

/* Modifiers: Text Theme
   ========================================================================== */
.FourActivitiesModule--light .FourActivitiesModule-header {
  color: #fff; }
/** @define LearningExtensionModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.LearningExtensionModule {
  border-top: 0.5rem solid #000; }
  @media screen and (min-width: 50rem) {
    .LearningExtensionModule {
      border-top: none;
      padding: 1rem; } }

.LearningExtensionModule-inner {
  background-color: #fff;
  background-image: url(/assets/d71c49c525091aa2105ad22cf65b96b3.svg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: auto 21rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
  padding-bottom: 1rem;
  position: relative; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionModule-inner {
      background-image: url(/assets/1dac67845fe171510f71880e5483b4d6.svg), url(/assets/d71c49c525091aa2105ad22cf65b96b3.svg);
      background-position: left bottom, right bottom;
      background-repeat: no-repeat;
      background-size: auto 17rem, auto 21rem; } }
  @media screen and (min-width: 50rem) {
    .LearningExtensionModule-inner {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background-size: auto 17rem, auto 21rem;
      border-radius: 6px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      overflow: hidden; } }

.LearningExtensionModule-heading {
  background-color: #000;
  border-radius: 0 0 0.5rem;
  color: #fff;
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0 1rem 0.5rem; }
  @media screen and (min-width: 50rem) {
    .LearningExtensionModule-heading {
      left: 0;
      margin-bottom: 0;
      padding-top: 0.5rem;
      position: absolute;
      top: 0; } }

.LearningExtensionModule-content {
  padding: 0 1rem 1rem 1rem; }
  @media screen and (min-width: 50rem) {
    .LearningExtensionModule-content {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      padding: 1rem; } }
  @media screen and (min-width: 60rem) {
    .LearningExtensionModule-content {
      padding: 1.5rem 2rem; } }

.LearningExtensionModule-left {
  padding: 1rem;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .LearningExtensionModule-left {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      padding-left: 3rem;
      padding-right: 3rem;
      text-align: left;
      width: 70%; } }

.LearningExtensionModule-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  max-width: 24rem;
  padding-bottom: 1.25rem; }
  @media screen and (min-width: 50rem) {
    .LearningExtensionModule-right {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      padding-right: 3rem;
      width: 30%; } }

.LearningExtensionModule-body {
  color: #333;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 auto 2rem;
  width: 100%; }
  @media screen and (min-width: 60rem) {
    .LearningExtensionModule-body {
      font-size: 2rem; } }

.LearningExtensionModule-bodyLinkContainer {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%; }

.LearningExtensionModule-linkText {
  border-bottom: 0.0625rem solid currentColor;
  color: #333;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 0.5em; }

.LearningExtensionModule-imgWrap {
  display: block;
  position: relative;
  width: 14rem;
  z-index: 100; }

.LearningExtensionModule-imgBgTop,
.LearningExtensionModule-imgBgBottom {
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -100; }
  .LearningExtensionModule-imgBgTop::before, .LearningExtensionModule-imgBgTop::after,
  .LearningExtensionModule-imgBgBottom::before,
  .LearningExtensionModule-imgBgBottom::after {
    background-color: #f6fd37;
    border: 0.125rem solid #000;
    content: '';
    height: 100%;
    position: absolute;
    width: 100%; }
  .LearningExtensionModule-imgBgTop::before,
  .LearningExtensionModule-imgBgBottom::before {
    left: 0.625rem;
    top: 0.625rem; }
  .LearningExtensionModule-imgBgTop::after,
  .LearningExtensionModule-imgBgBottom::after {
    left: 0.3125rem;
    top: 0.3125rem; }

.LearningExtensionModule-imgBgBottom {
  left: 0.625rem;
  top: 0.625rem; }

.LearningExtensionModule-img {
  background-color: #fff;
  border: 0.0625rem solid #000;
  display: block;
  position: relative; }
/** @define LevelUpModal */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.LevelUpModal-imageWrap {
  position: relative; }

.LevelUpModal-image {
  bottom: 0;
  height: 100%;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PlusPromoModule {
  border-top: 0.625rem solid #000; }
  @media screen and (min-width: 50rem) {
    .PlusPromoModule {
      border-top: none;
      padding: 1rem; } }

.PlusPromoModule-inner {
  background-color: #fff;
  background-image: url(/assets/c3ff7d4baf1722d82542888be86c3a2f.svg), url(/assets/03d1fb1910905ab023a433cd36159254.svg);
  background-position: left bottom, center bottom;
  background-repeat: no-repeat;
  background-size: auto 16rem, auto 2rem;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 50rem) {
    .PlusPromoModule-inner {
      background-image: url(/assets/725d8a70e5ec8b63b768902dc5428e25.svg), url(/assets/c3ff7d4baf1722d82542888be86c3a2f.svg), url(/assets/03d1fb1910905ab023a433cd36159254.svg);
      background-position: right top, left bottom, center bottom;
      background-size: auto 12rem, auto 16rem, auto 2rem;
      border-radius: 6px;
      overflow: hidden; } }

.PlusPromoModule-heading {
  max-width: 10rem;
  width: 100%; }

.PlusPromoModule-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .PlusPromoModule-content {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      text-align: left; } }

.PlusPromoModule-left {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 1rem;
  padding: 1rem;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .PlusPromoModule-left {
      margin-bottom: 0;
      padding-left: 5rem; } }

.PlusPromoModule-title {
  color: #333;
  font-size: 1.25rem;
  margin: 0 auto 1rem;
  max-width: 25em; }
  @media screen and (min-width: 50rem) {
    .PlusPromoModule-title {
      margin: 0 0 1rem; } }
  @media screen and (min-width: 60rem) {
    .PlusPromoModule-title {
      font-size: 1.75rem; } }

.PlusPromoModule-right {
  -ms-flex-item-align: end;
      align-self: flex-end;
  width: 20rem; }

.PlusPromoModule-img {
  vertical-align: top; }
/** @define ThreePlusActivitiesModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ThreePlusActivitiesModule {
  background-color: #5e1cca;
  background-image: url(/assets/8fe9253261f371af853215b607daecff.svg);
  background-position: center center;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  padding: 1rem 0.675rem;
  position: relative;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .ThreePlusActivitiesModule {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
  @media screen and (min-width: 50rem) {
    .ThreePlusActivitiesModule {
      padding-top: 1.5rem; } }

.ThreePlusActivitiesModule-inner {
  margin: 0 auto;
  max-width: 75rem; }

.ThreePlusActivitiesModule-header {
  margin-bottom: 2rem;
  text-align: left; }
  @media screen and (min-width: 40rem) {
    .ThreePlusActivitiesModule-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between; } }

@media screen and (min-width: 40rem) {
  .ThreePlusActivitiesModule-message {
    padding-right: 1rem; } }

@media screen and (min-width: 40rem) {
  .ThreePlusActivitiesModule-cta {
    text-align: right; } }

.ThreePlusActivitiesModule-heading {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0 1rem;
  max-width: 14em; }
  @media screen and (min-width: 50rem) {
    .ThreePlusActivitiesModule-heading {
      font-size: 2rem; } }

.ThreePlusActivitiesModule-subHeading {
  color: #ddfd48;
  font-size: 1rem;
  margin: 0 0 0.5rem;
  text-transform: uppercase; }
/** @define ThreeDescribedActivitiesModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ThreeDescribedActivitiesModule {
  background-color: #5e1cca;
  background-image: url(/assets/8fe9253261f371af853215b607daecff.svg);
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  padding: 1rem 0.675rem;
  position: relative;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .ThreeDescribedActivitiesModule {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }
  @media screen and (min-width: 50rem) {
    .ThreeDescribedActivitiesModule {
      padding-top: 1.5rem; } }

.ThreeDescribedActivitiesModule-inner {
  margin: 0 auto;
  max-width: 75rem; }
/** @define DescribedActivity */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.DescribedActivity-heading {
  color: #ddfd48;
  font-size: 0.875rem;
  margin: 1rem;
  text-transform: uppercase; }

.DescribedActivity-description {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: bold;
  height: 5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 2rem 1rem; }
  @media screen and (min-width: 75rem) {
    .DescribedActivity-description {
      font-size: 1.1rem; } }

/* Modifier: Recommendations, initially used for Plus promo module.
   ========================================================================== */
.DescribedActivity--recommendations .DescribedActivity-description {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  height: auto; }

/* Modifier: Text Theme
   ========================================================================== */
.DescribedActivity--dark .DescribedActivity-description {
  color: #000; }
@charset "UTF-8";
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.QuoteModule {
  border-top: 0.5rem solid #000; }
  @media screen and (min-width: 50rem) {
    .QuoteModule {
      border-top: none;
      padding: 1rem; } }

.QuoteModule-inner {
  background-color: #fff;
  background-image: url(/assets/d2cc08ce0a778b965d5b5e0cb6ee533b.svg), url(/assets/801013a70ee60bb89ee87ce94c376c79.svg), url(/assets/4e3e8af954dd13e8cb5f8e800e59de19.svg);
  background-position: left bottom, right bottom, center bottom;
  background-repeat: no-repeat;
  background-size: auto 7rem, auto 11rem, auto 1.5rem;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1rem;
  position: relative; }
  @media screen and (min-width: 50rem) {
    .QuoteModule-inner {
      background-image: url(/assets/6ae508234f359467205bb9729ea09d94.svg), url(/assets/d2cc08ce0a778b965d5b5e0cb6ee533b.svg), url(/assets/801013a70ee60bb89ee87ce94c376c79.svg), url(/assets/4e3e8af954dd13e8cb5f8e800e59de19.svg);
      background-position: right top, left bottom, right bottom, center bottom;
      background-repeat: no-repeat;
      background-size: auto 18rem, auto 7rem, auto 11rem, auto 1.5rem;
      border-radius: 6px;
      overflow: hidden;
      padding-bottom: 0; } }

.QuoteModule-heading {
  background-color: #000;
  border-radius: 0 0 0.5rem;
  color: #fff;
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0 1rem 0.5rem; }
  @media screen and (min-width: 50rem) {
    .QuoteModule-heading {
      left: 0;
      margin-bottom: 0;
      padding-top: 0.5rem;
      position: absolute;
      top: 0; } }

.QuoteModule-content {
  padding: 0 1rem 1rem 1rem; }
  @media screen and (min-width: 50rem) {
    .QuoteModule-content {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      padding: 1rem; } }
  @media screen and (min-width: 60rem) {
    .QuoteModule-content {
      padding: 2rem 3rem; } }

.QuoteModule-left {
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .QuoteModule-left {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      padding-right: 3rem;
      text-align: left;
      width: 66.666%; } }

.QuoteModule-right {
  margin: 0 auto;
  max-width: 24rem;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .QuoteModule-right {
      text-align: left;
      width: 33.333%; } }

.QuoteModule-img {
  border: 0.1875rem solid #000;
  border-radius: 50%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 7.75rem; }
  @media screen and (min-width: 50rem) {
    .QuoteModule-img {
      width: 12rem; } }

.QuoteModule-quote {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  font-size: 1.5rem;
  margin: 0 auto 2rem;
  max-width: 20em; }
  @media screen and (min-width: 50rem) {
    .QuoteModule-quote {
      font-size: 1.25rem;
      margin-left: 2rem; } }
  @media screen and (min-width: 60rem) {
    .QuoteModule-quote {
      font-size: 1.75rem; } }

.QuoteModule-body {
  font-family: "tk", Verdana, sans-serif;
  line-height: 1.3;
  margin: 0 0 0.5em;
  quotes: '\201C' '\201D'; }

.QuoteModule-body::before {
  content: open-quote; }

.QuoteModule-body::after {
  content: close-quote; }

.QuoteModule-attribute {
  display: block;
  font-family: "csr", Verdana, sans-serif;
  font-size: 0.6em;
  font-style: normal; }
  @media screen and (min-width: 50rem) {
    .QuoteModule-attribute {
      text-align: right; } }

.QuoteModule-attribute::before {
  content: '\2013';
  padding-right: 0.25em; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.RandomizerModule {
  background: #5e1cca url(/assets/83ac721035203faddd121b82f544ce52.svg) no-repeat center center;
  background-size: cover;
  position: relative; }

.RandomizerModule-inner {
  background-color: rgba(48, 13, 99, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 4rem 0.5rem;
  text-align: center; }

/**
 * 1. Required for flexbug. https://git.io/vwznR
 */
.RandomizerModule-content {
  /* 1 */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 10vw; }

.RandomizerModule-tryAgain {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 2rem; }
  @media screen and (min-width: 50rem) {
    .RandomizerModule-tryAgain {
      margin: 0;
      position: absolute;
      right: 4rem;
      top: 2rem; } }

.RandomizerModule-activity {
  max-width: 22rem;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  width: 100%; }

.RandomizerModule-heading {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0 2rem; }

.RandomizerModule-body {
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.25rem;
  margin: 0;
  max-width: 40rem;
  width: 80%; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SingleActivityModule {
  border-top: 0.625rem solid #000; }
  @media screen and (min-width: 50rem) {
    .SingleActivityModule {
      border-top: none;
      padding: 1rem; } }

.SingleActivityModule-inner {
  background-color: #fff;
  background-image: url(/assets/09bc1e37808b57d2dc16bd4bbd4af363.svg), url(/assets/03d7fe434d1bb8b067c691e2fb02bec1.svg), url(/assets/f0db5603f65704e4d5e054208658a2cb.svg);
  background-position: left bottom, right bottom, center bottom;
  background-repeat: no-repeat;
  background-size: auto 6rem, auto 8rem, auto 3rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 75rem;
  padding-bottom: 1rem;
  position: relative; }
  @media screen and (min-width: 50rem) {
    .SingleActivityModule-inner {
      background-image: url(/assets/75a7ee60d1888bbf2403dc2e13f2c58c.svg), url(/assets/09bc1e37808b57d2dc16bd4bbd4af363.svg), url(/assets/03d7fe434d1bb8b067c691e2fb02bec1.svg), url(/assets/f0db5603f65704e4d5e054208658a2cb.svg);
      background-position: right top, left bottom, right bottom, center bottom;
      background-repeat: no-repeat;
      background-size: auto 12rem, auto 5rem, auto 10rem, 100% auto;
      border-radius: 6px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }

.SingleActivityModule-headerText {
  background-color: #000;
  border-radius: 0 0 0.5rem 0;
  color: #fff;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.5rem 1rem 0.5rem; }

@media screen and (min-width: 50rem) {
  .SingleActivityModule-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; } }

.SingleActivityModule-left {
  padding: 1rem;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .SingleActivityModule-left {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      padding-left: 3rem;
      padding-right: 3rem;
      text-align: left;
      width: 66.666%; } }

.SingleActivityModule-right {
  margin: 0 auto;
  padding: 1rem;
  max-width: 24rem; }
  @media screen and (min-width: 50rem) {
    .SingleActivityModule-right {
      width: 33.333%;
      padding-right: 3rem; } }

.SingleActivityModule-body {
  color: #333;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 auto 2rem;
  width: 100%; }
  @media screen and (min-width: 60rem) {
    .SingleActivityModule-body {
      font-size: 2.25rem; } }

.SingleActivityModule-bodyLinkContainer,
.SingleActivityModule-bottomLinkContainer {
  color: #333;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  font-size: 1.2rem; }

.SingleActivityModule-linkText {
  border-bottom: 0.0625rem solid currentColor;
  color: #333;
  font-family: "tk", Verdana, sans-serif;
  line-height: 1.3;
  margin: 0 0 0.5em; }
/** @define ThemeModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ThemeModule {
  padding: 1rem 0; }
  @media screen and (min-width: 40rem) {
    .ThemeModule {
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }

.ThemeModule-inner {
  background-size: cover;
  background-repeat: repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  max-width: 75rem;
  padding: 2rem 0.675rem 0 0.675rem; }
  @media screen and (min-width: 40rem) {
    .ThemeModule-inner {
      border: 2px solid #000;
      border-radius: 4px; } }
  @media screen and (min-width: 60rem) {
    .ThemeModule-inner {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      padding-left: 1.25rem;
      padding-right: 1.25rem; } }

.ThemeModule-message {
  text-align: center; }
  @media screen and (min-width: 60rem) {
    .ThemeModule-message {
      -ms-flex-preferred-size: 40%;
          flex-basis: 40%;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      margin-right: 1rem;
      max-width: 14rem;
      text-align: left; } }

.ThemeModule-innerWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  @media screen and (min-width: 60rem) {
    .ThemeModule-innerWrapper {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.ThemeModule-sponsorInfo {
  -ms-flex-item-align: center;
      align-self: center;
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 60rem) {
    .ThemeModule-sponsorInfo {
      -ms-flex-preferred-size: 40%;
          flex-basis: 40%;
      max-width: 14rem;
      margin-right: 1rem; } }

.ThemeModule-sponsorLogo {
  max-width: 10rem; }

.ThemeModule-infoText {
  letter-spacing: 0.035rem; }

.ThemeModule-activities {
  margin-left: auto;
  margin-right: auto;
  max-width: 24rem; }
  @media screen and (min-width: 50rem) {
    .ThemeModule-activities {
      margin-left: 0;
      margin-right: 0;
      max-width: none; } }
  @media screen and (min-width: 60rem) {
    .ThemeModule-activities {
      -ms-flex-preferred-size: 60%;
          flex-basis: 60%;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; } }

.ThemeModule-header {
  color: #333;
  font-family: "tk", Verdana, sans-serif;
  margin-bottom: 1rem;
  margin-top: 0; }

.ThemeModule-body {
  margin-left: auto;
  margin-right: auto;
  max-width: 30em; }

/* Modifier: Theme for light text.
   ========================================================================== */
.ThemeModule--light,
.ThemeModule--light .ThemeModule-header {
  color: #fff; }

@media screen and (min-width: 60rem) {
  .ThemeModule--sponsored .ThemeModule-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; } }

@media screen and (min-width: 60rem) {
  .ThemeModule--sponsored .ThemeModule-message {
    max-width: none; } }

.ThemeModule--sponsored .ThemeModule-body {
  max-width: none; }
/** @define TipModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.TipModule {
  border-top: 0.5rem solid #333;
  position: relative;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .TipModule {
      text-align: left; } }

.TipModule-inner {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem 1rem 1rem; }
  @media screen and (min-width: 50rem) {
    .TipModule-inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      position: relative;
      padding-top: 1rem; } }

@media screen and (min-width: 50rem) {
  .TipModule-left {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 60%; } }

.TipModule-right {
  display: none; }
  @media screen and (min-width: 50rem) {
    .TipModule-right {
      display: block;
      width: 40%; } }

.TipModule-img {
  height: 0;
  padding-top: 68.93%;
  position: relative; }

.TipModule-svg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.TipModule-heading {
  background-color: #333;
  border-radius: 0 0 0.5rem 0.5rem;
  color: #fff;
  display: inline-block;
  margin: 0 0 2rem;
  padding: 0.5rem 1rem; }
  @media screen and (min-width: 50rem) {
    .TipModule-heading {
      left: 1rem;
      margin-bottom: 0;
      position: absolute;
      top: 0; } }

.TipModule-body {
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.25rem;
  margin: 0 auto 2rem;
  max-width: 20em; }
  @media screen and (min-width: 50rem) {
    .TipModule-body {
      margin-left: 0;
      margin-right: 0; } }
  @media screen and (min-width: 60rem) {
    .TipModule-body {
      font-size: 2rem; } }
/** @define OverlayTip */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.OverlayTip {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

.OverlayTip-content {
  background: #eb0055 url(/assets/de3df58de3672b5c6f14fd5a686bc8bc.jpg) no-repeat center;
  background-image: -webkit-image-set(url(/assets/de3df58de3672b5c6f14fd5a686bc8bc.jpg) 1x, url(/assets/b708a56d9f706da922d7cf5ca92766ab.jpg) 2x, url(/assets/b68a8eeb3b35a1c90843e3deb0b4ad52.jpg) 3x);
  background-image: image-set("~images/bg-shapes-red-tip.jpg" 1x, "~images/bg-shapes-red-tip_2x.jpg" 2x, "~images/bg-shapes-red-tip_3x.jpg" 3x);
  background-size: cover;
  border-radius: 6px;
  left: 50%;
  margin-top: 1rem;
  max-width: 60rem;
  padding: 1rem;
  position: fixed;
  text-align: center;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(100% - 2rem); }
  @media screen and (min-width: 50rem) {
    .OverlayTip-content {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: left; } }

.OverlayTip-title {
  color: #fff;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  margin-left: auto;
  margin-right: auto;
  max-width: 30em; }
  @media screen and (min-width: 50rem) {
    .OverlayTip-title {
      margin-left: 0;
      margin-right: 2rem;
      max-width: none; } }

.OverlayTip-btn {
  -ms-flex-negative: 0;
      flex-shrink: 0; }
/** @define PulseCTA */
.PulseCTA {
  -webkit-animation: pulse 1.5s infinite;
          animation: pulse 1.5s infinite;
  background-color: rgba(229, 51, 63, 0.4);
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 0 rgba(229, 51, 63, 0.85);
          box-shadow: 0 0 0 0 rgba(229, 51, 63, 0.85);
  height: 6.25rem;
  pointer-events: none;
  width: 6.25rem; }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  70% {
    -webkit-box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
            box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
            box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
    -webkit-transform: scale(0.9);
            transform: scale(0.9); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  70% {
    -webkit-box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
            box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
            box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
    -webkit-transform: scale(0.9);
            transform: scale(0.9); } }
/** @define SmartQuestionSetModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
@media screen and (min-width: 50rem) {
  .SmartQuestionSetModule-box {
    padding: 1rem; } }

.SmartQuestionSetModule-inner {
  background-blend-mode: lighten;
  background-color: rgba(26, 110, 249, 0.5);
  background-image: url(/assets/bed87fe0707972a644766a123a085326.png);
  background-image: -webkit-image-set(url(/assets/bed87fe0707972a644766a123a085326.png) 1x, url(/assets/48d02c266eb0018d6dd415ee955bc71d.png) 2x, url(/assets/17c511e6e99e470f83fd7e99ea6feb53.png) 3x);
  background-image: image-set("./images/bg-illustrations-blue.png" 1x, "./images/bg-illustrations-blue@2x.png" 2x, "./images/bg-illustrations-blue@3x.png" 3x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: auto;
  max-width: 75rem; }
  @media screen and (min-width: 50rem) {
    .SmartQuestionSetModule-inner {
      border: 0.125rem solid #000;
      border-radius: 0.25rem; } }

.SmartQuestionSetModule-header {
  padding: 0 1rem;
  text-align: center; }

.SmartQuestionSetModule-title {
  color: #fff; }

.SmartQuestionSetModule-subtitle {
  color: #fff;
  line-height: 1.4;
  font-size: 1rem; }

.SmartQuestionSetModule-squiggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.SmartQuestionSetModule-squiggle-full {
  width: 4.75rem; }

.SmartQuestionSetModule-tiles {
  margin: 1.25rem 1.25rem 0; }
/** @define PlaySetOverlay */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PlaySetOverlay {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 800; }

.PlaySetOverlay-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 801; }

.PlaySetOverlay-content {
  -webkit-overflow-scrolling: touch;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  overflow: auto;
  padding: 2rem 2rem 0;
  position: fixed;
  width: 100%;
  z-index: 802; }

.PlaySetOverlay-closeBtn {
  left: 1rem;
  position: absolute;
  top: 1rem; }

.PlaySetOverlay-title {
  color: #fff;
  margin: 0;
  padding-bottom: 1rem; }

.PlaySetOverlay-subtitle {
  color: #fff;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding-bottom: 1rem;
  text-align: center; }

.PlaySetOverlay-activities {
  width: 100%; }

.PlaySetOverlay-activity {
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 24rem; }
  @media screen and (min-width: 40rem) {
    .PlaySetOverlay-activity {
      max-width: 36rem;
      margin-left: 0;
      margin-right: 0; } }
/** @define SmartQuestionSetTile */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SmartQuestionSetTile {
  padding: 0;
  text-align: left;
  width: 100%; }

.SmartQuestionSetTile-box {
  position: relative; }

.SmartQuestionSetTile-inner,
.SmartQuestionSetTile-page {
  background: #fff;
  border: 0.125rem solid #000;
  border-radius: 0.375rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  position: absolute;
  width: 100%; }

.SmartQuestionSetTile-page {
  left: 0.25rem;
  top: 0.25rem;
  z-index: 0; }

.SmartQuestionSetTile-inner {
  padding: 0 1rem 0.5rem;
  z-index: 1; }

.SmartQuestionSetTile-header {
  margin: 0.625rem 0; }

.SmartQuestionSetTile-body {
  margin: 0.5rem 0; }

.SmartQuestionSetTile-line {
  border-top: 1px solid #ccc;
  padding-bottom: 0.75rem; }

.SmartQuestionSetTile-label {
  background-color: #5e1cca;
  border-radius: 0.125rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  line-height: 1.21rem;
  padding: 0.25rem; }
/** @define ResubscribeModal */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ResubscribeModal-imageWrap {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0.5rem; }

.ResubscribeModal-imageWrap--inner {
  width: 10rem;
  position: relative; }
  .ResubscribeModal-imageWrap--inner::before {
    content: '';
    height: 96%;
    width: 100%;
    position: absolute;
    background-color: #ddfd48;
    border: 0.125rem solid #000;
    top: 0.4rem;
    left: 0.3rem;
    z-index: -1; }
/** @define Toast */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Toast {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fecf2f;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.75rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1em;
  position: relative; }
  @media screen and (min-width: 40rem) {
    .Toast {
      font-size: 1rem; } }
  @media screen and (min-width: 60rem) {
    .Toast {
      font-size: 1.125rem; } }

.Toast-dismissBtn {
  color: #000;
  display: inline-block;
  font-weight: bold; }
/* TODO: VAMOS MARKET TEST - Remove file once test is over */
/** @define VamosMarketTestPromoModule */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
@media screen and (min-width: 50rem) {
  .VamosMarketTestPromoModule {
    padding: 1rem; } }

.VamosMarketTestPromoModule-container {
  background-image: url(/assets/ac04961005845ed4d4ca1276b5757c89.png);
  background-image: -webkit-image-set(url(/assets/ac04961005845ed4d4ca1276b5757c89.png) 1x, url(/assets/25c08ad4c8eec2f64139b5c489113564.png) 2x, url(/assets/c6579a6904c7de91286ebad0ab1e80fb.png) 3x);
  background-image: image-set("./images/bg-vamos-sm.png" 1x, "./images/bg-vamos-sm@2x.png" 2x, "./images/bg-vamos-sm@3x.png" 3x);
  background-size: cover;
  border-radius: 0.5rem;
  margin: 0 auto;
  max-width: 75rem;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .VamosMarketTestPromoModule-container {
      background-image: url(/assets/03fafade2138cfeac4417035da8a8966.png);
      background-image: -webkit-image-set(url(/assets/03fafade2138cfeac4417035da8a8966.png) 1x, url(/assets/6456c311b8067362329e05e1a861c555.png) 2x, url(/assets/64b10a63faebf35d082e7e4b7effd365.png) 3x);
      background-image: image-set("./images/bg-vamos-lg.png" 1x, "./images/bg-vamos-lg@2x.png" 2x, "./images/bg-vamos-lg@3x.png" 3x); } }

@media screen and (min-width: 60rem) {
  .VamosMarketTestPromoModule-inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly; } }

.VamosMarketTestPromoModule-logos {
  padding-top: 1.875rem; }

.VamosMarketTestPromoModule-childrensHealthLogo {
  margin: auto;
  margin-bottom: 1.875rem;
  width: 8.125rem; }
  @media screen and (min-width: 60rem) {
    .VamosMarketTestPromoModule-childrensHealthLogo {
      width: 11.125rem; } }

.VamosMarketTestPromoModule-vamosLogo {
  margin: auto;
  margin-bottom: 1.875rem;
  width: 12.5rem; }
  @media screen and (min-width: 60rem) {
    .VamosMarketTestPromoModule-vamosLogo {
      width: 18.5rem; } }

.VamosMarketTestPromoModule-activityContainer {
  padding: 1.25rem; }
  @media screen and (min-width: 40rem) {
    .VamosMarketTestPromoModule-activityContainer {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      position: relative; } }
  @media screen and (min-width: 60rem) {
    .VamosMarketTestPromoModule-activityContainer {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 41.25rem; } }

@media screen and (min-width: 40rem) {
  .VamosMarketTestPromoModule-activityContainer > :first-child {
    position: absolute;
    top: 0;
    width: 45% !important; } }

@media screen and (min-width: 60rem) {
  .VamosMarketTestPromoModule-activityContainer > :first-child {
    left: 3.75rem;
    top: unset; } }

@media screen and (min-width: 40rem) {
  .VamosMarketTestPromoModule-activityContainer > :not(:first-child) {
    margin-top: 17.5rem;
    width: 40% !important; } }

@media screen and (min-width: 60rem) {
  .VamosMarketTestPromoModule-activityContainer > :not(:first-child) {
    margin-left: 21.25rem !important;
    margin-top: 0; } }

@media screen and (min-width: 40rem) {
  .VamosMarketTestPromoModule-activityContainer > :nth-child(2) {
    margin-right: 0.625rem; } }

@media screen and (min-width: 60rem) {
  .VamosMarketTestPromoModule-activityContainer > :nth-child(2) {
    margin-right: 0; } }

@media screen and (min-width: 40rem) {
  .VamosMarketTestPromoModule-activityContainer > :nth-child(3) {
    margin-left: 0.625rem; } }

@media screen and (min-width: 60rem) {
  .VamosMarketTestPromoModule-activityContainer > :nth-child(3) {
    margin-bottom: 0 !important; } }
/** @define OverlayCTA */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.OverlayCTA {
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 800; }

.OverlayCTA-target {
  position: fixed;
  z-index: 800; }

.OverlayCTA-banner {
  background: #eb0055 url(/assets/de3df58de3672b5c6f14fd5a686bc8bc.jpg) no-repeat center;
  background-image: -webkit-image-set(url(/assets/de3df58de3672b5c6f14fd5a686bc8bc.jpg) 1x, url(/assets/b708a56d9f706da922d7cf5ca92766ab.jpg) 2x, url(/assets/b68a8eeb3b35a1c90843e3deb0b4ad52.jpg) 3x);
  background-image: image-set("~images/bg-shapes-red-tip.jpg" 1x, "~images/bg-shapes-red-tip_2x.jpg" 2x, "~images/bg-shapes-red-tip_3x.jpg" 3x);
  background-size: cover;
  left: 50%;
  max-width: 60rem;
  position: fixed;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  z-index: 800; }
  @media screen and (min-width: 40rem) {
    .OverlayCTA-banner {
      border-radius: 6px;
      width: calc(100% - 2rem); } }

.OverlayCTA-triangle {
  border-bottom: 1rem solid #fc336f;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  height: 0;
  left: 50%;
  position: absolute;
  top: -1rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0; }

.OverlayCTA-inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .OverlayCTA-inner {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      padding: 1rem; } }

.OverlayCTA-text {
  color: #fff;
  -webkit-box-flex: 2;
      -ms-flex: 2 1 100%;
          flex: 2 1 100%;
  font-size: 0.875rem;
  font-weight: bold;
  margin-bottom: 1rem;
  max-width: 32em;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .OverlayCTA-text {
      font-size: 1rem;
      margin-bottom: 0;
      margin-right: 1rem;
      text-align: left; } }
  @media screen and (min-width: 50rem) {
    .OverlayCTA-text {
      font-size: 1.25rem; } }

.OverlayCTA-btn {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }
/** @define Drawer */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Drawer {
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 700; }

.Drawer-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

/**
 * 1. Used to prevent the animation's spring easing from creating a gap as the
 *    the sidebar slides into view.
 */
.Drawer-innerContainer {
  background-color: #f5f5f5;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -3rem;
  /* 1 */
  max-width: 22rem;
  padding-left: 3rem;
  /* 1 */
  position: relative;
  width: calc(100% - 1rem); }

.Drawer-scrollContainer {
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: auto; }

.Drawer-top,
.Drawer-bottom {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }

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

.Drawer-close {
  font-size: 0.9375rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem; }

.Drawer-navItem {
  color: #333;
  display: block;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  padding: 1rem;
  text-align: left;
  width: 100%; }

.Drawer-navIcon {
  margin-right: 0.5rem;
  opacity: 0.3; }
/** @define Pill */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Pill {
  display: inline-block;
  padding: 0 1rem;
  font-weight: bold;
  border-radius: 100rem; }

/* Modifier: Information colors
   ========================================================================== */
.Pill--info {
  background-color: #5e1cca;
  color: #fff; }

.Pill--infoLight {
  background-color: #ddd;
  color: #000; }

/* Modifier: Alert colors
   ========================================================================== */
.Pill--alert {
  background-color: #fecf2f;
  color: #333; }
/** @define PlusStatus */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PlusStatus {
  text-align: center; }

.PlusStatus::before {
  background: transparent url(/assets/67c6251d062b61f0eecec91858409ebe.svg) repeat-x center top;
  background-size: auto 1rem;
  content: '';
  display: block;
  height: 0;
  padding-top: 1rem;
  width: 100%; }

.PlusStatus-content {
  background-color: #fff;
  padding: 1rem 1rem 0;
  overflow: auto; }

.PlusStatus-plusLogo {
  display: inline-block;
  margin-bottom: 0.5rem;
  max-width: 10rem;
  width: 100%; }

.PlusStatus-text {
  color: #333;
  font-size: 0.875rem;
  margin: 0 0 1rem; }
  @media screen and (min-width: 40rem) {
    .PlusStatus-text {
      font-size: 1rem; } }

.PlusStatus-action {
  background-color: #5e1cca;
  display: block;
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  padding: 1rem;
  width: 100%; }

.PlusStatus-partnerLogo {
  margin: 0 auto;
  max-width: 20rem; }

.PlusStatus-partnerLogoImg {
  margin-bottom: 1rem;
  max-height: 9rem; }
/** @define ResourceCard */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ResourceCard {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 1rem;
  text-align: center; }

.ResourceCard-background {
  background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/2wCEAAEBAQEBAQIBAQIDAgICAwQDAwMDBAUEBAQEBAUGBQUFBQUFBgYGBgYGBgYHBwcHBwcICAgICAkJCQkJCQkJCQkBAQEBAgICBAICBAkGBQYJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCf/AABEIAFgBYAMBIgACEQEDEQH/xACIAAEBAQEBAQAAAAAAAAAAAAAAAwIBBAoQAAIBAgQDBgQGAgMAAAAAAAABAgMREiExURNBkVJhcYGh4SIjMtEEM0JisfCiwVOS8QEAAwEBAQEAAAAAAAAAAAAAAAECAwQIChEAAgIBBAEDBQEBAAAAAAAAAAECESEDEjFBURMi8EJhgZGhcbH/2gAMAwEAAhEDEQA/APnnJ0voxb59TlZ/LaXPLqblKNON2fT42t2ej1v2YlnUjHa7/wBHKjx/LWn6nsiLqPE4xzlLW2dlsVhRVvjz7uXuYKblaRN2clirRtDRb8/Y3GtSaviS7mVJ0/1eLNdrT55HTMxanUxx0StcsAaRjXI0gAChgAAAAAATqyw02zUMOFKLukSlODqWbso/ybwU5Z2XijBSuTcSbKNXyZmLgm4RysZ4dvpk16/yJQbSafxLRl2/AygMQniyatJao2XFpq0MAAYAAABxpSVnoTxOnlPNcn9yoJlHtCoAlaVPOOcdtvAopKSvEIyvDCzoAKGYnTjUVpEbSpKzk0t9UekGU9JN32Joi+JFY8WJbWKxaksUXdMm48NOVPLnbl7CknhxPWWYotp0JPNHasXKm0tTMXPCpQeNPfJlibhJPFTdr6p6DnDNoGuxGrBvDo9mUIy4klhlBNePsYw1l9Ct53/0T6rXV/hhZ6TjjGStJXIRq1MWCUc+n96m+Kl9Sa8vsUtWLHuR3hQ/Tl4NocOS0m/OzOqrTeSkjd09BqMXwFInhqrSS817j53cUA/TQUeeU0vmVMktFzbJR4ld4tFv9vuahQlUlxPxGb25I9ZzQ05TzLCISb5MwhGmsMFY0AdaSSpGiQJ09ZLvKEpKUZcSGe6Jn0xMqCfFp83bxHFpdpf3zD1I+QtFAcTUleLujpYwATlVhHK93ssxOSXIWUJSm28FPXm9jDquTs/gXfr9jcYUWvhSZi9TdiJN3wbjFRjhRx06bzsc4a/S2vMYai0lfxRTXTiP8Dh2+mTXr/JRaZk8VVfpT8H7FCoJdAjE4Ys07NaMQniyas1yNmZQUs9GtGDT5QGgTjN3wTyf8lCoyT4HYAAwAAAATlDPFB2foygFKKfIUYjUTeGStLY2ZlGMlZmLzh9XxLfmiLa5EVBxNNXWZ00TGTrflS8GUONJqz5mKT+HC9Y5EfULsoACxgA4pRbcU81qgsDNSGOOWqzR2EsUVLdGidL8uPgR9QuzbSequY4VLXCigG4J8odEuDTfL+Rwae3q/uVAvTj4FSAALGAAAAAAAAAASnDD8yGTXqUTUkpLRnSdL8qPgQlUsC7KEaLjgwrlddGWPPhUFapFNb6k6jaaYM9Bh04PVJmVTg1eDa8GdwTWkuqB55QDhR/S2vMYKi0l1X/g+atn6fcY5rWHRoXt8CF6q5J+hQnxI8015FC4NdMaAALGZlGM1aRhSlD4Z5rk/uVDV8mRKPaEAStKn9Ga228CkZKSvHMal0ws6AChgAAAAAATcM8UMmOJhyqK3fyKGZOKXxNJd5m41lYFQxRxYbq+xmcG3jjlJHncaN7KaUbp28O8rahqpf5P7mK1HLEq/ZNmuKo5VFh/jqbjKMvpafgS+T2/8jGKFOeJSunk87sfqNctUG6j0TxYXg1IwpRklUg2nudl+IppfA03yORVKMUsfqKcot+QbRvHOOU4+azJ0acXTVrprvZ29H/k/wAjOKnTeKnK99VcTkruVUL/AEtwtpM5w5duXp9jK/EU3v0Ncen39H9i1PT6f9KTQ4b7cvT7HeFvJ9TjrQiryul4M7xI9/8A1Y70/IYKAlBYJuny1RU1jK0UgACgAAAAAAAE6P5aW2XQoSlGcZYqed9URLDsTKglxX2Zf3zHF3jLoPegsxOmovHC9uaTfU2otrFCbs/Bm4yjJXi7krypzwRV081/sxcYrK4JpG7VVzT8rDFUWsV5P2HEfOLQ4sOd14plWvNfPuP8jG3k4tHMTp5TzW/3NKpTbspI2NK8pjAJWlS+jOO23gUjKMleOhcZXhhZ0AFDBOVO7xQdn/dSgE4p8hRNVM8M1Z+jKHGlJWlmTtOH0/EtuZFtciKgzGcZadDRaaeUMAHG7K9rjYHJSjHOTS8TnEp9pdTmN9h/3zOYo9l9Pcyc/DFZriU+0uovT7jOKPZfT3OXj2H0FvfkZu9PuMupRWTkjE2nGyja9le25aMIwjhishJtukK8mcdHdHOJRWso9TGVObjGN087LkbxS5QfoJSff/BWzqq0uUkOLT3GOp2fVDFV7Pr7Fb38TCzkq0Ipyzy7mFTclecnfudjFV1eG7pdfY9Ao+50wWeSapRTvm/FtlADZRS4Kom/zV4MoTneLVRZ218DcZRkrxd0TF5aEjk5KEXJmcc00pq19szUoqUXF8ybjJfHUd8OeSsRNyTtcCZYElCclecmnsuQi5Rngk730ZSn5Q7Kk5SliUIa8+5FCTahUxS0atceo8Aw41Yq6eLudikZKUVJczkpxgrs5TTUEnqSsSpAuaNgA1GSqJQ+atVr3oVrqONaxdztb8qXgzcoqUXF8zGUeUiWjGOotY9GjEfxEZOyi+n2NOUqX15x35oRnRTbi1d6kOTvn9i/J1Tg3bn3poocTT0OnREsE5QzxQdn6MoAlFMKMRnd4ZZPY2ZlGMlaRm8qf1fEt+ZFtciKA4pKSvHNHTRMYAAAYlCMs3k91qZxVIfUsS3WvQqCHDtCozji44o5+BniftfQfMWiX98hersuvsRufxBY4v7X0HEWz6C9XZdfYXq7Lr7BufxCscRbPoOJ+19Bersuo+b3Bb+IaMzkpxcXF59xlVKyVpQbe/8AWU+buharuunuS4yu8/wTJxdRNzlB3fhkupTHU7Pqhhq9pdPcYana9EOMWlWf4BmVSpFXw+vsaUarV3JLyMSjJSg3JvPu2ZccE23fz9AiapttSm7202KAGkYpcDSAAKGDDp027uKuAJxT5CjnCpdkk4NTUZNuL08UAZT04+CWkekknjqXWkefeAOb9yQPkqGr5MA1KMqEIu8UkaAEklwFAADAxUTlCUVzTOwliipLmAR9QuzTSaszzwnBRwz5XWmwBjrzcWmiZOjcXRcvhtf1KgF6ErjY4sAA2KAAACbp54oPCxxMOVRW7+QBjqe1bkTLGUUABsUH3E71uyuvsAS19wF6vZXX2F6vZXX2AFtfkVC9blFdfYXq7Lr7ABtfkKHzdkPm9wAbPuFC1bddPcYavaXT3AD00FGJucFnJtvRJHLV3rfqvsAZbLbVk1k1CnJSxzd9kWANoQUVSKSAAKGAAAH/2Q==) center top no-repeat;
  background-image: -webkit-image-set(url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/2wCEAAEBAQEBAQIBAQIDAgICAwQDAwMDBAUEBAQEBAUGBQUFBQUFBgYGBgYGBgYHBwcHBwcICAgICAkJCQkJCQkJCQkBAQEBAgICBAICBAkGBQYJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCf/AABEIAFgBYAMBIgACEQEDEQH/xACIAAEBAQEBAQAAAAAAAAAAAAAAAwIBBAoQAAIBAgQDBgQGAgMAAAAAAAABAgMREiExURNBkVJhcYGh4SIjMtEEM0JisfCiwVOS8QEAAwEBAQEAAAAAAAAAAAAAAAECAwQIChEAAgIBBAEDBQEBAAAAAAAAAAECESEDEjFBURMi8EJhgZGhcbH/2gAMAwEAAhEDEQA/APnnJ0voxb59TlZ/LaXPLqblKNON2fT42t2ej1v2YlnUjHa7/wBHKjx/LWn6nsiLqPE4xzlLW2dlsVhRVvjz7uXuYKblaRN2clirRtDRb8/Y3GtSaviS7mVJ0/1eLNdrT55HTMxanUxx0StcsAaRjXI0gAChgAAAAAATqyw02zUMOFKLukSlODqWbso/ybwU5Z2XijBSuTcSbKNXyZmLgm4RysZ4dvpk16/yJQbSafxLRl2/AygMQniyatJao2XFpq0MAAYAAABxpSVnoTxOnlPNcn9yoJlHtCoAlaVPOOcdtvAopKSvEIyvDCzoAKGYnTjUVpEbSpKzk0t9UekGU9JN32Joi+JFY8WJbWKxaksUXdMm48NOVPLnbl7CknhxPWWYotp0JPNHasXKm0tTMXPCpQeNPfJlibhJPFTdr6p6DnDNoGuxGrBvDo9mUIy4klhlBNePsYw1l9Ct53/0T6rXV/hhZ6TjjGStJXIRq1MWCUc+n96m+Kl9Sa8vsUtWLHuR3hQ/Tl4NocOS0m/OzOqrTeSkjd09BqMXwFInhqrSS817j53cUA/TQUeeU0vmVMktFzbJR4ld4tFv9vuahQlUlxPxGb25I9ZzQ05TzLCISb5MwhGmsMFY0AdaSSpGiQJ09ZLvKEpKUZcSGe6Jn0xMqCfFp83bxHFpdpf3zD1I+QtFAcTUleLujpYwATlVhHK93ssxOSXIWUJSm28FPXm9jDquTs/gXfr9jcYUWvhSZi9TdiJN3wbjFRjhRx06bzsc4a/S2vMYai0lfxRTXTiP8Dh2+mTXr/JRaZk8VVfpT8H7FCoJdAjE4Ys07NaMQniyas1yNmZQUs9GtGDT5QGgTjN3wTyf8lCoyT4HYAAwAAAATlDPFB2foygFKKfIUYjUTeGStLY2ZlGMlZmLzh9XxLfmiLa5EVBxNNXWZ00TGTrflS8GUONJqz5mKT+HC9Y5EfULsoACxgA4pRbcU81qgsDNSGOOWqzR2EsUVLdGidL8uPgR9QuzbSequY4VLXCigG4J8odEuDTfL+Rwae3q/uVAvTj4FSAALGAAAAAAAAAASnDD8yGTXqUTUkpLRnSdL8qPgQlUsC7KEaLjgwrlddGWPPhUFapFNb6k6jaaYM9Bh04PVJmVTg1eDa8GdwTWkuqB55QDhR/S2vMYKi0l1X/g+atn6fcY5rWHRoXt8CF6q5J+hQnxI8015FC4NdMaAALGZlGM1aRhSlD4Z5rk/uVDV8mRKPaEAStKn9Ga228CkZKSvHMal0ws6AChgAAAAAATcM8UMmOJhyqK3fyKGZOKXxNJd5m41lYFQxRxYbq+xmcG3jjlJHncaN7KaUbp28O8rahqpf5P7mK1HLEq/ZNmuKo5VFh/jqbjKMvpafgS+T2/8jGKFOeJSunk87sfqNctUG6j0TxYXg1IwpRklUg2nudl+IppfA03yORVKMUsfqKcot+QbRvHOOU4+azJ0acXTVrprvZ29H/k/wAjOKnTeKnK99VcTkruVUL/AEtwtpM5w5duXp9jK/EU3v0Ncen39H9i1PT6f9KTQ4b7cvT7HeFvJ9TjrQiryul4M7xI9/8A1Y70/IYKAlBYJuny1RU1jK0UgACgAAAAAAAE6P5aW2XQoSlGcZYqed9URLDsTKglxX2Zf3zHF3jLoPegsxOmovHC9uaTfU2otrFCbs/Bm4yjJXi7krypzwRV081/sxcYrK4JpG7VVzT8rDFUWsV5P2HEfOLQ4sOd14plWvNfPuP8jG3k4tHMTp5TzW/3NKpTbspI2NK8pjAJWlS+jOO23gUjKMleOhcZXhhZ0AFDBOVO7xQdn/dSgE4p8hRNVM8M1Z+jKHGlJWlmTtOH0/EtuZFtciKgzGcZadDRaaeUMAHG7K9rjYHJSjHOTS8TnEp9pdTmN9h/3zOYo9l9Pcyc/DFZriU+0uovT7jOKPZfT3OXj2H0FvfkZu9PuMupRWTkjE2nGyja9le25aMIwjhishJtukK8mcdHdHOJRWso9TGVObjGN087LkbxS5QfoJSff/BWzqq0uUkOLT3GOp2fVDFV7Pr7Fb38TCzkq0Ipyzy7mFTclecnfudjFV1eG7pdfY9Ao+50wWeSapRTvm/FtlADZRS4Kom/zV4MoTneLVRZ218DcZRkrxd0TF5aEjk5KEXJmcc00pq19szUoqUXF8ybjJfHUd8OeSsRNyTtcCZYElCclecmnsuQi5Rngk730ZSn5Q7Kk5SliUIa8+5FCTahUxS0atceo8Aw41Yq6eLudikZKUVJczkpxgrs5TTUEnqSsSpAuaNgA1GSqJQ+atVr3oVrqONaxdztb8qXgzcoqUXF8zGUeUiWjGOotY9GjEfxEZOyi+n2NOUqX15x35oRnRTbi1d6kOTvn9i/J1Tg3bn3poocTT0OnREsE5QzxQdn6MoAlFMKMRnd4ZZPY2ZlGMlaRm8qf1fEt+ZFtciKA4pKSvHNHTRMYAAAYlCMs3k91qZxVIfUsS3WvQqCHDtCozji44o5+BniftfQfMWiX98hersuvsRufxBY4v7X0HEWz6C9XZdfYXq7Lr7BufxCscRbPoOJ+19Bersuo+b3Bb+IaMzkpxcXF59xlVKyVpQbe/8AWU+buharuunuS4yu8/wTJxdRNzlB3fhkupTHU7Pqhhq9pdPcYana9EOMWlWf4BmVSpFXw+vsaUarV3JLyMSjJSg3JvPu2ZccE23fz9AiapttSm7202KAGkYpcDSAAKGDDp027uKuAJxT5CjnCpdkk4NTUZNuL08UAZT04+CWkekknjqXWkefeAOb9yQPkqGr5MA1KMqEIu8UkaAEklwFAADAxUTlCUVzTOwliipLmAR9QuzTSaszzwnBRwz5XWmwBjrzcWmiZOjcXRcvhtf1KgF6ErjY4sAA2KAAACbp54oPCxxMOVRW7+QBjqe1bkTLGUUABsUH3E71uyuvsAS19wF6vZXX2F6vZXX2AFtfkVC9blFdfYXq7Lr7ABtfkKHzdkPm9wAbPuFC1bddPcYavaXT3AD00FGJucFnJtvRJHLV3rfqvsAZbLbVk1k1CnJSxzd9kWANoQUVSKSAAKGAAAH/2Q==) 1x, url(/assets/27b5fbef12d799ebc5b7d794ba58e48c.jpg) 2x, url(/assets/9cdbfdaddb1c673c245f1d2fa9475ccf.jpg) 3x);
  background-image: image-set("./images/bg-shapes-purple-resource-card.jpg" 1x, "./images/bg-shapes-purple-resource-card_2x.jpg" 2x, "./images/bg-shapes-purple-resource-card_3x.jpg" 3x);
  background-size: cover;
  height: 5.5rem; }

/**
 * 1. Legacy sizing used to align individual Champs within avatar space.
 */
.ResourceCard-avatar {
  font-size: 0.75rem;
  /* 1 */
  height: 6.25rem;
  margin: -4rem auto 1rem;
  width: 6.25rem; }

.ResourceCard-title,
.ResourceCard-subTitle {
  margin: 0; }

.ResourceCard-title {
  font-size: 1.25rem; }

.ResourceCard-subTitle {
  color: #555;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400; }

.ResourceCard-action {
  margin: 0.5rem 0; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Pagination {
  margin-bottom: 4rem;
  font-size: 0.875rem;
  text-align: center; }

.Pagination-innerContainer {
  display: inline-block; }

.Pagination-page {
  display: inline-block;
  padding: 0.2rem 0.95rem;
  border-radius: 6px;
  color: #555; }

.Pagination-page--active {
  background-color: #5e1cca;
  color: #fff; }

.Pagination-navItem {
  padding: 0.25rem 0.75rem;
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15); }

.Pagination-navItem:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: translateY(0.25em);
          transform: translateY(0.25em); }

.Pagination-navItemIcon {
  opacity: 0.35; }
/** @define Graduation */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.view-graduation {
  padding-right: 0;
  padding-left: 0;
  background: #000 url(/assets/c675c9d9b44b582df0f1e60bf362bc22.svg) center center no-repeat;
  background-size: cover; }
  .view-graduation .graduation-inner {
    -webkit-transform: scale(1);
            transform: scale(1);
    max-width: 32em; }
  .view-graduation p {
    margin-bottom: 0; }
  .view-graduation .modal-image {
    padding: 2em 0;
    background-color: #5e1cca; }
    .view-graduation .modal-image img {
      display: block;
      height: auto;
      margin: 0 auto;
      max-width: 80%; }
  .view-graduation .modal-header h1 {
    padding: 0 0.5em;
    font-family: "tk", Verdana, sans-serif;
    font-size: 2em; }
  .view-graduation .Modal-buttons {
    margin-top: 1em; }
  .view-graduation .Btn--secondary {
    display: inline-block;
    margin: 0 0.5em;
    font-weight: 900; }
/** @define SpinningRays */
.SpinningRays {
  -webkit-animation: pop-in-simple 0.75s ease-in-out 1 both;
          animation: pop-in-simple 0.75s ease-in-out 1 both;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  bottom: -12em;
  left: -12em;
  overflow: hidden;
  position: absolute;
  right: -12em;
  top: -12em; }

.SpinningRays-image {
  -webkit-animation: rotate 34s linear infinite;
          animation: rotate 34s linear infinite;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: url("https://assets-gnp-ssl.gonoodle.com/image-assets/teacher/progress/progress-starburst-bg.png") center center no-repeat;
  background-size: contain;
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0.2;
  position: absolute;
  right: 0;
  top: 0; }
.GroupAdmin {
  margin: 0 auto;
  max-width: 35rem;
  padding: 0 1rem; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.GroupInfo-details {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25em 0 rgba(0, 0, 0, 0.15);
  padding: 1rem 2rem; }

.GroupInfo-contact {
  color: #777;
  margin-bottom: 0.5rem; }

.GroupInfo-sortBar {
  font-size: 0.8rem;
  padding-top: 2rem; }

.GroupInfo-rowHeadings {
  display: none; }
  @media screen and (min-width: 40rem) {
    .GroupInfo-rowHeadings {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.GroupMember {
  border-bottom: 1px solid #e6e6e6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem 0;
  position: relative; }
  @media screen and (min-width: 20rem) and (max-width: 39.9375rem) {
    .GroupMember {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }

.GroupMember:hover .GroupMember-remove {
  opacity: 1; }

.GroupMember:last-child {
  border-bottom: none; }

.GroupMember-info {
  width: 50%; }

.GroupMember-infoItem {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
  .GroupMember-infoItem:first-child {
    font-weight: bold; }

.GroupMember-lastActivity {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: right;
  width: 50%; }
  @media screen and (min-width: 20rem) and (max-width: 39.9375rem) {
    .GroupMember-lastActivity {
      text-align: left; } }

.GroupMember-remove {
  opacity: 0;
  padding-left: 4rem;
  position: absolute;
  right: -4rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out; }
  @media screen and (min-width: 20rem) and (max-width: 39.9375rem) {
    .GroupMember-remove {
      opacity: 1;
      padding: 0.5rem 0;
      position: relative;
      right: 0;
      top: 0;
      -webkit-transform: translateY(0);
              transform: translateY(0); } }
/** @define Header */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Header,
.Header-inner {
  height: 5.5rem; }
  @media screen and (min-width: 50rem) {
    .Header,
    .Header-inner {
      height: 4.2rem; } }
  @media (min-width: max-height 39.9375rem max-width 49.9375rem orientation landscape) {
    .Header,
    .Header-inner {
      height: 3rem; } }

.Header-inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  -webkit-box-shadow: 0 0.25rem 0.1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25rem 0.1rem rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 400; }
  @media screen and (min-width: 50rem) {
    .Header-inner {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      padding: 0 0.5rem; } }

.Header-branding,
.Header-secondary {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

@media screen and (min-width: 50rem) {
  .Header-secondary {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3; } }

.Header-primary--container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .Header-primary--container {
      -ms-flex-item-align: auto;
          align-self: auto;
      margin-left: 1.5rem;
      margin-right: 1.5rem;
      max-width: 45rem;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; } }

.Header-primary {
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content; }

/* Modifier: User has GoNoodle Plus.
   ========================================================================== */
.Header--hasPlus .Header-inner {
  background-color: #000; }
/** @define HeaderBtn */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.HeaderBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #000;
  font-size: 0.875rem;
  font-family: "tk", Verdana, sans-serif;
  font-weight: 700;
  margin: 0 0.5em;
  padding: 0.5em 0;
  white-space: nowrap; }
  @media screen and (min-width: 40rem) {
    .HeaderBtn {
      font-size: 1.125rem; } }
  @media screen and (min-width: 60rem) {
    .HeaderBtn {
      font-size: 1.25rem; } }

.HeaderBtn:hover {
  color: #5e1cca; }

.HeaderBtn-text {
  line-height: 1; }

/* Modifier: User has GoNoodle Plus.
   ========================================================================== */
.HeaderBtn--hasPlus {
  color: #e1e1e1; }

.HeaderBtn--hasPlus:hover {
  color: #27eb94; }

/* State: Active route.
   ========================================================================== */
.HeaderBtn.is-active {
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABGdBTUEAALGPC/xhBQAAAKZJREFUCB1jjJc9/ZSBgeEoAwNj5cLHJneBbBQQL3tGmYHhfztQ0JoJyOD4//9/KBBfiJc9lYisEsQHiYPkQeoYgQzGRPkzLkB6/v//DNKMjIyX/zP8v8zIwKgLFNMF8p8BbU1c8Mh4NyPMpGSZq0K/Gb9NY/j/PxgoxgLEf4EK1/Fw82ROvaH5FqQOrhjEAYFCmcec7xleqrCJM9ydddbkG0QUQgIATfZDy/RHbIoAAAAASUVORK5CYII=) center bottom repeat-x;
  background-image: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABGdBTUEAALGPC/xhBQAAAKZJREFUCB1jjJc9/ZSBgeEoAwNj5cLHJneBbBQQL3tGmYHhfztQ0JoJyOD4//9/KBBfiJc9lYisEsQHiYPkQeoYgQzGRPkzLkB6/v//DNKMjIyX/zP8v8zIwKgLFNMF8p8BbU1c8Mh4NyPMpGSZq0K/Gb9NY/j/PxgoxgLEf4EK1/Fw82ROvaH5FqQOrhjEAYFCmcec7xleqrCJM9ydddbkG0QUQgIATfZDy/RHbIoAAAAASUVORK5CYII=) 1x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAKCAYAAACwoK7bAAAABGdBTUEAALGPC/xhBQAAAVVJREFUKBVjjJc59YmBkeExAwPjfmYm5qXzHhodZyADJMmfs/z77280A8N/R4b/DLKMcTKn/qOYw8i4kYuNLW3GXf1XKOI4OBnKF8W+/fo1i+H/f39kJUzIHDAbqODbr58nkhRPq2PIoQmA1IDUohsKUgYyeAsjI+M9FD3/GRT//P5/NF72jBuKOBInUfasO0gN0NuKSMLAEGW4D+RvYYQJJsqfMfr373/H////XWFiUHofAxPjKqb/TNdA/H+M/7QY/v0PAzKdoPIwah8LI0v5vMdGZ0ACcINhssAwbweyK2B8YmhGRobeBY9MS4E+h8cXhsEggxJkz2T8+/9vMpDJQsDgv0C3FSx6YjoFXR1m5AFVLHhsMoONmVkP6JL1QFf8RtcEFgOmHkYmNn1shoLUY3UxskFpSmf4f/5lsGH8xyAL1sDI+OQ/E9ORBQ8MPyCroxsbADexb9xnUa7pAAAAAElFTkSuQmCC) 2x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAPCAYAAABqQqYpAAAABGdBTUEAALGPC/xhBQAAAi9JREFUOBHtVE1IVFEUPueONmBGIWpQY/pCbOcMWuBKrCAiJWgRuXJUatmuaNWmRQVGbVoURWlQRAluLEJbtAtmmKZx0aL8ybEfGSSlEJree/d0Lvbkze2+1xi0627ePd/9vnO/e+55F5Ox1FdC/ABAeQFiokJUjt2ej8/BPxonG3OWI+1jEuQhANyFRDHsi6VI3w8RJ6hCnL031z6lr/1t3GdlWtGRQ0TEm5cOURquRYqItswmG9JXHx2niIlTLqb0nOeaymcyoPIYK6FtMF5fE+29MhVf1fA/hmdac5sLX4oPmdgTRjZWQhP0FJaLLwaaX9VpeGio+ErHpFADKokQiBdRwH1AnFaAcRDslUX35UBj5oBxXQMVT/GBddrSesh9NwsIDxDFJVxHedLflE2Q65zju+v14/45Aj5BgSO12yqf+q9IlX5pxT5CkpIE1O3X+OesH+WjXx7Jt2c8vMSEB/Y3pbukA4/5t631MP3LySQgfea2WmTT2znewZsHXy/iskA4MZzfN/l7Lh35FZ/a/bqlaP94xiW1Aihlw2xwQYjI4bv5tjcmUaDzW7OJt1Wboh18dymTsHwMsxGMdAQZUHkCTajFGzPxQrQe97OR6xw6CtvAcLnpb1Zvreq8s9D2KUxn7AmTYNBK73FdOg8SjvITu8XEWcNwlbt+nE9/Iez0fn3ZJjzR6eZ30W/2ykEpIcFNuROB+P2gJZ5/FChyJGqeD7+3vnv8/9+NVOAnkQW/i4AuPNAAAAAASUVORK5CYII=) 3x);
  background-image: image-set("~images/bg-squiggle-purple.png" 1x, "~images/bg-squiggle-purple_2x.png" 2x, "~images/bg-squiggle-purple_3x.png" 3x);
  color: #5e1cca; }

.HeaderBtn--hasPlus.is-active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABGdBTUEAALGPC/xhBQAAAKhJREFUCB1j1Hgz5el/BsajrCwslVcE0u8yoAGdDzOVf//5087I8N+aCSjHwfD/f+if338uqL+dloisFsQHiYPkQeoY////z6j1bqbLv/9/5wMFpRkZGS4DJUBY9/9/Bl0g/xkDI2PidaGs3Ywwk7Q/zhH68+vnNEbG/8FARSxABX+BcusY2Xgyb/DFvwWpgyuGabL8v4rz/fv3KtyCDHfPMqZ/g4mDaAATJETk0JAHbwAAAABJRU5ErkJggg==);
  background-image: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAABGdBTUEAALGPC/xhBQAAAKhJREFUCB1j1Hgz5el/BsajrCwslVcE0u8yoAGdDzOVf//5087I8N+aCSjHwfD/f+if338uqL+dloisFsQHiYPkQeoY////z6j1bqbLv/9/5wMFpRkZGS4DJUBY9/9/Bl0g/xkDI2PidaGs3Ywwk7Q/zhH68+vnNEbG/8FARSxABX+BcusY2Xgyb/DFvwWpgyuGabL8v4rz/fv3KtyCDHfPMqZ/g4mDaAATJETk0JAHbwAAAABJRU5ErkJggg==) 1x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAKCAYAAACwoK7bAAAABGdBTUEAALGPC/xhBQAAAVVJREFUKBVj1Hgz9RMDw//HDAwM+xkYWZbeEM44DmSTDDTezrBk+P8nGqjRkYGBUZZR/fWU/yimMDJuZGdnSrvEm/kKRRwHR+/zdLGfP//NYvj/3x9ZCRMyB8wGKvj54+8J9dfT1DHk0ARAakBq0Q0FKWNiZGDYAnT6PTQ9ioyM/45qvJ3qhiYO52q8ne4OUgMUUIQLQhj3QWYCMQRofphp9P/P747//xlcYWJgmpFhH+N/xlVMzIzXQPx/f/9r/Wf8H8bwn8EJXR3Df5bym6IZZ0DicINhioCR2f7///8KGJ8YmpGJsfe6UFYpIyMjPL4wDAYZBAy7DKA3JwNdz4LXYEbGv0ADCm6IZE9BV4cZeUAVN0WzZrAwMOoxMjKsB7riN7omsBgw9TAz/tfHZihIPVYXIxtk/G4m/zeGvzb//jLIgjUwMz7hYOQ4ckEw8QOyOrqxAcO9b2jrvlbTAAAAAElFTkSuQmCC) 2x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAPCAYAAABqQqYpAAAABGdBTUEAALGPC/xhBQAAAjdJREFUOBHtVEtoE1EUvedNagK2ok2CoiJ0YwLV0IKLrsQPFD9FcOFnpYgotQvRRemqGxdV0I3QDyoICrqwgi60SOuiO0EQcfxVkSr+ScZGoi1tTOZ6X+nQzjiTTgV3Pgj3vXPPue/MezcPaaunwEQfQfyeoAYXGVW3zKVH3tI/Gpnvl+qK5V+7ie1mJqwB0Wqkct3iwT0ADEYU2p/VtpnuzN+v1o31Zko2n2XmZm8VXxPTJJANxvn1iWR7P/aWvcKw6z18wzCt7DkCHScm5afzBaeJImDik0+t7O0MX13sJ54P0zqtF96JIAO6RrCJmR3krlqK3wrDjT8uJ2egUEHztU7r5xMoQHVJD1wD4U0QmZk2TExOPKi3+rYEcebimqf5WjcXd88xCtB1+Z2W5pwd9fmehnKJO8T9/lnUPROzd1nhSrS2esDEgXEnq49+auznDth8UK5xp4N7o3zwTWKcGUm2PXJyLhMOmM71bWKy+4k44WB/RGlcInwB01cGL5f8ykr3LpvnAWPfy3jrkLeWrwlNShcuruWp4j2Z1nlFC14DHyIwtj2Pt77w0wY25siSo6+jMaNJ/loP/YRhMbm+x8SxpiADuk6gCZ00a45lq+NVm+Uou6WBShoLPYAyFC4YCdr4Knn4cyVd4HV4RalcbwrgTsF3yatX4807ayk4Ls/xnYgyTlX6eoevY2gTjmg7D0Tf5Ue3sk0NstkqweX9gCVN/AlKPVmxLHZ/GIcmHf7/uJAT+A01Kr40yet2PwAAAABJRU5ErkJggg==) 3x);
  background-image: image-set("~images/bg-squiggle-green.png" 1x, "~images/bg-squiggle-green_2x.png" 2x, "~images/bg-squiggle-green_3x.png" 3x);
  color: #27eb94; }
/** @define HeaderIcon */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.HeaderIcon {
  height: 2.75rem;
  padding: 0.375rem;
  width: 2.75rem; }
  @media screen and (min-width: 50rem) {
    .HeaderIcon {
      height: 3.25rem;
      width: 3.25rem; } }

/**
 * 1. Override default `Icon` position. Likely should be removed from `Icon`.
 */
.HeaderIcon-art {
  height: 100%;
  top: 0;
  /* 1 */
  width: 100%; }

.HeaderIcon-art:not(:first-child) {
  display: none; }

/* State: Hover.
   ========================================================================== */
.no-touchevents .HeaderIcon:hover .HeaderIcon-art:first-child {
  display: none; }

.no-touchevents .HeaderIcon:hover .HeaderIcon-art:first-child + .HeaderIcon-art {
  display: block; }

/* State: Active route.
   ========================================================================== */
.HeaderIcon.is-active .HeaderIcon-art:first-child {
  display: none; }

.HeaderIcon.is-active .HeaderIcon-art:first-child + .HeaderIcon-art {
  display: block; }
/** @define HeaderLogo */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.HeaderLogo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%; }

.HeaderLogo-button {
  position: relative; }

/**
 * 1. Override default `Icon` position. Likely should be removed from `Icon`.
 */
.HeaderLogo-icon {
  height: 2.75rem;
  top: 0;
  /* 1 */
  width: 2.75rem; }

.HeaderLogo-icon:not(:first-child) {
  display: none; }

.HeaderLogo-badge {
  background-color: #fecf2f;
  border-radius: 100rem;
  height: 0.5rem;
  position: absolute;
  right: 0.15rem;
  top: 0.15rem;
  width: 0.5rem; }

.HeaderLogo-art {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-left: 0.25rem;
  width: 7.5rem; }

.HeaderLogo-artInner {
  width: 100%; }

/* Modifier: User has GoNoodle Plus.
   ========================================================================== */
.HeaderLogo--hasPlus .HeaderLogo-art {
  width: 10rem; }

/* State: Hover.
   ========================================================================== */
.no-touchevents .HeaderLogo:hover .HeaderLogo-icon:first-child {
  display: none; }

.no-touchevents .HeaderLogo:hover .HeaderLogo-icon:first-child + .HeaderLogo-icon {
  display: block; }

/* State: Active route.
   ========================================================================== */
.HeaderLogo.is-active .HeaderLogo-icon:first-child {
  display: none; }

.HeaderLogo.is-active .HeaderLogo-icon:first-child + .HeaderLogo-icon {
  display: block; }
/** @define LearningExtensionDetail */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.LearningExtensionDetail {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  position: relative; }

.LearningExtensionDetail-close {
  left: 1rem;
  position: absolute;
  top: 1rem; }

.LearningExtensionDetail-top {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding-top: 5.75rem;
  position: relative; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionDetail-top {
      padding-top: 5rem; } }
  @media screen and (min-width: 60rem) {
    .LearningExtensionDetail-top {
      height: 80%;
      min-height: 57rem; } }

.LearningExtensionDetail-topInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 0 auto;
  max-width: 100rem; }

.LearningExtensionDetail-imgWrap {
  display: none; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionDetail-imgWrap {
      display: block;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
      padding: 0 1rem 1rem;
      position: relative;
      text-align: right; } }

.LearningExtensionDetail-imgWrap--mobile {
  display: block;
  padding-bottom: 1rem; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionDetail-imgWrap--mobile {
      display: none; } }

.LearningExtensionDetail-img {
  background-color: #fff;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  display: inline-block; }
  @media screen and (min-width: 60rem) {
    .LearningExtensionDetail-img {
      position: relative;
      z-index: 100; } }

.LearningExtensionDetail-info {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  padding: 0 1rem 2rem; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionDetail-info {
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%; } }
  @media screen and (min-width: 60rem) {
    .LearningExtensionDetail-info {
      -ms-flex-preferred-size: 35%;
          flex-basis: 35%; } }

.LearningExtensionDetail-title,
.LearningExtensionDetail-subject {
  background-color: #000;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  color: #fff;
  display: inline;
  line-height: 1.6;
  margin: 0;
  padding: 0.5rem; }

.LearningExtensionDetail-title {
  font-size: 2rem; }

.LearningExtensionDetail-subject {
  font-size: 1.25rem; }

.LearningExtensionDetail-description {
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.25rem;
  padding: 1rem 0; }
  @media screen and (min-width: 40rem) {
    .LearningExtensionDetail-description {
      padding: 1rem 0 2rem 0; } }

.LearningExtensionDetail-btn {
  text-align: center;
  width: 100%; }

.LearningExtensionDetail-bottom {
  background-color: #f5f5f5; }
  @media screen and (min-width: 60rem) {
    .LearningExtensionDetail-bottom {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0; } }

.LearningExtensionDetail-activity {
  padding: 1rem; }
  @media screen and (min-width: 60rem) {
    .LearningExtensionDetail-activity {
      margin-left: calc(50% + 1rem);
      padding-right: 0;
      padding-left: 0;
      width: 30%; } }
/** @define ActivityPreview */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ActivityPreview {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media screen and (min-width: 60rem) {
    .ActivityPreview {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }

.ActivityPreview-header {
  font-weight: bold;
  padding-bottom: 0.5rem; }

.ActivityPreview-img {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  margin-right: 1rem;
  max-width: 10rem; }

.ActivityPreview-title {
  font-size: 1.25rem;
  margin: 0;
  padding-bottom: 0.25rem;
  padding-top: 1rem; }

.ActivityPreview-time {
  color: #555; }
/** @define LevelUp */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
/**
 * 1. Ideally we avoid fixed positioning. Can we render this in the overlays region?
 */
.LevelUp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.LevelUp-content {
  -ms-flex-line-pack: center;
      align-content: center;
  background: #000 url(/assets/c675c9d9b44b582df0f1e60bf362bc22.svg) center center no-repeat;
  background-size: cover;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
  padding: 1rem;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 200; }
  @media only screen and (min-width: 40rem) {
    .LevelUp-content {
      padding: 2rem; } }

@media screen and (min-width: 50rem) {
  .LevelUp-content::before {
    background: url(/assets/bb7528ee368f651fcaeaa9113ab55729.svg) no-repeat 0 0;
    background-size: contain;
    content: '';
    height: 24.6vh;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: rotate3d(1, 1, 0, 180deg);
            transform: rotate3d(1, 1, 0, 180deg);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    width: 60vh; } }

@media screen and (min-width: 50rem) {
  .LevelUp-content::after {
    background: url(/assets/2d85fd5e77b73d71dc8d1fb404f58ac2.svg) no-repeat 0 bottom;
    background-size: contain;
    bottom: 0;
    content: '';
    height: 22.8vh;
    position: absolute;
    left: 100%;
    -webkit-transform: rotateZ(-90deg);
            transform: rotateZ(-90deg);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    width: 60vh; } }

.LevelUp-inner {
  margin-top: auto;
  margin-bottom: auto;
  text-align: center; }

.LevelUp-btn {
  position: relative; }

.LevelUp-heading {
  color: #fff;
  font-size: 1rem;
  margin: 0; }
  @media screen and (min-width: 40rem) {
    .LevelUp-heading {
      font-size: 1.5rem; } }
  @media screen and (min-width: 50rem) {
    .LevelUp-heading {
      font-size: 2rem; } }
  .LevelUp-heading > span {
    -webkit-animation: letter-bounce 1.2s ease-in-out infinite;
            animation: letter-bounce 1.2s ease-in-out infinite;
    display: inline-block; }
    .LevelUp-heading > span:nth-of-type(2n) {
      -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s; }
    .LevelUp-heading > span:nth-of-type(3n) {
      -webkit-animation-delay: 0.35s;
              animation-delay: 0.35s; }
    .LevelUp-heading > span:nth-of-type(4n) {
      -webkit-animation-delay: 0.05s;
              animation-delay: 0.05s; }
    .LevelUp-heading > span:nth-of-type(5n) {
      -webkit-animation-delay: 0.55s;
              animation-delay: 0.55s; }
    .LevelUp-heading > span:nth-of-type(6n) {
      -webkit-animation-delay: 0.22s;
              animation-delay: 0.22s; }
    .LevelUp-heading > span:nth-of-type(7n) {
      -webkit-animation-delay: 0.75s;
              animation-delay: 0.75s; }

.LevelUp-video {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden;
  position: relative;
  z-index: 100; }

.LevelUp-arrow {
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  font-size: 0.5rem;
  height: 32em;
  position: relative; }
  @media only screen and (min-width: 40rem) {
    .LevelUp-arrow {
      font-size: 1rem; } }

.LevelUp-goalWrapper {
  -webkit-animation: zoom-in 0.5s ease-in-out 1 0.33s both;
          animation: zoom-in 0.5s ease-in-out 1 0.33s both;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.LevelUp-goal {
  background: #5e1cca;
  border-radius: 100rem;
  border: 0.375rem solid #5e1cca;
  color: #fff;
  font-size: 4em;
  height: 5em;
  left: 50%;
  position: absolute;
  right: -0.5em;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 5em;
  z-index: 10; }

.LevelUp-goal::before {
  content: '\E001';
  font-family: 'gn-icons';
  font-size: 2em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  left: 50%;
  line-height: 1;
  position: absolute;
  speak: none;
  text-transform: none;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.LevelUp-goal::after {
  border-radius: 100rem;
  -webkit-box-shadow: inset 0 0.625em 0 rgba(255, 255, 255, 0.15);
          box-shadow: inset 0 0.625em 0 rgba(255, 255, 255, 0.15);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }
/** @define Transmogrifier */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Transmogrifier {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.Transmogrifier-video,
.Transmogrifier .jwplayer {
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

@media only screen and (min-width: 50rem) and (min-aspect-ratio: 1 / 1) {
  .Transmogrifier-video,
  .Transmogrifier .jwplayer {
    bottom: 0;
    top: auto;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); } }

@media only screen and (min-width: 50rem) and (min-aspect-ratio: 16 / 9) {
  .Transmogrifier-video,
  .Transmogrifier .jwplayer {
    height: auto; } }

@media only screen and (min-width: 50rem) and (max-aspect-ratio: 16 / 9) {
  .Transmogrifier-video,
  .Transmogrifier .jwplayer {
    width: auto; } }
/** TODO: PLAYLIST PAGE - remove when test is complete */
/** @define Playlist */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Playlist {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%; }

.Playlist-header {
  background-color: #5e1cca;
  height: 20rem;
  position: relative;
  width: 100%;
  z-index: 100; }

.Playlist-close {
  left: 1rem;
  position: absolute;
  top: 1rem; }

.Playlist-headerText {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 1rem;
  text-align: center; }

.Playlist-heading {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 1.5rem; }

.Playlist-subheading {
  font-family: "csr", Verdana, sans-serif;
  font-size: 1.25rem;
  font-weight: normal;
  margin: 0; }

.Playlist-share {
  font-size: 1.5rem;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem; }

.Playlist-activities {
  margin: 0 auto;
  max-width: 75rem;
  padding: 1rem 0.675rem; }
/** @define PlaylistActivity */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PlaylistActivity-description {
  color: #000;
  display: none;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .PlaylistActivity-description {
      display: block;
      font-size: 0.8rem;
      padding: 0 0.5rem 1rem; } }
  @media screen and (min-width: 50rem) {
    .PlaylistActivity-description {
      font-size: 1rem;
      padding: 0 2rem 1rem; } }
/** @define PlusHub */
.PlusHub {
  margin: 0 auto;
  max-width: 90rem;
  padding: 0.675rem 2rem; }
/** @define ActivityGuides */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
@media screen and (min-width: 40rem) {
  .ActivityGuides-main {
    min-height: 40rem; } }
/** @define EmptyView */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.EmptyView {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  padding: 15rem 1rem;
  text-align: center;
  width: 100%; }

.EmptyView-title {
  color: #555;
  font-size: 1.5rem;
  margin: 0;
  padding-bottom: 1.5rem; }

.EmptyView-text {
  color: #555;
  margin: 0; }
/** @define LearningExtensions */
.LearningExtensions-main {
  min-height: 40rem; }
/** @define GradeFilter */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.GradeFilter {
  padding: 0.5rem 1rem; }
  @media screen and (min-width: 50rem) {
    .GradeFilter {
      padding: 0 0 1rem 0; } }

.GradeFilter-select {
  background-color: transparent;
  border-radius: 0;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #000;
  display: inline-block;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  width: auto; }
  .GradeFilter-select:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
    outline: auto; }
/** @define EmptyView */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.EmptyView {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  padding: 15rem 1rem;
  text-align: center;
  width: 100%; }

.EmptyView-title {
  color: #555;
  font-size: 1.5rem;
  margin: 0;
  padding-bottom: 1.5rem; }

.EmptyView-text {
  color: #555;
  margin: 0; }
/** @define LearningExtensionItem */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.LearningExtensionItem {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 auto 1rem auto;
  max-width: 21.88rem;
  width: 100%; }

.LearningExtensionItem-top {
  background-color: #5e1cca;
  background-image: url(/assets/1ad847091f6723de2351c3281c7134ad.jpg);
  background-image: -webkit-image-set(url(/assets/1ad847091f6723de2351c3281c7134ad.jpg) 1x, url(/assets/2da5a1f67015f16d3813e51e7ea0f300.jpg) 2x, url(/assets/601d88a140ebe2ac665d81ae1e985fa2.jpg) 3x);
  background-image: image-set("./images/bg-shapes-purple-le-item.jpg" 1x, "./images/bg-shapes-purple-le-item_2x.jpg" 2x, "./images/bg-shapes-purple-le-item_3x.jpg" 3x);
  background-position: center center;
  background-size: 100% auto;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding: 1.5rem 1.5rem 0 1.5rem; }

.LearningExtensionItem-thumbnail {
  height: 0;
  overflow: hidden;
  padding-top: 73%;
  position: relative;
  width: 100%; }

.LearningExtensionItem-image {
  background-color: #fff;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0; }

.LearningExtensionItem-bottom {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 8.875rem;
          flex: 0 0 8.875rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 1.5rem; }

.LearningExtensionItem-title {
  color: #000;
  font-family: "tk", Verdana, sans-serif;
  line-height: 1.25rem;
  padding-bottom: 0.5rem;
  width: 100%; }

.LearningExtensionItem-categories {
  color: #555;
  font-family: "tk", Verdana, sans-serif;
  font-size: 0.9rem;
  line-height: 1.25rem;
  width: 100%; }
/** @define QuestionSets */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.QuestionSets-main {
  min-height: 40rem; }

.QuestionSets-gradeFilterDesktop {
  display: none; }
  @media screen and (min-width: 50rem) {
    .QuestionSets-gradeFilterDesktop {
      display: block; } }

.QuestionSets-gradeFilterMobile {
  display: block; }
  @media screen and (min-width: 50rem) {
    .QuestionSets-gradeFilterMobile {
      display: none; } }
/** @define EmptyView */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.EmptyView {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  padding: 15rem 1rem;
  text-align: center;
  width: 100%; }

.EmptyView-title {
  color: #555;
  font-size: 1.5rem;
  margin: 0;
  padding-bottom: 1.5rem; }

.EmptyView-text {
  color: #555;
  margin: 0; }
/** @define QuestionSetItem */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.QuestionSetItem {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto 1rem auto;
  min-height: 15rem;
  overflow: hidden;
  padding: 2rem 4rem;
  position: relative;
  text-align: center;
  width: 100%; }

.QuestionSetItem-name {
  background-color: #1a6ef9;
  color: #fff;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.25rem;
  margin-bottom: 2rem;
  overflow: hidden;
  padding: 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; }

.QuestionSetItem-categories {
  color: #000;
  font-family: "tk", Verdana, sans-serif;
  font-size: 0.9rem;
  height: 2.625rem;
  margin-bottom: 2rem;
  width: 100%; }

.QuestionSetItem-count {
  color: #555;
  font-family: "tk", Verdana, sans-serif; }
/** @define UserQuestionSetsNav **/
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.UserQuestionSetsNav {
  margin-bottom: 1rem;
  padding: 0 1rem 1rem; }

.UserQuestionSetsNav-title {
  color: #000;
  font-size: 1.17em;
  line-height: 1.4;
  margin: 0;
  padding: 1rem 0; }

.UserQuestionSetsNav-saved {
  color: #000;
  display: block;
  margin: 1rem 0 2rem 1rem; }

.UserQuestionSetsNav-saved.is-active {
  background-color: #5e1cca;
  border-radius: 10rem;
  color: #fff;
  margin: 0.75rem 0 1.75rem 0.25rem;
  padding: 0.25rem 0 0.25rem 0.75rem; }
/** @define SubNav */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SubNav {
  margin: 1rem 0;
  position: relative;
  z-index: 100; }
  @media screen and (min-width: 50rem) {
    .SubNav {
      margin: 0; } }

.SubNav-dropDown,
.SubNav-item {
  padding: 0.75rem 1rem; }
  @media screen and (min-width: 50rem) {
    .SubNav-dropDown,
    .SubNav-item {
      padding: 0.25rem 0.5rem; } }

.SubNav-dropDown {
  background-color: #5e1cca;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25rem 0.1rem rgba(0, 0, 0, 0.15);
  color: #fff;
  cursor: pointer;
  display: block;
  font-family: "tk", Verdana, sans-serif;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  position: relative;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .SubNav-dropDown {
      cursor: default;
      display: none;
      padding-bottom: 0.75rem;
      padding-top: 0.75rem; } }

@media screen and (min-width: 50rem) {
  .SubNav-dropDownTitle,
  .SubNav-dropDownIcon {
    display: none; } }

.SubNav-bar {
  background-color: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  display: none;
  font-family: "tk", Verdana, sans-serif;
  list-style: none;
  margin: 0 0 2rem 0;
  padding: 0;
  position: absolute;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .SubNav-bar {
      background-color: transparent;
      border-radius: 0;
      -webkit-box-shadow: none;
              box-shadow: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative; }
      .SubNav-bar::after {
        background: #ddd;
        bottom: 0;
        content: '';
        height: 6px;
        left: 0;
        position: absolute;
        width: 100%; } }

@media (max-width: 49.9375rem) and (orientation: landscape) {
  .SubNav-itemWrap {
    width: 50%; } }

@media screen and (min-width: 50rem) {
  .SubNav-itemWrap:first-child .SubNav-item {
    padding-left: 0; } }

.SubNav-item {
  border-top: 1px solid #eee;
  color: #5e1cca;
  display: block;
  font-family: "tk", Verdana, sans-serif;
  text-align: center; }
  @media (max-width: 49.9375rem) and (orientation: landscape) {
    .SubNav-item {
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      padding-bottom: 1.5rem;
      padding-top: 1.5rem; }
      .SubNav-item:nth-child(3n) {
        border-right: none; }
      .SubNav-item:nth-child(n + 4) {
        border-top: none; } }
  @media screen and (min-width: 50rem) {
    .SubNav-item {
      border-bottom: 6px solid #ddd;
      border-top: none;
      color: #555;
      font-size: 1rem;
      padding: 1rem 2rem;
      position: relative;
      text-align: left;
      z-index: 100; }
      .SubNav-item:hover {
        border-bottom-color: #bbb;
        color: #222; } }
  @media screen and (min-width: 60rem) {
    .SubNav-item {
      font-size: 1.25rem; } }

/* ==========================================================================
   States
   ========================================================================== */
.SubNav.is-open .SubNav-dropDown {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none; }

.SubNav.is-open .SubNav-bar {
  display: block; }
  @media (max-width: 50rem) and (orientation: landscape) {
    .SubNav.is-open .SubNav-bar {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }
  @media screen and (min-width: 50rem) {
    .SubNav.is-open .SubNav-bar {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

@media screen and (min-width: 50rem) {
  .SubNav-item.is-active,
  .SubNav-item.is-active:hover {
    border-bottom-color: #5e1cca;
    color: #5e1cca; } }
/** @define PointsEarned */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PointsEarned {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.PointsEarned-content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
/** @define QuestionSetDetail */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.QuestionSetDetail {
  background-color: #f5f5f5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.QuestionSetDetail-inner {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: 0 auto;
  max-width: 70rem;
  padding: 2rem 1rem;
  position: relative;
  width: 100%; }

.QuestionSetDetail-title {
  color: #000;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.05em;
  margin: 0;
  padding-bottom: 1rem;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .QuestionSetDetail-title {
      font-size: 2rem; } }

.QuestionSetDetail-subTitle {
  color: #777;
  font-size: 1rem;
  margin: 0 auto 2rem auto;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .QuestionSetDetail-subTitle {
      font-size: 1.25rem; } }

.QuestionSetDetail-buttons,
.QuestionSetDetail-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.QuestionSetDetail-btn {
  margin-bottom: 1rem;
  margin-right: 1rem;
  width: 50%; }
  .QuestionSetDetail-btn:last-child {
    margin-right: 0; }
  @media screen and (min-width: 40rem) {
    .QuestionSetDetail-btn {
      width: 40%; } }
  @media screen and (min-width: 60rem) {
    .QuestionSetDetail-btn {
      min-width: 12.5rem;
      width: 20%; } }

.QuestionSetDetail-link {
  font-weight: bold;
  margin-bottom: 1rem;
  margin-right: 2rem; }
  .QuestionSetDetail-link:last-child {
    margin-right: 0; }

.QuestionSetDetail-addBtn {
  border-bottom: 0.0625rem solid #e1e1e1;
  padding: 1rem 1rem 0;
  width: 100%; }
/** @define QuestionModal */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.QuestionModal .bbm-modal {
  max-width: 55rem;
  padding: 0; }

.QuestionModal .Modal-buttons {
  margin: 0 1rem 1rem; }

.QuestionModal-body {
  position: relative;
  padding: 1rem 1rem 2rem; }
  @media screen and (min-width: 40rem) {
    .QuestionModal-body {
      padding: 2rem; } }

.QuestionModal-dropOverlay {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  background-color: rgba(39, 235, 148, 0.9);
  height: 100%;
  left: 0;
  opacity: 0;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
  width: 100%;
  z-index: 100; }

.QuestionModal-dropBody {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #27eb94;
  border: 0.1875rem dashed #333;
  border-radius: 6px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 15rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 50%;
  max-width: 35rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80%;
  z-index: 100; }

.QuestionModal-dropIcon {
  font-size: 7rem;
  line-height: 1; }

.QuestionModal-dropPrompt {
  color: #333;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1rem; }
  @media screen and (min-width: 50rem) {
    .QuestionModal-dropPrompt {
      font-size: 2rem; } }

/**
 * 1. Remove global negative top positioning. We should remove this eventually.
 */
.QuestionModal-dropIcon > .Icon {
  top: 0;
  /* 1 */ }

/* State: Hover upload over the form
   ========================================================================== */
.QuestionModal-body.dz-drag-hover .QuestionModal-dropOverlay {
  opacity: 1; }
/** @define ProgressIndicator */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ProgressIndicator {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.ProgressIndicator-title {
  color: #333; }

.ProgressIndicator-bar {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border: 0.25rem solid #000;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
  width: 20rem; }

.ProgressIndicator-meter {
  background-color: #27eb94;
  -webkit-transition: width 600ms ease;
  transition: width 600ms ease; }

.ProgressIndicator-actionBtn {
  opacity: 0;
  -webkit-transition: opacity 600ms ease-in-out;
  transition: opacity 600ms ease-in-out; }

/* Modifier: Overlayed content.
   ========================================================================== */
.ProgressIndicator--overlay {
  border-radius: 6px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

/* State: Action is available.
   ========================================================================== */
.ProgressIndicator.is-withAction .ProgressIndicator-actionBtn {
  opacity: 1; }
/** @define QuestionForm */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.QuestionForm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.QuestionForm-errors {
  width: 100%; }

.QuestionForm-image {
  margin-bottom: 1rem;
  text-align: center;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .QuestionForm-image {
      margin-right: 1rem;
      width: 17.1875rem; } }

.QuestionForm-body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
/** @define InputGroup */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.InputGroup {
  margin-bottom: 1em;
  position: relative; }

.InputGroup-control {
  padding-left: 6.5em; }

.InputGroup-btn {
  background-color: #6e6e6e;
  bottom: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  left: 0;
  margin-bottom: 0;
  padding: 0;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  width: 8em; }

.InputGroup-control:focus ~ .InputGroup-btn {
  background-color: #5e1cca; }

/* State: Correct answer designation.
   ========================================================================== */
.InputGroup.is-correct .InputGroup-control,
.InputGroup.is-correct .InputGroup-control:focus {
  border-color: #27eb94; }

.InputGroup.is-correct .InputGroup-control ~ .InputGroup-btn {
  background-color: #27eb94;
  color: #333; }

/* State: Input group with error.
   ========================================================================== */
.InputGroup .InputGroup-control.parsley-error,
.InputGroup .InputGroup-control.parsley-error:focus {
  border-color: #eb0055; }

.InputGroup .InputGroup-control.parsley-error ~ .InputGroup-btn {
  background-color: #eb0055;
  color: #fff; }
/** @define CharacterCount */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.CharacterCount {
  background: #5e1cca;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  left: 50%;
  padding: 0.25em 0.5em;
  position: absolute;
  top: -3em;
  z-index: 1; }
  @media screen and (max-width: 599px) {
    .CharacterCount {
      margin-left: -30px; } }
  @media screen and (min-width: 600px) {
    .CharacterCount {
      left: calc(100% + 1em);
      margin-top: -16px;
      top: 50%; } }

.CharacterCount::before {
  height: 0;
  width: 0;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  border-top: 0.5em solid #5e1cca;
  bottom: -0.375em;
  content: '';
  display: block;
  left: 50%;
  margin-left: -0.5em;
  position: absolute; }
  @media screen and (min-width: 600px) {
    .CharacterCount::before {
      height: 0;
      width: 0;
      border-bottom: 0.5em solid transparent;
      border-right: 0.5em solid #5e1cca;
      border-top: 0.5em solid transparent;
      left: -0.375em;
      margin-top: -0.5em;
      top: 50%; } }

/* State: Close to character limit.
   ========================================================================== */
.CharacterCount.is-close {
  background-color: #a50e90; }
  @media screen and (max-width: 599px) {
    .CharacterCount.is-close::before {
      border-top-color: #a50e90; } }
  @media screen and (min-width: 600px) {
    .CharacterCount.is-close::before {
      border-right-color: #a50e90; } }

/* State: Over character limit.
   ========================================================================== */
.CharacterCount.is-over {
  background-color: #eb0055; }
  @media screen and (max-width: 599px) {
    .CharacterCount.is-over::before {
      border-top-color: #eb0055; } }
  @media screen and (min-width: 600px) {
    .CharacterCount.is-over::before {
      border-right-color: #eb0055; } }
/** @define ImageInput */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ImageInput {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.ImageInput-imageBtn {
  border: 0.25rem solid #ccc;
  border-radius: 6px;
  margin-bottom: 1rem;
  padding: 1rem;
  overflow: hidden;
  text-align: center; }
  @media screen and (min-width: 50rem) {
    .ImageInput-imageBtn {
      height: 17.1875rem;
      width: 100%; } }

.ImageInput-imageBtnInner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media screen and (min-width: 50rem) {
    .ImageInput-imageBtnInner {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; } }

.ImageInput-imageIcon {
  font-size: 4rem;
  line-height: 1;
  margin-right: 1rem;
  -webkit-transition: -webkit-transform 200ms ease-in;
  transition: -webkit-transform 200ms ease-in;
  transition: transform 200ms ease-in;
  transition: transform 200ms ease-in, -webkit-transform 200ms ease-in; }
  @media screen and (min-width: 50rem) {
    .ImageInput-imageIcon {
      font-size: 7rem;
      margin-right: 0; } }

/**
 * 1. Remove global negative top positioning. We should remove this eventually.
 */
.ImageInput-imageIcon > .Icon {
  top: 0;
  /* 1 */ }

.ImageInput-imageNote {
  color: #333;
  font-family: "csr", Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 0;
  text-align: center; }

.ImageInput-imageBtn:hover .ImageInput-imageIcon {
  -webkit-transform: scale(1.1);
          transform: scale(1.1); }

.ImageInput-imageRemove {
  display: none; }

.ImageInput-imagePrompt {
  color: #555;
  font-size: 1.125rem;
  text-align: left; }
  @media screen and (min-width: 50rem) {
    .ImageInput-imagePrompt {
      text-align: center; } }

/* State: With image attached.
   ========================================================================== */
.ImageInput.is-withImage .ImageInput-imageBtn {
  max-width: 17.1875rem;
  padding: 0;
  width: 100%; }

.ImageInput.is-withImage .ImageInput-imageIcon,
.ImageInput.is-withImage .ImageInput-imagePrompt,
.ImageInput.is-withImage .ImageInput-imageNote {
  display: none; }

.ImageInput.is-withImage .ImageInput-imageRemove {
  display: inline-block; }
/** @define ImagePreview */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ImagePreview {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 100%;
  position: relative;
  vertical-align: top;
  width: 100%; }

.ImagePreview-img {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.ImagePreview-error {
  background-color: #eb0055;
  border-radius: 6px;
  color: #fff;
  display: none;
  font-weight: 700;
  max-width: 12rem;
  padding: 0.5rem; }

/* State: With error.
   ========================================================================== */
.ImagePreview.dz-error .ImagePreview-error {
  display: block; }
/** @define Question */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Question {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  border-bottom: 0.0625rem solid #e1e1e1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1rem;
  width: 100%; }
  .Question:last-child {
    border-bottom: none; }

.Question-thumbnail {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding-right: 1rem; }

.Question-image {
  border-radius: 6px;
  display: block; }

.Question-title {
  font-size: 1.1rem;
  margin: 0;
  padding-bottom: 0.25rem; }

.Question-count {
  font-size: 1rem;
  margin: 0; }

.Question-delete {
  display: none;
  font-size: 1rem;
  margin-left: auto; }

.Question:hover .Question-delete {
  display: block; }
/** @define ViewQuestionModal */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ViewQuestionModal .bbm-modal {
  max-width: 40rem; }

.ViewQuestionModal-body {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: left; }
  @media screen and (min-width: 40rem) {
    .ViewQuestionModal-body {
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start; } }

.ViewQuestionModal-preview {
  width: 50%; }

.ViewQuestionModal-image {
  width: 100%; }

@media screen and (min-width: 40rem) {
  .ViewQuestionModal-text {
    padding-left: 3rem; } }

.ViewQuestionModal-heading {
  color: #333;
  font-size: 1rem;
  line-height: 1.4; }

.ViewQuestionModal-answers {
  list-style: none;
  padding: 0; }

.ViewQuestionModal-answer {
  margin-bottom: 1rem;
  position: relative; }

.ViewQuestionModal-answerIcon {
  font-size: 1.5rem;
  left: -2rem;
  position: absolute; }

.ViewQuestionModal-modal-buttons {
  margin-top: 0; }

/* Modifier: Modal with no image
   ========================================================================== */
.ViewQuestionModal--noImage .bbm-modal {
  max-width: 28rem; }

@media screen and (min-width: 40rem) {
  .ViewQuestionModal--noImage .ViewQuestionModal-text {
    padding-left: 1rem; } }
/** @define Redeem */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Redeem {
  background: #5e1cca url(/assets/efa812a6f7f25290a9a3370dc90a4303.jpg) center center repeat;
  background-size: 1024px 679px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
  position: relative; }

.Redeem-hero {
  background: #fff url(/assets/2fe2c7030c7f360c0eb1ebc50edf1ace.jpg) center center repeat;
  background-size: 1024px 679px;
  border-bottom: 10px solid #2d0a6e;
  position: relative;
  text-align: center; }

.Redeem-header {
  max-width: 100%;
  width: 12.5rem; }

.Redeem-innerHero {
  margin: 0 auto;
  max-width: 42rem;
  padding: 3rem 1rem; }

.Redeem-title {
  color: #000;
  font-size: 2.25rem;
  margin: 0; }

.Redeem-subTitle {
  font-size: 1.25rem; }

.Redeem-user {
  color: #333;
  margin: 0;
  padding: 1rem 0 2rem 0; }

.Redeem-link {
  font-size: 1rem; }

.Redeem-codeField {
  margin-bottom: 2rem; }

.Redeem-submit {
  margin-bottom: 1rem;
  width: 100%; }

.Redeem-features {
  margin: 0 auto;
  max-width: 32rem; }
  @media screen and (min-width: 64rem) {
    .Redeem-features {
      max-width: 92rem; } }

.Redeem-success {
  padding: 4rem 1rem 5rem; }

.Redeem-successMessage {
  color: #000;
  font-size: 1.2rem;
  margin: 0;
  padding: 1rem 0 2rem 0; }
/** @define PlusFeatureList */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PlusFeatureList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 1rem; }
  @media screen and (min-width: 50rem) {
    .PlusFeatureList {
      padding: 0; } }

.PlusFeatureList-title {
  color: #5e1cca;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.625rem;
  padding: 0 1rem;
  text-align: center;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .PlusFeatureList-title {
      font-size: 2.375rem; } }

.PlusFeatureList-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin-bottom: 2rem; }
  @media screen and (min-width: 50rem) {
    .PlusFeatureList-item {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      max-width: 40rem;
      text-align: center; } }
  @media screen and (min-width: 69rem) {
    .PlusFeatureList-item {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      padding: 0 1.5rem;
      width: calc(20rem + 3rem); } }

.PlusFeatureList-itemImage {
  display: none;
  height: auto;
  max-width: 15rem;
  width: 100%; }
  @media screen and (min-width: 50rem) {
    .PlusFeatureList-itemImage {
      display: inline; } }

.PlusFeatureList-itemText {
  text-align: center;
  width: 100%; }
  @media screen and (min-width: 50rem) and (max-width: 69rem) {
    .PlusFeatureList-itemText {
      padding-left: 1rem;
      text-align: left; } }

.PlusFeatureList-itemTitle {
  color: #5e1cca;
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  margin-top: 1rem; }

.PlusFeatureList-itemBody {
  color: #777;
  font-size: 0.875rem; }

/* Modifier: Light text.
   ========================================================================== */
.PlusFeatureList--light .PlusFeatureList-title,
.PlusFeatureList--light .PlusFeatureList-itemTitle,
.PlusFeatureList--light .PlusFeatureList-itemBody {
  color: #fff; }
/** @define Fallback */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Fallback {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff url(/assets/2fe2c7030c7f360c0eb1ebc50edf1ace.jpg) center center repeat;
  background-size: 1024px 679px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  text-align: center;
  width: 100%; }

.Fallback-header {
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  width: 12.5rem; }

.Fallback-title {
  color: #333;
  font-size: 2.25rem;
  margin: 0; }

.Fallback-user {
  color: #333;
  margin: 0;
  padding: 1rem 0 2rem 0; }

.Fallback-prompt {
  color: #333;
  font-size: 1.2rem;
  margin: 0;
  padding: 1rem 0; }
/** @define Search */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Search {
  background-color: #f5f5f5;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }
  .Search .empty-text {
    color: #555;
    margin: 2rem auto; }
    @media screen and (min-width: 40rem) {
      .Search .empty-text {
        margin: 3rem auto; } }

.Search-form {
  font-size: 0.65rem;
  margin: 2rem auto;
  max-width: 46rem;
  width: calc(100% - 2.5rem); }
  @media screen and (min-width: 40rem) {
    .Search-form {
      font-size: 1rem;
      margin-bottom: 3rem;
      margin-top: 3rem; } }

.Search-content {
  margin: 0 auto 2rem;
  max-width: 60rem;
  width: calc(100% - 2.5rem); }
  @media screen and (min-width: 40rem) {
    .Search-content {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse;
      margin-bottom: 4rem; } }

.Search-layout {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse; }
/** @define PlusCTA */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.PlusCTA {
  background-color: #5e1cca;
  background-image: url(/assets/8fe9253261f371af853215b607daecff.svg);
  background-position: center center;
  background-size: cover;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1.5rem;
  overflow: hidden; }

.PlusCTA-inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 70em;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
  position: relative; }
  @media screen and (min-width: 40rem) {
    .PlusCTA-inner {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.PlusCTA-logo {
  display: none; }
  @media screen and (min-width: 60rem) {
    .PlusCTA-logo {
      display: block;
      width: 14rem; } }

.PlusCTA-text {
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
  padding-right: 1rem;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .PlusCTA-text {
      margin-bottom: 0;
      text-align: left; } }

.PlusCTA-btn {
  font-size: 1rem;
  min-width: 10rem;
  text-align: center; }
/** @define SearchResult */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SearchResult {
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25em 0.125em rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25em 0.125em rgba(0, 0, 0, 0.1);
  display: block;
  margin-bottom: 1.5em;
  padding: 1em;
  position: relative;
  width: 100%; }

.SearchResult-plusBadge {
  display: none;
  height: 2.5em;
  left: 0.3em;
  position: absolute;
  top: 0.3em;
  width: 2.5em; }
  @media screen and (min-width: 40rem) {
    .SearchResult-plusBadge {
      display: block; } }

.SearchResult-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.SearchResult-content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  vertical-align: middle;
  width: 83%; }
  @media screen and (min-width: 40rem) {
    .SearchResult-content {
      width: 75%; } }

.SearchResult-thumbnail {
  display: none; }
  @media screen and (min-width: 40rem) {
    .SearchResult-thumbnail {
      display: inline-block;
      margin-right: 2.5rem;
      min-width: 7rem;
      vertical-align: middle;
      width: 20%; } }

.SearchResult-title {
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  color: #000;
  font-size: 1.15em;
  font-weight: 700;
  margin: 0;
  margin-bottom: 0.5rem;
  vertical-align: middle;
  white-space: unset; }

.SearchResult-plusBadgeMobile {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  margin-right: 0.5rem;
  width: 2.25em; }
  @media screen and (min-width: 40rem) {
    .SearchResult-plusBadgeMobile {
      display: none; } }

.SearchResult-locked {
  color: #fff;
  display: none;
  font-size: 70%;
  position: relative; }
  @media screen and (min-width: 40rem) {
    .SearchResult-locked {
      display: inline-block;
      margin-right: 1em;
      min-width: 7rem;
      vertical-align: middle;
      width: 20%; } }

.SearchResult-lockedOverlay {
  background-color: rgba(45, 10, 110, 0.8);
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%; }

.SearchResult-lockIcon {
  display: block;
  font-size: 1.75em;
  margin: 0.5em auto 0.25em; }

.SearchResult-lockedText {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.SearchResult-lockedLogo {
  display: inline-block;
  margin-left: 0.25rem;
  position: relative;
  width: 30%; }

.SearchResult-duration {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #555;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.85em; }

.SearchResult-clock {
  margin-right: 0.25rem;
  opacity: 0.25; }

.SearchResult-sponsorLabel {
  display: inline-block;
  margin-left: 1em; }
  @media screen and (min-width: 40rem) {
    .SearchResult-sponsorLabel {
      display: none; } }

.SearchResult-sponsorBanner {
  display: none; }
  @media screen and (min-width: 40rem) {
    .SearchResult-sponsorBanner {
      display: block;
      font-size: 0.6rem;
      position: absolute;
      right: -5px;
      top: 0.5rem; } }

.SearchResult-youtubeText {
  color: #333;
  font-weight: 700;
  margin-right: 0.4rem;
  position: relative;
  top: 0.0625rem; }

.SearchResult-youtubeIcon {
  height: auto;
  margin: 0 0.35rem;
  vertical-align: middle;
  width: 2.5rem; }

.SearchResult-favoriteIcon {
  font-size: 1.75rem;
  margin: 0 0.35rem;
  vertical-align: middle; }

/* Modifier: Empty and Favorites Custom Result
   ========================================================================== */
.SearchResult--empty,
.SearchResult--favorite {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: gray;
  font-size: 0.85rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
  text-align: center; }
  @media screen and (min-width: 40rem) {
    .SearchResult--empty,
    .SearchResult--favorite {
      font-size: 1rem; } }

/* Modifier: Lower opacity title for locked result
   ========================================================================== */
.SearchResult-title--locked {
  color: #555; }

.SearchResult-resultText {
  display: inline-block; }

.SearchResult-shareBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  font-size: 1em;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-right: 0.75rem; }

.SearchResult-shareBtnIcon {
  height: 1.2rem;
  position: relative;
  width: 1.5rem; }

.SearchResult-shareBtnPrompt {
  color: #000;
  font-size: 0.875rem;
  margin-left: 0.3rem;
  white-space: nowrap; }

.SearchResult-shareBtn--withBanner {
  position: relative; }
  @media screen and (min-width: 40rem) {
    .SearchResult-shareBtn--withBanner {
      top: 1em; } }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.TeacherSettings {
  background: #f5f5f5;
  min-height: 100vh; }

.TeacherSettings-inner {
  margin: 0 auto;
  max-width: 38rem;
  padding: 0 1rem; }

.TeacherSettings-heading {
  color: #555;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.5rem;
  margin: 2rem 0;
  text-align: center; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.AccountType-logoContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem; }

.AccountType-logo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 1rem;
  border: 3px solid transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3rem 0;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .AccountType-logo {
      padding: 4.75rem 0; } }

.AccountType-logoIcon {
  max-width: 10rem;
  width: 100%; }

.AccountType-body {
  margin: 2rem 0 1rem;
  text-align: center;
  color: #555; }

.AccountType-sponsor {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1rem; }

.AccountType-sponsorLogo {
  display: block;
  margin: 1rem auto 0;
  max-width: 60%; }

.AccountType-subscriptionOptions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0.5rem -0.25rem 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

/**
 * 1. Remove depressed state for this one-off button style. We should make this a top-level button
 *    component, if we want to keep this style of button in the UI library.
 */
.AccountType-optionsBtn {
  color: #777;
  border: 1px solid #777;
  font-size: 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 0.5rem 0.25rem 0;
  background: #fff; }
  .AccountType-optionsBtn:hover {
    background: #f2f2f2; }
  .AccountType-optionsBtn:active {
    -webkit-transform: none !important;
            transform: none !important;
    /* 1 */ }

/* State: Active Free or Plus logo
   ========================================================================== */
.AccountType-logo.is-freeActive {
  border-color: #000; }

.AccountType-logo.is-plusActive {
  border-color: #5e1cca; }
/** @define MyConnectedApps */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.MyConnectedApps-subtitle {
  color: #555;
  font-size: 0.8125rem; }

.MyConnectedApps-button {
  height: 3.5rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.MyConnectedApps-buttonIcon {
  background-image: url(/assets/2658b8c55edf634139c47dffc0bb5c0e.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  height: 2.5rem;
  margin-left: 0.35rem;
  margin-top: 0.35rem;
  text-align: center;
  width: 2.5rem; }

.MyConnectedApps-buttonText {
  -ms-flex-preferred-size: 75%;
      flex-basis: 75%; }

.ClassroomListOverlay {
  background-color: #f5f5f5;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 500; }
  .ClassroomListOverlay .layout-resource-manager-inner {
    display: inline-block;
    vertical-align: middle;
    width: 100%; }
/** @define CleverCleverLoadingOverlay */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.CleverLoadingOverlay {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  left: 0;
  overflow: auto;
  padding: 0.5rem;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100vw; }

.CleverLoadingOverlay-content {
  margin-top: auto;
  margin-bottom: auto; }

.CleverLoadingOverlay-heading {
  color: #555;
  font-family: 'Tikal Sans', Verdana, sans-serif;
  font-size: '1.5rem';
  margin-top: 0; }

.CleverLoadingOverlay-dotBounce {
  display: block;
  margin-bottom: 2rem;
  padding-top: 2rem;
  width: 100%; }

@-webkit-keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

@keyframes dot-bounce {
  0%,
  25%,
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  12% {
    -webkit-transform: translate(0, -1.5rem);
            transform: translate(0, -1.5rem); }
  15% {
    -webkit-transform: translate(0, -1.75rem);
            transform: translate(0, -1.75rem); } }

.CleverLoadingOverlay-dot {
  -webkit-animation: dot-bounce 1500ms ease-in infinite;
          animation: dot-bounce 1500ms ease-in infinite;
  background-color: #5e1cca;
  border-radius: 100rem;
  display: inline-block;
  height: 1rem;
  margin: 0 0.25rem;
  vertical-align: middle;
  width: 1rem; }
  .CleverLoadingOverlay-dot:nth-of-type(2) {
    -webkit-animation-delay: 100ms;
            animation-delay: 100ms; }
  .CleverLoadingOverlay-dot:nth-of-type(3) {
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms; }
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.SettingsCard {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.15);
  margin-bottom: 2rem; }

.SettingsCard-heading {
  margin: 0;
  padding: 1rem;
  border-bottom: 2px solid #e4e4e4;
  color: #555; }

.SettingsCard-body {
  padding: 1rem; }
/** @define UnavailableContentMessage */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.UnavailableContentMessage {
  background: #fff url(/assets/2fe2c7030c7f360c0eb1ebc50edf1ace.jpg) repeat 0 0;
  background-size: 1536px auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
  text-align: center;
  width: 100%; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .UnavailableContentMessage {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }

.UnavailableContentMessage-logo {
  max-width: 10rem;
  width: 50vw; }
  @media screen and (min-height: 25rem) and (min-width: 50rem) {
    .UnavailableContentMessage-logo {
      left: 0;
      max-width: 15rem;
      position: absolute;
      top: 0; } }

.UnavailableContentMessage-copy {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: auto;
  margin-top: auto;
  padding: 0.5rem; }

.UnavailableContentMessage-status {
  margin-top: 6rem;
  margin-bottom: 2rem;
  color: #333;
  font-size: 3.5rem; }
  @media screen and (min-width: 40rem) {
    .UnavailableContentMessage-status {
      font-size: 3.5rem; } }

.UnavailableContentMessage-heading {
  margin-bottom: 1.25rem;
  color: #333;
  font-family: "csr", Verdana, sans-serif;
  font-size: 2rem; }
  @media screen and (min-width: 40rem) {
    .UnavailableContentMessage-heading {
      font-size: 2rem; } }

.UnavailableContentMessage-body {
  margin-bottom: 4rem;
  font-size: 1.25rem; }

.UnavailableContentMessage-action {
  margin: 1rem 0;
  width: 20rem;
  font-size: 1rem; }

.UnavailableContentMessage-contact {
  font-size: 1rem; }

.UnavailableContentMessage-contactLink {
  font-weight: bold;
  color: #000; }

.UnavailableContentMessage-champ {
  margin-left: auto;
  margin-right: auto;
  max-width: 20rem;
  width: 80vw; }
/** @define Upgrade */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Upgrade {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  position: relative; }

.Upgrade-backBtn {
  left: 1rem;
  position: absolute;
  top: 1rem; }

.Upgrade-header {
  background: #5e1cca url(/assets/750de38b168653519cd3a0d8d8d0f490.jpg) center center repeat;
  background-size: cover;
  color: #fff;
  margin-bottom: 5rem;
  padding: 6rem 1rem;
  position: relative;
  text-align: center;
  z-index: 100; }

.Upgrade-heading {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 auto 1em;
  max-width: 24em; }
  @media screen and (min-width: 40rem) {
    .Upgrade-heading {
      font-size: 2.5rem; } }

.Upgrade-subheading {
  color: #fff;
  font-size: 1rem;
  margin: 1rem auto 0;
  max-width: 64rem; }
  @media screen and (min-width: 40rem) {
    .Upgrade-subheading {
      font-size: 1.5rem; } }

.Upgrade-headerBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: -2.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 50%;
  margin: 0 auto;
  max-width: 27rem;
  padding: 0 1rem;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .Upgrade-headerBtn {
      padding: 0;
      width: 50%; } }

.Upgrade-headerBtnText {
  bottom: -1.75rem;
  color: #333;
  margin: 0;
  position: absolute;
  right: 0;
  width: 100%; }

.Upgrade-video {
  display: inline-block;
  max-width: 30rem;
  width: 100%; }

/* Modifier: Expired
   ========================================================================== */
.Upgrade--expired .Upgrade-header {
  background: #5e1cca url(/assets/dc53ae8d0b12542866ad64172659064f.jpg) center center repeat;
  background-size: cover; }

.Upgrade--expired .Upgrade-headerBtn {
  bottom: 0;
  left: 0;
  max-width: 24rem;
  position: relative;
  -webkit-transform: none;
          transform: none;
  margin-bottom: 1.5rem; }
  @media screen and (min-width: 60rem) {
    .Upgrade--expired .Upgrade-headerBtn {
      margin-bottom: 0; } }

.Upgrade--expired .Upgrade-headerBtnTitle {
  color: #fff;
  font-weight: bold; }

.Upgrade--expired .Upgrade-headerBtnText {
  bottom: 0;
  color: #fff;
  margin-top: 1rem;
  position: relative; }
/** @define ButtonGroup */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.ButtonGroup {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.875rem;
  -ms-flex-pack: distribute;
      justify-content: space-around; }
  @media screen and (min-width: 40rem) {
    .ButtonGroup {
      font-size: 1rem; } }

.ButtonGroup-item {
  border-right: 1px solid #ddd;
  cursor: pointer;
  font-family: "tk", Verdana, sans-serif;
  font-weight: bold;
  padding: 1rem 0.25rem;
  text-align: center;
  width: 100%; }

.ButtonGroup-item:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px; }

.ButtonGroup-item:last-child {
  border-right-color: transparent;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px; }

.ButtonGroup-item.is-active {
  background-color: #5e1cca;
  color: #fff; }
/** @define UpgradeFeatures */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.UpgradeFeatures {
  background: #fff url(/assets/2fe2c7030c7f360c0eb1ebc50edf1ace.jpg) center center repeat;
  background-size: cover;
  margin-top: -5rem;
  position: relative; }

.UpgradeFeatures-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  max-width: 92rem;
  padding: 6rem 1rem 0; }

.UpgradeFeatures-item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 2rem; }
  @media screen and (min-width: 50rem) {
    .UpgradeFeatures-item {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      max-width: 40rem;
      text-align: center; } }
  @media screen and (min-width: 69rem) {
    .UpgradeFeatures-item {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      padding: 0 1.5rem;
      width: calc(20rem + 3rem); } }

.UpgradeFeatures-itemImage {
  height: auto;
  max-width: 15rem;
  width: 100%; }

.UpgradeFeatures-itemText {
  font-size: 1rem;
  text-align: center;
  width: 60%; }
  @media screen and (min-width: 50rem) and (max-width: 69rem) {
    .UpgradeFeatures-itemText {
      padding-left: 1rem;
      text-align: left; } }
/** @define UpgradePlans */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.UpgradePlans {
  margin: 0 auto;
  max-width: 60rem;
  padding: 1rem; }

.UpgradePlans-buttonGroup {
  padding-top: 1rem; }
  @media screen and (min-width: 64rem) {
    .UpgradePlans-buttonGroup {
      display: none; } }

.UpgradePlans-plans {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2rem; }
/** @define UpgradePlan */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.UpgradePlan {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  color: #333;
  margin-top: 1rem;
  padding: 2rem;
  position: relative;
  text-align: center;
  width: 100%; }
  @media (min-width: 1024px) {
    .UpgradePlan {
      display: block;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      padding: 2rem 3rem 8rem 2rem; } }

@media (min-width: 1024px) {
  .UpgradePlan--first {
    border-bottom-right-radius: 0;
    border-right: 0;
    border-top-right-radius: 0; } }

@media (min-width: 1024px) {
  .UpgradePlan--last {
    padding-bottom: 10rem;
    padding-top: 3rem; } }

.UpgradePlan-headerImg {
  margin: 0 auto 0.5rem;
  max-width: 100%;
  width: 13rem; }

.UpgradePlan-headerSecondary {
  color: #555;
  display: block;
  font-family: "tk", Verdana, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase; }

.UpgradePlan-price {
  color: #666;
  font-weight: normal;
  line-height: 0.5;
  margin-bottom: 1.75rem; }

.UpgradePlan-priceValue {
  color: #5e1cca;
  font-family: "tk", Verdana, sans-serif;
  font-size: 2em;
  font-weight: bold; }

.UpgradePlan-list {
  margin: 0;
  padding: 0; }

.UpgradePlan-feature {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: normal;
  line-height: 1.4;
  padding: 0.75rem 0;
  text-align: left; }

.UpgradePlan-featureStatus {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 2rem;
  margin-right: 0.5rem;
  position: relative;
  top: 0.1rem;
  width: 2rem; }

.UpgradePlan-footer {
  position: relative;
  width: 100%; }
  @media screen and (min-width: 1024px) {
    .UpgradePlan-footer {
      bottom: 2.5rem;
      left: 50%;
      position: absolute;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); } }

@media screen and (min-width: 1024px) {
  .UpgradePlan--last .UpgradePlan-footer {
    bottom: 4rem; } }

.UpgradePlan-footerText {
  color: #666;
  font-weight: bold; }

.UpgradePlan-footerBtn {
  margin: 0 auto;
  padding: 0.5em 0.75em;
  width: 60%; }

.UpgradePlan-footerBtnText {
  color: #333;
  font-size: 0.9rem;
  margin: 1rem 0 0 0;
  text-align: center;
  width: 100%; }
  @media screen and (min-width: 1024px) {
    .UpgradePlan-footerBtnText {
      bottom: -2.5rem;
      position: absolute; } }

/* Modifier: Active
   ========================================================================== */
.UpgradePlan:not(.is-active) {
  display: none; }
  @media screen and (min-width: 1024px) {
    .UpgradePlan:not(.is-active) {
      display: block; } }
/** @define UpgradeTestimonials */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.UpgradeTestimonials {
  background: #5e1cca url(/assets/b14677679bcdd257f8516d4416d71a5b.jpg) center center repeat;
  background-size: cover;
  padding: 3rem 0;
  position: relative; }

.UpgradeTestimonials-inner {
  margin: 0 auto;
  max-width: 70rem;
  padding: 0 2rem; }

.UpgradeTestimonials-title {
  color: #ddfd48;
  font-size: 1.75rem;
  margin: 0;
  text-align: center; }

.UpgradeTestimonials-item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAAAXNSR0IArs4c6QAAAJNJREFUCB1jvPvP7DHTf4ZdTExsJfKMR94zIIGH/20E//371fOPkcGNiYHh//9/DP+T/v7/df7ufytTmDoQ+8//nxdAciA1jCCJu//NvBn/Myz6z8DABxQ4CxT6D2SbANmfgSrilBlPbQErhCi2kWP8/2smkO3wn+E/IyMD4wEGRpZ0JcZjD0HyGOD//1A2EEaXAABQGT2FDIxvtAAAAABJRU5ErkJggg==) center bottom repeat-x;
  background-image: -webkit-image-set(url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAAAXNSR0IArs4c6QAAAJNJREFUCB1jvPvP7DHTf4ZdTExsJfKMR94zIIGH/20E//371fOPkcGNiYHh//9/DP+T/v7/df7ufytTmDoQ+8//nxdAciA1jCCJu//NvBn/Myz6z8DABxQ4CxT6D2SbANmfgSrilBlPbQErhCi2kWP8/2smkO3wn+E/IyMD4wEGRpZ0JcZjD0HyGOD//1A2EEaXAABQGT2FDIxvtAAAAABJRU5ErkJggg==) 1x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAAAXNSR0IArs4c6QAAAUpJREFUKBW9kr9KA0EQxue7C8aYMgqiHvnzCIFctNDCFIrYBvEFrLW2to52Yi/kerEMwcKQoL5BvOIUQUxhE7lgdpxNWNkURmycZma++c3sMCy6yn8H0SMxrpJO8mIZNxH9wZ55w4tVfEDgXSYqoDssiR8bQH3AOc6jfWq0aT7k8iGzOmGmOcM5JtBeF5RSNXmkxlx17Zod65pmNGsP04xs6J8DXJRCyW4ioJFGYn8Rt6+2/sLrC32O6/L6pq0Lf0dM93K+sYW8Wpb1A2bOGg1ATxoDcvAw0hQXpXFPmIxhCBS5ouXQaWnte6BOntjPxEyBDKno/DeTmzdnka4uoflm2IkbrqDTKyC7A8KlAab4eh7z2/YwzU5saDeH7G/JXY/kC1Rk48SoBnxKQ8MBznJoX9u8iX8caICI11IDGno6nyE38tD6MLV/8V8brX/C3Ap6wgAAAABJRU5ErkJggg==) 2x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAPCAYAAADzun+cAAAAAXNSR0IArs4c6QAAAfJJREFUOBHlVDFoFFEQnfdjrhAThGAjHuYuKSKmEu5ywT6FSsAijZDERqxEsRICwcbCRm0EW0FtUgRSRLSRQE5NbAWTIncni5WVJiAe2X3OHH7Y3dzuRbTzN/PnzXszf3b+X+xE1W8iEkC4RcjyoBRWTqC+q9g/W195fuC7tKdBuUzBmCYuYiesMFEB2BPwXlmGHwBL7UTsDx1yptCQ1m0hFoQ8FpcfLPw7CuAT4C6U8L4VFxx232RtmIxWSZ7ppnHdQMNMQIb1z6yczeJk4aYxbVZR02UWtiApJ0NircXaOfMPs4xrGtPm8R2cm4WTRQHWoTcsTdZTD4WM3jRZva57pOPet5hxjGsajycs5K1zuKs15xKJAk6Othk+0lYvJgTegXzUuT9V9/WAHGkavCv7JTVTOs95Pfa4Yeml9+WVoP9mGfVtH0sU9mCTE7eiKHro/b+x2uGdEjbvp3N0LWykBivXtIMnOqvce5BO6P3O2OBulLHx2GNxm1nYSA1WZ3Rez/QAhbio5x7Y13/B1RF8eJ7Fze2mjM0lB5kQSD0rQRrXeW70Qybzipomt2Of1G5sS2rTjHhFO7mkn/+oj3WSAD/08a069L04Le+WtfiB1xHndzRpoJdvv8FAvhRDiYr6+tAnLjglxwPg5c9e2v87/gv8jL/ORkRdUwAAAABJRU5ErkJggg==) 3x);
  background-image: image-set("./images/bg-squiggle-lime.png" 1x, "./images/bg-squiggle-lime_2x.png" 2x, "./images/bg-squiggle-lime_3x.png" 3x);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 3rem 0 2rem; }
  .UpgradeTestimonials-item:last-child {
    background-image: none;
    padding-bottom: 0; }

.UpgradeTestimonials-itemImage {
  border-radius: 100%;
  border: 3px solid #fff;
  height: 6.5rem;
  width: 6.5rem; }

.UpgradeTestimonials-itemText {
  font-family: "tk", Verdana, sans-serif;
  font-size: 1.25rem;
  padding: 0 1rem;
  text-align: center;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .UpgradeTestimonials-itemText {
      font-size: 1.5rem;
      padding: 0;
      width: 85%; } }

.UpgradeTestimonials-itemName {
  font-size: 1.25rem; }
/** @define VideoBanner */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.VideoBanner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #333;
  background-image: url(/assets/90a50879dfe0bf813bca29b75353c82f.png);
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  padding-top: 56.25%;
  position: relative; }

.VideoBanner:hover .VideoBanner-overlay {
  opacity: 0.25; }

.VideoBanner-overlay {
  background-color: #000;
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  width: 100%; }

.VideoBanner-play {
  border-radius: 100rem;
  border: 0.3rem solid #fff;
  height: 8rem;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 8rem; }

.VideoBanner-playIcon {
  font-size: 4rem;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-40%, -50%);
          transform: translate(-40%, -50%); }
/** @define UpdateBrowserModal */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.UpdateBrowserModal-btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "csr", Verdana, sans-serif;
  font-weight: normal;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto 1rem; }
  @media screen and (min-width: 40rem) {
    .UpdateBrowserModal-btn {
      display: block;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; } }

.UpdateBrowserModal-brand {
  display: inline-block;
  margin-right: 1rem;
  width: 2rem; }
  @media screen and (min-width: 40rem) {
    .UpdateBrowserModal-brand {
      display: block;
      margin: 0 auto 1rem;
      width: 80%; } }

.UpdateBrowserModal-logo {
  height: 0;
  max-width: 10rem;
  padding-top: 100%;
  position: relative;
  width: 100%; }

.UpdateBrowserModal-logoImg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.UpdateBrowserModal-note {
  display: none;
  font-size: 0.75rem;
  margin-left: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .UpdateBrowserModal-note {
      display: block; } }
/** @define Lockout */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.Lockout {
  background: #5e1cca url(/assets/efa812a6f7f25290a9a3370dc90a4303.jpg) repeat center center;
  background-size: 1024px 679px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  min-height: 100%;
  padding: 0.5rem;
  text-align: center; }
  @media screen and (min-height: 43.75rem) and (min-width: 40rem), screen and (min-width: 100rem) {
    .Lockout {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.Lockout-logo {
  margin: 2rem auto;
  max-width: 10rem;
  width: 50vw; }
  @media screen and (min-height: 43.75rem) and (min-width: 40rem), screen and (min-width: 100rem) {
    .Lockout-logo {
      left: 2rem;
      margin: 0;
      position: absolute;
      top: 2rem; } }

.Lockout-content {
  margin: auto;
  max-width: 50rem;
  width: 100%; }

.Lockout-heading {
  font-family: "Tikal Sans", Verdana, sans-serif;
  font-size: 1.25rem;
  margin-bottom: 2rem; }
  @media screen and (min-width: 40rem) {
    .Lockout-heading {
      font-size: 1.5rem; } }

.Lockout-body {
  font-family: "Centrale Sans Rounded", Verdana, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 auto 2rem;
  max-width: 38em; }
  @media screen and (min-width: 40rem) {
    .Lockout-body {
      font-size: 1.125rem; } }

.Lockout-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  margin-bottom: 2rem; }

.Lockout-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  width: 100%; }
  @media screen and (min-width: 40rem) {
    .Lockout-item {
      -ms-flex-preferred-size: auto;
          flex-basis: auto;
      width: 33.333%; } }

.Lockout-btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Centrale Sans Rounded", Verdana, sans-serif;
  font-weight: normal;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto 1rem; }
  @media screen and (min-width: 40rem) {
    .Lockout-btn {
      display: block;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      padding: 1em 0.5em;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1; } }

.Lockout-brand {
  display: inline-block;
  margin-right: 1rem;
  width: 2rem; }
  @media screen and (min-width: 40rem) {
    .Lockout-brand {
      display: block;
      margin: 0 auto 3rem;
      width: 80%; } }

.Lockout-brandLogo {
  height: 0;
  margin-right: auto;
  margin-left: auto;
  max-width: 10rem;
  padding-top: 100%;
  position: relative;
  width: 100%; }

.Lockout-brandLogoImg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.Lockout-note {
  display: none;
  font-size: 0.75rem;
  margin-left: 0.5rem; }
  @media screen and (min-width: 40rem) {
    .Lockout-note {
      display: block; } }

.Lockout-link {
  color: #fff; }
/** @define GoNoodleAtHome */
/**
 * TODO: NEAT - This global variable supresses deprecations warnings. Used as we currently have no
 *       way to resolve the deprecations. https://git.io/vytNP
 */
/* Config & Vendor
   ========================================================================== */
/* Layout
 * --------------------------------------------------------------*/
/**
 * Legacy Breakpoints
 *
 * These variables have been deprecated. Do not use these moving forward.
 */
/**
 * Breakpoints
 *
 * These were created in a effort to provide additional breakpoints for grid pages. Long term, these
 * should replace the previous breakpoints found above.
 */
/* Sizes
 * --------------------------------------------------------------*/
/* Colors
 * --------------------------------------------------------------*/
/* Misc
 * --------------------------------------------------------------*/
/**
 * GoNoodle.com's z-index scale. Z-index values should always be defined in
 * z-index.css. This allows us to at a glance determine relative layers of our
 * application and prevents bugs arrising from arbitrary z-index values. Do not
 * edit the z-index scale! Only add application scoped z-index values.
 */
/* ==========================================================================
   Z-Index Scale (do not use outside this file)
   ========================================================================== */
/* ==========================================================================
   Z-Index Applications
   ========================================================================== */
/* Extends
   ========================================================================== */
/* Mixins
   ========================================================================== */
.GoNoodleAtHome {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%; }
  @media screen and (max-width: 50rem) {
    .GoNoodleAtHome {
      height: auto; } }

.GoNoodleAtHome-content {
  background-image: url(/assets/b8e617c880e7ed0b9d6f55937256912d.png);
  background-image: -webkit-image-set(url(/assets/b8e617c880e7ed0b9d6f55937256912d.png) 1x, url(/assets/30fcf8d744dbc08ea2529d954dc6110e.png) 2x, url(/assets/a1b5f7dcb05990b71601c6013b6c01b8.png) 3x);
  background-image: image-set("./images/purple-background.png" 1x, "./images/purple-background@2x.png" 2x, "./images/purple-background@3x.png" 3x);
  background-repeat: repeat-x; }

.GoNoodleAtHome-header {
  margin: 0 auto;
  max-width: 85rem;
  padding: 2rem 2rem;
  text-align: center; }

.GoNoodleAtHome-heading {
  color: #fff; }
  @media screen and (max-width: 40rem) {
    .GoNoodleAtHome-heading {
      font-size: 1.625rem; } }

.GoNoodleAtHome-body {
  background: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.125rem rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  max-width: 81rem;
  width: 100%; }
  @media screen and (max-width: 50rem) {
    .GoNoodleAtHome-body {
      max-width: 40rem; } }
  @media screen and (max-width: 40rem) {
    .GoNoodleAtHome-body {
      max-width: 25rem; } }
  @media screen and (max-width: 20rem) {
    .GoNoodleAtHome-body {
      max-width: 18.5rem; } }

.GoNoodleAtHome-bodyInner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  @media screen and (max-width: 50rem) {
    .GoNoodleAtHome-bodyInner {
      display: block;
      text-align: center; } }

.GoNoodleAtHome-homePhoto {
  width: 35rem; }
  @media screen and (max-width: 50rem) {
    .GoNoodleAtHome-homePhoto {
      width: 40rem; } }

.GoNoodleAtHome-bodyInfo {
  padding-left: 4rem;
  padding-right: 3rem; }
  @media screen and (max-width: 50rem) {
    .GoNoodleAtHome-bodyInfo {
      padding-bottom: 3rem;
      padding-left: 0;
      padding-right: 0; } }
  @media screen and (max-width: 40rem) {
    .GoNoodleAtHome-bodyInfo {
      padding-left: 2rem;
      padding-right: 2rem; } }

.GoNoodleAtHome-bodyText {
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 33rem;
  width: 100%; }
  @media screen and (max-width: 50rem) {
    .GoNoodleAtHome-bodyText {
      margin-left: auto;
      margin-right: auto;
      text-align: left; } }
  @media screen and (max-width: 40rem) {
    .GoNoodleAtHome-bodyText {
      font-size: 1rem;
      line-height: 1.75;
      max-width: none; } }

.GoNoodleAtHome-bodyText:nth-child(2) {
  padding: 1.5625rem 0; }

.GoNoodleAtHome-shareLink {
  display: inline; }

.GoNoodleAtHome-appBadgeSection {
  margin: auto;
  max-width: 45rem;
  padding: 3rem 3rem;
  text-align: center; }
  @media screen and (max-width: 40rem) {
    .GoNoodleAtHome-appBadgeSection {
      padding: 3rem 1rem; } }
  @media screen and (max-width: 20rem) {
    .GoNoodleAtHome-appBadgeSection {
      padding: 3rem 0.5rem; } }

.GoNoodleAtHome-appBadgeSectionText {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: Tikal Sans;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 1.25rem; }
  @media screen and (max-width: 40rem) {
    .GoNoodleAtHome-appBadgeSectionText {
      font-size: 0.688rem; } }

.GoNoodleAtHome-gnLogo {
  margin-right: 0.25rem;
  width: 5.75rem; }
  @media screen and (max-width: 40rem) {
    .GoNoodleAtHome-gnLogo {
      width: 4.375rem; } }

.GoNoodleAtHome-freeText {
  color: #5e1cca; }

.GoNoodleAtHome-appBadges {
  display: inline-block; }

.GoNoodleAtHome-appBadgeImages {
  margin: 0.25rem; }

/*# sourceMappingURL=app.map*/