/*

  The grid uses a series of rows and columns to layout and align content.
  It's fully responsive.

  Content must be placed within columns and only columns may be immediate children of rows. Grid columns without a specified column-* class will automatically layout as equal width columns:

    <div class="row">
      <div class="column">Six</div>
      <div class="column">Six</div>
    </div>

  Width classes indicate the number of columns to create out of the possible 12 per row. For example, to create three equal-width columns across, use column-1/3 or column-4:

    <div class="row">
      <div class="column column-3/4">Nine</div>
      <div class="column column-1/4">Three</div>
    </div>

  Set the width of one column and the sibling columns automatically resize around it:

    <div class="row">
      <div class="column">Five</div>
      <div class="column column-2/12">Two</div>
      <div class="column">Five</div>
    </div>

  Column widths are set in percentages, so they're always fluid and sized relative to their parent element.
  */
/* line 35, app/assets/stylesheets/grid-flexbox.scss */
.row {
  margin-left: -1rem;
  /* to counteract column gutters */
  margin-right: -1rem;
  /* to counteract column gutters */
}

/* line 42, app/assets/stylesheets/grid-flexbox.scss */
.row.wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* line 46, app/assets/stylesheets/grid-flexbox.scss */
.row + .row {
  margin-top: 1rem;
}

/* line 61, app/assets/stylesheets/grid-flexbox.scss */
.row .column {
  width: 100%;
  max-width: 100%;
  padding-right: 1rem;
  /* gutter */
  padding-left: 1rem;
  /* gutter */
  padding-top: 1rem;
  /* optional */
  padding-bottom: 1rem;
  /* optional */
}

/* line 70, app/assets/stylesheets/grid-flexbox.scss */
.row.no-gutters {
  margin-left: 0;
  margin-right: 0;
}

/* line 75, app/assets/stylesheets/grid-flexbox.scss */
.row.no-gutters > .column {
  padding-right: 0;
  padding-left: 0;
}

@media (min-width: 640px) {
  /* line 85, app/assets/stylesheets/grid-flexbox.scss */
  .row {
    display: -ms-flexbox;
    display: flex;
  }
  /* line 89, app/assets/stylesheets/grid-flexbox.scss */
  .row .column {
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
  }
  /* line 99, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-1\/2 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%;
  }
  /* line 104, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-1\/3 {
    -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  /* line 109, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-2\/3 {
    -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  /* line 114, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-1\/4 {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%;
  }
  /* line 119, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-2\/4 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%;
  }
  /* line 124, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-3\/4 {
    -ms-flex: 0 0 75%;
        flex: 0 0 75%;
    max-width: 75%;
  }
  /* line 129, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-1\/5 {
    -ms-flex: 0 0 20%;
        flex: 0 0 20%;
    max-width: 20%;
  }
  /* line 134, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-2\/5 {
    -ms-flex: 0 0 40%;
        flex: 0 0 40%;
    max-width: 40%;
  }
  /* line 139, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-3\/5 {
    -ms-flex: 0 0 60%;
        flex: 0 0 60%;
    max-width: 60%;
  }
  /* line 144, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-4\/5 {
    -ms-flex: 0 0 80%;
        flex: 0 0 80%;
    max-width: 80%;
  }
  /* line 149, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-1\/6 {
    -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  /* line 154, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-2\/6 {
    -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  /* line 159, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-3\/6 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%;
  }
  /* line 164, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-4\/6 {
    -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  /* line 169, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-5\/6 {
    -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  /* line 174, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-1\/12 {
    -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  /* line 179, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-2\/12 {
    -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  /* line 184, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-3\/12 {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%;
  }
  /* line 189, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-4\/12 {
    -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  /* line 194, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-5\/12 {
    -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  /* line 199, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-6\/12 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%;
  }
  /* line 204, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-7\/12 {
    -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  /* line 209, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-8\/12 {
    -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  /* line 214, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-9\/12 {
    -ms-flex: 0 0 75%;
        flex: 0 0 75%;
    max-width: 75%;
  }
  /* line 219, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-10\/12 {
    -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  /* line 224, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-11\/12 {
    -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  /* line 229, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-12\/12,
.column.column-full {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%;
  }
  /* line 235, app/assets/stylesheets/grid-flexbox.scss */
  .column.column-screen {
    -ms-flex: 0 0 100vw;
        flex: 0 0 100vw;
    max-width: 100vw;
  }
}
/*! Copyright (c) 2007 The Pragmatic Studio */
/*
  Fonts
  ========================================================================== */
/*
  stardos-stencil-regular - latin

  https://google-webfonts-helper.herokuapp.com/fonts/stardos-stencil?subsets=latin
  */
@font-face {
  font-family: "Stardos Stencil";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/stardos-stencil-v11-latin-regular-c1a672df2c5446b5e20d8155e59cb55d288ac253b5a6b198f2c609cc5e9899c7.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/assets/stardos-stencil-v11-latin-regular-c1a672df2c5446b5e20d8155e59cb55d288ac253b5a6b198f2c609cc5e9899c7.eot?#iefix") format("embedded-opentype"), url("/assets/stardos-stencil-v11-latin-regular-0e17e9bb3312509d9c6ffff150183298077db009dc8ca87439fa329e7e722d3c.woff2") format("woff2"), url("/assets/stardos-stencil-v11-latin-regular-7e5071e5df5a8792da99f1285ef4c224cad2457a3090e47fde5635d8173551dd.woff") format("woff"), url("/assets/stardos-stencil-v11-latin-regular-ae231c2b0f4d2d34a9063514b2dc478eb0c8d706f09c4d6a99cdcb377af6e0dc.ttf") format("truetype"), url("/assets/stardos-stencil-v11-latin-regular-a9f05e4ce5f5a5bbe9dea6b12ce34a3fd324bf2a08a6561898794030f24f6774.svg#StardosStencil") format("svg");
  /* Legacy iOS */
}

/*
  Utility classes
  ========================================================================== */
/* line 40, app/assets/stylesheets/custom.scss */
.undershadow {
  box-shadow: #6b7280 0px -4px 0px 0px inset;
}

/* line 44, app/assets/stylesheets/custom.scss */
.highlight {
  background-color: #fef3c7;
}

/* line 48, app/assets/stylesheets/custom.scss */
.studio-green {
  color: #71a95b;
}

/* line 52, app/assets/stylesheets/custom.scss */
.studio-yellow {
  color: #ffa600;
}

/* line 56, app/assets/stylesheets/custom.scss */
.phoenix-orange {
  color: #f57138;
}

/* line 60, app/assets/stylesheets/custom.scss */
.phoenix-orange-muted {
  color: #cf914f;
}

/* line 64, app/assets/stylesheets/custom.scss */
.react-blue {
  color: #71b1d1;
}

/* line 68, app/assets/stylesheets/custom.scss */
.rails-red {
  color: #dc5350;
}

/* line 72, app/assets/stylesheets/custom.scss */
.elixir-purple {
  color: #7048ad;
}

/* line 76, app/assets/stylesheets/custom.scss */
.elixir-purple-muted {
  color: #a88ac1;
}

/* line 80, app/assets/stylesheets/custom.scss */
.elm-blue {
  color: #0073d1;
}

/* line 84, app/assets/stylesheets/custom.scss */
.graphql-pink {
  color: #b95b98;
}

/* line 88, app/assets/stylesheets/custom.scss */
.vue-green {
  color: #a2bf8d;
}

/* line 92, app/assets/stylesheets/custom.scss */
.blue-gray {
  color: #728197;
}

/* line 96, app/assets/stylesheets/custom.scss */
.studio-light-gray {
  color: #ebebeb;
}

/* line 100, app/assets/stylesheets/custom.scss */
.studio-medium-gray {
  color: #cccccc;
}

/* line 104, app/assets/stylesheets/custom.scss */
.studio-dark-gray {
  color: #878787;
}

/* line 108, app/assets/stylesheets/custom.scss */
.bg-studio-light-gray {
  background-color: #ebebeb;
}

/* line 112, app/assets/stylesheets/custom.scss */
.bg-studio-medium-gray {
  background-color: #cccccc;
}

/* line 116, app/assets/stylesheets/custom.scss */
.bg-studio-dark-gray {
  background-color: #878787;
}

/* line 120, app/assets/stylesheets/custom.scss */
.bg-studio-charcoal {
  background-color: #383838;
}

/* line 124, app/assets/stylesheets/custom.scss */
.bg-studio-yellow {
  background-color: #ffa600;
}

/* line 128, app/assets/stylesheets/custom.scss */
.wavy {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
          text-decoration-style: wavy;
}

/*
  Base elements
  ========================================================================== */
/* line 137, app/assets/stylesheets/custom.scss */
strong {
  font-weight: 600;
}

/* line 141, app/assets/stylesheets/custom.scss */
em {
  font-style: italic;
}

/*
  Layout
  ========================================================================== */
/* line 149, app/assets/stylesheets/custom.scss */
body {
  font-family: "Inter var", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.75rem;
  color: #111827;
  background-color: #ffffff;
}

/* line 157, app/assets/stylesheets/custom.scss */
#content {
  margin-bottom: 4rem;
}

/* line 160, app/assets/stylesheets/custom.scss */
#content a:not(.no-underline) {
  text-decoration: underline;
}

/* line 165, app/assets/stylesheets/custom.scss */
#heading {
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* line 170, app/assets/stylesheets/custom.scss */
#heading h1 {
  color: #047857;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* line 179, app/assets/stylesheets/custom.scss */
#heading h1.black {
  color: #111827;
}

/* line 184, app/assets/stylesheets/custom.scss */
#heading h2 {
  color: #6b7280;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3333333;
  max-width: 48rem;
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
}

/*
  Container

  Overrides Tailwind's 'container' utility class which fixes
  an element's width to the current breakpoint.

  The 'container' class sets the 'max-width' of an element to match
  the 'min-width' of the current breakpoint. This is useful if you'd
  prefer to design for a fixed set of screen sizes instead of
  trying to accommodate a fully fluid viewport.

  Tailwind's 'container' does not center itself automatically and
  does not have any built-in horizontal padding. So here we
  center the content in a container using `margin` and
  add horizontal padding using `padding`.

  @media queries below are exactly the same as those generated by
  Tailwind, but are included here to be explicit.

  ========================================================================== */
/* line 217, app/assets/stylesheets/custom.scss */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}

@media (min-width: 640px) {
  /* line 227, app/assets/stylesheets/custom.scss */
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  /* line 235, app/assets/stylesheets/custom.scss */
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  /* line 243, app/assets/stylesheets/custom.scss */
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  /* line 251, app/assets/stylesheets/custom.scss */
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1536px) {
  /* line 259, app/assets/stylesheets/custom.scss */
  .container {
    max-width: 1024px;
  }
}

/*
  Studio Prose

  A lot of this is adapted from the base style in the Tailwind Typography plugin:  https://github.com/tailwindlabs/tailwindcss-typography
  are responsively sized based on the font size of the html element which
  for most browsers has a default value of 16px. In that case, 1rem equals
  16px, 2rem equals 32px, and so on.

  Size modifiers must be used in conjunction with the base prose class:

  <div class="studio-prose studio-prose-lg">

  or to make it larger on larger screens only:

  <div class="studio-prose lg:studio-prose-lg">

  ========================================================================== */
/* line 282, app/assets/stylesheets/custom.scss */
.studio-prose {
  font-size: 1rem;
  line-height: 1.75;
  color: #111827;
}

/* line 289, app/assets/stylesheets/custom.scss */
.studio-prose a:not(.button) {
  color: #1f2937;
  text-decoration: underline;
  font-weight: 500;
}

/* line 294, app/assets/stylesheets/custom.scss */
.studio-prose a:not(.button):visited {
  color: #1f2937;
}

/* line 298, app/assets/stylesheets/custom.scss */
.studio-prose a:not(.button):hover {
  color: #1f2937;
  text-decoration: none;
}

/* line 304, app/assets/stylesheets/custom.scss */
.studio-prose > :first-child {
  margin-top: 0;
}

/* line 308, app/assets/stylesheets/custom.scss */
.studio-prose > :last-child {
  margin-bottom: 0;
}

/* line 312, app/assets/stylesheets/custom.scss */
.studio-prose strong {
  font-weight: 600;
}

/* line 316, app/assets/stylesheets/custom.scss */
.studio-prose blockquote {
  font-weight: 500;
  font-style: italic;
  border-left-width: 0.25rem;
  border-left-color: #e5e7eb;
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
  quotes: '"\\201C""\\201D""\\2018""\\2019"';
}

/* line 327, app/assets/stylesheets/custom.scss */
.studio-prose blockquote p:first-of-type::before {
  content: open-quote;
}

/* line 331, app/assets/stylesheets/custom.scss */
.studio-prose blockquote p:last-of-type::after {
  content: close-quote;
}

/* line 335, app/assets/stylesheets/custom.scss */
.studio-prose blockquote cite {
  display: block;
  text-align: left;
}

/* line 338, app/assets/stylesheets/custom.scss */
.studio-prose blockquote cite:before {
  content: "\2014\00A0";
}

/* line 344, app/assets/stylesheets/custom.scss */
.studio-prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

/* line 349, app/assets/stylesheets/custom.scss */
.studio-prose h1,
.studio-prose h2,
.studio-prose h3,
.studio-prose h4,
.studio-prose h5,
.studio-prose h6 {
  color: #111827;
}

/* line 357, app/assets/stylesheets/custom.scss */
.studio-prose h1 {
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

/* line 364, app/assets/stylesheets/custom.scss */
.studio-prose h2 {
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

/* line 371, app/assets/stylesheets/custom.scss */
.studio-prose h2.subtitle {
  margin-top: -0.75em;
  margin-bottom: 1.75em;
}

/* line 376, app/assets/stylesheets/custom.scss */
.studio-prose h3 {
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

/* line 383, app/assets/stylesheets/custom.scss */
.studio-prose h4 {
  font-weight: 600;
  font-size: 1em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

/* line 391, app/assets/stylesheets/custom.scss */
.studio-prose hr {
  margin-top: 3em;
  margin-bottom: 3em;
  border-color: #e5e7eb;
  border-top-width: 1px;
}

/* line 398, app/assets/stylesheets/custom.scss */
.studio-prose hr + * {
  margin-top: 0;
}

/* line 402, app/assets/stylesheets/custom.scss */
.studio-prose h2 + * {
  margin-top: 0;
}

/* line 405, app/assets/stylesheets/custom.scss */
.studio-prose h3 + *:not(h4) {
  margin-top: 0;
}

/* line 408, app/assets/stylesheets/custom.scss */
.studio-prose h4 + * {
  margin-top: 0;
}

/* line 412, app/assets/stylesheets/custom.scss */
.studio-prose ul {
  list-style: disc;
}

/* line 415, app/assets/stylesheets/custom.scss */
.studio-prose ol {
  list-style: decimal;
}

/* line 419, app/assets/stylesheets/custom.scss */
.studio-prose ul,
.studio-prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  margin-left: 2em;
}

/* line 425, app/assets/stylesheets/custom.scss */
.studio-prose ul li,
.studio-prose ol li {
  position: relative;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* line 432, app/assets/stylesheets/custom.scss */
.studio-prose > ul > li p {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* line 436, app/assets/stylesheets/custom.scss */
.studio-prose > ul > li > *:first-child {
  margin-top: 1.25em;
}

/* line 439, app/assets/stylesheets/custom.scss */
.studio-prose > ul > li > *:last-child {
  margin-bottom: 1.25em;
}

/* line 442, app/assets/stylesheets/custom.scss */
.studio-prose > ol > li > *:first-child {
  margin-top: 1.25em;
}

/* line 445, app/assets/stylesheets/custom.scss */
.studio-prose > ol > li > *:last-child {
  margin-bottom: 1.25em;
}

/* line 449, app/assets/stylesheets/custom.scss */
.studio-prose ul ul,
.studio-prose ul ol,
.studio-prose ol ol,
.studio-prose ol ul {
  font-size: 0.875rem;
  list-style: circle;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* line 459, app/assets/stylesheets/custom.scss */
.studio-prose pre,
.studio-prose code,
.studio-prose dfn,
.studio-prose kbd,
.studio-prose samp,
.studio-prose tt {
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace;
  color: #111827;
  font-weight: 600;
  overflow: auto;
  white-space: nowrap;
}

/* line 479, app/assets/stylesheets/custom.scss */
.studio-prose pre {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.8571429em 1.1428571em;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  font-size: 0.875em;
  line-height: 1.7142857;
  overflow-x: auto;
  overflow-y: hidden;
}

/* line 493, app/assets/stylesheets/custom.scss */
.studio-prose code {
  font-weight: 600;
  font-size: 0.875em;
}

/* line 506, app/assets/stylesheets/custom.scss */
.studio-prose pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: 500;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  display: block;
  white-space: pre;
  color: inherit;
}

/* line 520, app/assets/stylesheets/custom.scss */
.studio-prose img {
  margin-top: 2em;
  margin-bottom: 2em;
  margin-right: auto;
  margin-left: auto;
}

/* line 527, app/assets/stylesheets/custom.scss */
.studio-prose video {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* line 532, app/assets/stylesheets/custom.scss */
.studio-prose figure {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* line 538, app/assets/stylesheets/custom.scss */
.studio-prose figure:first-of-type {
  margin-top: 0;
}

/* line 543, app/assets/stylesheets/custom.scss */
.studio-prose figure > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* line 548, app/assets/stylesheets/custom.scss */
.studio-prose table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

/* line 558, app/assets/stylesheets/custom.scss */
.studio-prose thead {
  color: #111827;
  font-weight: 600;
  border-bottom-width: 1px;
  border-bottom-color: #d1d5db;
}

/* line 565, app/assets/stylesheets/custom.scss */
.studio-prose thead th {
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}

/* line 572, app/assets/stylesheets/custom.scss */
.studio-prose thead th:first-child {
  padding-left: 0;
}

/* line 576, app/assets/stylesheets/custom.scss */
.studio-prose thead th:last-child {
  padding-right: 0;
}

/* line 580, app/assets/stylesheets/custom.scss */
.studio-prose tbody tr {
  border-bottom-width: 1px;
  border-bottom-color: #e5e7eb;
}

/* line 585, app/assets/stylesheets/custom.scss */
.studio-prose tbody td {
  vertical-align: top;
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}

/* line 593, app/assets/stylesheets/custom.scss */
.studio-prose tbody td:first-child {
  padding-left: 0;
}

/* line 597, app/assets/stylesheets/custom.scss */
.studio-prose tbody td:last-child {
  padding-right: 0;
}

/* line 601, app/assets/stylesheets/custom.scss */
.studio-prose tbody tr:last-child {
  border-bottom-width: 0;
}

/* line 606, app/assets/stylesheets/custom.scss */
.studio-prose-lg {
  font-size: 1.125rem;
  line-height: 1.7777778;
}

/* line 610, app/assets/stylesheets/custom.scss */
.studio-prose-lg > :first-child {
  margin-top: 0;
}

/* line 614, app/assets/stylesheets/custom.scss */
.studio-prose-lg > :last-child {
  margin-bottom: 0;
}

/* line 618, app/assets/stylesheets/custom.scss */
.studio-prose-lg p {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

/* line 623, app/assets/stylesheets/custom.scss */
.studio-prose-lg blockquote {
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  padding-left: 1em;
}

/* line 629, app/assets/stylesheets/custom.scss */
.studio-prose-lg h1 {
  font-size: 2.6666667em;
  margin-top: 0;
  margin-bottom: 0.8333333em;
  line-height: 1;
}

/* line 636, app/assets/stylesheets/custom.scss */
.studio-prose-lg h2 {
  font-size: 1.6666667em;
  margin-top: 1.8666667em;
  margin-bottom: 1.0666667em;
  line-height: 1.3333333;
}

/* line 643, app/assets/stylesheets/custom.scss */
.studio-prose-lg h3 {
  font-size: 1.3333333em;
  margin-top: 1.6666667em;
  margin-bottom: 0.6666667em;
  line-height: 1.5;
}

/* line 650, app/assets/stylesheets/custom.scss */
.studio-prose-lg h4 {
  margin-top: 1.7777778em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

/* line 656, app/assets/stylesheets/custom.scss */
.studio-prose-lg hr {
  margin-top: 3.1111111em;
  margin-bottom: 3.1111111em;
}

/* line 661, app/assets/stylesheets/custom.scss */
.studio-prose-lg hr + * {
  margin-top: 0;
}

/* line 665, app/assets/stylesheets/custom.scss */
.studio-prose-lg h2 + * {
  margin-top: 0;
}

/* line 668, app/assets/stylesheets/custom.scss */
.studio-prose-lg h3 + *:not(h4) {
  margin-top: 0;
}

/* line 671, app/assets/stylesheets/custom.scss */
.studio-prose-lg h4 + * {
  margin-top: 0;
}

/* line 675, app/assets/stylesheets/custom.scss */
.studio-prose-lg ul,
.studio-prose-lg ol {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  margin-left: 2em;
}

/* line 681, app/assets/stylesheets/custom.scss */
.studio-prose-lg ul li,
.studio-prose-lg ol li {
  position: relative;
  margin-top: 0.6666667em;
  margin-bottom: 0.6666667em;
}

/* line 688, app/assets/stylesheets/custom.scss */
.studio-prose-lg > ul > li p {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

/* line 692, app/assets/stylesheets/custom.scss */
.studio-prose-lg > ul > li > *:first-child {
  margin-top: 1.3333333em;
}

/* line 695, app/assets/stylesheets/custom.scss */
.studio-prose-lg > ul > li > *:last-child {
  margin-bottom: 1.3333333em;
}

/* line 698, app/assets/stylesheets/custom.scss */
.studio-prose-lg > ol > li > *:first-child {
  margin-top: 1.3333333em;
}

/* line 701, app/assets/stylesheets/custom.scss */
.studio-prose-lg > ol > li > *:last-child {
  margin-bottom: 1.3333333em;
}

/* line 705, app/assets/stylesheets/custom.scss */
.studio-prose-lg ul ul,
.studio-prose-lg ul ol,
.studio-prose-lg ol ol,
.studio-prose-lg ol ul {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

/* line 713, app/assets/stylesheets/custom.scss */
.studio-prose-lg pre {
  font-size: 0.8888889em;
  line-height: 1.75;
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 1em 1.5em;
}

/* line 721, app/assets/stylesheets/custom.scss */
.studio-prose-lg code {
  font-size: 0.8888889em;
}

/* line 725, app/assets/stylesheets/custom.scss */
.studio-prose-lg img {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

/* line 730, app/assets/stylesheets/custom.scss */
.studio-prose-lg video {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

/* line 735, app/assets/stylesheets/custom.scss */
.studio-prose-lg figure {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

/* line 740, app/assets/stylesheets/custom.scss */
.studio-prose-lg figure > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* line 745, app/assets/stylesheets/custom.scss */
.studio-prose-lg table {
  font-size: 0.8888889em;
  line-height: 1.5;
}

/* line 750, app/assets/stylesheets/custom.scss */
.studio-prose-lg thead th {
  padding-right: 0.75em;
  padding-bottom: 0.75em;
  padding-left: 0.75em;
}

/* line 756, app/assets/stylesheets/custom.scss */
.studio-prose-lg thead th:first-child {
  padding-left: 0;
}

/* line 760, app/assets/stylesheets/custom.scss */
.studio-prose-lg thead th:last-child {
  padding-right: 0;
}

/* line 764, app/assets/stylesheets/custom.scss */
.studio-prose-lg tbody td {
  padding-top: 0.75em;
  padding-right: 0.75em;
  padding-bottom: 0.75em;
  padding-left: 0.75em;
}

/* line 771, app/assets/stylesheets/custom.scss */
.studio-prose-lg tbody td:first-child {
  padding-left: 0;
}

/* line 775, app/assets/stylesheets/custom.scss */
.studio-prose-lg tbody td:last-child {
  padding-right: 0;
}

/*
  Inline form field errors automatically added by Rails.

  See form_errors.rb
  ========================================================================== */
/* line 788, app/assets/stylesheets/custom.scss */
form .field_with_errors p.error {
  color: #b91c1c;
}

/* line 792, app/assets/stylesheets/custom.scss */
form .field_with_errors input,
form .field_with_errors textarea,
form .field_with_errors select {
  outline: 0;
  box-shadow: 0 0 0 3px #b91c1c;
}

/*
  Form error messages
  ========================================================================== */
/* line 805, app/assets/stylesheets/custom.scss */
.error-messages {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  color: #7f1d1d;
  background-color: #fca5a5;
  border-radius: 0.5rem;
}

/* line 815, app/assets/stylesheets/custom.scss */
.error-messages ul {
  font-weight: 400;
  margin-top: 1rem;
  text-align: center;
  display: inline-block;
  list-style: disc;
}

/* line 822, app/assets/stylesheets/custom.scss */
.error-messages ul li {
  text-align: left;
}

/*
  Header and Navigation
  ========================================================================== */
/* line 835, app/assets/stylesheets/custom.scss */
header #menu-toggle:checked + #menu {
  display: block;
}

/*
  Video Embed Container

  ========================================================================== */
/* line 845, app/assets/stylesheets/custom.scss */
#content div.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  overflow: hidden;
  background: none;
  max-width: 1280px;
}

/* line 852, app/assets/stylesheets/custom.scss */
#content div.video-container iframe,
#content div.video-container object {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*
  COURSE REVIEWS

  ========================================================================== */
/* line 870, app/assets/stylesheets/custom.scss */
.course-reviews blockquote {
  color: #374151;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  margin-bottom: 2.5rem;
}

/* line 876, app/assets/stylesheets/custom.scss */
.course-reviews blockquote .review {
  margin-left: 1.5rem;
}

/* line 880, app/assets/stylesheets/custom.scss */
.course-reviews blockquote cite {
  color: #6b7280;
  display: block;
  margin-top: 0.5rem;
}

/* line 885, app/assets/stylesheets/custom.scss */
.course-reviews blockquote cite:before {
  content: "\2014\00A0";
}

/* line 890, app/assets/stylesheets/custom.scss */
.course-reviews blockquote .avatar {
  -ms-flex: none;
      flex: none;
}

/* line 892, app/assets/stylesheets/custom.scss */
.course-reviews blockquote .avatar img {
  width: 45px;
  height: 45px;
  border-radius: 9999px;
}

/*
  COURSE PAGE - set with @page_type = 'course'

  ========================================================================== */
/* line 907, app/assets/stylesheets/custom.scss */
.course-page .hero {
  color: #f3f4f6;
  position: relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  min-height: 350px;
}

/* line 915, app/assets/stylesheets/custom.scss */
.course-page .hero h1 {
  font-size: 3.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

/* line 924, app/assets/stylesheets/custom.scss */
.course-page .hero .version {
  color: #111827;
  position: absolute;
  padding: 0.5rem 1rem;
  bottom: 0px;
  right: 20px;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  z-index: 1;
  font-size: 1rem;
  font-weight: 500;
}

/* line 938, app/assets/stylesheets/custom.scss */
.course-page .hero + .sub-hero {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background-color: #383838;
  color: #f3f4f6;
}

/* line 947, app/assets/stylesheets/custom.scss */
.course-page .hero + .sub-hero a {
  color: #f3f4f6;
}

/* line 954, app/assets/stylesheets/custom.scss */
.course-page .course-modules .module .number {
  font-size: 1.25rem;
  padding: 1rem;
  color: #fff;
  background-color: #ffa600;
  border-radius: 9999px;
  height: 2.5rem;
  width: 2.5rem;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}

/* line 967, app/assets/stylesheets/custom.scss */
.course-page .course-modules .module .name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 1rem;
  white-space: nowrap;
}

/* line 974, app/assets/stylesheets/custom.scss */
.course-page .course-modules .module img {
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* line 980, app/assets/stylesheets/custom.scss */
.course-page .course-modules .module .coming-soon {
  margin-left: 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  text-transform: uppercase;
  border: 1px solid #728197;
  color: #728197;
  white-space: nowrap;
}

/* line 992, app/assets/stylesheets/custom.scss */
.course-page .course-modules .module .free {
  margin-left: 1.25rem;
  background-color: #6b7280;
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  text-transform: uppercase;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* line 1003, app/assets/stylesheets/custom.scss */
.course-page .course-modules .module .free:hover {
  background-color: #1f2937;
  cursor: pointer;
}

/* line 1009, app/assets/stylesheets/custom.scss */
.course-page .course-modules .module .free a {
  color: white;
  text-decoration: none !important;
}

/* line 1017, app/assets/stylesheets/custom.scss */
.course-page #content {
  position: relative;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* line 1022, app/assets/stylesheets/custom.scss */
.course-page #content h2 {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.25;
}

/* line 1029, app/assets/stylesheets/custom.scss */
.course-page #content h3 {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

/* line 1037, app/assets/stylesheets/custom.scss */
.course-page #content h4 {
  text-align: center;
  font-size: 1.5rem;
  color: #4b5563;
  font-weight: 400;
  line-height: 1.375;
  letter-spacing: -0.025em;
  margin-right: auto;
  margin-left: auto;
  max-width: 48rem;
}

/* line 1049, app/assets/stylesheets/custom.scss */
.course-page #content h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #4b5563;
  line-height: 1.375;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

/* line 1059, app/assets/stylesheets/custom.scss */
.course-page #content p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  letter-spacing: -0.025em;
  font-size: 1.25rem;
  line-height: 2rem;
}

/* line 1068, app/assets/stylesheets/custom.scss */
.course-page #content .what-you-get {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-direction: column;
      flex-direction: column;
  text-align: center;
  padding-right: 2rem;
  padding-left: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* line 1077, app/assets/stylesheets/custom.scss */
.course-page #content .what-you-get .item {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1rem;
}

/* line 1083, app/assets/stylesheets/custom.scss */
.course-page #content .what-you-get .description {
  margin-top: 1rem;
}

/* line 1089, app/assets/stylesheets/custom.scss */
.course-page #content section.quote blockquote {
  color: #374151;
  background-color: #ebebeb;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  padding: 1rem 2rem;
  max-width: 48rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
}

/* line 1100, app/assets/stylesheets/custom.scss */
.course-page #content section.quote blockquote p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: -0.025em;
}

/* line 1108, app/assets/stylesheets/custom.scss */
.course-page #content section.quote blockquote .reviewer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  margin-top: 1rem;
}

/* line 1115, app/assets/stylesheets/custom.scss */
.course-page #content section.quote blockquote a {
  color: #4b5563;
}

/* line 1119, app/assets/stylesheets/custom.scss */
.course-page #content section.quote blockquote cite {
  margin-left: 1rem;
}

/* line 1123, app/assets/stylesheets/custom.scss */
.course-page #content section.quote blockquote img {
  width: 45px;
  height: 45px;
  border-radius: 9999px;
}

/* line 1131, app/assets/stylesheets/custom.scss */
.course-page #content .get-course-cta {
  display: block;
  text-align: center;
  margin-top: 2rem;
}

/* line 1137, app/assets/stylesheets/custom.scss */
.course-page #content ul {
  list-style: disc;
  list-style-position: inside;
  padding-left: 1.5rem;
}

/* line 1142, app/assets/stylesheets/custom.scss */
.course-page #content ul li {
  position: relative;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-size: 1.25rem;
  line-height: 1.625;
  letter-spacing: -0.025em;
}

/* line 1152, app/assets/stylesheets/custom.scss */
.course-page #content ul.icons {
  list-style: none;
  list-style-image: none;
  padding-left: 1.5rem;
}

/* line 1157, app/assets/stylesheets/custom.scss */
.course-page #content ul.icons li {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: start;
      justify-content: flex-start;
  font-size: 1.25rem;
  line-height: 1.625;
  letter-spacing: -0.025em;
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
  /* 10px */
}

/* line 1168, app/assets/stylesheets/custom.scss */
.course-page #content ul.icons li.align-start {
  -ms-flex-align: start;
      align-items: flex-start;
  margin-bottom: 1.75rem;
}

/* line 1173, app/assets/stylesheets/custom.scss */
.course-page #content ul.icons li svg {
  -ms-flex: none;
      flex: none;
}

/* line 1177, app/assets/stylesheets/custom.scss */
.course-page #content ul.icons li a {
  display: inline-block;
}

/* line 1183, app/assets/stylesheets/custom.scss */
.course-page #content ul.toc {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 1rem;
}

/* line 1189, app/assets/stylesheets/custom.scss */
.course-page #content ul.toc li {
  font-size: 1.125rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  background-color: #e5e7eb;
  margin-bottom: 2rem;
}

/* line 1200, app/assets/stylesheets/custom.scss */
.course-page .buy-options .column {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* line 1204, app/assets/stylesheets/custom.scss */
.course-page .buy-options .column.column-1\/2 {
  padding-right: 2rem;
  padding-left: 2rem;
}

/* line 1208, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option {
  text-align: center;
  background-color: #ebebeb;
  border: 1px solid #d1d5db;
  padding: 1.5rem 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* line 1218, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option img {
  margin-right: auto;
  margin-left: auto;
}

/* line 1223, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option .description {
  font-size: 1.125rem !important;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: #374151;
}

/* line 1231, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option ul {
  list-style: none;
  list-style-image: none;
  display: inline-block;
  text-align: left;
  padding-left: 0 !important;
}

/* line 1238, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option ul li {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: start;
      justify-content: flex-start;
  margin-bottom: 0.5rem;
  font-size: 1.125rem !important;
  line-height: 1.5rem !important;
  font-weight: 400 !important;
}

/* line 1247, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option ul li svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 1.75rem;
  width: 1.75rem;
}

/* line 1253, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option ul li span,
.course-page .buy-options .buy-option ul li a {
  margin-left: 0.35rem;
  display: block;
}

/* line 1261, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option.best {
  position: relative;
  padding-top: 2rem;
}

/* line 1267, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option.best .best-label-container {
  position: absolute;
  right: 0;
  left: 0;
  top: -1rem;
}

/* line 1274, app/assets/stylesheets/custom.scss */
.course-page .buy-options .buy-option.best .best-label {
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-radius: 0.375rem;
  background-color: #1f2937;
  color: #ebebeb;
  padding: 0.25rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) {
  /* line 1293, app/assets/stylesheets/custom.scss */
  .course-page .hero h1 {
    font-size: 4.5rem;
  }
  /* line 1297, app/assets/stylesheets/custom.scss */
  .course-page .hero h2 {
    font-size: 1.875rem;
  }
}

/*
  TEAM PROGRESS PAGE - set with @page_type = 'team-progress'

  ========================================================================== */
/* line 1309, app/assets/stylesheets/custom.scss */
.team-progress-page .sort {
  left: 3px;
  display: inline-block;
  width: 0;
  height: 0;
  border: solid 5px transparent;
  margin: 4px 4px 0 3px;
  background: transparent;
}

/* line 1319, app/assets/stylesheets/custom.scss */
.team-progress-page .sort-desc {
  border-bottom: solid 7px #6b7280;
  border-top-width: 0;
}

/* line 1324, app/assets/stylesheets/custom.scss */
.team-progress-page .sort-asc {
  border-top: solid 7px #6b7280;
  border-bottom-width: 0;
}

/*
  FRONT PAGE set with @page_type = 'front'

  ========================================================================== */
/* line 1336, app/assets/stylesheets/custom.scss */
.front-page .hero {
  background: url(/assets/hero-7f5ddb921d1ad11f02c302ad6c78951c32893b7bd15dc01ef7721b84a0568d9d.jpg) top right no-repeat;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
  min-height: 300px;
  position: relative;
}

/* line 1348, app/assets/stylesheets/custom.scss */
.front-page .hero h1 {
  color: #f3f4f6;
  font-size: 4rem;
  line-height: 1;
  font-weight: 800;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 0px;
  left: 3rem;
  text-align: left;
  margin-bottom: 2rem;
}

/* line 1362, app/assets/stylesheets/custom.scss */
.front-page .undershadow {
  box-shadow: #fcd34d 0px -4px 0px 0px inset;
}

/* For devices larger than mobile */
@media screen and (min-width: 768px) {
  /* line 1369, app/assets/stylesheets/custom.scss */
  .front-page .hero {
    min-height: 350px;
  }
  /* line 1372, app/assets/stylesheets/custom.scss */
  .front-page .hero h1 {
    font-size: 5rem;
    line-height: 1;
  }
}

/*
  PAYMENT PAGE set with @page_type = 'payment'

  ========================================================================== */
/* line 1384, app/assets/stylesheets/custom.scss */
[data-braintree-id="choose-a-way-to-pay"] {
  font-weight: 700;
  font-size: 1.5rem;
}

/* line 1391, app/assets/stylesheets/custom.scss */
.plug {
  margin: 3rem 0;
  padding: 2rem 4rem;
  border-radius: 0.75rem;
  border: 4px dashed #d1d5db;
}

/* line 1398, app/assets/stylesheets/custom.scss */
.plug h3 {
  text-align: center;
  margin-top: 0;
}

/* line 1403, app/assets/stylesheets/custom.scss */
.plug img {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 0;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

/*
  Unpacked Page

  ========================================================================== */
/* line 1418, app/assets/stylesheets/custom.scss */
#unpacked .hero {
  background-color: #181e2a;
  background-image: url(/assets/unpacked-hero-8247dc7b97c6c8c290b31439e91587e00b8ba63f92dce1d0287ac5c9103bb202.jpg);
  color: #f3f4f6;
  position: relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  min-height: 400px;
}

/* line 1432, app/assets/stylesheets/custom.scss */
#unpacked .hero .stamp {
  line-height: 1.1;
  font-family: "Stardos Stencil", "Inter var", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  display: inline-block;
  font-weight: 400;
  font-size: 3rem;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  box-shadow: inset 0px 0px 0px 5px #9ca3af;
  text-transform: uppercase;
  transform: rotate(-4deg);
  margin-bottom: 2.5rem;
  color: #9ca3af;
}

/* line 1449, app/assets/stylesheets/custom.scss */
#unpacked.rails .button-buy {
  background-color: #dc5350;
}

/* line 1453, app/assets/stylesheets/custom.scss */
#unpacked.rails .button-buy:hover {
  background-color: #d83e3b;
}

/* line 1459, app/assets/stylesheets/custom.scss */
#unpacked.rails .course-modules .module .number {
  background-color: #728197;
}

/* line 1467, app/assets/stylesheets/custom.scss */
#unpacked.phoenix .button-buy {
  background-color: #f57138;
}

/* line 1471, app/assets/stylesheets/custom.scss */
#unpacked.phoenix .button-buy:hover {
  background-color: #f35f20;
}

/* line 1477, app/assets/stylesheets/custom.scss */
#unpacked.phoenix .course-modules .module .number {
  background-color: #f57138;
}

/* line 1486, app/assets/stylesheets/custom.scss */
#unpacked.graphql .hero .version {
  color: white;
  background-color: #374151;
}

/* line 1492, app/assets/stylesheets/custom.scss */
#unpacked.graphql .button-buy {
  background-color: #b95b98;
}

/* line 1496, app/assets/stylesheets/custom.scss */
#unpacked.graphql .button-buy:hover {
  background-color: #af4b8c;
}

/* line 1502, app/assets/stylesheets/custom.scss */
#unpacked.graphql .course-modules .module .number {
  background-color: #b95b98;
}

/*
  Elixir Page

  ========================================================================== */
/* line 1516, app/assets/stylesheets/custom.scss */
#elixir .undershadow {
  box-shadow: #7048ad 0px -4px 0px 0px inset;
}

/* line 1520, app/assets/stylesheets/custom.scss */
#elixir .hero {
  background-color: #362150;
  background-image: url(/assets/courses/elixir/elixir-hero-purple-8c7388904d5865dd47356d4b08735b17ca631aaca49b4047dd79507d592abe20.jpg);
}

/* line 1524, app/assets/stylesheets/custom.scss */
#elixir .hero .version {
  color: white;
  background-color: #55269c;
}

/* line 1532, app/assets/stylesheets/custom.scss */
#elixir .course-modules .module .number {
  background-color: #7048ad;
}

/* line 1538, app/assets/stylesheets/custom.scss */
#elixir .button-buy {
  background-color: #7048ad;
}

/* line 1542, app/assets/stylesheets/custom.scss */
#elixir .button-buy:hover {
  background-color: #65419b;
}

/*
  Rails Page

  ========================================================================== */
/* line 1553, app/assets/stylesheets/custom.scss */
#rails .undershadow {
  box-shadow: #dc5350 0px -4px 0px 0px inset;
}

/* line 1557, app/assets/stylesheets/custom.scss */
#rails .hero {
  background-color: #54171c;
  background-image: url(/assets/courses/rails6/rails-hero-red-57a8150672fddd0db34b3f3e5f1c046691d046289b5cfd5211131a40f9553aa8.jpg);
}

/* line 1561, app/assets/stylesheets/custom.scss */
#rails .hero .version {
  color: white;
  background-color: #d74751;
}

/* line 1567, app/assets/stylesheets/custom.scss */
#rails .button-buy {
  background-color: #dc5350;
}

/* line 1571, app/assets/stylesheets/custom.scss */
#rails .button-buy:hover {
  background-color: #d83e3b;
}

/*
  Elm Page

  ========================================================================== */
/* line 1582, app/assets/stylesheets/custom.scss */
#elm .undershadow {
  box-shadow: #0073d1 0px -4px 0px 0px inset;
}

/* line 1586, app/assets/stylesheets/custom.scss */
#elm .hero {
  background-color: #67c0e9;
  background-image: url(/assets/courses/elm/elm-hero-blue-ea5d9815b9bcdc03b9e07494884c60018e13258237ff00459ce54562d98dbab1.jpg);
}

/* line 1590, app/assets/stylesheets/custom.scss */
#elm .hero .version {
  color: white;
  background-color: #0284ed;
}

/* line 1598, app/assets/stylesheets/custom.scss */
#elm .course-modules .module .number {
  background-color: #0073d1;
}

/* line 1604, app/assets/stylesheets/custom.scss */
#elm .button-buy {
  background-color: #0073d1;
}

/* line 1608, app/assets/stylesheets/custom.scss */
#elm .button-buy:hover {
  background-color: #0065b8;
}

/*
  Ruby Page

  ========================================================================== */
/* line 1619, app/assets/stylesheets/custom.scss */
#ruby .undershadow {
  box-shadow: #dc5350 0px -4px 0px 0px inset;
}

/* line 1623, app/assets/stylesheets/custom.scss */
#ruby .hero {
  background-color: #54171c;
  background-image: url(/assets/courses/ruby/ruby-hero-red-57a8150672fddd0db34b3f3e5f1c046691d046289b5cfd5211131a40f9553aa8.jpg);
}

/* line 1627, app/assets/stylesheets/custom.scss */
#ruby .hero .version {
  color: white;
  background-color: #d74751;
}

/* line 1635, app/assets/stylesheets/custom.scss */
#ruby .course-modules .module .number {
  background-color: #dc5350;
}

/* line 1641, app/assets/stylesheets/custom.scss */
#ruby .button-buy {
  background-color: #dc5350;
}

/* line 1645, app/assets/stylesheets/custom.scss */
#ruby .button-buy:hover {
  background-color: #d83e3b;
}

/*
  LiveView Page

  ========================================================================== */
/* line 1656, app/assets/stylesheets/custom.scss */
#liveview .undershadow {
  box-shadow: #f57138 0px -4px 0px 0px inset;
}

/* line 1660, app/assets/stylesheets/custom.scss */
#liveview .hero {
  background-color: #f08519;
  background-image: url(/assets/courses/liveview/liveview-hero-orange-fire-6a101e6e40a6d46afe2b6879ca4ade82e3753290d8b34b00c5e3ed7555a8e817.jpg);
}

/* line 1666, app/assets/stylesheets/custom.scss */
#liveview .hero .version {
  color: white;
  background-color: #ed500c;
}

/* line 1674, app/assets/stylesheets/custom.scss */
#liveview .course-modules .module .number {
  background-color: #4b5563;
}

/* line 1680, app/assets/stylesheets/custom.scss */
#liveview .button-buy {
  background-color: #fb923c;
}

/* line 1684, app/assets/stylesheets/custom.scss */
#liveview .button-buy:hover {
  background-color: #f97316;
}

/* line 1688, app/assets/stylesheets/custom.scss */
#liveview input[type="email"]:focus,
#liveview input[type="text"]:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #f79369;
}

/*
  Phoenix Page

  ========================================================================== */
/* line 1701, app/assets/stylesheets/custom.scss */
#phoenix .undershadow {
  box-shadow: #f57138 0px -4px 0px 0px inset;
}

/* line 1705, app/assets/stylesheets/custom.scss */
#phoenix .hero {
  background-color: #f08519;
  background-image: url(/assets/courses/liveview/liveview-hero-orange-fire-6a101e6e40a6d46afe2b6879ca4ade82e3753290d8b34b00c5e3ed7555a8e817.jpg);
}

/* line 1711, app/assets/stylesheets/custom.scss */
#phoenix .hero .version {
  color: white;
  background-color: #ed500c;
}

/* line 1719, app/assets/stylesheets/custom.scss */
#phoenix .course-modules .module .number {
  font-size: 1rem;
  background-color: #f57138;
  height: 1.5rem;
  width: 1.5rem;
  padding: 1rem;
}

/* line 1727, app/assets/stylesheets/custom.scss */
#phoenix .course-modules .module .name {
  font-size: 1.125rem;
  font-weight: 400;
  color: #111827;
  margin-left: 0.75rem;
}

/* line 1734, app/assets/stylesheets/custom.scss */
#phoenix .course-modules .module .free {
  margin-left: 1rem;
  background-color: #fed7aa;
  color: black;
  font-weight: 500;
  font-size: 0.65rem;
  padding: 0.35rem 0.35rem;
  border-radius: 0.125rem;
  text-transform: uppercase;
  box-shadow: none;
  line-height: 1;
  letter-spacing: 0em;
}

/* line 1747, app/assets/stylesheets/custom.scss */
#phoenix .course-modules .module .free:hover {
  background-color: #fdba74;
  cursor: pointer;
}

/* line 1752, app/assets/stylesheets/custom.scss */
#phoenix .course-modules .module .free a {
  color: #c2410c;
  text-decoration: none !important;
}

/* line 1760, app/assets/stylesheets/custom.scss */
#phoenix .button-get-notified {
  background-color: #f57138;
  text-transform: none;
}

/* line 1765, app/assets/stylesheets/custom.scss */
#phoenix .button-get-notified:hover {
  background-color: #f35f20;
}

/* line 1769, app/assets/stylesheets/custom.scss */
#phoenix .button-buy {
  background-color: #fb923c;
}

/* line 1773, app/assets/stylesheets/custom.scss */
#phoenix .button-buy:hover {
  background-color: #f97316;
}

/* line 1777, app/assets/stylesheets/custom.scss */
#phoenix input[type="email"]:focus,
#phoenix input[type="text"]:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #f57138;
}

/* line 1783, app/assets/stylesheets/custom.scss */
#phoenix li::marker {
  color: #f57138;
}

/*
  Hotwire Page

  ========================================================================== */
/* line 1794, app/assets/stylesheets/custom.scss */
#hotwire .undershadow {
  box-shadow: #dc5350 0px -4px 0px 0px inset;
}

/* line 1807, app/assets/stylesheets/custom.scss */
#hotwire p.mike {
  color: #374151;
  font-size: 1.25rem;
}

/* line 1813, app/assets/stylesheets/custom.scss */
#hotwire .hero {
  background-color: #f08519;
  background-image: url(/assets/courses/hotwire/hotwire-hero-fire-7e20308c8913ea70cc985628fc9882447bbc98af36258f63f0e85acabb00d115.jpg);
  min-height: 150px;
  background-position: center bottom;
}

/* line 1819, app/assets/stylesheets/custom.scss */
#hotwire .hero h1 {
  color: #dc5350;
  text-shadow: none;
  font-size: 3rem;
}

/* line 1825, app/assets/stylesheets/custom.scss */
#hotwire .hero h2 {
  font-size: 1.5rem;
  text-shadow: 6px 6px 4px rgba(0, 0, 0, 0.2);
  color: #f3f4f6;
}

/* line 1831, app/assets/stylesheets/custom.scss */
#hotwire .hero .version {
  background-color: #a62321;
}

/* line 1838, app/assets/stylesheets/custom.scss */
#hotwire .course-modules .module .number {
  background-color: #dc5350;
}

/* line 1844, app/assets/stylesheets/custom.scss */
#hotwire .button-buy {
  background-color: #dc5350;
}

/* line 1848, app/assets/stylesheets/custom.scss */
#hotwire .button-buy:hover {
  background-color: #d83e3b;
}

/* line 1852, app/assets/stylesheets/custom.scss */
#hotwire input[type="email"]:focus,
#hotwire input[type="text"]:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #e57d7b;
}

@media screen and (min-width: 768px) {
  /* line 1861, app/assets/stylesheets/custom.scss */
  .course-page #hotwire .hero h1 {
    font-size: 3.75rem;
  }
  /* line 1865, app/assets/stylesheets/custom.scss */
  .course-page #hotwire .hero h2 {
    font-size: 1.875rem;
  }
}
/* line 4, app/assets/stylesheets/syntax-highlighter.scss */
.highlighter-rouge .highlight {
  background: inherit;
}

/* line 9, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight {
  /* Literal.String */
  /* Literal.String.Backtick */
  /* Literal.String.Char */
  /* Literal.String.Doc */
  /* Literal.String.Single */
  /* Literal.String.Double */
  /* Literal.String.Escape */
  /* Literal.String.Interpol */
  /* Literal.String.Other */
  /* Literal.String.Regex */
  /* Literal.String.Symbol */
  /* Literal.Number */
  /* Literal.Number.Float */
  /* Literal.Number.Hex */
  /* Literal.Number.Integer */
  /* Literal.Number.Oct */
  /* Literal.Number.Integer.Long */
  /* Name */
  /* Name.Builtin.Pseudo */
  /* Name.Attribute */
  /* Name.Builtin */
  /* Name.Class */
  /* Name.Constant */
  /* Name.Decorator */
  /* Name.Entity */
  /* Name.Function */
  /* Name.Namespace */
  /*  Name.Tag */
  /* Name.Variable */
  /* Name.Other */
  /* Name.Variable.Class */
  /* Name.Variable.Global */
  /* Name.Variable.Instance */
  /* Comment */
  /* Comment.Single */
  /* Comment.Multiline */
  /* Comment.Preproc */
  /* Comment.Special */
  /* Keyword */
  /* Keyword.Constant */
  /* Keyword.Declaration */
  /* Keyword.Namespace */
  /* Keyword.Pseudo */
  /* Keyword.Reserved */
  /* Keyword.Type */
  /* .err { color: #F00000; background-color: #F0A0A0 } */
  /* Generic.Deleted */
  /* Generic.Emph */
  /* Generic.Error */
  /* Generic.Heading */
  /* Generic.Inserted */
  /* Generic.Output */
  /*  Generic.Prompt */
  /* Generic.Strong */
  /* Generic.Subheading */
  /* Generic.Traceback */
  /* Operator */
  /* Operator Word */
  /* Text.Whitespace */
}

/* line 15, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .hll {
  background-color: #ffffcc;
}

/* line 20, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .s {
  color: #15803d;
}

/* line 25, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .sb {
  color: #15803d;
}

/* line 30, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .sc {
  color: #15803d;
}

/* line 35, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .sd {
  color: #15803d;
}

/* line 40, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .s1 {
  color: #15803d;
}

/* line 45, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .s2 {
  color: #15803d;
}

/* line 50, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .se {
  color: #15803d;
}

/* line 55, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .si {
  color: #15803d;
}

/* line 60, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .sx {
  color: #15803d;
}

/* line 65, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .sr {
  color: #15803d;
}

/* line 70, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .ss {
  color: #9a3412;
  /* font-weight: 700; */
}

/* line 76, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .m {
  color: #be123c;
}

/* line 81, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .mf {
  color: #be123c;
}

/* line 86, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .mh {
  color: #be123c;
}

/* line 91, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .mi {
  color: #be123c;
}

/* line 96, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .mo {
  color: #be123c;
}

/* line 101, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .il {
  color: #be123c;
}

/* line 106, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .n {
  color: #3f3f46;
}

/* line 111, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .bp {
  color: #0d9488;
}

/* line 116, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .na {
  color: #3f3f46;
}

/* line 121, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .nb {
  color: #3f3f46;
}

/* line 126, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .nc {
  color: #3730a3;
}

/* line 131, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .no {
  color: #3730a3;
}

/* line 136, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .nd {
  color: #3f3f46;
}

/* line 141, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .ni {
  color: #991b1b;
  font-weight: 700;
}

/* line 147, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .nf {
  color: #3f3f46;
  /* font-weight: 700; */
}

/* line 153, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .nn {
  color: #0d9488;
}

/* line 158, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .nt {
  color: #3730a3;
  /* font-weight: 700; */
}

/* line 164, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .nv {
  color: #3730a3;
}

/* line 169, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .nx {
  color: #3f3f46;
}

/* line 174, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .vc {
  color: #3730a3;
}

/* line 179, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .vg {
  color: #0d9488;
}

/* line 184, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .vi {
  color: #0d9488;
}

/* line 189, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .c {
  color: #71717a;
  font-style: italic;
}

/* line 195, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .c1 {
  color: #71717a;
  font-style: italic;
}

/* line 201, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .cm {
  color: #71717a;
  font-style: italic;
}

/* line 207, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .cp {
  color: #3f3f46;
}

/* line 212, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .cs {
  color: #71717a;
  font-style: italic;
}

/* line 218, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .k {
  color: #0284c7;
  font-weight: 700;
}

/* line 224, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .kc {
  color: #0284c7;
  font-weight: 700;
}

/* line 230, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .kd {
  color: #0284c7;
  font-weight: 700;
}

/* line 236, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .kn {
  color: #0284c7;
  font-weight: 700;
}

/* line 242, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .kp {
  color: #0284c7;
  font-weight: 700;
}

/* line 248, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .kr {
  color: #0284c7;
  font-weight: 700;
}

/* line 254, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .kt {
  color: #0d9488;
}

/* line 261, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .gd {
  color: #991b1b;
}

/* line 266, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .ge {
  font-style: italic;
}

/* line 271, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .gr {
  color: #991b1b;
}

/* line 276, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .gh {
  color: #3f3f46;
  font-weight: 700;
}

/* line 282, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .gi {
  color: #15803d;
}

/* line 287, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .go {
  color: #71717a;
}

/* line 292, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .gp {
  color: #3f3f46;
}

/* line 297, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .gs {
  font-weight: 700;
}

/* line 302, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .gu {
  color: #3f3f46;
  font-weight: 700;
}

/* line 308, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .gt {
  color: #991b1b;
}

/* line 317, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .ow {
  color: #0284c7;
  font-weight: 700;
}

/* line 323, app/assets/stylesheets/syntax-highlighter.scss */
.code-highlight .w {
  color: #3f3f46;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */