@media screen {
  /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  /* Document
     ========================================================================== */
  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in
   *    IE on Windows Phone and in iOS.
   */
  html {
    line-height: 1.15; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  /* Sections
     ========================================================================== */
  /**
   * Remove the margin in all browsers (opinionated).
   */
  body {
    margin: 0;
  }
  /**
   * Add the correct display in IE 9-.
   */
  article,
  aside,
  footer,
  header,
  nav,
  section {
    display: block;
  }
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  /* Grouping content
     ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   * 1. Add the correct display in IE.
   */
  figcaption,
  figure,
  main { /* 1 */
    display: block;
  }
  /**
   * Add the correct margin in IE 8.
   */
  figure {
    margin: 1em 40px;
  }
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  /* Text-level semantics
     ========================================================================== */
  /**
   * 1. Remove the gray background on active links in IE 10.
   * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
   */
  a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
  }
  /**
   * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  /**
   * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
   */
  b,
  strong {
    font-weight: inherit;
  }
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  b,
  strong {
    font-weight: bolder;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  /**
   * Add the correct font style in Android 4.3-.
   */
  dfn {
    font-style: italic;
  }
  /**
   * Add the correct background and color in IE 9-.
   */
  mark {
    background-color: #ff0;
    color: #000;
  }
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  /* Embedded content
     ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   */
  audio,
  video {
    display: inline-block;
  }
  /**
   * Add the correct display in iOS 4-7.
   */
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  /**
   * Remove the border on images inside links in IE 10-.
   */
  img {
    border-style: none;
  }
  /**
   * Hide the overflow in IE.
   */
  svg:not(:root) {
    overflow: hidden;
  }
  /* Forms
     ========================================================================== */
  /**
   * 1. Change the font styles in all browsers (opinionated).
   * 2. Remove the margin in Firefox and Safari.
   */
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  button,
  input { /* 1 */
    overflow: visible;
  }
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  button,
  select { /* 1 */
    text-transform: none;
  }
  /**
   * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
   *    controls in Android 4.
   * 2. Correct the inability to style clickable types in iOS and Safari.
   */
  button,
  html [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button; /* 2 */
  }
  /**
   * Remove the inner border and padding in Firefox.
   */
  button::-moz-focus-inner,
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  /**
   * Restore the focus styles unset by the previous rule.
   */
  button:-moz-focusring,
  [type=button]:-moz-focusring,
  [type=reset]:-moz-focusring,
  [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  /**
   * Correct the padding in Firefox.
   */
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  /**
   * 1. Add the correct display in IE 9-.
   * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
  }
  /**
   * Remove the default vertical scrollbar in IE.
   */
  textarea {
    overflow: auto;
  }
  /**
   * 1. Add the correct box sizing in IE 10-.
   * 2. Remove the padding in IE 10-.
   */
  [type=checkbox],
  [type=radio] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  [type=search] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  /**
   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
   */
  [type=search]::-webkit-search-cancel-button,
  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /* Interactive
     ========================================================================== */
  /*
   * Add the correct display in IE 9-.
   * 1. Add the correct display in Edge, IE, and Firefox.
   */
  details,
  menu {
    display: block;
  }
  /*
   * Add the correct display in all browsers.
   */
  summary {
    display: list-item;
  }
  /* Scripting
     ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   */
  canvas {
    display: inline-block;
  }
  /**
   * Add the correct display in IE.
   */
  template {
    display: none;
  }
  /* Hidden
     ========================================================================== */
  /**
   * Add the correct display in IE 10-.
   */
  [hidden] {
    display: none;
  }
  /**
  * Animations
  *
  * Keyframes from animate.css
  *
  * Inline the animation name with the CSS
  *
  * 1. Base - Use for inline HTML animations
  *
  * 2. a-fade-in
  *
  * 3. a-fade-in-up
  *
  * 4. a-slide-in-right
  *
  * 5. a-zoom-in
  *
  * 6. a-slide-in-up
  *
  * 7. a-slide-out-down
  *
  * 8. a-slight-fade-in-up
  *
  * 9. a-fade-in-up-20
  *
  * 10. scale-in
  *
  */
  /* ==========================================================================
    1. Base
    ========================================================================== */
  html:not([data-turbo-preview]) .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .animated--half {
    animation-duration: 0.5s;
  }
  /* ==========================================================================
     2. a-fade-in
     ========================================================================== */
  @keyframes a-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* ==========================================================================
     3. a-fade-in-up
     ========================================================================== */
  @keyframes a-fade-in-up {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* ==========================================================================
     4. a-slide-in-right
     ========================================================================== */
  @keyframes a-slide-in-right {
    from {
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }
  .a-slide-in-right-05 {
    animation: a-slide-in-right 0.5s;
  }
  /* ==========================================================================
  4. a-slide-in-right-320
  ========================================================================== */
  @keyframes a-slide-in-right-320 {
    from {
      transform: translateX(-320px);
      visibility: visible;
    }
    to {
      transform: translateX(0);
    }
  }
  /* ==========================================================================
  4. a-slide-in-right-360
  ========================================================================== */
  @keyframes a-slide-in-right-360 {
    from {
      transform: translateX(360px);
      visibility: visible;
    }
    to {
      transform: translateX(0);
    }
  }
  .c-library-filters {
    animation: a-slide-in-right-360 0.5s;
  }
  /* ==========================================================================
     5. a-zoom-in
     ========================================================================== */
  @keyframes a-zoom-in {
    from {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
      opacity: 1;
    }
  }
  /* ==========================================================================
     6. a-slide-in-up
     ========================================================================== */
  @keyframes a-slide-in-up {
    from {
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }
    to {
      transform: translate3d(0, 0, 0);
    }
    100% {
      display: none;
    }
  }
  .a-slide-in-up {
    animation-name: a-slide-in-up;
  }
  /* ==========================================================================
     7q. a-slide-out-down
     ========================================================================== */
  @keyframes a-slide-out-down {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      visibility: hidden;
      transform: translate3d(0, 100%, 0);
    }
  }
  .a-slide-out-down {
    animation-name: a-slide-out-down;
  }
  /* ==========================================================================
     7b. a-slide-in-down
     ========================================================================== */
  @keyframes a-slide-in-down {
    from {
      transform: translateY(-1000px);
    }
    to {
      transform: translateY(0);
    }
  }
  .a-slide-in-down {
    animation-name: a-slide-in-down;
  }
  /* ==========================================================================
     8. a-slight-fade-in-up
     ========================================================================== */
  @keyframes a-slight-fade-in-up {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .c-library-filters .dropdown-menu, .o-dropdown-menu {
    animation: a-slight-fade-in-up 0.25s;
  }
  /* ==========================================================================
  9. a-fade-in-up--10
  ========================================================================== */
  @keyframes a-fade-in-up--10 {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  section.home-hero .home-hero__testimonial, section.home-hero .home-hero__wrapper {
    animation: a-fade-in-up-20 1s;
  }
  .a-fade-in-up--10 {
    animation: a-fade-in-up-20 1s;
  }
  /* ==========================================================================
  9. a-fade-in-up-20
  ========================================================================== */
  @keyframes a-fade-in-up-20 {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  article.c-written-tutorial .c-written-tutorial__content, article.c-written-tutorial header, .l-collection-hero .l-collection-hero__copy {
    animation: a-fade-in-up-20 2s;
  }
  .a-fade-in-up-20 {
    animation: a-fade-in-up-20 2s;
  }
  /* ==========================================================================
  9. a-fade-in-down-20
  ========================================================================== */
  @keyframes a-fade-in-down-20 {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  section.home-hero:after {
    animation: a-fade-in-down-20 2s;
  }
  .a-fade-in-down-20 {
    animation: a-fade-in-down-20 2s;
  }
  /* ==========================================================================
  9. a-fade-in-down-80
  ========================================================================== */
  @keyframes a-fade-in-down-80 {
    from {
      opacity: 0;
      transform: translateY(-80px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .a-fade-in-down-80 {
    animation: a-fade-in-down-80 2s;
  }
  /* ==========================================================================
  9. a-scale-in
  ========================================================================== */
  @keyframes a-scale-in {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  article.c-written-tutorial header .c-written-tutorial__artwork, .c-video-player__paywall .c-video-player__paywall-wrapper, .c-video-player__complete .c-video-player__complete-wrapper, .c-video-player .c-video-player__video .c-video-player__preloader, .c-price-card, section.home-hero .home-hero__action, .l-collection-hero .l-collection-hero__artwork, .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork {
    animation: a-scale-in 1.5s;
  }
  /* ==========================================================================
  10. a-scale-in-plain
  ========================================================================== */
  @keyframes a-scale-in-plain {
    from {
      transform: scale(0.9);
    }
    to {
      transform: scale(1);
    }
  }
  article.c-written-tutorial header .c-written-tutorial__artwork, .c-video-player__paywall .c-video-player__paywall-wrapper, .c-video-player__complete .c-video-player__complete-wrapper, .c-video-player .c-video-player__video .c-video-player__preloader, .c-price-card, section.home-hero .home-hero__action, .l-collection-hero .l-collection-hero__artwork, .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork {
    animation: a-scale-in-plain 1.5s;
  }
  /* ==========================================================================
  11a. a-scale-in
  ========================================================================== */
  @keyframes a-scale-in-small {
    from {
      opacity: 0;
      transform: scale(0.99);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .c-empty-state, .c-search__no-results, .c-search__loading, .c-global-search .c-global-search__input input, html:not([data-turbo-preview]) .c-tutorial-item {
    animation: a-scale-in-small 0.75s;
  }
  .a-scale-in-small {
    animation: a-scale-in-small 0.75s;
  }
  /* ==========================================================================
  11b. a-scale-in--large
  ========================================================================== */
  @keyframes a-scale-in-large {
    from {
      opacity: 0;
      transform: scale(0.1);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  .a-scale-in-large {
    animation: a-scale-in-large 0.75s;
  }
  /* ==========================================================================
  12. File rotate 30
  ========================================================================== */
  @keyframes a-file-rotate {
    0% {
      transform: translateX(0) translateY(0);
    }
    25% {
      transform: translateX(30px);
    }
    50% {
      transform: translateX(30px) translateY(30px);
    }
    75% {
      transform: translateX(0px) translateY(30px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
  .c-search__loading .c-search__loading-animate img {
    animation: a-file-rotate 3s infinite;
  }
  .a-file-rotate {
    animation: a-file-rotate 3s infinite;
  }
  /* ==========================================================================
  12. File rotate 5
  ========================================================================== */
  @keyframes a-file-rotate--5 {
    0% {
      transform: translateX(0) translateY(0);
    }
    25% {
      transform: translateX(5px);
    }
    50% {
      transform: translateX(5px) translateY(5px);
    }
    75% {
      transform: translateX(0px) translateY(5px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
  .a-file-rotate--5 {
    animation: a-file-rotate--5 3s infinite;
  }
  /* ==========================================================================
  13. a-fade-out
  ========================================================================== */
  @keyframes a-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  /* ==========================================================================
  14. pulse
  ========================================================================== */
  @keyframes a-pulse {
    0% {
      background-color: rgba(33, 33, 33, 0.75);
    }
    50% {
      background-color: rgb(21, 132, 67);
    }
    100% {
      background-color: rgba(33, 33, 33, 0.75);
    }
  }
  .a-pulse {
    animation: a-pulse 3s infinite;
  }
  /* ==========================================================================
  14. a-background-gradient
  ========================================================================== */
  @keyframes a-background-gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  /**
   * This file contains all application-wide Sass variables.
   *
   * 1. Fonts
   *
   * 2a. Colors
   *
   * 2b. Highlighter Colors
   *
   * 3. Elements
   */
  /* ==========================================================================
     1. Fonts
     ========================================================================== */
  /**
   * This file contains the font-face definitions for the fonts used across the site
   *
   * It was generated using http://google-webfonts-helper.herokuapp.com/fonts
   *
   * Remember to include latin-ext, primarily for names.
   *
   * 1. Bitter
   * 2. IBM Plex Sans
   * 3. IBM Plex Serif
   */
  /* NOTE
   *
   * Creating these fonts (Bitter) was somewhat challenging, because they were updated in
   * Google Fonts with different spacing and weight. It was then very hard to find the
   * original font with the appropriate character set.
   * This directory contains the OTF files that we need.
   * You can use https://everythingfonts.com/subsetter to extract the appropriate subset
   * (Latin Extended) and then https://kombu.kanejaku.org to create the WOFF and WOFF2 versions
   * Current settings on the subset generator:
   *
   * - Basic Latin
   * - Latin-1 Supplement
   * - Advanced Punctuation
   * - Uppercase
   * - Lowercase
   * - Numerals
   * - Basic Punctuation
   * - Currency Symbols
   * - Latin Extended-A
   * - Latin Extended-B
   */
  /* ==========================================================================
     1. Bitter
     ========================================================================== */
  /* bitter-regular - latin-ext_latin */
  @font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/bitter-1.300-latin_ext-regular-ea79c0f752f7656ce3694dca8312fcb969f83cbe92ca5298c5920ccffb126c5d.woff2) format("woff2"), url(/assets/bitter-1.300-latin_ext-regular-eecfd6c3af651231104ba7ae58079c215e1d4c00b80b2ff0e95ae0cbec63452c.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* bitter-italic - latin-ext_latin */
  @font-face {
    font-family: "Bitter";
    font-style: italic;
    font-weight: 400;
    src: url(/assets/bitter-1.002-latin_ext-italic-f4a1b872a93d98cd9f7865f20340e22e936f3634fb142e2372b4598c98def35a.woff2) format("woff2"), url(/assets/bitter-1.002-latin_ext-italic-a6485dae55bfcf03d80c0b42c15a8555767d700b3be2db1a24bcbff003d2c606.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* bitter-700 - latin-ext_latin */
  @font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 700;
    src: url(/assets/bitter-2.110-latin_ext-700-041b7c53b2f3ed8e2378eaef2841cfad596a7cf6af87bd91f96c9c3b26eec206.woff2) format("woff2"), url(/assets/bitter-2.110-latin_ext-700-57857445d4419a791376b73c9bdb14606d59d2aa09a947120d1b6a1e58965e42.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ==========================================================================
     2. IBM Plex Sans
     ========================================================================== */
  /* ibm-plex-sans-regular - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-regular-4126890a77928150a6f3be017f23c93df16f56e6940a72f231823ba29d2ee998.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-regular-3213dca28efc701a797f1a261a9377b0c530a9ae3cfb72b187d1194f3bd196d3.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ibm-plex-sans-500 - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-500-04aba1eb9b084332715891b2a764459df24188e66731279bad286bbe1447e5e8.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-500-2827cf78c931acdac08d21fb21e3c1531fda43e342b49055f9a312cf336f366c.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ibm-plex-sans-700 - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-700-946ed95688a6677fb113b84ac50ef140b42971e05e4da335a3ead116a7c9886b.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-700-7dbcb16e805e3c4e19b6afc0fbe96a730c7229f129c00e1b239eda58b12f6063.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ==========================================================================
     3. IBM Plex Serif
     ========================================================================== */
  /* ibm-plex-serif-regular - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-regular-e4f826dc262e20e2114e3637d5cab104d4851dee74421c968a6e29d6be2d8b0b.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-regular-98933eb8c158bbfc91428e8e37644e6f906422073f220313353a4ae476c3bbfd.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ibm-plex-serif-500 - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 500;
    src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-500-dcab0f62c8194ccb39b97113223f99f294112e0d173b18918c31f3494c203456.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-500-ae2864b567a0cfaee3af57d9a8a800a374db2a8aee962b54bbcbf83d1c90fa15.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ibm-plex-serif-700 - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 700;
    src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-700-ec4d87dbc9136c02618bd6878955a63e40207541c72e5109137d56e28ea65b3f.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-700-cf316807d947f5b6ef4492a9ce6ec4a2f348ec1acf64a481cd6f0fbecb846ad0.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ==========================================================================
     4. IBM Plex Mono
     ========================================================================== */
  /* ibm-plex-mono-medium */
  @font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    src: url(/assets/ibm-plex-mono-v1-500-ba9db195c954509bda2236e0303e51b261b85aef320cb28134ed97155de85914.woff2) format("woff2"), url(/assets/ibm-plex-mono-v1-500-37d084bbe45275af60e08db241605f8a7949a8ebc76074954fd9b02b72aa4857.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ==========================================================================
     2a. Colors
     ========================================================================== */
  /* Blacks */
  /* Greys */
  /* Greens */
  /* Blues */
  /* Reds */
  /* Purples */
  /* Teals */
  /* Yellows */
  /* Brands */
  /* Gradients */
  /* ==========================================================================
     2b. Highlighter Colors
     ========================================================================== */
  /* ==========================================================================
     3. Elements
     ========================================================================== */
  /**
   * Consult bourbon.io for a comprehensive list of available mixins before adding one here
   *
   * 1. Card - Used for nearly every container as a background
   *
   * 2. Breakpoints - Powerful mixin with five presets for common screen sizes
   *
   * 3. Position Absolute - A full width/height pseudo element fill
   *
   * 4. Border Hover
   *
   * 5. Mobile scroll - Make overflow scroll springy on mobile
   *
   */
  /* ==========================================================================
    1. Card
    ========================================================================== */
  /* ==========================================================================
   2. Breakpoints
   ========================================================================== */
  /* ==========================================================================
     3. Pseudo element absolute
     ========================================================================== */
  /* ==========================================================================
    4. Border Hover
    ========================================================================== */
  /* ==========================================================================
  5. Mobile scroll
  ========================================================================== */
  /* ==========================================================================
  6. Hide Scrollbar
  ========================================================================== */
  /**
   * A thin layer on top of normalize.css
   */
  html {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  figure,
  p,
  pre {
    margin: 0;
  }
  a, button {
    transition: all 0.3s ease-out;
  }
  button {
    background: transparent;
    border: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  input:focus, button:focus, li:focus, a:focus, span:focus {
    outline: 0;
  }
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  iframe {
    border: 0;
  }
  ol,
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  ol {
    list-style: decimal;
  }
  ol li {
    margin-top: 10px;
  }
  ol li:first-child {
    margin-top: 0;
  }
  input,
  textarea,
  select {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    -webkit-appearance: none;
  }
  /**
   * Suppress the focus outline on elements that cannot be accessed via keyboard.
   * This prevents an unwanted focus outline from appearing around elements that
   * might still respond to pointer events.
   */
  [tabindex="-1"]:focus {
    outline: none !important;
  }
  /**
   * Standardise SVG rendering
   */
  svg g, svg path {
    fill: inherit;
  }
  svg.icon {
    width: 32px;
    height: 32px;
  }
  /**
   * Sets some base rules for typography
   */
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-display: auto;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.45;
    color: #333333;
    -webkit-backface-visibility: hidden;
    text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4, h5 {
    font-family: "Bitter", serif;
    font-display: auto;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  h1 {
    font-size: 3rem;
    line-height: 1.125;
  }
  /**
   *
   *
   *
   * Base styles for common menu elements
   *
   * To modify use custom -l classes on html element
   *
   *
   * 1. Dropdown
   *
   * 2. Dropdown (Dark)
   *
   * 3. Dropdown Actions
   *
   *
   */
  /* ==========================================================================
    1. Dropdown
    ========================================================================== */
  /* ==========================================================================
     3. Dropdown Actions
     ========================================================================== */
  /**
   *
   * DO NOT EDIT BASE
   *
   * Add additional color classes if required
   *
   * Every button you'll ever need can be created from these o-button classes
   *
   * To modify use custom -l classes on html element
   *
   * Can be used for 'a' and 'button' html tags
   *
   * 1. Base button
   *
   * 2. Colors
   *
   * 3a. Size
   *
   * 3b. Shape
   *
   * 4. Icons within buttons with text - customise the icon color and background
   *
   * 5. Loaders within buttons -
   *
   * 6. Single button icons no text - eg. menu, close
   *
   * 7. Video
   *
   * 8. Badge / Button - Eg. Copy
   *
   * 9. Mobile menu
   *
   * 10. Bookmark
   *
   * Custom layouts
   *
   */
  /* ==========================================================================
     Base
     ========================================================================== */
  /* ==========================================================================
     Colors
     ========================================================================== */
  /* ==========================================================================
     3a. Size
     ========================================================================== */
  /* ==========================================================================
     3b. Shape
     ========================================================================== */
  /* ==========================================================================
     4. Icons
     ========================================================================== */
  /* ==========================================================================
     Loaders
     ========================================================================== */
  /* ==========================================================================
     Single button icons no text
     ========================================================================== */
  /* ==========================================================================
  Text buttons with no background
  ========================================================================== */
  /* Apply to inside label span only */
  /* ==========================================================================
  Text buttons with background on hover
  ========================================================================== */
  /* ==========================================================================
     Buttons inside input elements eg. password show
     ========================================================================== */
  /* ==========================================================================
     7. Video
     ========================================================================== */
  /* ==========================================================================
  8. Badge / Button - Eg. Copy
  ========================================================================== */
  /* ==========================================================================
  8. Button for Code Blocks
  ========================================================================== */
  /* ==========================================================================
  9. Mobile menu
  ========================================================================== */
  /* ==========================================================================
  10. Close
  ========================================================================== */
  /* ==========================================================================
  11. Bookmarks
  ========================================================================== */
  /* ==========================================================================
  12. Share Buttons
  ========================================================================== */
  /* ==========================================================================
  13. How to
  ========================================================================== */
  /* ==========================================================================
  14. Start of content
  ========================================================================== */
  /* ==========================================================================
  15. Chapter buttons
  ========================================================================== */
  /* ==========================================================================
  15. Disclose
  ========================================================================== */
  /* ==========================================================================
  Custom layouts for buttons
  ========================================================================== */
  /* A hack for buttons that need to wrap their children in a span */
  /* ==========================================================================
  Custom layouts for button icons
  ========================================================================== */
  /* Misc */
  /* Arrows */
  /* Search */
  /* Social */
  /**
  *
  * DO NOT EDIT BASE
  *
  * Add additional color classes if required
  *
  * Every badge you'll ever need can be created from these o-button classes
  *
  *
  * Can be used for span html tags
  *
  * 1. Base badge
  *
  * 2. Video badge
  *
  * 3. Tutorial badge // Can be used to display author profile, number or checkmark
  *
  */
  /* ==========================================================================
  Base
  ========================================================================== */
  /* ==========================================================================
  Video badge
  ========================================================================== */
  /* ==========================================================================
  Tutorial badge
  ========================================================================== */
  /* ==========================================================================
  Product badge
  ========================================================================== */
  /* ==========================================================================
  Pro badge
  ========================================================================== */
  /* ==========================================================================
  New badge
  ========================================================================== */
  /* ==========================================================================
  Completed badge
  ========================================================================== */
  /**
   * Form inputs
   *
   * Generic styles for form inputs always used on a white background
   *
   * Can build any form using the following objects
   *
   * To modify layout eg. width use custom -l classes on html element
   *
   * 1. Form label
   *
   * 2. Input and textarea
   *
   * 3a. Checkbox (Simple)
   * 
   * 3b. Checkbox (Toggle)
   *
   * 4. Validation
   *
   */
  /* ==========================================================================
     1. Form label
     ========================================================================== */
  /* ==========================================================================
     2. Regular input and textarea
     ========================================================================== */
  /* ==========================================================================
     3a. Checkbox (Simple)
     ========================================================================== */
  /* ==========================================================================
     3b. Checkbox (Toggle)
     ========================================================================== */
  /* ==========================================================================
     4. Validation
     ========================================================================== */
  /* ==========================================================================
  5. Dropdown
  ========================================================================== */
  /**
   * Loading Animations
   *
   * DO NOT EDIT
   *
   * To change size color use layout classes
   *
   * 1. Pulse
   *
   * 2. Circle
   *
   * 3. Dots
   *
   */
  /* ==========================================================================
  1. Pulse
  ========================================================================== */
  /* ==========================================================================
  2. Circle
  ========================================================================== */
  /* ==========================================================================
  3. Dots
  ========================================================================== */
  /**
   * Images
   *
   * 1. Logo
   *
   * 2. Rounded - Adds rounded border to image or figure wrapper
   *
   * 3. Profile - Common sizes for avatars and profile photos
   *
   * 4. Screenshot
   */
  /* ==========================================================================
  1. Logo
  ========================================================================== */
  /* ==========================================================================
  2. Rounded
  ========================================================================== */
  /* ==========================================================================
  3. Profile
  ========================================================================== */
  /* ==========================================================================
  4. Screenshot
  ========================================================================== */
  /**
   * Custom tables
   *
   * For tables that have multiple columns add a custom class for the column width and flexbox will do the rest
   *
   * Styles for tables are found in components/lists.scss 
   *
   * 1. Receipts table
   *
   */
  /* ==========================================================================
     1. Receipts table  
     ========================================================================== */
  /**
   * This file contains all colour definitions.
   *
   * 1. Colours
   * 2. Highlighter Colours
   *
   */
  /* ==========================================================================
      1. Colours
     ========================================================================== */
  /* Black */
  /* Dark mode input */
  /* Dark mode hover */
  /* Dark mode borders */
  /* Grey */
  /* Main Brand Grey */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Blue */
  /* Light Flutter Colour */
  /* Light Flutter 50% opacity */
  /* Light Flutter colour equivalent for 50% opacity on dark background */
  /* Dark Flutter Colour */
  /* Brown */
  /* Green */
  /* Light Android Colour */
  /* Light Android 50% opacity */
  /* Light Android colour equivalent for 50% opacity on dark background */
  /* Dark Android Colour */
  /* Grey */
  /* Main Brand Grey */
  /*Main Brand Grey at 20% opacity */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Orange */
  /* Main Brand Colour */
  /* Brand Light Orange */
  /* Brand Light Orange with 20% opacity */
  /* Brand Dark Orange */
  /* Pink */
  /* Light Server-Side Swift Colour */
  /* Dark Server-Side Swift Colour */
  /* Purple */
  /* Light iOS Colour */
  /* Light iOS 50% opacity */
  /* Light iOS colour equivalent for 50% opacity on dark background */
  /* Dark iOS Colour */
  /* Light Game Tech Colour */
  /* Dark Game Tech Colour */
  /* Red */
  /* Teal */
  /* White */
  /* Yellow */
  /* Light Pro-Gro Colour */
  /* Dark Pro-Gro Colour */
  /* ==========================================================================
      2. Highlighter Colours
     ========================================================================== */
  /**
   * Feedback banners and messages
   *
   * Notify the user when they've made a change via a form or to highlight news and announcements
   *
   * 1. Base DO NOT EDIT
   *
   * 2. Class Modifiers for success, warning, danger and info messages
   *
   * X. Custom layout classes
   */
  /* ==========================================================================
    1. Base
    ========================================================================== */
  /* ==========================================================================
    2. Class Modifiers for success, warning, danger and info messages
    ========================================================================== */
  /* ==========================================================================
    X. Custom layout classes
    ========================================================================== */
  /**
   * 
   * DO NOT EDIT BASE
   *
   * Add additional color classes if required
   *
   * To modify use custom -l classes on html element
   *
   * 1. Progress Indicator
   * 
   * 2. Progress Indicator (HTML)
   *
   *	
   **/
  /* ==========================================================================
    1. Progress Indicator
    ========================================================================== */
  /* ==========================================================================
     2. Progress Indicator (HTML)
     ========================================================================== */
  /**
   *
   * DO NOT EDIT BASE
   *
   * Add additional color classes if required
   *
   * Every tag you'll ever need can be created from these o-tag classes
   *
   * To modify use custom -l classes on html element
   *
   * Can be used for 'a' and 'button' html tags
   *
   * 1. Base tag
   *
   *
   */
  /* ==========================================================================
     Base
     ========================================================================== */
  /**
   * This file contains all colour definitions.
   *
   * 1. Colours
   * 2. Highlighter Colours
   *
   */
  /* ==========================================================================
      1. Colours
     ========================================================================== */
  /* Black */
  /* Dark mode input */
  /* Dark mode hover */
  /* Dark mode borders */
  /* Grey */
  /* Main Brand Grey */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Blue */
  /* Light Flutter Colour */
  /* Light Flutter 50% opacity */
  /* Light Flutter colour equivalent for 50% opacity on dark background */
  /* Dark Flutter Colour */
  /* Brown */
  /* Green */
  /* Light Android Colour */
  /* Light Android 50% opacity */
  /* Light Android colour equivalent for 50% opacity on dark background */
  /* Dark Android Colour */
  /* Grey */
  /* Main Brand Grey */
  /*Main Brand Grey at 20% opacity */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Orange */
  /* Main Brand Colour */
  /* Brand Light Orange */
  /* Brand Light Orange with 20% opacity */
  /* Brand Dark Orange */
  /* Pink */
  /* Light Server-Side Swift Colour */
  /* Dark Server-Side Swift Colour */
  /* Purple */
  /* Light iOS Colour */
  /* Light iOS 50% opacity */
  /* Light iOS colour equivalent for 50% opacity on dark background */
  /* Dark iOS Colour */
  /* Light Game Tech Colour */
  /* Dark Game Tech Colour */
  /* Red */
  /* Teal */
  /* White */
  /* Yellow */
  /* Light Pro-Gro Colour */
  /* Dark Pro-Gro Colour */
  /* ==========================================================================
      2. Highlighter Colours
     ========================================================================== */
  /**
  * This file contains the font-face definitions for the fonts used across the site
  *
  * Web Fonts from colophon-foundry.org
  *
  * The fonts included in this stylesheet are subject to the End User License you purchased
  * from Colophon Foundry. 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) 2022 Colophon Foundry
  *
  * Licenced to Matthew Derrick Kodeco Inc

  *
  *  1. Relative
  *
  */
  /* ==========================================================================
    0. Variable definitions
    ========================================================================== */
  /* ==========================================================================
     1. Relative
     ========================================================================== */
  /* relative-book */
  /* relative-italic */
  /* relative-medium */
  /* relative-medium-italic */
  /* relative-bold */
  /* relative-bold-italic */
  /* relative-mono-10 */
  /* Function to convert pixel font sizes to rem */
  /**
   * This file contains variables for controlling layout.
   *
   * 1. Page layout
   * 2. Responsiveness
   *
   */
  /* ==========================================================================
      1. Page layout
     ========================================================================== */
  /* ==========================================================================
      2. Responsiveness
     ========================================================================== */
  /* ==========================================================================
      Responsiveness
     ========================================================================== */
  /* ==========================================================================
      Truncation
     ========================================================================== */
  /* ==========================================================================
      Flexed spacing
     ========================================================================== */
  /* ==========================================================================
      Aspect Ratio
     ========================================================================== */
  /* ==========================================================================
    Hide Scrollbar
  ========================================================================== */
  /**
   *
   * DO NOT EDIT BASE
   *
   * Add additional color classes if required
   *
   * Every tooltip you'll ever need can be created from these o-tooltip class
   *
   * To modify use custom -l classes on html element
   *
   * 1. Base
   *
   * 2. Data tooltip
   *
   * 3. HTML tooltip
   *
   * 4x. Modifiers
   *
   * 5. Note Taking
   *
   * Z. Custom Layouts
   *
   */
  /* ==========================================================================
  1. Base
  ========================================================================== */
  /* ==========================================================================
  2. Data tooltip
  ========================================================================== */
  /* ==========================================================================
  * 3. HTML tooltip
  ========================================================================== */
  /* ==========================================================================
  4a. Top Left
  ========================================================================== */
  /* ==========================================================================
  4b. Top Right
  ========================================================================== */
  /* ==========================================================================
  5. Note Taking
  ========================================================================== */
  /* ==========================================================================
  Z. Custom Layouts
  ========================================================================== */
  /* ==========================================================================
   Shame
  ========================================================================== */
  /**
   *
   * Add additional color classes if required
   *
   * Every link you'll ever need can be created from these o-link classes
   *
   *
   * Can be used for a tags
   *
   * 1. Green
   *
   */
  /* ==========================================================================
    Green
    ========================================================================== */
  /* ==========================================================================
  Variables
  ========================================================================== */
  /* ==========================================================================
  Mixins
  ========================================================================== */
  /**
  *
  *
  * 1. Content Counter
  *
  *
  */
  /* ==========================================================================
  1. Content Counter
  ========================================================================== */
  /**
   *
   * Layouts
   *
   * For use everywhere - saves you adding margin, widths to components objects
   *
   * 1. Wrappers
   *
   * 2. Columns
   *
   * 3. Margins
   *
   * 4. Padding
   *
   * 5. Flex
   *
   * 6. Position
   *
   * 7. Text
   *
   * 8. Fonts
   *
   * 9. Grid
   *
   * 10. Background
   *
   * 11. Overlay
   *
   * 12. Borders
   *
   * 13. Z-index
   *
   */
  /* ==========================================================================
  1. Wrappers
  ========================================================================== */
  /* ==========================================================================
    2. Columns
    ========================================================================== */
  /* ==========================================================================
    3. Margins
    ========================================================================== */
  /* Responsive margins */
  /* ==========================================================================
     7. Padding
     ========================================================================== */
  /* ==========================================================================
    5. Flex
    ========================================================================== */
  /* ==========================================================================
  6. Position
  ========================================================================== */
  /* ==========================================================================
  7. Text
  ========================================================================== */
  /* ==========================================================================
  8. Fonts
  ========================================================================== */
  /* ==========================================================================
  9. Grid
  ========================================================================== */
  /* ==========================================================================
  10. Background
  ========================================================================== */
  /* ==========================================================================
  11. Overflow
  ========================================================================== */
  /* ==========================================================================
  12. Borders
  ========================================================================== */
  /* ==========================================================================
  13. Block
  ========================================================================== */
  /* ==========================================================================
  14. Cursor
  ========================================================================== */
  /* ==========================================================================
  14. Z-index
  ========================================================================== */
  /* ==========================================================================
  14. Borders
  ========================================================================== */
  /* ==========================================================================
  15. States
  ========================================================================== */
  /* ==========================================================================
  16. Floats
  ========================================================================== */
  /* ==========================================================================
  17. Visibility
  ========================================================================== */
  /* ==========================================================================
  18. Transform
  ========================================================================== */
  /**
  * Admin Layouts
  *
  * Custom classes for widths, margins, padding, font-sizes etc. for accounts.rw.com
  *
  * 1. Wrappers, Text
  *
  * 2. Sidebar
  *
  */
  /* ==========================================================================
  1. Wrappers, Text
  ========================================================================== */
  /* ==========================================================================
  2. Sidebar
  ========================================================================== */
  /**
   *
   * Layouts
   *
   * For use on video components
   *
   * 1. Overlay
   *
   **/
  /* ==========================================================================
  1. Overlay
  ========================================================================== */
  /**
   *
   * Layouts
   *
   * For use on tutorial components
   *
   * 1. Collection - Tutorial group layout
   *
   * 2. Container - Scroll tutorials horizontally
   *
   * 3. Hero - Homepage
   *
   * 4. Library - Dark mode
   * 
   * 5. Up Next
   *
   *
   **/
  /* ==========================================================================
  1. Collection - Tutorial group layout
  ========================================================================== */
  /* ==========================================================================
  2. Container - Scroll tutorials horizontally
  ========================================================================== */
  /* ==========================================================================
  3. Hero - Homepage
  ========================================================================== */
  /* ==========================================================================
  3. Follow pillars
  ========================================================================== */
  /* ==========================================================================
  4. Library - Dark mode layout fixes
  ========================================================================== */
  /* ==========================================================================
  5. Up Next Fixes/Hacks
  ========================================================================== */
  /**
   *
   * Books
   *
   * For use on book sales and chapters pages
   *
   * 1. Sidebar
   *
   * 2. End of chapter message
   *
   * 3. Materials
   *
   * 4. Chapter font style
   *
   * 5. Chapter page color
   *
   * 6. Chapter font size
   *
   * 7. Chapter page size
   *
   * 8. Chapter image size
   *
   * 9. Book hero
   *
   * 10. Book sales
   *
   **/
  /* ==========================================================================
  1. Sidebar
  ========================================================================== */
  /* ==========================================================================
  2. End of chapter message
  ========================================================================== */
  /* ==========================================================================
  3. Materials
  ========================================================================== */
  /* ==========================================================================
  4. Chapter font style
  ========================================================================== */
  /* ==========================================================================
  6. Chapter text size
  ========================================================================== */
  /* ==========================================================================
  7. Chapter page size
  ========================================================================== */
  /* ==========================================================================
  8. Chapter image size
  ========================================================================== */
  /* ==========================================================================
  9. Book Hero
  ========================================================================== */
  /* ==========================================================================
  10. Book Sales
  ========================================================================== */
  /**
   *
   * Layouts
   *
   * For use on path pages
   *
   * 1. Hero
   *
   * 2. Popular
   *
   * 3. List
   *
   * 4. Collection of Paths
   *
   **/
  /* ==========================================================================
  1. Hero
  ========================================================================== */
  /* ==========================================================================
  2. Popular
  ========================================================================== */
  /* ==========================================================================
  3. List
  ========================================================================== */
  /* ==========================================================================
  4. Collection of Paths
  ========================================================================== */
  /**
   *
   * Domains
   *
   *
   *
   * 1. Collection of tutorials
   *
   *
   **/
  /* ==========================================================================
  1. Collection of tutorials
  ========================================================================== */
  /**
   *
   * Collections
   *
   *
   *
   * 1. Hero
   *
   * 1a. Trailer modifier
   *
   * 2. Collection
   *
   * 3. Modules & Videos
   *
   * 4. Book hero
   *
   *
   *
   **/
  /* ==========================================================================
  1. Hero
  ========================================================================== */
  /* ==========================================================================
  1a. Trailer modifier
  ========================================================================== */
  /* ==========================================================================
  2. Collection
  ========================================================================== */
  /* ==========================================================================
  3. Modules & Videos
  ========================================================================== */
  /**
   * Achievements
   *
   *
   * 1. Achievements / Badge Layout page
   *
   *
   */
  /* ==========================================================================
  1. Achievements / Badge Layout page
  ========================================================================== */
  /**
   *
   * Events
   *
   *
   *
   * 1a. Black Friday 2021 Variables
   * 
   * 1b. Black Friday 2021 Global & Pattern
   *
   * 1c. Black Friday 2021 Top Advert
   * 
   * 1d. Black Friday 2021 Related Advert
   * 
   * 1e. Black Friday 2021 End of Page Advert
   * 
   * 1f. Black Friday 2021 Sticky Banner
   * 
   * 1g. Black Friday 2021 Video Paywall
   *
   *
   **/
  /* ==========================================================================
  1a. Black Friday 2021 Variables
  ========================================================================== */
  /* ==========================================================================
  1b. Black Friday 2021 Global & Pattern
  ========================================================================== */
  /* ==========================================================================
  1c. Black Friday 2021 Top Advert
  ========================================================================== */
  /* ==========================================================================
  1d. Black Friday 2021 Related Advert
  ========================================================================== */
  /* ==========================================================================
  1e. Black Friday 2021 End of Page Advert
  ========================================================================== */
  /* ==========================================================================
  1f. Black Friday 2021 Sticky Banner
  ========================================================================== */
  /* ==========================================================================
  1g. Black Friday 2021 Video Paywall
  ========================================================================== */
  /**
   *
   * Home
   *
   *
   *
   * 1. Hero
   *
   * 2. Pillars
   *
   * 3. Top Tutorials
   *
   * 4. Our Community
   *
   * 5. Wrapper
   *
   * 6. Getting Started
   *
   **/
  /* ==========================================================================
  1. Hero
  ========================================================================== */
  /* ==========================================================================
  2. Pillars
  ========================================================================== */
  /* Adjustments for beta pillars */
  /* Designs for each pillar */
  /* ==========================================================================
  3. Top Tutorials
  ========================================================================== */
  /* ==========================================================================
  4. Our Community
  ========================================================================== */
  /* ==========================================================================
  5. Tutorials
  ========================================================================== */
  /* ==========================================================================
  6. Logged in homepage
  ========================================================================== */
  /* ==========================================================================
  6. Getting Started
  ========================================================================== */
  /* ==========================================================================
  7. Videos & Screencasts
  ========================================================================== */
  /* ==========================================================================
  7. Continue Watching
  ========================================================================== */
  /* ==========================================================================
  9. Upcoming
  ========================================================================== */
  /* ==========================================================================
  8. New Tutorials w/ Sidebar
  ========================================================================== */
  /* ==========================================================================
  9. Announcements
  ========================================================================== */
  /* ==========================================================================
  10. Books
  ========================================================================== */
  /* ==========================================================================
  11. Recommendations/ Top Picks for You
  ========================================================================== */
  /* ==========================================================================
  5. Container
  ========================================================================== */
  /**
   *
   * Home (Teaspoon Launch)
   *
   *
   * a. Wrapper
   *
   * 1a. Hero (Top)
   *
   * 1b. Hero (Bottom)
   *
   * 2. Promo Video
   *
   * 3. Platforms
   *
   * 4. Our Community
   *
   * 5. Tutorials
   *
   * 6. Why choose
   *
   **/
  /* ==========================================================================
  a. Wrapper
  ========================================================================== */
  /* ==========================================================================
  1a. Hero (Top)
  ========================================================================== */
  /* ==========================================================================
  1b. Hero (Bottom)
  ========================================================================== */
  /* ==========================================================================
  2. Promo Video
  ========================================================================== */
  /* ==========================================================================
  3. Platforms
  ========================================================================== */
  /* ==========================================================================
  4. Our Community
  ========================================================================== */
  /* ==========================================================================
  5. Tutorials
  ========================================================================== */
  /* ==========================================================================
  6. Why Choose
  ========================================================================== */
  /**
   *
   * Home (2022)
   *
   * 1. Layout Grid
   *
   * 2. Scrollable Contianers (Mobile)
   * 
   * 3. Popular Searches
   * 
   * 4. New Content
   * 
   * 5. Recommended
   * 
   * 6. My Books
   *
   **/
  /* ==========================================================================
  1. Layout Grid
  ========================================================================== */
  /* ==========================================================================
  2. Scrollable Containers (Mobile)
  ========================================================================== */
  /* ==========================================================================
  3. Popular Searches
  ========================================================================== */
  /* ==========================================================================
  4. New Content
  ========================================================================== */
  /* ==========================================================================
  5. Recommended
  ========================================================================== */
  /* ==========================================================================
  6. My Books
  ========================================================================== */
  /**
  *
  * Onboarding
  *
  * Layouts for onboarding views
  *
  * X. Illustration Background (Deprecated)
  *
  * X. Interest Cards (Deprecated)
  *
  * X. Skills Cards (Deprecated)
  *
  * X. Payment Cards (Deprecated)
  *
  * X. Black Friday Payment Cards (Deprecated)
  *
  * X. Flourish (Deprecated)
  * 
  * 1. Hello
  * 
  * 2. Topics
  * 
  * 3. Questions
  * 
  * 4. Reasons
  * 
  * 5. Header
  *
  **/
  /* ==========================================================================
  a. Illustration Background (Deprecated)
  ========================================================================== */
  /* ==========================================================================
  1. Interest Cards (Deprecated)
  ========================================================================== */
  /* ==========================================================================
  2. Skill Cards (Deprecated)
  ========================================================================== */
  /* ==========================================================================
  3a. Payment (Deprecated)
  ========================================================================== */
  /* ==========================================================================
  3b. Payment (Black Friday) (Deprecated)
  ========================================================================== */
  /* ==========================================================================
  X. Flourish (Deprecated)
  ========================================================================== */
  /* ==========================================================================
  1. Hello
  ========================================================================== */
  /* ==========================================================================
  2. Topics
  ========================================================================== */
  /* ==========================================================================
  3. Questions
  ========================================================================== */
  /* ==========================================================================
  4. Reason
  ========================================================================== */
  /* ==========================================================================
  5. Header
  ========================================================================== */
  /**
   *
   * About
   *
   *
   *
   * 1. Hero
   *
   * 2. Stats
   *
   * 3. Team
   *
   *
   **/
  /* ==========================================================================
  1. Hero
  ========================================================================== */
  /* ==========================================================================
  2. Stats
  ========================================================================== */
  /* ==========================================================================
  3. Team
  ========================================================================== */
  /* ==========================================================================
  4. Join Team
  ========================================================================== */
  /**
   *
   * Library
   *
   * Custom layouts for the library page
   *
   *
   * 1. Wrapper
   *
   * 2. Added Filters
   *
   *
   **/
  /* ==========================================================================
  1. Wrapper
  ========================================================================== */
  /* ==========================================================================
  2. Added Filters
  ========================================================================== */
  /**
  * Article Layouts
  *
  * Custom classes for articles
  *
  * 1. Contributors
  *
  * 2. Community Care
  *
  * 3. Article profile
  *
  */
  /* ==========================================================================
  1. Contributors
  ========================================================================== */
  /* ==========================================================================
  2. Community Care
  ========================================================================== */
  /* ==========================================================================
  * 3. Article profile
  ========================================================================== */
  /**
   *
   * Menu Layouts
   *
   * For use on menu objects
   *
   * 1. Layouts for menus (dropdowns etc.)
   *
   *
   **/
  /* ==========================================================================
  1. Custom Layouts
  ========================================================================== */
  /**
   *
   * Bookmarks
   *
   * For use on bookmark objects, components and pages
   *
   * 1. Buttons on mobile
   *
   * 2. Remove button on mobile
   *
   *
   **/
  /* ==========================================================================
  1. Buttons on mobile
  ========================================================================== */
  /* A hacky approach to convert bookmark buttons to icons on mobile*/
  /* ==========================================================================
  1a. Button as icon (same as above without media query)
  ========================================================================== */
  /* ==========================================================================
  2. Remove button position on mobile
  ========================================================================== */
  /**
   *
   * Rating Layouts
   *
   * For use on rating components
   *
   * 1. Video
   *
   **/
  /* ==========================================================================
  1. Video (Footer)
  ========================================================================== */
  /* ==========================================================================
  X. Collection (Footer)
  ========================================================================== */
  /* ==========================================================================
  X. Article (Footer)
  ========================================================================== */
  /* ==========================================================================
  X. Books
  ========================================================================== */
  /**
   *
   * Grids
   *
   *
   *
   * 1. Bookshelf (5 books)
   * 
   * 2. New content (Homepage)
   *
   *
   **/
  /* ==========================================================================
  1. Bookshelf (5 books)
  ========================================================================== */
  /* ==========================================================================
  2. New content (Homepage)
  ========================================================================== */
  /**
   *
   * SVG
   *
   *
   *
   * 1. Custom Sizes
   *
   * 2. Colors
   *
   *
   **/
  /* ==========================================================================
  1. Custom sizes
  ========================================================================== */
  /* ==========================================================================
  2. Colors
  ========================================================================== */
  /**
   *
   * Carbon ads custom CSS classes to fix layout, display and positioning 
   *
   * 1. Content
   * 
   * 2. Sidebar
   * 
   * 3. Footer
   *
   *
   *
   **/
  /* ==========================================================================
  1. Content
  ========================================================================== */
  /* ==========================================================================
  2. Sidebar
  ========================================================================== */
  /* ==========================================================================
  3. Footer
  ========================================================================== */
  /**
   * This file contains variables for controlling layout.
   *
   * 1. Page layout
   * 2. Responsiveness
   *
   */
  /* ==========================================================================
      1. Page layout
     ========================================================================== */
  /* ==========================================================================
      2. Responsiveness
     ========================================================================== */
  /* ==========================================================================
      Responsiveness
     ========================================================================== */
  /* ==========================================================================
      Truncation
     ========================================================================== */
  /* ==========================================================================
      Flexed spacing
     ========================================================================== */
  /* ==========================================================================
      Aspect Ratio
     ========================================================================== */
  /* ==========================================================================
    Hide Scrollbar
  ========================================================================== */
  /**
   * Navigation components
   *
   * 1. Sidebar - Branded sidebar can be used anywhere as alternative navigation to horizontal use layout modifiers to change width
   *
   * 1a. Sidebar Article
   *
   * 1b. Sidebar Article (White)
   *
   * 1c. My Interests - Logged in homepage
   *
   * 1d. Sidebar (Book)
   *
   * 2. Toggle States for Mobile Menus
   *
   * 3. Main Navigation
   *
   * 4. Explore: Dropdown Menu
   *
   * 5. User: Dropdown Menu
   *
   * 6. Pillar Navigation
   *
   * 7. Footer
   *
   * 8. Tabs
   *
   * 9. Mobile Navigator
   *
   * 10. Book Navigation
   *
   * 11. Paginator
   *
   */
  /* ==========================================================================
     1. Sidebar
     ========================================================================== */
  /* ==========================================================================
  1a. Sidebar Article
  ========================================================================== */
  /* ==========================================================================
  1b. Sidebar Article (White)
  ========================================================================== */
  /* ==========================================================================
  1b. Sidebar Article Navigation
  ========================================================================== */
  /* ==========================================================================
  1c. Sidebar My Interests
  ========================================================================== */
  /* ==========================================================================
  1b. Sidebar Admin (Open)
  ========================================================================== */
  /* ==========================================================================
  1d. Sidebar Book
  ========================================================================== */
  /* ==========================================================================
     2. Toggle States for Mobile Menus
     ========================================================================== */
  /* ==========================================================================
     3. Main Navigation
     ========================================================================== */
  /* ==========================================================================
     4. Explore: Dropdown Menu
     ========================================================================== */
  /* ==========================================================================
  5. User: Dropdown Menu
  ========================================================================== */
  /* ==========================================================================
  6. Pillar Navigation
  ========================================================================== */
  /* ==========================================================================
  6. Footer
  ========================================================================== */
  /* ==========================================================================
  8. Tabs (Content)
  ========================================================================== */
  /* ==========================================================================
  8b. Tabs (Navigation)
  ========================================================================== */
  /* ==========================================================================
     9. Mobile Navigator
     ========================================================================== */
  /* ==========================================================================
     10. Book Navigation
     ========================================================================== */
  /* ==========================================================================
     11. Paginator
     ========================================================================== */
  /**
   * Notifications
   *
   * Notify the user via a modal/popup when they earn a badge for example
   * 
   * 1. Badge/Achievements Notifications
   *
   */
  /* ==========================================================================
     1. Badge/Achievements Notifications
     ========================================================================== */
  /**
  * Form Components
  *
  * Used with objects/inputs.scss
  *
  * 1. Title - Adds a title to group form inputs by context
  *
  * 2. Paragraph and CTA
  *
  * 3. Image/File Upload
  *
  * 4. Sign In / Sign Up Form
  *
  * 5. Single input and CTA
  *
  */
  /* ==========================================================================
  1. Title
  ========================================================================== */
  /* ==========================================================================
  2. Paragraph and CTA
  ========================================================================== */
  /* ==========================================================================
  3. Image/File Upload
  ========================================================================== */
  /* ==========================================================================
  4. Sign In / Sign Up Form
  ========================================================================== */
  /* ==========================================================================
  5. Single input and CTA
  ========================================================================== */
  /*
   * Lists
   *
   * Powerful components you can use to create tables, lists
   *
   * 1. Wrapper - Gives the list item or table a background.
   *
   * 2. Table row - Can be used to create floating lists of content.
   *
   * 3. Table - Modifies the table row component to create a seamless list/table of connected content.
   *
   * 4. Table of Contents
   *
   * 5. Custom layout classes
   *
   * 6a. Onboarding Progress (Square)
   *
   * 6b. Onboarding Progress (Circular)
   *
   * 7. Item list with icons
   *
   * 8. Filter list
   *
   * 9. Version history
   *
   * 10. Onboarding Checklist
   *
   *
   */
  /* ==========================================================================
    1. Wrapper
    ========================================================================== */
  /* ==========================================================================
    2. Table row
    ========================================================================== */
  /* ==========================================================================
    3. Table
    ========================================================================== */
  /* ==========================================================================
   4. Box list - Checkbox style list
   ========================================================================== */
  /* ==========================================================================
  5. Custom layout classes
  ========================================================================== */
  /* ==========================================================================
  6a. Onboarding Progress (Square)
  ========================================================================== */
  /* ==========================================================================
  6b. Onboarding Progress (Circular)
  ========================================================================== */
  /* ==========================================================================
  7. Item list with icons
  ========================================================================== */
  /* ==========================================================================
     8. Filter list
     ========================================================================== */
  /* ==========================================================================
     9. Version history
     ========================================================================== */
  /* ==========================================================================
     10. Activity Checklist
     ========================================================================== */
  /**
   * drapers
   *
   * Floating card drapers containing title, paragraph, graphic and link
   *
   * 1. Admin drapers
   *
   * 2. Custom layout classes
   *
   * 3. Banner draper - Base component for common drapers
   *
   * 4. Banner draper - Pillar variations
   *
   * 5. Banner draper - User variations (create account, newsletter)
   *
   * 6. Related - Products at the end of tutorials
   *
   * 7. Bottom Sticky - A banner that's fixed to bottom of the page
   *
   * 8. Pricing cards
   *
   * 9. Single Line Banner
   *
   * 10. Sales promotions
   *
   */
  /* ==========================================================================
   1. Admin drapers
   ========================================================================== */
  /* ==========================================================================
     2. Custom layout classes
     ========================================================================== */
  /* ==========================================================================
     3. Banner draper - Used for drapers and pillar heros
     ========================================================================== */
  /* ==========================================================================
     4. Banner draper - Pillar variations (iOS, Android, Unity, Unreal)
     ========================================================================== */
  /* iOS */
  /* Android */
  /* Server Side Swift */
  /* Unity */
  /* Flutter */
  /* Unreal Engine */
  /* macOS */
  /* archive */
  /* archive */
  /* mobile app */
  /* ==========================================================================
  5. Banner draper - Campaign variations
  ========================================================================== */
  /* Create Account */
  /* Newsletter */
  /* Subscription */
  /* Learning Path Android */
  /* ==========================================================================
  6. Related
  ========================================================================== */
  /* Related banner design */
  /* Related content banner design */
  /* ==========================================================================
  7. Bottom banner
  ========================================================================== */
  /* ==========================================================================
  8. Pricing cards
  ========================================================================== */
  /* ==========================================================================
     10a. Sales Promotions (Teaspoon)
     ========================================================================== */
  /* ==========================================================================
     10a. Sales Promotions (Black Friday 2020)
     ========================================================================== */
  /* ==========================================================================
  10b. Sales Promotions (Spring Ahead 2021)
  ========================================================================== */
  /* ==========================================================================
    11a. Community Header
    ========================================================================== */
  /* ==========================================================================
    11b. Community Hack (Change widths of tutorial layouts)
    ========================================================================== */
  /* ==========================================================================
    11c. Community Adverts
    ========================================================================== */
  /**
  * Modal component
  *
  * Customisable to have header, content, form inputs and CTA
  *
  * Use c-modal__description--scroll class on content to limit height.
  *
  * 1. Modal
  *
  * 2. Account Sign Up
  *
  * 3. Subscribe
  *
  * 4. Highlighting
  *
  * 5. Video Trailer
  *
  * 6. Video Tutorial
  *
  */
  /* ==========================================================================
    1. Modal
    ========================================================================== */
  /* ==========================================================================
  2. Account Sign Up
  ========================================================================== */
  /* ==========================================================================
  3. Subscribe
  ========================================================================== */
  /* ==========================================================================
  4. Highlighting
  ========================================================================== */
  /* ==========================================================================
  5. Video Trailer
  ========================================================================== */
  /* ==========================================================================
  6. Video Tutorial
  ========================================================================== */
  /**
   * Skeleton components
   *
   */
  /* ==========================================================================
     1. Base
     ========================================================================== */
  /* ==========================================================================
     2. Objects
     ========================================================================== */
  /* ==========================================================================
     3. Component - Admin Sidebar
     ========================================================================== */
  /* ==========================================================================
    4. Component - Admin Main
    ========================================================================== */
  /**
   * Tutorials
   *
   * Tutorial cards form the base of all tutorials advertisements around the site
   *
   * NOTE - All modifiers should be added to the wrapper/container not the tutorial itself
   *
   * 1. Base: The most common tutorial card items
   *
   * 2. Card modifier
   *
   * 3. List modifier
   *
   * 3d. Progress List modifier
   *
   * 5. Featured modifier
   *
   * 6. Badge modifier (Author, Number, Checkmark)
   *
   * 7. Contributor modifier (Role in tutorial)
   *
   * 8. Mini modifier
   *
   * 9. Episode
   *
   * 10. Large Card modifier
   *
   * 11. Dark modifier
   *
   * 12. Mason modifier
   *
   * 13. Artwork size modifier for mason
   *
   * 14. Mason bookmark
   *
   * 15. Mark as complete
   *
   * 16. White backgroudn modifier
   *
   * 17. Floating button
   *
   * 18. Book
   *
   * 19. Editable
   *
   * 20. No Margin
   *
   * 21. CTA-Card for Community Page (Large image modifier)
   *
   */
  /* ==========================================================================
   1. Base
   ========================================================================== */
  /* ==========================================================================
   2. Card modifier (add to container not the tutorial)
   ========================================================================== */
  /* ==========================================================================
   3a. List modifier (add to container not the tutorial)
   ========================================================================== */
  /* ==========================================================================
   3b. Basic list modifier (add to container not the tutorial)
   ========================================================================== */
  /* ==========================================================================
   3c. Complex list modifier (add to container not the tutorial)
   ========================================================================== */
  /* ==========================================================================
   3d. Progress list modifier (list of in progress tutorial)
   ========================================================================== */
  /* ==========================================================================
   5. Featured modifier (add to container not the tutorial)
   ========================================================================== */
  /* ==========================================================================
   6. Number modifier (add to container not the tutorial)
   ========================================================================== */
  /* ==========================================================================
   7. Contributor modifier (role)
   ========================================================================== */
  /* ==========================================================================
   8. Mini modifier
   ========================================================================== */
  /* ==========================================================================
  9. Episode
  ========================================================================== */
  /* ==========================================================================
  10. Advert
  ========================================================================== */
  /* ==========================================================================
  10. Learning Path Modifiers
  ========================================================================== */
  /* ==========================================================================
  11. Dark Modifier
  ========================================================================== */
  /* ==========================================================================
  12. Mason Modifier
  ========================================================================== */
  /* ==========================================================================
  12a. Artwork size modifier for mason
  ========================================================================== */
  /* ==========================================================================
  12b. Mason Large Modifier
  ========================================================================== */
  /* ==========================================================================
  12c. Mason Art Modifier
  ========================================================================== */
  /* ==========================================================================
  12c. Mason Modifier Small
  ========================================================================== */
  /* ==========================================================================
  14. If user is signed make room for the bookmark on mason
  ========================================================================== */
  /* ==========================================================================
   3. Number modifier (add to list view to fix layout)
   ========================================================================== */
  /* ==========================================================================
  15. Mark as complete button
  ========================================================================== */
  /* ==========================================================================
  16. White background modifier
  ========================================================================== */
  /* ==========================================================================
  17. Floating button
  ========================================================================== */
  /* ==========================================================================
  18. Book
  ========================================================================== */
  /* ==========================================================================
  19. Editable
  ========================================================================== */
  /* ==========================================================================
  20. No Margins
  ========================================================================== */
  /* ==========================================================================
  21. CTA Card
  ========================================================================== */
  /**
   * Video
   *
   *
   * 1. Player
   *
   * 2. Navigation
   *
   * 3a. Complete / Autoplay
   *
   * 3b. Complete / Up Next
   *
   * 4. Paywall
   *
   * 5. Black Friday Paywall
   *
   * 6. Video Information
   *
   * 7. Promo Video
   *
   * 8. Preview
   *
   * 9. Cinema Mode
   *
   * 10. Controls (Subheader)
   *
   * 11. Authors
   *
   * 12. Comments
   *
   */
  /* ==========================================================================
   1. Player
   ========================================================================== */
  /* ==========================================================================
   2. Navigation
   ========================================================================== */
  /* ==========================================================================
   3a. Complete - Autoplay
   ========================================================================== */
  /* ==========================================================================
   3b. Complete - Up Next
   ========================================================================== */
  /* ==========================================================================
  4. Paywall
  ========================================================================== */
  /* Need a different layout when the sidebar is open */
  /* ==========================================================================
  5. Black Friday Paywall
  ========================================================================== */
  /* Layout adjustments for tablet devices */
  /* Layout adjustments for open lesson navigation */
  /* ==========================================================================
  6. Spring Free Weekend
  ========================================================================== */
  /* ==========================================================================
  5. Spring Free Weekend
  ========================================================================== */
  /* ==========================================================================
  5b. Spring Ahead 2021
  ========================================================================== */
  /* ==========================================================================
  6. Video Information
  ========================================================================== */
  /* ==========================================================================
  7. Promo Video
  ========================================================================== */
  /* ==========================================================================
  8. Preview
  ========================================================================== */
  /* ==========================================================================
  9. Cinema Mode
  ========================================================================== */
  /* ==========================================================================
  10. Controls (Subheader)
  ========================================================================== */
  /* ==========================================================================
  11a. Metadata
  ========================================================================== */
  /* ==========================================================================
  11a. Transcripts
  ========================================================================== */
  /* ==========================================================================
  11b. Authors
  ========================================================================== */
  /* ==========================================================================
  11c. Comments
  ========================================================================== */
  /**
   * Content
   *
   * Components for written tutorials, videos and screencasts
   *
   * 1. Written Tutorial
   *
   * 1a. Written Tutorial (Dark)
   *
   * 1b. Written Tutorial (Event)
   *
   * 2. Light code blocks
   *
   * 3. Admin Edit Banner
   *
   * 4. Sticky Options Banner
   *
   * 5. Book Chapter
   *
   * 5a. Book Chapter (Dedications)
   *
   */
  /* ==========================================================================
   1. Written Tutorial
   ========================================================================== */
  /* ==========================================================================
   1b. Written Tutorial (Event)
   ========================================================================== */
  /* ==========================================================================
   2. Code block modifier to light
   ========================================================================== */
  /* ==========================================================================
   3. Admin Edit Banner
   ========================================================================== */
  /* ==========================================================================
   4. Sticky Options Banner
   ========================================================================== */
  /* ==========================================================================
   5. Book Chapter
   ========================================================================== */
  /* ==========================================================================
   5a. Book Chapter (Dedications)
   ========================================================================== */
  /* ==========================================================================
   5b. Book Chapter (Team)
   ========================================================================== */
  /**
   * Search
   *
   * Search component styles
   *
   * 1. Search box
   *
   * 2. Search box overlay
   *
   * 3. Library - Platform filter
   *
   * 4. Library - Filters
   *
   * 5. Library - Controls
   *
   * 6. Loading Results
   *
   * 7. No Results
   *
   * 8. Book Search
   *
   *
   */
  /* ==========================================================================
   1. Search box
   ========================================================================== */
  /* ==========================================================================
   2. Search box overlay
   ========================================================================== */
  /* ==========================================================================
   3. Library - Platform filter
   ========================================================================== */
  /* ==========================================================================
   4. Library - Filters
   ========================================================================== */
  /* ==========================================================================
  5. Library - Filters Open
  ========================================================================== */
  /* ==========================================================================
  5. Library - Controls
  ========================================================================== */
  /* ==========================================================================
  6. Loading Results
  ========================================================================== */
  /* ==========================================================================
  7. No Results
  ========================================================================== */
  /* ==========================================================================
  8. Book Search
  ========================================================================== */
  /**
   * Authors
   *
   *
   * 1a. Content Author
   *
   * 1b. Content Author (Dark)
   *
   * 2. Card Style Alternative
   *
   * 3. Testimonial modifier
   *
   */
  /* ==========================================================================
  1a. Content Author
  ========================================================================== */
  /* ==========================================================================
  1b. Content Author (Dark)
  ========================================================================== */
  /* ==========================================================================
  2. Content Author (Card Style)
  ========================================================================== */
  /* ==========================================================================
  3. Add quote flourish to card
  ========================================================================== */
  /**
   * Users
   *
   *
   * 1. Profile grid
   *
   * 2. Profile sidebar
   *
   * 3. Empty
   *
   * 4. Tutorials
   *
   */
  /* ==========================================================================
  1. Profile grid
  ========================================================================== */
  /* ==========================================================================
  2. Profile sidebar
  ========================================================================== */
  /* ==========================================================================
  3. Profile empty
  ========================================================================== */
  /* ==========================================================================
  4. Tutorials
  ========================================================================== */
  /**
   * Social
   *
   * 1. Forum Comments
   *
   *
   */
  /* ==========================================================================
   1. Forum Comments
   ========================================================================== */
  /**
   * Empty State Components
   *
   *
   * 1. Basic empty state
   *
   * 2. Android
   *
   * 3. File Loader
   *
   * 4. Following
   *
   * 5. Suggestions
   *
   */
  /* ==========================================================================
   1. Basic
   ========================================================================== */
  /* ==========================================================================
   2. Android
   ========================================================================== */
  /* ==========================================================================
   3. File Loader
   ========================================================================== */
  /* ==========================================================================
   4. Following
   ========================================================================== */
  /* ==========================================================================
   5. Suggestions
   ========================================================================== */
  /* ==========================================================================
   6. Illustration + Messaging
   ========================================================================== */
  /**
   * Testimonials
   *
   * 1. Testimonial component to use everywhere
   *
   * 2. Testimonials (Twitter Version)
   *
   */
  /* A common wrapper for displaying a grid of testimonials */
  /* A single testimonial */
  /* ==========================================================================
  2. Testimonials (Twitter Version)
  ========================================================================== */
  /* A single testimonial */
  /**
  * Cards
  *
  * Designs for card style components
  *
  * 1. Follow Pillar Card
  *
  * 2. Skill Level Card
  *
  * 3. Plan Card
  *
  * 4a. Card Platform
  *
  * 4b. Card Platform Variations
  * 
  * 5. Option Card
  * 
  * 6. Simple Card
  * 
  * 7. Path Progress Card
  *
  *
  */
  /* ==========================================================================
  1. Follow Pillar Card
  ========================================================================== */
  /* ==========================================================================
  2. Skill Level Card
  ========================================================================== */
  /* ==========================================================================
  3. Plan Card
  ========================================================================== */
  /* ==========================================================================
  3. Plan Card (Neon)
  ========================================================================== */
  /* ==========================================================================
  4a. Card Platform
  ========================================================================== */
  /* ==========================================================================
  4b. Card Platform Variations
  ========================================================================== */
  /* ==========================================================================
  5. Option card
  ========================================================================== */
  /* ==========================================================================
  6. Simple card
  ========================================================================== */
  /* ==========================================================================
  7. Path Progress card
  ========================================================================== */
  /**
   * <noscript /> components
   *
   * 1. Body insert
   *
   */
  /* ==========================================================================
    1. body
    ========================================================================== */
  /**
  * FAQ component
  *
  * Styles for Q & A's
  *
  * 1. FAQ
  *
  */
  /* ==========================================================================
     1. FAQ
     ========================================================================== */
  /**
  * Rating components
  *
  * 1. Review Module (Invert colors for books and articles)
  *
  * 2. Review Module
  *
  * 3. Star Rating
  *
  * 4. Review Card
  *
  * 5. Review Questions
  *
  */
  /* ==========================================================================
  1. Review Module (Invert colors for books and articles)
  ========================================================================== */
  /* ==========================================================================
  2. Review Module
  ========================================================================== */
  /* ==========================================================================
  3. Star Rating
  ========================================================================== */
  /* ==========================================================================
  4. Review Card
  ========================================================================== */
  /* ==========================================================================
  5. Review Questions
  ========================================================================== */
  /* ==========================================================================
  6. Modal
  ========================================================================== */
  /**
   * This file contains variables for controlling layout.
   *
   * 1. Page layout
   * 2. Responsiveness
   *
   */
  /* ==========================================================================
      1. Page layout
     ========================================================================== */
  /* ==========================================================================
      2. Responsiveness
     ========================================================================== */
  /* ==========================================================================
      Responsiveness
     ========================================================================== */
  /* ==========================================================================
      Truncation
     ========================================================================== */
  /* ==========================================================================
      Flexed spacing
     ========================================================================== */
  /* ==========================================================================
      Aspect Ratio
     ========================================================================== */
  /* ==========================================================================
    Hide Scrollbar
  ========================================================================== */
  /**
  * Reading Experience Tools
  *
  * 1a. Notebook & Highlighting
  *
  * 1b. Highlighter Colors
  *
  * 2. Reading Experience Widget
  *
  */
  /* ==========================================================================
     1a. Notebook & Highlighting
     ========================================================================== */
  /* ==========================================================================
     1b. Highlighter Colors
     ========================================================================== */
  /* ==========================================================================
     2. Reading Experience Widget
     ========================================================================== */
  /* ==========================================================================
    2a. Cross browser range track styles
    ========================================================================== */
  /* ==========================================================================
     2b. Cross browser range thumb styles
     ========================================================================== */
  /**
   * Books
   *
   *
   * 1. Book List 
   *
   *
   */
  /* ==========================================================================
   1. Book List
   ========================================================================== */
  /**
   * Drawer: Off-screen component for filters, controls and anythign else (show/hide with JS)
   *
   * 1. Drawer 
   *
   */
  /* ==========================================================================
  1. Drawer
  ========================================================================== */
  /**
   * Utility classes are helper classes that perform one thing extremely well.
   *
   * They do it so well, they override everything else.
   *
   * As such, they often only contain one property, and they include the !important declaration.
   *
   * 1. Show/Hide states for mobile screens
   *
   */
  /* ==========================================================================
    1. Show/Hide states for mobile screens
    ========================================================================== */
  /* ==========================================================================
    2. Toggle dropdown menu on hover
    ========================================================================== */
  /* ==========================================================================
  3. Show / Hide
  ========================================================================== */
  /**
   * A reserved place for nasty CSS hacks.
   *
   * If you need to add a quick fix for a live bug, constrained by time or something else. Add it here.
   *
   * This keeps the ‘main’ codebase clean and ensures these hacks don’t go unnoticed and unresolved.
   *
   */
  /*** Text Size ***/
  /* Community Page Double Banner Image */
  /* Add/Remove highlighted transcripts background */
  /* ==========================================================================
  X. Typography
  ========================================================================== */
  @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@500&display=swap");
  /* ==========================================================================
  X. Arrows
  ========================================================================== */
  /* ==========================================================================
  X. Night Mode
  ========================================================================== */
  /**
   * This file contains all colour definitions.
   *
   * 1. Colours
   * 2. Highlighter Colours
   *
   */
  /* ==========================================================================
      1. Colours
     ========================================================================== */
  /* Black */
  /* Dark mode input */
  /* Dark mode hover */
  /* Dark mode borders */
  /* Grey */
  /* Main Brand Grey */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Blue */
  /* Light Flutter Colour */
  /* Light Flutter 50% opacity */
  /* Light Flutter colour equivalent for 50% opacity on dark background */
  /* Dark Flutter Colour */
  /* Brown */
  /* Green */
  /* Light Android Colour */
  /* Light Android 50% opacity */
  /* Light Android colour equivalent for 50% opacity on dark background */
  /* Dark Android Colour */
  /* Grey */
  /* Main Brand Grey */
  /*Main Brand Grey at 20% opacity */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Orange */
  /* Main Brand Colour */
  /* Brand Light Orange */
  /* Brand Light Orange with 20% opacity */
  /* Brand Dark Orange */
  /* Pink */
  /* Light Server-Side Swift Colour */
  /* Dark Server-Side Swift Colour */
  /* Purple */
  /* Light iOS Colour */
  /* Light iOS 50% opacity */
  /* Light iOS colour equivalent for 50% opacity on dark background */
  /* Dark iOS Colour */
  /* Light Game Tech Colour */
  /* Dark Game Tech Colour */
  /* Red */
  /* Teal */
  /* White */
  /* Yellow */
  /* Light Pro-Gro Colour */
  /* Dark Pro-Gro Colour */
  /* ==========================================================================
      2. Highlighter Colours
     ========================================================================== */
  /**
   * Code Blocks
   *
   * Components for written tutorials, videos and screencasts
   *
   * 1. Dark (Default) No class needed
   *
   * 2. Lite Add class .light-code to the parent
   *
   */
  /* ==========================================================================
   1. Dark (Default) Code Blocks
   ========================================================================== */
  /* Comment */
  /* Red */
  /* Orange */
  /* Yellow */
  /* Green */
  /* Aqua */
  /* Blue */
  /* Purple */
  /* ==========================================================================
   2. Light Code Blocks add class .light-code to parent
   ========================================================================== */
  /* Comment */
  /* Red */
  /* Orange */
  /* Yellow */
  /* Green */
  /* Aqua */
  /* Blue */
  /* Purple */
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 1.875rem;
  }
}
@media screen {
  h2 {
    font-size: 1.875rem;
    line-height: 1.25;
  }
}
@media screen {
  h3 {
    font-size: 1.5rem;
    line-height: 1.35;
  }
}
@media screen {
  h4 {
    font-size: 1.3125rem; /* 21/16 */
    line-height: 1.35;
  }
}
@media screen {
  p {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 600px) {
  p {
    font-size: 0.9375rem;
  }
}
@media screen {
  .o-dropdown-menu {
    background: #ffffff;
    border-radius: 0.5625rem;
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.1);
    padding: 12px 0;
    width: 320px;
    position: absolute;
    z-index: 99999;
    display: none;
  }
  .o-dropdown-menu:before {
    content: "";
    position: absolute;
    background: #ffffff;
    top: -6px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -6px;
    transform: rotate(45deg);
    border-radius: 3px;
  }
  .o-dropdown-menu:after {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
  }
  .o-dropdown-menu li {
    display: flex;
    align-items: center;
    height: 54px;
    font-family: "Bitter", serif;
    padding: 0 24px;
  }
  .o-dropdown-menu li > a, .o-dropdown-menu li > div > button {
    font-size: 1.0625rem !important; /* 17/16 */
    margin-left: 0 !important;
    width: 100%;
    color: #333333 !important;
  }
  .o-dropdown-menu li > a:hover, .o-dropdown-menu li > div > button:hover {
    color: #158443 !important;
  }
  .o-dropdown-menu li i {
    min-width: 34px;
    height: 34px;
    margin-right: 15px;
  }
}
@media screen {
  .o-dropdown-menu--accessible {
    display: block;
  }
}
@media screen {
  .o-dropdown-menu--actions {
    width: 240px;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
  .o-dropdown-menu--actions li {
    height: 40px;
    padding: 0 18px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.875rem; /* 14/16 */
  }
  .o-dropdown-menu--actions li a {
    font-size: 0.875rem !important; /* 14/16 */
    cursor: pointer;
  }
  .o-dropdown-menu--actions li button {
    font-size: 0.875rem !important; /* 14/16 */
    cursor: pointer;
  }
}
@media screen {
  .o-dropdown-menu--actions-left {
    top: 48px;
    left: -30px;
  }
  .o-dropdown-menu--actions-left:before {
    top: -3px;
    left: 45px;
  }
}
@media screen {
  .o-dropdown-menu--actions-right {
    top: 48px;
    right: -30px;
  }
  .o-dropdown-menu--actions-right:before {
    top: -3px;
    right: 39px;
    left: auto;
  }
}
@media screen {
  .o-button {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
  }
}
@media screen {
  .o-button--green {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #158443;
  }
  .o-button--green:hover {
    background: #17914a;
  }
}
@media screen {
  .o-button--blue {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #157CB8;
  }
  .o-button--blue:hover {
    background: #1785c6;
  }
}
@media screen {
  .o-button--grey {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #6E7687;
  }
  .o-button--grey:hover {
    background: #757e8f;
  }
}
@media screen {
  .o-button--red {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #CF3B2B;
  }
  .o-button--red:hover {
    background: #d54434;
  }
}
@media screen {
  .o-button--orange {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #FD7401;
  }
  .o-button--orange:hover {
    background: #fe7c0f;
  }
}
@media screen {
  .o-button--dark {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #3B4048;
  }
  .o-button--dark:hover {
    background: #424750;
  }
}
@media screen {
  .o-button--black {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #333333;
  }
}
@media screen {
  .o-button--dark-outline {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #333333;
    border: 2px solid #3B4048;
  }
  .o-button--dark-outline:hover {
    border: 2px solid #73859F;
    background: #424750;
  }
}
@media screen {
  .o-button--green-outline {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: none;
    border: 2px solid #158443;
    color: #158443;
  }
}
@media screen {
  .o-button--white-outline {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: none;
    border: 2px solid #ffffff;
    color: #ffffff;
  }
}
@media screen {
  .o-button--light-green-with-outline {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #e3f0e8;
    border: 2px solid #158443;
    color: #158443;
  }
}
@media screen {
  .o-button--yellow {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #FCB526;
    color: #333333;
  }
  .o-button--yellow:hover {
    background: #fcba35;
  }
}
@media screen {
  .o-button--white-green {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #ffffff;
    color: #158443;
  }
}
@media screen {
  .o-button--white-blue {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #ffffff;
    color: #157CB8;
  }
}
@media screen {
  .o-button--white-black-slate {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #ffffff;
    color: #2F4F4F !important;
  }
}
@media screen {
  .o-button--twitter {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #1D83D1;
  }
  .o-button--twitter:hover {
    background: #1f8bde;
  }
}
@media screen {
  .o-button--neon-green {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #158443;
    box-shadow: 0 0 1vw #158443, 0 0 1vw #158443, 0 0 1vw #158443, 0 0 0.4vw #F9D91D;
    border: 2px solid #199E50;
  }
}
@media screen and (max-width: 600px) {
  .o-button--neon-green {
    border: 1px solid #199E50;
  }
}
@media screen {
  .o-button--neon-green:hover {
    background: #17914a;
  }
}
@media screen {
  .o-button--background-yellow {
    background: #F3B36A !important;
  }
  .o-button--background-yellow:hover {
    background: #f4ba78;
  }
}
@media screen {
  .o-button--background-blue {
    background: #157CB8 !important;
  }
  .o-button--background-blue:hover {
    background: #1785c6;
  }
}
@media screen {
  .o-button--disabled {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #DBDDE0;
    cursor: not-allowed;
  }
  .o-button--disabled:hover {
    background: #DBDDE0 !important;
  }
}
@media screen {
  .o-button--disabled-svg {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: #DBDDE0;
    cursor: not-allowed;
  }
  .o-button--disabled-svg:hover {
    background: #DBDDE0 !important;
  }
  .o-button--disabled-svg svg {
    fill: #DBDDE0 !important;
  }
}
@media screen {
  .o-button--full-col {
    display: block;
    width: 100%;
  }
}
@media screen {
  .o-button--huge {
    height: 66px;
    line-height: 66px;
    padding: 0 18px;
  }
}
@media screen {
  .o-button--large {
    height: 50px;
    padding: 0 18px;
  }
}
@media screen {
  .o-button--small {
    height: 42px;
  }
}
@media screen {
  .o-button--smaller {
    height: 40px;
    line-height: 40px;
    font-size: 0.875rem;
    padding: 0 12px;
  }
}
@media screen {
  .o-button--mini {
    height: 36px;
    line-height: 36px;
    padding: 0 13px;
    font-size: 0.875rem;
  }
}
@media screen {
  .o-button--nano {
    height: 32px;
    line-height: 32px;
    padding: 0 13px;
    font-size: 0.75rem; /* 12/16 */
  }
}
@media screen and (max-width: 600px) {
  .o-button--shrink {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 0.875rem;
  }
  .o-button--shrink i {
    display: none;
  }
}
@media screen {
  .o-button-round {
    display: inline-flex;
    justify-content: center;
    height: 46px;
    line-height: 46px;
    font-family: "Bitter", serif;
    color: #ffffff;
    font-weight: 700;
    border-radius: 100px;
    font-size: 1.0625rem; /* 17/16 */
    padding: 0 30px;
    cursor: pointer;
  }
}
@media screen {
  .o-button-round--blue {
    background: #157CB8;
  }
}
@media screen {
  .o-button-round--green {
    background: #158443;
  }
}
@media screen {
  .o-button-round--disabled {
    background: #DBDDE0;
    color: #959DA5;
  }
}
@media screen {
  .o-button__icon--large {
    height: 27px !important;
    width: 27px !important;
  }
}
@media screen {
  .o-button__svg {
    position: absolute;
    top: 50%;
    left: 50%;
  }
}
@media screen {
  .o-button__svg--grey {
    fill: #6E7687;
  }
}
@media screen {
  .o-button__svg--medium-grey {
    fill: #CACED2;
  }
}
@media screen {
  .o-button__svg--grey-mako {
    fill: #434A53;
  }
}
@media screen {
  .o-button__svg--grey-chateau {
    fill: #A7ADB4;
  }
}
@media screen {
  .o-button__svg--grey-regent {
    fill: #959DA5;
  }
}
@media screen {
  .o-button__svg--light-grey {
    fill: #F2F6FA;
  }
}
@media screen {
  .o-button__svg--white {
    fill: #ffffff;
  }
}
@media screen {
  .o-button__svg--black {
    fill: #333333;
  }
}
@media screen {
  .o-button__svg--black-force {
    fill: #333333 !important;
  }
}
@media screen {
  .o-button__svg--green {
    fill: #158443;
  }
}
@media screen {
  .o-button__svg--red {
    fill: #CF3B2B;
  }
}
@media screen {
  .o-button__svg--orange {
    fill: #FD7401;
  }
}
@media screen {
  .o-button__svg--twitter {
    fill: #1D83D1;
  }
}
@media screen {
  .o-button__svg--highlighter-yellow {
    fill: #FFE242;
  }
}
@media screen {
  .o-button__svg--highlighter-orange {
    fill: #FBBC5D;
  }
}
@media screen {
  .o-button__svg--highlighter-red {
    fill: #E58A8A;
  }
}
@media screen {
  .o-button__svg--highlighter-purple {
    fill: #A0AEF2;
  }
}
@media screen {
  .o-button__svg--highlighter-blue {
    fill: #85DDE9;
  }
}
@media screen {
  .o-button__svg--highlighter-green {
    fill: #90DE9C;
  }
}
@media screen {
  .o-button__icon--white {
    background: #ffffff;
  }
}
@media screen {
  .o-button__icon--yellow {
    background: #FCB526;
  }
}
@media screen {
  .o-button__icon--black {
    background: #333333;
  }
}
@media screen {
  .o-button__icon--grey {
    background: #6E7687;
  }
}
@media screen {
  .o-button__icon--medium-grey {
    background: #CACED2;
  }
}
@media screen {
  .o-button__icon--green {
    background: #158443;
  }
}
@media screen {
  .o-button__icon--blue {
    background: #157CB8;
  }
}
@media screen {
  .o-button__icon--black-slate {
    background: #2F4F4F;
  }
}
@media screen {
  .o-button__icon--light-green {
    background: #e3f0e8;
  }
}
@media screen {
  .o-button__icon--input {
    border: 2px solid #ffffff;
  }
}
@media screen {
  .o-button__icon {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    border-radius: 0.5625rem;
    position: relative;
  }
}
@media screen {
  .o-button__icon--only {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    border-radius: 0.5625rem;
    position: relative;
  }
}
@media screen {
  .o-button__icon--left {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    border-radius: 0.5625rem;
    position: relative;
    margin-right: 10px;
  }
}
@media screen {
  .o-button__icon--right {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    border-radius: 0.5625rem;
    position: relative;
    margin-right: -2px;
    margin-left: 10px;
  }
}
@media screen {
  .o-button__icon--right-small {
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    width: 15px;
    position: relative;
    margin-right: -2px;
    margin-left: 6px;
  }
}
@media screen {
  .o-button__icon--left-small {
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    width: 15px;
    position: relative;
    margin-left: -2px;
    margin-right: 6px;
  }
}
@media screen {
  .o-button__loader-text {
    padding-left: 36px;
  }
}
@media screen {
  .o-button__loader-text--center {
    position: relative;
  }
  .o-button__loader-text--center .l-button__loader-pulse {
    left: -40px;
  }
}
@media screen {
  .l-button__loader-pulse {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -16px;
  }
}
@media screen {
  .o-icon-button {
    display: flex;
    align-items: center;
    width: 36px;
    height: 36px;
    background: #ffffff;
    border-radius: 0.5625rem;
    cursor: pointer;
  }
  .o-icon-button svg {
    display: block;
    margin: 0 auto;
  }
}
@media screen {
  .o-icon-button--small {
    width: 27px;
    height: 27px;
  }
}
@media screen {
  .o-icon-button--tiny {
    width: 24px;
    height: 24px;
  }
}
@media screen {
  .o-button__icon--dark-blue svg {
    fill: #3B4048;
  }
}
@media screen {
  .o-text-button {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
    height: 24px;
    line-height: 24px;
    border-radius: 0;
  }
  .o-text-button:hover .o-button__label {
    text-decoration: underline;
  }
  .o-text-button .o-button__icon--right {
    margin-left: 8px;
    margin-top: 1px;
  }
}
@media screen {
  .o-text-button--green {
    color: #158443;
  }
}
@media screen {
  .o-text-button--black {
    color: #333333;
  }
}
@media screen {
  .o-text-button--clear:hover .o-button__label {
    text-decoration: none;
  }
}
@media screen {
  .o-text-button--label {
    position: relative;
  }
  .o-text-button--label:hover {
    text-decoration: none !important;
  }
  .o-text-button--label:hover:before {
    content: "";
    width: 100%;
    height: 2px;
    background: #6E7687;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
@media screen {
  .o-text-button--hover {
    position: relative;
    z-index: 0;
  }
  .o-text-button--hover:before {
    content: "";
    position: absolute;
    width: 130%;
    height: 140%;
    background: #EFF3F6;
    z-index: -1;
    border-radius: 0.5625rem;
    left: -12%;
    opacity: 0;
    transition: opacity all 0.3s ease-out;
  }
  .o-text-button--hover:hover:before {
    opacity: 1;
  }
}
@media screen {
  .o-input-button {
    background: #DCE0E7;
    text-transform: uppercase;
    font-size: 0.6875em; /* 11/16 */
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 0.5625rem;
    color: #ffffff;
    padding: 6px 10px 4px;
    cursor: pointer;
  }
  .o-input-button:hover {
    background: #B9C2CF;
  }
}
@media screen {
  .o-button-video {
    width: 96px;
    height: 96px;
    background: #333333;
    border: 6px solid #ffffff;
    border-radius: 21px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -48px 0 0 -48px;
    cursor: pointer;
    color: #ffffff;
  }
  .o-button-video:hover {
    background: #158443;
  }
  .o-button-video svg {
    position: absolute;
    width: 38px;
    height: 42px;
    fill: #ffffff;
    top: 50%;
    left: 50%;
    margin-top: -21px;
    margin-left: -17px;
  }
}
@media screen {
  .o-button-video-small {
    width: 60px;
    height: 60px;
    background: #333333;
    border: 4px solid #ffffff;
    border-radius: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    cursor: pointer;
    color: #ffffff;
  }
  .o-button-video-small:hover {
    background: #158443;
  }
  .o-button-video-small svg {
    position: absolute;
    width: 21px;
    height: 24px;
    fill: #ffffff;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -10px;
  }
}
@media screen {
  .o-button-video-start {
    height: 76px;
    background: #333333;
    border: 6px solid #ffffff;
    border-radius: 12px;
    font-size: 1rem;
    padding: 0 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -38px 0 0 -103px;
  }
  .o-button-video-start:hover {
    background: #158443;
  }
  .o-button-video-start svg {
    width: 40px;
    height: 30px;
    fill: #ffffff;
    margin-left: -6px;
    margin-right: 6px;
  }
}
@media screen {
  .o-button-copy {
    width: 52px;
    height: 24px;
    background: rgba(86, 98, 115, 0.5);
    font-size: 0.6875rem; /* 11/16 */
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    padding: 5px 9px 5px;
    border-radius: 0.5625rem;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 45px;
  }
  .o-button-copy:before {
    content: "Copy";
  }
  .o-button-copy:hover {
    background: #647388;
  }
}
@media screen {
  .o-button-code {
    width: 24px;
    height: 24px;
    background: rgba(86, 98, 115, 0.5);
    top: 12px;
    right: 15px;
    border-radius: 0.5625rem;
    cursor: pointer;
    background-image: url(/assets/svg-icons/light-0d5837a4fcf134d5de69d367f5d3b717ec4e8a54a1e903d337257d330836cbef.png);
    background-size: cover;
  }
  .o-button-code:hover {
    background: #647388;
    background-image: url(/assets/svg-icons/light-0d5837a4fcf134d5de69d367f5d3b717ec4e8a54a1e903d337257d330836cbef.png);
    background-size: cover;
  }
}
@media screen {
  .o-button-menu {
    width: 48px;
    height: 48px;
    z-index: 9999;
    position: absolute;
    left: 80px;
    z-index: 9999;
    background: #434A53;
    border-radius: 120px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .o-button-menu svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
  }
}
@media screen {
  .o-button-more {
    width: 48px;
    height: 48px;
    background: #434A53;
    border-radius: 120px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .o-button-more svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
  }
}
@media screen {
  .o-button-sidebar {
    width: 36px;
    height: 36px;
  }
}
@media screen {
  .o-alert__close {
    order: 10;
    height: 16px;
    cursor: pointer;
  }
  .o-alert__close svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
  }
}
@media screen {
  .o-button-close {
    display: flex;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .o-button-close svg {
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
  }
}
@media screen {
  .o-button--bookmark {
    display: inline-flex;
    align-items: center;
    float: right;
    height: 46px;
    line-height: 46px;
    padding: 0 5px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
  }
  .o-button--bookmark:focus {
    outline: none;
  }
}
@media screen {
  .o-button--share {
    cursor: pointer;
  }
  .o-button--share i {
    transition: all 0.3s ease-out;
  }
  .o-button--share:hover i {
    background: rgba(202, 206, 210, 0.85);
  }
}
@media screen {
  .o-button--how-to .o-button__highlight {
    width: 90px;
    height: 90px;
    border-radius: 100%;
    border: 3px solid #158443;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -45px;
    z-index: 999;
  }
  .o-button--how-to .o-tooltip {
    opacity: 1;
    visibility: visible;
    width: 300px;
    top: 70px;
    left: -90px;
  }
  .o-button--how-to .o-tooltip:after {
    right: 35px;
    left: auto;
  }
}
@media screen {
  .o-button-start-content {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;
    color: #ffffff;
    text-decoration: none;
  }
  .o-button-start-content:focus {
    top: 0;
    left: 0;
    z-index: 9999999999;
    width: auto;
    height: 72px;
    line-height: 72px;
    padding: 0 15px;
    background-color: #157CB8;
  }
}
@media screen {
  .o-button-chapter {
    width: 90px;
    height: 100vh;
    background: #F5F8FB;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }
}
@media screen and (max-width: 992px) {
  .o-button-chapter {
    width: 60px;
  }
}
@media screen and (max-width: 768px) {
  .o-button-chapter {
    display: none;
  }
}
@media screen {
  .o-button-chapter:hover {
    opacity: 1;
  }
}
@media screen {
  .o-button-chapter svg {
    width: 17px;
    height: 15px;
    fill: #A7ADB4;
  }
}
@media screen {
  .o-button-chapter--left {
    left: 0;
    transform: rotate(180deg);
  }
}
@media screen {
  .o-button-chapter--right {
    right: 0;
  }
}
@media screen {
  .o-button-disclose--small {
    display: flex;
    width: 15px;
    height: 9px;
    cursor: pointer;
  }
  .o-button-disclose--small svg {
    width: 15px;
    height: 9px;
  }
}
@media screen {
  .o-button-disclose--grey svg {
    fill: #798494;
  }
}
@media screen {
  .o-button-disclose--rotate svg {
    transform: rotate(180deg);
  }
}
@media screen {
  .o-button__wrapper {
    display: flex;
    align-items: center;
  }
}
@media screen {
  .o-button--center .o-button__label, .o-button--center i {
    margin-left: auto;
  }
}
@media screen {
  .o-button--center-left .o-button__label, .o-button--center-left i {
    margin-right: auto;
  }
}
@media screen {
  .o-button--long-label {
    justify-content: center;
    white-space: normal;
    line-height: 1.25;
  }
}
@media screen {
  .l-button-accessible-hover .l-button__nub {
    transition: opacity 0.3s;
  }
  .l-button-accessible-hover:hover .l-button__nub {
    opacity: 0.75;
  }
}
@media screen {
  .l-button__svg-checkmark {
    width: 14px;
    height: 11px;
    margin-top: -5px;
    margin-left: -7px;
  }
}
@media screen {
  .l-button__svg-plus {
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
  }
}
@media screen {
  .l-button__svg-question {
    width: 13px;
    position: relative;
    left: 3px;
    top: -1px;
  }
}
@media screen {
  .l-button__svg-question--tooltip {
    opacity: 1;
  }
}
@media screen {
  .l-button__svg-close {
    width: 18px;
    transform: rotate(45deg);
  }
}
@media screen {
  .l-button__svg-close--button {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    transform: rotate(45deg);
  }
}
@media screen {
  .l-button-inside-input {
    position: absolute;
    top: 40px;
    right: 15px;
  }
}
@media screen {
  .l-button__svg-hamburger {
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
  }
}
@media screen {
  .l-button__svg-filter {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
}
@media screen {
  .l-button__svg-grid {
    width: 18px;
    height: 18px;
    margin-right: 9px;
  }
}
@media screen {
  .l-button__svg-clear {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
}
@media screen {
  .l-button__svg-clear--button {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }
}
@media screen {
  .l-button__svg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-top: -20px;
    margin-left: -10px;
  }
}
@media screen {
  .l-button__svg-bookmark-icon-nav {
    width: 20px;
    height: 20px;
  }
}
@media screen {
  .l-button__svg-arrow {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
  }
}
@media screen {
  .l-button__svg-arrow-45 {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    transform: rotate(-45deg);
  }
}
@media screen {
  .l-button__svg-arrow-90 {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    transform: rotate(90deg);
  }
}
@media screen {
  .l-button__nub {
    width: 10px;
    height: 10px;
    margin-top: -6px;
    margin-left: -6px;
    position: relative;
    top: -15.5px;
  }
}
@media screen {
  .l-button__grid-nub {
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -5px;
    position: relative;
    top: -16px;
  }
}
@media screen {
  .l-button__search {
    width: 18px;
    height: 20px;
    top: 1px;
    margin-right: 8px;
  }
  .l-button__search svg {
    width: 18px;
    height: 18px;
  }
}
@media screen {
  .l-button__svg-facebook {
    width: 11px;
    position: relative;
    top: 4px;
    left: -1px;
  }
}
@media screen {
  .l-button__svg-facebook-share {
    width: 12px;
    height: 22px;
    position: absolute;
    top: 6px;
    left: 6px;
  }
}
@media screen {
  .l-button__svg-twitter {
    width: 17px;
  }
}
@media screen {
  .l-button__svg-twitter-share {
    width: 17px;
    height: 13px;
    position: absolute;
    top: 7px;
    left: 5px;
  }
}
@media screen {
  .l-button__svg-follow-twitter {
    width: 17px;
    height: 17px;
    margin-left: -8.5px;
    margin-top: -8.5px;
  }
}
@media screen {
  .l-button__svg-speech-bubble {
    width: 22px;
    height: 22px;
    opacity: 0.5;
  }
}
@media screen {
  .l-button__svg-star {
    width: 15px;
    height: 15px;
  }
}
@media screen {
  .l-button__svg-empty-star {
    width: 15px;
    height: 15px;
  }
}
@media screen {
  .l-button__svg-half-star {
    width: 8px;
    height: 15px;
    z-index: 1;
  }
}
@media screen {
  .l-button-newsletter-icon {
    position: absolute;
    right: 15px;
    top: 13px;
  }
}
@media screen {
  .l-button__svg-cog {
    width: 25px;
    height: 25px;
  }
}
@media screen {
  .l-button__svg-search-navigator {
    width: 23px;
    height: 23px;
  }
}
@media screen {
  .l-button__svg-bookmark-navigator {
    width: 22px;
    height: 22px;
  }
}
@media screen {
  .l-button__svg-22 {
    width: 22px;
    height: 22px;
  }
}
@media screen {
  .l-button__svg-watch-offline {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }
}
@media screen {
  .l-button__svg-notepad-icon-nav {
    width: 24px;
    height: 23px;
  }
}
@media screen {
  .l-button__svg-lettering-icon-nav {
    width: 30px;
    height: 17px;
  }
}
@media screen {
  .l-button__svg-toc-icon-nav {
    width: 24px;
    height: 21px;
    margin-top: 4px;
    margin-right: -6px;
    stroke: white;
  }
}
@media screen {
  .l-button__search-nav {
    width: 18px;
    height: 20px;
    top: 1px;
    margin-right: 8px;
  }
  .l-button__search-nav svg {
    width: 21px;
    height: 21px;
  }
}
@media screen {
  .l-button__svg-arrow-nav {
    transition: 0.25s all;
    width: 12px;
    height: 12px;
    margin-left: 3px;
  }
}
@media screen {
  .l-button__svg-arrow-to-nav {
    width: 10px;
    height: 10px;
    margin-right: 8px;
    opacity: 0.5;
    transform: rotate(270deg);
  }
}
@media screen {
  .o-badge {
    background: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.6875rem; /* 11/16 */
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #333333;
    padding: 5px 9px;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    white-space: nowrap;
  }
}
@media screen {
  .o-badge-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #333333;
    border: 3px solid #ffffff;
    border-radius: 12px;
    position: relative;
  }
  .o-badge-video .o-badge-video__video-icon {
    position: relative;
    left: 1px;
    width: 16px;
  }
  .o-badge-video .o-badge-video__route-icon {
    position: relative;
    width: 23px;
  }
}
@media screen {
  .o-badge-tutorial {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    background: #333333;
    border: 4px solid #ffffff;
    border-radius: 12px;
    font-family: "Bitter", serif;
    font-size: 1.5em; /* 24/16 */
    font-weight: 700;
    color: #ffffff;
    overflow: hidden;
  }
  .o-badge-tutorial img {
    width: 100%;
    height: 100%;
  }
}
@media screen {
  .o-badge-tutorial--checkmark {
    background: #158443;
  }
  .o-badge-tutorial--checkmark svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
  }
}
@media screen {
  .o-badge-tutorial--locked svg {
    width: 16px;
    fill: #ffffff;
    display: block !important;
  }
}
@media screen {
  .o-badge-tutorial--recording svg {
    width: 22px;
    fill: #ffffff;
    display: block !important;
  }
}
@media screen {
  .o-badge-product {
    color: #ffffff;
    border-radius: 9px 3px 9px 9px;
    padding: 5px 12px;
    box-shadow: none;
  }
}
@media screen {
  .o-badge-product--new {
    background: #157CB8;
  }
}
@media screen {
  .o-badge-product--update {
    background: #41AEA4;
  }
}
@media screen {
  .o-badge-product--sale {
    background: #CF3B2B;
  }
}
@media screen {
  .o-badge-product--highlight {
    background: none;
    color: #ffffff;
  }
}
@media screen {
  .o-badge-product--preorder {
    background: #3B4048;
  }
}
@media screen {
  .o-badge--pro {
    width: auto;
    height: auto;
    background: #157CB8;
    border-radius: 0.5625rem; /* 9/16 */
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 3px 7px;
    position: relative;
  }
}
@media screen {
  .o-badge--new {
    background: #9668B0;
    color: #ffffff;
    box-shadow: none;
    border-radius: 9px 3px 9px 9px;
  }
}
@media screen {
  .o-badge--completed {
    width: 108px;
    display: inline-flex;
    color: #ffffff;
    background: #158443;
    align-items: center;
    border-radius: 0.5625rem;
    justify-content: center;
    padding: 5px 9px;
  }
  .o-badge--completed .c-tutorial-item__complete-text {
    position: relative;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .o-badge--completed i {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 15px;
    height: 20px;
    margin-right: 6px;
  }
  .o-badge--completed i svg {
    width: 11px;
    fill: #ffffff;
  }
}
@media screen {
  .o-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #333333;
  }
  .o-label .o-label__info {
    font-size: 0.6875rem;
    color: #959DA5;
  }
}
@media screen {
  .o-input {
    height: 50px;
    padding: 0 15px;
    background: #ffffff;
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem; /* 9/16 */
    transition: all 0.25s;
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 1rem;
  }
  .o-input:focus {
    background: rgba(29, 131, 209, 0.05);
    border: 2px solid #73859F;
    box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
    outline: none;
  }
}
@media screen {
  .o-input--large {
    height: 54px;
    padding: 0 15px;
    background: #ffffff;
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem; /* 9/16 */
    transition: all 0.25s;
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 1rem;
  }
  .o-input--large:focus {
    background: rgba(29, 131, 209, 0.05);
    border: 2px solid #73859F;
    box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
    outline: none;
  }
}
@media screen {
  .o-input--larger {
    height: 56px;
    padding: 0 15px;
    background: #ffffff;
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem; /* 9/16 */
    transition: all 0.25s;
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 1rem;
  }
  .o-input--larger:focus {
    background: rgba(29, 131, 209, 0.05);
    border: 2px solid #73859F;
    box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
    outline: none;
  }
}
@media screen {
  .o-input--dark {
    height: 50px;
    padding: 0 15px;
    background: #ffffff;
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem; /* 9/16 */
    transition: all 0.25s;
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 1rem;
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
  }
  .o-input--dark:focus {
    background: rgba(29, 131, 209, 0.05);
    border: 2px solid #73859F;
    box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
    outline: none;
  }
  .o-input--dark::placeholder {
    color: #959DA5;
  }
}
@media screen {
  .o-textarea {
    padding: 15px;
    background: #ffffff;
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem; /* 9/16 */
    transition: all 0.25s;
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.45;
    min-width: 100%;
    max-width: 100%;
  }
  .o-textarea:focus {
    background: rgba(29, 131, 209, 0.05);
    border: 2px solid #73859F;
    box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
    outline: none;
  }
}
@media screen {
  .o-textarea--dark {
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
  }
}
@media screen {
  .input__group {
    position: relative;
  }
  .input__group .input__icon {
    position: absolute;
    width: 0;
    height: 50px;
    line-height: 48px;
    text-align: center;
    margin-top: 8px;
  }
  .input__group .input__icon-svg--twitter {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 17px;
    top: 50%;
    margin-top: -7px;
    fill: #73859F;
  }
  .input__group .input__icon-svg--search {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 16px;
    top: 50%;
    margin-top: -11px;
    fill: #ffffff;
  }
  .input__group .o-input {
    padding-left: 42px;
  }
}
@media screen {
  .o-checkbox__wrapper {
    position: relative;
  }
}
@media screen {
  .o-checkbox {
    position: absolute;
    cursor: pointer;
    width: 27px;
    height: 27px;
    text-indent: -9999px;
  }
  .o-checkbox:hover .checkbox__indicator {
    background: rgba(29, 131, 209, 0.05);
  }
  .o-checkbox .checkbox__input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .o-checkbox .checkbox__input:focus ~ .checkbox__indicator:focus:not(:focus-visible) {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.25);
  }
  .o-checkbox .checkbox__input:focus-visible ~ .checkbox__indicator {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.25);
  }
  .o-checkbox .checkbox__input:checked ~ .checkbox__indicator {
    background: #158443 !important;
    border: 3px solid #158443 !important;
    border: none;
  }
  .o-checkbox .checkbox__input:checked ~ .checkbox__indicator svg {
    display: block;
  }
  .o-checkbox .checkbox__input:checked:focus ~ span.checkbox__indicator:focus:not(:focus-visible) {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.25);
  }
  .o-checkbox .checkbox__input:checked:focus ~ span.checkbox__indicator svg {
    display: block;
  }
  .o-checkbox .checkbox__input:checked:focus-visible ~ span.checkbox__indicator {
    outline: 3px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.25);
  }
  .o-checkbox .checkbox__input:checked:focus-visible ~ span.checkbox__indicator svg {
    display: block;
  }
  .o-checkbox .checkbox__indicator {
    position: absolute;
    left: 0;
    width: 27px;
    height: 27px;
    background: #ffffff;
    border-radius: 0.5625rem;
    border: 2px solid rgba(115, 133, 159, 0.5);
    transition: all 0.3s;
  }
  .o-checkbox .checkbox__indicator svg {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    fill: #ffffff;
    width: 15px;
    height: 12px;
    margin: -5.5px 0 0 -7.5px;
  }
}
@media screen {
  .o-checkbox__title {
    display: inline-block;
    padding-top: 2px;
    padding-left: 36px;
  }
}
@media screen {
  .o-checkbox--dark .checkbox__indicator {
    background: none;
    border: 2px solid rgba(115, 133, 159, 0.75);
  }
}
@media screen {
  .o-checkbox--small {
    width: 24px;
    height: 24px;
  }
  .o-checkbox--small .checkbox__indicator {
    width: 24px;
    height: 24px;
  }
  .o-checkbox--small .checkbox__indicator svg {
    width: 13px;
    height: 10px;
    margin: -5px 0 0 -6.5px;
  }
}
@media screen {
  .o-checkbox-toggle {
    position: absolute;
    cursor: pointer;
    width: 44px;
    height: 24px;
  }
  .o-checkbox-toggle .o-tooltip {
    top: -50px;
  }
  .o-checkbox-toggle .o-checkbox-toggle__input {
    position: absolute;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .o-checkbox-toggle .o-checkbox-toggle__input:checked ~ .o-checkbox-toggle__indicator {
    background-color: #158443;
  }
  .o-checkbox-toggle .o-checkbox-toggle__input:checked ~ .o-checkbox-toggle__indicator:before {
    transform: translateX(19px);
  }
  .o-checkbox-toggle .o-checkbox-toggle__indicator {
    position: relative;
    display: flex;
    background-color: #DBDDE0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
  }
  .o-checkbox-toggle .o-checkbox-toggle__indicator:before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #ffffff;
    position: absolute;
    left: 3px;
    top: 3px;
    transform: translateX(0);
    transition: transform 0.3s;
  }
}
@media screen {
  .o-checkbox-toggle--dark .o-checkbox-toggle__indicator {
    background-color: rgba(219, 221, 224, 0.2);
  }
}
@media screen {
  .form__validation {
    position: absolute;
    left: 0;
    top: 82px;
    font-size: 0.75em; /* 12/16 */
  }
}
@media screen and (max-width: 600px) {
  .form__validation {
    position: relative;
    top: -15px;
  }
}
@media screen {
  .form__validation--error {
    font-weight: 600;
    color: #CF3B2B;
  }
}
@media screen {
  .o-dropdown {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 46px;
    line-height: 46px;
    padding: 0 15px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.5625rem;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s;
    white-space: nowrap;
    background: white;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    color: #333333;
    position: relative;
  }
  .o-dropdown > span {
    display: flex;
    align-items: center;
  }
  .o-dropdown > span svg {
    width: 10px;
    margin-left: 10px;
  }
  .o-dropdown ul.o-dropdown-menu {
    width: 100%;
    top: 52px;
    left: 0;
  }
  .o-dropdown ul.o-dropdown-menu li a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.9375rem !important;
    text-decoration: none;
  }
}
@media screen {
  @keyframes loader-pulse {
    0%, 100% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
  }
}
@media screen {
  .o-loader-pulse__bounce-1, .o-loader-pulse__bounce-2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader-pulse 2s infinite ease-in-out;
  }
}
@media screen {
  .o-loader-pulse__bounce-2 {
    animation-delay: -1s;
  }
}
@media screen {
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
}
@media screen {
  .o-loader-circle {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .o-loader-circle .o-loader-circle__arc {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .o-loader-circle .o-loader-circle__arc::before, .o-loader-circle .o-loader-circle__arc::after {
    content: "";
    position: absolute;
    top: 32%;
    left: 32%;
    border: 2px solid;
    border-radius: 50%;
    width: 36%;
    height: 36%;
  }
  .o-loader-circle .o-loader-circle__arc::before {
    border-color: #158443;
    opacity: 0.3;
  }
  .o-loader-circle .o-loader-circle__arc::after {
    border-color: transparent;
    border-bottom-color: #158443;
    animation: rotate 0.75s infinite linear;
  }
}
@media screen {
  @keyframes a-dot-loader {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
@media screen {
  .c-dot-loader .a-dot-loader--1 {
    animation: a-dot-loader 1.5s infinite;
  }
  .c-dot-loader .a-dot-loader--2 {
    animation: a-dot-loader 1.5s infinite;
    animation-delay: 0.1s;
  }
  .c-dot-loader .a-dot-loader--3 {
    animation: a-dot-loader 1.5s infinite;
    animation-delay: 0.2s;
  }
}
@media screen {
  div.o-header-logo {
    width: 100%;
    position: relative;
  }
}
@media screen and (max-width: 992px) {
  div.o-header-logo {
    width: 48px;
    height: 48px;
  }
}
@media screen {
  div.o-header-logo svg.o-header-logo__text {
    width: 100%;
    fill: #ffffff;
  }
}
@media screen {
  div.o-header-logo svg.o-header-logo__mark {
    width: 50px;
    fill: #158443;
    position: absolute;
    top: 0;
    left: 0;
    transition: fill 0.3s;
  }
}
@media screen and (max-width: 992px) {
  div.o-header-logo svg.o-header-logo__mark {
    width: 48px;
    position: relative;
  }
}
@media screen {
  div.o-header-logo a.o-header-logo__link {
    display: block;
  }
  div.o-header-logo a.o-header-logo__link:hover svg.o-header-logo__mark {
    fill: #ffffff;
  }
}
@media screen {
  .o-rounded-image {
    border-radius: 0.5625rem;
  }
}
@media screen {
  .o-profile-pic--small, .o-profile-pic--medium, .o-profile-pic--large, .o-profile-pic--largest {
    background: #ffffff;
    border-radius: 0.5625rem;
    overflow: hidden;
  }
  .o-profile-pic--small img, .o-profile-pic--medium img, .o-profile-pic--large img, .o-profile-pic--largest img {
    width: 100%;
    height: auto;
  }
}
@media screen {
  .o-profile-pic--largest {
    width: 120px;
    height: 120px;
  }
}
@media screen {
  .o-profile-pic--large {
    width: 90px;
    height: 90px;
  }
}
@media screen {
  .o-profile-pic--medium {
    width: 54px;
    height: 54px;
  }
}
@media screen {
  .o-profile-pic--small {
    width: 40px;
    height: 40px;
  }
}
@media screen {
  .o-screenshot {
    border: 12px solid #ffffff;
    border-radius: 0.5625rem;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  }
}
@media screen {
  .o-screenshot--large {
    border: 24px solid #ffffff;
  }
}
@media screen {
  .receipt-date {
    width: 100px;
  }
}
@media screen {
  .receipt-products {
    width: 400px;
  }
}
@media screen {
  .receipt-tax {
    width: 150px;
  }
}
@media screen {
  .receipt-order-total {
    width: 150px;
  }
}
@media screen {
  .o-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5625rem;
    min-height: 48px;
    color: #ffffff;
    padding: 14px 15px;
    position: relative;
    font-size: 0.9375em;
    margin-top: 10px;
  }
}
@media screen {
  .o-alert a {
    color: #ffffff;
  }
}
@media screen and (max-width: 600px) {
  .o-alert {
    font-size: 0.875rem;
  }
}
@media screen {
  .o-alert .o-alert__close {
    order: 10;
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: relative;
  }
}
@media screen {
  .o-alert .o-alert__close svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
    margin: -8px 0 0 -8px;
  }
}
@media screen {
  .o-alert--success {
    background: #14161E;
    padding-left: 94px;
  }
}
@media screen {
  .o-alert--danger {
    background: #CF3B2B;
    padding-left: 78px;
  }
}
@media screen {
  .o-alert--danger:before {
    content: "error";
    color: #CF3B2B;
    position: absolute;
    left: 15px;
    top: 12px;
    border-radius: 0.5625rem;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    padding: 5px 8px 4px;
  }
}
@media screen {
  .o-alert--warning {
    background: #FCB526;
    padding-left: 94px;
  }
}
@media screen {
  .o-alert--warning:before {
    content: "warning";
    color: #FCB526;
    position: absolute;
    left: 15px;
    top: 12px;
    border-radius: 0.5625rem;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    padding: 5px 8px 4px;
  }
}
@media screen {
  .o-alert--tip {
    background: #2F4F4F;
    padding-left: 58px;
  }
}
@media screen {
  .o-alert--tip:before {
    content: "tip";
    color: #2F4F4F;
    position: absolute;
    left: 15px;
    top: 12px;
    border-radius: 0.5625rem;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    padding: 5px 8px 4px;
  }
}
@media screen {
  .o-alert--info {
    background: #14161E;
    padding-left: 68px;
  }
}
@media screen {
  .o-alert--info:before {
    content: "info";
    color: #2F4F4F;
    position: absolute;
    left: 15px;
    top: 12px;
    border-radius: 0.5625rem;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    padding: 5px 8px 4px;
  }
}
@media screen {
  .o-alert--archive {
    background: #CF3B2B;
    padding-left: 90px;
  }
}
@media screen {
  .o-alert--archive:before {
    content: "archive";
    color: #CF3B2B;
    position: absolute;
    left: 15px;
    top: 12px;
    border-radius: 0.5625rem;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    padding: 5px 8px 4px;
  }
}
@media screen {
  .o-alert--announce {
    background: #6767A8;
    padding-left: 138px;
  }
}
@media screen {
  .o-alert--announce:before {
    content: "announcement";
    color: #6767A8;
    position: absolute;
    left: 15px;
    top: 12px;
    border-radius: 0.5625rem;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    padding: 5px 8px 4px;
  }
}
@media screen {
  .o-alert--subscription {
    background: #FDCF74;
    color: #333333;
    padding-left: 68px;
  }
}
@media screen {
  .o-alert--subscription:before {
    content: "info";
    color: #FDCF74;
    position: absolute;
    left: 15px;
    top: 12px;
    border-radius: 0.5625rem;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    padding: 5px 8px 4px;
    background: #333333;
  }
}
@media screen {
  .o-alert--pro {
    background: #157CB8;
    padding-left: 68px;
  }
}
@media screen {
  .o-alert--pro:before {
    content: "pro";
    position: absolute;
    left: 15px;
    top: 12px;
    border-radius: 0.5625rem;
    background: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    padding: 5px 8px 4px;
    background: #157CB8;
    border-radius: 0.5625rem; /* 9/16 */
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 2px 7px;
    top: 13px;
  }
}
@media screen {
  .l-alert-admin-top {
    margin-bottom: 27px;
  }
}
@media screen {
  .l-alert-sticky {
    position: fixed;
    z-index: 999999;
    bottom: 0;
    border-radius: 0;
  }
}
@media screen and (max-width: 992px) {
  .l-alert-sticky {
    left: 0;
    width: 100%;
  }
}

@media screen {
  .l-alert-banner {
    border-radius: 0;
    margin-top: 0;
  }
}
@media screen {
  .o-progress-indicator {
    display: block;
    position: relative;
    height: 6px;
    border-radius: 50px;
    background: #D6E0EF;
  }
  .o-progress-indicator .o-progress-indicator__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 6px;
    border-radius: 50px;
    transition: all 0.3s ease-out;
  }
  .o-progress-indicator .o-progress-indicator__fill--green {
    background: #158443;
  }
  .o-progress-indicator .o-progress-indicator__fill--yellow {
    background: #FCB526;
  }
  .o-progress-indicator .o-progress-indicator__fill--red {
    background: #CF3B2B;
  }
}
@media screen {
  .o-progress-indicator-html {
    display: flex;
    height: 6px;
    border-radius: 12px;
    overflow: hidden;
  }
  .o-progress-indicator-html progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 6px;
    background-color: #D6E0EF;
    border-radius: 100px;
    border: none;
  }
  .o-progress-indicator-html ::-webkit-progress-bar {
    background-color: #D6E0EF;
  }
  .o-progress-indicator-html ::-webkit-progress-bar-value {
    background-color: #158443;
  }
  .o-progress-indicator-html ::-moz-progress-bar {
    background-color: #158443;
  }
}
@media screen {
  .o-tag {
    display: inline-block;
    background: #ffffff;
    height: 40px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333333;
    border-radius: 0.5625rem;
    text-decoration: none;
    border: 2px solid #D6E0EF;
    margin-right: 2px;
    margin-bottom: 8px;
    cursor: pointer;
  }
  .o-tag button {
    cursor: pointer;
    vertical-align: middle;
  }
  .o-tag button svg {
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    margin-left: 5px;
  }
}
@media screen {
  .o-tag--black {
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
  }
}
@media screen {
  .o-tag--grey-mini {
    height: 36px;
    font-size: 0.8125rem; /* 13/16 */
    font-weight: 600;
    background-color: rgba(219, 221, 224, 0.4);
    border: none;
    margin-bottom: 0;
  }
}
@media screen {
  @font-face {
    font-family: "Relative";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/relative-book-pro-b7bfc78df53a6103abfdccc4f18a0e919172076cc7dd5c5309a0a94d64f19615.woff2) format("woff2"), url(/assets/relative-book-pro-d1079bfa99a0cab9ef8465a629feddad450f13b5b7f7b495f2717b2788b5428f.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
@media screen {
  @font-face {
    font-family: "Relative";
    font-style: italic;
    font-weight: 400;
    src: url(/assets/relative-italic-pro-46b2f83e0335d2ee38e8ead7854143fc4642a914ef19d165b7c40027bc649202.woff2) format("woff2"), url(/assets/relative-italic-pro-cbc583d872bfd3462fa990ac1d595cf7d5f6f8a1bc16f70f9f43d12d2f9cb186.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
@media screen {
  @font-face {
    font-family: "Relative";
    font-style: normal;
    font-weight: 500;
    src: url(/assets/relative-medium-pro-efff202b230c17039474726cd59259a03b75292b1a63068ab73f55dbf6a25dcb.woff2) format("woff2"), url(/assets/relative-medium-pro-16f66e32ff5195a3e52ad1f851b3559c20d2fb56508ed215cf319f2a59cf7abf.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
@media screen {
  @font-face {
    font-family: "Relative";
    font-style: italic;
    font-weight: 500;
    src: url(/assets/relative-medium-italic-pro-78c16e218cb3c8571907fe11721c5701644595e0c27b839dbc8a71053ac64d21.woff2) format("woff2"), url(/assets/relative-medium-italic-pro-ec9d2644d301a4cd59c1233b2a99af84d75f908d6d60e9e82105643ab841ee1e.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
@media screen {
  @font-face {
    font-family: "Relative";
    font-style: normal;
    font-weight: 700;
    src: url(/assets/relative-bold-pro-27260fd4e75322220c790f98dd68c0a32a0c0d87bed151a3732089964da11a84.woff2) format("woff2"), url(/assets/relative-bold-pro-5b61cb4c881c1b1713838dbe2b50a7aa601508d74e54551a5bae022d4c7c0c84.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
@media screen {
  @font-face {
    font-family: "Relative";
    font-style: italic;
    font-weight: 700;
    src: url(/assets/relative-bold-italic-pro-9f0cd55a979f577d9982fa929066340f88f483707128ebc6829136d15ac79ee8.woff2) format("woff2"), url(/assets/relative-bold-italic-pro-c35f296845bfcf8e5da688c8c0fd79c93307872766e0398fce78f46ef00736af.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
@media screen {
  @font-face {
    font-family: "Relative Mono";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/relative-mono-10-pitch-pro-b82594bbdaa88ed3eb167db83ce1e51421fe27906d887c2224bd7f3134d7a9cf.woff2) format("woff2"), url(/assets/relative-mono-10-pitch-pro-d954d74c5298b0cde17bd4d03342ed4974193ad7e5a78e9ebf10d8799ad883ce.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
@media screen {
  .o-fragment--tooltip, .o-tooltip, [data-tooltip]:before {
    background: #14161E;
    font-size: 0.875rem; /* 14/16 */
    font-weight: 600;
    border-radius: 0.5625rem;
    padding: 9px 18px;
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    color: #ffffff;
    z-index: 99999;
    width: auto;
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
}
@media screen {
  [data-tooltip] {
    position: relative;
  }
}
@media screen {
  [data-tooltip]:before {
    content: attr(data-tooltip);
  }
}
@media screen {
  [data-tooltip]:after {
    position: absolute;
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    top: 22px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    transform: rotate(45deg);
    border-radius: 3px;
    opacity: 0;
  }
}
@media screen {
  [data-tooltip]:hover:before, [data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
  }
}
@media screen {
  .o-button-tooltip:hover .o-tooltip {
    visibility: visible;
    opacity: 1;
  }
}
@media screen {
  .o-tooltip {
    height: 40px;
    line-height: 24px;
  }
}
@media screen {
  .o-tooltip:after {
    position: absolute;
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    top: 24px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    transform: rotate(45deg);
    border-radius: 3px;
    opacity: 1;
    z-index: -1;
  }
}
@media screen {
  .o-tooltip--slim {
    padding: 6px 14px;
    height: 36px;
    line-height: 24px;
  }
}
@media screen {
  .o-tooltip--arrow-top:after {
    top: -3px;
    transform: rotate(45deg);
    border-radius: 3px;
  }
}
@media screen {
  .o-tooltip--arrow-top-left:after {
    left: 20px;
    top: -3px;
    transform: rotate(45deg);
    border-radius: 3px;
  }
}
@media screen {
  .o-tooltip--arrow-top-right:after {
    left: auto;
    right: 20px;
    top: -3px;
    transform: rotate(45deg);
    border-radius: 3px;
  }
}
@media screen {
  .o-tooltip--white {
    background: #ffffff;
    color: #333333;
  }
}
@media screen {
  .o-tooltip--white:after {
    background: #ffffff;
  }
}
@media screen {
  .o-tooltip--dark {
    background: #3B4048;
    color: #ffffff;
  }
}
@media screen {
  .o-tooltip--dark:after {
    background: #3B4048;
  }
}
@media screen {
  .o-tooltip--dark-small {
    border: 2px solid #959DA5;
  }
}
@media screen {
  .o-tooltip--dark-small:before {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #3B4048;
    position: absolute;
    top: auto;
    bottom: -5px;
    left: 50%;
    margin-left: -6px;
    z-index: 1;
    border-radius: 2px;
  }
}
@media screen {
  .o-tooltip--dark-small:after {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #959DA5;
    position: absolute;
    bottom: -8px;
    top: auto;
    left: 50%;
    margin-left: -6px;
    z-index: 0;
    border-radius: 2px;
    transform: none;
  }
}
@media screen {
  .o-tooltip--green {
    background: #158443;
  }
}
@media screen {
  .o-tooltip--green:after {
    background: #158443;
  }
}
@media screen {
  .o-tooltip--top {
    top: -54px !important;
  }
}
@media screen {
  .o-tooltip--top-42 {
    top: -42px !important;
  }
}
@media screen {
  .o-tooltip--align-bottom {
    top: auto !important;
    bottom: 36px;
  }
}
@media screen {
  .o-tooltip--align-bottom:after {
    top: auto;
    bottom: -3px;
  }
}
@media screen {
  .o-tooltip--paragraph {
    height: auto;
    text-align: left;
    white-space: normal;
    line-height: 1.45;
    padding: 12px 18px;
  }
}
@media screen {
  .data-tooltip--top-left {
    position: unset !important;
  }
}
@media screen {
  .data-tooltip--top-left:before {
    top: -52px;
    left: 82px;
  }
}
@media screen {
  .data-tooltip--top-left:after {
    top: -30px;
    left: 24px;
  }
}
@media screen {
  .data-tooltip--top-right:before {
    top: -48px;
    left: auto;
    right: -90px;
  }
}
@media screen {
  .data-tooltip--top-right:after {
    top: -25px;
    left: auto;
    right: 5px;
  }
}
@media screen {
  .o-fragment--tooltip {
    opacity: 1;
    visibility: visible;
    display: flex;
    background: #333333 !important;
    height: 48px;
    padding: 0 12px 0 2px !important;
    min-width: max-content;
    user-select: none;
  }
}
@media screen {
  .o-fragment--tooltip span {
    cursor: pointer;
  }
}
@media screen {
  .o-fragment--tooltip:after {
    content: "";
    position: absolute;
    background: #333333 !important;
    top: 34px !important;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    transform: rotate(45deg);
    border-radius: 3px;
    opacity: 1;
    z-index: -1;
  }
}
@media screen {
  .o-fragment--tooltip > span {
    display: flex;
    align-items: center;
    line-height: 1;
  }
}
@media screen {
  .o-fragment--tooltip > div {
    display: flex;
    align-items: center;
    line-height: 1;
  }
}
@media screen {
  .o-fragment--tooltip > div > button {
    display: flex;
    align-items: center;
    line-height: 1;
  }
}
@media screen {
  .o-fragment--tooltip svg {
    max-width: 24px;
    max-height: 24px;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color {
    /* These are needed because Safari thinks it's ok to "select" a span. But we use
       the concept of selection to determine whether or not the tooltip for a fragment
       should be shown. Since only one thing can be selected at once, if the colour box
       can be selected then the text selection is lost, and hence the annotation.
    */
    user-select: none;
    -webkit-user-select: none;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 0.375rem; /* 6/16 */
    position: relative;
    margin-left: 10px;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color--selected {
    width: 28px;
    height: 28px;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color--selected:before {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 3px solid #333333;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -12px;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color--yellow {
    background: #FFE242;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color--orange {
    background: #FBBC5D;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color--red {
    background: #E58A8A;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color--purple {
    background: #A0AEF2;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color--blue {
    background: #85DDE9;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__color--green {
    background: #90DE9C;
  }
}
@media screen {
  .o-fragment--tooltip .o-tooltip__action {
    padding: 0 10px;
    border-left: 1px solid #434A53;
  }
}
@media screen {
  .l-tooltip-book-chapters {
    left: 45px;
    top: 35px;
  }
}
@media screen {
  .l-tooltip-book-tools {
    top: 35px;
  }
}
@media screen {
  .l-tooltip-erase-notebook {
    left: auto;
    right: 0;
    right: -78px;
    top: 32px;
  }
}
@media screen {
  .l-tooltip-erase-notebook:after {
    right: 10px;
  }
}
@media screen {
  .prefers-color-scheme--dark .transcript.o-tooltip {
    background-color: #3B3D43;
  }
}
@media screen {
  .o-link--green {
    color: #158443;
  }
}
@media screen {
  .o-circular--progress {
    height: 5.625em;
    width: 5.625em;
    float: left;
    position: relative;
  }
  .o-circular--progress:nth-child(3n+1) {
    clear: both;
  }
  .o-circular--progress .o-circular--progress__container {
    height: 100%;
    width: 100%;
    clip: rect(0, 5.625em, 5.625em, 2.8125em);
    left: 0;
    position: absolute;
    top: 0;
  }
  .o-circular--progress .o-circular--progress__container .o-progress--half-circle {
    height: 100%;
    width: 100%;
    border: 4px solid #158443;
    border-radius: 50%;
    clip: rect(0, 2.8125em, 5.625em, 0);
    left: 0;
    position: absolute;
    top: 0;
  }
  .o-circular--progress .o-circular-progress--label {
    background: #333333;
    border-radius: 50%;
    bottom: 1em;
    color: #333333;
    cursor: default;
    display: block;
    font-size: 1.40625em;
    left: 1em;
    position: absolute;
    right: 1em;
    text-align: center;
    top: 1em;
    padding: 9px;
  }
  .o-circular--progress .o-circular-progress--label .o-circluar--percent__text {
    color: #333333;
    font-size: 0.45em;
    padding-bottom: 20px;
    vertical-align: super;
  }
  .o-circular--progress .o-progress--no-progress {
    height: 100%;
    width: 100%;
    border: 4px solid #DBDDE0;
    border-radius: 50%;
  }
  .o-circular--progress.o-progress--style-2 .o-circular-progress--label {
    background: none;
    display: flex;
    font-family: "Bitter", serif;
    font-weight: bold;
    font-size: 1.25rem; /* 20/16 */
    color: #333333;
    letter-spacing: -0.5px;
  }
  .o-circular--progress.o-progress--style-2 .o-circular-progress--label .o-circluar--percent__text {
    font-family: "Bitter", serif;
    font-weight: bold;
    font-size: 1.25rem; /* 20/16 */
    color: #333333;
  }
  .o-circular--progress.o-progress--0 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--0 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(0deg);
  }
  .o-circular--progress.o-progress--0 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--1 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--1 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(3.6deg);
  }
  .o-circular--progress.o-progress--1 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--2 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--2 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(7.2deg);
  }
  .o-circular--progress.o-progress--2 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--3 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--3 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(10.8deg);
  }
  .o-circular--progress.o-progress--3 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--4 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--4 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(14.4deg);
  }
  .o-circular--progress.o-progress--4 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--5 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--5 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(18deg);
  }
  .o-circular--progress.o-progress--5 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--6 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--6 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(21.6deg);
  }
  .o-circular--progress.o-progress--6 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--7 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--7 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(25.2deg);
  }
  .o-circular--progress.o-progress--7 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--8 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--8 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(28.8deg);
  }
  .o-circular--progress.o-progress--8 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--9 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--9 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(32.4deg);
  }
  .o-circular--progress.o-progress--9 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--10 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--10 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(36deg);
  }
  .o-circular--progress.o-progress--10 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--11 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--11 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(39.6deg);
  }
  .o-circular--progress.o-progress--11 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--12 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--12 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(43.2deg);
  }
  .o-circular--progress.o-progress--12 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--13 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--13 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(46.8deg);
  }
  .o-circular--progress.o-progress--13 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--14 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--14 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(50.4deg);
  }
  .o-circular--progress.o-progress--14 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--15 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--15 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(54deg);
  }
  .o-circular--progress.o-progress--15 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--16 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--16 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(57.6deg);
  }
  .o-circular--progress.o-progress--16 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--17 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--17 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(61.2deg);
  }
  .o-circular--progress.o-progress--17 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--18 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--18 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(64.8deg);
  }
  .o-circular--progress.o-progress--18 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--19 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--19 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(68.4deg);
  }
  .o-circular--progress.o-progress--19 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--20 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--20 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(72deg);
  }
  .o-circular--progress.o-progress--20 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--21 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--21 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(75.6deg);
  }
  .o-circular--progress.o-progress--21 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--22 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--22 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(79.2deg);
  }
  .o-circular--progress.o-progress--22 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--23 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--23 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(82.8deg);
  }
  .o-circular--progress.o-progress--23 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--24 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--24 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(86.4deg);
  }
  .o-circular--progress.o-progress--24 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--25 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--25 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(90deg);
  }
  .o-circular--progress.o-progress--25 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--26 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--26 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(93.6deg);
  }
  .o-circular--progress.o-progress--26 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--27 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--27 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(97.2deg);
  }
  .o-circular--progress.o-progress--27 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--28 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--28 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(100.8deg);
  }
  .o-circular--progress.o-progress--28 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--29 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--29 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(104.4deg);
  }
  .o-circular--progress.o-progress--29 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--30 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--30 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(108deg);
  }
  .o-circular--progress.o-progress--30 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--31 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--31 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(111.6deg);
  }
  .o-circular--progress.o-progress--31 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--32 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--32 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(115.2deg);
  }
  .o-circular--progress.o-progress--32 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--33 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--33 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(118.8deg);
  }
  .o-circular--progress.o-progress--33 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--34 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--34 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(122.4deg);
  }
  .o-circular--progress.o-progress--34 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--35 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--35 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(126deg);
  }
  .o-circular--progress.o-progress--35 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--36 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--36 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(129.6deg);
  }
  .o-circular--progress.o-progress--36 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--37 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--37 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(133.2deg);
  }
  .o-circular--progress.o-progress--37 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--38 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--38 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(136.8deg);
  }
  .o-circular--progress.o-progress--38 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--39 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--39 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(140.4deg);
  }
  .o-circular--progress.o-progress--39 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--40 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--40 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(144deg);
  }
  .o-circular--progress.o-progress--40 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--41 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--41 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(147.6deg);
  }
  .o-circular--progress.o-progress--41 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--42 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--42 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(151.2deg);
  }
  .o-circular--progress.o-progress--42 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--43 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--43 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(154.8deg);
  }
  .o-circular--progress.o-progress--43 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--44 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--44 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(158.4deg);
  }
  .o-circular--progress.o-progress--44 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--45 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--45 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(162deg);
  }
  .o-circular--progress.o-progress--45 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--46 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--46 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(165.6deg);
  }
  .o-circular--progress.o-progress--46 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--47 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--47 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(169.2deg);
  }
  .o-circular--progress.o-progress--47 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--48 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--48 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(172.8deg);
  }
  .o-circular--progress.o-progress--48 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--49 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--49 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(176.4deg);
  }
  .o-circular--progress.o-progress--49 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--50 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--50 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--50 .o-circular--progress__container .o-circular--progress__container-right {
    display: none;
  }
  .o-circular--progress.o-progress--51 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--51 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--51 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(183.6deg);
  }
  .o-circular--progress.o-progress--51 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--52 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--52 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--52 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(187.2deg);
  }
  .o-circular--progress.o-progress--52 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--53 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--53 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--53 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(190.8deg);
  }
  .o-circular--progress.o-progress--53 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--54 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--54 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--54 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(194.4deg);
  }
  .o-circular--progress.o-progress--54 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--55 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--55 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--55 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(198deg);
  }
  .o-circular--progress.o-progress--55 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--56 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--56 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--56 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(201.6deg);
  }
  .o-circular--progress.o-progress--56 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--57 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--57 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--57 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(205.2deg);
  }
  .o-circular--progress.o-progress--57 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--58 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--58 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--58 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(208.8deg);
  }
  .o-circular--progress.o-progress--58 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--59 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--59 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--59 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(212.4deg);
  }
  .o-circular--progress.o-progress--59 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--60 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--60 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--60 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(216deg);
  }
  .o-circular--progress.o-progress--60 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--61 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--61 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--61 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(219.6deg);
  }
  .o-circular--progress.o-progress--61 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--62 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--62 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--62 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(223.2deg);
  }
  .o-circular--progress.o-progress--62 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--63 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--63 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--63 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(226.8deg);
  }
  .o-circular--progress.o-progress--63 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--64 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--64 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--64 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(230.4deg);
  }
  .o-circular--progress.o-progress--64 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--65 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--65 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--65 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(234deg);
  }
  .o-circular--progress.o-progress--65 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--66 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--66 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--66 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(237.6deg);
  }
  .o-circular--progress.o-progress--66 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--67 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--67 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--67 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(241.2deg);
  }
  .o-circular--progress.o-progress--67 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--68 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--68 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--68 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(244.8deg);
  }
  .o-circular--progress.o-progress--68 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--69 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--69 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--69 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(248.4deg);
  }
  .o-circular--progress.o-progress--69 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--70 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--70 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--70 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(252deg);
  }
  .o-circular--progress.o-progress--70 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--71 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--71 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--71 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(255.6deg);
  }
  .o-circular--progress.o-progress--71 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--72 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--72 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--72 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(259.2deg);
  }
  .o-circular--progress.o-progress--72 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--73 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--73 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--73 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(262.8deg);
  }
  .o-circular--progress.o-progress--73 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--74 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--74 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--74 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(266.4deg);
  }
  .o-circular--progress.o-progress--74 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--75 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--75 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--75 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(270deg);
  }
  .o-circular--progress.o-progress--75 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--76 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--76 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--76 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(273.6deg);
  }
  .o-circular--progress.o-progress--76 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--77 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--77 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--77 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(277.2deg);
  }
  .o-circular--progress.o-progress--77 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--78 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--78 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--78 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(280.8deg);
  }
  .o-circular--progress.o-progress--78 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--79 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--79 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--79 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(284.4deg);
  }
  .o-circular--progress.o-progress--79 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--80 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--80 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--80 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(288deg);
  }
  .o-circular--progress.o-progress--80 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--81 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--81 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--81 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(291.6deg);
  }
  .o-circular--progress.o-progress--81 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--82 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--82 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--82 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(295.2deg);
  }
  .o-circular--progress.o-progress--82 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--83 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--83 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--83 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(298.8deg);
  }
  .o-circular--progress.o-progress--83 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--84 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--84 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--84 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(302.4deg);
  }
  .o-circular--progress.o-progress--84 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--85 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--85 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--85 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(306deg);
  }
  .o-circular--progress.o-progress--85 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--86 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--86 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--86 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(309.6deg);
  }
  .o-circular--progress.o-progress--86 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--87 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--87 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--87 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(313.2deg);
  }
  .o-circular--progress.o-progress--87 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--88 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--88 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--88 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(316.8deg);
  }
  .o-circular--progress.o-progress--88 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--89 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--89 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--89 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(320.4deg);
  }
  .o-circular--progress.o-progress--89 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--90 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--90 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--90 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(324deg);
  }
  .o-circular--progress.o-progress--90 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--91 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--91 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--91 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(327.6deg);
  }
  .o-circular--progress.o-progress--91 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--92 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--92 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--92 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(331.2deg);
  }
  .o-circular--progress.o-progress--92 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--93 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--93 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--93 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(334.8deg);
  }
  .o-circular--progress.o-progress--93 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--94 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--94 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--94 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(338.4deg);
  }
  .o-circular--progress.o-progress--94 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--95 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--95 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--95 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(342deg);
  }
  .o-circular--progress.o-progress--95 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--96 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--96 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--96 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(345.6deg);
  }
  .o-circular--progress.o-progress--96 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--97 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--97 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--97 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(349.2deg);
  }
  .o-circular--progress.o-progress--97 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--98 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--98 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--98 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(352.8deg);
  }
  .o-circular--progress.o-progress--98 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--99 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--99 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--99 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(356.4deg);
  }
  .o-circular--progress.o-progress--99 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
  .o-circular--progress.o-progress--100 .o-circular--progress__container {
    clip: rect(auto, auto, auto, auto);
  }
  .o-circular--progress.o-progress--100 .o-circular--progress__container .o-progress--half-circle {
    border-color: #158443;
  }
  .o-circular--progress.o-progress--100 .o-circular--progress__container .o-circular--progress__container-left {
    transform: rotate(360deg);
  }
  .o-circular--progress.o-progress--100 .o-circular--progress__container .o-circular--progress__container-right {
    transform: rotate(180deg);
  }
}
@media screen {
  .o-circular--progress .o-circluar--bg-none {
    background: none;
  }
}
@media screen {
  .o-content-counter {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }
  .o-content-counter:hover .o-content-counter__image {
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
  }
  .o-content-counter > button {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .o-content-counter .o-content-counter__image {
    width: 90px;
    height: 90px;
    border: 2px solid #DBDDE0;
    border-radius: 0.5625rem;
    padding: 4px;
    transition: box-shadow 0.5s;
  }
  .o-content-counter .o-content-counter__title {
    font-size: 0.875rem; /* 14/16 */
    font-weight: 600;
    margin-top: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 90px;
    text-align: center;
  }
  .o-content-counter .o-content-counter__count {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    font-size: 0.8125rem; /* 13/16 */
    background-color: #158443;
    border-radius: 100%;
    font-family: "Bitter", serif;
    font-weight: bold;
    color: #ffffff;
    border: 3px solid #ffffff;
    display: none;
  }
}
@media screen {
  .is-highlighted-border .o-content-counter .o-content-counter__image {
    border: 4px solid #158443;
  }
  .is-highlighted-border .o-content-counter .o-content-counter__count {
    display: flex;
  }
}
@media screen {
  .l-block {
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .l-block {
    max-width: none;
    padding: 0 20px;
  }
}
@media screen {
  .l-block-padding-early {
    margin: 0 auto;
  }
}
@media screen and (max-width: 1280px) {
  .l-block-padding-early {
    max-width: none;
    padding: 0 20px;
  }
}
@media screen {
  .l-block-no-padding-mobile {
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .l-block-no-padding-mobile {
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-block-padding-mobile-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media screen and (max-width: 1200px) {
  .l-block-padding-1200 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media screen and (max-width: 768px) {
  .l-block-padding-mobile-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media screen {
  .l-block-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
  }
}
@media screen {
  .l-height-0 {
    height: 0 !important;
  }
}
@media screen {
  .l-height-100-percent {
    height: 100%;
  }
}
@media screen {
  .l-height-100 {
    height: 100vh;
  }
}
@media screen {
  .l-height-20 {
    height: 20px;
  }
}
@media screen {
  .l-height-52 {
    height: 52px;
  }
}
@media screen {
  .l-height-52--force {
    height: 52px !important;
  }
}
@media screen {
  .l-height-72--force {
    height: 72px !important;
  }
}
@media screen {
  .l-height-90--force {
    height: 90px !important;
  }
}
@media screen {
  .l-height-120--force {
    height: 120px !important;
  }
}
@media screen {
  .l-height-144--force {
    height: 144px !important;
  }
}
@media screen {
  .l-height-200--force {
    height: 200px !important;
  }
}
@media screen {
  .l-height-280--force {
    height: 280px !important;
  }
}
@media screen {
  .l-height-200 {
    height: 200px;
  }
}
@media screen {
  .l-width--90 {
    width: 90px !important;
  }
}
@media screen {
  .l-block--170 {
    max-width: 170px;
  }
}
@media screen {
  .l-block--224 {
    max-width: 224px;
  }
}
@media screen {
  .l-block--275 {
    max-width: 275px;
  }
}
@media screen {
  .l-min-height-100 {
    min-height: 100vh;
  }
}
@media screen {
  .l-block--card-320 {
    max-width: 320px;
  }
}
@media screen {
  .l-block--card-360 {
    max-width: 360px;
  }
}
@media screen {
  .l-block--card-420 {
    max-width: 420px;
  }
}
@media screen {
  .l-block--card-small {
    max-width: 640px;
  }
}
@media screen {
  .l-block--484 {
    max-width: 484px;
  }
}
@media screen {
  .l-block--686 {
    max-width: 686px;
  }
}
@media screen {
  .l-block--688 {
    max-width: 688px;
  }
}
@media screen {
  .l-block--696 {
    max-width: 696px;
  }
}
@media screen {
  .l-block--card-medium {
    max-width: 720px;
  }
}
@media screen {
  .l-block--806 {
    max-width: 806px;
  }
}
@media screen {
  .l-block--906 {
    max-width: 906px;
  }
}
@media screen {
  .l-block--912 {
    max-width: 912px;
  }
}
@media screen {
  .l-block--920 {
    max-width: 920px;
  }
}
@media screen {
  .l-block--968 {
    max-width: 968px;
  }
}
@media screen {
  .l-block--1080 {
    max-width: 1080px;
  }
}
@media screen {
  .l-block--1152 {
    max-width: 1152px;
  }
}
@media screen {
  .l-block--1200 {
    max-width: 1215px;
  }
}
@media screen {
  .l-block--1300 {
    max-width: 1300px;
  }
}
@media screen {
  .l-block--100 {
    max-width: 100%;
  }
}
@media screen {
  .l-block-wide {
    margin: 0;
    max-width: 1500px;
    padding: 0 0 0 30px;
  }
}
@media screen and (min-width: 1440px) {
  .l-block-wide {
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .l-block-wide {
    max-width: none;
    padding: 0 20px;
  }
}
@media screen {
  .l-block-wide-padding {
    padding: 0 30px;
  }
}
@media screen and (max-width: 768px) {
  .l-block-wide-padding {
    padding: 0 20px;
  }
}
@media screen {
  .l-full-col {
    width: 100%;
  }
}
@media screen {
  .l-half-col {
    width: 50%;
  }
}
@media screen {
  .l-width-max-120 {
    max-width: 120px;
  }
}
@media screen {
  .l-width-min-100 {
    min-width: 100%;
  }
}
@media screen {
  .l-margin-auto {
    margin: 0 auto;
  }
}
@media screen {
  .l-margin-0 {
    margin-top: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .l-margin-0-tablet {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-margin-all-0 {
    margin: 0 !important;
  }
}
@media screen {
  .l-margin-1 {
    margin-top: 1px;
  }
}
@media screen {
  .l-margin-2 {
    margin-top: 2px;
  }
}
@media screen {
  .l-margin-3 {
    margin-top: 3px;
  }
}
@media screen {
  .l-margin-4 {
    margin-top: 4px;
  }
}
@media screen {
  .l-margin-6 {
    margin-top: 6px;
  }
}
@media screen {
  .l-margin-9 {
    margin-top: 9px;
  }
}
@media screen {
  .l-margin-9--force {
    margin-top: 9px !important;
  }
}
@media screen {
  .l-margin-10 {
    margin-top: 10px;
  }
}
@media screen {
  .l-margin-12 {
    margin-top: 12px;
  }
}
@media screen {
  .l-margin-12--force {
    margin-top: 12px !important;
  }
}
@media screen {
  .l-margin-15 {
    margin-top: 15px;
  }
}
@media screen {
  .l-margin-18 {
    margin-top: 18px;
  }
}
@media screen {
  .l-margin-18--i {
    margin-top: 18px !important;
  }
}
@media screen {
  .l-margin-20 {
    margin-top: 20px;
  }
}
@media screen {
  .l-margin-21 {
    margin-top: 21px;
  }
}
@media screen {
  .l-margin-21--force {
    margin-top: 21px !important;
  }
}
@media screen {
  .l-margin-24 {
    margin-top: 24px;
  }
}
@media screen {
  .l-margin-27 {
    margin-top: 27px;
  }
}
@media screen {
  .l-margin-30 {
    margin-top: 30px;
  }
}
@media screen {
  .l-margin-30--force {
    margin-top: 30px !important;
  }
}
@media screen {
  .l-margin-36 {
    margin-top: 36px;
  }
}
@media screen {
  .l-margin-40 {
    margin-top: 40px;
  }
}
@media screen {
  .l-margin-42 {
    margin-top: 42px;
  }
}
@media screen {
  .l-margin-45 {
    margin-top: 45px;
  }
}
@media screen {
  .l-margin-50 {
    margin-top: 50px;
  }
}
@media screen {
  .l-margin-60 {
    margin-top: 60px;
  }
}
@media screen {
  .l-margin-72 {
    margin-top: 72px;
  }
}
@media screen {
  .l-margin-90 {
    margin-top: 90px;
  }
}
@media screen {
  .l-margin-120 {
    margin-top: 120px;
  }
}
@media screen {
  .l-margin-145 {
    margin-top: 145px;
  }
}
@media screen {
  .l-margin-180 {
    margin-top: 180px;
  }
}
@media screen {
  .l-margin-240 {
    margin-top: 240px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-240 {
    margin-top: 180px;
  }
}
@media screen {
  .l-margin-left-6 {
    margin-left: 6px;
  }
}
@media screen {
  .l-margin-left-9 {
    margin-left: 9px;
  }
}
@media screen {
  .l-margin-left-10 {
    margin-left: 10px;
  }
}
@media screen {
  .l-margin-left-6 {
    margin-left: 6px;
  }
}
@media screen {
  .l-margin-sides-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media screen {
  .l-margin-sides-2 {
    margin-left: 2px;
    margin-right: 2px;
  }
}
@media screen {
  .l-margin-sides-3 {
    margin-left: 3px;
    margin-right: 3px;
  }
}
@media screen {
  .l-margin-sides-8 {
    margin-left: 8px;
    margin-right: 8px;
  }
}
@media screen {
  .l-margin-n-9 {
    margin-top: -9px;
  }
}
@media screen {
  .l-margin-n-18 {
    margin-top: -18px;
  }
}
@media screen {
  .l-margin-n-20 {
    margin-top: -20px;
  }
}
@media screen {
  .l-margin-left-6 {
    margin-left: 6px;
  }
}
@media screen {
  .l-margin-left-9 {
    margin-left: 9px;
  }
}
@media screen {
  .l-margin-left-15 {
    margin-left: 15px;
  }
}
@media screen {
  .l-margin-left-18 {
    margin-left: 18px;
  }
}
@media screen {
  .l-margin-left-29 {
    margin-left: 29px;
  }
}
@media screen {
  .l-margin-right-0 {
    margin-right: 0 !important;
  }
}
@media screen {
  .l-margin-right-3 {
    margin-right: 3px;
  }
}
@media screen {
  .l-margin-right-4 {
    margin-right: 4px;
  }
}
@media screen {
  .l-margin-right-6 {
    margin-right: 6px;
  }
}
@media screen {
  .l-margin-right-8 {
    margin-right: 8px !important;
  }
}
@media screen {
  .l-margin-right-9 {
    margin-right: 9px !important;
  }
}
@media screen {
  .l-margin-right-10 {
    margin-right: 10px !important;
  }
}
@media screen {
  .l-margin-right-12 {
    margin-right: 12px !important;
  }
}
@media screen {
  .l-margin-right-15 {
    margin-right: 15px !important;
  }
}
@media screen {
  .l-margin-right-16 {
    margin-right: 16px !important;
  }
}
@media screen {
  .l-margin-right-18 {
    margin-right: 18px !important;
  }
}
@media screen {
  .l-margin-right-21 {
    margin-right: 21px !important;
  }
}
@media screen {
  .l-margin-right-24 {
    margin-right: 24px !important;
  }
}
@media screen {
  .l-margin-right-30 {
    margin-right: 30px !important;
  }
}
@media screen {
  .l-margin-left-auto {
    margin-left: auto !important;
  }
}
@media screen {
  .l-margin-right-auto {
    margin-right: auto !important;
  }
}
@media screen {
  .l-margin-bottom-n-10 {
    margin-bottom: -10px;
  }
}
@media screen {
  .l-margin-bottom-n-12 {
    margin-bottom: -12px;
  }
}
@media screen {
  .l-margin-bottom-n-18 {
    margin-bottom: -18px;
  }
}
@media screen {
  .l-margin-bottom-12 {
    margin-bottom: 12px !important;
  }
}
@media screen {
  .l-margin-bottom-18 {
    margin-bottom: 18px !important;
  }
}
@media screen {
  .l-margin-right-n-24 {
    margin-right: -24px;
  }
}
@media screen {
  .l-margin-left-n-24 {
    margin-left: -24px;
  }
}
@media screen {
  .l-margin-bottom-20 {
    margin-bottom: 20px !important;
  }
}
@media screen {
  .l-margin-bottom-27 {
    margin-bottom: 27px !important;
  }
}
@media screen {
  .l-margin-bottom-45 {
    margin-bottom: 45px !important;
  }
}
@media screen {
  .l-margin-bottom-60 {
    margin-bottom: 60px !important;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-0 {
    margin-top: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-9 {
    margin-top: 9px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-large-12 {
    margin-top: 12px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-large-15 {
    margin-top: 15px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-large-18 {
    margin-top: 18px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-left-0--mobile-large {
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 600px) {
  .l-margin-mobile-large-40 {
    margin-top: 40px;
  }
}
@media screen and (max-width: 600px) {
  .l-margin-mobile-18 {
    margin-top: 18px;
  }
}
@media screen and (max-width: 600px) {
  .l-margin-mobile-30 {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-large-30 {
    margin-top: 30px;
  }
}
@media screen and (max-width: 992px) {
  .l-margin-tablet-60 {
    margin-top: 60px;
  }
}
@media screen and (max-width: 992px) {
  .l-margin-tablet-30 {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-large-60 {
    margin-top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-large-90 {
    margin-top: 90px;
  }
}
@media screen and (max-width: 768px) {
  .l-margin-mobile-large-left-20 {
    margin-left: 20px;
  }
}
@media screen {
  .l-padding-wrapper {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 768px) {
  .l-padding-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen {
  .l-padding-right-15 {
    padding-right: 15px;
  }
}
@media screen {
  .l-padding-sides-0 {
    padding: 0 !important;
  }
}
@media screen {
  .l-padding-sides-20 {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen {
  .l-padding-sides-45 {
    padding-left: 45px;
    padding-right: 45px;
  }
}
@media screen {
  .l-padding-0 {
    padding-top: 0 !important;
  }
}
@media screen {
  .l-padding-3 {
    padding-top: 3px;
  }
}
@media screen {
  .l-padding-6 {
    padding-top: 6px;
  }
}
@media screen {
  .l-padding-9 {
    padding-top: 9px;
  }
}
@media screen {
  .l-padding-15 {
    padding-top: 15px;
  }
}
@media screen {
  .l-padding-20 {
    padding-top: 20px;
  }
}
@media screen {
  .l-padding-24 {
    padding-top: 24px;
  }
}
@media screen {
  .l-padding-30 {
    padding-top: 30px;
  }
}
@media screen {
  .l-padding-42 {
    padding-top: 42px;
  }
}
@media screen {
  .l-padding-45 {
    padding-top: 45px;
  }
}
@media screen {
  .l-padding-48 {
    padding-top: 48px;
  }
}
@media screen {
  .l-padding-60 {
    padding-top: 60px;
  }
}
@media screen {
  .l-padding-72 {
    padding-top: 72px;
  }
}
@media screen {
  .l-padding-90 {
    padding-top: 90px;
  }
}
@media screen {
  .l-padding-120 {
    padding-top: 120px;
  }
}
@media screen and (max-width: 992px) {
  .l-padding-0--tablet {
    padding-top: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .l-padding-0--mobile-large {
    padding-top: 0 !important;
  }
}
@media screen {
  .l-padding-bottom-18 {
    padding-bottom: 18px;
  }
}
@media screen {
  .l-padding-bottom-30 {
    padding-bottom: 30px;
  }
}
@media screen {
  .l-padding-bottom-60 {
    padding-bottom: 60px;
  }
}
@media screen {
  .l-padding-bottom-90 {
    padding-bottom: 90px;
  }
}
@media screen {
  .l-padding-bottom-120 {
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 768px) {
  .l-padding-bottom-30--mobile-large {
    padding-bottom: 30px !important;
  }
}
@media screen {
  .l-padding-bottom-120--force {
    padding-bottom: 120px !important;
  }
}
@media screen {
  .l-padding-right-0 {
    padding-right: 0 !important;
  }
}
@media screen {
  .l-padding-right-20 {
    padding-right: 20px;
  }
}
@media screen {
  .l-padding-right-30 {
    padding-right: 30px;
  }
}
@media screen {
  .l-padding-right-45 {
    padding-right: 45px;
  }
}
@media screen and (max-width: 768px) {
  .l-no-padding-right {
    padding-right: 0;
  }
}
@media screen {
  .l-padding-left-20 {
    padding-left: 20px;
  }
}
@media screen {
  .l-padding-left-86 {
    padding-left: 86px;
  }
}
@media screen and (max-width: 992px) {
  .l-no-padding-left--tablet {
    padding-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-padding-sides-30--mobile-large {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}
@media screen and (max-width: 992px) {
  .l-padding-sides-24--tablet {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 1200px) {
  .l-padding-sides-60--temporary {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media screen and (max-width: 768px) {
  .l-padding-sides-60--temporary {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen {
  .l-padding-all-15 {
    padding: 15px;
  }
}
@media screen {
  .l-padding-all-20 {
    padding: 20px;
  }
}
@media screen {
  .l-padding-all-24 {
    padding: 24px;
  }
}
@media screen {
  .l-flex {
    display: flex;
  }
}
@media screen and (max-width: 768px) {
  .l-flex-column--mobile {
    flex-direction: column;
  }
}
@media screen {
  .l-flex-wrap {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .l-flex-wrap--mobile-large {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen {
  .l-flex-nowrap {
    display: flex;
    flex-wrap: nowrap;
  }
}
@media screen {
  .l-flex-wrap-justify {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media screen {
  .l-flex-nowrap-justify {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
@media screen {
  .l-flex-align-center {
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
  .l-flex-align-center--mobile-large {
    align-items: center !important;
  }
}
@media screen {
  .l-flex-align-center--force {
    display: flex !important;
    align-items: center;
  }
}
@media screen {
  .l-flex-align-start {
    display: flex;
    align-items: flex-start;
  }
}
@media screen {
  .l-flex-align-end {
    display: flex;
    align-items: flex-end;
  }
}
@media screen {
  .l-flex-align-stretch {
    display: flex;
    align-items: stretch;
  }
}
@media screen {
  .l-flex-justify-center {
    display: flex;
    justify-content: center;
  }
}
@media screen {
  .l-flex-justify-right {
    display: flex;
    justify-content: flex-end;
  }
}
@media screen {
  .l-flex-justify-space-between {
    display: flex;
    justify-content: space-between;
  }
}
@media screen {
  .l-flex-align-content--center {
    align-content: center;
  }
}
@media screen {
  .l-align-items-start {
    align-items: flex-start;
  }
}
@media screen {
  .l-relative {
    position: relative;
  }
}
@media screen {
  .l-absolute {
    position: absolute;
    top: 0;
  }
}
@media screen {
  .l-absolute-right {
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media screen {
  .l-top-13 {
    top: 13px;
  }
}
@media screen {
  .l-right-0 {
    right: 0;
  }
}
@media screen {
  .l-bottom-0 {
    bottom: 0;
  }
}
@media screen {
  .l-text-align-left {
    text-align: left;
  }
}
@media screen {
  .l-text-align-left--force {
    text-align: left !important;
  }
}
@media screen {
  .l-text-align-center {
    text-align: center;
  }
}
@media screen {
  .l-text-align-right {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .l-text-align-left--mobile {
    text-align: left;
  }
}
@media screen and (max-width: 992px) {
  .l-text-align-center--tablet {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .l-text-align-center--mobile {
    text-align: center;
  }
}
@media screen {
  .l-text-overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .l-font-header--mobile {
    font-size: 1.5em !important;
    line-height: 1.35;
  }
}
@media screen and (max-width: 768px) {
  .l-font-header--mobile-27 {
    font-size: 1.7rem !important; /* 36/16 */
    line-height: 1.35;
  }
}
@media screen and (max-width: 768px) {
  .l-font-header--mobile-27-1125 {
    font-size: 1.7rem !important;
    line-height: 1.125;
  }
}
@media screen {
  .l-font-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  }
}
@media screen {
  .l-font-header {
    font-family: "Bitter", serif;
  }
  .l-font-header ul {
    font-family: "Bitter", serif;
  }
}
@media screen {
  .l-font-header--force {
    font-family: "Bitter", serif !important;
  }
}
@media screen {
  .l-font-normal {
    font-weight: normal;
  }
}
@media screen {
  .l-font-semibold {
    font-weight: 600;
  }
}
@media screen {
  .l-font-bold {
    font-weight: 700;
  }
}
@media screen {
  .l-font-italic {
    font-style: italic;
  }
}
@media screen {
  .l-font-no-decor {
    text-decoration: none;
  }
}
@media screen {
  .l-font-no-decor--hover:hover {
    text-decoration: none !important;
  }
  .l-font-no-decor--hover:hover .o-button__label {
    text-decoration: none !important;
  }
}
@media screen {
  .l-font-underline {
    text-decoration: underline;
  }
}
@media screen {
  .l-font-underline--force {
    text-decoration: underline !important;
  }
}
@media screen {
  .l-font-line {
    text-decoration: line-through;
  }
}
@media screen {
  .l-line-height-1 {
    line-height: 1;
  }
}
@media screen {
  .l-line-height-1125 {
    line-height: 1.125;
  }
}
@media screen {
  .l-line-height-1125--force {
    line-height: 1.125 !important;
  }
}
@media screen {
  .l-line-height-12 {
    line-height: 1.2;
  }
}
@media screen {
  .l-line-height-125 {
    line-height: 1.25;
  }
}
@media screen and (max-width: 768px) {
  .l-line-height-125--mobile-large {
    line-height: 1.25 !important;
  }
}
@media screen {
  .l-font-12 {
    font-size: 0.75rem; /* 12/16 */
  }
}
@media screen {
  .l-font-13 {
    font-size: 0.8125rem; /* 13/16 */
  }
}
@media screen {
  .l-font-14 {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .l-font-15 {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .l-font-15--force {
    font-size: 0.9375rem !important; /* 15/16 */
  }
}
@media screen {
  .l-font-16 {
    font-size: 1rem; /* 15/16 */
  }
}
@media screen {
  .l-font-17 {
    font-size: 1.0625rem; /* 24/16 */
  }
}
@media screen {
  .l-font-18 {
    font-size: 1.125em;
  }
}
@media screen {
  .l-font-19 {
    font-size: 1.1875rem; /* 19/16 */
  }
}
@media screen {
  .l-font-20 {
    font-size: 1.25rem; /* 20/16 */
  }
}
@media screen {
  .l-font-21 {
    font-size: 1.3125rem; /* 21/16 */
  }
}
@media screen {
  .l-font-24 {
    font-size: 1.5rem; /* 24/16 */
  }
}
@media screen {
  .l-font-27 {
    font-size: 1.6875rem;
  }
}
@media screen {
  .l-font-30 {
    font-size: 1.875rem; /* 30/16 */
  }
}
@media screen {
  .l-font-36 {
    font-size: 2.25rem; /* 36/16 */
  }
}
@media screen {
  .l-font-42 {
    font-size: 2.625rem; /* 42/16 */
  }
}
@media screen {
  .l-font-60 {
    font-size: 3.75rem; /* 60/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-font-15--mobile {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-font-15--mobile-force {
    font-size: 0.9375rem !important; /* 15/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-font-16--mobile {
    font-size: 1rem !important; /* 17/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-font-17--mobile {
    font-size: 1.0625rem !important; /* 17/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-font-22--mobile {
    font-size: 1.375rem; /* 22/16 */
    line-height: 1.25;
  }
}
@media screen and (max-width: 768px) {
  .l-font-24--mobile {
    font-size: 1.5rem; /* 24/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-font-27--mobile {
    font-size: 1.6875rem; /* 27/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-font-30--mobile {
    font-size: 1.875rem !important; /* 30/16 */
  }
}
@media screen {
  .l-font-36--mobile {
    font-size: 2.25rem; /* 36/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-font-36--mobile {
    font-size: 1.5em;
  }
}
@media screen {
  .l-color-grey {
    color: #6E7687 !important;
  }
}
@media screen {
  .l-color-grey-regent {
    color: #959DA5;
  }
}
@media screen {
  .l-color-grey-cadet {
    color: #ACB6BF;
  }
}
@media screen {
  .l-color-grey-chateau {
    color: #A7ADB4;
  }
}
@media screen {
  .l-color-white {
    color: #ffffff;
  }
}
@media screen {
  .l-color-white--force {
    color: #ffffff !important;
  }
}
@media screen {
  .l-color-white-hover:hover {
    color: #ffffff !important;
  }
}
@media screen {
  .l-color-black {
    color: #333333 !important;
  }
}
@media screen {
  .l-color-green {
    color: #158443;
  }
}
@media screen {
  .l-color-red {
    color: #CF3B2B;
  }
}
@media screen {
  .l-color-green--force {
    color: #158443 !important;
  }
}
@media screen {
  .l-color-neon--red {
    color: transparent !important;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FED128;
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 3vw #FA1C16, 0 0 0.4vw #FED128;
  }
}
@media screen and (max-width: 600px) {
  .l-color-neon--red {
    -webkit-text-stroke-width: 1px;
  }
}
@media screen {
  .l-color-neon--blue {
    color: transparent !important;
    paint-order: fill stroke markers;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #28D7FE;
    text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 0.4vw #8BFDFE;
  }
}
@media screen and (max-width: 600px) {
  .l-color-neon--blue {
    -webkit-text-stroke-width: 1px;
  }
}
@media screen {
  .l-font-label {
    font-size: 0.75rem; /* 12/16 */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #959DA5;
  }
}
@media screen {
  .l-whitespace {
    white-space: nowrap;
  }
}
@media screen {
  .l-whitespace-reset {
    white-space: normal !important;
  }
}
@media screen {
  .l-whitespace--desktop {
    white-space: nowrap;
  }
}
@media screen and (max-width: 600px) {
  .l-whitespace--desktop {
    white-space: normal;
  }
}
@media screen {
  .l-font-spacing {
    letter-spacing: -0.5px;
  }
}
@media screen {
  .l-no-font-spacing {
    letter-spacing: 0px;
  }
}
@media screen {
  .l-grid {
    display: grid;
  }
}
@media screen {
  .l-grid-2-fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media screen {
  .l-grid-3-fr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen {
  .l-grid-3-auto {
    display: grid;
    grid-template-columns: auto auto auto;
  }
}
@media screen {
  .l-grid-2 {
    display: grid;
    grid-template-columns: auto auto;
  }
}
@media screen {
  .l-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-grid-3 {
    display: block;
  }
}
@media screen {
  .l-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 600px) {
  .l-grid-4 {
    display: block;
  }
}
@media screen {
  .l-grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
  }
}
@media screen {
  .l-grid-6-3-fr {
    display: grid;
    grid-template-columns: 6fr 3fr;
  }
}
@media screen {
  .l-grid-col-gap-8 {
    grid-column-gap: 8px;
  }
}
@media screen {
  .l-grid-col-gap-12 {
    grid-column-gap: 12px;
  }
}
@media screen {
  .l-grid-col-gap-16 {
    grid-column-gap: 16px;
  }
}
@media screen {
  .l-grid-col-gap-18 {
    grid-column-gap: 18px;
  }
}
@media screen {
  .l-grid-col-gap-20 {
    grid-column-gap: 20px;
  }
}
@media screen {
  .l-grid-col-gap-24 {
    grid-column-gap: 24px;
  }
}
@media screen {
  .l-grid-col-gap-25 {
    grid-column-gap: 25px;
  }
}
@media screen {
  .l-grid-col-gap-26 {
    grid-column-gap: 26px;
  }
}
@media screen {
  .l-grid-col-gap-30 {
    grid-column-gap: 30px;
  }
}
@media screen {
  .l-grid-col-gap-36 {
    grid-column-gap: 36px;
  }
}
@media screen {
  .l-grid-col-gap-40 {
    grid-column-gap: 40px;
  }
}
@media screen {
  .l-grid-col-gap-45 {
    grid-column-gap: 45px;
  }
}
@media screen {
  .l-grid-col-gap-142 {
    grid-column-gap: 142px;
  }
}
@media screen {
  .l-grid-row-gap-15 {
    grid-row-gap: 15px;
  }
}
@media screen {
  .l-grid-row-gap-18 {
    grid-row-gap: 18px;
  }
}
@media screen {
  .l-grid-row-gap-20 {
    grid-row-gap: 20px;
  }
}
@media screen {
  .l-grid-row-gap-25 {
    grid-row-gap: 25px;
  }
}
@media screen {
  .l-grid-row-gap-26 {
    grid-row-gap: 26px;
  }
}
@media screen {
  .l-grid-row-gap-30 {
    grid-row-gap: 30px;
  }
}
@media screen {
  .l-grid-row-gap-36 {
    grid-row-gap: 36px;
  }
}
@media screen {
  .l-grid-col-gap-60 {
    grid-column-gap: 60px;
  }
}
@media screen {
  .l-grid-row-gap-40 {
    grid-row-gap: 40px;
  }
}
@media screen {
  .l-grid-row-gap-50 {
    grid-row-gap: 50px;
  }
}
@media screen {
  .l-grid-row-gap-60 {
    grid-row-gap: 60px;
  }
}
@media screen and (max-width: 1080px) {
  .l-grid-2fr-1080 {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
  }
}
@media screen and (max-width: 992px) {
  .l-grid-2fr-tablet {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 992px) {
  .l-grid-4fr-tablet {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 992px) {
  .l-grid-tablet {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-grid-mobile {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 600px) {
  .l-grid-1fr-mobile {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-grid-mobile--force {
    display: grid;
    grid-template-columns: 1fr !important;
  }
}
@media screen {
  .l-mason-grid {
    display: grid;
    grid-column-gap: 26px;
    grid-row-gap: 26px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1080px) {
  .l-mason-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-mason-grid {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-mason-grid .c-tutorial-item {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-background--none {
    background: none;
  }
}
@media screen {
  .l-background--white {
    background: #ffffff;
  }
}
@media screen {
  .l-background--grey {
    background: #F2F6FA;
  }
}
@media screen {
  .l-background--blue-grey {
    background: #E2E6F7;
  }
}
@media screen {
  .l-background--black {
    background: #333333;
  }
}
@media screen {
  .l-background--black-slate {
    background: #2F4F4F !important;
  }
}
@media screen {
  .l-background--dark-black {
    background: #222222 !important;
  }
}
@media screen {
  .l-background--yellow {
    background: #F3B36A !important;
  }
}
@media screen {
  .l-background--yellow-grandis {
    background: #FDCF74 !important;
  }
}
@media screen {
  .l-background--blue {
    background: #157CB8 !important;
  }
}
@media screen {
  .l-overflow-x {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen {
  .l-overflow-hidden {
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .l-overflow-hidden--mobile {
    overflow: hidden;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .l-overflow-hidden--mobile::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen {
  .l-no-border {
    border: none !important;
  }
}
@media screen {
  .l-border-top-grey {
    border-top: 1px solid #DBDDE0;
  }
}
@media screen {
  .l-border-top-grey-catskill {
    border-top: 1px solid #DFE7F0;
  }
}
@media screen {
  .l-border-bottom-grey {
    border-bottom: 1px solid #DBDDE0;
  }
}
@media screen {
  .l-border-bottom-grey-aqua-haze {
    border-bottom: 1px solid #EFF3F6;
  }
}
@media screen {
  .l-border-bottom-grey-mako {
    border-bottom: 1px solid #434A53;
  }
}
@media screen {
  .l-border-radius {
    border-radius: 0.5625rem;
  }
}
@media screen {
  .l-display-block {
    display: block;
  }
}
@media screen {
  .l-display-block--force {
    display: block !important;
  }
}
@media screen {
  .l-inline-block {
    display: inline-block;
  }
}
@media screen {
  .l-inline-flex {
    display: inline-flex;
  }
}
@media screen and (max-width: 768px) {
  .l-block-mobile-large {
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .l-block-mobile {
    display: block;
  }
}
@media screen {
  .l-cursor-pointer {
    cursor: pointer;
  }
}
@media screen {
  .l-z-index-1 {
    z-index: 1;
  }
}
@media screen {
  .l-border-top {
    border-top: 1px solid #DFE7F0;
  }
}
@media screen {
  .l-border-bottom {
    border-bottom: 1px solid #DFE7F0;
  }
}
@media screen {
  .l-no-focus:focus {
    box-shadow: none !important;
    outline: 0 !important;
  }
}
@media screen {
  .l-image-float-left {
    float: left;
    margin-right: 30px;
  }
  .l-image-float-left img {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
}
@media screen {
  .l-image-float-right {
    float: right;
    margin-left: 30px;
  }
  .l-image-float-right img {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
}
@media screen {
  .l-visibility-hidden {
    visibility: hidden;
  }
}
@media screen {
  .l-rotate-180 {
    transform: rotate(180deg);
  }
}
@media screen {
  .l-admin {
    padding-left: 80px;
  }
}
@media screen and (max-width: 992px) {
  .l-admin {
    padding-left: 0;
  }
}
@media screen {
  .l-admin .container {
    padding-top: 36px;
    padding-bottom: 90px;
  }
}
@media screen {
  .l-admin-big-container {
    margin: 0 -40px;
  }
}
@media screen and (max-width: 1200px) {
  .l-admin-big-container {
    margin: 0;
  }
}
@media screen {
  .admin__subtitle {
    font-size: 1rem;
    color: #6E7687;
    margin-top: 15px;
  }
}
@media screen and (max-width: 600px) {
  .admin__subtitle {
    font-size: 0.9375em;
  }
}
@media screen {
  .l-admin--sidebar-open {
    padding-left: 320px;
  }
}
@media screen and (max-width: 1080px) {
  .l-admin--sidebar-open {
    padding-left: 270px;
  }
}
@media screen and (max-width: 992px) {
  .l-admin--sidebar-open {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen {
  .l-admin--sidebar-open .c-banner-draper .c-banner-draper__copy p {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .l-admin--sidebar-open .c-banner-draper .c-banner-draper__copy p {
    display: block;
  }
}
@media screen {
  .l-admin--sidebar-open .c-nav-sidebar--article {
    width: 320px !important;
  }
  .l-admin--sidebar-open .c-nav-sidebar--article .c-sidebar-navigator, .l-admin--sidebar-open .c-nav-sidebar--article .c-nav-sidebar__title {
    display: block;
  }
}
@media screen and (max-width: 1080px) {
  .l-admin--sidebar-open .c-nav-sidebar--article {
    width: 270px !important;
  }
}
@media screen and (max-width: 1200px) {
  .l-admin--sidebar-open .c-written-tutorial {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media screen and (max-width: 992px) {
  .l-admin--sidebar-open .c-written-tutorial {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen {
  .l-admin--sidebar-open .c-nav-sidebar__nav-action .o-button__label--open {
    display: inline-flex !important;
  }
  .l-admin--sidebar-open .c-nav-sidebar__nav-action .o-button__label--close {
    display: none;
  }
  .l-admin--sidebar-open .c-nav-sidebar__nav-action i {
    margin-right: 10px !important;
  }
}
@media screen {
  .l-admin--sidebar-open .c-global-header__logo .o-header-logo__text {
    opacity: 1 !important;
  }
}
@media screen {
  .l-video-overlay {
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .l-video-overlay h3 {
    font-size: 2.25rem; /* 42/16 */
    text-align: center;
    color: #ffffff;
  }
}
@media screen {
  .l-video-overlay--start {
    align-items: flex-start;
  }
}
@media screen {
  .l-tutorial-collection {
    padding-top: 42px;
  }
  .l-tutorial-collection .l-margin-24 {
    margin-top: 24px !important;
  }
}
@media screen {
  .l-block-tutorials {
    margin: 0;
    max-width: 1500px;
  }
}
@media screen and (min-width: 1440px) {
  .l-block-tutorials {
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .l-block-tutorials {
    max-width: none;
  }
}
@media screen {
  .l-block-tutorials .c-tutorial-item__metadata {
    display: none !important;
  }
}
@media screen {
  .l-block-tutorials .c-tutorial-item__metadata-short {
    color: #333333;
  }
}
@media screen {
  .l-block-tutorials .c-tutorial-item__metadata-short, .l-block-tutorials .c-tutorial-item__type {
    display: block !important;
    margin-top: 6px;
  }
}
@media screen {
  .l-tutorial-container {
    margin: 0 auto;
  }
}
@media screen and (max-width: 1280px) {
  .l-tutorial-container {
    padding-right: 0;
  }
}
@media screen {
  .l-tutorial-container:hover .o-button__icon {
    opacity: 1;
  }
}
@media screen {
  .l-tutorial-container .c-tutorial-item {
    width: 300px;
    min-width: 300px;
  }
}
@media screen and (max-width: 992px) {
  .l-tutorial-container .c-tutorial-item {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-tutorial-container--slider {
    position: relative;
  }
  .l-tutorial-container--slider .c-tutorial-item {
    margin: 0 9px;
  }
  .l-tutorial-container--slider .o-button__icon--prev {
    position: absolute;
    top: 0;
    width: 50px;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    left: 10px;
  }
}
@media screen and (max-width: 992px) {
  .l-tutorial-container--slider .o-button__icon--prev {
    opacity: 1;
  }
}
@media screen {
  .l-tutorial-container--slider .o-button__icon--prev span {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    background: rgba(51, 51, 51, 0.5);
    transition: all 0.5s;
    margin-top: -25px;
    border-radius: 0.5625rem;
  }
  .l-tutorial-container--slider .o-button__icon--prev span:hover {
    background: rgba(51, 51, 51, 0.9);
  }
}
@media screen {
  .l-tutorial-container--slider .o-button__icon--prev svg {
    transform: rotate(180deg);
  }
}
@media screen {
  .l-tutorial-container--slider .o-button__icon--next {
    position: absolute;
    top: 0;
    width: 50px;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
    right: 10px;
  }
}
@media screen and (max-width: 992px) {
  .l-tutorial-container--slider .o-button__icon--next {
    opacity: 1;
  }
}
@media screen {
  .l-tutorial-container--slider .o-button__icon--next span {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    background: rgba(51, 51, 51, 0.5);
    transition: all 0.5s;
    margin-top: -25px;
    border-radius: 0.5625rem;
  }
  .l-tutorial-container--slider .o-button__icon--next span:hover {
    background: rgba(51, 51, 51, 0.9);
  }
}
@media screen {
  .l-home-hero {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-column-gap: 54px;
  }
}
@media screen and (max-width: 1280px) {
  .l-home-hero {
    padding: 0 30px;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-hero {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-home-hero {
    grid-template-columns: 1fr;
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-home-hero .l-home-hero__controls {
    display: block;
    text-align: center;
  }
  .l-home-hero .l-home-hero__controls .c-tabs {
    justify-content: center;
  }
}
@media screen {
  .l-home-hero .l-home-hero__video-wrapper .c-tutorial-item {
    margin-top: 0;
  }
  .l-home-hero .l-home-hero__video-wrapper .c-tutorial-item a {
    border-radius: 0 0 0.5625rem 0.5625rem !important;
  }
}
@media screen and (max-width: 768px) {
  .l-home-hero .l-home-hero__video-wrapper .c-tutorial-item .c-tutorial-item__art {
    display: none;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-hero .l-home-hero__new {
    margin-top: 30px;
  }
}
@media screen {
  .l-home-hero .l-video-overlay {
    background: #ffffff;
  }
}
@media screen {
  .l-home-hero .l-home-hero__video-player {
    width: 100%;
    padding-top: 56.25%;
    background: #ffffff;
    border-radius: 0.5625rem 0.5625rem 0 0;
    position: relative;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .l-home-hero .l-home-hero__video-player {
    border-radius: 0.5625rem;
  }
}
@media screen {
  .l-home-hero .l-home-hero__video-player img {
    width: 100%;
  }
}
@media screen {
  .l-follow-pillars {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
}
@media screen and (max-width: 1280px) {
  .l-follow-pillars {
    padding: 0 0 0 30px;
  }
}
@media screen and (max-width: 768px) {
  .l-follow-pillars {
    padding: 0;
  }
}
@media screen {
  .l-follow-pillars > div {
    height: 90px;
    white-space: nowrap;
    overflow-x: auto;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen {
  .l-follow-pillars h3 {
    margin-right: -146px;
  }
}
@media screen and (max-width: 992px) {
  .l-follow-pillars h3 {
    margin-right: 15px;
  }
}
@media screen {
  .l-follow-pillars ul {
    margin-left: auto;
    margin-right: auto;
  }
  .l-follow-pillars ul li {
    margin: 0 6px;
  }
}
@media screen {
  .l-library.l-background--black h3 {
    color: #ffffff;
  }
  .l-library.l-background--black .c-search__no-results h3, .l-library.l-background--black .c-search__no-results h4, .l-library.l-background--black .c-search__no-results p {
    color: #ffffff;
  }
  .l-library.l-background--black .c-search__no-results .o-tag {
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
  }
  .l-library.l-background--black .c-search__loading__title, .l-library.l-background--black .l-library__results {
    color: #ffffff;
  }
  .l-library.l-background--black .c-library-controls div.o-text-button span {
    color: #ffffff;
  }
  .l-library.l-background--black .c-library-controls div.o-text-button svg {
    fill: #ffffff;
  }
  .l-library.l-background--black .o-button__icon span {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    background: #ffffff;
  }
  .l-library.l-background--black .o-button__icon svg {
    fill: #333333;
  }
}
@media screen {
  .l-tutorial-next-course .c-tutorial-item__in-progress {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .l-tutorial-next-course .c-tutorial-item__metadata-short {
    display: flex !important;
  }
}
@media screen and (max-width: 768px) {
  .l-tutorial-next-course .c-tutorial-item__art {
    display: none !important;
  }
}
@media screen {
  .l-book-chapter .l-admin {
    padding-left: 0;
  }
}
@media screen and (max-width: 1080px) {
  .l-book-chapter .l-admin--sidebar-open {
    padding-left: 270px;
  }
}
@media screen and (max-width: 992px) {
  .l-book-chapter .l-admin--sidebar-open {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen {
  .l-book-chapter .l-admin--sidebar-open .c-nav-sidebar--article {
    width: 320px !important;
  }
  .l-book-chapter .l-admin--sidebar-open .c-nav-sidebar--article .c-sidebar-navigator,
  .l-book-chapter .l-admin--sidebar-open .c-nav-sidebar--article .c-nav-sidebar__title {
    display: block;
  }
}
@media screen and (max-width: 1080px) {
  .l-book-chapter .l-admin--sidebar-open .c-nav-sidebar--article {
    width: 270px !important;
  }
}
@media screen {
  .l-book-chapter .l-admin--sidebar-open .o-button-chapter {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  .l-book-chapter .l-admin--sidebar-open .c-written-tutorial {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media screen and (max-width: 992px) {
  .l-book-chapter .l-admin--sidebar-open .c-written-tutorial {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen {
  .l-book-chapter .l-admin--sidebar-open .c-nav-sidebar__nav-action .o-button__label--open {
    display: inline-flex !important;
  }
  .l-book-chapter .l-admin--sidebar-open .c-nav-sidebar__nav-action .o-button__label--close {
    display: none;
  }
  .l-book-chapter .l-admin--sidebar-open .c-nav-sidebar__nav-action i {
    margin-right: 10px !important;
  }
}
@media screen {
  .l-book-chapter .c-written-tutorial__introduction h1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .l-book-chapter .c-written-tutorial__introduction h1 > span:first-child {
    font-size: 5.2rem;
    /* 90/16 */
    margin-right: 15px;
    letter-spacing: -5px;
  }
  .l-book-chapter .c-written-tutorial__introduction h1 span {
    display: block;
  }
  .l-book-chapter .c-written-tutorial__introduction > div span:first-child {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 768px) {
  .l-book-chapter .c-written-tutorial__content {
    margin-top: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-chapter .c-written-tutorial__content h1,
  .l-book-chapter .c-written-tutorial__content h2,
  .l-book-chapter .c-written-tutorial__content h3,
  .l-book-chapter .c-written-tutorial__content h4,
  .l-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
@media screen {
  .l-book-chapter .l-book-header--hide {
    display: none !important;
  }
  .l-book-chapter .l-book-header--margin {
    margin-left: -3px !important;
  }
}
@media screen {
  .l-book-chapter-end-message {
    padding: 60px 24px 60px;
    border-top: 1px solid #DFE7F0;
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-book-chapter-end-message {
    padding: 60px 0;
  }
}
@media screen {
  .l-book-chapter-end-message p {
    font-size: 0.9375rem !important;
    /* 15/16 */
    color: #6E7687;
  }
}
@media screen {
  .l-book-materials-download a,
  .l-book-materials-download button {
    background: #3B4048 !important;
  }
  .l-book-materials-download a:hover,
  .l-book-materials-download button:hover {
    background: #424750 !important;
  }
  .l-book-materials-download a svg,
  .l-book-materials-download button svg {
    fill: #333333 !important;
  }
  .l-book-materials-download .c-modal .c-modal__close {
    background: none !important;
  }
}
@media screen and (max-width: 800px) {
  .l-book-materials-download .c-modal .c-modal__close {
    width: 36px !important;
  }
}
@media screen {
  .l-book-materials-download .c-modal .c-modal__description a {
    background: none !important;
  }
}
@media screen {
  .l-book-materials-download .c-modal .o-button--green {
    background: #158443 !important;
  }
}
@media screen and (max-width: 800px) {
  .l-book-materials-download .c-modal .o-button--green {
    width: auto !important;
  }
}
@media screen and (max-width: 800px) {
  .l-book-materials-download .c-modal .o-button--green .o-button__icon--right {
    margin-left: 10px !important;
  }
}
@media screen {
  .l-book-materials-download .c-modal .o-button--green svg {
    fill: #158443 !important;
  }
}
@media screen {
  .l-chapter-font-serif .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-font-serif .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-font-serif .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-font-serif .c-book-chapter .c-written-tutorial__content .note,
  .l-chapter-font-serif .c-book-chapter .c-written-tutorial__content figcaption {
    font-family: "IBM Plex Serif", serif !important;
  }
}
@media screen {
  .c-reading-experience-selector .l-chapter-font-serif label {
    font-family: "IBM Plex Serif", serif !important;
  }
}
@media screen {
  .l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content .note,
  .l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content figcaption {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h1,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h2 {
    font-size: 1.875em;
  }
}
@media screen and (max-width: 768px) {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h1,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h2 {
    font-size: 1.5em;
    /* 24/16 */
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h3 {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 768px) {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h3 {
    font-size: 1.25em;
    /* 21/16 */
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h4 {
    font-size: 1.188em;
  }
}
@media screen and (max-width: 768px) {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h4 {
    font-size: 1.0625em;
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ul,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ol,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content p,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote {
    font-size: 1.0625em;
  }
}
@media screen and (max-width: 768px) {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ul,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ol,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content p,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote {
    font-size: 0.9375em;
    /* 15/16 */
    margin-top: 18px;
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ul p,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ol p,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content p p,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote p {
    font-size: 1em;
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ul li p,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ol li p,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content p li p,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote li p {
    margin-top: 0.5rem;
    font-size: 1em;
    display: inherit;
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ul ul,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ul ol,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ol ul,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content ol ol,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content p ul,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content p ol,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote ul,
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote ol {
    font-size: 1em;
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content pre {
    font-size: 0.8125em;
  }
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content pre code {
    font-size: 1em;
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content code {
    font-size: 0.875em;
  }
}
@media screen {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote {
    font-size: 1em;
  }
}
@media screen and (max-width: 768px) {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote {
    font-size: 0.9375em;
    /* 15/16 */
  }
}
@media screen {
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content {
    font-size: 75%;
  }
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px;
  }
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 18px;
  }
  .l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content {
    font-size: 80%;
  }
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px;
  }
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 18px;
  }
  .l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content {
    font-size: 85%;
  }
}
@media screen {
  .l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content {
    font-size: 90%;
  }
}
@media screen {
  .l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content {
    font-size: 100%;
  }
}
@media screen {
  .l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content {
    font-size: 110%;
  }
}
@media screen {
  .l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content {
    font-size: 120%;
  }
}
@media screen {
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content {
    font-size: 130%;
  }
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 42px;
  }
}
@media screen and (max-width: 768px) {
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
@media screen {
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 24px !important;
  }
}
@media screen {
  .l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content {
    font-size: 140%;
  }
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 42px;
  }
}
@media screen and (max-width: 768px) {
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
@media screen {
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 24px !important;
  }
}
@media screen {
  .l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
    margin-top: 0 !important;
  }
}
@media screen {
  .c-book-chapter .l-image-100 img {
    max-width: 100% !important;
  }
  .c-book-chapter .l-image-90 img {
    max-width: 90% !important;
  }
  .c-book-chapter .l-image-80 img {
    max-width: 80% !important;
  }
  .c-book-chapter .l-image-70 img {
    max-width: 70% !important;
  }
  .c-book-chapter .l-image-60 img {
    max-width: 60% !important;
  }
  .c-book-chapter .l-image-50 img {
    max-width: 50% !important;
  }
  .c-book-chapter .l-image-40 img {
    max-width: 40% !important;
  }
  .c-book-chapter .l-image-30 img {
    max-width: 30% !important;
  }
  .c-book-chapter .l-image-20 img {
    max-width: 20% !important;
  }
  .c-book-chapter .l-image-10 img {
    max-width: 10% !important;
  }
}
@media screen {
  .l-book-hero {
    padding-bottom: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .l-book-hero {
    padding-bottom: 45px !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-hero {
    padding-top: 45px !important;
  }
}
@media screen and (max-width: 600px) {
  .l-book-hero {
    padding-top: 30px !important;
    padding-bottom: 15px !important;
  }
}
@media screen {
  .l-book-hero .l-collection-hero__wrapper {
    grid-template-columns: 300px 1fr !important;
    align-items: flex-start !important;
  }
}
@media screen and (max-width: 992px) {
  .l-book-hero .l-collection-hero__wrapper {
    grid-column-gap: 0 !important;
    grid-template-columns: 285px 1fr !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-hero .l-collection-hero__wrapper {
    grid-template-columns: 1fr !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-hero .l-collection-hero__artwork {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .l-book-hero .l-collection-hero__copy {
    background: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
  .l-book-hero .l-collection-hero__copy h1,
  .l-book-hero .l-collection-hero__copy > span {
    text-align: center;
  }
}
@media screen {
  .l-book-hero .l-collection-hero__copy .rating {
    color: #333333 !important;
  }
  .l-book-hero .l-collection-hero__copy .rating .l-button__svg-empty-star {
    fill: #CACED2;
  }
}
@media screen {
  .l-book-hero .l-collection-hero__copy-markdown {
    font-size: 1.1875em !important;
    /* 21/16 */
    /* 19/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-book-hero .l-collection-hero__copy-markdown {
    font-size: 1rem !important;
    /* 17/16 */
  }
}
@media screen and (max-width: 992px) {
  .l-book-hero .l-collection-hero__artwork img {
    max-width: 240px !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-hero .l-collection-hero__artwork img {
    max-width: 180px !important;
  }
}
@media screen and (max-width: 800px) {
  .l-book-hero .l-book-hero__buttons {
    display: flex;
    flex-wrap: wrap;
  }
  .l-book-hero .l-book-hero__buttons > div {
    width: 100%;
  }
  .l-book-hero .l-book-hero__buttons .l-margin-right-9 {
    margin-right: 0 !important;
  }
  .l-book-hero .l-book-hero__buttons a,
  .l-book-hero .l-book-hero__buttons button {
    width: 100%;
  }
  .l-book-hero .l-book-hero__buttons a .o-button__label,
  .l-book-hero .l-book-hero__buttons button .o-button__label {
    margin-left: auto;
    margin-right: auto;
  }
  .l-book-hero .l-book-hero__buttons a .o-button__icon--left,
  .l-book-hero .l-book-hero__buttons button .o-button__icon--left {
    margin-right: -24px;
  }
  .l-book-hero .l-book-hero__buttons a .o-button__icon--right,
  .l-book-hero .l-book-hero__buttons button .o-button__icon--right {
    margin-left: -24px;
  }
  .l-book-hero .l-book-hero__buttons .l-book-materials-download {
    order: 2;
    margin-top: 15px;
  }
}
@media screen and (max-width: 600px) {
  .l-book-hero .l-book-hero__buttons .l-book-materials-download .u-hide-mobile {
    display: inline-block !important;
  }
}
@media screen {
  .l-book-modules .l-collection-modules__module {
    grid-template-columns: 300px 1fr !important;
    grid-column-gap: 90px !important;
  }
}
@media screen and (max-width: 992px) {
  .l-book-modules .l-collection-modules__module {
    grid-template-columns: 1fr !important;
  }
}
@media screen and (max-width: 992px) {
  .l-book-modules .l-collection-modules__pitch-cards {
    order: 2;
  }
}
@media screen {
  .l-book-sales-grid {
    max-width: 1152px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-column-gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-grid {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-book-sales-left {
    padding-right: 50px;
  }
}
@media screen and (max-width: 1200px) {
  .l-book-sales-left {
    padding-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-left {
    padding-right: 0;
  }
}
@media screen {
  .l-book-sales-left-top {
    display: grid;
    grid-template-columns: 0.25fr 0.75fr;
    grid-column-gap: 8px;
  }
}
@media screen and (max-width: 1200px) {
  .l-book-sales-left-top {
    grid-column-gap: 24px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-left-top {
    grid-template-columns: 2fr 8fr;
  }
}
@media screen and (max-width: 992px) {
  .l-collection-hero__copy-markdown {
    font-size: 0.9375rem;
    /* 15/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero__copy-markdown {
    display: none;
  }
}
@media screen {
  .l-book-meta > div {
    margin-top: 30px;
  }
  .l-book-meta > div:first-child {
    margin-top: 0;
  }
  .l-book-meta span {
    display: block;
    font-size: 0.9375rem;
    /* 15/16 */
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .l-book-meta span {
    font-size: 0.875rem;
    /* 14/16 */
  }
}
@media screen {
  .l-book-meta span:last-child {
    font-weight: 700;
    margin-top: 3px;
  }
}
@media screen {
  .l-book-art {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .l-book-art {
    text-align: left;
  }
}
@media screen {
  .l-book-art img {
    max-width: 396px;
    width: 100%;
    border-radius: 0.9375rem;
    /* 15/16 */
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
}
@media screen and (max-width: 768px) {
  .l-book-art img {
    max-width: 324px;
  }
}
@media screen {
  .l-book-art .l-button-look-inside {
    margin: -38px 0 0 -96px;
  }
  .l-book-art .l-button-look-inside .o-button__icon--left {
    width: 32px;
    height: 32px;
    margin-right: 12px;
  }
}
@media screen {
  .l-book-sales-copy h2 {
    font-size: 1.5rem;
    /* 24/16 */
    margin-top: 18px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-copy h2 {
    font-size: 1.375rem;
    /* 22/16 */
  }
}
@media screen {
  .l-book-sales-copy h2:first-child {
    margin-top: 0;
  }
}
@media screen {
  .l-book-sales-copy h3 {
    font-size: 1.25rem;
    /* 20/16 */
    margin-top: 15px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-copy h3 {
    font-size: 1.1875rem;
    /* 19/16 */
  }
}
@media screen {
  .l-book-sales-copy h4 {
    font-size: 1.0625rem;
    /* 17/16 */
    margin-top: 12px;
  }
}
@media screen {
  .l-book-sales-copy p {
    margin-top: 18px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-copy p {
    font-size: 1rem;
    /* 15/16 */
  }
}
@media screen {
  .l-book-sales-copy ul,
  .l-book-sales-copy ol {
    margin-top: 18px;
    list-style: inherit;
    padding-left: 18px;
  }
  .l-book-sales-copy ul li,
  .l-book-sales-copy ol li {
    margin-top: 10px;
  }
}
@media screen {
  .l-book-sales-copy ul {
    list-style: disc;
  }
}
@media screen {
  .l-book-sales-copy ol {
    list-style: decimal;
  }
}
@media screen {
  .l-book-sales-copy a {
    color: #158443;
  }
}
@media screen {
  .l-book-toc h2 {
    margin-top: 45px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-toc h2 {
    font-size: 1.375rem;
    /* 22/16 */
  }
}
@media screen {
  .l-book-toc h2:first-child {
    margin-top: 0;
  }
}
@media screen {
  .l-book-toc h4 {
    line-height: 1.25;
  }
}
@media screen and (max-width: 768px) {
  .l-book-toc h4 {
    font-size: 1.1875rem !important;
    /* 19/16 */
  }
}
@media screen {
  .l-book-toc .c-tutorial-episode {
    margin-top: 20px;
  }
  .l-book-toc .c-tutorial-episode:before {
    height: calc(100% - 33px);
  }
}
@media screen {
  .l-book-toc .c-tutorial-episode p {
    margin-top: 6px;
    font-size: 0.9375em;
    /* 15/16 */
  }
}
@media screen {
  .l-book-toc .l-book-toc-section-description {
    position: relative;
    padding-left: 64px;
    margin-top: 20px;
  }
  .l-book-toc .l-book-toc-section-description:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    width: 6px;
    height: 100%;
    background: #DFE7F0;
    border-radius: 100px;
    transition: 0.75s all;
  }
  .l-book-toc .l-book-toc-section-description h1,
  .l-book-toc .l-book-toc-section-description h2,
  .l-book-toc .l-book-toc-section-description h3,
  .l-book-toc .l-book-toc-section-description h4,
  .l-book-toc .l-book-toc-section-description h5 {
    margin-top: 15px;
  }
  .l-book-toc .l-book-toc-section-description p,
  .l-book-toc .l-book-toc-section-description ul,
  .l-book-toc .l-book-toc-section-description ol {
    font-size: 0.9375em;
    margin-top: 15px;
  }
  .l-book-toc .l-book-toc-section-description p:first-child,
  .l-book-toc .l-book-toc-section-description ul:first-child,
  .l-book-toc .l-book-toc-section-description ol:first-child {
    margin-top: 0;
  }
  .l-book-toc .l-book-toc-section-description p em,
  .l-book-toc .l-book-toc-section-description ul em,
  .l-book-toc .l-book-toc-section-description ol em {
    font-style: italic;
    font-weight: 400;
  }
  .l-book-toc .l-book-toc-section-description p strong,
  .l-book-toc .l-book-toc-section-description ul strong,
  .l-book-toc .l-book-toc-section-description ol strong {
    font-weight: 700;
  }
  .l-book-toc .l-book-toc-section-description p em strong,
  .l-book-toc .l-book-toc-section-description ul em strong,
  .l-book-toc .l-book-toc-section-description ol em strong {
    font-style: italic;
    font-weight: 700;
  }
  .l-book-toc .l-book-toc-section-description p strong em,
  .l-book-toc .l-book-toc-section-description ul strong em,
  .l-book-toc .l-book-toc-section-description ol strong em {
    font-style: italic;
    font-weight: 700;
  }
  .l-book-toc .l-book-toc-section-description ul,
  .l-book-toc .l-book-toc-section-description ol {
    padding-left: 20px;
  }
  .l-book-toc .l-book-toc-section-description ul li,
  .l-book-toc .l-book-toc-section-description ol li {
    margin-top: 3px;
  }
  .l-book-toc .l-book-toc-section-description ul {
    list-style: disc;
  }
  .l-book-toc .l-book-toc-section-description ol {
    list-style: lower-roman;
  }
}
@media screen {
  .l-book-contributors .l-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-book-contributors .l-grid-3 {
    grid-template-columns: 1fr;
    grid-row-gap: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-book-contributors .c-content-author:first-child {
    margin-top: 0;
  }
}
@media screen {
  .l-book-contributors h3 {
    display: none;
  }
}
@media screen {
  .l-book-contributors .c-authors {
    background: none;
    padding: 0;
  }
}
@media screen {
  .l-book-contributors .l-block-wrapper {
    padding: 0;
  }
}
@media screen {
  .l-book-contributors .c-content-author p {
    display: none;
  }
}
@media screen {
  .l-book-contributors .c-content-author__title {
    font-size: 21px !important;
    line-height: 1.125;
    max-width: 96px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-contributors .c-content-author__title {
    max-width: none;
    font-size: 1.1875rem !important;
    /* 19/16 */
  }
}
@media screen {
  .l-book-contributors .c-content-author img {
    width: 90px;
    height: 90px;
    border-radius: 0.5625rem;
    /* 9/16 */
    border: 0;
    box-shadow: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-book-contributors .c-content-author img {
    width: 72px;
    height: 72px;
  }
}
@media screen {
  .l-book-sales-right {
    margin-top: -24px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right {
    position: fixed;
    z-index: 99999999;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 18px 24px;
    background: #ffffff;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
}
@media screen {
  .l-book-sales-right .l-book-sales-right--container:hover {
    overflow-y: auto;
  }
}
@media screen {
  .l-book-sales-right .l-book-sales-right--container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding-top: 24px;
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .l-book-sales-right .l-book-sales-right--container::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container {
    padding-top: 0;
    height: auto;
  }
}
@media screen {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count {
    margin-top: 6px !important;
  }
  .l-book-sales-right .l-book-sales-right--container .c-rating-count > div {
    margin-top: 0;
  }
}
@media screen and (max-width: 992px) {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count {
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 992px) {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count a {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
  }
}
@media screen {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count--empty {
    margin-top: 3px !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count--empty {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count--empty a {
    color: #158443;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count--empty a {
    font-size: 0.875rem;
  }
}
@media screen {
  .l-book-sales-right .l-book-sales-right--container .o-button-close {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container .o-button-close {
    display: flex;
  }
}
@media screen {
  .l-book-sales-right .l-book-sales-right--container .l-button-book-meta-open {
    display: none;
  }
}
@media screen {
  .l-book-sales-right .l-book-sales-right--container-minify .l-button-book-meta-open {
    display: flex;
  }
}
@media screen and (min-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container-minify .l-button-book-meta-open {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container-minify h1,
  .l-book-sales-right .l-book-sales-right--container-minify p,
  .l-book-sales-right .l-book-sales-right--container-minify .l-book-sales-cta,
  .l-book-sales-right .l-book-sales-right--container-minify .o-button-close {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container-minify > .l-flex {
    display: none;
  }
}
@media screen {
  .l-book-sales-right h1 {
    line-height: 1;
  }
}
@media screen and (max-width: 992px) {
  .l-book-sales-right h1 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right h1 {
    font-size: 1.375rem;
    /* 22/16 */
  }
}
@media screen {
  .l-book-sales-right .o-badge--pro {
    border-color: #157CB8;
    margin-right: 5px;
  }
}
@media screen {
  .l-book-sales-right a.rating {
    flex-wrap: wrap;
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right a.rating {
    display: none;
  }
}
@media screen {
  .l-book-sales-right a.rating .l-font-17 {
    font-size: 1.5rem;
    /* 24/16 */
    top: 2px;
    position: relative;
  }
}
@media screen and (max-width: 992px) {
  .l-book-sales-right a.rating .l-font-17 {
    font-size: 1.1875rem;
    /* 19/16 */
  }
}
@media screen {
  .l-book-sales-right a.rating svg {
    width: 20px;
    height: 19px;
  }
}
@media screen and (max-width: 992px) {
  .l-book-sales-right a.rating svg {
    width: 16px;
  }
}
@media screen {
  .l-book-sales-right a.rating .l-font-15 {
    display: block;
    white-space: nowrap;
    width: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #158443;
    letter-spacing: 0;
  }
}
@media screen and (max-width: 992px) {
  .l-book-sales-right .l-book-sales-right-authors {
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right-authors {
    font-size: 0.875rem !important;
    /* 14/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right--show {
    overflow-y: scroll;
    height: 100%;
  }
}
@media screen {
  .l-book-sales-right--show .o-button-close {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right--show .l-book-sales-cta-secondary {
    display: block !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right--show .l-book-sales-cta-tertiary {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right--show .l-book-sales-cta-close {
    display: block !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right--show .l-no-border {
    border-bottom: 1px solid #DFE7F0 !important;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-right--show .o-button--huge {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}
@media screen {
  .l-book-sales-cta {
    border-bottom: 1px solid #DFE7F0;
    margin-top: 15px;
    padding-bottom: 15px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-cta {
    margin-top: 10px;
    padding-bottom: 10px;
  }
}
@media screen {
  .l-book-sales-cta:last-child {
    border-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-cta .o-button--huge {
    height: auto;
    line-height: 1.25;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-cta.l-book-sales-cta-secondary {
    display: none;
  }
}
@media screen {
  .l-book-sales-cta.l-book-sales-cta-tertiary {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-cta.l-book-sales-cta-tertiary {
    display: block;
  }
}
@media screen {
  .l-book-sales-cta.l-book-sales-cta-open {
    padding-bottom: 0;
  }
}
@media screen {
  .l-book-sales-cta.l-book-sales-cta-close {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-cta .l-book-sales-right-info {
    font-size: 0.8125rem;
    /* 13/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-cta .o-button {
    font-size: 0.875rem;
    /* 14/16 */
  }
}
@media screen {
  .l-book-sales-related {
    max-width: 1152px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 992px) {
  .l-book-sales-related .l-grid-4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-book-sales-related .l-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 600px) {
  .l-book-sales-related .l-grid-4 {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-path-grid {
    display: grid;
    grid-template-columns: 3.33fr 6.66fr;
    grid-column-gap: 26px;
  }
}
@media screen and (max-width: 992px) {
  .l-path-grid {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-path-hero {
    padding-top: 40px;
    position: relative;
  }
  .l-path-hero .l-path-hero__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
  }
  .l-path-hero .l-path-hero__wrapper .l-path-hero__copy .o-button--continue {
    max-width: 360px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__copy .o-button--continue .o-button__label {
    max-width: 200px;
  }
}
@media screen {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__copy .o-progress-indicator {
    background: rgba(0, 0, 0, 0.125);
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0 !important;
  }
  .l-path-hero .l-path-hero__wrapper .l-path-hero__copy .o-progress-indicator .o-progress-indicator__fill {
    width: 33.33%;
    border-radius: 0 20px 20px 0;
  }
}
@media screen and (max-width: 1080px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__video {
    margin-right: -100px;
  }
}
@media screen and (max-width: 992px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__video {
    order: 1;
  }
}
@media screen and (max-width: 768px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__video {
    margin-right: 0;
  }
}
@media screen {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork {
    position: relative;
    width: 100%;
    width: 300px;
    height: 300px;
    margin: 0 auto;
  }
  .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork figure {
    text-align: center;
    height: 100%;
  }
  .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork figure .o-button-video-start {
    z-index: 1;
  }
  .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 992px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork--feature {
    width: 300px;
  }
}
@media screen and (max-width: 600px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork--feature {
    margin: 0 auto;
  }
}
@media screen {
  .l-path-hero h1 {
    font-size: 2rem;
    line-height: 1.125;
  }
}
@media screen {
  .l-path-hero p {
    font-family: "Bitter", serif;
    font-size: 1.0625rem; /* 17/16 */
    margin-top: 15px;
  }
}
@media screen and (max-width: 768px) {
  .l-path-hero p {
    font-size: 1rem;
  }
}
@media screen {
  .l-path-hero p:first-child {
    margin-top: 0;
  }
}
@media screen {
  .l-path-hero .c-video-player__video {
    width: 480px;
    border-radius: 0.5625rem;
    overflow: hidden;
    padding-top: 56.25%;
    background: #333333;
  }
}
@media screen and (min-width: 1080px) {
  .l-path-hero .c-video-player__video {
    width: 720px;
  }
}
@media screen and (max-width: 768px) {
  .l-path-hero .c-video-player__video {
    width: 100%;
  }
}
@media screen {
  .l-path-hero .c-video-player__video img {
    width: 100%;
  }
}
@media screen {
  .l-path-hero .c-box-list {
    position: absolute;
    top: 10px;
    left: 180px;
  }
}
@media screen and (max-width: 768px) {
  .l-path-hero .c-box-list {
    left: 10px;
    top: 70px;
  }
}
@media screen {
  .l-path-hero .c-box-list li {
    cursor: inherit;
  }
  .l-path-hero .c-box-list li:nth-of-type(1) {
    opacity: 0.9;
  }
  .l-path-hero .c-box-list li:nth-of-type(2) {
    opacity: 0.8;
  }
  .l-path-hero .c-box-list li:nth-of-type(3) {
    opacity: 0.7;
  }
  .l-path-hero .c-box-list li:nth-of-type(4) {
    opacity: 0.6;
  }
  .l-path-hero .c-box-list li:nth-of-type(5) {
    opacity: 0.5;
  }
  .l-path-hero .c-box-list li:nth-of-type(6) {
    opacity: 0.4;
  }
  .l-path-hero .c-box-list li:nth-of-type(7) {
    opacity: 0.3;
  }
  .l-path-hero .c-box-list li:nth-of-type(8) {
    opacity: 0.2;
  }
  .l-path-hero .c-box-list li:nth-of-type(9) {
    opacity: 0.1;
  }
}
@media screen and (max-width: 768px) {
  .l-popular-paths {
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item:before {
    top: 68px;
  }
}
@media screen and (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item:before {
    top: 66px;
    left: 19px;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a {
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    padding: 21px;
  }
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__upper {
    grid-template-columns: 1fr 150px;
    grid-column-gap: 26px;
  }
}
@media screen and (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__upper {
    grid-template-columns: 1fr !important;
  }
}
@media screen and (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__upper .c-tutorial-item__title {
    font-size: 1.3125rem;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__lower {
    display: none !important;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__metadata-short {
    display: flex;
    align-items: center;
    margin-top: 15px;
  }
}
@media screen and (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__metadata-short {
    display: none;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__metadata-short .o-badge-video {
    width: 38px;
    min-width: 38px;
    height: 38px;
    margin-right: 9px;
  }
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__metadata-short .o-badge-video svg {
    width: 13px;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__metadata-short .o-badge--pro {
    margin-right: 6px;
    margin-top: 0;
    display: block;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text {
    margin-left: 0;
    display: block;
  }
}
@media screen and (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text {
    margin-left: 0;
    margin-top: 0 !important;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text .c-tutorial-item__description {
    padding-right: 0;
  }
}
@media screen and (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text .c-tutorial-item__description {
    padding-right: 20px;
  }
}
@media screen and (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text .c-tutorial-item__description p, #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text .c-tutorial-item__description ul, #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text .c-tutorial-item__description ol {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__title {
    font-size: 1.5rem; /* 24/16 */
    line-height: 1.2;
    padding-right: 0;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__platform {
    display: none;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__art {
    order: 4;
    width: 150px;
    height: 150px;
    background: none;
    align-self: center;
  }
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__art img {
    display: block;
    transform: scale(1);
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__icon {
    right: -96px;
    position: relative;
    display: none;
  }
}
@media screen {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__number-badge .o-badge-tutorial {
    top: 6px;
  }
}
@media screen and (max-width: 992px) {
  .l-collection-paths {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-paths {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-collection-paths .c-tutorial-item {
    margin-top: 0 !important;
  }
  .l-collection-paths .c-tutorial-item .c-tutorial-item__platform .o-badge--pro {
    margin-right: 6px;
  }
}
@media screen and (max-width: 768px) {
  .l-domain-collection .c-tutorial--list.c-tutorial--number .c-tutorial-item .c-tutorial-item__text {
    margin-top: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .l-domain-collection .c-tutorial--list.c-tutorial--number .c-tutorial-item__number-badge .o-badge-tutorial {
    left: auto !important;
  }
}
@media screen and (max-width: 768px) {
  .l-domain-collection .c-tutorial--list .c-tutorial-item {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-domain-collection .c-tutorial-item .c-tutorial-item__title {
    word-break: break-word;
  }
  .l-domain-collection .c-tutorial-item .c-tutorial-item__platform {
    display: none;
  }
  .l-domain-collection .c-tutorial-item .c-tutorial-item__parent {
    display: block !important;
  }
  .l-domain-collection .c-tutorial-item .c-tutorial-item__description p {
    height: 44px;
    overflow: hidden;
  }
  .l-domain-collection .c-tutorial-item .c-tutorial-item__description ul, .l-domain-collection .c-tutorial-item .c-tutorial-item__description ol {
    display: none;
  }
}
@media screen {
  .l-domain-collection .c-tutorial--number .c-tutorial-item {
    padding-left: 0 !important;
  }
  .l-domain-collection .c-tutorial--number .c-tutorial-item:before {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .l-domain-collection .c-tutorial--number .c-tutorial-item .c-tutorial-item__text {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-domain-collection .c-tutorial--number .c-tutorial-item .o-badge-tutorial {
    top: 28px !important;
    right: 28px !important;
    left: auto !important;
  }
}
@media screen and (max-width: 768px) {
  .l-domain-collection .c-tutorial--number .c-tutorial-item .o-badge-tutorial {
    right: 21px !important;
    font-size: 1rem;
    left: auto !important;
  }
}
@media screen and (max-width: 768px) {
  .l-domain-collection .c-tutorial--number .c-tutorial-item .c-tutorial-item__text {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-collection-hero {
    padding-top: 72px;
    padding-bottom: 72px;
    padding-left: 30px;
    padding-right: 30px;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero {
    padding-top: 0;
    padding-bottom: 54px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen {
  .l-collection-hero .l-collection-hero__wrapper {
    display: grid;
    grid-template-columns: 1fr 500px;
    grid-column-gap: 90px;
    align-items: center;
  }
}
@media screen and (max-width: 992px) {
  .l-collection-hero .l-collection-hero__wrapper {
    grid-template-columns: 1fr 300px;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero .l-collection-hero__wrapper {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-collection-hero h1 {
    line-height: 1.125;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero .l-collection-hero__copy {
    order: 2;
    margin-left: -20px;
    padding: 20px 20px 0 20px;
    background: #333333;
    margin-top: -60px;
    animation: none;
  }
}
@media screen {
  .l-collection-hero .l-collection-hero__copy .l-collection-hero__copy-markdown ul, .l-collection-hero .l-collection-hero__copy .l-collection-hero__copy-markdown ol, .l-collection-hero .l-collection-hero__copy .l-collection-hero__copy-markdown p {
    font-size: 1.0625rem;
    font-family: "Bitter", serif;
    margin-top: 15px;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero .l-collection-hero__copy .l-collection-hero__copy-markdown ul, .l-collection-hero .l-collection-hero__copy .l-collection-hero__copy-markdown ol, .l-collection-hero .l-collection-hero__copy .l-collection-hero__copy-markdown p {
    font-size: 0.9375rem;
  }
}
@media screen {
  .l-collection-hero .l-collection-hero__copy .l-collection-hero__copy-markdown ul, .l-collection-hero .l-collection-hero__copy .l-collection-hero__copy-markdown ol {
    list-style: inherit;
    padding-left: 10px;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero .l-collection-hero__artwork {
    order: 1;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-bottom: 10px;
    animation: none;
  }
}
@media screen {
  .l-collection-hero .l-collection-hero__artwork img {
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero .l-collection-hero__artwork img {
    width: 100%;
  }
}
@media screen {
  .l-collection-hero .c-rating-count span {
    color: #ffffff;
  }
  .l-collection-hero .c-rating-count a {
    color: #ffffff;
  }
  .l-collection-hero .c-rating-count .l-button__svg-empty-star {
    fill: #CACED2;
    opacity: 0.5;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero .l-collection-hero__artwork--desktop {
    display: none;
  }
}
@media screen {
  .l-collection-hero .l-collection-hero__artwork--mobile {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero .l-collection-hero__artwork--mobile {
    display: block;
  }
}
@media screen {
  .l-collection-hero--trailer {
    overflow: hidden;
  }
  .l-collection-hero--trailer .l-collection-hero__wrapper {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 60px;
    align-items: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero--trailer .l-collection-hero__wrapper {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero--trailer .l-collection-hero__copy {
    margin-top: 0;
  }
}
@media screen {
  .l-collection-hero--trailer .l-collection-hero__trailer {
    width: 120%;
    padding-bottom: 67.5%;
    border-radius: 0.5625rem;
    position: relative;
    overflow: hidden;
    background: #434A53;
  }
}
@media screen and (min-width: 1200px) {
  .l-collection-hero--trailer .l-collection-hero__trailer {
    width: 100%;
    padding-bottom: 56.25%;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero--trailer .l-collection-hero__trailer {
    width: 100%;
    padding-bottom: 56.25%;
    margin-top: 15px;
    border: none;
  }
}
@media screen {
  .l-collection-hero--trailer .l-collection-hero__trailer .o-button-video {
    position: absolute;
    z-index: 1;
  }
}
@media screen {
  .l-collection-hero--trailer .l-collection-hero__trailer img, .l-collection-hero--trailer .l-collection-hero__trailer iframe {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-hero--trailer .l-collection-hero__trailer img, .l-collection-hero--trailer .l-collection-hero__trailer iframe {
    height: 100%;
  }
}
@media screen {
  .l-collection-episodes .l-collection-episodes__wrapper {
    max-width: 685px;
  }
  .l-collection-episodes h2 {
    font-size: 1.5rem; /* 24/16 */
    margin-top: 50px;
  }
  .l-collection-episodes h2:first-child {
    margin-top: 0;
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__module {
    display: grid;
    grid-template-columns: 1fr 360px;
    grid-column-gap: 120px;
  }
}
@media screen and (max-width: 1080px) {
  .l-collection-modules .l-collection-modules__module {
    grid-template-columns: 1fr 360px;
  }
}
@media screen and (max-width: 992px) {
  .l-collection-modules .l-collection-modules__module {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__module-episodes h2 {
    margin-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .l-collection-modules .l-collection-modules__module-episodes h2 {
    font-size: 1.5rem;
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__module-episodes h2:first-child {
    margin-top: 0;
  }
}
@media screen and (max-width: 992px) {
  .l-collection-modules .l-collection-modules__pitch-cards {
    margin-top: 60px;
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__pitch-cards h2 {
    font-size: 1.5rem; /* 24/16 */
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__pitch-cards a {
    color: #158443;
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__pitch-cards p, .l-collection-modules .l-collection-modules__pitch-cards ul, .l-collection-modules .l-collection-modules__pitch-cards ol {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__pitch-cards p {
    margin-top: 18px;
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__pitch-cards ul {
    display: grid;
    grid-template-columns: 1fr;
  }
  .l-collection-modules .l-collection-modules__pitch-cards ul li {
    padding-left: 33px;
    font-family: "Bitter", serif;
    font-weight: 700;
    margin-top: 15px;
    position: relative;
  }
  .l-collection-modules .l-collection-modules__pitch-cards ul li:first-child {
    margin-top: 15px;
  }
  .l-collection-modules .l-collection-modules__pitch-cards ul li:before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    background-image: url(/assets/svg-icons/checkmark--clear-green-e7cb550028b55997c9619c790965bfe6f3cbd9a1b6f6593a4c8e7d9cd9cbdb84.png);
    background-size: cover;
  }
}
@media screen {
  .l-collection-modules .l-collection-modules__pitch-cards .l-collection-modules__trailer {
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 0.5625rem;
    position: relative;
    overflow: hidden;
  }
  .l-collection-modules .l-collection-modules__pitch-cards .l-collection-modules__trailer iframe {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
  }
}
@media screen {
  .l-achievements-grid > div {
    position: relative;
  }
  .l-achievements-grid > div > div:first-of-type {
    width: 100%;
    padding-top: 100%;
    position: relative;
  }
  .l-achievements-grid > div img {
    width: 100%;
    padding: 10px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .l-achievements-grid > div span {
    display: block;
    text-align: center;
  }
  .l-achievements-grid > div span:first-of-type {
    font-family: "Bitter", serif;
    font-size: 1.0625rem !important; /* 17/16 */
    line-height: 1.25;
    font-weight: 700;
    color: #333333 !important;
    margin-top: 2px !important;
  }
  .l-achievements-grid > div span:last-of-type {
    color: #6E7687;
    font-size: 0.875rem; /* 14/16 */
    margin-top: 6px;
  }
}
@media screen {
  .l-black-friday-ui-sales-2021 {
    background: #0d0d0d !important;
  }
  .l-black-friday-ui-sales-2021 h1, .l-black-friday-ui-sales-2021 h2, .l-black-friday-ui-sales-2021 h3, .l-black-friday-ui-sales-2021 h4 {
    color: #ffffff !important;
  }
  .l-black-friday-ui-sales-2021 p {
    color: #A7ADB4 !important;
  }
  .l-black-friday-ui-sales-2021 .o-button--green {
    background: #ffffff;
  }
  .l-black-friday-ui-sales-2021 .o-button--green .o-button__label {
    color: #0d0d0d;
  }
  .l-black-friday-ui-sales-2021 .o-button--green i {
    background: #0d0d0d;
  }
  .l-black-friday-ui-sales-2021 .o-button--green i svg {
    fill: #ffffff;
  }
}
@media screen {
  .l-black-friday-ui-pattern-2021 {
    position: relative;
  }
  .l-black-friday-ui-pattern-2021:before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-1-aad4f39f6af8bd547f5e1cda523dc4aecc476aeca0340d78984c32e242ac88ae.png);
    background-repeat: repeat-x;
    background-size: 1480px;
  }
  .l-black-friday-ui-pattern-2021:after {
    content: "";
    position: absolute;
    bottom: -90px;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-2-cbf4df08a1a98cb35dbaf7d2149956f0dffe854767702da9245960bee1a4c304.png);
    background-repeat: repeat-x;
    background-size: 1480px;
  }
}
@media screen {
  .c-banner-draper.l-black-friday-ui-sales-2021 {
    position: relative;
    padding: 70px 0;
  }
  .c-banner-draper.l-black-friday-ui-sales-2021:before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-1-aad4f39f6af8bd547f5e1cda523dc4aecc476aeca0340d78984c32e242ac88ae.png);
    background-repeat: repeat-x;
    background-size: 1480px;
  }
  .c-banner-draper.l-black-friday-ui-sales-2021:after {
    content: "";
    position: absolute;
    bottom: -90px;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-2-cbf4df08a1a98cb35dbaf7d2149956f0dffe854767702da9245960bee1a4c304.png);
    background-repeat: repeat-x;
    background-size: 1480px;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper.l-black-friday-ui-sales-2021 .c-banner-draper__copy {
    text-align: center;
    margin-bottom: 20px;
    margin-right: 0 !important;
  }
}
@media screen {
  .c-banner-related.l-black-friday-ui-sales-2021 {
    padding: 60px 0;
  }
  .c-banner-related.l-black-friday-ui-sales-2021:before {
    top: -40px !important;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related.l-black-friday-ui-sales-2021 .c-banner-related__artwork {
    margin-bottom: -10px;
  }
}
@media screen {
  .l-black-friday-ui-sales-2021.c-banner-draper--subscription h2 {
    color: #ffffff !important;
  }
}
@media screen {
  .l-black-friday-ui-sales-2021.c-banner-draper--subscription p {
    color: #A7ADB4 !important;
  }
}
@media screen {
  .l-black-friday-ui-sales-2021.c-banner-draper--subscription .c-banner-draper__copy {
    text-align: left;
  }
}
@media screen and (max-width: 1080px) {
  .l-black-friday-ui-sales-2021.c-banner-draper--subscription .c-banner-draper__copy {
    text-align: center;
  }
}
@media screen and (max-width: 1080px) {
  .l-black-friday-ui-sales-2021.c-banner-draper--subscription .c-banner-draper__art {
    margin-bottom: -10px;
  }
}
@media screen {
  .c-banner-draper-sticky.l-black-friday-ui-sales-2021 {
    min-height: 80px;
    height: auto;
  }
  .c-banner-draper-sticky.l-black-friday-ui-sales-2021 .c-banner-draper-sticky__wrapper {
    padding: 0;
  }
}
@media screen and (max-width: 985px) {
  .c-banner-draper-sticky.l-black-friday-ui-sales-2021 .c-banner-draper-sticky__wrapper {
    padding: 10px 60px 15px 20px;
  }
}
@media screen {
  .c-banner-draper-sticky.l-black-friday-ui-sales-2021 p {
    color: #ffffff !important;
  }
}
@media screen {
  .c-banner-draper-sticky.l-black-friday-ui-sales-2021 img {
    width: 240px;
    max-width: none !important;
    margin-bottom: -30px;
    margin-top: -10px;
  }
}
@media screen {
  .c-video-player__paywall.l-black-friday-ui-sales-2021 {
    position: absolute !important;
  }
}
@media screen {
  .home-pattern {
    background-size: 2000px;
    background-position-x: -500px;
  }
}
@media screen {
  section.home-hero {
    background: #333333;
    background-size: cover;
    padding-top: 100px;
    position: relative;
    z-index: 0;
  }
}
@media screen and (max-width: 768px) {
  section.home-hero {
    padding-top: 60px;
  }
}
@media screen {
  section.home-hero:after {
    content: "";
    width: 100%;
    height: 380px;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 640px;
    background-repeat: no-repeat;
    background-position: 960px -240px;
    z-index: -1;
  }
}
@media screen {
  section.home-hero .home-hero__wrapper {
    display: grid;
    grid-template-columns: 1fr 465px;
    grid-column-gap: 100px;
  }
}
@media screen and (max-width: 992px) {
  section.home-hero .home-hero__wrapper {
    display: block;
  }
}
@media screen {
  section.home-hero h1, section.home-hero p {
    color: #ffffff;
  }
}
@media screen {
  section.home-hero h1 {
    font-size: 4rem; /* 64/16 */
  }
}
@media screen and (max-width: 1080px) {
  section.home-hero h1 {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 768px) {
  section.home-hero h1 {
    font-size: 1.875rem;
  }
}
@media screen {
  section.home-hero p {
    font-family: "Bitter", serif;
    font-size: 1.5rem; /* 24/16 */
  }
}
@media screen and (max-width: 768px) {
  section.home-hero p {
    font-size: 1rem;
  }
}
@media screen {
  section.home-hero .home-hero__testimonial {
    margin-bottom: 90px;
  }
}
@media screen and (max-width: 992px) {
  section.home-hero .home-hero__testimonial {
    display: none;
  }
}
@media screen {
  section.home-hero .home-hero__testimonial p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen {
  section.home-hero .home-hero__testimonial span {
    display: block;
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18/16 */
    color: #ffffff;
    margin-top: 18px;
  }
}
@media screen {
  section.home-hero .home-hero__action {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    padding: 24px;
  }
}
@media screen and (max-width: 992px) {
  section.home-hero .home-hero__action {
    background: none;
    padding: 0;
    box-shadow: 0;
    border-radius: 0;
    padding-top: 18px;
    padding-bottom: 90px;
  }
}
@media screen {
  section.home-hero .home-hero__action h4 {
    text-align: center;
    font-size: 1.5rem; /* 24/16 */
    padding: 0 60px;
    margin-bottom: 27px;
  }
}
@media screen and (max-width: 992px) {
  section.home-hero .home-hero__action h4 {
    display: none;
  }
}
@media screen {
  section.home-hero .home-hero__action h5 {
    text-align: center;
    font-size: 1.1875rem; /* 19/16 */
  }
}
@media screen and (max-width: 992px) {
  section.home-hero .home-hero__action h5 {
    display: none;
  }
}
@media screen {
  section.home-hero .home-hero__action ul {
    padding-left: 8px;
  }
  section.home-hero .home-hero__action ul li {
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
    font-weight: 700;
    margin-top: 15px;
    position: relative;
    padding-left: 40px;
  }
}
@media screen and (max-width: 992px) {
  section.home-hero .home-hero__action ul li {
    color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  section.home-hero .home-hero__action ul li {
    font-size: 1rem;
  }
}
@media screen {
  section.home-hero .home-hero__action ul li:before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url(/assets/svg-icons/checkmark--green-1e096ae45df68feb9ffcc548c7c6510565f7f0d4098690d0121fe6739a2a7e76.png);
    background-size: cover;
    position: absolute;
    left: 0;
    top: 1px;
  }
}
@media screen and (max-width: 992px) {
  section.home-hero .home-hero__action ul li:before {
    background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  }
}
@media screen {
  section.home-hero .home-hero__action .o-button--green {
    width: 100%;
  }
  section.home-hero .home-hero__action .o-button--green span {
    width: 100%;
    margin-right: -20px;
    text-align: center;
  }
  section.home-hero .home-hero__action .o-button--green i {
    margin-left: auto;
  }
}
@media screen {
  section.home-pillars {
    position: relative;
  }
  section.home-pillars .home-pillars--adjust {
    margin-top: -50px;
  }
}
@media screen and (max-width: 992px) {
  section.home-pillars .home-pillars--adjust {
    margin-top: 0;
  }
}
@media screen and (max-width: 992px) {
  section.home-pillars .l-flex {
    display: block;
  }
}
@media screen {
  section.home-pillars h2 {
    color: #ffffff;
    font-size: 3rem; /* 48/16 */
    line-height: 1.125;
  }
}
@media screen and (max-width: 768px) {
  section.home-pillars h2 {
    font-size: 1.875rem; /* 15/16 */
  }
}
@media screen {
  section.home-pillars p {
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
    margin-top: 15px;
    color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  section.home-pillars p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  section.home-pillars .home-pillars__entry {
    min-height: 720px;
    padding: 45px 90px;
    overflow: hidden;
  }
}
@media screen and (max-width: 1080px) {
  section.home-pillars .home-pillars__entry {
    padding: 45px 60px;
  }
}
@media screen and (max-width: 768px) {
  section.home-pillars .home-pillars__entry {
    min-height: auto;
    padding: 30px 30px;
  }
}
@media screen {
  section.home-pillars .home-pillars__entry-wrapper {
    max-width: 550px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  section.home-pillars .home-pillars__entry-wrapper {
    max-width: auto;
  }
}
@media screen {
  section.home-pillars .home-pillars__entry-wrapper a {
    text-decoration: none;
  }
}
@media screen {
  section.home-pillars .home-pillars__entry-hint {
    margin-top: 64px;
  }
  section.home-pillars .home-pillars__entry-hint > p {
    display: flex;
  }
  section.home-pillars .home-pillars__entry-hint > p span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    padding-left: 9px;
  }
  section.home-pillars .home-pillars__entry-hint > p span a {
    color: #ffffff;
    text-decoration: underline;
  }
}
@media screen {
  .home-pillars--beta {
    min-height: 420px !important;
  }
}
@media screen and (max-width: 768px) {
  .home-pillars--beta {
    min-height: auto !important;
  }
}
@media screen {
  .home-pillars--beta h2 {
    font-size: 2.25rem !important; /* 36/16 */
    margin-top: 15px;
  }
}
@media screen and (max-width: 768px) {
  .home-pillars--beta h2 {
    font-size: 1.875rem !important; /* 15/16 */
  }
}
@media screen {
  .home-pillars--beta p {
    font-size: 1rem !important;
  }
}
@media screen and (max-width: 768px) {
  .home-pillars--beta p {
    font-size: 0.9375rem !important; /* 15/16 */
  }
}
@media screen {
  .home-pillars--beta .home-pillars__entry-hint {
    margin-top: 48px;
  }
}
@media screen {
  .home-pillars--beta .o-button--dark {
    background: none;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .home-pillars__left, .home-pillars__right {
    width: 50%;
  }
}
@media screen {
  .home-pillars--swift {
    background: #FF6333;
  }
  .home-pillars--swift img {
    width: 340px;
    display: block;
    margin: 0 auto;
    position: relative;
    right: -70px;
    bottom: -20px;
  }
}
@media screen and (max-width: 768px) {
  .home-pillars--swift img {
    width: 240px;
  }
}
@media screen {
  .home-pillars--swift .home-pillars__entry-hint svg {
    fill: #FF6333;
  }
}
@media screen {
  .home-pillars--android {
    background: #49f2c5;
    background: linear-gradient(135deg, #49f2c5 0%, #0575e6 100%);
    border-radius: 12px 0 0 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
}
@media screen and (max-width: 992px) {
  .home-pillars--android {
    border-radius: 0;
  }
}
@media screen {
  .home-pillars--android:before {
    content: "";
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
@media screen {
  .home-pillars--android:after {
    content: "";
    width: 230px;
    height: 290px;
    background-image: url(/assets/artwork/android-pillar--no-shadow-667398ceb6be2f3e7c6f8452778b1dedbc987c594b248e24226e9d8cdb0f3399.svg);
    background-size: cover;
    position: absolute;
    bottom: -80px;
    left: 50%;
    z-index: -1;
    margin-left: -115px;
  }
}
@media screen and (max-width: 768px) {
  .home-pillars--android:after {
    display: none;
  }
}
@media screen {
  .home-pillars--android img {
    width: 180px;
  }
}
@media screen {
  .home-pillars--android .home-pillars__entry-hint svg {
    fill: #49C9D7;
  }
}
@media screen {
  .home-pillars--server-side-swift {
    background: #363B44;
    background-image: url(/assets/artwork/server-side-swift-database-d8876bd377c59aa11239c919f6ee265191d69f60124957f9ac575c0a78330884.svg);
    background-size: 210px;
    background-position: bottom -70px right -15px;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 992px) {
  .home-pillars--server-side-swift {
    border-radius: 0;
  }
}
@media screen {
  .home-pillars--server-side-swift svg {
    fill: #363B44;
  }
}
@media screen {
  .home-pillars--unity {
    background: #687BAD;
    background-image: url(/assets/artwork/unity-vr-fe00fd0b52b25e10558b299ff0c0f54d8c9eecf812f9358ca0a69e56b20b6add.svg);
    background-size: 420px;
    background-position: bottom -250px right -175px;
    background-repeat: no-repeat;
  }
  .home-pillars--unity svg {
    fill: #687BAD;
  }
}
@media screen {
  .home-pillars--unreal-engine {
    background: #535a65;
    background-image: url(/assets/artwork/unreal-engine-ray-gun-7a18eaede9834f3a11c2d0fa336e36cf3eeed706dd3fef81d309cb525b76edd5.svg);
    background-size: 180px;
    background-position: bottom -20px right 50px;
    background-repeat: no-repeat;
    border-radius: 0 0 12px 0;
  }
}
@media screen and (max-width: 992px) {
  .home-pillars--unreal-engine {
    border-radius: 0;
  }
}
@media screen {
  .home-pillars--unreal-engine svg {
    fill: #535a65;
  }
}
@media screen {
  .home-pillars--flutter {
    background: #096ABB;
    background-image: url(/assets/artwork/flutter-logo-acf12cd5392998d5437cbfeefb41a3edfb6d680dd49a0c52818dae970ed995b5.svg);
    background-size: 210px;
    background-position: bottom -60px right 25px;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 768px) {
  .home-pillars--flutter {
    background-size: 180px;
    background-position: bottom -60px right 10px;
  }
}
@media screen {
  .home-pillars--flutter svg {
    fill: #096ABB;
  }
}
@media screen {
  .home-pillars--library {
    background: #1E8C75;
    background-image: url(/assets/artwork/library-yeti-eddcfa99f0336e4f8e3b212ff494672ad171c20724e49a58235a875823592b65.svg);
    background-size: 320px;
    background-position: bottom -90px right -125px;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 768px) {
  .home-pillars--library {
    background-size: 240px;
  }
}
@media screen {
  .home-pillars--library svg {
    fill: #1E8C75;
  }
}
@media screen {
  .home-top-tutorials {
    background: #333333;
    padding-top: 150px;
    padding-bottom: 96px;
    margin-top: -50px;
    overflow: hidden;
  }
  .home-top-tutorials .c-tutorial--card {
    margin-top: 24px !important;
  }
  .home-top-tutorials .c-tutorial--card .c-tutorial-item {
    min-height: 340px;
  }
  .home-top-tutorials .c-tutorial--card .c-tutorial-item .c-tutorial-item__text {
    white-space: normal;
    padding: 0 18px;
    padding-bottom: 50px;
  }
  .home-top-tutorials .c-tutorial--card .c-tutorial-item .c-tutorial-item__title {
    color: #ffffff !important;
  }
}
@media screen {
  .home-community {
    position: relative;
    z-index: 1;
  }
  .home-community h3 {
    font-size: 3rem; /* 48/16 */
  }
}
@media screen and (max-width: 768px) {
  .home-community h3 {
    font-size: 1.875rem;
  }
}
@media screen {
  .home-community p {
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .home-community p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .home-tutorials h3 {
    text-align: left;
  }
}
@media screen {
  .home-tutorials .c-tutorial-item .c-tutorial-item__metadata, .home-tutorials .c-tutorial-item .c-tutorial-item__metadata-short, .home-tutorials .c-tutorial-item .c-tutorial-item__platform {
    display: none;
  }
  .home-tutorials .c-tutorial-item:nth-child(odd) .c-tutorial-item__art {
    height: 220px;
  }
}
@media screen {
  .l-home-section-border-padding {
    padding-top: 30px;
    border-top: 1px solid #D6E0EF;
  }
}
@media screen and (max-width: 768px) {
  .l-home-section-border-padding {
    padding-top: 0;
    border-top: none;
  }
}
@media screen {
  .l-home-section-border-padding-bottom {
    padding-bottom: 42px;
    border-bottom: 1px solid #D6E0EF;
    margin-bottom: -18px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-section-border-padding-bottom {
    padding-bottom: 0;
    border-top: none;
    margin-bottom: 0;
  }
}
@media screen {
  .l-home-getting-started .c-tutorial-item {
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
  }
  .l-home-getting-started .c-tutorial-item a {
    background: #ffffff;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    padding-top: 170px;
  }
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__art {
    width: 100%;
    transition: all 0.5s;
  }
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__art:before {
    z-index: 1;
    background-image: none !important;
    display: none;
  }
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__art:hover img {
    transform: scale(1.1) !important;
  }
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__art img {
    display: block;
    width: 100%;
    max-width: 315px;
    margin: 0 auto;
    position: relative;
    top: 15px;
    transform: scale(1) !important;
  }
}
@media screen and (max-width: 768px) {
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__art img {
    max-width: 270px;
  }
}
@media screen {
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__text {
    z-index: 2;
    white-space: normal;
  }
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.5rem !important; /* 24/16 */
    line-height: 1.2 !important;
    color: #333333;
  }
}
@media screen and (max-width: 768px) {
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.5rem !important; /* 24/16 */
  }
}
@media screen {
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__abstract {
    color: #6E7687;
    margin-top: 10px;
  }
}
@media screen {
  .l-home-getting-started .c-tutorial-item--onboarding-video:hover .c-tutorial-item__video-player:after {
    transform: scale(1.1);
  }
  .l-home-getting-started .c-tutorial-item--onboarding-video .c-tutorial-item__video-player {
    width: 100%;
    padding-top: 50%;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  .l-home-getting-started .c-tutorial-item--onboarding-video .c-tutorial-item__video-player:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    opacity: 0.25;
  }
  .l-home-getting-started .c-tutorial-item--onboarding-video .c-tutorial-item__video-player:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: 100%;
    background-image: url(/assets/artwork/illustration-onboarding-video-8127ed9d0195d0511990d8c4286c7e69b98a68f656d11a57348a90f788a992d7.svg);
    background-size: cover;
    z-index: -1;
    transition: transform 0.25s ease-out;
  }
  .l-home-getting-started .c-tutorial-item--onboarding-video > a {
    flex-wrap: wrap;
    padding-top: 0;
  }
}
@media screen {
  .l-home-getting-started .c-tutorial-item--path a:before {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    width: 244px;
    height: 154px;
    margin-left: -122px;
    background-image: url(/assets/artwork/illustration-paths-6d7cc0918e3be5ab9fe64bfd9d511fab8099b5dd330983ad7d1f6f9853109304.svg);
    background-size: cover;
  }
}
@media screen {
  .l-home-getting-started .c-tutorial-item--ios a:before {
    content: "";
    position: absolute;
    top: 25px;
    left: 50%;
    width: 182px;
    height: 147px;
    margin-left: -90px;
    background-image: url(/assets/artwork/illustration-ios-app-6fe01cac104d72c4c4f6859a8ecba8881d1fa176c021c6f868634e82eb53beb5.svg);
    background-size: cover;
  }
}
@media screen {
  .l-home-getting-started .c-tutorial-item--android a:before {
    content: "";
    position: absolute;
    top: 25px;
    left: 50%;
    width: 190px;
    height: 139px;
    margin-left: -95px;
    background-image: url(/assets/artwork/illustration-android-app-a5e1f0bed7c8b52abdf37955cbbda89773dedff4a44634ecb3ce8b02c000efc8.svg);
    background-size: cover;
  }
}
@media screen {
  .l-home-getting-started .c-tutorial-item--book a:before {
    content: "";
    position: absolute;
    top: 27px;
    left: 50%;
    width: 240px;
    height: 140px;
    margin-left: -120px;
    background-image: url(/assets/artwork/illustration-ios-apprentice-2ea93f658abc2aaec4e97ed68c2b2c2d5aeb027c63513e660be6d07692e6cb2d.svg);
    background-size: cover;
  }
}
@media screen and (min-width: 1440px) {
  .l-home-card-grid .l-grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-home-card-grid .l-grid-2 {
    display: block;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-card-grid .c-tutorial--list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen {
  .l-home-card-grid .c-tutorial-item {
    margin-top: 0 !important;
  }
  .l-home-card-grid .c-tutorial-item a {
    min-height: 100%;
  }
  .l-home-card-grid .c-tutorial-item .c-tutorial-item__text {
    display: grid !important;
  }
  .l-home-card-grid .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    display: none;
  }
  .l-home-card-grid .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata-short {
    margin-top: 6px;
    font-size: 0.875rem; /* 14/16 */
  }
  .l-home-card-grid .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__in-progress, .l-home-card-grid .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__complete {
    order: 4;
  }
  .l-home-card-grid .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__complete {
    width: 113px;
  }
  .l-home-card-grid .c-tutorial-item .c-tutorial-item__number-badge {
    position: absolute;
    top: 37px;
    right: 37px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-card-grid .c-tutorial-item .c-tutorial-item__number-badge {
    display: none;
  }
}
@media screen {
  .l-home-card-grid .c-tutorial-item .o-badge-tutorial--locked {
    display: flex;
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial--featured {
    width: calc(100% + 30px);
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .l-home-continue-watching .c-tutorial--featured::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (min-width: 1600px) {
  .l-home-continue-watching .c-tutorial--featured {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .l-home-continue-watching .c-tutorial--featured {
    display: grid;
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item {
    width: auto !important;
    min-width: 300px !important;
    height: 240px !important;
    min-height: 240px !important;
    overflow: hidden;
    border-radius: 0.5625rem;
  }
}
@media screen and (min-width: 1600px) {
  .l-home-continue-watching .c-tutorial-item {
    min-width: auto !important;
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item:before {
    background: rgba(51, 51, 51, 0.6);
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item a {
    padding: 21px 0 21px 0 !important;
    overflow: hidden;
  }
  .l-home-continue-watching .c-tutorial-item a:hover .c-tutorial-item__art img {
    transform: scale(1.4);
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item .o-badge--new, .l-home-continue-watching .c-tutorial-item .c-tutorial-item__platform {
    display: none;
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__text-upper-meta .c-tutorial-item__metadata {
    display: none;
  }
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__text-upper-meta .c-tutorial-item__metadata-short {
    display: none;
    overflow: hidden;
    width: 200px;
    height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 9px;
  }
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__text-upper-meta .c-tutorial-item__metadata-short .o-badge, .l-home-continue-watching .c-tutorial-item .c-tutorial-item__text-upper-meta .c-tutorial-item__metadata-short .o-badge-video {
    display: none;
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__text {
    display: block;
    white-space: normal;
    padding: 21px 21px 9px 21px !important;
    width: 100%;
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.5rem !important; /* 24/16 */
    max-height: 90px;
    overflow: hidden;
  }
}
@media screen and (max-width: 992px) {
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__title {
    white-space: wrap;
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__art {
    left: 0;
    width: 100%;
  }
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__art-image--primary {
    height: 100%;
    width: auto;
  }
}
@media screen {
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__in-progress {
    position: absolute !important;
    bottom: -21px !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.125) !important;
  }
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__in-progress .c-tutorial-item__in-progress--fill {
    background: #158443 !important;
  }
}
@media screen {
  .l-home-upcoming .c-tutorial-item .o-button--bookmark {
    display: none !important;
  }
  .l-home-upcoming .c-tutorial-item .o-badge--new {
    display: none !important;
  }
  .l-home-upcoming .c-tutorial-item .c-tutorial-item__wrapper {
    min-height: 100%;
  }
  .l-home-upcoming .c-tutorial-item .c-tutorial-item__title, .l-home-upcoming .c-tutorial-item .c-tutorial-item__description, .l-home-upcoming .c-tutorial-item .c-tutorial-item__platform {
    color: #959DA5 !important;
  }
  .l-home-upcoming .c-tutorial-item .c-tutorial-item__metadata, .l-home-upcoming .c-tutorial-item .c-tutorial-item__metadata-short, .l-home-upcoming .c-tutorial-item .c-tutorial-item__in-progress, .l-home-upcoming .c-tutorial-item .c-tutorial-item__complete {
    display: none !important;
  }
  .l-home-upcoming .o-badge--soon {
    width: 107px !important;
    height: 25px !important;
    display: block !important;
  }
  .l-home-upcoming .o-badge-tutorial--locked {
    display: none !important;
  }
  .l-home-upcoming .o-badge-tutorial--recording {
    display: flex !important;
  }
}
@media screen {
  .l-home-new-tutorials-sidebar > div {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-column-gap: 90px;
  }
}
@media screen and (max-width: 1200px) {
  .l-home-new-tutorials-sidebar > div {
    grid-template-columns: 1fr 360px;
    grid-column-gap: 60px;
  }
}
@media screen and (max-width: 992px) {
  .l-home-new-tutorials-sidebar > div {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-home-new-tutorials-sidebar .o-badge--new {
    display: none;
  }
}
@media screen {
  .l-home-new-tutorials-sidebar .o-badge-tutorial--locked, .l-home-new-tutorials-sidebar .o-badge-tutorial--recording {
    display: none !important;
  }
}
@media screen {
  .l-home-new-tutorials-sidebar .c-tutorial-item__metadata {
    order: 3;
    font-size: 0.875rem !important; /* 14/16 */
    display: block !important;
  }
}
@media screen {
  .l-home-new-tutorials-sidebar .c-tutorial-item__type, .l-home-new-tutorials-sidebar .c-tutorial-item__metadata-short {
    display: none !important;
  }
}
@media screen {
  .l-home-new-tutorials .c-tutorial-item a {
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .l-home-new-tutorials .c-tutorial-item a .c-tutorial-item__text {
    display: grid !important;
  }
}
@media screen {
  .l-home-new-tutorials .c-tutorial-item .c-tutorial-item__metadata {
    order: 3;
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .l-home-new-tutorials .c-tutorial-item .c-tutorial-item__in-progress, .l-home-new-tutorials .c-tutorial-item .c-tutorial-item__complete {
    order: 4 !important;
  }
}
@media screen {
  .l-home-new-tutorials .c-tutorial-item .c-tutorial-item__complete {
    margin-top: 15px !important;
    width: 113px !important;
  }
}
@media screen {
  .l-home-announcements .c-tutorial-item .o-button--bookmark {
    display: none !important;
  }
  .l-home-announcements .c-tutorial-item a {
    grid-template-columns: 1fr 72px !important;
    padding: 21px !important;
  }
  .l-home-announcements .c-tutorial-item a .c-tutorial-item__type, .l-home-announcements .c-tutorial-item a .c-tutorial-item__in-progress, .l-home-announcements .c-tutorial-item a .c-tutorial-item__complete, .l-home-announcements .c-tutorial-item a .c-tutorial-item__metadata-short {
    display: none !important;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    height: 100%;
  }
}
@media screen and (max-width: 992px) {
  .l-home-books .c-tutorial--mason-mini {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item {
    margin-bottom: 20px;
    margin-top: 0;
    height: 100%;
  }
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item > a {
    display: block;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item > a {
    grid-template-columns: 1fr 72px !important;
  }
}
@media screen and (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item > a .c-tutorial-item__upper {
    display: grid;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__art {
    width: auto !important;
    height: auto !important;
    background: none !important;
    order: 1;
    margin-top: -40px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__art {
    width: 72px !important;
    height: 72px !important;
    order: 2;
    margin-top: 0;
    margin-bottom: 20px;
    border-radius: 0.5625rem;
    overflow: hidden;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__art-image--primary {
    display: block !important;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__art-image--primary {
    display: none !important;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__art-image--alternate {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__art-image--alternate {
    display: block !important;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__text {
    padding-right: 0;
    margin-left: 0;
    margin-top: 10px;
  }
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    padding-right: 0 !important;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__upper {
    display: block;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__lower {
    display: none !important;
  }
}
@media screen {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__text-upper-meta {
    display: none;
  }
}
@media screen {
  .l-home-recommendations span.o-tooltip {
    opacity: 1;
    visibility: visible;
    transform: none;
    top: -50px;
    margin-left: -120px;
  }
  .l-home-recommendations .c-tutorial-item .c-tutorial-item__in-progress, .l-home-recommendations .c-tutorial-item .c-tutorial-item__complete {
    order: 4 !important;
  }
}
@media screen {
  .l-home-dashboard {
    padding-left: 80px;
  }
}
@media screen and (max-width: 992px) {
  .l-home-dashboard {
    padding-left: 0;
  }
}
@media screen {
  .l-home-dashboard .l-grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-dashboard .l-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen {
  .l-home-dashboard--sidebar {
    padding-left: 280px;
  }
}
@media screen and (max-width: 992px) {
  .l-home-dashboard--sidebar {
    padding-left: 0;
  }
}
@media screen {
  .l-home-dashboard--sidebar .l-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1440px) {
  .l-home-dashboard--sidebar .l-grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1152px) {
  .l-home-book-scroller {
    overflow-x: scroll;
    white-space: nowrap;
    width: calc(100% + 48px);
    max-width: 1152px;
    margin-left: -24px;
    padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .l-home-book-scroller::-webkit-scrollbar {
    width: 0 !important;
  }
  .l-home-book-scroller .c-tutorial--book {
    min-width: 1152px;
    white-space: normal;
  }
}
@media screen {
  .l-home-teaspoon {
    overflow: hidden;
    background-image: url(/assets/patterns/shape-background-1-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg), url(/assets/patterns/shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-3-04b435a8b367f2acd5df19e9a5a9ebbc5cb9ebd83de592acf2614e6811916be2.svg), url(/assets/patterns/shape-background-4-0d96a3121fa3a02c4d7b878e6ed0675842ff726f49e40aba07030e84c1193067.svg), url(/assets/patterns/shape-background-5-c379900da8d28c5958f954b1f923c28e7059467db686e6466713c15ac59f9392.svg), url(/assets/patterns/shape-background-6-72adcee52e0ba4a563c8508d53eb3b86254d8a1c13794ac6058f49f443a162ff.svg), url(/assets/patterns/shape-background-7-807e6193fe372045c1a6e371de27240b7fa9c6f6204d89927caaf5d4ae34dee8.svg), url(/assets/patterns/shape-background-8-016f417c5c3633a91c7042c5b3cd3cd44e789c909675095750cc017b23010be4.svg), url(/assets/patterns/shape-background-9-67e08e905fe410e51fb03d1d9680af2c223752da21fd60247fc858579622ef3e.svg), url(/assets/patterns/shape-background-10-f4b5dbb2c2e157d0f0c5bd136cf6c3f8f54dd1b26e19bf117289e79ae35a6522.svg), url(/assets/patterns/shape-background-11-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg), url(/assets/patterns/shape-background-12-cf3b5cd30f02a0d25be106a8a8c5e4d38413686cfd6e9d4e3a6321bf8b628a07.svg);
    background-size: 1440px, 1440px, 1440px, 630px, 630px, 630px, 630px, 730px, 730px, 730px, 1440px, 1452px;
    background-position: top -40px right -50px, top right, top 430px right -200px, top 1330px left -400px, top 1380px left -420px, top 1530px right -400px, top 1580px right -420px, top 3030px right -400px, top 3580px right -420px, bottom 1000px left, bottom right -50px, bottom -1000px left;
    background-repeat: no-repeat;
  }
}
@media screen {
  section.l-home-hero-teaspoon {
    padding-top: 136px;
  }
}
@media screen and (max-width: 1080px) {
  section.l-home-hero-teaspoon {
    padding-top: 90px;
  }
}
@media screen and (max-width: 768px) {
  section.l-home-hero-teaspoon {
    padding-top: 60px;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__wrapper {
    display: grid;
    grid-template-columns: 0.6fr 0.4fr;
    grid-column-gap: 26px;
  }
}
@media screen and (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__wrapper {
    grid-template-columns: 1fr;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left {
    position: relative;
  }
}
@media screen and (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left {
    max-width: 686px;
    margin: 0 auto;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left:before {
    content: "";
    position: absolute;
    top: -240px;
    left: -180px;
    width: 324px;
    height: 541px;
    background-image: url(/assets/artwork/illustration-home-hero-7e4cfa11e8db4d2d1a0afbd5f7b6fd7f80bc4d22f8ec6a9c363668c68d23b493.svg);
    background-size: cover;
    background-repeat: no-repeat;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left h1 {
    font-size: 3.75rem; /* 60/16 */
    line-height: 1;
  }
}
@media screen and (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left h1 {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left h1 {
    font-size: 2.25rem;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left p {
    margin-top: 20px;
    font-family: "Bitter", serif;
    font-size: 1.3125rem; /* 21/16 */
    line-height: 1.35;
    letter-spacing: -0.5px;
  }
}
@media screen and (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left p {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left p {
    font-size: 1.0625rem; /* 17/16 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    letter-spacing: 0;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right {
    position: relative;
    z-index: 0;
  }
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -240px;
    left: 0;
    width: 626px;
    height: 669px;
    background-image: url(/assets/patterns/shape-background-13-08bfdf1a7c5ed93dd002ff177265c01825031b3c533df81d72958740f0ef2df8.svg);
    background-size: cover;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right:before {
    display: none;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right > div {
    margin-top: -76px;
    padding-left: 40px;
  }
}
@media screen and (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right > div {
    margin-top: 20px !important;
    padding-left: 0;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right p, section.l-home-hero-teaspoon .l-home-hero-teaspoon__right ul {
    font-family: "Bitter", serif;
    font-size: 1.25rem; /* 20/16 */
    color: #ffffff;
  }
}
@media screen and (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right p, section.l-home-hero-teaspoon .l-home-hero-teaspoon__right ul {
    color: #333333;
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right p {
    text-align: center;
    line-height: 1.25;
  }
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right p span {
    font-size: 1.125rem; /* 18/16 */
  }
}
@media screen {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right ul {
    text-align: center;
    margin-top: 20px;
    padding-left: 0;
    font-size: 1.125rem; /* 18/16 */
  }
}
@media screen {
  section.l-home-hero-teaspoon-bottom {
    padding-bottom: 140px;
  }
}
@media screen and (max-width: 768px) {
  section.l-home-hero-teaspoon-bottom {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
@media screen {
  section.l-home-hero-teaspoon-bottom .l-home-hero-teaspoon__left:before {
    top: -140px;
    left: -180px;
    width: 295px;
    height: 633px;
    background-image: url(/assets/artwork/illustration-home-footer-5e6ec24f93a67f76aacbd96085b7f42a0632451ee740aafc1b231d4e5c27573f.svg) !important;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
@media screen {
  section.l-home-hero-teaspoon-bottom .l-home-hero-teaspoon__right:before {
    background-image: url(/assets/patterns/shape-background-14-f2bd03f1cf7707c297a77aa034a76339bf3bb6d26ce0d7cb71112f00a996fe0c.svg) !important;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section.l-home-hero-teaspoon-bottom .l-home-hero-teaspoon__right > div {
    margin-top: 0;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-promo-video-teaspoon {
    margin-top: 90px;
  }
}
@media screen {
  .l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr;
    grid-column-gap: 26px;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid {
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }
}
@media screen {
  .l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid p {
    padding-right: 20px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid p {
    padding-right: 0;
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen and (max-width: 1080px) {
  .l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid .l-home-promo-video-teaspoon__video {
    order: 0;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid > div {
    order: 1;
    text-align: center;
    max-width: 678px;
    margin: 0 auto;
  }
}
@media screen {
  .l-home-platforms .l-home-platforms__grid-outer {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 16px;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-platforms .l-home-platforms__grid-outer {
    grid-template-columns: 1fr;
    grid-row-gap: 16px;
  }
}
@media screen {
  .l-home-platforms .l-home-platforms__grid-inner-left {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-platforms .l-home-platforms__grid-inner-left {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-platforms .l-home-platforms__grid-inner-left {
    grid-template-columns: 1fr;
    grid-row-gap: 16px;
  }
}
@media screen {
  .l-home-platforms .l-home-platforms__grid-inner-left .c-card-platform {
    min-height: 420px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-platforms .l-home-platforms__grid-inner-left .c-card-platform {
    min-height: auto;
  }
}
@media screen {
  .l-home-platforms .l-home-platforms__grid-inner-left .c-card-platform a {
    padding-top: 130px;
  }
}
@media screen {
  .l-home-platforms .l-home-platforms__grid-inner-right {
    display: grid;
    grid-row-gap: 16px;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-platforms .l-home-platforms__grid-inner-right {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-platforms .l-home-platforms__grid-inner-right {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-platforms .l-home-platforms__grid-inner-right .c-card-platform a {
    padding-top: 120px;
  }
}
@media screen {
  .l-home-platforms .l-home-platforms__grid-inner-right .c-card-platform a h2 {
    align-self: flex-end;
  }
}
@media screen {
  .l-home-platforms .l-home-platforms__grid-inner-right .c-card-platform a p {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .l-home-platforms .l-home-platforms__grid-inner-right .c-card-platform a p {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .l-home-platforms .c-card-platform h2, .l-home-platforms .c-card-platform p {
    max-width: none;
    display: block;
  }
}
@media screen {
  .l-home-community {
    position: relative;
    z-index: 1;
  }
  .l-home-community > div {
    position: relative;
  }
  .l-home-community > div:before {
    content: "";
    position: absolute;
    left: -482px;
    top: -50px;
    width: 572px;
    height: 574px;
    background-image: url(/assets/photos/people-mosaic-left-f3c554523b744b526745fc02f9b939026cc816602cdd23ecb53a317724637f6f.png);
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .l-home-community > div:before {
    display: none;
  }
}
@media screen {
  .l-home-community > div:after {
    content: "";
    position: absolute;
    right: -482px;
    top: -50px;
    width: 572px;
    height: 574px;
    background-image: url(/assets/photos/people-mosaic-right-af29365753cc684a0ecd2d5128c8cb69bbcaf0747b33c84c25047e8e89075836.png);
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .l-home-community > div:after {
    display: none;
  }
}
@media screen {
  .l-home-community p {
    font-family: "Bitter", serif;
    font-size: 1.25rem; /* 20/16 */
    margin-top: 20px;
    letter-spacing: -0.5px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-community p {
    font-size: 1.0625rem; /* 17/16 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #6E7687;
    letter-spacing: 0;
  }
}
@media screen {
  .l-home-community p:first-child {
    margin-top: 40px;
  }
}
@media screen {
  .l-home-tutorials-teaspoon .l-tutorial-container {
    padding: 0;
  }
  .l-home-tutorials-teaspoon .l-tutorial-collection {
    padding-top: 0;
  }
  .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--prev, .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--next {
    opacity: 1;
    width: 140px;
  }
  .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--prev span, .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--next span {
    background: #333333;
  }
  .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--prev span:hover, .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--next span:hover {
    background: #158443;
  }
  .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--prev {
    left: 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
    padding-left: 24px;
  }
  .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--next {
    right: 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
    padding-right: 24px;
  }
  .l-home-tutorials-teaspoon .l-tutorial-collection .o-button__icon--next span {
    right: 24px;
  }
  .l-home-tutorials-teaspoon .l-tutorial-container__wrapper {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item {
    width: 275px;
    min-width: 275px;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a {
    border-radius: 0.75rem; /* 12/16 */
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__text-upper {
    padding: 20px;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__text {
    margin: 0;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__art {
    border-radius: 0.5625rem 0.5625rem 0 0;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__icon {
    top: 140px !important;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__icon .o-badge--pro {
    top: 8px;
    box-shadow: none;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__title {
    font-size: 1.25rem !important; /* 20/16 */
    line-height: 1.25;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__metadata, .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__metadata-short {
    display: none;
  }
  .l-home-tutorials-teaspoon .c-tutorial-item a .c-tutorial-item__platform {
    display: block !important;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-why-choose .l-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-home-why-choose > div > div {
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-why-choose h3, .l-home-why-choose p {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .l-home-why-choose h3 {
    margin-top: 20px;
  }
}
@media screen {
  .l-home-why-choose p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .l-home-why-choose p {
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen {
  .l-home-grid-2022 {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-column-gap: 65px;
  }
}
@media screen and (max-width: 992px) {
  .l-home-grid-2022 {
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .l-home-scrollable-mobile {
    display: flex !important;
    overflow-x: scroll;
    margin-left: -24px;
    padding-left: 24px;
    width: calc(100% + 48px);
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .l-home-scrollable-mobile::-webkit-scrollbar {
    width: 0 !important;
  }
  .l-home-scrollable-mobile > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 30px;
  }
}
@media screen {
  .l-home-popular-search .c-global-search {
    background-color: #ffffff;
  }
  .l-home-popular-search .c-global-search .o-input {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .l-home-popular-search .c-global-search .input__icon-svg--search {
    fill: #6E7687;
    margin-top: -3px;
    opacity: 0.5;
  }
  .l-home-popular-search .c-search__tags {
    margin-bottom: -8px;
  }
}
@media screen and (max-width: 600px) {
  .l-grid-new-content.l-home-scrollable-mobile {
    padding-top: 14px;
  }
}
@media screen and (max-width: 768px) {
  .l-grid-new-content.c-skeleton-tutorials {
    display: grid;
  }
}
@media screen {
  #user-index-new-content .c-modal-wrapper {
    max-width: 686px !important;
    height: 50%;
    min-height: 400px;
    overflow-y: scroll !important;
    padding-top: 30px !important;
  }
  #user-index-new-content .c-modal-wrapper .c-tabs {
    border-bottom: none;
  }
  #user-index-new-content .c-modal-wrapper .c-tabs li button {
    color: #A7ADB4 !important;
    font-weight: 600;
  }
  #user-index-new-content .c-modal-wrapper .c-tabs .c-tabs--active:before {
    background-color: #158443;
  }
  #user-index-new-content .c-modal-wrapper .c-tabs .c-tabs--active button {
    color: #158443 !important;
  }
}
@media screen {
  .l-home-recommended .c-tabs {
    border-bottom: none;
  }
  .l-home-recommended .c-tabs li button {
    color: #A7ADB4;
    font-weight: 600;
  }
  .l-home-recommended .c-tabs .c-tabs--active:before {
    background-color: #158443;
  }
  .l-home-recommended .c-tabs .c-tabs--active button {
    color: #158443;
  }
}
@media screen and (max-width: 600px) {
  .l-home-recommended .l-grid-2-fr {
    display: flex !important;
    overflow-x: scroll;
    margin-left: -24px;
    padding-left: 24px;
    width: calc(100% + 48px);
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .l-home-recommended .l-grid-2-fr::-webkit-scrollbar {
    width: 0 !important;
  }
  .l-home-recommended .l-grid-2-fr > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 0px;
    min-width: 320px;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item {
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
  }
  .l-home-recommended .c-tutorial-item a {
    background: #ffffff;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    padding-top: 170px;
  }
  .l-home-recommended .c-tutorial-item .c-tutorial-item__art {
    width: 100%;
    transition: all 0.5s;
  }
  .l-home-recommended .c-tutorial-item .c-tutorial-item__art:before {
    z-index: 1;
    background-image: none !important;
    display: none;
  }
  .l-home-recommended .c-tutorial-item .c-tutorial-item__art:hover img {
    transform: scale(1.1) !important;
  }
  .l-home-recommended .c-tutorial-item .c-tutorial-item__art img {
    display: block;
    width: 100%;
    max-width: 315px;
    margin: 0 auto;
    position: relative;
    top: 15px;
    transform: scale(1) !important;
  }
}
@media screen and (max-width: 768px) {
  .l-home-recommended .c-tutorial-item .c-tutorial-item__art img {
    max-width: 270px;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item .c-tutorial-item__text {
    z-index: 2;
    white-space: normal;
  }
  .l-home-recommended .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.25rem !important; /* 20/16 */
    line-height: 1.2 !important;
    color: #333333;
  }
  .l-home-recommended .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__abstract {
    color: #6E7687;
    margin-top: 10px;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--onboarding-video:hover .c-tutorial-item__video-player:after {
    transform: scale(1.1);
  }
  .l-home-recommended .c-tutorial-item--onboarding-video .c-tutorial-item__video-player {
    width: 100%;
    padding-top: 50%;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  .l-home-recommended .c-tutorial-item--onboarding-video .c-tutorial-item__video-player:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    opacity: 0.25;
  }
  .l-home-recommended .c-tutorial-item--onboarding-video .c-tutorial-item__video-player:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: 100%;
    background-image: url(/assets/artwork/illustration-onboarding-video-8127ed9d0195d0511990d8c4286c7e69b98a68f656d11a57348a90f788a992d7.svg);
    background-size: cover;
    z-index: -1;
    transition: transform 0.25s ease-out;
  }
  .l-home-recommended .c-tutorial-item--onboarding-video > a {
    flex-wrap: wrap;
    padding-top: 0;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--video-content:hover .c-tutorial-item__video-player > img {
    transform: scale(1.1);
  }
  .l-home-recommended .c-tutorial-item--video-content .c-tutorial-item__video-player {
    width: 100%;
    padding-top: 50%;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  .l-home-recommended .c-tutorial-item--video-content .c-tutorial-item__video-player:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    opacity: 0.25;
    z-index: 0;
  }
  .l-home-recommended .c-tutorial-item--video-content .c-tutorial-item__video-player > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.25s ease-out;
    z-index: -1;
  }
  .l-home-recommended .c-tutorial-item--video-content > a {
    flex-wrap: wrap;
    padding-top: 0;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--article-content .c-tutorial-item__video-player:before {
    display: none !important;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item .c-tutorial-item__art--article:hover img {
    transform: scale(1) !important;
  }
  .l-home-recommended .c-tutorial-item .c-tutorial-item__art--article .c-tutorial-item__art-image--alternate {
    top: 0 !important;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--book-content {
    width: auto !important;
    height: auto !important;
    min-width: 100% !important;
    max-width: 180px;
  }
}
@media screen and (max-width: 600px) {
  .l-home-recommended .c-tutorial-item--book-content {
    min-width: 180px !important;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--book-content:hover .c-tutorial-item__art img {
    transform: scale(1) !important;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--book-content a {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding-top: 0;
    flex-direction: column;
    max-width: 180px;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__text {
    padding: 0 !important;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__title {
    font-size: 1.1875rem !important; /* 19/16 */
    padding-right: 0 !important;
    margin-top: 15px;
    text-align: center;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__platform {
    font-size: 0.875rem !important; /* 14/16 */
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__art {
    position: relative !important;
    border-radius: 21px;
  }
}
@media screen {
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__art-image--primary {
    top: auto !important;
  }
}
@media screen {
  .l-home-my-books .c-tutorial--book {
    display: grid;
    grid-template-columns: 180px 180px 180px;
    justify-content: space-around;
    padding: 0 20px;
  }
}
@media screen and (max-width: 1080px) {
  .l-home-my-books .c-tutorial--book {
    grid-template-columns: 180px 180px;
  }
}
@media screen and (max-width: 992px) {
  .l-home-my-books .c-tutorial--book {
    grid-template-columns: 180px 180px 180px;
  }
}
@media screen and (max-width: 768px) {
  .l-home-my-books .c-tutorial--book {
    grid-template-columns: 180px 180px;
  }
}
@media screen and (max-width: 600px) {
  .l-home-my-books .c-tutorial--book {
    padding: 10px 24px 0 24px;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .l-home-my-books .c-tutorial--book > div {
    min-width: 180px;
  }
}
@media screen {
  .l-home-my-books .c-tutorial-item {
    max-width: 180px;
  }
  .l-home-my-books .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art {
    max-width: 180px;
  }
  .l-home-my-books .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.1875rem !important; /* 19/16 */
  }
  .l-home-my-books .c-tutorial-item .c-tutorial-item__platform {
    font-size: 0.875rem !important; /* 14/16 */
  }
}
@media screen {
  .l-onboarding-background {
    background-image: url(/assets/patterns/shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-1-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg);
    background-size: 100%, 1440px;
    background-position: top -72px right, top -60px right -60px;
    background-repeat: no-repeat;
  }
}
@media screen {
  .l-onboarding-interests {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}
@media screen and (max-width: 1080px) {
  .l-onboarding-interests {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 992px) {
  .l-onboarding-interests {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 600px) {
  .l-onboarding-interests {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-onboarding-interests .c-card-platform > div {
    padding-top: 140px;
  }
  .l-onboarding-interests .c-card-platform > div h2 {
    min-width: 100%;
    width: 100%;
    justify-content: center;
  }
}
@media screen {
  .l-onboarding-skill {
    display: flex;
    white-space: nowrap;
    max-width: 770px;
    margin-left: auto;
    margin-right: auto;
  }
  .l-onboarding-skill:before {
    content: "";
    width: 200px;
    height: 100%;
  }
  .l-onboarding-skill .c-card-choice {
    min-width: 345px;
    width: 345px;
    height: 380px;
    margin-left: 40px;
    white-space: normal;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-skill .c-card-choice {
    margin-left: 30px;
    width: 300px;
    min-width: 300px;
  }
}
@media screen {
  .l-onboarding-skill .c-card-choice img {
    margin-top: 24px;
    width: 160px;
  }
}
@media screen {
  .l-onboarding-skill--multiple {
    max-width: none !important;
  }
}
@media screen {
  .l-subscription-plans--teaspoon {
    background-image: url(/assets/artwork/illustration-subscription-header-923bfbe189a4967a8aa7d5afda8500cc54c825927e383d2434d94171e11bbafb.svg), url(/assets/patterns/shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-1-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg);
    background-size: 1500px, 100%, 1440px;
    background-position: top -120px center, top -72px right, top -60px right -60px;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon > div > .l-flex-justify-center {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .l-margin-30--force {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan {
    height: auto;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25) !important;
    padding: 32px 18px !important;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan {
    width: 100%;
    text-align: center;
    padding-bottom: 36px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan:first-of-type {
    order: 1;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__info {
    display: grid;
    grid-template-areas: "intro benefits" "options options";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
}
@media screen and (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__info {
    grid-template-areas: "intro intro" "benefits benefits" "options options";
  }
}
@media screen and (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro {
    grid-area: intro;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro .c-plan__blurb {
    font-size: 0.9375rem; /* 15/16 */
    color: #333333;
    width: 200px;
    display: block;
    text-align: center;
    margin: 9px auto -10px;
    opacity: 0.66;
  }
}
@media screen and (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro .c-plan__blurb {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro .c-plan__price .c-plan__price-main {
    font-size: 3.75rem !important; /* 60/16 */
    line-height: 60px !important;
    position: relative;
    top: auto;
    left: auto;
    letter-spacing: -2px;
  }
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro .c-plan__price .c-plan__price-cents {
    top: auto;
    bottom: 0;
    left: auto;
    right: auto;
  }
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro .c-plan__price .c-plan__price-currency {
    top: auto;
    bottom: auto;
    left: -15px;
    right: auto;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    padding-bottom: 90px;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    grid-area: benefits;
  }
}
@media screen and (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    padding-bottom: 0;
    margin-top: 24px !important;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits li:first-child {
    margin-top: 0;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options {
    grid-area: options;
    margin-top: 30px;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options a {
    position: relative;
    transform: none;
    bottom: auto;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--primary {
    bottom: 36px;
  }
}
@media screen and (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--primary {
    bottom: 0;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--secondary {
    margin-top: 20px;
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--secondary {
    white-space: normal;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--left, .l-subscription-plans--teaspoon .c-plan--right {
    border-radius: 0.5625rem;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan--emphasis {
    background: #157CB8;
    min-width: 336px;
  }
  .l-subscription-plans--teaspoon .c-plan--emphasis:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 100%;
    height: 40px;
    background: #157CB8;
    border-radius: 0.5625rem;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--emphasis {
    order: 0;
    min-height: auto;
  }
}
@media screen and (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--emphasis:after {
    display: none;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan--emphasis .c-plan__blurb {
    color: #ffffff !important;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan--emphasis .o-badge {
    color: #157CB8;
    border-color: #157CB8;
  }
}
@media screen {
  .l-subscription-plans--teaspoon .c-plan--emphasis .o-badge--pro {
    color: #ffffff;
    border-color: #ffffff;
    position: relative;
    border-radius: 0.5625rem;
    border: 2px solid #ffffff;
    left: auto;
    margin: 0;
    top: -4px;
    margin-left: 3px;
  }
}
@media screen and (max-width: 992px) {
  .l-onboarding-plans--black-friday .c-plan--neon {
    border: none;
    box-shadow: none;
  }
}
@media screen {
  .l-onboarding-plans--black-friday .o-tooltip {
    line-height: 1;
  }
  .l-onboarding-plans--black-friday .o-tooltip:after {
    display: none;
  }
}
@media screen {
  .l-subscription-sales-flourish--bottom {
    width: 100%;
    height: 200px;
    position: relative;
    margin-bottom: -100px;
  }
  .l-subscription-sales-flourish--bottom:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F3B36A;
    clip-path: polygon(0 0, 0 0, 100% 0, 100% 100%);
  }
  .l-subscription-sales-flourish--bottom:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #F3B36A;
    opacity: 0.1;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
  }
}
@media screen {
  .l-onboarding-hello {
    max-width: 670px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-hello {
    padding: 0 30px;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }
}
@media screen {
  .l-onboarding-hello .c-card-option {
    height: 320px;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-hello .c-card-option:nth-of-type(1) {
    order: 2;
  }
}
@media screen {
  .l-onboarding-hello .c-card-option:nth-of-type(1) img {
    padding-top: 10px;
    width: 175px;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-hello .c-card-option:nth-of-type(2) {
    order: 1;
  }
}
@media screen {
  .l-onboarding-hello .c-card-option:nth-of-type(2) img {
    width: 290px;
    margin: 0 auto;
    padding-top: 20px;
  }
}
@media screen and (max-width: 380px) {
  .l-onboarding-hello .c-card-option:nth-of-type(2) img {
    width: 260px;
  }
}
@media screen {
  .l-onboarding-hello .c-card-option a {
    display: grid;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 30px;
  }
}
@media screen {
  .l-onboarding-topics {
    max-width: 500px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-topics {
    padding: 0 30px;
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }
}
@media screen {
  .l-onboarding-topics .c-card-option {
    height: 240px;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-topics .c-card-option {
    height: 200px;
  }
}
@media screen {
  .l-onboarding-topics .c-card-option a {
    display: grid;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 42px;
  }
}
@media screen {
  .l-onboarding-questions {
    max-width: 428px;
    margin: 0 auto;
    display: grid;
    grid-row-gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-questions {
    padding: 0 30px;
    grid-row-gap: 15px;
  }
}
@media screen {
  .l-onboarding-questions a {
    color: #333333;
    text-decoration: none;
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem;
    padding: 12px 16px;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-questions a {
    font-size: 0.9375rem; /* 15/16 */
    padding: 11px 16px;
    text-align: center;
  }
}
@media screen {
  .l-onboarding-questions a:hover {
    background: #F2F6FA;
  }
}
@media screen {
  .l-onboarding-reason form > div {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 28px;
    grid-row-gap: 20px;
  }
}
@media screen and (max-width: 992px) {
  .l-onboarding-reason form > div {
    max-width: 428px;
    grid-template-columns: 1fr;
    grid-row-gap: 15px;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-reason form > div {
    padding: 0 30px;
  }
}
@media screen {
  .l-onboarding-reason div {
    position: relative;
  }
  .l-onboarding-reason div input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .l-onboarding-reason div > input[type=checkbox]:hover + label {
    background: #F2F6FA;
  }
  .l-onboarding-reason div > input[type=checkbox]:checked + label {
    background: #158443;
    border-color: #158443;
    color: #ffffff;
  }
  .l-onboarding-reason div > input[type=checkbox]:checked + label:before {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-reason div > input[type=checkbox]:checked + label:before {
    opacity: 0;
  }
}
@media screen {
  .l-onboarding-reason label {
    display: block;
    color: #333333;
    text-decoration: none;
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    z-index: -1;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-reason label {
    font-size: 0.9375rem; /* 15/16 */
    padding: 11px 16px;
    text-align: center;
  }
}
@media screen {
  .l-onboarding-reason label:before {
    content: "";
    width: 14px;
    height: 11px;
    top: 50%;
    right: 18px;
    margin-top: -5px;
    position: absolute;
    background-image: url(/assets/svg-icons/checkmark-input-1b8bd8dd799f9ea5860fb52681f477caf55c87984a33ed8c58cefdcd097ca5d2.png);
    background-size: cover;
    opacity: 0;
  }
}
@media screen {
  .l-onboarding-reason label:hover {
    background: #F2F6FA;
  }
}
@media screen {
  .l-onboarding-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 30px;
    margin-bottom: 90px;
  }
}
@media screen and (max-width: 768px) {
  .l-onboarding-header {
    margin-bottom: 45px;
  }
}
@media screen {
  .l-onboarding-header h2 {
    text-align: center;
    font-size: 1.25rem; /* 20/16 */
  }
}
@media screen {
  .l-onboarding-header div:nth-of-type(2) {
    text-align: right;
  }
}
@media screen {
  .l-onboarding-header a {
    font-size: 1rem;
    color: #6E7687;
  }
}
@media screen {
  section.l-about-hero {
    height: 450px;
    z-index: 1;
    position: relative;
    overflow: hidden;
  }
  section.l-about-hero:before {
    content: "";
    width: 560px;
    height: 100%;
    background-image: url(/assets/patterns/people-left-large@2x-4cc481f79d54a5f3cb15b85d10654f6001af31c846d96fb0200911cbb06feffb.png);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
@media screen and (max-width: 1200px) {
  section.l-about-hero:before {
    left: -150px;
  }
}
@media screen and (max-width: 992px) {
  section.l-about-hero:before {
    display: none;
  }
}
@media screen {
  section.l-about-hero:after {
    content: "";
    width: 560px;
    height: 100%;
    background-image: url(/assets/patterns/people-right-large@2x-96c41691ead326cb15541bdef6a06b2c9be827f2dc1173ebfb5051220b085b0f.png);
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
}
@media screen and (max-width: 1200px) {
  section.l-about-hero:after {
    right: -150px;
  }
}
@media screen and (max-width: 992px) {
  section.l-about-hero:after {
    display: none;
  }
}
@media screen {
  section.l-about-hero h1 {
    width: 100%;
    font-size: 3.75rem; /* 60/16 */
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  section.l-about-hero h1 {
    font-size: 2rem;
  }
}
@media screen {
  section.l-about-hero h1 span {
    margin-top: 12px;
    display: block;
    font-size: 1.875rem; /* 30/16 */
    line-height: 1.35;
  }
}
@media screen and (max-width: 768px) {
  section.l-about-hero h1 span {
    font-size: 1.5rem;
  }
}
@media screen {
  section.l-about-stats {
    background: #158443;
    background-image: url(/assets/patterns/geometric-relate-pattern--green-8de5dc544490e80b5189ea4003defbc30e0426d1efc37a89346f0895265c5f91.png);
    background-size: cover;
    padding: 54px 0;
  }
  section.l-about-stats h2, section.l-about-stats p, section.l-about-stats li {
    color: #ffffff;
  }
  section.l-about-stats .l-about-stats__figures {
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  section.l-about-stats .l-about-stats__figures {
    display: none;
  }
}
@media screen {
  section.l-about-stats .l-about-stats__figures .l-about-stats__figures-total {
    font-family: "Bitter", serif;
    font-size: 54px;
    font-weight: 700;
    letter-spacing: -3px;
    display: block;
  }
}
@media screen {
  section.l-about-stats .l-about-stats__figures .l-about-stats__figures-title {
    font-size: 0.75rem; /* 12/16 */
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    margin-top: -3px;
  }
}
@media screen and (max-width: 768px) {
  section.l-about-stats .l-about-stats__quotes {
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  section.l-about-stats .l-about-stats__quotes .l-grid-2 {
    display: block;
  }
}
@media screen {
  section.l-about-stats .l-about-stats__quotes h2 {
    font-size: 3rem; /* 48/16 */
  }
}
@media screen and (max-width: 768px) {
  section.l-about-stats .l-about-stats__quotes h2 {
    font-size: 1.5rem;
  }
}
@media screen {
  section.l-about-stats .l-about-stats__quotes p {
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
  }
}
@media screen and (max-width: 768px) {
  section.l-about-stats .l-about-stats__quotes p {
    font-size: 0.9375rem; /* 15/16 */
    margin-top: 15px;
  }
}
@media screen {
  section.l-about-team {
    padding-top: 72px;
    padding-left: 300px;
  }
}
@media screen and (max-width: 992px) {
  section.l-about-team {
    padding-left: 0;
  }
}
@media screen {
  section.l-about-team .c-nav-sidebar--article {
    position: absolute;
    width: 320px !important;
    height: auto;
    top: 150px;
  }
  section.l-about-team .c-nav-sidebar--article .c-global-header__logo, section.l-about-team .c-nav-sidebar--article .c-nav-sidebar__nav-action, section.l-about-team .c-nav-sidebar--article .c-nav-sidebar__title {
    display: none;
  }
  section.l-about-team .c-nav-sidebar--article .c-sidebar-navigator {
    display: block;
  }
}
@media screen {
  section.l-about-team .l-about-team__title {
    font-size: 3rem; /* 48/16 */
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  section.l-about-team .l-about-team__title {
    font-size: 1.75rem;
    text-align: left;
  }
}
@media screen {
  section.l-about-team .o-button--small {
    line-height: 42px !important;
  }
}
@media screen {
  .l-about-team__people .c-content-author {
    display: block;
  }
  .l-about-team__people .c-content-author img {
    min-width: 54px;
    height: 54px;
  }
  .l-about-team__people .c-content-author .c-content-author__title {
    font-size: 1.125rem; /* 18/16 */
    margin-top: 9px;
  }
  .l-about-team__people .c-content-author .c-content-author__description {
    max-height: 87px;
    overflow: hidden;
  }
  .l-about-team__people .c-content-author .c-content-author__description a {
    color: #6E7687;
    text-decoration: none;
  }
}
@media screen {
  section.l-join-team {
    padding: 120px 0;
  }
  section.l-join-team h3 {
    font-size: 1.875rem; /* 30/16 */
  }
}
@media screen and (max-width: 768px) {
  section.l-join-team h3 {
    font-size: 1.5rem;
  }
}
@media screen {
  section.l-join-team p {
    font-family: "Bitter", serif;
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen and (max-width: 768px) {
  section.l-join-team p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .l-library-wrapper {
    max-width: 960px;
    padding: 0 30px;
  }
}
@media screen and (max-width: 1200px) {
  .l-library-wrapper {
    max-width: none;
    padding-right: 130px;
  }
}
@media screen and (max-width: 992px) {
  .l-library-wrapper {
    padding-right: 30px;
  }
}
@media screen {
  .c-library-filters--open .l-library-wrapper {
    max-width: none;
    padding-right: 410px;
    padding-left: 30px;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters--open .l-library-wrapper {
    padding-right: 30px;
  }
}
@media screen {
  .l-library-wrapper.c-library-filters__added .o-tag {
    margin-right: 5px;
  }
}
@media screen {
  .l-contributors-article .l-block-wrapper {
    max-width: 720px;
    padding: 0;
  }
}
@media screen and (max-width: 1280px) {
  .l-contributors-article .l-block-wrapper {
    padding: 0 20px;
  }
}
@media screen and (max-width: 768px) {
  .l-contributors-article .l-block-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media screen {
  .l-contributors-article .l-block-wrapper .l-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .l-contributors-article .l-block-wrapper .l-grid-3 {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .l-contributors-article .c-content-author__description {
    font-size: 0.875rem !important; /* 14/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-community-care-article .l-grid-row-gap-40 {
    grid-row-gap: 30px !important;
  }
}
@media screen and (max-width: 768px) {
  .l-community-care-article .c-tutorial-item {
    margin-top: 0 !important;
  }
}
@media screen {
  .l-community-care-article .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.875rem !important; /* 30/16 */
  }
}
@media screen and (max-width: 768px) {
  .l-community-care-article .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.3125rem !important; /* 21/16 */
  }
}
@media screen and (max-width: 992px) {
  .l-community-care-article .c-tutorial--card.c-tutorial--floating-button {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media screen and (max-width: 768px) {
  .l-community-care-article .c-tutorial--card.c-tutorial--floating-button {
    grid-template-columns: 1fr !important;
  }
}
@media screen {
  .l-community-care-article .c-written-tutorial__introduction {
    background: #E2E6F7 !important;
  }
  .l-community-care-article .c-written-tutorial__introduction:before {
    background: #E2E6F7 !important;
  }
}
@media screen {
  .l-community-care-article header .l-block {
    position: relative;
    z-index: 1;
  }
  .l-community-care-article header .c-written-tutorial--event-artwork {
    z-index: 0 !important;
  }
}
@media screen {
  .l-community-care-article .l-community-care-upcoming-events {
    margin-bottom: -26px;
  }
  .l-community-care-article .l-community-care-upcoming-events ul {
    list-style: none;
    padding: 0 !important;
    margin: 0;
  }
  .l-community-care-article .l-community-care-upcoming-events ul li {
    display: flex;
    align-items: center;
    font-size: 1.5rem; /* 24/16 */
    font-family: "Bitter", serif;
    font-weight: 700;
    padding: 15px 0;
    border-bottom: 1px solid #eff3f6;
  }
}
@media screen and (max-width: 768px) {
  .l-community-care-article .l-community-care-upcoming-events ul li {
    font-size: 1.25rem;
  }
}
@media screen {
  .l-community-care-article .l-community-care-upcoming-events ul li:last-child {
    border-bottom: none;
  }
}
@media screen {
  .l-community-care-article .l-community-care-upcoming-events ul li span {
    display: inline-flex;
    background: #158443;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.6875rem; /* 11/16 */
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    padding: 3px 7px;
    border-radius: 0.5625rem;
    white-space: nowrap;
  }
}
@media screen {
  .l-community-care-article .l-community-care-upcoming-events ul li a {
    color: #333333;
    text-decoration: underline;
    margin-left: 12px;
  }
}
@media screen {
  .l-article-profile {
    display: flex;
    margin-top: 24px;
  }
  .l-article-profile p {
    margin-top: 0 !important;
  }
  .l-article-profile img {
    margin-right: 20px !important;
    min-width: 150px;
    width: 150px;
    height: 150px;
  }
}
@media screen and (max-width: 768px) {
  .l-article-profile img {
    margin-right: 18px !important;
    min-width: 90px;
    width: 90px;
    height: 90px;
  }
}
@media screen {
  .l-menu-interests-dropdown {
    width: 240px;
    right: 0;
    left: auto;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
  .l-menu-interests-dropdown:before {
    left: auto;
    right: 30px;
  }
  .l-menu-interests-dropdown li {
    height: 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0 !important;
    padding: 0 18px;
  }
}
@media screen and (max-width: 600px) {
  .l-bookmark-button-mobile {
    margin-right: 0;
    margin-left: auto;
  }
  .l-bookmark-button-mobile button {
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .l-bookmark-button-mobile button:hover {
    background: none;
  }
  .l-bookmark-button-mobile button .o-button__label, .l-bookmark-button-mobile button .o-button__loader-text, .l-bookmark-button-mobile button .o-loader-pulse {
    display: none;
  }
  .l-bookmark-button-mobile button i {
    width: 20px;
    height: 20px;
    margin: 0;
    background: none;
    border-radius: 0;
  }
  .l-bookmark-button-mobile button svg {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
  }
  .l-bookmark-button-mobile .o-button--dark svg {
    fill: #CACED2;
  }
}
@media screen {
  .l-bookmark-button-icon {
    margin-right: 0;
  }
  .l-bookmark-button-icon button {
    background: none;
    padding: 0;
    border-radius: 0;
  }
  .l-bookmark-button-icon button:hover {
    background: none;
  }
  .l-bookmark-button-icon button .o-button__label, .l-bookmark-button-icon button .o-button__loader-text, .l-bookmark-button-icon button .o-loader-pulse {
    display: none;
  }
  .l-bookmark-button-icon button i {
    width: 20px;
    height: 20px;
    margin: 0;
    background: none;
    border-radius: 0;
  }
  .l-bookmark-button-icon button svg {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
  }
  .l-bookmark-button-icon .o-button--dark svg {
    fill: #CACED2;
  }
}
@media screen {
  .l-bookmark-button-remove .c-tutorial-item__icon {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .l-bookmark-button-remove {
    display: grid;
  }
  .l-bookmark-button-remove > span {
    order: 5;
  }
  .l-bookmark-button-remove > span > a {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    left: 18px !important;
    margin-top: 0 !important;
  }
  .l-bookmark-button-remove > a {
    order: 1;
  }
}
@media screen {
  .l-video-rating-footer {
    margin-top: -100px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .l-video-rating-footer .c-add-rating {
    border-top: 1px solid rgb(223, 231, 240);
    max-width: 640px;
    padding-bottom: 120px;
  }
  .l-video-rating-footer .c-add-rating h3 {
    margin-bottom: 12px !important;
  }
}
@media screen {
  .l-article-rating-footer h3 {
    font-size: 1.0625rem !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
  }
}
@media screen {
  .l-review-module--collection {
    margin-top: -60px;
  }
  .l-review-module--collection .l-border-bottom-grey-mako {
    border-color: #DFE7F0 !important;
  }
  .l-review-module--collection .l-block > div {
    border-top: 1px solid #DFE7F0;
    padding-top: 24px;
  }
  .l-review-module--collection .c-review-module__illustration + h2 {
    font-size: 1.3125rem; /* 21/16 */
  }
  .l-review-module--collection #current-user-rating > div {
    border: none;
  }
  .l-review-module--collection .c-review-module__answers label {
    background: #ffffff !important;
  }
  .l-review-module--collection .c-review-module__answers > input[type=checkbox]:checked + label {
    background: #158443 !important;
  }
}
@media screen {
  .l-review-module--article {
    margin-bottom: -30px;
  }
  .l-review-module--article .c-paginator {
    margin-bottom: 20px;
  }
  .l-review-module--article #current-user-rating > div {
    border: none;
  }
  .l-review-module--article #current-user-rating > form > .l-border-bottom-grey-mako {
    border-color: #ffffff;
  }
}
@media screen {
  .l-review-module--books {
    border-top: 1px solid #DFE7F0;
    padding-top: 24px;
    margin-top: 60px;
    margin-bottom: -30px;
  }
}
@media screen and (max-width: 600px) {
  .l-review-module--books {
    margin-bottom: 0;
  }
}
@media screen {
  .l-grid-bookshelf-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 1080px) {
  .l-grid-bookshelf-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: 890px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 880px) {
  .l-grid-bookshelf-5 {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 550px) {
  .l-grid-bookshelf-5 {
    grid-template-columns: 1fr 1fr;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen {
  .l-grid-new-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 30px;
  }
}
@media screen and (max-width: 768px) {
  .l-grid-new-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen {
  .l-grid-new-content > div {
    display: flex;
    justify-content: center;
  }
}
@media screen {
  .l-svg-collection {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 9px;
  }
}
@media screen {
  .l-svg-notebook-bin {
    width: 17px;
    height: 21px;
  }
}
@media screen {
  .l-svg-breadcrumb {
    width: 10px;
    transform: rotate(90deg);
    height: 10px;
    fill: #6E7687;
  }
}
@media screen {
  .l-svg-nub-down {
    width: 10px;
    height: 10px;
    margin-top: -6px;
    margin-left: -6px;
    position: relative;
  }
}
@media screen {
  .l-svg-more {
    width: 20px;
    height: 5px;
  }
}
@media screen {
  .l-svg-empty-state-bookmark {
    width: 13px;
    height: 18px;
    top: 5px;
    position: relative;
    margin: 0 5px;
  }
}
@media screen {
  .l-svg-video-mode, .l-svg-cinema-mode {
    width: 30px;
    height: 24px;
  }
}
@media screen {
  .l-svg-videos-nav {
    fill: #DBDDE0;
    width: 20px;
    height: 20px;
  }
}
@media screen {
  .l-svg-search-nav {
    fill: #DBDDE0;
    width: 16px;
    height: 16px;
  }
}
@media screen {
  .l-svg-articles-nav {
    fill: #DBDDE0;
    width: 18px;
    height: 18px;
  }
}
@media screen {
  .l-svg-instagram-footer {
    width: 23px;
    height: 23px;
  }
}
@media screen {
  .l-svg-twitter-footer {
    width: 23px;
    height: 20px;
  }
}
@media screen {
  .l-svg-facebook-footer {
    width: 23px;
    height: 23px;
  }
}
@media screen {
  .l-svg-linkedin-footer {
    width: 22px;
    height: 22px;
  }
}
@media screen {
  .l-disclose--small {
    width: 15px;
    height: 9px;
  }
}
@media screen {
  .l-svg-color-white {
    fill: #ffffff !important;
  }
}
@media screen {
  .l-svg-color-grey-regent {
    fill: #959DA5 !important;
  }
}
@media screen {
  .l-svg-color-grey-raven {
    fill: #6E7687 !important;
  }
}
@media screen {
  #carbonads {
    /* Based on "Align Left" in https://codepen.io/collection/AyEoKk/?cursor=ZD0xJm89MSZwPTEmdj03&__cf_chl_captcha_tk__=pmd_nMU9jysxWV_aE06SoBFAY_rg3XuwrdiH7SYN_b499Bw-1634128889-0-gqNtZGzNA1CjcnBszQdl */
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
    overflow: hidden;
    max-width: 150px;
    text-align: left;
    position: absolute;
    right: -180px;
  }
}
@media screen and (max-width: 1140px) {
  #carbonads {
    position: relative;
    width: 100%;
    right: 0;
    margin: 30px 0;
    max-width: none;
  }
}
@media screen {
  #carbonads a {
    text-decoration: none;
    color: inherit;
  }
  #carbonads a:hover {
    color: inherit;
  }
}
@media screen {
  #carbonads span {
    display: block;
    overflow: hidden;
  }
}
@media screen {
  #carbonads img {
    margin: 0;
  }
}
@media screen {
  #carbonads .carbon-img {
    display: block;
    margin: 0 auto 8px;
    line-height: 1;
  }
}
@media screen and (max-width: 1140px) {
  #carbonads .carbon-img {
    margin: 0 8px 8px 0;
  }
}
@media screen and (max-width: 1140px) {
  #carbonads .carbon-wrap {
    display: flex;
  }
}
@media screen {
  #carbonads .carbon-text {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
  }
}
@media screen {
  #carbonads .carbon-poweredby {
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
}
@media screen and (max-width: 1440px) {
  .l-admin--sidebar-open #carbonads {
    position: relative;
    width: 100%;
    right: 0;
    margin: 30px 0;
    max-width: none;
  }
}
@media screen and (max-width: 1440px) {
  .l-admin--sidebar-open #carbonads .carbon-img {
    margin: 0 8px 8px 0;
  }
}
@media screen and (max-width: 1440px) {
  .l-admin--sidebar-open #carbonads .carbon-wrap {
    display: flex;
  }
}
@media screen {
  .l-admin--sidebar-open #l-carbon-sidebar-ad {
    display: flex;
  }
}
@media screen {
  #l-carbon-sidebar-ad {
    /* Based on "300 x 250 Banner" in https://codepen.io/collection/AyEoKk/?cursor=ZD0xJm89MSZwPTEmdj03&__cf_chl_captcha_tk__=pmd_nMU9jysxWV_aE06SoBFAY_rg3XuwrdiH7SYN_b499Bw-1634128889-0-gqNtZGzNA1CjcnBszQdl */
    display: none;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%;
    height: 250px;
    text-align: center;
  }
  #l-carbon-sidebar-ad a {
    text-decoration: none;
    color: #111;
  }
  #l-carbon-sidebar-ad a:hover {
    color: #111;
  }
  #l-carbon-sidebar-ad span {
    display: block;
    overflow: hidden;
  }
  #l-carbon-sidebar-ad .carbon-img {
    display: block;
    margin: 0 0 8px;
    line-height: 1;
  }
  #l-carbon-sidebar-ad .carbon-img img {
    width: 150px;
    max-width: 150px !important;
    height: auto;
  }
  #l-carbon-sidebar-ad .carbon-text {
    display: block;
    margin-bottom: 8px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
  }
  #l-carbon-sidebar-ad .carbon-wrap a {
    font-size: 14px;
    font-weight: normal;
  }
  #l-carbon-sidebar-ad .carbon-poweredby {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 8px 6px;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff !important;
    background-color: hsl(0deg, 0%, 10%);
  }
}
@media screen {
  #l-carbon-footer-ad {
    /* Based on "Wide + Call To Action" in https://codepen.io/collection/AyEoKk/?cursor=ZD0xJm89MSZwPTEmdj03&__cf_chl_captcha_tk__=pmd_nMU9jysxWV_aE06SoBFAY_rg3XuwrdiH7SYN_b499Bw-1634128889-0-gqNtZGzNA1CjcnBszQdl */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    display: block;
    overflow: hidden;
    max-width: 688px;
    margin: 0 auto 48px;
  }
  #l-carbon-footer-ad span {
    position: relative;
    display: block;
  }
  #l-carbon-footer-ad a {
    color: inherit;
    text-decoration: none;
  }
  #l-carbon-footer-ad a:hover {
    color: inherit;
  }
  #l-carbon-footer-ad .carbon-wrap {
    display: flex;
    align-items: center;
  }
  #l-carbon-footer-ad .carbon-img {
    display: block;
    margin: 0;
    line-height: 1;
  }
  #l-carbon-footer-ad .carbon-imgimg {
    display: block;
  }
  #l-carbon-footer-ad .carbon-text {
    position: relative;
    display: flex;
    margin-bottom: 12px;
    padding: 8px 1em;
    max-width: 500px;
    text-align: left;
    font-size: 16px;
    line-height: 1.4;
    align-items: center;
  }
  #l-carbon-footer-ad .carbon-text:after {
    display: table;
    margin-left: 20px;
    padding: 12px 16px;
    border-radius: 3px;
    background-color: hsl(0deg, 0%, 20%);
    color: #fff;
    content: "Learn More";
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
  }
  #l-carbon-footer-ad .carbon-poweredby {
    position: absolute;
    bottom: 0;
    left: 146px;
    color: #999 !important;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 10px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 759px) {
  #l-carbon-footer-ad .carbon-text:after {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar {
    position: fixed;
    left: 0;
    width: 320px;
    height: 100%;
    background: #262626;
    background: -webkit-linear-gradient(to bottom, #262626, #3B4048);
    background: linear-gradient(to bottom, #262626, #3B4048);
    padding: 0 24px;
    overflow: hidden;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    background: #262626;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar .c-nav-sidebar__cover {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(59, 64, 72, 0.8);
    z-index: 9999;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: a-fade-in;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar .c-nav-sidebar__wrapper {
    display: none !important;
    position: fixed;
    right: 0;
    top: 0;
    width: 320px;
    height: 100vh;
    background: #262626;
    background: -webkit-linear-gradient(to bottom, #262626, #3B4048);
    background: linear-gradient(to bottom, #262626, #3B4048);
    z-index: 10000;
    padding: 78px 24px 30px;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: a-slide-in-right;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar .c-nav-sidebar__nav {
    height: calc(100% - 90px);
    overflow: scroll;
    margin-top: 20px;
  }
}
@media screen {
  .c-nav-sidebar button.c-nav-sidebar__menu-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar button.c-nav-sidebar__menu-toggle {
    display: flex !important;
  }
}
@media screen {
  .c-nav-sidebar button.c-nav-sidebar__menu-toggle svg {
    display: flex;
    align-self: center;
    width: 18px;
    height: 18px;
    fill: #ffffff;
  }
}
@media screen {
  .c-nav-sidebar a.c-nav-sidebar__item {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.0625rem;
    font-weight: 500;
    height: 60px;
    line-height: 60px;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar a.c-nav-sidebar__item {
    height: 54px;
    line-height: 54px;
    font-size: 1.1875rem;
  }
}
@media screen {
  .c-nav-sidebar a.c-nav-sidebar__item:hover {
    padding-left: 4px;
    color: #73859F;
  }
}
@media screen {
  .c-nav-sidebar a.c-nav-sidebar__link--active {
    color: #ffffff;
    background: rgba(115, 133, 159, 0.1);
    border-left: 5px solid #73859F;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar a.c-nav-sidebar__link--active {
    background: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    border-left: 0;
    border-right: 5px solid #73859F;
  }
}
@media screen {
  .c-nav-sidebar a.c-nav-sidebar__link--active:hover {
    padding-left: 24px !important;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar a.c-nav-sidebar__link--active:hover {
    padding-left: 0 !important;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar__logo--mobile-menu {
    display: none;
    position: absolute;
    top: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar__logo--mobile-menu {
    display: block !important;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar__profile {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between;
    background: #393E44;
    padding: 15px 24px 20px;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar__profile:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(115, 133, 159, 0.2);
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar__profile {
    margin-top: 18px;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-message {
    display: block;
    color: #ffffff;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-message {
    font-size: 15px;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-controls {
    text-align: right;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-image img {
    width: 48px;
    height: 48px;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-button {
    padding: 0;
    line-height: 20px;
    height: 20px;
    margin-top: 4px;
    opacity: 0.75;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-button:hover {
    opacity: 1;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-button svg {
    fill: #262626;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar-advert {
    display: flex;
    align-items: center;
    height: calc(100vh - 136px);
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar-advert {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar-advert > div {
    text-align: center;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar-advert > div .c-nav-sidebar-advert__wrapper {
    animation-duration: 0.9s;
    animation-fill-mode: both;
    animation-name: a-fade-in;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar-advert > div .c-nav-sidebar-advert__title {
    font-family: "Bitter", serif;
    font-size: 1.6875em; /* 27/16 */
    color: #ffffff;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar-advert > div .c-nav-sidebar-advert__subtitle {
    color: #ffffff;
    font-size: 0.9375em; /* 15/16 */
    margin-top: 18px;
    opacity: 0.8;
  }
}
@media screen {
  .c-nav-sidebar div.c-nav-sidebar-advert > div .c-nav-sidebar-advert__image {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 160px;
    margin-left: -80px;
    animation-duration: 0.9s;
    animation-fill-mode: both;
    animation-name: a-fade-in-up;
  }
}
@media screen {
  .c-nav-sidebar--article {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px !important;
    height: 100%;
    background: #FAFAFA;
    padding: 0 24px 30px;
    overflow-y: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media screen {
  .c-nav-sidebar--article::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar--article {
    width: 100%;
    height: auto;
    position: relative;
    background: #FAFAFA;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar--article .c-nav-sidebar__wrapper {
    display: none !important;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: #FAFAFA;
    z-index: 10000;
    padding: 78px 24px 30px;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: a-slide-in-right;
  }
}
@media screen {
  .c-nav-sidebar--article .c-nav-sidebar__nav {
    padding-top: 15px;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar--article .c-nav-sidebar__nav {
    height: 100%;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
  }
  .c-nav-sidebar--article .c-nav-sidebar__nav::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar--article .c-nav-sidebar__nav {
    height: calc(100% - 90px);
    overflow: scroll;
    margin-top: 20px;
    padding-left: 2px;
  }
}
@media screen {
  .c-nav-sidebar--article .c-nav-sidebar__nav .c-global-header__logo {
    width: 240px;
    margin-left: -9px;
  }
}
@media screen {
  .c-nav-sidebar--article .c-nav-sidebar__nav .c-global-header__logo .o-header-logo__text {
    opacity: 0 !important;
  }
}
@media screen {
  .c-nav-sidebar--article .o-header-logo__link:hover .o-header-logo__mark {
    fill: #158443 !important;
  }
}
@media screen {
  .c-nav-sidebar--article .c-nav-sidebar__nav-action {
    display: inline-flex;
    position: relative;
    top: 0;
    margin-top: 0;
    padding: 20px 0 0;
  }
}
@media screen {
  .c-nav-sidebar--article .c-nav-sidebar__nav-action .o-button__label--open {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar--article .c-nav-sidebar__nav-action i {
    margin-right: 0;
    margin-left: 4px;
  }
}
@media screen {
  .c-nav-sidebar--article .c-nav-sidebar__title {
    outline: none;
    color: #333333;
    font-family: "Bitter", serif;
    font-weight: 700;
    display: block;
    font-size: 1.125rem;
    line-height: 1.2;
    padding: 1em 45px 0 0;
    position: relative;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    text-decoration: none;
    display: none;
  }
}
@media screen {
  .c-nav-sidebar--article .c-nav-sidebar__title svg {
    position: relative !important;
    left: 0;
    top: 0;
    margin-right: 6px;
    width: 12px;
    height: 12px;
  }
}
@media screen {
  .c-nav-sidebar--article .c-sidebar-navigator__link {
    color: #333333;
  }
}
@media screen {
  .c-nav-sidebar--article .c-sidebar-navigator__link:hover {
    color: #333333;
  }
}
@media screen {
  .c-nav-sidebar--article nav.c-video-player__lessons {
    width: 100%;
  }
}
@media screen {
  .c-nav-sidebar--article nav.c-video-player__lessons .c-video-player__lessons-section {
    display: block;
  }
}
@media screen {
  .c-nav-sidebar--white .c-nav-sidebar--article {
    background: none;
  }
}
@media screen {
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__link:hover .c-sidebar-navigator__indicator:before {
    background: #dbdde0;
  }
}
@media screen {
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__indicator {
    background: #ffffff;
    border: 2px solid #dbdde0;
  }
}
@media screen {
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__indicator:after {
    background: #dbdde0;
  }
}
@media screen {
  .c-nav-sidebar--white .c-nav-sidebar--article .is-active .c-sidebar-navigator__indicator:before {
    background: #dbdde0 !important;
  }
}
@media screen {
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__title {
    color: #333333;
  }
}
@media screen {
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__title:hover {
    color: #158443;
  }
}
@media screen {
  .c-sidebar-navigator {
    position: relative;
    padding-bottom: 30px;
    display: none;
  }
}
@media screen {
  .c-sidebar-navigator li {
    list-style: none;
    margin-top: 16px;
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .c-sidebar-navigator li:last-child .c-sidebar-navigator__indicator:after {
    display: none;
  }
}
@media screen {
  .c-sidebar-navigator li:nth-last-child(2) .c-sidebar-navigator__indicator:after {
    display: none;
  }
}
@media screen {
  .c-sidebar-navigator li a {
    display: flex;
    align-items: flex-start;
    color: #ffffff;
    text-decoration: none;
    position: relative;
  }
}
@media screen {
  .c-sidebar-navigator li a:hover {
    color: #73859F;
  }
}
@media screen {
  .c-sidebar-navigator li a:hover .c-sidebar-navigator__indicator:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 5px;
    left: 5px;
    background: #73859F;
    border-radius: 0.5625rem;
    opacity: 1;
  }
}
@media screen {
  .c-sidebar-navigator li a.c-sidebar-navigator__link.is-active .c-sidebar-navigator__indicator:before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 5px;
    left: 5px;
    background: #73859F;
    border-radius: 0.5625rem;
    opacity: 1;
  }
}
@media screen {
  .c-sidebar-navigator li a.c-sidebar-navigator__link.is-active .c-sidebar-navigator__title {
    color: #158443;
  }
}
@media screen {
  .c-sidebar-navigator li a.c-sidebar-navigator__link--empty {
    display: block;
    height: 20px;
  }
}
@media screen {
  .c-sidebar-navigator li a .c-sidebar-navigator__indicator {
    display: block;
    min-width: 18px;
    min-height: 18px;
    background: none;
    border: 2px solid #DBDDE0;
    border-radius: 50%;
  }
}
@media screen {
  .c-sidebar-navigator li a .c-sidebar-navigator__indicator:before {
    opacity: 0;
    transition: opacity 0.3s;
  }
}
@media screen {
  .c-sidebar-navigator li a .c-sidebar-navigator__indicator:after {
    content: "";
    width: 2px;
    height: calc(100% - 4px);
    position: absolute;
    top: 22px;
    left: 9px;
    margin-left: -1px;
    background: #DBDDE0;
    border-radius: 0.5625rem;
  }
}
@media screen {
  .c-sidebar-navigator li a .c-sidebar-navigator__title {
    padding-left: 12px;
    margin-top: -1px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 80px;
    height: 100%;
    background: #FAFAFA;
    padding: 0 24px 120px;
    overflow: auto;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media screen {
  .c-nav-sidebar-my-interests::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar-my-interests {
    display: none;
    z-index: 999999;
  }
}
@media screen and (max-width: 768px) {
  .c-nav-sidebar-my-interests {
    width: 210px !important;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__cover {
    margin-left: -24px;
    width: calc(100% + 48px);
    height: 72px;
    background: #157CB8;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .o-header-logo {
    width: 240px;
    margin-top: 11px;
    margin-bottom: 5px;
    margin-left: -9px;
    position: relative;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar-my-interests .o-header-logo {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .o-header-logo .o-header-logo__link:hover .o-header-logo__mark {
    fill: #158443;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .o-header-logo .o-header-logo__mark {
    width: 50px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .o-header-logo .o-header-logo__text {
    visibility: hidden;
    opacity: 0;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__menu-toggle--opener {
    display: flex;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__menu-toggle--closer {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .o-button-sidebar {
    position: relative;
    margin-top: 15px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .o-button-sidebar svg {
    margin-left: -12.5px;
    margin-top: -12.5px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__wrapper {
    padding-bottom: 30px;
    display: none;
  }
}
@media screen {
  .c-nav-sidebar-my-interests button.c-nav-sidebar__menu-toggle {
    position: absolute;
    top: 15px;
    left: 75px;
    display: none;
    border-radius: 100px;
    background: #434A53;
    width: 48px;
    height: 48px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests button.c-nav-sidebar__menu-toggle svg {
    display: flex;
    align-self: center;
    width: 20px;
    height: 20px;
    fill: #ffffff;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__nav-action {
    border-bottom: 1px solid #DBDDE0;
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    padding: 20px 24px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__section {
    display: flex;
    align-items: center;
    height: 50px;
    cursor: initial;
    position: relative;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__section:before {
    content: "";
    position: absolute;
    top: 0;
    left: -24px;
    width: calc(100% + 48px);
    height: 1px;
    background: #DBDDE0;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__section svg {
    width: 17px;
    height: 17px;
    fill: #333333;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-nav-sidebar__section .c-nav-sidebar__section-svg--large {
    width: 19px;
    height: 19px;
    fill: #333333;
    margin-right: -1px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-sidebar-navigator__link {
    color: #333333;
  }
}
@media screen {
  .c-nav-sidebar-my-interests .c-sidebar-navigator__link:hover {
    color: #333333;
  }
}
@media screen {
  .c-nav-sidebar-my-interests a.c-nav-sidebar__item {
    display: block;
    color: #333333;
    text-decoration: none;
    font-size: 0.875rem; /* 14/16 */
    font-weight: 500;
    height: 40px;
    line-height: 40px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests a.c-nav-sidebar__item:hover {
    padding-left: 4px;
    color: #73859F;
  }
}
@media screen {
  .c-nav-sidebar-my-interests a.c-nav-sidebar__item:last-of-type {
    margin-bottom: 10px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests a.c-nav-sidebar__link--active {
    color: #333333;
    background: #158443;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests a.c-nav-sidebar__link--active:hover {
    color: #ffffff;
    padding-left: 24px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests div.c-nav-sidebar__logo--mobile-menu {
    display: none;
    position: absolute;
    top: 0;
  }
}
@media screen {
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 320px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    background: #393E44;
    padding: 15px 24px 20px;
  }
}
@media screen {
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(115, 133, 159, 0.2);
  }
}
@media screen {
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-message {
    display: block;
    color: #ffffff;
  }
}
@media screen {
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-controls {
    text-align: right;
  }
}
@media screen {
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-button {
    padding: 0;
    line-height: 20px;
    height: 20px;
    margin-top: 4px;
    opacity: 0.75;
  }
}
@media screen {
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-button:hover {
    opacity: 1;
  }
}
@media screen {
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-button svg {
    fill: #262626;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--close {
    position: fixed;
    left: 256px;
    top: 12px;
    display: flex;
    z-index: 9999999;
  }
}
@media screen and (max-width: 768px) {
  .c-nav-sidebar-my-interests--close {
    left: 186px;
  }
}

@media screen {
  .c-nav-sidebar-admin--open .c-nav-sidebar__wrapper {
    display: block !important;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media screen {
  .c-nav-sidebar-admin--open .c-nav-sidebar__wrapper::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (min-width: 1200px) {
  .c-nav-sidebar-admin--open .c-nav-sidebar__wrapper {
    overflow: initial;
  }
}
@media screen {
  .c-nav-sidebar-admin--open .c-nav-sidebar__wrapper .c-nav-sidebar__link--active {
    border-right: none;
  }
}
@media screen {
  .l-admin--sidebar-open .c-nav-sidebar--book {
    display: block;
  }
}
@media screen and (max-width: 992px) {
  .l-admin--sidebar-open .c-nav-sidebar--book {
    overflow: initial;
  }
}
@media screen {
  .l-admin--sidebar-open .o-button-chapter {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar--book {
    z-index: 1;
    display: none;
    background: #FAFAFA;
  }
}
@media screen {
  .c-nav-sidebar--book .c-video-player__lessons {
    padding-top: 72px;
    background: #FAFAFA;
    animation: none;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar--book .c-video-player__lessons {
    padding-top: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar--book .c-nav-sidebar__wrapper {
    background: #FAFAFA;
    animation: none;
  }
}
@media screen {
  .c-nav-sidebar--book .c-video-player__lessons-section {
    border-color: #DBDDE0 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-video-player__lessons-section:last-child {
    padding-bottom: 120px;
  }
}
@media screen {
  .c-nav-sidebar--book .c-video-player__lessons-header svg {
    fill: #A7ADB4 !important;
    opacity: 1 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-video-player__lessons-title {
    color: #333333 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-video-player__lessons-title a {
    color: #333333 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-video-player__lessons-title a:hover {
    text-decoration: underline !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-video-player__lessons-sum {
    color: #6E7687 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list li a {
    color: #333333;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list li a:hover {
    color: #333333;
    text-decoration: underline;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list--linked li:before {
    background: #ffffff;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list--linked li:after {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list__item--complete {
    text-decoration: none !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list__item--complete:before {
    background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png) !important;
    background-size: cover;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list__item--complete a {
    color: #333333 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list__item--complete:hover {
    color: #333333;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list__item--complete .c-box-list__item-scroll-to:hover {
    color: #333333 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list__item--complete + .c-sidebar-navigator:before {
    background: #158443;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list__item--complete + nav:before {
    background: #158443;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list .c-box-list__item--active:before {
    background-image: url(/assets/svg-icons/chevron--black-454278cfec6d2fd7013bd089533ed0fa999a8811f872991b37387fc67a6a5144.png);
    background-size: cover;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list__item-scroll-to:hover {
    color: #333333 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-box-list .c-box-list__item--locked:before {
    background-image: url(/assets/svg-icons/padlock--black-700be4229af004b19bd24e2e8164e393e38dfe8e1b8946cb9a135e7e4f54556f.png) !important;
    background-size: cover;
  }
}
@media screen {
  .c-nav-sidebar--book .c-sidebar-navigator {
    padding-bottom: 0;
    position: relative;
  }
}
@media screen {
  .c-nav-sidebar--book .c-sidebar-navigator:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 9px;
    width: 2px;
    height: calc(100% + 18px);
    background: #DBDDE0;
  }
}
@media screen {
  .c-nav-sidebar--book .c-sidebar-navigator li {
    padding-left: 20px;
    margin-top: 12px !important;
    font-size: 0.875rem; /* 14/16 */
    white-space: normal !important;
    text-overflow: unset !important;
    overflow-x: visible !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-sidebar-navigator li:before {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar--book .c-sidebar-navigator li a {
    white-space: normal !important;
    font-weight: 400;
    color: #6E7687 !important;
  }
}
@media screen {
  .c-nav-sidebar--book .c-sidebar-navigator li a:hover {
    text-decoration: underline;
  }
}
@media screen {
  .c-nav-sidebar--book .c-sidebar-navigator .is-active {
    text-decoration: underline;
  }
}
@media screen {
  .c-nav-sidebar--book .c-sidebar-navigator .c-sidebar-navigator__indicator {
    display: none;
  }
}
@media screen {
  .s_show_mobile_menu .c-nav-sidebar__wrapper {
    display: block !important;
  }
}
@media screen {
  .s_show_mobile_menu .c-nav-sidebar__cover {
    display: block !important;
  }
}
@media screen {
  header#c-global-header {
    height: 72px;
    background: #333333;
    padding: 0 25px 0 15px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 999999;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header {
    z-index: 99999;
  }
}
@media screen {
  header#c-global-header a:focus:not(:focus-visible), header#c-global-header button:focus:not(:focus-visible) {
    outline: none;
  }
}
@media screen {
  header#c-global-header a:focus-visible, header#c-global-header button:focus-visible {
    outline: 1px dotted grey;
  }
}
@media screen {
  header#c-global-header details[open] summary::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    cursor: default;
  }
}
@media screen {
  header#c-global-header details summary::marker {
    display: none;
  }
}
@media screen {
  header#c-global-header details summary::-webkit-details-marker {
    display: none;
  }
}
@media screen {
  header#c-global-header summary {
    list-style: none;
  }
}
@media screen {
  header#c-global-header .c-global-header__logo {
    width: 240px;
    height: 50px;
    margin: 0;
    z-index: 99999;
  }
}
@media screen and (max-width: 1144px) {
  header#c-global-header .c-global-header__logo {
    width: 50px;
  }
}
@media screen {
  header#c-global-header .c-global-header__logo .o-header-logo__mark {
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 1144px) {
  header#c-global-header .c-global-header__logo svg.o-header-logo__text {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav {
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-top: 72px;
    padding-bottom: 36px;
    display: none;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav .u-toggle-dropdown .o-button--dark {
    display: none;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > div.c-global-header__logo {
    display: none;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > div.o-button-menu {
    display: none;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav.c-global-header__nav--show-menu {
    display: block !important;
    z-index: 999999;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav.c-global-header__nav--show-menu > div.c-global-header__logo {
    display: block;
    position: absolute;
    top: 11px;
    margin-left: 15px;
  }
  header#c-global-header .c-global-header__nav.c-global-header__nav--show-menu > div.o-button-menu {
    display: flex;
    position: absolute;
    top: 12px;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > ul {
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul {
    display: block;
    padding: 0 20px;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > ul > li {
    font-size: 0.9375rem;
    font-weight: 600 !important;
    color: #ffffff;
    margin-left: 30px;
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul > li {
    margin-left: 0;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > ul > li > a {
    font-weight: 600 !important;
    text-decoration: none;
    color: #ffffff;
    transition: border 0s;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > ul > li > a:hover {
    border-bottom: 2px solid #73859F;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul > li > a {
    height: 54px;
    line-height: 54px;
    font-family: "Bitter";
    font-size: 1.125rem; /* 18/16 */
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > ul > li > a.c-global-header__nav-link--active {
    border-bottom: 2px solid #73859F;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul > li > a.c-global-header__nav-link--active {
    border: 0;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > ul > li a {
    text-decoration: none;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav > ul > li > span {
    font-weight: 600 !important;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile {
    margin-top: 30px;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile li {
    display: flex;
    font-family: "Bitter", serif;
    font-size: 1.0625rem; /* 17/16 */
    font-weight: 600 !important;
    height: 54px;
    line-height: 54px;
    position: relative;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile li a {
    margin-left: 12px;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile i.o-dropdown-menu__icon--night-mode svg {
    top: 3px;
    position: relative;
    width: 18px;
    height: 18px;
    fill: #ffffff;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile .o-checkbox {
    top: 50%;
    margin-top: -13px;
    right: 0;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile .o-checkbox .checkbox__indicator {
    background: none;
    border: 2px solid rgba(115, 133, 159, 0.75);
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .c-global-header__search {
    font-weight: 600;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .c-global-header__search.c-global-header__search--active span:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #73859F;
    bottom: 1px;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav .c-global-header__search {
    background: #333333;
    height: 48px;
    border-radius: 100px;
    width: 100%;
    margin-top: 10px;
  }
  header#c-global-header .c-global-header__nav .c-global-header__search .l-button__search {
    left: 20px;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .c-global-header__search span {
    position: relative;
    text-decoration: none;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav .c-global-header__search span:hover:before {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  header#c-global-header .c-global-header__nav .c-global-header__search span {
    padding-left: 24px;
  }
}
@media screen {
  header#c-global-header .c-global-header__nav .c-global-header__search span:hover:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #73859F;
    bottom: 1px;
  }
}
@media screen {
  header#c-global-header .c-global-header__user {
    margin-left: auto;
    display: flex;
    z-index: 999;
  }
}
@media screen {
  header#c-global-header .c-global-header__user a, header#c-global-header .c-global-header__user button {
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    margin-left: 15px;
  }
}
@media screen {
  header#c-global-header .c-global-header__user a.c-global-header__user-login, header#c-global-header .c-global-header__user button.c-global-header__user-login {
    transition: border 0s;
    line-height: 48px;
  }
}
@media screen {
  header#c-global-header .c-global-header__user a.c-global-header__user-login:hover, header#c-global-header .c-global-header__user button.c-global-header__user-login:hover {
    border-bottom: 2px solid #73859F;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .l-button__nub {
    top: 0;
    margin-left: 2px;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .c-global-header__action {
    width: 126px;
  }
}
@media screen and (max-width: 360px) {
  header#c-global-header .c-global-header__user .c-global-header__action {
    display: none;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .c-global-header__action a {
    width: 126px;
    height: 126px;
    border-radius: 100px;
    background: #158443;
    display: flex;
    align-items: center;
    font-family: "Bitter", serif;
    text-align: center;
    line-height: 1.25;
    position: absolute;
    top: -64px;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .c-global-header__action a:hover {
    background: #17914a;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .c-global-header__action a span {
    position: relative;
    top: 25px;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .c-global-header__action a span:hover {
    text-decoration: none;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .c-global-header__user-control {
    display: flex;
    min-height: 100%;
    align-items: center;
    margin: 0 21px 0 0;
  }
}
@media screen and (max-width: 992px) {
  header#c-global-header .c-global-header__user .c-global-header__user-control {
    display: none;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .c-global-header__user-control a {
    display: flex;
    min-height: 100%;
    align-items: center;
    position: relative;
  }
}
@media screen {
  header#c-global-header .c-global-header__user .c-global-header__user-control a .o-tooltip {
    top: 42px;
  }
}
@media screen {
  .c-dropdown-menu--expanded {
    background-color: #222222;
    width: 780px;
    left: 0;
    padding: 0;
    border-radius: 9px;
    overflow: hidden;
  }
}
@media screen and (max-width: 992px) {
  .c-dropdown-menu--expanded {
    left: 0;
    margin-left: 0;
    width: 600px;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded {
    padding-top: 0;
  }
}
@media screen {
  .c-dropdown-menu--expanded:before {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-dropdown-menu--expanded:before {
    left: 50px;
  }
}
@media screen and (max-width: 600px) {
  .c-dropdown-menu--expanded:before {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded {
    width: 100%;
    position: relative;
    left: 0;
    margin-left: 0;
    background: none;
    box-shadow: none;
    display: block !important;
    padding-bottom: 0;
  }
}
@media screen {
  .c-dropdown-menu--expanded > li {
    display: block;
    height: auto;
    padding: 0;
  }
}
@media screen and (max-width: 600px) {
  .c-dropdown-menu--expanded li {
    padding: 0;
  }
  .c-dropdown-menu--expanded li a {
    color: #ffffff !important;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper {
    padding: 30px;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper {
    padding: 12px 0;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 18px;
  }
}
@media screen and (max-width: 992px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul {
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul {
    grid-template-columns: 1fr;
    grid-row-gap: 18px;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li {
    border-right: 1px solid rgba(50, 54, 58, 0.5);
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li {
    border: 0;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li:last-child {
    border-right: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li:nth-of-type(3) {
    border-right: 0;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower {
    background-color: #1a1a1a;
    padding: 8px 30px;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower {
    display: none;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul {
    display: flex;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li {
    padding: 0;
    margin-right: 40px;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li:last-child {
    margin-right: 0;
    margin-left: auto;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.8125rem !important; /* 13/16 */
    font-weight: 400 !important;
    color: #DBDDE0 !important;
    display: flex;
    align-items: center;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li a svg {
    margin-right: 10px;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li a:hover {
    text-decoration: underline !important;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established {
    height: auto;
    position: relative;
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:before {
    content: "";
    width: calc(100% - 48px);
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 24px;
    background: #32363A;
    opacity: 0.5;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:before {
    display: none;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:last-child:before {
    display: none;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:hover {
    background: #32363A;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:hover {
    background: none;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:hover .l-button__svg-arrow-nav {
    transform: translateX(3px);
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established a {
    display: flex;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span {
    display: block;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__lead {
    font-size: 1rem; /* 18/16 */
    color: #A7ADB4;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__title {
    font-size: 1rem !important; /* 18/16 */
    color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__title {
    font-size: 1.125rem !important; /* 18/16 */
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__subtitle {
    margin-top: 0;
    color: #A7ADB4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 0.8125rem; /* 13/16 */
    font-weight: 400 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__subtitle {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen and (max-width: 600px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__subtitle {
    color: #A7ADB4;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established i {
    width: 48px;
    height: 48px;
    margin-right: 22px;
  }
}
@media screen and (max-width: 600px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established i {
    display: none;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established--no-hover:hover {
    background: none;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__established--no-hover:before {
    display: none;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li {
    height: auto;
    padding: 0;
    margin-top: 8px;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li:first-child {
    margin-top: 2px;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li:last-child {
    margin-bottom: 4px;
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li a {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: white !important;
    font-size: 0.8125rem !important;
    font-weight: 400;
  }
}
@media screen and (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li a {
    font-size: 0.875rem !important; /* 14/16 */
  }
}
@media screen {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li a:hover {
    text-decoration: underline !important;
  }
}
@media screen {
  .c-dropdown-menu--expanded-tutorials {
    width: 320px;
    padding: 12px 0;
  }
}
@media screen {
  .c-dropdown-menu--expanded-tutorials li {
    height: auto;
    padding: 12px 24px;
  }
}
@media screen {
  .l-dropdown-menu-user {
    right: -22px;
    top: 42px;
  }
}
@media screen and (max-width: 600px) {
  .l-dropdown-menu-user {
    top: 52px;
    left: -210px;
    width: 270px;
  }
  .l-dropdown-menu-user:before {
    display: none;
  }
}
@media screen and (max-width: 360px) {
  .l-dropdown-menu-user {
    left: auto;
    right: 10px;
  }
}
@media screen {
  .l-dropdown-menu-user:before {
    left: auto;
    right: 45px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5625rem;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon svg {
    fill: #ffffff;
    width: 18px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--admin {
    background: #3B4048;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--admin svg {
    width: 20px;
    height: 20px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--subscription {
    background: #3268a6;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--subscription svg {
    position: relative;
    width: 21px;
    height: 21px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--account {
    background: #158443;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--account svg {
    width: 26px;
    height: 26px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--profile {
    background: #2EA664;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--profile svg {
    height: 25px;
    width: 30px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--products {
    background: #FD7401;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--products svg {
    width: 12px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--bookmarks {
    background: #585E66;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--bookmarks svg {
    width: 12px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--newsletter {
    background: #157CB8;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--newsletter svg {
    height: 20px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--support {
    background: #687BAD;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--support svg {
    width: 9px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--forums {
    background: #41AEA4;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--forums svg {
    width: 18px;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--logout {
    background: #CF3B2B;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--logout svg {
    width: 16px;
    height: 16px;
    transform: rotate(-45deg);
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--night-mode {
    background: #333333;
  }
}
@media screen {
  .l-dropdown-menu-user i.o-dropdown-menu__icon--night-mode svg {
    width: 16px;
    height: 20px;
  }
}
@media screen {
  .l-dropdown-menu-user .o-checkbox {
    right: 24px;
  }
}
@media screen and (max-width: 600px) {
  .l-dropdown-menu-user .o-checkbox {
    display: none;
  }
}

@media screen {
  .l-dropdown-menu-user--mini {
    right: -30px;
  }
}
@media screen {
  nav#c-pillar-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.05);
    padding: 0 20px;
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 768px) {
  nav#c-pillar-navigation {
    padding: 0;
  }
}
@media screen {
  nav#c-pillar-navigation > div {
    width: 100%;
  }
}
@media screen {
  nav#c-pillar-navigation ul {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: scroll;
  }
}
@media screen and (max-width: 600px) {
  nav#c-pillar-navigation ul {
    justify-content: flex-start;
  }
}
@media screen {
  nav#c-pillar-navigation ul li {
    padding: 0 15px;
    white-space: nowrap;
  }
}
@media screen and (max-width: 768px) {
  nav#c-pillar-navigation ul li:first-child {
    padding-left: 35px;
  }
}
@media screen and (max-width: 768px) {
  nav#c-pillar-navigation ul li:last-child {
    padding-right: 30px;
  }
}
@media screen {
  nav#c-pillar-navigation ul li a {
    font-size: 0.9375rem; /* 15/16 */
    font-weight: 600;
    color: #333333;
    text-decoration: none;
  }
}
@media screen {
  nav#c-pillar-navigation ul li a:hover {
    color: #158443;
  }
}
@media screen {
  nav#c-pillar-navigation ul li a.active {
    color: #158443;
  }
}
@media screen {
  footer#c-global-footer {
    background-color: #333333;
    padding: 30px;
    position: relative;
    z-index: 9999999;
    overflow: hidden;
  }
}
@media screen {
  footer#c-global-footer:before {
    content: "";
    position: absolute;
    top: -80px;
    right: 0;
    z-index: 0;
    width: 200px;
    height: 327px;
    background-image: url(/assets/artwork/devices-outline-06aea0bcb7c18d3c7df5a7abdc003d44a2e6925a3569cec2b23c230832283d8c.svg);
    background-size: 200px;
    background-repeat: no-repeat;
    opacity: 0.3;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
    grid-column-gap: 24px;
    position: relative;
  }
}
@media screen and (max-width: 1200px) {
  footer#c-global-footer .c-global-footer__wrapper {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 1080px) {
  footer#c-global-footer .c-global-footer__wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "logo logo logo logo";
  }
}
@media screen and (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "logo logo";
  }
}
@media screen and (max-width: 600px) {
  footer#c-global-footer .c-global-footer__wrapper {
    grid-template-columns: 1fr;
    grid-template-areas: "logo";
  }
}
@media screen and (max-width: 1080px) {
  footer#c-global-footer .c-global-footer__wrapper .c-global-footer__logo {
    grid-area: logo;
    max-width: 25%;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper .c-global-footer__logo {
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper > div {
    padding-right: 0;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div .o-header-logo {
    width: 240px;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div .o-header-logo .o-header-logo__mark {
    position: relative;
    width: 40px;
    fill: #ffffff;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div h4 {
    color: #ffffff;
    font-size: 1rem; /* 18/16 */
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div p {
    color: #A7ADB4;
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen and (max-width: 1200px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 992px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places {
    grid-template-columns: 1fr;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places li {
    margin-bottom: 10px;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places li a {
    transition: border 0s;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places li a:hover {
    border-bottom: 2px solid #73859F;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__newsletter-text img {
    max-width: 60px;
  }
}
@media screen and (max-width: 992px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__newsletter-text img {
    display: none;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div ul li a {
    color: #A7ADB4;
    font-size: 0.875rem;
    text-decoration: none;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div input {
    width: 100%;
    margin-top: 21px;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__wrapper > div .o-icon-button--tiny {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -12px;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__copyright {
    max-width: 1380px;
    margin: 50px auto 0;
    align-self: flex-end;
    position: relative;
    z-index: 1;
    border-top: 1px solid #434A53;
    padding-top: 30px;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__copyright ul {
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  footer#c-global-footer .c-global-footer__copyright ul {
    display: block;
    text-align: center;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__copyright ul li, footer#c-global-footer .c-global-footer__copyright ul a {
    font-size: 0.875rem; /* 14/16 */
    color: #A7ADB4;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__copyright ul a {
    text-decoration: none;
    transition: border 0s;
  }
}
@media screen {
  footer#c-global-footer .c-global-footer__copyright ul a:hover {
    border-bottom: 2px solid #73859F;
  }
}
@media screen and (max-width: 768px) {
  footer#c-global-footer .c-global-footer__copyright ul a {
    margin-top: 6px;
  }
}

@media screen {
  .c-tabs {
    display: flex;
    align-items: center;
    height: 54px;
    border-bottom: 2px solid #DBDDE0;
    width: 100%;
  }
}
@media screen {
  .c-tabs li {
    display: flex;
    align-items: center;
    font-size: 0.9375em; /* 15/16 */
    font-weight: 600;
    height: 100%;
    margin: 0 12px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
  }
}
@media screen {
  .c-tabs li:first-child {
    margin-left: 0;
  }
}
@media screen {
  .c-tabs li.c-tabs--active:before {
    content: "";
    bottom: -2px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #157CB8;
  }
}
@media screen {
  .c-tabs li.c-tabs--title {
    font-family: "Bitter", serif;
    font-size: 2.25rem; /* 36/16 */
    font-weight: 700;
    letter-spacing: -0.5px;
    cursor: inherit;
  }
}
@media screen and (max-width: 768px) {
  .c-tabs li.c-tabs--title {
    display: none;
  }
}
@media screen {
  .c-tabs li.c-tabs--title:after {
    content: "";
    position: absolute;
    width: calc(100% + 30px);
    height: 2px;
    left: 0;
    bottom: -2px;
    background: #ffffff;
  }
}
@media screen {
  .c-tabs-wrapper {
    background: #333333;
    top: 0;
    z-index: 999;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media screen {
  .c-tabs-wrapper::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen {
  .c-tabs--emphasis {
    border-bottom: 0;
    height: 80px;
    position: relative;
    z-index: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-tabs--emphasis {
    width: calc(100% + 30px);
  }
}
@media screen {
  .c-tabs--emphasis ul {
    width: 100%;
    padding-left: 20px !important;
  }
}
@media screen {
  .c-tabs--emphasis .l-overflow-x {
    scrollbar-width: none;
  }
}
@media screen {
  .c-tabs--emphasis > li > ul > li {
    margin: 0;
  }
}
@media screen {
  .c-tabs--emphasis li {
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.25px;
  }
}
@media screen {
  .c-tabs--emphasis li span {
    font-weight: 500;
  }
}
@media screen {
  .c-tabs--emphasis li a {
    height: 44px;
    line-height: 44px;
    text-decoration: none;
    color: #ffffff;
    padding: 0 20px;
    z-index: 1;
  }
}
@media screen {
  .c-tabs--emphasis li a svg {
    fill: #ffffff;
  }
}
@media screen {
  .c-tabs--emphasis li .c-tabs__link--start {
    background: #3268A6;
    border-radius: 50px;
    margin-right: 20px;
  }
}
@media screen {
  .c-tabs--emphasis li .c-tabs__link--start:hover {
    background: #366fb2;
  }
}
@media screen {
  .c-tabs--emphasis li.c-tabs--active a {
    background: #158443;
    border-radius: 50px;
  }
}
@media screen {
  .c-tabs--dark {
    border-color: #434A53;
  }
}
@media screen {
  .c-tabs-navigation {
    background: #222222;
    display: flex;
    align-items: center;
    height: 72px;
    width: 100%;
    padding: 0 27px;
    overflow: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media screen {
  .c-tabs-navigation::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen {
  .c-tabs-navigation::-webkit-scrollbar {
    display: none;
  }
}
@media screen {
  .c-tabs-navigation li {
    margin-left: 24px;
  }
}
@media screen {
  .c-tabs-navigation li:first-child {
    margin-left: 0;
  }
}
@media screen {
  .c-tabs-navigation li a {
    color: #A7ADB4;
    font-size: 0.9375rem; /* 15/16 */
    font-weight: 600;
    text-decoration: none;
  }
}
@media screen {
  .c-tabs-navigation li.c-tabs--active a {
    color: #ffffff;
    position: relative;
  }
}
@media screen {
  .c-tabs-navigation li.c-tabs--active a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -27px;
    width: 100%;
    height: 3px;
    background: #158443;
  }
}
@media screen {
  .c-mobile-navigator {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #FAFAFA;
    grid-template-columns: 1fr 1fr 1fr;
    z-index: 9999;
    display: none;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
}
@media screen and (max-width: 1023px) {
  .c-mobile-navigator {
    display: grid;
  }
}
@media screen {
  .c-mobile-navigator li {
    text-align: center;
  }
}
@media screen {
  .c-mobile-navigator li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
@media screen {
  .c-mobile-navigator li a:hover {
    background: #DBDDE0;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show {
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 280px;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar-my-interests--show {
    display: none !important;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show .o-header-logo__text {
    visibility: visible !important;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show .c-nav-sidebar__menu-toggle--opener {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show .c-nav-sidebar__menu-toggle--closer {
    display: flex;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show .c-nav-sidebar__wrapper {
    display: block;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show-mobile {
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 280px;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar-my-interests--show-mobile {
    display: block !important;
  }
}
@media screen and (min-width: 992px) {
  .c-nav-sidebar-my-interests--show-mobile {
    display: block !important;
    width: 80px;
  }
  .c-nav-sidebar-my-interests--show-mobile .o-header-logo__text {
    visibility: hidden !important;
  }
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__wrapper {
    display: none !important;
  }
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__menu-toggle--closer {
    display: none !important;
  }
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__menu-toggle--opener {
    display: flex !important;
  }
}
@media screen and (max-width: 992px) {
  .c-nav-sidebar-my-interests--show-mobile {
    display: flex !important;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show-mobile .o-header-logo__text {
    visibility: visible !important;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__menu-toggle--opener {
    display: none;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__menu-toggle--closer {
    display: flex;
  }
}
@media screen {
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__wrapper {
    display: block;
  }
}
@media screen {
  .c-book-header {
    background: #ffffff !important;
    justify-content: space-between;
    position: sticky !important;
    top: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-book-header {
    position: relative !important;
  }
}
@media screen and (max-width: 768px) {
  .c-book-header {
    justify-content: unset;
  }
}
@media screen {
  .c-book-header .c-global-header__logo {
    width: 50px !important;
  }
}
@media screen {
  .c-book-header .c-global-header__logo .o-header-logo__link:hover svg {
    fill: #158443 !important;
  }
}
@media screen {
  .c-book-header .o-profile-pic--small + i svg {
    fill: #959DA5;
  }
}
@media screen and (max-width: 768px) {
  .c-book-header .c-book-header__chapter-intro {
    display: block;
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .c-book-header .c-book-header__chapter-intro a, .c-book-header .c-book-header__chapter-intro span {
    display: block;
  }
}
@media screen {
  .c-book-header .c-book-header__chapter-title {
    display: inline-block;
    line-height: 1.25;
    display: flex !important;
    margin-right: -110px;
  }
}
@media screen and (max-width: 1080px) {
  .c-book-header .c-book-header__chapter-title {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-book-header .c-book-header__chapter-title {
    padding-right: 30px;
  }
}
@media screen and (max-width: 600px) {
  .c-book-header .c-global-header__nav {
    position: relative !important;
    display: block !important;
    background: none !important;
    overflow: visible !important;
    padding: 0 !important;
    text-align: center;
  }
}
@media screen and (max-width: 600px) {
  .c-book-header .c-global-header__nav ul {
    width: 100%;
  }
}
@media screen {
  .c-book-header .c-global-header__nav ul li {
    margin-left: 18px !important;
  }
}
@media screen {
  .c-book-header .c-global-header__user {
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-book-header .c-global-header__user {
    margin-left: auto !important;
  }
}
@media screen and (max-width: 600px) {
  .c-book-header .c-global-header__user .c-global-header__action {
    display: none;
  }
}
@media screen {
  .c-book-header .login-link {
    color: #959DA5 !important;
  }
}
@media screen {
  .c-mobile-navigator--book {
    background: #FAFAFA;
  }
}
@media screen {
  .c-mobile-navigator--book a:hover {
    background: #DBDDE0 !important;
  }
}
@media screen {
  .c-paginator a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18/16 */
    height: 72px;
    line-height: 72px;
    text-decoration: none;
    text-align: center;
    color: #333333;
    cursor: pointer;
  }
}
@media screen {
  .c-paginator a:hover {
    background: #F5F8FB;
  }
}
@media screen {
  .c-paginator a span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media screen {
  .c-paginator a svg {
    width: 17px;
    height: 15px;
    fill: #A7ADB4;
  }
}
@media screen {
  .c-paginator .c-paginator__back:hover svg {
    transform: translateX(-5px);
  }
}
@media screen {
  .c-paginator .c-paginator__back span, .c-paginator .c-paginator__back svg {
    margin-right: auto;
    margin-right: auto;
  }
}
@media screen {
  .c-paginator .c-paginator__back span {
    margin-left: -41px;
  }
}
@media screen {
  .c-paginator .c-paginator__back svg {
    transition: all 0.25s;
    margin-left: 24px;
  }
}
@media screen {
  .c-paginator .c-paginator__forward:hover svg {
    transform: translateX(5px);
  }
}
@media screen {
  .c-paginator .c-paginator__forward span, .c-paginator .c-paginator__forward svg {
    margin-left: auto;
    margin-left: auto;
  }
}
@media screen {
  .c-paginator .c-paginator__forward span {
    margin-right: -41px;
  }
}
@media screen {
  .c-paginator .c-paginator__forward svg {
    transition: all 0.25s;
    margin-right: 24px;
  }
}
@media screen {
  .c-paginator .c-paginator__pages {
    display: flex;
  }
}
@media screen {
  .c-paginator .c-paginator__pages .c-paginator__pages--active {
    cursor: default;
    color: #A7ADB4;
    text-decoration: none;
  }
}
@media screen {
  .c-paginator .c-paginator__pages a {
    color: #158443;
    text-decoration: underline;
    margin: 0 8px;
  }
}
@media screen {
  .c-paginator--no-hover a:hover {
    background: none;
  }
}
@media screen {
  .c-notification-badge {
    position: fixed;
    z-index: 9999999;
    top: 36px;
    right: 36px;
    width: 320px;
    background: #ffffff;
    text-align: center;
    padding: 24px 0 30px;
    border-radius: 0.5625rem;
    box-shadow: 0 2px 24px 0 rgba(55, 55, 55, 0.1);
    animation: a-scale-in 1s;
  }
}
@media screen and (max-width: 992px) {
  .c-notification-badge {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: none;
  }
}
@media screen and (max-width: 600px) {
  .c-notification-badge {
    width: 90%;
  }
}
@media screen {
  .c-notification-badge .c-notification-badge__close {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    border-radius: 0.5625rem;
    transition: background-color 0.5s;
  }
  .c-notification-badge .c-notification-badge__close:hover {
    background-color: #EFF3F6;
  }
  .c-notification-badge .c-notification-badge__close svg {
    width: 12px;
    height: 12px;
    fill: #333333;
  }
}
@media screen {
  .c-notification-badge img {
    min-height: 120px;
    width: 120px;
  }
}
@media screen {
  .c-notification-badge p {
    font-family: "Bitter", serif;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.125rem; /* 18/16 */
  }
}
@media screen {
  .c-notification-badge a {
    color: #6E7687;
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .c-form__section-title {
    width: 100%;
    font-size: 1.1875rem;
    font-family: "Bitter", serif;
    border-top: 1px solid #EFF3F6;
    padding-top: 30px;
    padding-bottom: 20px;
    margin-top: 16px;
  }
  .c-form__section-title:first-child {
    padding-top: 0;
    border-top: 0;
    margin-top: 0;
  }
}
@media screen {
  .c-form__info-cta {
    display: grid;
    grid-template-columns: 1fr auto;
  }
}
@media screen and (max-width: 768px) {
  .c-form__info-cta {
    display: block !important;
  }
}
@media screen {
  .c-form__info-cta p {
    font-size: 1rem;
    color: #6E7687;
    padding-right: 20px;
  }
}
@media screen {
  .c-form__info-cta a {
    white-space: nowrap;
    color: #158443;
  }
}
@media screen {
  .c-form__upload-photo {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .c-form__upload-photo figure.c-form__upload-photo-image .o-profile-pic {
    display: block;
    margin: 0 auto;
  }
  .c-form__upload-photo [class*=button]:not([class*=button__]) {
    margin-top: 18px;
  }
  .c-form__upload-photo p {
    font-size: 0.9375rem;
    color: #6E7687;
    margin-top: 18px;
  }
}
@media screen {
  .c-login-form .o-input {
    width: 100%;
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 992px) {
  .c-login-form > .l-fill-col {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-login-form > .l-form-col {
    width: 100%;
  }
}
@media screen {
  .c-login-form__wrapper {
    max-width: 360px;
    margin: 0 auto;
    padding: 120px 0;
  }
}
@media screen {
  .c-login-form__header {
    display: flex;
    align-items: baseline;
  }
  .c-login-form__header h3 {
    flex-grow: 1;
  }
}
@media screen {
  .c-login-form__form .form__validation--error {
    position: relative;
    top: -12px;
  }
}
@media screen {
  .c-login-form__terms {
    font-size: 0.875rem; /* 14/16 */
    color: #959DA5;
  }
  .c-login-form__terms a {
    color: #158443;
  }
}
@media screen {
  .c-login-form__copy {
    font-size: 0.9375rem; /* 15/16 */
    color: #959DA5;
  }
}
@media screen {
  .c-login-form__links {
    font-family: "Bitter", serif;
    font-weight: 500;
    font-size: 0.9375rem; /* 15/16 */
    color: #158443;
    text-decoration: underline;
    cursor: pointer;
  }
}
@media screen {
  .c-login-form__newsletter .form__validation--error {
    top: 3px;
    left: 32px;
  }
}
@media screen {
  .c-login-form__newsletter-message {
    display: block;
    color: #959DA5;
    font-size: 0.9375rem; /* 15/16 */
    padding-left: 32px;
  }
  .c-login-form__newsletter-message a {
    color: #158443;
  }
}
@media screen {
  .c-single-input-form {
    position: relative;
  }
  .c-single-input-form input {
    margin: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-single-input-form input {
    height: 50px;
  }
}
@media screen {
  .c-single-input-form button, .c-single-input-form a {
    position: absolute;
    right: 7px;
    top: 10px;
    margin-top: -3px;
  }
}
@media screen and (max-width: 768px) {
  .c-single-input-form button, .c-single-input-form a {
    right: 12px;
    top: 13px;
    margin-top: 0;
    padding: 0;
    background: none;
    height: 24px;
  }
  .c-single-input-form button .o-button__label, .c-single-input-form a .o-button__label {
    display: none;
  }
  .c-single-input-form button i, .c-single-input-form a i {
    margin: 0;
  }
}
@media screen {
  .c-list-item-wrapper {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 75px;
    padding: 13px 24px;
    margin-bottom: 10px;
  }
}
@media screen {
  .c-table__row {
    display: flex;
    width: 100%;
    align-items: center;
  }
  .c-table__row .c-table__image {
    width: 54px;
    height: 54px;
    margin-right: 15px;
    background: #D6E0EF;
    border-radius: 0.5625rem;
    overflow: hidden;
  }
  .c-table__row .c-table__image img {
    width: 100%;
    height: 100%;
  }
  .c-table__row .c-table__image--offset {
    margin-left: -9px;
  }
  .c-table__row .c-table__copy {
    flex: 1;
  }
  .c-table__row .c-table__copy a {
    display: block;
    text-decoration: none;
  }
  .c-table__row .c-table__copy a:hover .c-table__row-title {
    color: #158443;
  }
  .c-table__row .c-table__copy .c-table__row-title {
    font-family: "Bitter", serif;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    color: #333333;
    transition: all 0.3s;
    padding-right: 30px;
  }
  .c-table__row .c-table__copy .c-table__row-subtitle {
    font-size: 0.9375rem;
    text-decoration: none;
    color: #6E7687;
    padding-right: 45px;
  }
  .c-table__row .c-table__row-data {
    padding-right: 20px;
  }
  .c-table__row .c-table__row-data span {
    display: block;
  }
  .c-table__row .c-table__row-control {
    position: relative;
    margin-left: auto;
  }
  .c-table__row .c-table__row-control .c-table__row-checkbox {
    top: 50%;
    margin-top: -13.5px;
    right: 0;
  }
}
@media screen {
  .c-table-list {
    padding: 8px 24px;
  }
  .c-table-list .table__col-title {
    border-bottom: 1px solid #EFF3F6;
  }
  .c-table-list .c-table__row {
    padding: 21px 0;
    border-bottom: 1px solid #EFF3F6;
    align-items: top;
  }
  .c-table-list .c-table__row:last-child {
    border-bottom: 0;
  }
  .c-table-list .c-table__row .c-table__image {
    width: 42px;
    height: 42px;
  }
  .c-table-list .c-table__row .c-table__copy .c-table__row-title {
    font-size: 1.0625em;
  }
  .c-table-list .l-table__row--height {
    padding: 15px 0;
  }
  .c-table-list .c-table__header {
    padding: 10px 0;
  }
  .c-table-list .c-table__header span {
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1.125rem;
  }
}
@media screen {
  .c-box-list li {
    font-size: 0.9375rem; /* 15/16 */
    font-weight: 600;
    position: relative;
    margin-top: 18px;
    color: #ffffff;
    cursor: pointer;
    z-index: 1;
    padding-left: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
  .c-box-list li:first-child {
    margin-top: 0;
  }
  .c-box-list li:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 0.4375rem; /* 7/16 */
    border: 2px solid #DBDDE0;
    z-index: -1;
  }
  .c-box-list li.c-box-list__item--active {
    cursor: auto;
  }
  .c-box-list li.c-box-list__item--active:before {
    background-image: url(/assets/svg-icons/chevron--white-5b5a863a30ba18e88b6250dd9ae968438a95342be885d585ee66ba9b73a1cfc8.png);
    background-size: cover;
  }
  .c-box-list li.c-box-list__item--active a:hover {
    color: #ffffff;
    cursor: auto;
  }
  .c-box-list li.c-box-list__item--complete {
    color: #158443;
    text-decoration: line-through;
  }
  .c-box-list li.c-box-list__item--complete:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #158443;
    background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
    background-size: cover;
    border-radius: 0.4375rem; /* 7/16 */
    border: 0;
  }
  .c-box-list li.c-box-list__item--complete a {
    color: #158443;
  }
  .c-box-list li.c-box-list__item--complete a .c-box-list__item-duration {
    color: #158443;
  }
  .c-box-list li.c-box-list__item--pending {
    opacity: 0.2;
  }
  .c-box-list li.c-box-list__item--pending .o-badge {
    display: none;
  }
  .c-box-list li.c-box-list__item--locked:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
    height: 20px;
    background: none;
    background-image: url(/assets/svg-icons/padlock-422049d82c4fd85a56375c162d817aea257aaa413a0445d8a84b3e94cb97d0c0.png) !important;
    background-size: cover !important;
    border-radius: 0; /* 7/16 */
    border: 0;
  }
  .c-box-list li a {
    display: flex;
    margin-left: -30px;
    padding-left: 30px;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
  }
  .c-box-list li a:hover {
    color: #158443;
  }
  .c-box-list li a .c-box-list__item-number {
    margin-right: 3px;
  }
  .c-box-list li a .c-box-list__item-duration {
    margin-left: auto;
    color: #A7ADB4;
  }
  .c-box-list li a .c-box-list__item-title {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
@media screen {
  .c-box-list--linked li:first-child:after {
    display: none;
  }
  .c-box-list--linked li:after {
    content: "";
    position: absolute;
    top: -15px;
    left: 9px;
    width: 2px;
    height: 12px;
    background: #585E66;
  }
}
@media screen {
  .c-box-list--black li {
    color: #333333;
    font-weight: 400;
  }
  .c-box-list--black li.c-box-list__item--active:before {
    background-image: url(/assets/svg-icons/chevron--black-454278cfec6d2fd7013bd089533ed0fa999a8811f872991b37387fc67a6a5144.png);
    background-size: cover;
  }
  .c-box-list--black a {
    color: #333333 !important;
    text-decoration: none;
  }
  .c-box-list--black a:hover {
    color: #158443 !important;
  }
}
@media screen {
  .c-box-list--checked li {
    cursor: inherit;
  }
  .c-box-list--checked li:before {
    background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
    background-size: cover;
    border: 2px solid #ffffff;
  }
}
@media screen {
  .l-list-item-wrapper:first-child {
    margin-top: 30px;
  }
}
@media screen {
  .c-onboarding-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .c-onboarding-progress li {
    min-width: 27px;
    height: 27px;
    background: #333333;
    border-radius: 0.5625rem;
    font-family: "Bitter", serif;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    position: relative;
  }
  .c-onboarding-progress li .c-onboarding-progress__step {
    line-height: 26px;
  }
  .c-onboarding-progress li.c-onboarding-progress__bar {
    background: #DFE7F0;
    width: 100%;
    height: 6px;
    border-radius: 100px;
    margin: 0 9px;
  }
  .c-onboarding-progress li.c-onboarding-progress__bar.c-onboarding-progress__bar--in-progress:before {
    content: "";
    width: 50%;
    height: 100%;
    border-radius: 100px;
    background: #158443;
    position: absolute;
    left: 0;
  }
  .c-onboarding-progress li.c-onboarding-progress__bar.c-onboarding-progress__bar--complete {
    background: #158443;
  }
  .c-onboarding-progress li.c-onboarding-progress--complete {
    background: #158443;
    background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
    background-size: cover;
  }
  .c-onboarding-progress li.c-onboarding-progress--complete .c-onboarding-progress__step {
    display: none;
  }
  .c-onboarding-progress li.c-onboarding-progress--complete .o-tooltip {
    background: #158443;
  }
  .c-onboarding-progress li.c-onboarding-progress--complete .o-tooltip:after {
    background: #158443;
  }
  .c-onboarding-progress li .o-tooltip {
    visibility: visible;
    opacity: 1;
    top: -50px;
    height: 36px;
    line-height: 17px;
  }
}
@media screen and (max-width: 992px) {
  .c-onboarding-progress li .o-tooltip {
    display: none;
  }
}
@media screen {
  .c-onboarding-progress li .o-tooltip:after {
    top: 20px;
  }
}
@media screen {
  .c-item-list-icon li {
    padding-left: 33px;
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1.0625rem; /* 17/16 */
    margin-top: 15px;
    position: relative;
  }
  .c-item-list-icon li:first-child {
    margin-top: 0;
  }
  .c-item-list-icon li:before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
  }
}
@media screen {
  .c-item-list-icon--arrow-right li:before {
    background-image: url(/assets/svg-icons/arrow-right--clear-green-40db3118f25edfdd310ed4a1c7c26857ec61928061ed7b77ef9d64b716bae0ed.png);
    background-size: cover;
  }
}
@media screen {
  .c-item-list-icon--checkmark li:before {
    background-image: url(/assets/svg-icons/checkmark--clear-green-e7cb550028b55997c9619c790965bfe6f3cbd9a1b6f6593a4c8e7d9cd9cbdb84.png);
    background-size: cover;
  }
}
@media screen {
  .c-list-filter li {
    margin-top: 18px;
  }
  .c-list-filter li:first-child {
    margin-top: 0;
  }
  .c-list-filter .c-list-filter__label {
    font-size: 0.9375rem; /* 15/16 */
    padding-left: 36px;
  }
}
@media screen {
  .c-list-filter--dark .c-list-filter__label {
    color: #ffffff;
  }
}
@media screen {
  .c-version-history-table .c-version-history-table__row {
    margin-top: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #DFE7F0;
  }
  .c-version-history-table .c-version-history-table__row h3 {
    font-size: 1.3125rem; /* 21/16 */
    line-height: 1.25;
  }
}
@media screen and (max-width: 768px) {
  .c-version-history-table .c-version-history-table__row h3 {
    font-size: 1.1875rem; /* 19/16 */
  }
}
@media screen {
  .c-version-history-table .c-version-history-table__row .c-version-history-table__meta {
    display: block;
    font-size: 0.9375rem; /* 15/16 */
    margin-top: 6px;
  }
}
@media screen {
  .c-version-history-table .c-version-history-table__row .c-version-history-table__links {
    margin-top: 3px;
  }
  .c-version-history-table .c-version-history-table__row .c-version-history-table__links a, .c-version-history-table .c-version-history-table__row .c-version-history-table__links span {
    font-size: 0.9375rem; /* 15/16 */
    color: #158443;
  }
}
@media screen {
  .c-activity-checklist .c-activity-checklist__entry {
    margin-bottom: 21px;
  }
  .c-activity-checklist .c-activity-checklist__entry .c-activity-checklist__entry__top {
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
  }
  .c-activity-checklist .c-activity-checklist__entry .c-activity-checklist__entry__top > button svg {
    fill: #798494;
    width: 15px;
    height: 9px;
    position: absolute;
    top: 6px;
    right: 0;
  }
  .c-activity-checklist .c-activity-checklist__entry .c-activity-checklist__entry__bottom {
    padding-left: 39px;
  }
  .c-activity-checklist .c-activity-checklist__entry .c-activity-checklist__entry__number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background-color: #E9EBEC;
    font-family: "Bitter", serif;
    font-size: 0.8125rem; /* 13/16 */
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
  }
  .c-activity-checklist .c-activity-checklist__entry .c-activity-checklist__entry__title {
    font-size: 0.9375rem; /* 15/16 */
    letter-spacing: 0.25px;
    padding-left: 39px;
    white-space: nowrap;
    max-width: 100%;
    width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .c-activity-checklist .c-activity-checklist__entry .o-button-disclose--small {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .c-activity-checklist .c-activity-checklist__entry .c-activity-checklist__entry__desc {
    font-size: 0.8125rem; /* 13/16 */
    color: #6E7687;
    margin-top: 9px;
  }
  .c-activity-checklist .c-activity-checklist__entry .c-activity-checklist__entry__action {
    display: inline-flex;
    background-color: #158443;
    font-size: 0.75rem; /* 12/16 */
    font-weight: 700;
    color: #ffffff;
    padding: 9px 13px;
    border-radius: 0.5625rem;
    margin-top: 15px;
    cursor: pointer;
    text-decoration: none;
  }
  .c-activity-checklist .c-activity-checklist__entry--completed .c-activity-checklist__entry__title {
    text-decoration: line-through;
  }
  .c-activity-checklist .c-activity-checklist__entry--completed .c-activity-checklist__entry__number {
    background-color: #158443;
  }
  .c-activity-checklist .c-activity-checklist__entry--completed .c-activity-checklist__entry__number svg {
    fill: #ffffff;
    width: 12px;
    height: 10px;
  }
}
@media screen {
  .c-admin-draper-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .c-admin-draper-wrapper .l-half-col {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 600px) {
  .c-admin-draper-wrapper .l-half-col {
    width: 100%;
  }
}
@media screen {
  .c-admin-draper {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    display: flex;
    margin-top: 15px;
    padding: 24px 30px;
    min-height: 196px;
    overflow: hidden;
  }
}
@media screen and (max-width: 600px) {
  .c-admin-draper {
    min-height: auto;
  }
}
@media screen {
  .c-admin-draper:first-child {
    margin-top: 0;
  }
}
@media screen {
  .c-admin-draper > div {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__copy {
    padding-right: 30px;
    flex-grow: 1;
  }
  .c-admin-draper .c-admin-draper__copy .c-admin-draper__title {
    width: 100%;
    font-size: 1.3125rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 600px) {
  .c-admin-draper .c-admin-draper__copy .c-admin-draper__title {
    font-size: 1.3125rem;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__copy .c-admin-draper__subtitle {
    width: 100%;
    font-size: 0.9375rem;
    color: #6E7687;
    margin-top: 6px;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__copy a {
    margin-top: 30px;
    align-self: flex-end;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__copy--large {
    min-height: 240px;
  }
}
@media screen and (max-width: 600px) {
  .c-admin-draper .c-admin-draper__copy--large {
    min-height: auto;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__copy--large .c-admin-draper__title {
    font-size: 2.25rem;
  }
}
@media screen and (max-width: 600px) {
  .c-admin-draper .c-admin-draper__copy--large .c-admin-draper__title {
    font-size: 1.3125rem;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__copy--large .c-admin-draper__subtitle {
    font-size: 1rem;
    padding-right: 10%;
  }
}
@media screen and (max-width: 600px) {
  .c-admin-draper .c-admin-draper__copy--large .c-admin-draper__subtitle {
    font-size: 0.9375rem;
    padding-right: 0;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__artwork {
    width: 90px;
    height: 90px;
    align-self: center;
  }
}
@media screen and (min-width: 993px) and (max-width: 1080px) {
  .c-admin-draper .c-admin-draper__artwork {
    width: 60px;
    height: 60px;
  }
}
@media screen and (max-width: 768px) {
  .c-admin-draper .c-admin-draper__artwork {
    align-self: flex-start;
    width: 60px;
    height: 60px;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__artwork img {
    min-width: 100%;
    height: 100%;
  }
}
@media screen {
  .c-admin-draper .c-admin-draper__artwork--large {
    width: 210px;
    height: 210px;
  }
}
@media screen and (max-width: 600px) {
  .c-admin-draper .c-admin-draper__artwork--large {
    width: 60px;
    height: 60px;
  }
}
@media screen {
  .c-admin-draper--large {
    min-height: 300px;
  }
}
@media screen and (max-width: 600px) {
  .c-admin-draper--large {
    min-height: auto;
  }
}
@media screen {
  .l-custom-admin-draper--large {
    width: 360px !important;
    height: 304px !important;
    margin-top: -30px;
    margin-right: -30px;
    align-self: flex-start !important;
  }
}
@media screen and (min-width: 993px) and (max-width: 1080px) {
  .l-custom-admin-draper--large {
    width: 300px !important;
    height: 250px !important;
  }
}
@media screen and (max-width: 600px) {
  .l-custom-admin-draper--large {
    width: 140px !important;
    height: 120px !important;
  }
}
@media screen {
  .c-banner-draper {
    height: 140px;
    overflow: hidden;
    position: relative;
  }
  .c-banner-draper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper {
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper {
    height: 100%;
    position: relative;
    z-index: 1;
  }
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__flex-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__flex-wrapper {
    display: grid;
    grid-template-columns: auto auto;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__flex-wrapper {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__art {
    height: 100%;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__art {
    display: none;
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__art img {
    position: relative;
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy {
    margin-left: 24px;
    margin-right: 24px;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy {
    margin-left: 0;
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 {
    display: flex;
    align-items: center;
    font-size: 1.6875rem; /* 27/16 */
    color: #ffffff;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 {
    font-size: 1.5rem; /* 24/16 */
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 a {
    color: #ffffff;
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 .o-badge {
    position: relative;
    vertical-align: middle;
    margin-left: 14px;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy .c-banner-draper__copy-header--large {
    font-size: 1.5rem !important; /* 24/16 */
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy p {
    font-family: "Bitter", serif;
    font-size: 1.0625rem; /* 17/16 */
    color: #F2F6FA;
    margin-top: 5px;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__action {
    margin-left: auto;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__action {
    margin-top: 18px;
    margin-left: 0;
  }
}
@media screen {
  .c-banner-draper--no-height {
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media screen {
  .c-banner-draper--ios {
    background-color: #F64E1A;
  }
  .c-banner-draper--ios:before {
    background-image: url(/assets/patterns/ios-pattern@2x-afa82e7a21383f962e6cc10db0d78ffebb131d0ccd9727b43e238d7322e0ad12.png);
    background-size: cover;
  }
  .c-banner-draper--ios .c-banner-draper__art {
    width: 222px;
    margin-left: -30px;
  }
  .c-banner-draper--ios .c-banner-draper__art img {
    top: 24px;
  }
}
@media screen {
  .c-banner-draper--android {
    background-image: linear-gradient(to right, #0575e6, #00a0ff, #00c3f4, #00deb5, #00f260);
  }
  .c-banner-draper--android:before {
    background-image: url(/assets/patterns/android-pattern@2x-0acfc99c22ba9a9593d5d397392601e47bb5a1a8d5c1090f340a5d0c299f444b.png);
    background-size: cover;
  }
  .c-banner-draper--android .c-banner-draper__art {
    width: 140px;
  }
  .c-banner-draper--android .c-banner-draper__art img {
    top: 20px;
  }
}
@media screen {
  .c-banner-draper--server-side-swift {
    background-color: #363B44;
  }
  .c-banner-draper--server-side-swift:before {
    background-image: url(/assets/patterns/server-side-swift-pattern@2x-f3dba2893826ed475bdd037b3b0397a8c096e2f21aee50d77781af37a953f59f.png);
    background-size: cover;
  }
  .c-banner-draper--server-side-swift .c-banner-draper__art {
    width: 140px;
  }
  .c-banner-draper--server-side-swift .c-banner-draper__art img {
    width: 100%;
  }
  .c-banner-draper--server-side-swift .o-button--dark {
    background: #FD7401;
  }
  .c-banner-draper--server-side-swift .o-button--dark svg {
    fill: #FD7401;
  }
}
@media screen {
  .c-banner-draper--unity {
    background-color: #194A85;
  }
  .c-banner-draper--unity:before {
    background-image: url(/assets/patterns/unity-pattern@2x-ea54493ebce63300483f86d19b76151ab61e9b720dd2ffa7a9692f687f5d7985.png);
    background-size: cover;
  }
  .c-banner-draper--unity .c-banner-draper__art {
    width: 160px;
  }
  .c-banner-draper--unity .c-banner-draper__art img {
    top: 20px;
  }
}
@media screen {
  .c-banner-draper--flutter {
    background-color: #096ABB;
  }
  .c-banner-draper--flutter:before {
    background-image: url(/assets/patterns/flutter-pattern@2x-9e12512906f6b2a385152d09df75b94627d2f703c2c564245c1fdfc144f4eacf.png);
    background-size: cover;
  }
  .c-banner-draper--flutter .c-banner-draper__art {
    width: 160px;
  }
  .c-banner-draper--flutter .c-banner-draper__art img {
    top: 20px;
  }
}
@media screen {
  .c-banner-draper--unreal-engine {
    background-color: #79376C;
  }
  .c-banner-draper--unreal-engine:before {
    background-image: url(/assets/patterns/unreal-engine-pattern@2x-48474441fbdadf19f554060204e7e715fdf4a428bb0ab43345320402699c5be0.png);
    background-size: cover;
  }
  .c-banner-draper--unreal-engine .c-banner-draper__art {
    width: 172px;
  }
  .c-banner-draper--unreal-engine .c-banner-draper__art img {
    top: 20px;
  }
}
@media screen {
  .c-banner-draper--macos {
    background-color: #41AEA4;
  }
  .c-banner-draper--macos:before {
    background-image: url(/assets/patterns/macos-pattern@2x-ef0d6844edb6e457193f139c0ccfa6fd5bf50c13a07ea14791c1befbc290d0ab.png);
    background-size: cover;
  }
  .c-banner-draper--macos .c-banner-draper__art {
    width: 172px;
  }
  .c-banner-draper--macos .c-banner-draper__art img {
    top: 20px;
  }
}
@media screen {
  .c-banner-draper--archive {
    background-color: #333333;
  }
  .c-banner-draper--archive:before {
    background-image: url(/assets/patterns/archive-pattern@2x-1ce809bc4aa1a52ab4319309866b6e042d0148b4bcc20f4f63344adeb7d7363b.png);
    background-size: cover;
  }
  .c-banner-draper--archive .c-banner-draper__art {
    width: 120px;
  }
  .c-banner-draper--archive .c-banner-draper__art img {
    top: 30px;
  }
}
@media screen {
  .c-banner-draper--podcast {
    background-color: #333333;
  }
  .c-banner-draper--podcast:before {
    background-image: url(/assets/patterns/podcast-pattern@2x-e0178d0b9c54e1e3a503e42e111d2098c5057345f09b3cdc5fb5aa162b4135de.png);
    background-size: cover;
  }
  .c-banner-draper--podcast .c-banner-draper__copy p {
    max-width: 720px;
  }
  .c-banner-draper--podcast .c-banner-draper__art {
    width: 120px;
  }
  .c-banner-draper--podcast .c-banner-draper__art img {
    top: 30px;
  }
}
@media screen {
  .c-banner-draper--mobile-app {
    background: #F2F6FA;
  }
  .c-banner-draper--mobile-app h2, .c-banner-draper--mobile-app p {
    color: #333333 !important;
  }
  .c-banner-draper--mobile-app .c-banner-draper__art img {
    width: 180px;
    top: 10px;
  }
}
@media screen {
  .c-banner-draper--campaign {
    height: auto;
    min-height: 140px;
    display: flex;
    align-items: center;
    padding: 30px 0;
  }
  .c-banner-draper--campaign .c-banner-draper__copy p {
    margin-top: 9px;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--campaign .c-banner-draper__copy p {
    padding-right: 0;
  }
}
@media screen {
  .c-banner-draper--account {
    background-color: #333333;
  }
  .c-banner-draper--account:before {
    background-image: url(/assets/patterns/flare-relate-pattern--dark-teal-ae0808f8dec26eea570712492e5bbdfe208f598016b1be055ba108966a73eb5f.png);
    background-size: cover;
  }
  .c-banner-draper--account .c-banner-draper__art {
    width: 300px;
  }
  .c-banner-draper--account .c-banner-draper__art img {
    top: 20px;
    margin-top: -40px;
    margin-bottom: -60px;
  }
}
@media screen {
  .c-banner-draper--account-list {
    padding-bottom: 60px;
  }
  .c-banner-draper--account-list:before {
    background-image: url(/assets/patterns/large-geometric-relate-pattern--dark-83ce2ab52da02a0fda9a08230d73ce14f6dbd16193a6eb1e339e35429af2ffcc.png);
    background-size: cover;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper--account-list .l-block-wrapper {
    width: 100%;
  }
}
@media screen {
  .c-banner-draper--account-list h2 {
    font-size: 1.875rem !important; /* 30/16 */
    line-height: 1.35 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--account-list h2 {
    font-size: 1.5rem !important; /* 24/16 */
    line-height: 1.25 !important;
  }
}
@media screen {
  .c-banner-draper--account-list .c-banner-draper__art {
    width: 240px;
    min-width: 240px;
    margin-left: auto;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper--account-list .c-banner-draper__art {
    display: block !important;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--account-list .c-banner-draper__art {
    display: none !important;
  }
}
@media screen {
  .c-banner-draper--account-list .c-banner-draper__art img {
    top: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}
@media screen {
  .c-banner-draper--account-list .c-box-list li {
    font-family: "Bitter", serif;
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--account-list .c-box-list li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-banner-draper--account-list .c-box-list li:before {
    top: 3px;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--account-list .c-box-list li:before {
    top: 1px;
  }
}
@media screen {
  .c-banner-draper--newsletter {
    background-color: #158443;
  }
  .c-banner-draper--newsletter:before {
    background-image: url(/assets/patterns/geometric-relate-pattern--dark-e78f59cb4699e24d8f72a0d8d6d16483af21c3fd818ce1b9c417a5cc8733f466.png);
    background-size: cover;
  }
  .c-banner-draper--newsletter .c-banner-draper__art {
    width: 200px;
  }
  .c-banner-draper--newsletter .c-banner-draper__art img {
    margin-bottom: -120px;
  }
}
@media screen {
  .c-banner-draper--subscription {
    background-color: #FDCF74;
    padding: 45px 0;
  }
  .c-banner-draper--subscription .c-banner-draper__flex-wrapper {
    max-width: 912px;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 26px;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__flex-wrapper {
    grid-template-columns: 1fr !important;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper--subscription h2 {
    white-space: normal;
  }
}
@media screen {
  .c-banner-draper--subscription h2, .c-banner-draper--subscription p {
    color: #333333 !important;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper--subscription h2, .c-banner-draper--subscription p {
    display: block !important;
  }
}
@media screen {
  .c-banner-draper--subscription .c-banner-draper__copy {
    margin: 0 !important;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__copy {
    order: 2;
    text-align: center;
    max-width: 560px;
    margin: 30px auto 0 !important;
  }
}
@media screen {
  .c-banner-draper--subscription .c-banner-draper__art {
    width: 100%;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__art {
    display: block !important;
    order: 1;
    max-width: 442px;
    margin: 0 auto;
  }
}
@media screen {
  .c-banner-draper--subscription .c-banner-draper__art img {
    width: 100%;
  }
}
@media screen {
  .c-banner-draper--pro-subscription {
    background-color: #157CB8 !important;
  }
  .c-banner-draper--pro-subscription h2, .c-banner-draper--pro-subscription p {
    color: #ffffff !important;
  }
}
@media screen {
  .c-banner-draper--pro-subscription-wide:before {
    content: "";
    position: absolute;
    left: -100px;
    bottom: 0;
    top: auto;
    width: 340px;
    height: 210px;
    background-image: url(/assets/patterns/illustration-pro-subscription-items-banner--left@2x-31f3916e8318791188fa174cb5fd47adc10c8e806d2da943a1b78dfd31889771.png);
    background-size: cover;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper--pro-subscription-wide:before {
    left: -200px;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper--pro-subscription-wide:before {
    left: -275px;
  }
}
@media screen {
  .c-banner-draper--pro-subscription-wide:after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: 0;
    top: auto;
    width: 340px;
    height: 210px;
    background-image: url(/assets/patterns/illustration-pro-subscription-items-banner--right@2x-6bf8ea3b615a092f7f47b771138f6a592cf6271a629929cca837f667f4a7a6b2.png);
    background-size: cover;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper--pro-subscription-wide:after {
    right: -200px;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper--pro-subscription-wide:after {
    right: -275px;
  }
}
@media screen {
  .c-banner-draper--team-subscription {
    background: #A5CEB5;
  }
  .c-banner-draper--team-subscription .c-banner-draper__art {
    display: inline-table;
    width: 420px;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--team-subscription .c-banner-draper__art {
    max-width: 300px;
    width: 100%;
  }
}
@media screen {
  .c-banner-draper--path {
    background-color: #333333;
  }
  .c-banner-draper--path .c-banner-draper__action {
    position: relative;
    top: 20px;
    min-width: 250px;
    margin-bottom: -50px;
    padding-right: 60px;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list {
    max-height: 240px;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li {
    overflow-x: visible;
    cursor: inherit;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(1) {
    opacity: 0.9;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(2) {
    opacity: 0.8;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(3) {
    opacity: 0.7;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(4) {
    opacity: 0.6;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(5) {
    opacity: 0.5;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(6) {
    opacity: 0.4;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(7) {
    opacity: 0.3;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(8) {
    opacity: 0.2;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:nth-child(9) {
    opacity: 0.1;
  }
  .c-banner-draper--path .c-banner-draper__action .c-box-list li:after {
    background: #ffffff;
    border-radius: 100px;
  }
}
@media screen {
  .c-banner-draper--path-android {
    background-color: #C9DC8D;
  }
  .c-banner-draper--path-android .c-banner-draper__wrapper:before {
    content: "";
    width: 167px;
    height: 165px;
    position: absolute;
    left: -167px;
    top: 50%;
    margin-top: -84px;
    background-image: url(/assets/artwork/illustration-android-path-1-4816269d716633f79033611fb0061cbebcd3f396eeb63a3097b896ff07ed1377.svg);
    background-size: cover;
  }
  .c-banner-draper--path-android .c-banner-draper__wrapper:after {
    content: "";
    width: 175px;
    height: 168px;
    position: absolute;
    right: -175px;
    top: 50%;
    margin-top: -86px;
    background-image: url(/assets/artwork/illustration-android-path-2-926e39e35948a8c71e63e5488048173dd116bd1c8ba55d3f7cfbf861ff732e6a.svg);
    background-size: cover;
  }
}
@media screen {
  .c-banner-draper--path-ios {
    background-color: #FCAC6D;
  }
  .c-banner-draper--path-ios .c-banner-draper__wrapper:before {
    content: "";
    width: 167px;
    height: 175px;
    position: absolute;
    left: -167px;
    top: 50%;
    margin-top: -90px;
    background-image: url(/assets/artwork/illustration-ios-path-2-645ab9db690dfe533b48c574033de0e8219b6d3cad6257dce06b35e0df7d6e79.svg);
    background-size: cover;
  }
  .c-banner-draper--path-ios .c-banner-draper__wrapper:after {
    content: "";
    width: 195px;
    height: 158px;
    position: absolute;
    right: -195px;
    top: 50%;
    margin-top: -80px;
    background-image: url(/assets/artwork/illustration-ios-path-1-b38bf847db51e4c39d55d606c9068dc264153f3cb6cd806b5d0f7f111219dbc4.svg);
    background-size: cover;
  }
}
@media screen {
  .c-banner-draper--path-flutter {
    background-color: #C7E7F6;
  }
  .c-banner-draper--path-flutter .c-banner-draper__wrapper:before {
    content: "";
    width: 170px;
    height: 130px;
    position: absolute;
    left: -170px;
    top: 50%;
    margin-top: -65px;
    background-image: url(/assets/artwork/illustration-flutter-path-1-2826a5fe356022558251511fe47191025b8ca62ffe74d36760ad5e147de7a60c.svg);
    background-size: cover;
  }
  .c-banner-draper--path-flutter .c-banner-draper__wrapper:after {
    content: "";
    width: 222px;
    height: 134px;
    position: absolute;
    right: -222px;
    top: 50%;
    margin-top: -67px;
    background-image: url(/assets/artwork/illustration-flutter-path-2-b50f3988f24008897d0f68918cb8c4b6cd1cbdfac5f777776dfe45e3aa35781e.svg);
    background-size: cover;
  }
}
@media screen {
  .c-banner-draper--path-unity {
    background-color: #8CBDDA;
  }
  .c-banner-draper--path-unity .c-banner-draper__wrapper:before {
    content: "";
    width: 185px;
    height: 165px;
    position: absolute;
    left: -185px;
    top: 50%;
    margin-top: -75px;
    background-image: url(/assets/artwork/illustration-unity-path-1-648e7bb4411b2adeb3f71dded5c1f2cd1a0f7b88ad424e4e8b8a380db7dcc759.svg);
    background-size: cover;
  }
  .c-banner-draper--path-unity .c-banner-draper__wrapper:after {
    content: "";
    width: 155px;
    height: 166px;
    position: absolute;
    right: -155px;
    top: 50%;
    margin-top: -83px;
    background-image: url(/assets/artwork/illustration-unity-path-2-4688f78d49e6a90c49bb8125a20b9c2c9086b559322c44197dfe0669a13ecdb9.svg);
    background-size: cover;
  }
}
@media screen {
  .c-banner-draper--black-friday-2020 h2, .c-banner-draper--black-friday-2020 p {
    color: #ffffff !important;
  }
}
@media screen {
  .c-banner-related {
    padding: 45px 0;
    overflow: hidden;
    position: relative;
  }
  .c-banner-related:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-related {
    padding: 45px 50px;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related {
    padding: 45px 0;
  }
}
@media screen {
  .c-banner-related .c-banner-related__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 80px;
    align-items: center;
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper {
    grid-template-columns: 1fr !important;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text {
    text-align: center;
  }
}
@media screen {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text .o-header-logo__mark {
    width: 24px;
    height: 24px;
    fill: #ffffff;
  }
}
@media screen {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text .c-banner-related__headline {
    font-size: 2.25rem; /* 36/16 */
    line-height: 1.25;
    margin-top: 6px;
    color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text .c-banner-related__headline {
    font-size: 1.875rem; /* 30/16 */
  }
}
@media screen and (max-width: 600px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text .c-banner-related__headline {
    font-size: 1.5rem; /* 24/16 */
  }
}
@media screen {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text .c-banner-related__description {
    font-family: "Bitter", serif;
    font-size: 1.125rem;
    margin-top: 9px;
    color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text .c-banner-related__description {
    font-size: 1rem; /* 18/16 */
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__artwork {
    text-align: center;
    margin-top: 30px;
  }
}
@media screen {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__artwork img {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__artwork img {
    max-width: 320px;
  }
}
@media screen {
  .c-banner-related--subscription {
    background: #FDCF74;
  }
  .c-banner-related--subscription .c-banner-related__wrapper {
    grid-column-gap: 26px;
  }
  .c-banner-related--subscription .c-banner-related__text h3 {
    font-size: 1.6875rem !important; /* 27/16 */
  }
  .c-banner-related--subscription .c-banner-related__text p {
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related--subscription .c-banner-related__text {
    order: 2;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related--subscription .c-banner-related__artwork {
    order: 1;
    margin-top: 0 !important;
    margin-bottom: 30px;
  }
}
@media screen {
  .c-banner-related--content {
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
  }
  .c-banner-related--content:before {
    background-color: #333333;
    background-size: cover;
  }
  .c-banner-related--content .c-banner-related__wrapper {
    grid-template-columns: 1fr auto;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related--content .c-banner-related__text {
    order: 2;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related--content .c-banner-related__text .o-header-logo__mark {
    display: none;
  }
}
@media screen {
  .c-banner-related--content .c-banner-related__artwork {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related--content .c-banner-related__artwork {
    order: 1;
    text-align: left !important;
    margin-top: 0 !important;
  }
}
@media screen {
  .c-banner-related--content .c-banner-related__artwork img {
    max-width: 350px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5625rem;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-related--content .c-banner-related__artwork img {
    max-width: 250px !important;
  }
}
@media screen {
  .c-banner-draper-sticky {
    display: flex;
    align-items: center;
    height: 80px;
    background: #3268A6;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    box-shadow: 0 -2px 1px 0 rgba(51, 51, 51, 0.05);
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky {
    height: auto;
  }
}
@media screen {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper {
    display: flex;
    align-items: center;
    padding: 0 60px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper {
    padding: 10px 60px 15px 20px;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper {
    display: block;
  }
}
@media screen {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper img {
    max-width: 90px;
    margin-right: 30px;
    position: relative;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper img {
    display: none;
  }
}
@media screen {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper p {
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1rem;
    padding-right: 20px;
    color: #ffffff;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper p {
    margin-bottom: 15px;
  }
}
@media screen {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper .o-alert__close {
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
  }
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper .o-alert__close svg {
    margin-top: -8px;
    margin-left: -8px;
  }
}
@media screen {
  .c-banner-draper-sticky--account {
    background: #41AEA4;
    background-image: url(/assets/patterns/flare-relate-pattern--dark-teal-ae0808f8dec26eea570712492e5bbdfe208f598016b1be055ba108966a73eb5f.png);
    background-size: cover;
  }
}
@media screen {
  .c-banner-draper-sticky--newsletter {
    background: #333333;
    background-image: url(/assets/patterns/geometric-relate-pattern--dark-e78f59cb4699e24d8f72a0d8d6d16483af21c3fd818ce1b9c417a5cc8733f466.png);
    background-size: cover;
  }
  .c-banner-draper-sticky--newsletter img {
    max-width: 120px !important;
    top: 20px;
  }
}
@media screen {
  .c-banner-draper-sticky--subscribe {
    background: #FDCF74;
  }
  .c-banner-draper-sticky--subscribe .c-banner-draper-sticky__wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--subscribe .c-banner-draper-sticky__wrapper {
    padding-left: 24px;
    padding-right: 60px;
    padding-top: 15px;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper-sticky--subscribe .c-banner-draper-sticky__wrapper {
    padding-right: 24px;
  }
}
@media screen {
  .c-banner-draper-sticky--subscribe p {
    color: #333333 !important;
  }
}
@media screen {
  .c-banner-draper-sticky--subscribe img {
    max-width: 180px !important;
    margin-right: 20px !important;
    margin-left: -30px !important;
    top: 0;
  }
}
@media screen {
  .c-banner-draper-sticky--pro-subscribe {
    background: #157CB8;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--pro-subscribe .c-banner-draper-sticky__wrapper {
    padding-top: 15px;
  }
}
@media screen {
  .c-banner-draper-sticky--pro-subscribe p {
    color: #ffffff !important;
  }
}
@media screen {
  .c-banner-draper-sticky--pro-subscribe img {
    max-width: 150px !important;
    margin-right: 20px !important;
    margin-left: -30px !important;
    top: 10px;
  }
}
@media screen {
  .c-banner-draper-sticky--team-subscribe {
    background: #A5CEB5;
  }
  .c-banner-draper-sticky--team-subscribe .c-banner-draper-sticky__wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--team-subscribe .c-banner-draper-sticky__wrapper {
    padding-left: 24px;
    padding-right: 60px;
  }
}
@media screen and (max-width: 600px) {
  .c-banner-draper-sticky--team-subscribe .c-banner-draper-sticky__wrapper {
    padding-right: 24px;
  }
}
@media screen {
  .c-banner-draper-sticky--team-subscribe img {
    max-width: 95px !important;
    top: 1px;
  }
}
@media screen {
  .c-banner-draper-sticky--obfuscate {
    background: #ffffff;
    box-shadow: 0px 2px 24px 0 rgba(51, 51, 51, 0.1);
    height: 96px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--obfuscate {
    margin: 0 24px;
    width: calc(100% - 48px);
    bottom: 72px;
    border-radius: 0.5625rem;
    padding: 24px;
    z-index: 0;
    height: auto;
  }
}
@media screen {
  .c-banner-draper-sticky--obfuscate .c-banner-draper-sticky__wrapper {
    max-width: 1140px;
    padding: 0;
  }
}
@media screen and (max-width: 1200px) {
  .c-banner-draper-sticky--obfuscate .c-banner-draper-sticky__wrapper {
    padding: 0 24px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--obfuscate .c-banner-draper-sticky__wrapper {
    padding: 0;
  }
}
@media screen {
  .c-banner-draper-sticky--obfuscate p {
    color: #333333 !important;
  }
}
@media screen {
  .c-banner-draper-sticky--obfuscate img {
    max-width: 170px !important;
  }
}
@media screen {
  .c-banner-draper-sticky--obfuscate .l-obfuscated-text {
    display: inline-block;
    width: 104px;
    text-align: center;
    background: #F4C3C3;
  }
}
@media screen {
  .c-banner-draper-sticky--black {
    background: #333333;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--cta-only .c-banner-draper-sticky__wrapper {
    padding: 15px 20px 15px 20px;
  }
}
@media screen {
  .c-banner-draper-sticky--black-friday-2020 {
    background: #222222;
  }
  .c-banner-draper-sticky--black-friday-2020:before {
    content: "";
    position: absolute;
    left: -120px;
    top: 0;
    width: 300px;
    height: 100%;
    background-image: url(/assets/patterns/black-friday-2020-banner-background-left-green@2x-1457eeb695c0ff616b9105dd99462e1f20b3cf8253ec452b092436f05ca10bbd.png);
    background-size: cover;
    z-index: -1;
  }
}
@media screen and (max-width: 1200px) {
  .c-banner-draper-sticky--black-friday-2020:before {
    left: -200px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--black-friday-2020:before {
    display: none;
  }
}
@media screen {
  .c-banner-draper-sticky--black-friday-2020:after {
    content: "";
    position: absolute;
    right: -120px;
    top: 0;
    width: 300px;
    height: 100%;
    background-image: url(/assets/patterns/black-friday-2020-banner-background-right-green@2x-76fd0f37b155af57046dfc30ea318a0d7ba625973a933df46f229c06e5846adb.png);
    background-size: cover;
    z-index: -1;
  }
}
@media screen and (max-width: 1200px) {
  .c-banner-draper-sticky--black-friday-2020:after {
    right: -200px;
  }
}
@media screen and (max-width: 1080px) {
  .c-banner-draper-sticky--black-friday-2020:after {
    right: -250px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--black-friday-2020:after {
    display: none;
  }
}
@media screen {
  .c-banner-draper-sticky--black-friday-2020 .c-banner-draper-sticky__wrapper {
    padding-left: 0;
    padding-right: 0;
    max-width: 678px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--black-friday-2020 .c-banner-draper-sticky__wrapper {
    padding-left: 24px;
    padding-right: 60px;
    max-width: none;
  }
}
@media screen {
  .c-price-card {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    text-align: center;
    width: 300px;
    height: 0%;
    padding: 30px 0 40px;
    margin: 0 20px;
  }
  .c-price-card h4 {
    font-size: 1.125rem; /* 18/16 */
  }
  .c-price-card .c-price-card__price span {
    font-family: "Bitter", serif;
  }
  .c-price-card .c-price-card__price .c-price-card__price-currency {
    font-size: 1.25rem; /* 20/16 */
    margin-right: -6px;
  }
  .c-price-card .c-price-card__price .c-price-card__price-main {
    font-size: 7.5rem; /* 140/16 */
    line-height: 100px;
    letter-spacing: -5px;
  }
  .c-price-card .c-price-card__price .c-price-card__price-change {
    margin-left: -6px;
    position: relative;
    top: -75px;
  }
  .c-price-card .c-price-card__period {
    display: block;
    font-family: "Bitter", serif;
  }
  .c-price-card .c-price-card__saving {
    display: block;
    font-size: 0.875rem; /* 14/16 */
    color: #73859F;
  }
}
@media screen {
  .c-price-card--small {
    width: 270px;
  }
}
@media screen {
  .c-banner-draper--teaspoon-launch {
    background: #FDCF74;
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
  }
  .c-banner-draper--teaspoon-launch .c-banner-draper__copy {
    margin: 0 !important;
  }
  .c-banner-draper--teaspoon-launch .c-banner-draper__copy h2, .c-banner-draper--teaspoon-launch .c-banner-draper__copy p {
    display: block !important;
    text-align: center;
    color: #333333 !important;
  }
  .c-banner-draper--teaspoon-launch .c-banner-draper__artwork-left {
    position: absolute;
    left: -250px;
    top: -92px;
    width: 298px;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--teaspoon-launch .c-banner-draper__artwork-left {
    bottom: -92px;
    top: auto;
  }
}
@media screen {
  .c-banner-draper--teaspoon-launch .c-banner-draper__artwork-right {
    position: absolute;
    right: -340px;
    top: -92px;
    width: 380px;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--teaspoon-launch .c-banner-draper__artwork-right {
    bottom: -92px;
    top: auto;
  }
}
@media screen {
  .c-banner-draper--black-friday--2020 {
    background: #222222;
    position: relative;
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
  }
}
@media screen {
  .c-banner-draper--black-friday--2020::before {
    content: "";
    position: absolute;
    width: 302px;
    height: 205px;
    position: absolute;
    left: -100px;
    top: auto;
    bottom: 0;
    background-image: url(/assets/patterns/black-friday-2020-top-banner-background-left-green@2x-ddd3afcdcf4e19be05da694a3cc6ef4309c43ebbc3e61cab7a90eb6ba63094bb.png);
    background-size: cover;
  }
}
@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020::before {
    display: none;
  }
}
@media screen {
  .c-banner-draper--black-friday--2020::after {
    content: "";
    position: absolute;
    width: 302px;
    height: 205px;
    position: absolute;
    right: -100px;
    top: auto;
    bottom: 0;
    background-image: url(/assets/patterns/black-friday-2020-top-banner-background-right-green@2x-5c58fe59f9cffd45842df12bad8bc7b45a80d6f5fa4fd906107ed06dd7173c51.png);
    background-size: cover;
  }
}
@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020::after {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020 h2 {
    display: block !important;
  }
  .c-banner-draper--black-friday--2020 h2 > span {
    display: block;
  }
}
@media screen {
  .c-banner-draper--black-friday--2020 .c-banner-draper__flex-wrapper {
    justify-content: center;
    text-align: center;
  }
}
@media screen {
  .c-banner-draper-top--spring-ahead-2021 {
    background-color: #FDEA89 !important;
    background-image: url(/assets/artwork/illustration-spring-ahead-row-0338a27e2b54ba2378c23026bfded650b896b6b3472c94d82a9f41627c5c157c.png);
    background-size: 1440px 158px;
    background-position: center bottom -80px;
    background-repeat: no-repeat;
    padding-top: 30px;
    padding-bottom: 90px;
    height: auto;
  }
}
@media only screen and (max-width: 1080px) {
  .c-banner-draper-top--spring-ahead-2021 .c-banner-draper__flex-wrapper {
    grid-template-columns: auto !important;
  }
}
@media screen {
  .c-banner-draper-top--spring-ahead-2021 .c-banner-draper__copy {
    margin: 0 auto !important;
    text-align: center;
  }
}
@media screen {
  .c-banner-draper-top--spring-ahead-2021 h2, .c-banner-draper-top--spring-ahead-2021 p {
    color: #333333 !important;
  }
}
@media screen {
  .c-banner-draper-bottom--spring-ahead-2021 {
    background: #FDEA89 !important;
  }
  .c-banner-draper-bottom--spring-ahead-2021 h2, .c-banner-draper-bottom--spring-ahead-2021 p {
    color: #333333 !important;
  }
  .c-banner-draper-bottom--spring-ahead-2021 .c-banner-draper__art {
    max-width: 350px;
  }
  .c-banner-draper-bottom--spring-ahead-2021 .c-banner-draper__flex-wrapper {
    grid-template-columns: 1fr 350px;
  }
}
@media screen {
  .c-banner-draper-sticky--spring-ahead-2021 {
    background: #FDEA89;
  }
  .c-banner-draper-sticky--spring-ahead-2021 .c-banner-draper-sticky__wrapper {
    padding: 0 30px !important;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper-sticky--spring-ahead-2021 .c-banner-draper-sticky__wrapper {
    padding: 10px 60px 15px 20px !important;
  }
}
@media screen {
  .c-banner-draper-sticky--spring-ahead-2021 p {
    color: #333333 !important;
  }
}
@media screen {
  .c-banner-draper-sticky--spring-ahead-2021 img {
    max-width: 216px !important;
  }
}
@media screen {
  .c-banner-related--spring-ahead-2021 {
    background: #FDEA89 !important;
  }
  .c-banner-related--spring-ahead-2021 h3, .c-banner-related--spring-ahead-2021 p {
    color: #333333 !important;
  }
}
@media screen {
  .c-banner-draper--community {
    height: auto;
    padding-top: 140px;
    margin-top: -100px;
  }
  .c-banner-draper--community:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-position: top -150px center;
    background-size: 1400px;
    background-repeat: no-repeat;
    z-index: -1;
    width: 100%;
    height: 140px;
  }
  .c-banner-draper--community > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1152px;
  }
}
@media screen and (max-width: 1440px) {
  .c-banner-draper--community > div {
    margin: 0 auto;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper--community > div {
    flex-direction: column;
  }
}
@media screen {
  .c-banner-draper--community .c-banner-draper__copy {
    max-width: 720px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper--community .c-banner-draper__copy {
    text-align: center;
    padding-right: 0;
  }
}
@media screen {
  .c-banner-draper--community .c-banner-draper__copy h2 {
    line-height: 1.125;
  }
}
@media screen {
  .c-banner-draper--community .c-banner-draper__copy h2, .c-banner-draper--community .c-banner-draper__copy p {
    margin-top: 9px;
  }
}
@media screen {
  .c-banner-draper--community .c-banner-draper__copy p {
    color: #6E7687;
  }
}
@media screen {
  .c-banner-draper--community .c-banner-draper__art {
    max-width: 526px;
    position: relative;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper--community .c-banner-draper__art {
    margin-top: 30px;
  }
}
@media screen {
  .c-banner-draper--community .c-banner-draper__art:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    width: calc(100% + 32px);
    height: 200px;
    margin-top: -100px;
    border-radius: 12px;
    background-color: #D6E0EF;
    opacity: 0.4;
    z-index: -1;
  }
}
@media screen and (max-width: 768px) {
  .c-banner-draper--community .c-banner-draper__art:before {
    display: none;
  }
}
@media screen {
  .c-banner-draper--community .c-banner-draper__art img {
    width: 100%;
    border-radius: 12px;
  }
}
@media screen {
  .c-banner-draper--community-width + div > div {
    max-width: 1152px;
  }
}
@media screen and (max-width: 1440px) {
  .c-banner-draper--community-width + div > div {
    margin: 0 auto;
  }
}
@media screen {
  .c-banner-draper--community-width + div > div h3 {
    font-size: 1.875rem; /* 30/16 */
  }
}
@media screen {
  .c-banner-draper--community-width + div > div .l-border-bottom {
    border-bottom: none;
  }
}
@media screen {
  .c-banner-draper--community-intersticial {
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .c-banner-draper--community-intersticial:before {
    display: none;
  }
  .c-banner-draper--community-intersticial > div {
    display: flex;
    align-items: center;
    max-width: 1152px;
  }
}
@media screen and (max-width: 1440px) {
  .c-banner-draper--community-intersticial > div {
    margin: 0 auto;
  }
}
@media screen {
  .c-banner-draper--community-intersticial > div .c-banner-draper__copy {
    text-align: center;
    padding: 0 60px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper--community-intersticial > div .c-banner-draper__copy {
    padding: 0;
  }
}
@media screen {
  .c-banner-draper--community-intersticial > div .c-banner-draper__copy h3 {
    font-size: 1.875rem; /* 30/16 */
  }
}
@media screen {
  .c-banner-draper--community-intersticial > div .c-banner-draper__copy p {
    color: #6E7687;
    margin-top: 12px;
  }
}
@media screen {
  .c-banner-draper--community-intersticial > div .c-banner-draper__art {
    min-width: 230px;
    height: 215px;
  }
}
@media screen and (max-width: 992px) {
  .c-banner-draper--community-intersticial > div .c-banner-draper__art {
    display: none;
  }
}
@media screen {
  .c-banner-draper--community-intersticial > div .c-banner-draper__art img {
    width: 100%;
  }
}
@media screen {
  .c-banner-draper--community-connect .c-banner-draper__art--left {
    background-image: url(/assets/artwork/community-connect-left-bce21b6b2108866cbbf453b81faf599c264a9b97090d3a638629260e1a19e34f.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .c-banner-draper--community-connect .c-banner-draper__art--right {
    background-image: url(/assets/artwork/community-connect-right-74345afbd0f42e2fed5a8e4f8d4ac0d8c3decf3ca3cb59f1a4c151e3a14bed26.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
}
@media screen {
  .c-banner-draper--community-resources .c-banner-draper__art--left {
    height: 228px !important;
    background-image: url(/assets/artwork/community-people-left-7c2e3b4d6f8ac4183f79f1a9c845e49d25b0831d8e7ad08db1923240be20e86c.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .c-banner-draper--community-resources .c-banner-draper__art--right {
    height: 221px !important;
    background-image: url(/assets/artwork/community-people-right-033285e844670c7bf19a5ae4560402289e11c53111ea950344d424598c83b019.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
}
@media screen {
  .c-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(59, 64, 72, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: scroll;
    z-index: 999999;
  }
}
@media screen and (max-width: 992px) {
  .c-modal {
    padding: 20px;
  }
}
@media screen {
  .c-modal .c-modal__close {
    display: flex;
    align-items: center;
    width: 36px;
    height: 36px;
    background: #ffffff;
    border-radius: 0.5625rem;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    justify-content: center;
  }
  .c-modal .c-modal__close svg {
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    margin: 0;
  }
}
@media screen {
  .c-modal .c-modal-wrapper {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    width: 720px;
    border-radius: 0.5625rem;
    overflow: hidden;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: a-zoom-in;
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .c-modal .c-modal-wrapper {
    padding-top: 24px;
  }
}
@media screen {
  .c-modal .c-modal__copy {
    flex-grow: 1;
    padding: 15px 36px 24px;
  }
}
@media screen and (max-width: 768px) {
  .c-modal .c-modal__copy {
    padding: 27px 24px;
  }
}
@media screen {
  .c-modal .c-modal__copy .c-modal__title {
    margin-bottom: 18px;
  }
}
@media screen and (max-width: 600px) {
  .c-modal .c-modal__copy .c-modal__title {
    font-size: 1.875rem;
  }
}
@media screen {
  .c-modal .c-modal__copy .c-modal__subtitle {
    font-weight: 500;
    font-size: 1.3125rem;
  }
}
@media screen and (max-width: 600px) {
  .c-modal .c-modal__copy .c-modal__subtitle {
    font-size: 1.125rem;
  }
}
@media screen {
  .c-modal .c-modal__copy .c-modal__description p, .c-modal .c-modal__copy .c-modal__description ol, .c-modal .c-modal__copy .c-modal__description ul {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-size: 1rem;
    margin-top: 24px;
    color: #6E7687;
  }
}
@media screen and (max-width: 600px) {
  .c-modal .c-modal__copy .c-modal__description p, .c-modal .c-modal__copy .c-modal__description ol, .c-modal .c-modal__copy .c-modal__description ul {
    font-size: 0.9375em;
  }
}
@media screen {
  .c-modal .c-modal__copy .c-modal__description a {
    font-weight: 400 !important;
    color: #158443 !important;
    margin-left: 0px !important;
    text-decoration: underline;
    padding: 0px;
  }
}
@media screen {
  .c-modal .c-modal__copy .c-modal__description p:first-child {
    margin-top: 0;
  }
}
@media screen {
  .c-modal .c-modal__copy .c-modal__description--scroll {
    max-height: 240px;
    overflow: scroll;
    border-bottom: 1px solid #EFF3F6;
    padding-bottom: 24px;
  }
}
@media screen {
  .c-modal .c-modal__copy .c-modal__form .c-modal__checkbox {
    display: inline-block;
  }
}
@media screen {
  .c-modal--sign-up {
    text-align: center;
    white-space: normal;
  }
  .c-modal--sign-up .c-modal__title {
    font-size: 1.6875em; /* 27/16 */
    padding: 0 60px;
    margin-top: 0 !important;
    color: #333333 !important;
  }
}
@media screen and (max-width: 600px) {
  .c-modal--sign-up .c-modal__title {
    font-size: 1.3125rem !important; /* 21/16 */
    padding: 0;
  }
}
@media screen {
  .c-modal--sign-up .c-modal__artwork {
    width: 100%;
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .c-modal--sign-up .c-modal__artwork {
    display: none;
  }
}
@media screen {
  .c-modal--sign-up .c-modal__artwork img {
    width: 100%;
    max-width: 140px !important;
    margin: 0 auto !important;
    border: 0 !important;
  }
}
@media screen {
  .c-modal--sign-up .c-modal__artwork .c-modal__artwork--subscribe {
    max-width: 210px !important;
  }
  .c-modal--sign-up .o-button--green {
    color: #ffffff;
  }
  .c-modal--sign-up .o-button--green:hover {
    color: #ffffff;
  }
}
@media screen {
  .c-modal--highlighting .c-modal__title {
    font-size: 1.5rem; /* 24/16 */
  }
  .c-modal--highlighting .c-modal__artwork {
    width: 100%;
    margin-top: 30px;
  }
  .c-modal--highlighting .c-modal__artwork img {
    width: 100%;
    max-width: 250px !important;
  }
  .c-modal--highlighting .c-modal__copy {
    padding-bottom: 36px !important;
  }
  .c-modal--highlighting .c-modal__copy .c-modal__description a {
    color: #6E7687 !important;
  }
  .c-modal--highlighting .o-button__svg--grey-regent {
    fill: #959DA5 !important;
  }
}
@media screen {
  .c-modal--trailer .c-modal-wrapper {
    background: none;
    width: auto;
  }
}
@media screen and (max-width: 768px) {
  .c-modal--trailer .c-modal-wrapper {
    width: 100%;
  }
}
@media screen {
  .c-modal--trailer .c-modal-wrapper .c-modal__player {
    width: 480px;
    border-radius: 0.5625rem;
    overflow: hidden;
    padding-top: 56.25%;
    background: #333333;
    position: relative;
  }
}
@media screen and (min-width: 1080px) {
  .c-modal--trailer .c-modal-wrapper .c-modal__player {
    width: 720px;
  }
}
@media screen {
  .c-modal--trailer .c-modal-wrapper iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen {
  .c-modal--trailer .c-modal__close {
    right: 0;
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-modal--trailer .c-modal__close {
    position: fixed;
    top: 15px;
    right: 15px;
  }
}
@media screen {
  .c-modal--trailer .c-modal__close svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
  }
}
@media screen {
  .c-modal--video-tutorial .c-modal__copy {
    padding-top: 24px;
  }
  .c-modal--video-tutorial .c-modal__title {
    font-size: 1.6875rem !important; /* 27/16 */
    line-height: 1.125;
    margin-bottom: 6px !important;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .c-modal--video-tutorial .c-modal__title {
    font-size: 1.5em !important; /* 24/16 */
  }
}
@media screen {
  .c-modal--video-tutorial .c-modal__description {
    font-size: 1rem !important;
    color: #6E7687;
    text-align: center;
  }
  .c-modal--video-tutorial .c-modal__description a {
    color: #6E7687 !important;
  }
}
@media screen {
  .c-modal--video-tutorial .c-modal__video-tutorial {
    position: relative;
    padding-top: 56.25%;
    margin-top: 24px;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 0.5625rem; /* 9/16 */
  }
  .c-modal--video-tutorial .c-modal__video-tutorial img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 10px;
  }
  .c-modal--video-tutorial .c-modal__video-tutorial:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    opacity: 0.25;
    z-index: 1;
  }
}
@media screen {
  .c-modal--video-tutorial .o-button-video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
  }
}
@media screen {
  .c-modal--video-tutorial .c-modal__player-container:before {
    display: none;
  }
}
@media screen {
  .c-modal--video-tutorial .c-modal__complete-illustration:before {
    display: none;
  }
  .c-modal--video-tutorial .c-modal__complete-illustration img {
    transform: translateX(-50%);
    left: 50%;
    width: auto;
    height: 100%;
    max-width: 400px;
  }
}
@media screen {
  @keyframes shimmer {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
}
@media screen {
  .o-skeleton__artwork {
    max-width: 100%;
    border-radius: 9px;
    background: #EFF3F6;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
    background-size: 800px 104px;
    width: 100%;
    height: 160px;
  }
}
@media screen {
  .o-skeleton__graphic {
    max-width: 100%;
    border-radius: 9px;
    background: #EFF3F6;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
    background-size: 800px 104px;
    width: 64px;
    height: 64px;
  }
}
@media screen {
  .o-skeleton__graphic--small {
    width: 54px;
    height: 54px;
  }
}
@media screen {
  .o-skeleton__graphic--large {
    width: 90px;
    height: 90px;
  }
}
@media screen {
  .o-skeleton__title {
    max-width: 100%;
    border-radius: 9px;
    background: #EFF3F6;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
    background-size: 800px 104px;
    width: 100%;
    max-width: 260px;
    height: 36px;
  }
}
@media screen and (max-width: 600px) {
  .o-skeleton__title {
    height: 33px;
  }
}
@media screen {
  .o-skeleton__text {
    max-width: 100%;
    border-radius: 9px;
    background: #EFF3F6;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
    background-size: 800px 104px;
    width: 250px;
    height: 12px;
  }
}
@media screen {
  .o-skeleton__text--small {
    width: 180px;
  }
}
@media screen {
  .o-skeleton__button {
    max-width: 100%;
    border-radius: 9px;
    background: #EFF3F6;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
    background-size: 800px 104px;
    width: 120px;
    height: 42px;
  }
}
@media screen and (max-width: 600px) {
  .o-skeleton__button {
    display: block;
    margin-top: 9px;
  }
}
@media screen {
  .o-skeleton-sidebar__meta-wrapper {
    margin-left: 12px;
  }
}
@media screen {
  .o-skeleton-sidebar__meta {
    max-width: 100%;
    border-radius: 9px;
    background: #EFF3F6;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
    background-size: 800px 104px;
    width: 60px;
    height: 9px;
  }
}
@media screen {
  .o-skeleton-sidebar__meta--small {
    width: 30px;
    margin-top: 9px;
  }
}
@media screen {
  .o-skeleton-sidebar__meta--large {
    width: 180px;
  }
}
@media screen {
  .o-skeleton-card {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    width: 100%;
    padding: 30px 24px;
  }
}
@media screen {
  .o-skeleton-card--small {
    padding: 24px 24px;
  }
}
@media screen {
  .o-skeleton-card--large {
    padding-bottom: 45px;
  }
}
@media screen {
  .o-skeleton-card__title {
    max-width: 100%;
    border-radius: 9px;
    background: #EFF3F6;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
    background-size: 800px 104px;
    width: 250px;
    height: 30px;
  }
}
@media screen {
  .o-skeleton-card__text {
    max-width: 100%;
    border-radius: 9px;
    background: #EFF3F6;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
    background-size: 800px 104px;
    width: 330px;
    height: 12px;
    margin-top: 12px;
  }
}
@media screen {
  .c-skeleton-sidebar {
    align-self: flex-start;
    opacity: 0.8;
  }
}
@media screen and (max-width: 992px) {
  .c-skeleton-sidebar {
    display: none;
  }
}
@media screen {
  .c-skeleton-sidebar > div {
    display: flex;
    flex-wrap: wrap;
  }
  .c-skeleton-sidebar > div:last-child {
    position: absolute;
    bottom: 30px;
  }
}
@media screen {
  .c-skeleton-sidebar .c-skeleton-sidebar__text {
    margin-top: 44px;
  }
  .c-skeleton-sidebar .c-skeleton-sidebar__text:first-child {
    margin-top: 0;
  }
  .c-skeleton-sidebar .c-skeleton-sidebar__text:nth-child(1) {
    width: 210px;
  }
  .c-skeleton-sidebar .c-skeleton-sidebar__text:nth-child(2) {
    width: 130px;
  }
  .c-skeleton-sidebar .c-skeleton-sidebar__text:nth-child(3) {
    width: 240px;
  }
  .c-skeleton-sidebar .c-skeleton-sidebar__text:nth-child(4) {
    width: 100px;
  }
  .c-skeleton-sidebar .c-skeleton-sidebar__text:nth-child(5) {
    width: 180px;
  }
}
@media screen {
  .c-skeleton-admin {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .c-skeleton-admin .l-half-col {
    width: calc(50% - 10px);
  }
  .c-skeleton-admin .o-skeleton-card__text:nth-child(1) {
    width: 210px;
  }
  .c-skeleton-admin .o-skeleton-card__text:nth-child(2) {
    width: 100px;
  }
}
@media screen {
  .c-skeleton-tutorials {
    width: 100%;
  }
}
@media screen and (max-width: 1140px) {
  .c-skeleton-tutorials {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .c-skeleton-tutorials > div {
    margin-top: 30px;
  }
}
@media screen and (max-width: 992px) {
  .c-skeleton-tutorials {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .c-skeleton-tutorials {
    display: block;
  }
}
@media screen {
  .c-tutorial-item {
    position: relative;
  }
  .c-tutorial-item > a {
    text-decoration: none;
    display: block; /* this might not be a good idea*/
  }
  .c-tutorial-item .o-button--bookmark {
    display: none;
  }
  .c-tutorial-item .c-tutorial-item__actions {
    display: none;
  }
  .c-tutorial-item .o-button--mark-as-complete {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 27px;
    height: 27px;
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-item .o-button--mark-as-complete {
    display: none !important;
  }
}
@media screen {
  .c-tutorial-item .o-button--mark-as-complete .checkbox__input, .c-tutorial-item .o-button--mark-as-complete .checkbox__indicator {
    top: 0;
  }
}
@media screen {
  .c-tutorial-item .o-button--mark-as-complete button:focus {
    outline: none;
  }
}
@media screen {
  .c-tutorial-item .o-badge-tutorial--locked, .c-tutorial-item .o-badge-tutorial--recording {
    display: none;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__art {
    background: #ffffff;
    border-radius: 0.5625rem;
    overflow: hidden;
    position: relative;
  }
  .c-tutorial-item .c-tutorial-item__art img {
    display: flex;
    width: 100%;
    height: auto;
    align-self: flex-start;
  }
  .c-tutorial-item .c-tutorial-item__art img.c-tutorial-item__art-image--alternate, .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__in-progress, .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete {
    display: none;
  }
  .c-tutorial-item .c-tutorial-item__art .o-badge {
    position: absolute;
    z-index: 1;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 600px) {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    word-break: break-word;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__category {
    font-family: "Bitter", serif;
    font-size: 1.3125rem; /* 21/16 */
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.5px;
    color: #333333;
    padding-right: 12px;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__category {
    font-size: 1.125rem; /* 18/16 */
    font-weight: 500;
    margin-top: 9px;
    display: none;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__parent {
    display: none;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text > span {
    display: block;
    width: 100%;
    font-size: 0.9375rem;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata-short {
    color: #6E7687;
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
    width: 100%;
    margin-top: 8px;
    font-size: 0.9375rem;
    color: #6E7687;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description p, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description ul, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description ol {
    margin-top: 8px;
    font-size: 0.9375rem;
    color: #6E7687;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description ul, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description ol {
    padding-left: 10px;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform-long, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__parent, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__continue, .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__type {
    color: #6E7687;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__continue {
    display: none;
    margin-top: 8px;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform-long {
    display: none;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__in-progress {
    display: none;
    width: 100%;
    height: 6px;
    border-radius: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__in-progress .c-tutorial-item__in-progress--fill {
    width: 50%;
    background: #158443;
    height: 6px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100px;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__complete {
    display: none;
    color: #ffffff;
    margin-top: 10px;
    background: #158443;
    align-items: center;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__complete .c-tutorial-item__complete-text {
    position: relative;
    top: -1px;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__complete i {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 15px;
    height: 20px;
    margin-right: 6px;
    border-radius: 7px;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__complete i svg {
    width: 11px;
    fill: #ffffff;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .o-badge {
    width: auto;
    font-size: 0.6875rem; /* 11/16 */
    margin-top: 10px;
    display: none;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__text .o-badge--soon {
    display: none;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__lower {
    display: none;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__number-badge .o-badge-tutorial--checkmark {
    display: none;
  }
}
@media screen {
  .c-tutorial-item.c-tutorial-item--in-progress .c-tutorial-item__in-progress, .c-tutorial-item.c-tutorial-item--in-progress .c-tutorial-item__continue {
    display: block;
  }
}
@media screen {
  .c-tutorial-item.c-tutorial-item--complete .c-tutorial-item__complete {
    display: inline-flex;
  }
  .c-tutorial-item.c-tutorial-item--complete .c-tutorial-item__number-badge .o-badge-tutorial {
    display: none;
  }
  .c-tutorial-item.c-tutorial-item--complete .c-tutorial-item__number-badge .o-badge-tutorial--checkmark {
    display: flex;
  }
  .c-tutorial-item.c-tutorial-item--complete [data-tooltip]:before {
    content: "Unmark as complete" !important;
    right: -96px;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--card {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen {
  .c-tutorial--card .o-button--bookmark {
    display: inline-block;
    position: absolute;
    top: 177px;
    right: 0px;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item {
    position: relative;
  }
}
@media screen and (max-width: 600px) {
  .c-tutorial--card .c-tutorial-item {
    margin-top: 45px;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item a {
    padding: 0 !important;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .o-badge-video, .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .o-badge--pro {
    display: inline-flex;
    position: absolute;
    left: auto !important;
    right: 12px !important;
    top: 12px !important;
    z-index: 1;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__in-progress {
    width: 100%;
    height: 6px;
    border-radius: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__in-progress .c-tutorial-item__in-progress--fill {
    width: 50%;
    background: #158443;
    height: 6px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete {
    color: #ffffff;
    background: #158443;
    align-items: center;
    margin-top: 0;
    z-index: 2;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete .c-tutorial-item__complete-text {
    position: relative;
    top: -1px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete i {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 15px;
    height: 20px;
    margin-right: 6px;
    border-radius: 7px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete i svg {
    width: 11px;
    fill: #ffffff;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art .o-badge {
    top: 12px;
    left: 12px;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art--product {
    height: auto;
    margin-bottom: -12px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art--product img {
    transform: scale(0.9);
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__art--product + .c-tutorial-item__text + .c-tutorial-item__number-badge .o-badge-tutorial {
    left: 8px;
    top: 162px;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text {
    padding: 0 12px;
    margin-top: 15px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 21px;
    padding-right: 33px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__category {
    display: block !important;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    margin-top: 8px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform {
    align-self: flex-end;
    margin-top: 5px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata-short, .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__type {
    font-size: 13px;
    letter-spacing: -0.1px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description, .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__in-progress, .c-tutorial--card .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__complete {
    display: none;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text span.o-badge-tutorial {
    width: auto;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__text span.o-badge-tutorial > img {
    width: auto;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__platform {
    display: none;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__icon {
    display: flex;
    position: absolute;
    top: 12px !important;
    right: 13px;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__icon .o-badge-video {
    align-self: center;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item .o-badge-tutorial {
    position: absolute;
    left: 12px;
    top: 132px;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item--in-progress a {
    padding-bottom: 27px !important;
  }
  .c-tutorial--list .c-tutorial-item--complete .c-tutorial-item__metadata-short {
    display: none !important;
  }
  .c-tutorial--list .c-tutorial--list__page {
    margin-top: 15px;
  }
  .c-tutorial--list .c-tutorial--list__page:first-child {
    margin-top: 0;
  }
  .c-tutorial--list .c-tutorial-item {
    margin-top: 15px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item {
    margin-top: 15px !important;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item:first-child {
    margin-top: 0;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .o-button--bookmark {
    display: inline-block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 12px;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .o-link--bookmark-remove {
    color: #6E7687;
    text-decoration: underline;
    display: inline-block;
    position: absolute;
    z-index: 1;
    bottom: 21px;
    right: 20px;
    box-shadow: none;
    border-radius: none;
    padding: 0px;
    cursor: pointer;
    font-size: 0.9375em;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .o-link--bookmark-remove {
    position: absolute !important;
    top: auto !important;
    bottom: 21px !important;
    right: 21px !important;
    left: auto !important;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item > a, .c-tutorial--list .c-tutorial-item > div.c-tutorial-item__wrapper {
    background: #ffffff;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    border-radius: 0.5625rem;
    padding: 21px 42px 21px 21px;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__upper {
    display: grid;
    grid-template-columns: 90px 1fr 42px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 1fr 72px !important;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DBDDE0;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art {
    width: 72px;
    height: 72px;
    order: 2;
  }
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art .o-badge {
    top: 15px;
    left: 15px;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art .o-badge {
    display: none;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art img {
    align-self: auto;
    transform: scale(1.4);
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art img.c-tutorial-item__art-image--primary {
    display: none;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art img.c-tutorial-item__art-image--alternate {
    display: flex;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete {
    display: none;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art--product img {
    transform: scale(1) !important;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text {
    margin-left: 18px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text {
    display: block;
    order: 1;
    margin: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.3125rem; /* 21/16 */
  }
}
@media screen and (max-width: 600px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.25rem; /* 21/16 */
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .o-badge--pro {
    display: inline-flex;
    max-width: min-content;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    display: none;
    margin-top: 8px;
  }
}
@media screen and (max-width: 600px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen and (max-width: 600px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata-short, .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata-long {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
    display: block;
    margin-bottom: 8px;
    padding-right: 80px;
  }
}
@media screen and (max-width: 600px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
    padding-right: 0;
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform, .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__parent {
    align-self: flex-end;
    margin-top: 9px;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform, .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__parent {
    align-self: normal;
  }
}
@media screen and (max-width: 600px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform, .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__parent {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__icon {
    display: flex;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__icon {
    display: none;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__icon .o-badge-video {
    align-self: center;
  }
}
@media screen {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__icon .o-badge--pro {
    z-index: 1;
    display: inline-table;
    align-self: center;
    box-shadow: none;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .o-badge-tutorial {
    position: absolute;
    left: 12px !important;
    top: 132px !important;
    z-index: 1;
  }
}
@media screen {
  .c-tutorial--list-style-basic .c-tutorial-item {
    border-bottom: 1px solid #DBDDE0;
    padding-bottom: 20px;
  }
  .c-tutorial--list-style-basic .c-tutorial-item .o-button--bookmark {
    display: inline-flex;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .c-tutorial--list-style-basic .c-tutorial-item .o-badge--new {
    display: none;
  }
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__art {
    display: none;
  }
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__title {
    order: 1;
    margin-top: 6px;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.25rem;
  }
}
@media screen {
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__metadata {
    order: 0;
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__text-upper-meta {
    order: 2;
    margin-top: 6px;
  }
}
@media screen {
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__description {
    font-size: 0.875rem; /* 14/16 */
    margin-top: 0;
    padding-right: 30px;
  }
}
@media screen {
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__platform, .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__metadata-short {
    display: none;
  }
}
@media screen {
  .c-tutorial--list-style-basic .c-tutorial-item--in-progress {
    border-bottom: none;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item {
    padding-bottom: 20px;
    border-bottom: 1px solid #DBDDE0;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item {
    padding-bottom: 0;
    border-bottom: none;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item a {
    background: #ffffff;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    border-radius: 0.5625rem;
    padding: 21px;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item a > .c-tutorial-item__icon {
    display: none;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .o-button--bookmark {
    display: inline-flex;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .o-button--bookmark {
    right: 12px;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper {
    display: grid;
    grid-template-columns: 1fr 90px;
    grid-column-gap: 30px;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 1fr 72px;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 1;
    width: 90px;
    height: 90px;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art {
    width: 72px;
    height: 72px;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art .o-badge--new {
    display: none;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art .c-tutorial-item__art-image--primary {
    display: none;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art .c-tutorial-item__art-image--alternate {
    display: flex;
    align-self: auto;
    transform: scale(1.4);
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper {
    order: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper {
    align-content: flex-start;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper .o-badge--new {
    display: inline-flex;
    position: absolute;
    top: -20px;
    right: -10px;
    z-index: 2;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper .o-badge--new {
    top: 0;
    right: 10px;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper .c-tutorial-item__metadata {
    order: 0;
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper .c-tutorial-item__metadata {
    display: none;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper .c-tutorial-item__title {
    order: 1;
    font-size: 1.5rem; /* 24/16 */
    line-height: 1.25;
    margin-top: 3px;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper .c-tutorial-item__title {
    font-size: 1.25rem;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper .c-tutorial-item__platform {
    order: 2;
    font-size: 0.875rem;
    margin-top: 3px;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper-meta {
    display: none;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 10px;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower {
    flex-wrap: wrap;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__description {
    margin-top: 0;
    order: 1;
    padding-right: 30px;
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__description {
    order: 0;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__metadata-short {
    order: 0;
    width: auto;
    margin-right: 10px;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__metadata-short {
    order: 1;
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__metadata-short .o-badge--pro {
    display: inline-flex;
    border-color: #157CB8;
    margin-top: 0;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__metadata-short .o-badge-video {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__metadata-short .o-badge-video svg {
    width: 13px;
    height: 14px;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__metadata-short .c-tutorial-item__metadata-short-string {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__metadata-short .c-tutorial-item__metadata-short-string {
    display: inline-block;
    margin-left: 9px;
    font-size: 0.875rem;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item--in-progress {
    border-bottom: none;
  }
}
@media screen {
  .c-tutorial--list-style-complex .c-tutorial-item--complete .c-tutorial-item__art .c-tutorial-item__complete {
    display: none;
  }
  .c-tutorial--list-style-complex .c-tutorial-item--complete .c-tutorial-item__lower {
    flex-wrap: wrap;
  }
  .c-tutorial--list-style-complex .c-tutorial-item--complete .c-tutorial-item__lower .c-tutorial-item__description {
    order: 0;
  }
  .c-tutorial--list-style-complex .c-tutorial-item--complete .c-tutorial-item__lower .c-tutorial-item__complete {
    order: 1;
  }
  .c-tutorial--list-style-complex .c-tutorial-item--complete .c-tutorial-item__lower .o-badge--pro, .c-tutorial--list-style-complex .c-tutorial-item--complete .c-tutorial-item__lower .o-badge-video {
    display: none !important;
  }
}
@media screen {
  .c-tutorial--list-style-complex-zero .c-tutorial-item__upper {
    grid-template-columns: 1fr !important;
  }
  .c-tutorial--list-style-complex-zero .c-tutorial-item__title {
    margin-top: 10px !important;
    padding-right: 0 !important;
  }
  .c-tutorial--list-style-complex-zero .o-button--bookmark, .c-tutorial--list-style-complex-zero .c-tutorial-item__art, .c-tutorial--list-style-complex-zero .c-tutorial-item__metadata-short, .c-tutorial--list-style-complex-zero .c-tutorial-item__platform {
    display: none !important;
  }
  .c-tutorial--list-style-complex-zero .c-tutorial-item__description {
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-tutorial--list-style-complex-zero .c-tutorial-item__metadata {
    display: block !important;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item {
    height: 120px;
  }
  .c-tutorial--list-progress .c-tutorial-item a {
    padding: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list-progress .c-tutorial-item a {
    align-content: initial !important;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 120px 1fr !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list-progress .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 120px 1fr !important;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__text {
    align-content: center !important;
    padding-right: 18px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list-progress .c-tutorial-item__text {
    order: 2 !important;
    padding-left: 18px;
    min-width: 100%;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__art {
    width: 120px !important;
    height: 120px !important;
    border-radius: 0 !important;
    background: none !important;
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list-progress .c-tutorial-item__art {
    order: 1;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__art:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(55, 55, 55, 0.8);
    z-index: 1;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__art img.c-tutorial-item__art-image--alternate {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    height: auto;
    transform: scale(2);
    filter: blur(4px);
  }
}
@media screen {
  .c-tutorial--list-progress .o-circular--progress {
    z-index: 2;
  }
  .c-tutorial--list-progress .o-circular--progress .o-circular--progress__container-left, .c-tutorial--list-progress .o-circular--progress .o-progress--half-circle {
    border-color: #ffffff !important;
  }
  .c-tutorial--list-progress .o-circular--progress .o-circular-progress--label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 46px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -23px 0 0 -27px;
    color: #ffffff;
    font-family: "Bitter", serif;
    font-weight: bold;
    letter-spacing: -0.5px;
    font-size: 1.125rem !important; /* 18/16 */
  }
  .c-tutorial--list-progress .o-circular--progress .o-circular-progress--label .o-circluar--percent__text {
    color: #ffffff !important;
    font-size: 1.125rem !important;
    padding: 0;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__title {
    font-size: 1.1875rem !important; /* 19/16 */
    margin-top: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    width: 100% !important;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__platform, .c-tutorial--list-progress .c-tutorial-item__metadata {
    display: block !important;
    margin-top: 3px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    width: 100% !important;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__platform-long {
    display: none !important;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__platform, .c-tutorial--list-progress .c-tutorial-item__metadata, .c-tutorial--list-progress .c-tutorial-item__description {
    font-size: 0.875rem !important; /* 14/16 */
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__title, .c-tutorial--list-progress .c-tutorial-item__platform, .c-tutorial--list-progress .c-tutorial-item__description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
  }
}
@media screen {
  .c-tutorial--list-progress .c-tutorial-item__description {
    margin: 0 !important;
  }
  .c-tutorial--list-progress .c-tutorial-item__description p {
    margin: 0 !important;
    font-size: 0.875rem !important;
  }
}
@media screen {
  .c-tutorial--featured .l-tutorial-container__wrapper {
    grid-row-gap: 30px;
  }
  .c-tutorial--featured .c-tutorial-item--in-progress .c-tutorial-item__in-progress {
    display: block;
  }
  .c-tutorial--featured .c-tutorial-item {
    width: 480px;
    min-width: 480px;
    height: 325px;
    position: relative;
  }
  .c-tutorial--featured .c-tutorial-item > a {
    display: flex;
    align-items: flex-end;
    height: 100%;
    overflow: hidden;
    border-radius: 0.5625rem;
  }
  .c-tutorial--featured .c-tutorial-item > a:hover .c-tutorial-item__art img {
    transform: scale(1.3);
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__art {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__art:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0) 0%, rgb(51, 51, 51) 100%);
    z-index: 1;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__art img {
    transition: 0.5s all;
    transform: scale(1.2);
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__art .o-badge {
    left: 15px;
    top: 15px;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__art .o-badge-video, .c-tutorial--featured .c-tutorial-item .c-tutorial-item__art .o-badge--pro {
    right: 15px !important;
    top: 15px !important;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text {
    position: relative;
    align-self: flex-end;
    padding: 21px 24px;
    z-index: 2;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text span {
    color: #ffffff;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.875rem; /* 30/16 */
    line-height: 1.25;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__category {
    font-size: 1.3125em; /* 21/16 */
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
    display: none;
    color: #ffffff;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    margin-top: 12px !important;
    display: block !important;
    font-size: 0.9375rem !important; /* 15/16 */
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform {
    margin-top: 3px;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata-short, .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata, .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform {
    color: #ffffff !important;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__lower {
    display: none !important;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__text-upper-meta {
    display: none !important;
  }
  .c-tutorial--featured .c-tutorial-item .c-tutorial-item__icon {
    position: absolute;
    right: 15px;
    top: 15px !important;
    z-index: 3;
  }
  .c-tutorial--featured .c-tutorial-item .o-badge-tutorial {
    display: none;
  }
  .c-tutorial--featured .c-tutorial-item .o-button--bookmark {
    display: none;
  }
}
@media screen {
  .c-tutorial--card .c-tutorial-item__metadata-short .o-badge-video {
    display: none;
  }
  .c-tutorial--card.c-tutorial--number .c-tutorial-item__text {
    margin-top: 40px !important;
  }
  .c-tutorial--card.c-tutorial--number .c-tutorial-item__art--product + .c-tutorial-item__text {
    margin-top: 20px !important;
  }
}
@media screen {
  .c-tutorial--list.c-tutorial--number .c-tutorial-item {
    padding-left: 86px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list.c-tutorial--number .c-tutorial-item {
    padding-left: 56px;
  }
}
@media screen {
  .c-tutorial--list.c-tutorial--number .c-tutorial-item:before {
    content: "";
    position: absolute;
    left: 27px;
    top: 100px;
    width: 6px;
    height: calc(100% - 50px);
    background: #DFE7F0;
    border-radius: 100px;
  }
}
@media screen {
  .c-tutorial--list.c-tutorial--number .c-tutorial-item.c-tutorial-item--complete:before {
    background: #158443;
  }
}
@media screen {
  .c-tutorial--list.c-tutorial--number .o-badge-tutorial {
    position: absolute;
    top: 36px;
    left: 0;
  }
}
@media screen {
  .c-tutorial--contributor .c-tutorial-item__text .c-tutorial-item__complete {
    display: none;
  }
  .c-tutorial--contributor .c-tutorial-item__text .o-badge-role {
    display: inline-flex;
  }
  .c-tutorial--contributor .c-tutorial-item__text .c-tutorial-item__platform {
    display: none;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item {
    margin-top: 15px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item {
    margin-top: 0;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item a {
    padding: 13px 15px;
    grid-template-columns: 54px 1fr;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item a {
    padding: 0;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item .o-button--bookmark {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .o-button--bookmark {
    display: block;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__art {
    width: 54px;
    height: 54px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__art {
    width: 72px;
    height: 72px;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__art span.o-badge {
    display: none;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text {
    margin-left: 15px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text {
    margin-left: 0;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.125rem; /* 18/16 */
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.3125rem;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    margin-top: 2px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    margin-top: 8px;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description, .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform {
    display: none;
  }
}
@media screen {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__icon, .c-tutorial--mini .c-tutorial-item .c-tutorial-item__in-progress, .c-tutorial--mini .c-tutorial-item .c-tutorial-item__complete {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__icon {
    display: none;
  }
}
@media screen {
  .c-tutorial-episode {
    position: relative;
    padding-left: 64px;
    margin-top: 20px;
  }
  .c-tutorial-episode:first-child {
    margin-top: 0;
  }
  .c-tutorial-episode:last-child:before {
    display: none;
  }
  .c-tutorial-episode:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 40px;
    width: 6px;
    height: calc(100% - 32px);
    background: #DFE7F0;
    border-radius: 100px;
    transition: 0.75s all;
  }
  .c-tutorial-episode > div:last-child {
    height: 0;
  }
  .c-tutorial-episode a {
    color: #333333;
    text-decoration: none;
  }
  .c-tutorial-episode a:hover {
    color: #158443;
  }
  .c-tutorial-episode h4 {
    font-size: 1.3125rem; /* 21/16 */
  }
  .c-tutorial-episode p {
    font-size: 1rem;
    margin-top: 10px;
    color: #333333;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-episode p {
    font-size: 0.9375rem;
  }
}
@media screen {
  .c-tutorial-episode .c-tutorial-episode__length {
    font-family: "Bitter", serif;
    font-size: 1.125em; /* 18/16 */
    margin-left: 8px;
    position: relative;
    top: 3px;
  }
}
@media screen {
  .c-tutorial-episode .o-badge {
    margin-left: 12px;
    position: relative;
    top: 1px;
  }
}
@media screen {
  .c-tutorial-episode .o-badge-tutorial {
    position: absolute;
    top: -9px;
    left: 0;
    width: 46px;
    height: 46px;
    font-size: 1.1875rem; /* 19/16 */
  }
  .c-tutorial-episode .o-badge-tutorial svg {
    display: none;
  }
}
@media screen {
  .c-tutorial-episode .o-button--mark-as-complete {
    position: absolute;
    left: 0;
    top: -9px;
    width: 46px;
    height: 46px;
    cursor: pointer;
    z-index: 99;
  }
  .c-tutorial-episode .o-button--mark-as-complete:focus {
    outline: none;
  }
}
@media screen {
  .c-tutorial-episode__number-badge .o-badge-tutorial--checkmark, .c-tutorial-episode__number-badge .o-badge-tutorial--locked {
    display: none;
  }
}
@media screen {
  .c-tutorial-episode--completed:before {
    background: #158443 !important;
  }
  .c-tutorial-episode--completed .c-tutorial-episode__number-badge {
    background: #158443;
  }
  .c-tutorial-episode--completed .c-tutorial-episode__number-badge .o-badge-tutorial {
    display: none;
  }
  .c-tutorial-episode--completed .c-tutorial-episode__number-badge .o-badge-tutorial--checkmark {
    display: flex;
  }
  .c-tutorial-episode--completed .c-tutorial-episode__number-badge svg {
    display: block;
  }
  .c-tutorial-episode--completed [data-tooltip]:before {
    left: 70px !important;
    content: attr(data-unmark-complete) !important;
  }
}
@media screen {
  .c-tutorial-episode--locked .o-badge-tutorial {
    display: none;
  }
  .c-tutorial-episode--locked .o-badge-tutorial--locked {
    display: flex;
  }
}
@media screen {
  .c-tutorial-card--large .c-tutorial-item {
    padding: 42px 30px 96px;
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-card--large .c-tutorial-item {
    background: none;
    padding: 0;
    box-shadow: none;
    margin-top: 24px;
  }
}
@media screen {
  .c-tutorial-card--large .c-tutorial-item__art {
    display: flex;
    min-height: 240px;
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-card--large .c-tutorial-item__art {
    background: none;
    margin-bottom: 21px;
    min-height: auto;
  }
}
@media screen {
  .c-tutorial-card--large .c-tutorial-item__art img {
    width: 200px;
    margin: 0 auto;
    align-self: center;
  }
}
@media screen {
  .c-tutorial-card--large .c-tutorial-item__title {
    font-size: 1.6875rem !important; /* 27/16 */
    line-height: 1.3;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-card--large .c-tutorial-item__title {
    font-size: 1.3125rem !important; /* 21/16 */
    line-height: 1.35;
  }
}
@media screen {
  .c-tutorial-card--large .c-tutorial-item__icon {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-card--large .c-tutorial-item__icon {
    top: 0;
    right: 0;
  }
}
@media screen {
  .c-tutorial-card--large .o-button {
    display: flex;
    position: absolute;
    bottom: 30px;
    width: calc(100% - 60px);
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-card--large .o-button {
    width: 100%;
    position: relative;
    bottom: auto;
    margin-top: 18px;
  }
}
@media screen {
  .c-tutorial-card--large .o-progress-indicator {
    margin-top: 18px;
  }
  .c-tutorial-card--large .o-progress-indicator .o-progress-indicator__fill {
    width: 25%;
  }
}
@media screen {
  .c-tutorial-item__art.c-tutorial-item__art--learning-path {
    background: none !important;
    height: 100% !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-item__art.c-tutorial-item__art--learning-path {
    height: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}
@media screen {
  .c-tutorial-item__art.c-tutorial-item__art--learning-path img {
    transform: scale(1) !important;
  }
}
@media screen {
  .o-progress-indicator--learning-path {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: none;
  }
  .o-progress-indicator--learning-path .o-progress-indicator__fill {
    width: 25%;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-item--learning-path {
    margin-top: 24px !important;
  }
}
@media screen {
  .c-tutorial-item--learning-path a {
    grid-template-columns: 90px 1fr 0 !important;
  }
}
@media screen {
  .c-tutorial-item--learning-path .c-tutorial-item__platform {
    display: grid !important;
  }
  .c-tutorial-item--learning-path .c-tutorial-item__platform .o-badge--pro {
    order: 2;
    margin-top: 6px !important;
  }
}
@media screen {
  .c-tutorial-item--learning-path .c-tutorial-item__text .c-tutorial-item__description {
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-item--learning-path .c-tutorial-item__text {
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-item--learning-path .c-tutorial-item__art {
    margin-bottom: 21px !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-item--learning-path .c-tutorial-item__icon {
    top: 0 !important;
    right: 0 !important;
  }
}
@media screen {
  .c-tutorial-item--learning-path .c-tutorial-item__continue {
    display: flex !important;
    box-shadow: 0 !important;
    color: #ffffff !important;
    background: #158443 !important;
    padding: 5px 9px 5px 11px !important;
    align-items: center;
    position: absolute;
    bottom: 21px;
    left: 129px;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial-item--learning-path .c-tutorial-item__continue {
    left: 0;
    padding: 5px 9px 5px 11px !important;
    border-radius: 0.5625rem !important;
  }
}
@media screen {
  .c-tutorial-item--learning-path .c-tutorial-item__continue:hover {
    background: #17914a;
  }
}
@media screen {
  .c-tutorial-item--learning-path .c-tutorial-item__continue .c-tutorial-item__complete-text {
    position: relative;
    top: -1px;
  }
}
@media screen {
  .c-tutorial-item--learning-path .c-tutorial-item__continue i {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 15px;
    height: 20px;
    margin-right: 0;
    margin-left: 3px;
  }
  .c-tutorial-item--learning-path .c-tutorial-item__continue i svg {
    width: 11px;
    fill: #ffffff;
  }
}
@media screen {
  .c-tutorial--dark .c-tutorial-item a {
    background: none !important;
    box-shadow: none;
    border-radius: 0 !important;
    border-bottom: 2px solid #3B4048;
    padding: 21px 21px 21px 0;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--dark .c-tutorial-item a {
    padding: 0 0 21px 0;
    border-bottom: 0;
  }
}
@media screen {
  .c-tutorial--dark .c-tutorial-item .c-tutorial-item__title {
    color: #ffffff !important;
  }
}
@media screen {
  .c-tutorial--dark .c-tutorial-item .c-tutorial-item__metadata {
    color: #A7ADB4 !important;
  }
}
@media screen {
  .c-tutorial--dark .c-tutorial-item .c-tutorial-item__metadata-short {
    color: #A7ADB4 !important;
  }
}
@media screen {
  .c-tutorial--dark .c-tutorial-item .c-tutorial-item__description, .c-tutorial--dark .c-tutorial-item .c-tutorial-item__platform {
    color: #A7ADB4 !important;
  }
}
@media screen {
  .c-tutorial--mason .c-tutorial-item__actions {
    position: absolute;
    bottom: 21px;
    right: 21px;
    z-index: 1;
  }
  .c-tutorial--mason .c-tutorial-item__actions .o-icon-button {
    background: #333333;
  }
  .c-tutorial--mason .c-tutorial-item__actions .o-dropdown-menu--dark a {
    padding: 0 !important;
    background: none !important;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__upper {
    display: grid;
    grid-template-columns: 1fr 90px;
    width: 100%;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__text-upper-meta {
    display: none;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__lower {
    display: block;
  }
  .c-tutorial--mason .c-tutorial-item > a, .c-tutorial--mason .c-tutorial-item > div.c-tutorial-item__wrapper {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 21px;
    height: 100%;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__art {
    order: 2;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__art .o-badge-video, .c-tutorial--mason .c-tutorial-item .c-tutorial-item__art .o-badge--pro {
    display: none;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__art .o-badge-tutorial--locked, .c-tutorial--mason .c-tutorial-item .c-tutorial-item__art .o-badge-tutorial--recording {
    display: flex;
    width: 48px;
    height: 48px;
    left: 50% !important;
    top: 50% !important;
    margin: -24px 0 0 -24px;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__text {
    order: 1;
    margin-left: 0;
    align-content: start !important;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    padding-right: 30px;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__text .o-badge--new {
    display: inline-flex;
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 2;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__text .o-badge--pro {
    display: inline-flex;
    max-width: min-content;
    box-shadow: none;
    margin-top: 0;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
    margin-top: 15px;
    padding-right: 0;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__icon, .c-tutorial--mason .c-tutorial-item .o-badge--new {
    display: none;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__metadata-short {
    display: flex;
    align-items: center;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__metadata-short .o-badge, .c-tutorial--mason .c-tutorial-item .c-tutorial-item__metadata-short .o-badge-video {
    margin-right: 9px;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__metadata-short .o-badge-video {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .c-tutorial--mason .c-tutorial-item .c-tutorial-item__metadata-short .o-badge-video svg {
    width: 13px;
  }
}
@media screen {
  .c-tutorial--mason-mini a {
    grid-template-columns: 1fr 72px !important;
    padding: 18px 21px !important;
  }
  .c-tutorial--mason-mini .c-tutorial-item__title {
    font-size: 1.1875em !important; /* 19/16 */
    padding-right: 30px !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-mini .c-tutorial-item__title {
    font-size: 1.3125em !important; /* 21/16 */
  }
}
@media screen {
  .c-tutorial--mason-mini .c-tutorial-item__art {
    width: 72px !important;
    height: 72px !important;
  }
}
@media screen {
  .c-tutorial--mason-mini .c-tutorial-item__metadata {
    display: block !important;
  }
}
@media screen {
  .c-tutorial--mason-mini .c-tutorial-item__metadata-short {
    color: #333333;
  }
}
@media screen {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 90px 1fr;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 1fr 72px;
  }
}
@media screen {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper {
    margin-left: 18px;
    order: 2;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper {
    margin-left: 0;
    order: 1;
  }
}
@media screen {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper .o-badge--new {
    display: block;
    position: absolute;
    right: 21px;
    top: 21px;
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper .o-badge--new {
    right: 10px;
    top: 10px;
    z-index: 2;
  }
}
@media screen {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper-meta {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper-meta {
    display: none;
  }
}
@media screen {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__platform {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__platform {
    display: block;
  }
}
@media screen {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__platform-long {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__platform-long {
    display: none;
  }
}
@media screen {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__description {
    margin-top: 9px !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__description {
    margin-top: 15px !important;
  }
}
@media screen {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__lower {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__lower {
    display: block;
  }
}
@media screen {
  .c-tutorial--mason-art .c-tutorial-item__art {
    width: 180px !important;
    height: 100% !important;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 !important;
  }
  .c-tutorial--mason-art .c-tutorial-item__art-image--alternate {
    transform: none !important;
    width: auto !important;
    height: 100% !important;
  }
  .c-tutorial--mason-art .c-tutorial-item__lower {
    padding-right: 180px;
  }
  .c-tutorial--mason-art .o-button--bookmark {
    right: 192px !important;
  }
}
@media screen {
  .c-tutorial--mason-small .c-tutorial-item > a, .c-tutorial--mason-small .c-tutorial-item > div {
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 1fr 72px;
    grid-column-gap: 16px;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__lower {
    display: inline-grid;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.25rem; /* 20/16 */
    padding-right: 0 !important;
    line-height: 1.2;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__platform, .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__parent {
    margin-top: 5px !important;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__metadata-short {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
    height: 40px;
    line-height: 40px;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__metadata-short .o-badge-video {
    margin-right: 5px;
    display: inline-flex;
    top: 2px;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__metadata-short .o-badge-video svg {
    height: 14px;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__metadata-short .o-badge--pro {
    height: 26px;
    line-height: 16px;
    margin-right: 5px;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__description, .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__platform, .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__metadata-short {
    font-size: 0.875rem; /* 14/16 */
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__art {
    width: 72px !important;
    height: 72px !important;
  }
  .c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__complete {
    width: 108px;
  }
}
@media screen {
  .c-tutorial--mason-mini-bookmark a {
    padding: 18px 45px 18px 21px !important;
  }
  .c-tutorial--mason-mini-bookmark a .o-button--bookmark {
    right: 10px !important;
    top: 18px !important;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list.c-tutorial--number .c-tutorial-item__number-badge .o-badge-tutorial {
    width: 42px;
    height: 42px;
    top: 13px !important;
    left: 0 !important;
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--list.c-tutorial--number .c-tutorial-item__art {
    display: none;
  }
}
@media screen {
  .c-tutorial--mark-as-complete .o-button--bookmark {
    display: none !important;
  }
  .c-tutorial--mark-as-complete .o-button--mark-as-complete {
    display: block;
  }
}
@media screen {
  .c-tutorial--white .c-tutorial-item {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    min-height: 340px;
    overflow: hidden;
  }
  .c-tutorial--white .c-tutorial-item .c-tutorial-item__art {
    border-radius: 0.5625rem 0.5625rem 0 0;
  }
  .c-tutorial--white .c-tutorial-item .c-tutorial-item__text {
    white-space: normal;
    padding: 0 18px;
    padding-bottom: 50px;
  }
  .c-tutorial--white .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
    display: block;
  }
}
@media screen {
  .c-tutorial--floating-button .c-tutorial-item .c-tutorial-item__text {
    padding-bottom: 100px;
  }
  .c-tutorial--floating-button .c-tutorial-item .o-button {
    position: absolute;
    bottom: 24px;
  }
}
@media screen {
  .c-tutorial--book .c-tutorial-item.c-tutorial-item--locked .o-badge-tutorial--locked {
    display: flex;
    top: 50% !important;
  }
  .c-tutorial--book .c-tutorial-item .o-badge--new {
    display: inline-flex;
    position: absolute;
    top: -20px;
    right: -10px;
    z-index: 2;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__actions {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__actions .o-icon-button {
    background: #333333;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art {
    border-radius: 21px;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art .o-badge--new {
    display: none;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art .o-badge-tutorial--locked {
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    top: -24px;
    margin-top: -24px;
    margin-left: -24px;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__in-progress {
    width: 100%;
    height: 6px;
    border-radius: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: none;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__in-progress .c-tutorial-item__in-progress--fill {
    width: 50%;
    background: #158443;
    height: 6px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100px;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete {
    display: none;
    color: #ffffff;
    margin-top: 10px;
    background: #158443;
    align-items: center;
    width: 100%;
    border-radius: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete .c-tutorial-item__complete-text {
    position: relative;
    top: -1px;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete i {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 15px;
    height: 20px;
    margin-right: 6px;
    border-radius: 7px;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete i svg {
    width: 11px;
    fill: #ffffff;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.25rem; /* 20/16 */
    line-height: 1.25;
    text-align: center;
    margin-top: 15px;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__metadata-short, .c-tutorial--book .c-tutorial-item .c-tutorial-item__platform {
    color: #6E7687;
    font-size: 0.875rem; /* 14/16 */
    text-align: center;
    margin-top: 6px;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__platform-long {
    display: block;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__text-upper-meta {
    width: 100%;
    text-align: center;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__text-upper-meta .c-tutorial-item__description {
    display: none;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__metadata-short {
    display: block;
    width: 100%;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__parent, .c-tutorial--book .c-tutorial-item .c-tutorial-item__metadata {
    display: none;
  }
  .c-tutorial--book .c-tutorial-item .c-tutorial-item__lower {
    display: none;
  }
  .c-tutorial--book .c-tutorial-item--in-progress .c-tutorial-item__art .c-tutorial-item__in-progress {
    display: block;
  }
  .c-tutorial--book .c-tutorial-item--in-progress .c-tutorial-item__text-upper-meta .c-tutorial-item__in-progress {
    display: none;
  }
  .c-tutorial--book .c-tutorial-item--complete .c-tutorial-item__art .c-tutorial-item__complete {
    display: inline-flex;
  }
  .c-tutorial--book .c-tutorial-item--complete .c-tutorial-item__text-upper-meta .c-tutorial-item__complete {
    display: none;
  }
}
@media screen {
  .c-tutorial--editable-books .c-tutorial-item__actions--book {
    display: block;
  }
}
@media screen {
  .c-tutorial--editable-tutorials.c-tutorial--mason .c-tutorial-item__metadata-short {
    width: 60%;
  }
  .c-tutorial--editable-tutorials.c-tutorial--mason .o-button--bookmark {
    right: 66px;
    bottom: 6px;
  }
  .c-tutorial--editable-tutorials .c-tutorial-item__actions--tutorial {
    display: block;
  }
}
@media screen {
  .c-tutorial--no-margin .c-tutorial-item {
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-tutorial--no-margin .c-tutorial-item {
    margin-top: 0 !important;
  }
}
@media screen {
  .c-tutorial--cta-card .c-tutorial-item > a {
    flex-direction: column;
  }
  .c-tutorial--cta-card .c-tutorial-item > a .c-tutorial-item__upper .c-tutorial-item__art {
    margin-top: -21px;
    margin-left: -21px;
    width: calc(100% + 42px) !important;
    border-radius: 0.5625rem 0.5625rem 0 0;
  }
  .c-tutorial--cta-card.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__upper {
    display: block;
  }
  .c-tutorial--cta-card.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text {
    padding-top: 6px;
  }
  .c-tutorial--cta-card.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text .c-tutorial-item__title {
    padding-top: 14px;
    line-height: 1.25;
  }
  .c-tutorial--cta-card.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__upper .o-badge--pro {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 2;
    margin-top: 150px;
  }
  .c-tutorial--cta-card.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__upper .o-badge--new {
    right: unset;
    left: 10px;
  }
  .c-tutorial--cta-card.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art {
    height: 160px !important;
  }
  .c-tutorial--cta-card.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art img {
    transform: scale(1);
    align-self: flex-start;
  }
  .c-tutorial--cta-card.c-tutorial--mason .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
    margin-top: 0px;
  }
  .c-tutorial--cta-card .c-tutorial-item__metadata-short {
    margin-top: 9px;
    display: block !important;
  }
  .c-tutorial--cta-card.c-tutorial--floating-button .c-tutorial-item .c-tutorial-item__text {
    padding-bottom: 15px;
  }
  .c-tutorial--cta-card.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__metadata-short .o-badge--pro {
    display: none;
  }
}
@media screen {
  .c-tutorial--reduced.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__metadata-short {
    display: none;
  }
}
@media screen {
  .c-video-player {
    min-height: 100vh;
    position: relative;
    background: #333333;
    color: #ffffff;
    overflow: hidden;
    padding: 0px 60px 120px 140px;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player {
    padding: 0px 30px 0 110px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player {
    padding: 0px 30px 0;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player {
    padding: 0;
  }
}
@media screen {
  .c-video-player.c-video-player--cinema nav {
    top: inherit !important;
  }
}
@media screen {
  .c-video-player.c-video-player--nav {
    padding: 0px 60px 90px;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player.c-video-player--nav {
    padding: 0px 30px 0;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player.c-video-player--nav {
    padding: 0 20px 0;
  }
}
@media screen {
  .c-video-player.c-video-player--nav .o-button-sidebar--open {
    display: none;
  }
}
@media screen {
  .c-video-player.c-video-player--nav .o-button-sidebar--close {
    display: inline-flex;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player.c-video-player--nav .o-button-sidebar--close {
    display: none;
  }
}
@media screen {
  .c-video-player.c-video-player--nav .c-video-player__lessons {
    display: block !important;
    width: 320px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player.c-video-player--nav .c-video-player__lessons {
    width: 100%;
  }
}
@media screen {
  .c-video-player.c-video-player--nav .c-video-player__lessons-section {
    display: block;
  }
  .c-video-player.c-video-player--nav .c-video-player__lessons-section .c-tutorial-item__metadata-short {
    display: none;
  }
}
@media screen {
  .c-video-player.c-video-player--nav .c-video-player__lessons-section--action {
    display: block;
    padding: 20px 24px;
    border-bottom: 1px solid #434A53;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player.c-video-player--nav .c-video-player__lessons-section--action {
    display: none;
  }
}
@media screen {
  .c-video-player.c-video-player--nav .c-video-player__wrapper {
    margin: 0 auto 0 auto;
    padding-left: 320px;
    max-width: 1280px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player.c-video-player--nav .c-video-player__wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen {
  .c-video-player.c-video-player--nav .c-video-player__video {
    border-radius: 0.5625rem;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player.c-video-player--nav .c-video-player__video {
    border-radius: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player .c-video-player__wrapper {
    display: grid;
    width: 100%;
  }
}
@media screen {
  .c-video-player .c-video-player__video {
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    border-radius: 0.5625rem;
    margin-top: 40px;
    margin-bottom: 24px;
    padding-top: 56.25%;
    position: relative;
    overflow: hidden;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player .c-video-player__video {
    margin-bottom: 15px;
    margin-top: 0;
    margin-left: -30px;
    width: calc(100% + 60px);
    border-radius: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player .c-video-player__video {
    margin-left: -20px;
    width: calc(100% + 40px);
  }
}
@media screen and (max-width: 600px) {
  .c-video-player .c-video-player__video {
    margin-left: -20px;
    width: calc(100% + 40px);
    border-radius: 0 !important;
    margin-bottom: 0;
    padding-bottom: 20px;
  }
}
@media screen {
  .c-video-player .c-video-player__video .c-video-player__preloader {
    width: 100%;
    animation-duration: 0.5s;
  }
}
@media screen {
  div.vimeo-player > div[style] {
    padding: 0 0 0 0 !important;
    position: inherit !important;
  }
}
@media screen {
  .c-video-player__lessons:hover {
    overflow-y: auto;
  }
}
@media screen {
  .c-video-player__lessons {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 80px;
    height: 100%;
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    padding: 4px 0 36px 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .c-video-player__lessons::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__lessons {
    width: 100%;
    position: relative;
    order: 3;
    background: none;
    padding: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__lessons .c-video-player__lessons-section--action {
    display: none;
  }
}
@media screen {
  .c-video-player__lessons .o-button-sidebar--open {
    position: absolute;
    top: 15px;
    left: 22px;
    cursor: pointer;
  }
  .c-video-player__lessons .o-button-sidebar--open svg {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
  }
}
@media screen {
  .c-video-player__lessons .o-button-sidebar--close {
    display: none;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section {
    padding: 0 24px;
    border-bottom: 1px solid #434A53;
    padding-bottom: 20px;
    display: none;
  }
  .c-video-player__lessons .c-video-player__lessons-section:last-child {
    border-bottom: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__lessons .c-video-player__lessons-section {
    display: block;
    padding: 0 0 24px 0;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-header {
    display: block;
    cursor: pointer;
    position: relative;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-header svg {
    width: 15px;
    height: 9px;
    fill: #B8CCE6;
    position: absolute;
    top: 50%;
    right: 0;
    opacity: 0.5;
    margin-top: -4px;
    transform: rotate(180deg);
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-header.c-video-player__lessons-header--open svg {
    transform: rotate(360deg);
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-title {
    display: block;
    font-size: 1.125rem; /* 18/16 */
    color: #ffffff;
    margin-top: 20px;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-title .l-svg-collection {
    margin-right: 12px;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-title a {
    color: #ffffff;
    text-decoration: none;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-title a:hover {
    color: #158443;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-title .o-badge--pro {
    margin-left: 12px;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lessons-sum {
    display: block;
    font-size: 0.75rem; /* 12/16 */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #A7ADB4;
    margin-top: 3px;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list {
    display: none;
    margin: 18px 0 10px;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list > li {
    white-space: normal;
    overflow-x: visible;
    text-overflow: none;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list > li a:before {
    background: #ffffff;
    color: #333333;
    z-index: 999;
    top: -51px;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list > li a:before {
    display: none;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list > li a:after {
    background: #ffffff;
    z-index: 998;
    top: -28px;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list > li a:after {
    display: none;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list li > div {
    display: inline;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list li > div > button {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list--open {
    display: block;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .c-tutorial-item {
    margin-top: 30px;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-tutorial-item:first-child {
    margin-top: 0;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-tutorial-item a {
    border-bottom: 0;
  }
}
@media screen {
  .c-video-player__lessons .c-video-player__lessons-section .o-button--mark-as-complete {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    cursor: pointer;
  }
  .c-video-player__lessons .c-video-player__lessons-section .o-button--mark-as-complete:focus {
    outline: none;
  }
}
@media screen {
  .c-video-player__complete {
    display: none;
  }
  .c-video-player__complete .c-video-player__complete-wrapper {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__complete h3 {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__complete .o-button--dark {
    background: none;
    margin-top: 9px;
  }
}
@media screen {
  .c-video-player__complete .c-video-player__complete-countdown {
    font-size: 0.9375rem; /* 15/16 */
    font-weight: 700;
    color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__complete .c-video-player__complete-countdown {
    display: none;
  }
}
@media screen {
  .c-video-player__complete .c-video-player__complete-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    cursor: pointer;
    border-radius: 100px;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__complete .c-video-player__complete-loader {
    width: 60px;
    height: 60px;
  }
}
@media screen {
  .c-video-player__complete .c-video-player__complete-loader:hover {
    background: #434A53;
  }
}
@media screen {
  .c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-icon {
    width: 38px;
    height: 42px;
    fill: #ffffff;
    margin-right: -5px;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-icon {
    width: 20px;
    height: 30px;
  }
}
@media screen {
  .c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-circle {
    position: absolute;
    left: 0;
    top: 0;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-circle {
    width: 60px;
    height: 60px;
  }
}
@media screen {
  .c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-circle.c-video-player__complete-circle--fill {
    transform: rotate(-90deg);
  }
}
@media screen {
  .c-video-player__next {
    align-items: center;
  }
  .c-video-player__next .c-video-player__next-wrapper {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper {
    padding: 0 20px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .l-video-player-path-complete {
    display: none;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper > h3, .c-video-player__next .c-video-player__next-wrapper > p {
    text-align: center;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper > h3 {
    font-size: 1.5rem; /* 24/16 */
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper > p {
    color: #A7ADB4;
    font-size: 1rem;
    margin-top: 12px;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .l-video-player-uppercase {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item .o-button--bookmark {
    display: none !important;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a {
    box-shadow: none;
    background: none;
    position: relative;
    z-index: 0;
  }
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a:before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    background: rgb(248, 13, 13);
    background: linear-gradient(-45deg, rgb(248, 13, 13) 0%, rgb(114, 7, 250) 33%, rgb(45, 208, 169) 66%, rgb(208, 15, 201) 100%);
    border-radius: 0.5625rem;
    z-index: -1;
    background-size: 150% 150%;
    animation: a-background-gradient 5s ease infinite;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a:before {
    display: none !important;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #434A53;
    border-radius: 0.5625rem;
    z-index: -1;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a:after {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a {
    text-align: center;
    border: none;
    padding: 0 !important;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__upper {
    display: grid;
    grid-template-columns: 150px 1fr !important;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__upper {
    grid-template-columns: 1fr !important;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__art {
    order: 1 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__art {
    display: none;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__text {
    order: 2 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__text {
    text-align: center;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__title {
    color: #ffffff;
    font-size: 1.3125rem !important; /* 21/16 */
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__description {
    color: #A7ADB4;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__description {
    display: none;
  }
}
@media screen {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__in-progress {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .o-button--green {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .o-button--green {
    display: inline-flex !important;
  }
}
@media screen and (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-video-player__next-wrapper {
    padding: 0 20px;
  }
}
@media screen and (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-video-player__next-wrapper .l-video-player-path-complete {
    display: none;
  }
}
@media screen and (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-video-player__next-wrapper > h3.l-video-player-hide-title {
    display: none;
  }
}
@media screen and (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-video-player__next-wrapper .l-video-player-title-sidebar {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    display: block !important;
  }
}
@media screen and (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-tutorial-item a .c-tutorial-item__upper {
    grid-template-columns: 1fr !important;
  }
}
@media screen and (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-tutorial-item a .c-tutorial-item__art {
    display: none;
  }
}
@media screen {
  .c-video-player__paywall {
    display: none;
    /* Below 1080px change the layout dramatically */
  }
  .c-video-player__paywall .c-video-player__paywall-mobile-link {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall .c-video-player__paywall-mobile-link {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
@media screen {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    display: flex;
    padding: 30px;
    align-items: center;
    height: 100%;
    max-width: 960px;
    margin: 0 auto;
    animation-duration: 0.5s;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    padding: 60px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    padding: 15px;
  }
}
@media screen {
  .c-video-player__paywall .c-video-player__paywall-sign-in {
    font-size: 1rem;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall .c-video-player__paywall-sign-in {
    display: none;
  }
}
@media screen {
  .c-video-player__paywall .c-video-player__paywall-sign-in a {
    color: #158443;
  }
}
@media screen {
  .c-video-player__paywall .c-video-player__paywall-copy {
    padding-right: 30px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-copy {
    padding-right: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-artwork {
    display: none;
  }
}
@media screen {
  .c-video-player__paywall .c-video-player__paywall-artwork img {
    width: 320px;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall .c-video-player__paywall-options {
    margin-top: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__paywall h3 {
    text-align: center !important;
    line-height: 1.25;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__paywall h3 {
    font-size: 1.5rem !important; /* 24/16 */
  }
}
@media screen and (max-width: 400px) {
  .c-video-player__paywall h3 {
    font-size: 1.1875rem !important; /* 19/16 */
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall .c-price-card {
    padding: 10px 0 !important;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall .c-price-card h4 {
    font-size: 1rem;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall .c-price-card .o-badge {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall .c-price-card__price span {
    font-size: 1rem !important;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player__paywall {
    align-items: center;
  }
  .c-video-player__paywall h3 {
    margin-top: 0 !important;
    font-size: 2.25rem; /* 36/16 */
  }
  .c-video-player__paywall .c-video-player__paywall-options {
    display: flex;
    flex-wrap: wrap;
    max-width: 600px;
    padding: 0 20px;
    flex-direction: column-reverse;
  }
  .c-video-player__paywall .c-price-card {
    background: none;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #3B4048;
    padding: 20px 0;
  }
  .c-video-player__paywall .c-price-card:first-child {
    border-bottom: 0;
  }
  .c-video-player__paywall .c-price-card .c-price-card__divider {
    display: flex;
    align-items: center;
  }
  .c-video-player__paywall .c-price-card h4, .c-video-player__paywall .c-price-card .c-price-card__period {
    margin-top: 0;
    color: #ffffff;
  }
  .c-video-player__paywall .c-price-card .c-price-card__price {
    margin-top: 0;
    margin-left: 10px;
    margin-right: 5px;
  }
  .c-video-player__paywall .c-price-card .c-price-card__price span {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 21px;
    margin: 0;
    letter-spacing: -0.5px;
    top: 0;
  }
  .c-video-player__paywall .c-price-card .c-price-card__price .c-price-card__price-change {
    margin-left: -4px;
  }
  .c-video-player__paywall .c-price-card .c-price-card__action {
    margin-top: 0;
    margin-left: auto;
  }
  .c-video-player__paywall .c-price-card .c-price-card__action a {
    padding: 0;
    background: none;
  }
  .c-video-player__paywall .c-price-card .c-price-card__action a .o-button__label {
    display: none;
  }
  .c-video-player__paywall .c-price-card .c-price-card__action a svg {
    fill: #333333;
  }
}
@media screen {
  .c-video-player--nav .c-video-player__paywall {
    align-items: center;
  }
  .c-video-player--nav .c-video-player__paywall h3 {
    margin-top: 0 !important;
    font-size: 2rem; /* 36/16 */
    text-align: center !important;
    line-height: 1.25;
  }
  .c-video-player--nav .c-video-player__paywall-wrapper {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  .c-video-player--nav .c-video-player__paywall-copy {
    padding-right: 0;
  }
}
@media screen and (max-width: 1200px) {
  .c-video-player--nav .c-video-player__paywall-copy .l-font-17 {
    display: none;
  }
}
@media screen {
  .c-video-player--nav .c-video-player__paywall-artwork {
    display: none;
  }
}
@media screen {
  .c-video-player--nav .c-video-player__paywall-options {
    display: flex;
    flex-wrap: wrap;
    max-width: 600px;
    padding: 0 20px;
    flex-direction: column-reverse;
  }
}
@media screen {
  .c-video-player--nav .c-price-card {
    background: none;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #3B4048;
    padding: 20px 0;
  }
  .c-video-player--nav .c-price-card:first-child {
    border-bottom: 0;
  }
  .c-video-player--nav .c-price-card .c-price-card__divider {
    display: flex;
    align-items: center;
  }
  .c-video-player--nav .c-price-card h4, .c-video-player--nav .c-price-card .c-price-card__period {
    margin-top: 0;
    color: #ffffff;
  }
  .c-video-player--nav .c-price-card .c-price-card__price {
    margin-top: 0;
    margin-left: 10px;
    margin-right: 5px;
  }
  .c-video-player--nav .c-price-card .c-price-card__price span {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 21px;
    margin: 0;
    letter-spacing: -0.5px;
    top: 0;
  }
  .c-video-player--nav .c-price-card .c-price-card__price .c-price-card__price-change {
    margin-left: -4px;
  }
  .c-video-player--nav .c-price-card .c-price-card__action {
    margin-top: 0;
    margin-left: auto;
  }
}
@media screen {
  .c-video-player__paywall--black-friday .c-video-player__paywall-artwork img {
    width: 420px;
  }
}
@media screen and (max-width: 1140px) {
  .c-video-player__paywall--black-friday .c-video-player__paywall-artwork img {
    width: 320px;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player__paywall--black-friday .c-price-card {
    display: block;
  }
  .c-video-player__paywall--black-friday .c-price-card .c-price-card__divider {
    display: none;
  }
  .c-video-player__paywall--black-friday .c-price-card .c-price-card__divider-alternate {
    display: block;
  }
  .c-video-player__paywall--black-friday .c-price-card .c-price-card__divider-alternate h4 {
    font-size: 1.5rem; /* 24/16 */
  }
  .c-video-player__paywall--black-friday .c-price-card .c-price-card__saving {
    color: #ffffff;
  }
  .c-video-player__paywall--black-friday .c-price-card .c-price-card__action {
    margin-top: 0;
    margin-left: auto;
  }
  .c-video-player__paywall--black-friday .c-price-card .c-price-card__action a {
    padding: 0 15px;
    background: #158443;
  }
  .c-video-player__paywall--black-friday .c-price-card .c-price-card__action a .o-button__label {
    display: inline-flex;
  }
  .c-video-player__paywall--black-friday .c-price-card .c-price-card__action a svg {
    fill: #158443;
  }
}
@media screen {
  .c-video-player--nav .c-video-player__paywall--black-friday .c-price-card {
    display: block;
  }
  .c-video-player--nav .c-video-player__paywall--black-friday .c-price-card .c-price-card__divider {
    display: none;
  }
  .c-video-player--nav .c-video-player__paywall--black-friday .c-price-card .c-price-card__divider-alternate {
    display: block;
  }
  .c-video-player--nav .c-video-player__paywall--black-friday .c-price-card .c-price-card__divider-alternate h4 {
    font-size: 1.5rem; /* 24/16 */
  }
  .c-video-player--nav .c-video-player__paywall--black-friday .c-price-card .c-price-card__saving {
    color: #ffffff;
  }
}
@media screen {
  .c-video-player__paywall--black-friday-2019 {
    background: #333333;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player__paywall--black-friday-2019 .c-video-player__paywall-wrapper .c-plan--neon {
    box-shadow: none;
    border: none;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall--black-friday-2019 .c-video-player__paywall-wrapper .l-color-neon--red {
    color: #ffffff !important;
    -webkit-text-stroke-width: 0;
    text-shadow: none;
  }
}
@media screen {
  .c-video-player--nav .c-video-player__paywall--black-friday .c-plan--neon {
    border: none;
    box-shadow: none;
  }
}
@media screen {
  .c-video-player__paywall--black-friday--mod-spring {
    background-image: url(/assets/patterns/spring-fling-video-background@2x-3988623820d39ac467cd1d396f2edff3b7122cb4d00ef89fe45b4a3242213f8a.png) !important;
    background-color: #ffd7d6 !important;
    background-size: 100% !important;
    background: no-repeat;
  }
  .c-video-player__paywall--black-friday--mod-spring .c-video-player__paywall-wrapper h3, .c-video-player__paywall--black-friday--mod-spring .c-video-player__paywall-sign-in {
    color: #333333 !important;
  }
  .c-video-player__paywall--black-friday--mod-spring .c-price-card__price-main {
    font-size: 6.5rem !important;
    letter-spacing: -7px !important;
  }
}
@media screen and (max-width: 1080px) {
  .c-video-player__paywall--black-friday--mod-spring .c-price-card {
    background: none;
    box-shadow: none !important;
  }
  .c-video-player__paywall--black-friday--mod-spring .c-price-card h4, .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__saving {
    color: #333333;
  }
  .c-video-player__paywall--black-friday--mod-spring .c-price-card .o-button--green {
    background: #158443 !important;
  }
  .c-video-player__paywall--black-friday--mod-spring .c-price-card .o-button--green svg {
    fill: #158443 !important;
  }
}
@media screen and (max-width: 1080px) and (max-width: 600px) {
  .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__price {
    margin-left: 5px !important;
    margin-right: 0px !important;
  }
}
@media screen and (max-width: 1080px) and (max-width: 600px) {
  .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__price .c-price-card__price-currency, .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__price .c-price-card__price-main, .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__price .c-price-card__period {
    color: #333333;
  }
}
@media screen and (max-width: 1080px) and (max-width: 600px) {
  .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__price .c-price-card__price-main {
    letter-spacing: -0.5px !important;
  }
}
@media screen and (max-width: 1080px) and (max-width: 600px) {
  .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__period {
    color: #333333;
    font-weight: 700;
  }
}
@media screen and (max-width: 1080px) and (max-width: 600px) {
  .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__action a {
    background: none !important;
  }
  .c-video-player__paywall--black-friday--mod-spring .c-price-card .c-price-card__action a svg {
    fill: #333333 !important;
  }
}
@media screen {
  .c-video-player__paywall--free-weekend {
    background: #FDC774;
    background-image: url(/assets/patterns/free-weekend-video-background@2x-971948267a0d8bf3fb8fed1c09d4b218dcc2f9adb644d415910b57f97f0b5031.png);
    background-size: cover;
    display: block;
    text-align: center;
    align-items: center;
  }
  .c-video-player__paywall--free-weekend h3, .c-video-player__paywall--free-weekend p {
    color: #333333 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__paywall--free-weekend h3 {
    font-size: 2rem;
  }
}
@media screen {
  .c-video-player__paywall--free-weekend h3 span {
    display: block;
    font-size: 2.1rem; /* 40/16 */
    margin-top: -6px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__paywall--free-weekend h3 span {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__paywall--free-weekend h3 span {
    display: none;
  }
}
@media screen {
  .c-video-player__paywall--free-weekend h3 + p {
    font-family: "Bitter", serif;
    font-size: 1.1875rem; /* 19/16 */
    padding: 0 60px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__paywall--free-weekend h3 + p {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall--free-weekend h3 + p {
    padding: 0 20px;
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall--free-weekend .l-margin-21 {
    margin-top: 0;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__paywall--free-weekend .l-margin-30 {
    margin-top: 15px;
  }
}
@media screen {
  .c-video-player--nav .c-video-player__paywall--free-weekend h3 {
    font-size: 2rem;
  }
  .c-video-player--nav .c-video-player__paywall--free-weekend h3 span {
    font-size: 1.75rem;
  }
  .c-video-player--nav .c-video-player__paywall--free-weekend p {
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen {
  .c-video-player__paywall--spring-ahead-2021 {
    background-color: #FDEA89 !important;
  }
  .c-video-player__paywall--spring-ahead-2021 h3, .c-video-player__paywall--spring-ahead-2021 p {
    color: #333333;
  }
}
@media screen {
  .c-video-information .c-written-tutorial__content h2, .c-video-information .c-written-tutorial__content h3, .c-video-information .c-written-tutorial__content h4 {
    margin-bottom: 24px;
  }
  .c-video-information .c-written-tutorial__content p, .c-video-information .c-written-tutorial__content ul, .c-video-information .c-written-tutorial__content ol {
    font-size: 1.0625rem; /* 17/16 */
    margin-bottom: 18px;
  }
}
@media screen and (max-width: 768px) {
  .c-video-information .c-written-tutorial__content p, .c-video-information .c-written-tutorial__content ul, .c-video-information .c-written-tutorial__content ol {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-video-information .c-written-tutorial__content ul, .c-video-information .c-written-tutorial__content ol {
    padding-left: 20px;
    list-style: initial;
  }
  .c-video-information .c-written-tutorial__content ul li, .c-video-information .c-written-tutorial__content ol li {
    margin-top: 0;
  }
}
@media screen {
  .c-video-information .c-written-tutorial__content ol {
    list-style: decimal;
  }
}
@media screen {
  .c-video-information .c-written-tutorial__content a {
    color: #158443;
    text-decoration: underline;
  }
}
@media screen {
  .c-subscription-promo-video .c-subscription-promo-video__wrapper {
    position: relative;
    border-radius: 1.25rem; /* 20/16 */
  }
  .c-subscription-promo-video .c-subscription-promo-video__wrapper img {
    border-radius: 1.25rem;
  }
  .c-subscription-promo-video .c-subscription-promo-video__placeholder {
    opacity: 0;
    border-radius: 1.25rem;
  }
  .c-subscription-promo-video .c-subscription-promo-video__fake {
    background: url(/assets/photos/promo-video-bg-96ecc3946d56abea1a36858b57e39ffc4dda22c0bc8782be1102ed89ec1dd572.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    cursor: pointer;
    border-radius: 1.25rem;
    padding-top: 56.25%;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
  .c-subscription-promo-video .c-subscription-promo-video__fake:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(35, 41, 43, 0);
    z-index: -1;
    transition: all 0.05s linear;
  }
  .c-subscription-promo-video .c-subscription-promo-video__fake .o-button-video {
    position: absolute;
  }
}
@media screen {
  .c-video-player__preview {
    background: #1A1A1A;
    padding: 30px;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__preview {
    padding: 18px;
  }
}
@media screen {
  .c-video-player__preview > div {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
}
@media screen {
  .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 500px;
    max-height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    opacity: 0.1;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 300px;
    max-height: 300px;
    margin: -150px 0 0 -150px;
  }
}
@media screen and (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 200px;
    max-height: 200px;
    margin: -100px 0 0 -100px;
  }
}
@media screen {
  .c-video-player__preview .c-video-player__preview-title {
    display: block;
    position: absolute;
    top: 30px;
    left: 30px;
    font-family: "Bitter", serif;
    font-size: 1.25rem; /* 20/16 */
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #ffffff;
    width: 60%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-title {
    font-size: 0.9375rem; /* 15/16 */
    top: 18px;
    left: 18px;
  }
}
@media screen and (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-title {
    display: none;
  }
}
@media screen {
  .c-video-player__preview .c-video-player__preview-part {
    display: block;
    font-size: 0.75rem; /* 12/16 */
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    position: absolute;
    top: 60px;
    left: 30px;
    width: 60%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-part {
    font-size: 0.625rem; /* 10/16 */
    top: 40px;
    left: 18px;
  }
}
@media screen and (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-part {
    position: absolute;
    top: 18px;
  }
}
@media screen {
  .c-video-player__preview .c-video-player__preview-episode {
    display: block;
    font-family: "Bitter", serif;
    font-size: 3.125rem; /* 50/16 */
    line-height: 1.2;
    letter-spacing: -1px;
    color: #ffffff;
    text-align: center;
    max-width: 688px;
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__preview .c-video-player__preview-episode {
    font-size: 2.625rem; /* 42/16 */
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-episode {
    font-size: 0.9375rem; /* 15/16 */
    letter-spacing: 0;
    position: absolute;
    top: 56px;
    left: 18px;
    text-align: left;
    width: 60%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
@media screen and (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-episode {
    top: 34px;
  }
}
@media screen {
  .c-video-player__preview .c-video-player__preview-domains {
    position: absolute;
    display: block;
    bottom: 30px;
    left: 30px;
    color: #A7ADB4;
    font-size: 0.75rem; /* 12/16 */
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-domains {
    font-size: 0.625rem; /* 10/16 */
    bottom: 18px;
    left: 18px;
  }
}
@media screen and (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-domains {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  .c-video-player--nav .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 300px;
    max-height: 300px;
    margin: -150px 0 0 -150px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--nav .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 500px;
    max-height: 500px;
    margin: -250px 0 0 -250px;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player--nav .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 300px;
    max-height: 300px;
    margin: -150px 0 0 -150px;
  }
}
@media screen and (max-width: 480px) {
  .c-video-player--nav .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 200px;
    max-height: 200px;
    margin: -100px 0 0 -100px;
  }
}
@media screen and (max-width: 1200px) {
  .c-video-player--nav .c-video-player__preview .c-video-player__preview-episode {
    font-size: 2.625rem; /* 42/16 */
  }
}
@media screen and (max-width: 768px) {
  .c-video-player--nav .c-video-player__preview .c-video-player__preview-episode {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-video-player--cinema {
    padding: 0 0 90px !important;
  }
  .c-video-player--cinema .c-video-player__complete, .c-video-player--cinema .c-video-player__paywall {
    height: 56.25vw;
    max-height: calc(100vh - 169px);
    min-height: 480px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--cinema .c-video-player__complete, .c-video-player--cinema .c-video-player__paywall {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
  }
}
@media screen {
  .c-video-player--cinema .c-video-player__video {
    margin: 0 0 24px 0;
    border-radius: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--cinema .c-video-player__video {
    width: 100%;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player--cinema .c-video-player__video {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player--cinema .c-video-player__video {
    width: 100%;
  }
}
@media screen {
  .c-video-player--cinema .c-video-player__video-container {
    height: 56.25vw;
    max-height: calc(100vh - 169px);
    min-height: 480px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--cinema .c-video-player__video-container {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
  }
}
@media screen {
  .c-video-player--cinema .c-video-player__video-container .c-video-player__video {
    background: none;
  }
  .c-video-player--cinema .c-video-player__video-container .c-video-player__video iframe {
    height: 56.25vw;
    max-height: calc(100vh - 169px);
    min-height: 480px;
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--cinema .c-video-player__video-container .c-video-player__video iframe {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    background: none;
  }
}
@media screen {
  .c-video-player--cinema .c-video-player__video-container .c-video-player__video > div .c-video-player__preview {
    height: 56.25vw;
    max-height: calc(100vh - 169px);
    min-height: 480px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--cinema .c-video-player__video-container .c-video-player__video > div .c-video-player__preview {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
  }
}
@media screen {
  .c-video-player--cinema .c-video-player__lessons {
    margin-top: -70px;
    min-height: 350px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--cinema .c-video-player__lessons {
    margin-top: 0;
  }
}
@media screen {
  .c-video-player--cinema.c-video-player--nav .c-video-player__wrapper {
    padding-left: 350px;
    position: relative;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--cinema.c-video-player--nav .c-video-player__wrapper {
    padding: 0 30px;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player--cinema.c-video-player--nav .c-video-player__wrapper {
    padding: 0 20px;
  }
}
@media screen {
  .c-video-player--cinema .c-video-player__wrapper {
    padding: 24px 30px 0 100px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player--cinema .c-video-player__wrapper {
    padding: 0 30px;
    margin-top: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player--cinema .c-video-player__wrapper {
    padding: 0 20px;
  }
}
@media screen {
  .c-video-player--cinema .l-svg-cinema-mode, .c-video-player--cinema .o-tooltip--default {
    display: none !important;
  }
}
@media screen {
  .c-video-player--cinema .l-svg-video-mode, .c-video-player--cinema .o-tooltip--default {
    display: block !important;
  }
}
@media screen {
  .c-video-player__sub-controls {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__sub-controls {
    order: 5;
    margin-bottom: 36px;
  }
}
@media screen {
  .c-video-player__sub-controls h1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 30px;
    font-size: 1.125rem; /* 18/16 */
    font-weight: 400;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__sub-controls h1 {
    display: none;
  }
}
@media screen {
  .c-video-player__sub-controls .l-bookmark-button-mobile .o-button--bookmark {
    padding-top: 20px;
  }
}
@media screen and (max-width: 600px) {
  .c-video-player__sub-controls .l-bookmark-button-mobile .o-button--bookmark {
    padding-top: 0;
  }
}
@media screen {
  .c-video-player__sub-controls .o-button--dark, .c-video-player__sub-controls .o-button--green {
    margin: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__sub-controls .l-button-cinema-mode {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player .c-video-player__tabs {
    order: 4;
    margin-bottom: 24px;
    overflow: hidden;
    overflow-x: scroll;
  }
}
@media screen {
  .c-video-player .c-video-player__tabs > ul li a {
    height: 54px;
    line-height: 54px;
  }
}
@media screen {
  .c-video-player .c-video-player__information p {
    color: #A7ADB4;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player .c-video-player__information p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-video-player .c-written-tutorial__meta {
    color: #A7ADB4;
  }
}
@media screen {
  .c-video-player__notes p, .c-video-player__notes ul, .c-video-player__notes ol {
    color: #A7ADB4;
    margin-bottom: 18px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__notes p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-video-player__notes ul {
    list-style-type: square;
    margin-left: 62px;
    padding-left: 24px;
  }
}
@media screen {
  .c-video-player__notes ol {
    padding-left: 24px;
  }
}
@media screen {
  .c-video-player__notes li {
    margin-top: 6px;
  }
}
@media screen and (max-width: 992px) {
  .c-video-player__notes li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-video-player__notes a {
    color: #ffffff;
  }
}
@media screen {
  .c-video-player__notes code {
    font-family: "IBM Plex Mono", serif;
    font-size: 0.875rem; /* 14/16 */
    padding: 0 6px;
    border: 1px solid #73859F;
    background: #3B4048;
    border-radius: 5px;
    color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__notes code {
    font-size: 0.8125rem; /* 13/16 */
  }
}
@media screen {
  .c-video-player__notes pre {
    font-family: "IBM Plex Mono", serif;
    font-size: 0.8125rem; /* 13/16 */
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    border: 1px solid #73859F;
    border-radius: 0.5625rem;
    padding: 15px;
    color: #ffffff;
    margin-top: 18px;
    margin-bottom: 24px;
    position: relative;
    padding-right: 80px;
    white-space: pre-wrap;
  }
  .c-video-player__notes pre code {
    background: none;
    border: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player__notes pre {
    font-size: 0.75rem; /* 12/16 */
  }
}
@media screen {
  .c-video-player__transcripts .video-timestamp {
    display: flex;
    align-items: center;
    position: absolute;
    top: -1px;
    left: -62px;
    height: 24px;
    padding: 0 8px;
    cursor: pointer;
  }
  .c-video-player__transcripts .video-timestamp:hover {
    background-color: #3B4048;
  }
  .c-video-player__transcripts ul li {
    position: relative;
    margin-right: 56px;
  }
  .c-video-player__transcripts ul li .video-timestamp {
    margin-left: -24px;
  }
  .c-video-player__transcripts ul li p {
    margin-left: 0px;
    margin-right: 56px;
  }
  .c-video-player__transcripts ul li p .video-timestamp {
    margin-left: -24px;
  }
  .c-video-player__transcripts ul, .c-video-player__transcripts p, .c-video-player__transcripts ol {
    margin-left: 62px;
  }
  .c-video-player__transcripts pre code {
    padding: 0;
    font-size: 0.8125rem;
  }
  .c-video-player__transcripts pre code span {
    font-size: 0.8125rem;
  }
}
@media screen {
  .c-video-player__transcripts p,
  .c-video-player__transcripts ul {
    color: #CED5DE;
    margin-bottom: 18px;
    font-size: 15px;
  }
}
@media screen {
  .c-video-player__transcripts p,
  .c-video-player__transcripts ul,
  .c-video-player__transcripts ol {
    position: relative;
  }
}
@media screen {
  .c-video-player__transcripts p {
    padding-left: 3px;
    margin-right: 56px;
  }
}
@media screen {
  .c-video-player__transcripts h2 {
    display: none;
  }
}
@media screen {
  .c-video-player__transcripts pre {
    display: none;
  }
}
@media screen {
  .c-video-player__transcripts [data-tooltip]::before {
    background: #3B4048;
    font-size: 0.8125rem;
    text-align: center;
    padding-left: 13px;
    padding-right: 12px;
    top: -51px;
    left: 30px;
    z-index: 999;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 9px;
  }
}
@media screen {
  .c-video-player__transcripts [data-tooltip]::after {
    background: #3B4048;
    font-size: 0.8125rem;
    text-align: center;
    top: -20px;
    left: 30px;
    z-index: 1000;
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  }
}
@media screen {
  .c-video-player__transcripts--banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    padding: 30px 24px !important;
    gap: 2px;
    background: #3B4048;
    border-radius: 9px;
  }
  .c-video-player__transcripts--banner .l-obfuscated-text {
    display: inline-block;
    width: 104px;
    text-align: center;
    background: #783838;
  }
  .c-video-player__transcripts--banner p, .c-video-player__transcripts--banner div, .c-video-player__transcripts--banner span {
    font-family: Bitter;
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.5px;
    text-align: left;
  }
  .c-video-player__transcripts--banner p {
    margin: 0px 0px 18px 0px !important;
  }
}
@media screen {
  .c-video-player__notes--light pre {
    border: 1px solid #D6E0EF !important;
    background: #F2F6FA !important;
    color: #333333 !important;
    /* Comment */
    /* Red */
    /* Orange */
    /* Yellow */
    /* Green */
    /* Blue */
    /* Purple */
  }
  .c-video-player__notes--light pre code {
    color: #333333;
  }
  .c-video-player__notes--light pre .hljs-comment,
  .c-video-player__notes--light pre .hljs-quote {
    color: #bbbbbb;
  }
  .c-video-player__notes--light pre .hljs-variable,
  .c-video-player__notes--light pre .hljs-template-variable,
  .c-video-player__notes--light pre .hljs-tag,
  .c-video-player__notes--light pre .hljs-name,
  .c-video-player__notes--light pre .hljs-selector-id,
  .c-video-player__notes--light pre .hljs-selector-class,
  .c-video-player__notes--light pre .hljs-regexp,
  .c-video-player__notes--light pre .hljs-deletion {
    color: #d12f1b;
  }
  .c-video-player__notes--light pre .hljs-number,
  .c-video-player__notes--light pre .hljs-built_in,
  .c-video-player__notes--light pre .hljs-builtin-name,
  .c-video-player__notes--light pre .hljs-literal,
  .c-video-player__notes--light pre .hljs-type,
  .c-video-player__notes--light pre .hljs-params,
  .c-video-player__notes--light pre .hljs-meta,
  .c-video-player__notes--light pre .hljs-link {
    color: #e68200;
  }
  .c-video-player__notes--light pre .hljs-attribute {
    color: #e29803;
  }
  .c-video-player__notes--light pre .hljs-string,
  .c-video-player__notes--light pre .hljs-symbol,
  .c-video-player__notes--light pre .hljs-bullet,
  .c-video-player__notes--light pre .hljs-addition {
    color: #008400;
  }
  .c-video-player__notes--light pre .hljs-function,
  .c-video-player__notes--light pre .hljs-title,
  .c-video-player__notes--light pre .hljs-section {
    color: #272ad8;
  }
  .c-video-player__notes--light pre .hljs-keyword,
  .c-video-player__notes--light pre .hljs-selector-tag {
    color: #703da9;
  }
  .c-video-player__notes--light .o-button-code {
    background-image: url(/assets/svg-icons/dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
    background-size: cover;
  }
  .c-video-player__notes--light .o-button-code:hover {
    background: #647388;
    background-image: url(/assets/svg-icons/dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
    background-size: cover;
  }
}
@media screen {
  .c-video-player .c-content-author img {
    border: 4px solid #434A53;
  }
  .c-video-player .c-content-author .c-content-author__title a {
    color: #ffffff;
  }
  .c-video-player .c-authors {
    background: #333333;
  }
  .c-video-player .c-authors .l-block-wrapper {
    padding: 0;
  }
  .c-video-player .c-authors .l-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .c-video-player .c-authors .l-grid-3 {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .c-video-player .c-forum-comments {
    background: #333333;
  }
}
@media screen {
  article.c-written-tutorial {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial {
    padding-top: 0;
    margin-top: 0;
    overflow: hidden;
  }
}
@media screen {
  article.c-written-tutorial header {
    display: grid;
    grid-template-columns: 1fr 210px;
    grid-column-gap: 25px;
  }
}
@media screen and (max-width: 1280px) {
  article.c-written-tutorial header {
    grid-column-gap: 30px;
  }
}
@media screen and (max-width: 1080px) {
  article.c-written-tutorial header {
    grid-template-columns: 1fr 250px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial header {
    grid-template-columns: 1fr 200px;
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial header {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    animation: none;
  }
}
@media screen {
  article.c-written-tutorial header h1 {
    line-height: 1;
    color: #333333;
    word-break: break-word;
    font-size: 2.625rem; /* 42/16 */
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial header h1 {
    font-size: 2.25rem; /* 36/16 */
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial header h1 {
    font-size: 1.875rem; /* 36/16 */
  }
}
@media screen {
  article.c-written-tutorial header .c-written-tutorial__pull-quote {
    font-family: "IBM Plex Serif", serif;
    font-size: 1.0625rem; /* 18/16 */
  }
}
@media screen {
  article.c-written-tutorial header .o-button--green {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media screen {
  article.c-written-tutorial header .c-written-tutorial__breadcrumbs a {
    color: #6E7687;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial header .c-written-tutorial__breadcrumbs a {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial header .c-written-tutorial__introduction {
    order: 2;
    margin-left: -20px;
    padding: 20px 20px 0 20px;
    background: #ffffff;
    z-index: 2;
  }
}
@media screen {
  article.c-written-tutorial header .c-written-tutorial__introduction .o-button--bookmark .o-button__svg {
    margin-top: -10px;
  }
}
@media screen {
  article.c-written-tutorial header .c-written-tutorial__artwork {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial header .c-written-tutorial__artwork {
    order: 1;
    margin-bottom: -60px;
    margin-left: -20px;
    width: calc(100% + 40px);
    animation: none;
    z-index: 1;
  }
}
@media screen {
  article.c-written-tutorial header .c-written-tutorial__artwork img {
    width: 282px;
    height: 282px;
    background: #73859F;
    border-radius: 21px;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
}
@media screen and (max-width: 1080px) {
  article.c-written-tutorial header .c-written-tutorial__artwork img {
    width: 250px;
    height: 250px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial header .c-written-tutorial__artwork img {
    width: 200px;
    height: 200px;
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial header .c-written-tutorial__artwork img {
    display: flex;
    margin: 0 auto;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
}
@media screen {
  article.c-written-tutorial header .c-written-tutorial__artwork figcaption {
    font-size: 0.9375rem; /* 15/16 */
    color: #6E7687;
  }
}
@media screen {
  article.c-written-tutorial header .c-written-tutorial__meta {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen and (max-width: 992px) {
  article.c-written-tutorial .c-written-tutorial__content {
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content {
    padding: 0;
    margin-top: 24px;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-draper-obfuscate-nudge {
    padding-top: 18px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  article.c-written-tutorial .c-written-tutorial__content .c-draper-obfuscate-nudge p {
    font-family: "Bitter", serif !important;
  }
  article.c-written-tutorial .c-written-tutorial__content .c-draper-obfuscate-nudge .l-obfuscated-text {
    display: inline-block;
    width: 104px;
    text-align: center;
    background: #F4C3C3;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer {
    display: flex;
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer {
    display: block;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer .c-written-tutorial__content-tags {
    width: 100%;
    padding-right: 45px;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer .c-written-tutorial__content-share {
    display: flex;
    align-items: flex-start;
    margin-left: auto;
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer .c-written-tutorial__content-share {
    margin-top: 30px;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer .c-written-tutorial__content-share button {
    margin-left: 6px;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer .c-written-tutorial__content-share .o-button--bookmark {
    height: 28px;
    line-height: 28px;
    padding: 0;
  }
}
@media screen and (max-width: 600px) {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer .c-written-tutorial__content-share .o-button--bookmark {
    margin-left: auto;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer .c-written-tutorial__content-share .o-button--bookmark svg {
    margin-top: -10px;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h1, article.c-written-tutorial .c-written-tutorial__content h2 {
    font-size: 1.6875rem; /* 27/16 */
    margin-top: 27px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h1, article.c-written-tutorial .c-written-tutorial__content h2 {
    font-size: 1.5rem; /* 24/16 */
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h3 {
    font-size: 1.3125rem; /* 21/16 */
    margin-top: 24px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h3 {
    font-size: 1.3125rem; /* 21/16 */
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h4 {
    font-size: 1.125rem; /* 18/16 */
    margin-top: 18px;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h1, article.c-written-tutorial .c-written-tutorial__content h2, article.c-written-tutorial .c-written-tutorial__content h3, article.c-written-tutorial .c-written-tutorial__content h4, article.c-written-tutorial .c-written-tutorial__content h5 {
    margin-top: 36px;
    color: #333333;
  }
  article.c-written-tutorial .c-written-tutorial__content h1 a, article.c-written-tutorial .c-written-tutorial__content h2 a, article.c-written-tutorial .c-written-tutorial__content h3 a, article.c-written-tutorial .c-written-tutorial__content h4 a, article.c-written-tutorial .c-written-tutorial__content h5 a {
    color: #158443;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h2 + p, article.c-written-tutorial .c-written-tutorial__content h3 + p, article.c-written-tutorial .c-written-tutorial__content h4 + p {
    margin-top: 12px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h2 + p, article.c-written-tutorial .c-written-tutorial__content h3 + p, article.c-written-tutorial .c-written-tutorial__content h4 + p {
    margin-top: 12px;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h1 + span + p {
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h1 + span + p {
    margin-top: 10px !important;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h2 + span + p {
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h2 + span + p {
    margin-top: 10px !important;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h3 + span + p {
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h3 + span + p {
    margin-top: 10px !important;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h4 + span + p {
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h4 + span + p {
    margin-top: 10px !important;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content h4 + span + p {
    margin-top: 10px !important;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h4 + span + p {
    margin-top: 10px !important;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content p, article.c-written-tutorial .c-written-tutorial__content ul, article.c-written-tutorial .c-written-tutorial__content ol {
    font-family: "IBM Plex Serif", serif;
    font-size: 1.0625rem; /* 18/16 */
    line-height: 1.58;
    margin-top: 18px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content p, article.c-written-tutorial .c-written-tutorial__content ul, article.c-written-tutorial .c-written-tutorial__content ol {
    font-size: 1rem;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content p a, article.c-written-tutorial .c-written-tutorial__content ul a, article.c-written-tutorial .c-written-tutorial__content ol a {
    color: #158443;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content p em, article.c-written-tutorial .c-written-tutorial__content p strong, article.c-written-tutorial .c-written-tutorial__content ul em, article.c-written-tutorial .c-written-tutorial__content ul strong, article.c-written-tutorial .c-written-tutorial__content ol em, article.c-written-tutorial .c-written-tutorial__content ol strong {
    font-weight: 700;
    font-style: normal;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content p i, article.c-written-tutorial .c-written-tutorial__content ul i, article.c-written-tutorial .c-written-tutorial__content ol i {
    font-style: italic;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content ul, article.c-written-tutorial .c-written-tutorial__content ol {
    padding-left: 24px;
  }
  article.c-written-tutorial .c-written-tutorial__content ul li, article.c-written-tutorial .c-written-tutorial__content ol li {
    margin-top: 0.5rem;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content ul li {
    list-style: square;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content div.note {
    font-family: "IBM Plex Serif", serif;
    background: #F2F6FA;
    font-size: 1rem; /* 17/16 */
    padding: 20px 24px;
    border-radius: 0.5625rem;
    margin-top: 18px;
  }
  article.c-written-tutorial .c-written-tutorial__content div.note pre {
    margin-left: 0px;
    width: 100%;
  }
  article.c-written-tutorial .c-written-tutorial__content div.note pre .hljs {
    color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content div.note {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content div.note em {
    font-weight: 700;
    font-style: normal;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content div.note p {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content div.note p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content div.note p:first-child {
    margin-top: 0;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content div.note a {
    color: #158443;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content pre, article.c-written-tutorial .c-written-tutorial__content code {
    word-wrap: break-word;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content pre {
    font-family: "Menlo", monospace !important;
    font-size: 0.8125rem; /* 13/16 */
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    border-radius: 0.5625rem;
    padding: 15px;
    color: #ffffff;
    margin-top: 18px;
    position: relative;
    padding-right: 80px;
    margin-left: -16px;
    width: calc(100% + 32px);
    white-space: pre-wrap;
  }
}
@media screen and (max-width: 992px) {
  article.c-written-tutorial .c-written-tutorial__content pre {
    width: 100%;
    margin-left: 0;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content pre {
    font-size: 0.75rem; /* 12/16 */
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content pre .hljs {
    color: #ffffff;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler pre {
    margin-left: 0px;
    width: 100%;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content code {
    font-family: "Menlo", monospace;
    font-size: 0.875rem; /* 14/16 */
    padding: 0 6px;
    border: 1px solid #D6E0EF;
    background: #F2F6FA;
    border-radius: 5px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content code {
    font-size: 0.8125rem; /* 13/16 */
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content img, article.c-written-tutorial .c-written-tutorial__content .wp-video {
    margin: 0 auto;
    display: flex;
    max-width: 100%;
    height: auto;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .bordered {
    border: 0.75rem solid #DFE7F0;
    border-radius: 0.5625rem;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .wp-caption {
    margin: 36px auto;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .wp-caption-text {
    font-size: 0.9375rem; /* 15/16 */
    color: #6E7687;
    margin-top: 9px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content .o-button--files {
    display: none;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-iframe {
    position: relative;
    padding-bottom: 56.25%;
    margin: 36px 0;
  }
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler {
    text-align: center;
  }
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler.c-spoiler--revealed .c-spoiler__answer {
    display: block;
  }
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler.c-spoiler--revealed .o-button {
    display: none;
  }
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer {
    text-align: left;
    font-family: "IBM Plex Serif", serif;
    background: #F2F6FA;
    font-size: 1.0625rem; /* 17/16 */
    padding: 20px 24px;
    border-radius: 0.5625rem;
    margin-top: 24px;
    display: none;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer em {
    font-weight: 700;
    font-style: normal;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer p {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer p:first-child {
    margin-top: 0;
  }
}
@media screen {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer a {
    color: #158443;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event {
    padding: 0;
    height: 100%;
    min-height: 100vh;
  }
  article.c-written-tutorial.c-written-tutorial--event header {
    display: block;
    padding: 60px 0 0 0;
    animation: none;
    background: #E2E6F7;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header .c-written-tutorial__introduction {
    background: none;
    margin-left: 0;
    padding: 0;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event header h1 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header h1 {
    font-size: 2.5rem;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event header h1 > span {
    display: none;
    font-size: 3rem;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event header .c-written-tutorial__pull-quote {
    font-family: "Bitter", serif;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header p {
    font-size: 15px;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header {
    background: none;
    padding: 0 0 0 0;
    position: relative;
    overflow: hidden;
  }
  article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction {
    position: relative;
  }
  article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction h1 {
    padding-top: 45px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction h1 {
    font-size: 2.0625rem; /* 33/16 */
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction p {
    font-size: 1.1875rem; /* 19/16 */
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header.c-written-tutorial--event-header .c-written-tutorial__introduction p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial--event-artwork img {
    width: 100%;
    border-radius: 0.5625rem;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content {
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content > h2 {
    font-size: 2.25rem;
    line-height: 1.125;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content > h2 {
    font-size: 1.5rem;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content > h2 a {
    color: #333333;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content > span {
    display: block;
    font-size: 0.75rem; /* 12/16 */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15px;
  }
}
@media screen {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content img.bordered {
    border-width: 9px;
  }
}
@media screen and (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content img.bordered {
    border-width: 6px;
  }
}
@media screen {
  .l-written-tutorial--light pre {
    border: 1px solid #D6E0EF !important;
    background: #F2F6FA !important;
    color: #333333 !important;
  }
  .l-written-tutorial--light pre .hljs {
    color: #333333 !important;
  }
  .l-written-tutorial--light div.note pre .hljs {
    color: #333333 !important;
  }
  .l-written-tutorial--light .o-button-code {
    background-image: url(/assets/svg-icons/dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
    background-size: cover;
  }
  .l-written-tutorial--light .o-button-code:hover {
    background: #647388;
    background-image: url(/assets/svg-icons/dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
    background-size: cover;
  }
}
@media screen {
  .c-admin-edit-banner {
    background: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 12px 15px;
    z-index: 99999;
  }
}
@media screen and (max-width: 768px) {
  .c-admin-edit-banner {
    justify-content: center;
  }
}
@media screen {
  .c-admin-edit-banner a, .c-admin-edit-banner span {
    font-size: 0.9375rem; /* 15/16 */
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
  }
}
@media screen {
  .c-admin-edit-banner a {
    cursor: pointer;
    margin-right: 18px;
  }
}
@media screen and (max-width: 992px) {
  .c-admin-edit-banner .c-admin-edit-banner__links {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .c-admin-edit-banner .c-admin-edit-banner__profile {
    display: none;
  }
}
@media screen {
  .c-admin-edit-banner .c-admin-edit-banner__profile .c-admin-edit-banner__profile-username {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
  }
}
@media screen {
  .c-admin-edit-banner .o-text-button--warning:hover .o-tooltip {
    opacity: 1;
    visibility: visible;
  }
  .c-admin-edit-banner .o-text-button--warning li {
    display: block;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 12px;
    position: relative;
  }
  .c-admin-edit-banner .o-text-button--warning li:before {
    content: "";
    width: 3.5px;
    height: 13px;
    background-image: url(/assets/svg-icons/warning-d5e52e154c388e379e8676cde7ce41fa41669469ccafa9c3018f95f207f54603.png);
    background-size: cover;
    position: absolute;
    left: 0;
    top: 9px;
  }
}
@media screen and (max-width: 768px) {
  .c-admin-edit-banner .o-text-button--warning li {
    max-width: 200px;
  }
}
@media screen {
  .c-admin-edit-banner .o-text-button--warning .o-tooltip {
    top: auto;
    bottom: 40px;
    line-height: 30px;
    height: auto;
  }
  .c-admin-edit-banner .o-text-button--warning .o-tooltip:after {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-admin-edit-banner .o-text-button--warning .o-tooltip {
    left: auto !important;
    right: 0;
    transform: none;
  }
}
@media screen and (max-width: 768px) {
  .c-admin-edit-banner .o-text-button--warning .o-tooltip {
    left: 50% !important;
    right: auto;
    transform: translateX(-50%);
  }
}
@media screen {
  .c-sticky-options-banner {
    position: fixed;
    top: 10px;
    right: 30px;
    z-index: 99999;
    width: 27px;
  }
}
@media screen and (max-width: 1200px) {
  .c-sticky-options-banner {
    display: none;
  }
}
@media screen {
  .c-sticky-options-banner button {
    width: 27px;
    padding: 0;
    margin-top: 15px;
  }
  .c-sticky-options-banner button i {
    width: 27px;
  }
}
@media screen {
  .c-book-chapter header {
    display: block !important;
    animation: none !important;
  }
  .c-book-chapter header h1 {
    margin-top: 20px;
  }
}
@media screen and (max-width: 600px) {
  .c-book-chapter header .c-written-tutorial__introduction {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter header .c-written-tutorial__introduction .l-font-17 {
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter header .c-written-tutorial__introduction .l-font-42 {
    font-size: 2rem;
  }
}
@media screen {
  .c-book-chapter .c-written-tutorial__content {
    animation: none !important;
  }
  .c-book-chapter .c-written-tutorial__content p, .c-book-chapter .c-written-tutorial__content ul, .c-book-chapter .c-written-tutorial__content ol {
    /* The base style sets em as bold, due to a legacy quirk in the style
     * used for articles in Wordpress. Books support <em> as italic and
     * <strong> as bold as is the convention for CommonMark.
     */
  }
  .c-book-chapter .c-written-tutorial__content p strong, .c-book-chapter .c-written-tutorial__content ul strong, .c-book-chapter .c-written-tutorial__content ol strong {
    font-weight: 700 !important;
    font-style: normal !important;
  }
  .c-book-chapter .c-written-tutorial__content p strong em, .c-book-chapter .c-written-tutorial__content ul strong em, .c-book-chapter .c-written-tutorial__content ol strong em {
    font-style: italic !important;
    font-weight: 700 !important;
  }
  .c-book-chapter .c-written-tutorial__content p em, .c-book-chapter .c-written-tutorial__content ul em, .c-book-chapter .c-written-tutorial__content ol em {
    font-style: italic !important;
    font-weight: 400 !important;
  }
  .c-book-chapter .c-written-tutorial__content p em strong, .c-book-chapter .c-written-tutorial__content ul em strong, .c-book-chapter .c-written-tutorial__content ol em strong {
    font-style: italic !important;
    font-weight: 700 !important;
  }
}
@media screen {
  .c-book-chapter h1 code, .c-book-chapter h2 code, .c-book-chapter h3 code, .c-book-chapter h4 code, .c-book-chapter h5 code {
    font-size: inherit !important;
    font-family: inherit !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
  }
  .c-book-chapter h1 em, .c-book-chapter h2 em, .c-book-chapter h3 em, .c-book-chapter h4 em, .c-book-chapter h5 em {
    font-style: normal;
  }
}
@media screen {
  .c-book-chapter pre code {
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }
}
@media screen {
  .c-book-chapter blockquote {
    font-family: inherit;
    background: #F2F6FA;
    font-size: 1em; /* 17/16 */
    padding: 20px 24px;
    border-radius: 0.5625rem;
    margin-top: 18px;
  }
  .c-book-chapter blockquote pre {
    margin-left: 0px;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter blockquote {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-book-chapter blockquote strong {
    font-weight: 700;
    font-style: normal;
  }
}
@media screen {
  .c-book-chapter blockquote em {
    font-style: italic;
  }
}
@media screen {
  .c-book-chapter blockquote p {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter blockquote p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-book-chapter blockquote p:first-child {
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter blockquote p:first-child {
    margin-top: 0 !important;
  }
}
@media screen {
  .c-book-chapter blockquote a {
    color: #158443;
  }
}
@media screen {
  .c-book-chapter figure {
    max-width: 720px;
    margin: 0 auto;
  }
  .c-book-chapter figure img {
    max-height: 720px;
  }
  .c-book-chapter figure figcaption {
    margin-top: 12px;
    font-size: 0.9375em; /* 15/16 */
    color: #6E7687;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter figure figcaption {
    font-size: 0.8125em; /* 13/16 */
  }
}
@media screen and (max-width: 600px) {
  .c-book-chapter figure figcaption {
    text-align: left;
  }
}
@media screen {
  .c-book-chapter .l-image-bordered img {
    border: 9px solid #DFE7F0;
    border-radius: 0.5625rem;
  }
}
@media screen {
  .c-book-chapter__links {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 72px;
  }
  .c-book-chapter__links a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18/16 */
    height: 72px;
    line-height: 72px;
    text-decoration: none;
    text-align: center;
    color: #333333;
    border-top: 1px solid #DFE7F0;
  }
  .c-book-chapter__links a:hover {
    background: #F5F8FB;
  }
  .c-book-chapter__links a span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-book-chapter__links a svg {
    width: 17px;
    height: 15px;
    fill: #A7ADB4;
  }
  .c-book-chapter__links .c-book-chapter__links--left:hover svg {
    transform: translateX(-5px);
  }
  .c-book-chapter__links .c-book-chapter__links--left span, .c-book-chapter__links .c-book-chapter__links--left svg {
    margin-right: auto;
    margin-right: auto;
  }
  .c-book-chapter__links .c-book-chapter__links--left span {
    margin-left: -41px;
  }
  .c-book-chapter__links .c-book-chapter__links--left svg {
    transition: all 0.25s;
    margin-left: 24px;
  }
  .c-book-chapter__links .c-book-chapter__links--right:hover svg {
    transform: translateX(5px);
  }
  .c-book-chapter__links .c-book-chapter__links--right span, .c-book-chapter__links .c-book-chapter__links--right svg {
    margin-left: auto;
    margin-left: auto;
  }
  .c-book-chapter__links .c-book-chapter__links--right span {
    margin-right: -41px;
  }
  .c-book-chapter__links .c-book-chapter__links--right svg {
    transition: all 0.25s;
    margin-right: 24px;
  }
}
@media screen {
  .c-book-chapter__dedications {
    max-width: 568px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 18px;
  }
  .c-book-chapter__dedications p {
    text-align: center;
  }
  .c-book-chapter__dedications p:nth-child(even) {
    margin-top: 12px !important;
    margin-bottom: 48px;
  }
}
@media screen {
  .c-book-chapter__team {
    padding-top: 24px;
  }
  .c-book-chapter__team h2 {
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter__team {
    padding-top: 15px;
  }
}
@media screen {
  .c-book-chapter__team > div {
    display: flex;
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter__team > div {
    margin-bottom: 24px;
  }
}
@media screen {
  .c-book-chapter__team figure {
    width: 180px;
    min-width: 180px;
    margin-right: 24px;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter__team figure {
    width: 60px;
    min-width: 60px;
    margin-right: 15px;
  }
}
@media screen {
  .c-book-chapter__team figure img {
    width: 100%;
    height: 100%;
  }
}
@media screen {
  .c-book-chapter__team p {
    margin: 0 !important;
  }
  .c-book-chapter__team p strong:first-child {
    font-size: 1.6875rem; /* 27/16 */
    font-weight: 700;
    line-height: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter__team p strong:first-child {
    font-size: 1.1875rem; /* 19/16 */
  }
}
@media screen and (max-width: 768px) {
  .c-book-chapter__team .l-image-bordered img {
    border-width: 4px !important;
  }
}
@media screen {
  .c-global-search {
    width: 100%;
    background: #333333;
  }
  .c-global-search .c-global-search__recommendations {
    max-width: 960px;
    margin: 36px auto 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .c-global-search .c-global-search__recommendations::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-global-search .c-global-search__recommendations {
    padding: 0 30px;
  }
}
@media screen {
  .c-global-search .c-global-search__recommendations .c-search__loading {
    padding-top: 30px;
    padding-bottom: 0;
  }
}
@media screen {
  .c-global-search .c-global-search__recommendations h3 {
    font-size: 1.3125rem; /* 21/16 */
    color: #ffffff;
    margin-bottom: 21px;
  }
}
@media screen {
  .c-global-search .c-global-search__recommendations .c-tutorial--dark .c-tutorial-item a {
    background: #3B4048 !important;
    border-radius: 0.5625rem !important;
  }
}
@media screen {
  .c-global-search .c-global-search__input {
    height: 160px;
    display: flex;
    align-items: center;
    border-top: 2px solid #3B4048;
    border-bottom: 2px solid #3B4048;
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .c-global-search .c-global-search__input {
    height: 120px;
  }
}
@media screen {
  .c-global-search .c-global-search__input > div {
    height: 100%;
  }
}
@media screen {
  .c-global-search .c-global-search__input .c-global-search__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    overflow: hidden;
  }
}
@media screen {
  .c-global-search .c-global-search__input .c-global-search__icon {
    position: absolute;
    top: 50%;
    margin-top: -24px;
  }
}
@media screen and (max-width: 768px) {
  .c-global-search .c-global-search__input .c-global-search__icon {
    margin-top: -15px;
  }
}
@media screen {
  .c-global-search .c-global-search__input .c-global-search__icon svg {
    width: 48px;
    height: 48px;
    fill: #959DA5;
  }
}
@media screen and (max-width: 768px) {
  .c-global-search .c-global-search__input .c-global-search__icon svg {
    width: 30px;
    height: 30px;
  }
}
@media screen {
  .c-global-search .c-global-search__input input {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    font-size: 2.625rem;
    color: #ffffff;
    padding-left: 78px;
  }
  .c-global-search .c-global-search__input input:focus {
    outline: none;
  }
  .c-global-search .c-global-search__input input::placeholder {
    color: #959DA5;
  }
}
@media screen and (max-width: 768px) {
  .c-global-search .c-global-search__input input {
    font-size: 1.5rem;
    padding-left: 48px;
  }
}
@media screen and (max-width: 768px) {
  .c-global-search .c-global-search__input input {
    font-size: 1.25rem;
  }
}
@media screen {
  .c-global-search .c-global-search__hint {
    max-width: 960px;
    margin: 36px auto 0;
    padding: 0 20px;
  }
  .c-global-search .c-global-search__hint p, .c-global-search .c-global-search__hint a {
    color: #ffffff;
  }
  .c-global-search .c-global-search__hint p {
    display: flex;
    justify-content: center;
    text-align: center;
    font-weight: normal !important;
  }
  .c-global-search .c-global-search__hint p i {
    margin-right: 9px;
  }
  .c-global-search .c-global-search__hint p a {
    text-decoration: underline !important;
  }
}
@media screen {
  .c-global-search--overlay {
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 100%;
    padding-top: 72px;
    padding-bottom: 72px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .c-global-search--overlay::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (max-width: 600px) {
  .c-global-search--overlay {
    padding-top: 0;
  }
}
@media screen {
  .c-filter-platform {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #333333;
    height: 120px;
    line-height: 120px;
    align-items: center;
    min-width: 1200px;
  }
}
@media screen and (max-width: 992px) {
  .c-filter-platform {
    height: 80px;
    line-height: 80px;
    display: flex;
    min-width: auto;
    white-space: nowrap;
  }
}
@media screen {
  .c-filter-platform li {
    cursor: pointer;
    text-align: center;
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
    border-right: 2px solid #3B4048;
    transition: background 0.3s ease-out;
  }
}
@media screen and (max-width: 992px) {
  .c-filter-platform li {
    border-right: 0;
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen and (max-width: 992px) {
  .c-filter-platform li:first-child {
    margin-left: 15px;
  }
}
@media screen {
  .c-filter-platform li:last-child {
    border-right: none;
  }
}
@media screen {
  .c-filter-platform li:hover {
    background: #3B4048;
  }
}
@media screen and (max-width: 992px) {
  .c-filter-platform li:hover {
    background: none;
  }
}
@media screen and (max-width: 992px) {
  .c-filter-platform li span {
    padding: 10px 20px;
    border-radius: 100px;
  }
}
@media screen {
  .c-filter-platform li.c-filter-platform__option--active {
    background: #3B4048;
    position: relative;
  }
}
@media screen and (max-width: 992px) {
  .c-filter-platform li.c-filter-platform__option--active {
    background: none;
  }
}
@media screen {
  .c-filter-platform li.c-filter-platform__option--active:before {
    content: "";
    position: absolute;
    background: #ffffff;
    bottom: -12px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    transform: rotate(45deg);
    border-radius: 3px;
  }
}
@media screen and (max-width: 992px) {
  .c-filter-platform li.c-filter-platform__option--active:before {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-filter-platform li.c-filter-platform__option--active span {
    background: #3B4048;
  }
}
@media screen {
  .c-library-filters {
    position: fixed;
    right: 0;
    left: auto;
    top: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right bottom, #333333, #363638, #38393d, #3a3c43, #3b4048);
    display: block;
    padding-top: 72px;
    padding-bottom: 54px;
    overflow: hidden;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters {
    position: relative !important;
    padding-top: 0 !important;
    padding-bottom: 0;
    width: 100%;
    height: 150px !important;
    overflow: hidden;
    overflow-y: hidden !important;
    animation: none;
    z-index: 99;
  }
}
@media screen {
  .c-library-filters .o-button__label--open {
    display: none;
  }
}
@media screen {
  .c-library-filters .o-button-tooltip--subscription {
    width: 22px !important;
    height: 22px !important;
    margin-left: 6px !important;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .o-button-tooltip--subscription {
    display: none;
  }
}
@media screen {
  .c-library-filters .o-button-tooltip--subscription svg {
    transform: none !important;
    width: 12px !important;
    height: 12px !important;
    fill: #333333 !important;
    opacity: 1 !important;
    margin: -6px 5px 0 0 !important;
  }
}
@media screen {
  .c-library-filters .o-tooltip--subscription {
    min-width: 300px;
    font-style: normal;
  }
  .c-library-filters .o-tooltip--subscription:before {
    content: "";
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: -30px;
    left: 0;
  }
  .c-library-filters .o-tooltip--subscription a {
    color: #158443 !important;
    text-decoration: underline !important;
  }
}
@media screen and (min-width: 992px) {
  .c-library-filters .c-video-player__lessons-section {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section {
    padding: 0 24px 20px;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section--options {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section-search {
    display: block;
  }
}
@media screen {
  .c-library-filters .c-video-player__lessons-section-category {
    display: block !important;
  }
}
@media screen {
  .c-library-filters .c-video-player__lessons-title .c-video-player__lessons-info {
    position: relative;
    top: 7px;
    right: -9px;
  }
  .c-library-filters .c-video-player__lessons-title .c-video-player__lessons-info:hover .o-tooltip {
    visibility: visible;
    opacity: 1;
  }
  .c-library-filters .c-video-player__lessons-title .c-video-player__lessons-info svg {
    opacity: 1;
    fill: #333333;
    width: 12px;
    height: 14px;
    margin-top: -7px;
    margin-left: 6px;
  }
  .c-library-filters .c-video-player__lessons-title .c-video-player__lessons-info .o-tooltip {
    top: -50px;
    height: auto;
    text-align: left;
  }
}
@media screen {
  .c-library-filters .c-video-player__lessons-section--action {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    padding: 0 10px;
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section--action {
    display: inline-flex;
    position: relative;
    top: 0;
    margin-top: 0;
    padding: 20px 24px;
    width: 100%;
    justify-content: center;
  }
  .c-library-filters .c-video-player__lessons-section--action button .o-button__icon--left {
    margin-right: 9px;
  }
}
@media screen {
  .c-library-filters .c-video-player__lessons-section--action button .o-button__icon--left {
    margin-right: 6px;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section--action .o-text-button--desktop {
    display: none !important;
  }
}
@media screen {
  .c-library-filters .c-video-player__lessons-section--action .o-text-button--mobile {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section--action .o-text-button--mobile {
    display: flex !important;
  }
}
@media screen {
  .c-library-filters .c-library-filters__checkbox-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 9px !important;
  }
  .c-library-filters .c-library-filters__checkbox-list li {
    padding: 12px 0;
    width: 50%;
    white-space: nowrap;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .c-library-filters__checkbox-list li {
    width: 25%;
  }
}
@media screen and (max-width: 768px) {
  .c-library-filters .c-library-filters__checkbox-list li {
    width: 33%;
  }
}
@media screen and (max-width: 600px) {
  .c-library-filters .c-library-filters__checkbox-list li {
    width: 100%;
  }
}
@media screen {
  .c-library-filters .c-library-filters__checkbox-list li > span {
    color: #ffffff;
    padding-left: 32px;
    position: relative;
    top: 1px;
    z-index: -1;
  }
}
@media screen {
  .c-library-filters .c-library-filters__checkbox-list li .checkbox__indicator {
    width: 24px;
    height: 24px;
  }
  .c-library-filters .c-library-filters__checkbox-list li .checkbox__indicator svg {
    width: 12px;
    margin: -5px 0 0 -6px;
  }
}
@media screen {
  .c-library-filters .c-video-player__lesson-list {
    margin-bottom: 0 !important;
  }
}
@media screen {
  .c-library-filters .c-video-player__lesson-list--open {
    display: flex !important;
    flex-wrap: wrap !important;
  }
}
@media screen {
  .c-library-filters .c-video-player__lesson-list-dropdown--open {
    display: block !important;
  }
}
@media screen {
  .c-library-filters #library-query {
    margin-bottom: 0;
  }
}
@media screen {
  .c-library-filters .c-library-filters__key-controls {
    position: fixed;
    bottom: 0;
    width: 100px;
    z-index: 999;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .c-library-filters__key-controls {
    width: 100% !important;
  }
  .c-library-filters .c-library-filters__key-controls .o-button__label--open {
    display: block !important;
  }
  .c-library-filters .c-library-filters__key-controls .o-button__label--close {
    display: none !important;
  }
}
@media screen {
  .c-library-filters .c-library-filters__key-controls .o-button {
    border-radius: 0;
    width: 100%;
    height: 54px;
    justify-content: center;
  }
}
@media screen {
  .c-library-filters .c-library-filters__key-controls .o-button-apply {
    display: none;
  }
}
@media screen {
  .c-library-filters .dropdown .dropdown-toggle input {
    width: 100% !important;
    height: 50px;
    padding: 0 15px;
    background: #ffffff;
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem; /* 9/16 */
    transition: all 0.25s;
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 1rem;
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
    margin-bottom: 0;
  }
  .c-library-filters .dropdown .dropdown-toggle input:focus {
    background: rgba(29, 131, 209, 0.05);
    border: 2px solid #73859F;
    box-shadow: 0px 5px 10px rgba(55, 55, 55, 0.05);
    outline: none;
  }
  .c-library-filters .dropdown .dropdown-toggle input::placeholder {
    color: #ffffff;
  }
  .c-library-filters .dropdown .dropdown-toggle input:hover {
    background: rgba(29, 131, 209, 0.05);
  }
  .c-library-filters .dropdown.open input {
    padding: 0 15px !important;
    height: 50px !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }
}
@media screen {
  .c-library-filters .c-library-filters__added {
    margin-top: 18px;
  }
  .c-library-filters .c-library-filters__added span.o-tag {
    margin-right: 5px;
  }
}
@media screen {
  .c-library-filters .dropdown-menu {
    background: #ffffff;
    border-radius: 0.5625rem !important;
    padding: 24px 0 12px;
    width: 320px;
    z-index: 99999;
    border: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .dropdown-menu {
    position: relative;
    width: 100%;
    background: none;
    border-radius: none;
    box-shadow: none;
    margin-left: -10px;
  }
}
@media screen {
  .c-library-filters .dropdown-menu li {
    position: relative;
    padding-left: 30px;
  }
  .c-library-filters .dropdown-menu li:hover {
    background: #F2F6FA;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .dropdown-menu li:hover {
    background: none;
  }
}
@media screen {
  .c-library-filters .dropdown-menu li > span {
    display: inline-block;
    margin-left: -10px;
    color: #959DA5;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
@media screen {
  .c-library-filters .dropdown-menu li button {
    background: #959DA5;
    color: #ffffff;
    border-radius: 0.5625rem;
    font-size: 0.875rem; /* 14/16 */
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    float: right;
    cursor: pointer;
    margin-right: 18px;
    margin-top: 10px;
  }
}
@media screen {
  .c-library-filters .dropdown-menu li a {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 24px;
    font-size: 15px;
  }
  .c-library-filters .dropdown-menu li a:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border-radius: 0.5625rem;
    border: 2px solid rgba(115, 133, 159, 0.5);
    margin-top: -12px;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters .dropdown-menu li a:before {
    background: none;
    border: 2px solid rgba(115, 133, 159, 0.5);
  }
}
@media screen {
  .c-library-filters .dropdown-menu li.highlight {
    color: #333333;
  }
  .c-library-filters .dropdown-menu li.highlight a {
    background: none;
    color: #333333;
  }
}
@media screen {
  .c-library-filters .dropdown-menu li.active a {
    background: none;
  }
  .c-library-filters .dropdown-menu li.active a:before {
    background: #158443;
    background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
    background-size: cover;
    border: none;
  }
}
@media screen {
  .c-library-filters--open .c-library-filters {
    width: 380px;
    overflow-y: auto;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters--open .c-library-filters {
    position: fixed;
    padding-top: 72px;
    padding-bottom: 54px;
    width: 100%;
    height: 100%;
  }
}
@media screen {
  .c-library-filters--open .c-library-filters .c-video-player__lessons-section--action {
    display: inline-flex;
    position: relative;
    top: 0;
    margin-top: 0;
    padding: 20px 24px;
  }
  .c-library-filters--open .c-library-filters .c-video-player__lessons-section--action button .o-button__icon--left {
    margin-right: 9px;
  }
}
@media screen {
  .c-library-filters--open .c-library-filters__key-controls {
    display: flex;
    width: 380px;
  }
}
@media screen {
  .c-library-filters--open .o-button__label--close {
    display: none;
  }
}
@media screen {
  .c-library-filters--open .o-button__label--open {
    display: block;
  }
}
@media screen {
  .c-library-filters--open .c-video-player__lessons-section {
    display: block;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters--open .c-video-player__lessons-section--options {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters--mobile-open .c-library-filters__key-controls {
    display: flex;
    width: 360px;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters--mobile-open .c-library-filters {
    position: fixed !important;
    padding-top: 72px !important;
    padding-bottom: 54px;
    width: 100%;
    height: 100% !important;
    overflow-y: scroll !important;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters--mobile-open .c-library-filters .c-video-player__lessons-section--options {
    display: block;
  }
}
@media screen and (max-width: 992px) {
  .c-library-filters--mobile-open .c-library-filters .o-button-apply {
    display: inline-block !important;
  }
}
@media screen {
  .c-library-filters--mobile-open .c-library-filters .o-button-apply svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    left: -2px;
  }
}
@media screen {
  .c-library-controls button {
    margin-left: 18px;
  }
  .c-library-controls button:focus {
    outline: none;
  }
  .c-library-controls button:last-child {
    margin-right: 0;
  }
  .c-library-controls .o-dropdown-menu {
    top: 30px;
    right: 0;
    width: 270px;
  }
  .c-library-controls .o-dropdown-menu:before {
    display: none;
  }
  .c-library-controls .o-dropdown-menu li {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    font-size: 1.0625rem; /* 17/16 */
    color: #333333;
  }
  .c-library-controls .o-dropdown-menu li:hover {
    background: #DBDDE0;
  }
}
@media screen {
  .l-library.l-background--black .c-library-controls button {
    color: #ffffff;
  }
  .l-library.l-background--black .c-library-controls button svg {
    fill: #ffffff;
  }
}
@media screen {
  .c-search__loading {
    padding-bottom: 300px;
    padding-top: 100px;
    text-align: center;
  }
  .c-search__loading h3 {
    text-align: center;
  }
  .c-search__loading .c-search__loading-static {
    min-height: 220px;
  }
  .c-search__loading .c-search__loading-static img {
    width: 150px;
  }
}
@media screen and (max-width: 768px) {
  .c-search__loading .c-search__loading-static img {
    width: 120px;
  }
}
@media screen {
  .c-search__loading .c-search__loading-animate {
    position: relative;
    width: 150px;
    margin-top: 20px;
    margin-left: 30px;
  }
  .c-search__loading .c-search__loading-animate img {
    position: absolute;
    width: 50px;
    top: 0;
    left: 50px;
  }
}
@media screen and (max-width: 768px) {
  .c-search__loading .c-search__loading-animate img {
    width: 50px;
  }
}
@media screen {
  .c-search__loading .c-search__loading-animate img.a-file-rotate--2 {
    top: 75px;
    left: 15px;
    animation-duration: 2.9s;
  }
}
@media screen {
  .c-search__loading .c-search__loading-animate img.a-file-rotate--3 {
    top: 75px;
    left: 85px;
    animation-duration: 3.1s;
  }
}
@media screen {
  .c-search__no-results {
    text-align: center;
  }
  .c-search__no-results h3 {
    font-size: 2.25rem; /* 36/16 */
    margin-top: 24px;
  }
}
@media screen and (max-width: 600px) {
  .c-search__no-results h3 {
    font-size: 1.3125rem !important;
  }
}
@media screen {
  .c-search__no-results h4 {
    font-size: 1.3125rem; /* 21/16 */
    margin-top: 32px;
  }
}
@media screen and (max-width: 600px) {
  .c-search__no-results h4 {
    font-size: 1.1875rem !important; /* 19/16 */
  }
}
@media screen {
  .c-search__no-results img {
    display: inline-block;
    width: 200px;
    height: auto;
    margin-left: -20px;
    padding-top: 20px;
  }
}
@media screen and (max-width: 600px) {
  .c-search__no-results img {
    width: 150px;
  }
}
@media screen {
  .c-search__no-results p {
    font-style: italic;
    font-size: 2.25rem;
  }
}
@media screen and (max-width: 600px) {
  .c-search__no-results p {
    font-size: 1.3125rem;
  }
}
@media screen {
  .c-search__no-results .c-search__tags {
    margin-top: 24px;
    text-align: center;
  }
}
@media screen {
  .c-global-search--book {
    background: #ffffff;
  }
}
@media screen and (max-width: 600px) {
  .c-global-search--book {
    padding-top: 24px;
  }
}
@media screen {
  .c-global-search--book .o-input {
    margin: 0;
  }
}
@media screen and (max-width: 992px) {
  .c-global-search--book .o-input {
    width: calc(100% - 32px);
  }
}
@media screen {
  .c-global-search--book .input__icon-svg--search {
    fill: #959DA5;
    margin-top: -9px;
  }
}
@media screen {
  .c-global-search--book .c-global-search__close {
    position: absolute;
    right: -32px;
    top: 15px;
    cursor: pointer;
  }
}
@media screen and (max-width: 992px) {
  .c-global-search--book .c-global-search__close {
    right: 0;
  }
}
@media screen {
  .c-global-search--book .c-global-search__close svg {
    height: 18px;
  }
}
@media screen {
  .c-global-search--book .c-global-search__recommendations {
    margin-top: 20px;
  }
}
@media screen and (max-width: 992px) {
  .c-global-search--book .c-global-search__recommendations {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen {
  .c-global-search--book .c-global-search__recommendations h3 {
    color: #333333;
  }
}
@media screen {
  .c-global-search--book .c-global-search__recommendations ul li {
    border-bottom: 1px solid #DBDDE0;
    padding: 15px 0;
  }
  .c-global-search--book .c-global-search__recommendations ul li a {
    color: #333333;
    text-decoration: none;
  }
  .c-global-search--book .c-global-search__recommendations ul li p {
    font-size: 0.9375rem; /* 15/16 */
    color: #333333;
  }
  .c-global-search--book .c-global-search__recommendations ul li .c-search__results--highlight {
    background: transparent;
    font-weight: 700;
    padding: 0;
  }
}
@media screen {
  .c-global-search--book .c-global-search__recommendations .c-search__results-chapter {
    margin-bottom: 3px;
    font-family: "Bitter", serif;
    font-size: 1.0625rem; /* 17/16 */
    font-weight: 700;
    text-decoration: underline;
  }
  .c-global-search--book .c-global-search__recommendations .c-search__results-chapter:hover {
    color: #158443;
  }
}
@media screen {
  .c-global-search--book .c-paginator {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    border-bottom: 1px solid #DBDDE0;
  }
}
@media screen {
  .c-content-author {
    display: flex;
  }
}
@media screen and (max-width: 768px) {
  .c-content-author {
    margin-top: 20px;
  }
}
@media screen {
  .c-content-author img {
    display: flex;
    min-width: 60px;
    height: 60px;
    border-radius: 0.5625rem;
    border: 4px solid #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    margin-right: 15px;
  }
}
@media screen {
  .c-content-author a {
    color: #333333;
    text-decoration: none;
  }
}
@media screen {
  .c-content-author .c-content-author__title {
    display: block;
    font-family: "Bitter", serif;
    font-size: 1rem; /* 18/16 */
    font-weight: 700;
    margin-top: 6px;
  }
  .c-content-author .c-content-author__title i {
    position: relative;
    margin-left: 15px;
    top: 1px;
  }
}
@media screen {
  .c-content-author .c-content-author__title--large {
    font-size: 1.125rem; /* 18/16 */
    margin-top: 0 !important;
  }
}
@media screen {
  .c-content-author .c-content-author__description {
    font-size: 0.9375rem; /* 15/16 */
    color: #6E7687;
    margin-top: 6px;
  }
  .c-content-author .c-content-author__description a {
    color: #158443;
    text-decoration: underline;
  }
}
@media screen {
  .c-content-author .c-content-author__read-more {
    margin-top: 3px;
  }
  .c-content-author .c-content-author__read-more a {
    font-size: 0.9375rem; /* 15/16 */
    color: #158443;
  }
}
@media screen {
  .c-content-author .o-badge {
    display: inline-block;
    margin-top: 12px;
  }
}
@media screen {
  .c-authors--dark .c-content-author .c-content-author__title {
    color: #ffffff;
  }
  .c-authors--dark .c-content-author .c-content-author__description {
    color: #A7ADB4;
  }
  .c-authors--dark .c-content-author img {
    border: 4px solid #434A53;
  }
  .c-authors--dark .c-content-author .o-badge {
    background: #434A53 !important;
    color: #ffffff !important;
  }
}
@media screen {
  .c-content-author--card {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    padding: 18px 42px 30px 18px;
  }
  .c-content-author--card img {
    border: 0;
    box-shadow: none;
  }
}
@media screen {
  .c-content-author--quote {
    position: relative;
  }
  .c-content-author--quote:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 15px;
    right: 18px;
    top: 18px;
    background-image: url(/assets/svg-icons/punctutation-a2544368f2caec4bc5be734142714d92543038d9cf6bf95e0a06680be8f1629a.png);
    background-size: cover;
  }
}
@media screen {
  .c-profile__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    max-width: 1080px;
  }
}
@media screen and (max-width: 1140px) {
  .c-profile__grid {
    padding: 30px 20px 0;
  }
}
@media screen and (max-width: 992px) {
  .c-profile__grid {
    grid-template-columns: 1fr;
  }
  .c-profile__grid .c-profile__links {
    order: 2;
    margin-top: 30px;
  }
  .c-profile__grid .c-profile__bio {
    order: 1;
  }
}
@media screen {
  .c-profile__grid .c-profile__bio-description {
    color: #6E7687;
  }
  .c-profile__grid .c-profile__bio-description a {
    color: #158443;
  }
}
@media screen {
  .c-profile__sidebar {
    width: 100%;
    background: #333333;
    padding: 42px 30px;
    z-index: 9999;
    text-align: center;
  }
  .c-profile__sidebar .c-profile__sidebar-user {
    font-size: 1.25rem; /* 20/16 */
    margin-top: 15px;
  }
}
@media screen {
  .c-profile__empty {
    text-align: center;
  }
  .c-profile__empty img {
    width: 320px;
  }
}
@media screen {
  .c-profile__contributions .c-tutorial-item__in-progress, .c-profile__contributions .c-tutorial-item__complete {
    display: none !important;
  }
}
@media screen {
  .c-profile__progressions .c-tutorial-item__in-progress {
    display: none !important;
  }
  .c-profile__progressions .c-tutorial-item--complete .c-tutorial-item__complete {
    display: inline-flex !important;
  }
  .c-profile__progressions .o-button--mark-as-complete {
    display: block;
  }
  .c-profile__progressions .c-tutorial-item__icon {
    display: none !important;
  }
  .c-profile__progressions .c-tutorial-item__art .o-badge {
    display: none !important;
  }
}
@media screen {
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__header {
    display: flex;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__load {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    font-family: "Bitter", serif;
    font-size: 1.0625rem; /* 17/16 */
    font-weight: 700;
    cursor: pointer;
    padding: 0 18px;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__load:hover {
    color: #158443;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__load span {
    margin-left: auto;
    letter-spacing: -0.5px;
    color: #333333;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__load i {
    display: flex;
    margin-left: auto;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    padding: 20px 18px;
    display: grid;
    grid-template-columns: 69px 1fr;
    position: relative;
    margin-top: 15px;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment:first-child {
    margin-top: 0;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment .c-forum-comment__username {
    display: block;
    font-family: "Bitter", serif;
    font-weight: 700;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment .c-forum-comment__date {
    display: block;
    font-size: 0.9375rem; /* 15/16 */
    color: #6E7687;
    margin-top: 4px;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment .c-forum-comment__post {
    margin-top: 4px;
    padding-right: 40px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment .c-forum-comment__post {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment .c-forum-comment__reply {
    position: absolute;
    bottom: 18px;
    right: 18px;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment .c-forum-comment__reply svg {
    transition: all 0.3s ease-out;
  }
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment .c-forum-comment__reply:hover svg {
    opacity: 1;
  }
}
@media screen {
  .c-empty-state {
    text-align: center;
    position: relative;
  }
  .c-empty-state img {
    width: 200px;
  }
  .c-empty-state .c-empty-state__artwork {
    margin-top: 60px;
    width: 120px;
  }
}
@media screen and (max-width: 600px) {
  .c-empty-state .c-empty-state__artwork {
    width: 90px;
    margin-top: 45px;
  }
}
@media screen {
  .c-empty-state--android .c-empty-state__image-animate {
    position: absolute;
    width: 120px;
    top: 40px;
    right: 0px;
  }
}
@media screen {
  .c-empty-state--loader .c-search__loading {
    margin-left: -20px;
  }
  .c-empty-state--loader .c-search__loading-animate {
    margin-top: 40px;
  }
}
@media screen {
  .c-empty-state--following {
    padding: 0 30px 120px;
  }
  .c-empty-state--following h3 {
    font-size: 1.75rem; /* 32/16 */
  }
  .c-empty-state--following .c-empty-state__artwork {
    margin-top: -30px;
    width: 240px;
  }
}
@media screen {
  .c-empty-state--suggestions h3 {
    font-size: 1.75rem; /* 32/16 */
  }
}
@media screen {
  .c-empty-state--message {
    margin-top: 60px;
    text-align: center;
  }
  .c-empty-state--message h4 {
    font-size: 1.1875em; /* 19/16 */
    margin-top: 18px;
  }
  .c-empty-state--message p {
    font-size: 0.9375em; /* 15/16 */
    color: #6E7687;
    margin-top: 6px;
  }
  .c-empty-state--message img {
    width: 270px;
  }
}
@media screen {
  .c-empty-state--books img {
    width: 120px;
  }
}
@media screen {
  .c-empty-state--articles img {
    width: 130px;
  }
}
@media screen {
  .c-empty-state--announcements img {
    width: 66px;
  }
}
@media screen {
  .c-testimonial-wrapper {
    columns: 3;
    column-gap: 60px;
  }
}
@media screen and (max-width: 992px) {
  .c-testimonial-wrapper {
    columns: 2;
  }
}
@media screen and (max-width: 768px) {
  .c-testimonial-wrapper {
    columns: 1;
  }
}
@media screen {
  .c-testimonial-wrapper .c-testimonial {
    width: 100%;
    display: inline-block;
    margin-bottom: 30px;
  }
}
@media screen {
  .c-testimonial {
    text-align: center;
    position: relative;
    z-index: 1;
  }
}
@media screen and (max-width: 768px) {
  .c-testimonial {
    text-align: left;
  }
}
@media screen {
  .c-testimonial:before {
    content: "";
    z-index: 0;
    width: 40px;
    height: 30px;
    background-image: url(/assets/svg-icons/punctutation-a2544368f2caec4bc5be734142714d92543038d9cf6bf95e0a06680be8f1629a.png);
    background-size: cover;
    position: absolute;
    top: -10px;
    left: -10px;
    opacity: 0.25;
    z-index: -1;
  }
}
@media screen {
  .c-testimonial p {
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media screen and (max-width: 600px) {
  .c-testimonial p {
    font-size: 0.9375rem;
  }
}
@media screen {
  .c-testimonial span {
    display: block;
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
    font-weight: 700;
    margin-top: 15px;
  }
}
@media screen {
  .c-testimonial img {
    width: 48px;
    height: 48px;
    margin-top: 15px;
    border: 4px solid #ffffff;
    border-radius: 0.5625rem;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  }
}
@media screen {
  .c-testimonial-wrapper--twitter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}
@media screen and (max-width: 992px) {
  .c-testimonial-wrapper--twitter {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .c-testimonial-wrapper--twitter {
    grid-template-columns: 1fr;
  }
}
@media screen {
  .c-testimonial-wrapper--twitter .c-testimonial--twitter {
    width: 100%;
    display: inline-block;
  }
}
@media screen {
  .c-testimonial--twitter {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
    border-radius: 0.75rem; /* 12/16 */
    position: relative;
    z-index: 1;
    padding: 18px 18px 48px 18px;
  }
  .c-testimonial--twitter .c-testimonial__upper {
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-column-gap: 14px;
  }
  .c-testimonial--twitter .c-testimonial__upper span {
    font-size: 1rem;
    display: block;
  }
  .c-testimonial--twitter .c-testimonial__user {
    font-size: 1.125rem; /* 18/16 */
    font-weight: 700;
  }
  .c-testimonial--twitter .c-testimonial__twitter {
    font-size: 1rem;
    color: #6E7687;
    margin-top: -3px;
  }
  .c-testimonial--twitter .c-testimonial__date {
    position: absolute;
    bottom: 18px;
    right: 18px;
    font-size: 0.875rem; /* 14/16 */
    color: #6E7687;
  }
  .c-testimonial--twitter p {
    font-size: 1rem;
    margin-top: 16px;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 600px) {
  .c-testimonial--twitter p {
    font-size: 0.9375rem;
  }
}
@media screen {
  .c-testimonial--twitter img {
    width: 48px;
    height: 48px;
    border-radius: 100px;
  }
}
@media screen {
  .c-testimonial--twitter svg {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 22px;
    height: 18px;
  }
}
@media screen {
  .c-card-category {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    padding: 0 0 30px;
    min-height: 320px;
    position: relative;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .c-card-category:first-child {
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-card-category {
    background: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 0;
    border-bottom: 1px solid #DFE7F0;
  }
}
@media screen and (max-width: 600px) {
  .c-card-category {
    margin-top: 30px;
  }
}
@media screen {
  .c-card-category .c-card-category__artwork {
    width: 100%;
    height: 60px;
    position: relative;
    background: #ffffff;
    background-size: cover !important;
  }
}
@media screen and (max-width: 768px) {
  .c-card-category .c-card-category__artwork {
    display: none;
  }
}
@media screen {
  .c-card-category .c-card-category__artwork img {
    display: block;
    width: 100%;
  }
}
@media screen {
  .c-card-category .c-card-category__artwork .o-badge {
    position: absolute;
    top: 12px;
    left: 12px;
  }
}
@media screen {
  .c-card-category .c-card-category__text {
    padding: 0 27px;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .c-card-category .c-card-category__text {
    padding: 0;
    text-align: left;
  }
}
@media screen {
  .c-card-category .c-card-category__text .o-badge-video {
    display: inline-flex;
    width: 54px;
    height: 54px;
    margin-top: -27px;
  }
}
@media screen and (max-width: 768px) {
  .c-card-category .c-card-category__text .o-badge-video {
    margin-top: 0;
  }
}
@media screen {
  .c-card-category .c-card-category__text .o-badge-video img {
    width: 100%;
  }
}
@media screen {
  .c-card-category .c-card-category__text .c-card-category__text-title {
    font-size: 1.5rem; /* 24/16 */
    margin-top: 12px;
  }
}
@media screen and (max-width: 768px) {
  .c-card-category .c-card-category__text .c-card-category__text-title {
    font-size: 1.3125rem; /* 21/16 */
  }
}
@media screen {
  .c-card-category .c-card-category__text .c-card-category__text-description {
    font-size: 0.9375rem; /* 15/16 */
    color: #6E7687;
    margin-top: 12px;
    padding-bottom: 70px;
  }
}
@media screen and (max-width: 768px) {
  .c-card-category .c-card-category__text .c-card-category__text-description {
    padding-bottom: 0;
    margin-bottom: 15px;
  }
}
@media screen {
  .c-card-category .c-card-category__text .o-button--green, .c-card-category .c-card-category__text .o-button--dark {
    position: absolute;
    bottom: 30px;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 768px) {
  .c-card-category .c-card-category__text .o-button--green, .c-card-category .c-card-category__text .o-button--dark {
    position: relative;
    bottom: 0;
    transform: translateX(0);
  }
}
@media screen {
  .c-card-choice {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    text-align: center;
    padding: 27px 42px;
    position: relative;
  }
  .c-card-choice .c-card-choice__title {
    font-size: 1.5rem; /* 24/16 */
  }
  .c-card-choice a {
    position: absolute;
    bottom: 30px;
    transform: translateX(-50%);
  }
}
@media screen {
  .c-plan {
    background: #ffffff;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
    border-radius: 0.5625rem;
    text-align: center;
    padding: 36px 30px;
    width: 330px;
    height: 565px;
    margin-top: 30px;
    position: relative;
  }
  .c-plan h3 {
    font-size: 1.3125rem; /* 21/16 */
    font-weight: 600;
    margin-bottom: 0;
    padding-top: 0;
  }
  .c-plan .l-font-24 {
    font-size: 1.5rem;
  }
  .c-plan .c-plan__price {
    display: inline-block;
    position: relative;
    margin-top: 15px;
  }
  .c-plan .c-plan__price .c-plan__price-currency {
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
    font-weight: 700;
    position: absolute;
    top: 8px;
    left: -18px;
  }
  .c-plan .c-plan__price .c-plan__price-main {
    font-family: "Bitter", serif;
    font-size: 6.25rem; /* 100/16 */
    font-weight: 700;
    line-height: 100px;
    letter-spacing: -5px;
  }
  .c-plan .c-plan__price .c-plan__price-cents {
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
    font-weight: 700;
    letter-spacing: -0.5px;
    position: absolute;
    bottom: 8px;
    right: -24px;
  }
  .c-plan .c-plan__time span {
    display: block;
  }
  .c-plan .c-plan__time .c-plan__time-month {
    font-family: "Bitter", serif;
  }
  .c-plan .c-plan__time .c-plan__time-save {
    font-size: 0.875rem; /* 14/16 */
    margin-top: 6px;
    opacity: 0.66;
  }
  .c-plan .c-plan__time .c-plan__time-price {
    display: none;
  }
  .c-plan .c-plan__benefits {
    margin-top: 18px;
    list-style: none;
    padding: 0 0 60px 0;
    margin: 0;
  }
  .c-plan .c-plan__benefits li {
    position: relative;
    padding-left: 32px;
    font-family: "Bitter", serif;
    font-weight: 700;
    text-align: left;
    margin-top: 15px;
  }
}
@media screen and (max-width: 1080px) {
  .c-plan .c-plan__benefits li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media screen {
  .c-plan .c-plan__benefits li:before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(/assets/svg-icons/checkmark--green-1e096ae45df68feb9ffcc548c7c6510565f7f0d4098690d0121fe6739a2a7e76.png);
    background-size: cover;
  }
}
@media screen {
  .c-plan a, .c-plan .o-button {
    position: absolute;
    bottom: 36px;
    transform: translateX(-50%);
  }
}
@media screen {
  .c-plan .o-button--primary {
    bottom: 84px;
  }
}
@media screen {
  .c-plan .o-button--secondary {
    bottom: 36px;
    text-decoration: underline;
    font-size: 0.9375rem; /* 15/16 */
    white-space: nowrap;
  }
}
@media screen {
  .c-plan--emphasis {
    background: #158443;
    width: 336px;
    min-height: 645px;
    margin-top: 0;
  }
  .c-plan--emphasis .o-badge {
    position: absolute;
    top: -16px;
    color: #158443;
    border: 6px solid #158443;
    left: 50%;
    margin-left: -62px;
    box-shadow: none;
    border-radius: 0.9375rem; /* 15/16 */
  }
  .c-plan--emphasis .o-badge:after {
    background: #158443;
    top: 26px;
  }
  .c-plan--emphasis h3, .c-plan--emphasis li, .c-plan--emphasis .c-plan__price-currency, .c-plan--emphasis .c-plan__price-main, .c-plan--emphasis .c-plan__price-cents {
    color: #ffffff;
  }
  .c-plan--emphasis .c-plan__time span {
    color: #ffffff;
  }
  .c-plan--emphasis .c-plan__benefits li:before {
    background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  }
  .c-plan--emphasis .c-plan__benefits .c-plan__benefits--highlight:before {
    background-image: url(/assets/svg-icons/checkmark--blue-18803e2ee06f4c404b6c173497e54fbbb6e251bac81ecc8dfc030657cf775724.png);
  }
}
@media screen {
  .c-plan--team .c-plan__price-main {
    letter-spacing: -10px !important;
  }
}
@media screen {
  .c-plan--no-price p {
    height: 222px;
    display: flex;
    align-items: center;
  }
}
@media screen {
  .c-plan--left {
    border-radius: 0.5625rem 0 0 0.5625rem;
  }
}
@media screen {
  .c-plan--right {
    border-radius: 0 0.5625rem 0.5625rem 0;
  }
}
@media screen {
  .c-plan--confirm {
    width: 500px !important;
    height: auto !important;
    padding-bottom: 40px !important;
  }
  .c-plan--confirm .o-button--green {
    margin-top: 30px;
    position: relative;
    transform: none !important;
    bottom: auto;
  }
}
@media screen {
  .c-plan--neon {
    background: transparent;
    border: 2px solid #28D7FE;
    box-shadow: inset 0 0 1vw #1041FF, 0 0 3vw #1041FF, inset 0 0 6vw #1041FF, 0 0 6vw #1041FF, 0 0 0.4vw #8BFDFE;
  }
  .c-plan--neon h4, .c-plan--neon .c-price-card__price-main, .c-plan--neon .c-price-card__price-currency, .c-plan--neon .c-price-card__period, .c-plan--neon .c-price-card__saving {
    color: #ffffff;
  }
}
@media screen {
  .c-card-platform a, .c-card-platform > div {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: 0.5625rem;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
    text-align: center;
    color: #333333;
    text-decoration: none;
    padding: 36px;
    position: relative;
    overflow: hidden;
  }
  .c-card-platform a:before, .c-card-platform > div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
  }
  .c-card-platform h2 {
    max-width: 180px;
    margin: 0 auto;
    height: 54px;
    display: flex;
    align-items: center;
    font-size: 1.5rem; /* 24/16 */
    line-height: 1.125;
  }
  .c-card-platform p {
    color: #6E7687;
    font-size: 1rem;
    max-width: 180px;
    margin: 0 auto;
  }
}
@media screen {
  .c-card-platform--ios a:before, .c-card-platform--ios > div:before {
    background-image: url(/assets/artwork/illustration-ios-platform-ab500adbf99ef7a50eac362ac7dbd2da6c39386765beaf61e26e9e44c6d4223c.svg);
    background-size: 220px;
    background-position: top -44px center;
    background-repeat: no-repeat;
  }
  .c-card-platform--ios a:hover:before, .c-card-platform--ios > div:hover:before {
    background-size: 230px;
  }
}
@media screen {
  .c-card-platform--android a:before, .c-card-platform--android > div:before {
    background-image: url(/assets/artwork/illustration-android-platform-c683dd8685d10d1ffe4eeb8f9a65bea8c2fc5578d7a8f76608cf223babf8a1dc.svg);
    background-size: 230px;
    background-position: top -65px center;
    background-repeat: no-repeat;
  }
  .c-card-platform--android a:hover:before, .c-card-platform--android > div:hover:before {
    background-size: 240px;
  }
}
@media screen {
  .c-card-platform--flutter a:before, .c-card-platform--flutter > div:before {
    background-image: url(/assets/artwork/illustration-flutter-platform-14685d0e2cbeab64008c7ec07d50a10cbbb123c7c45a47eccd8143d287eff61c.svg);
    background-size: 343px;
    background-position: top -30px left -20px;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 768px) {
  .c-card-platform--flutter a:before, .c-card-platform--flutter > div:before {
    background-position: top -30px center;
  }
}
@media screen {
  .c-card-platform--flutter a:hover:before, .c-card-platform--flutter > div:hover:before {
    background-size: 353px;
  }
}
@media screen {
  .c-card-platform--server-side-swift a:before, .c-card-platform--server-side-swift > div:before {
    background-image: url(/assets/artwork/illustration-server-side-swift-platform-91676fd94c82c9d38412dfc3a9b24735710b500c8f47c0c04fee0cac1a160c27.svg);
    background-size: 207px;
    background-position: top -43px center;
    background-repeat: no-repeat;
  }
  .c-card-platform--server-side-swift a:hover:before, .c-card-platform--server-side-swift > div:hover:before {
    background-size: 212px;
  }
}
@media screen {
  .c-card-platform--unity a:before, .c-card-platform--unity > div:before {
    background-image: url(/assets/artwork/illustration-unity-platform-4459ddc546660de8c658f1f5a61ed4d400b8379ec1fd1348d3a27d2424975a1f.svg);
    background-size: 284px;
    background-position: top -60px right -38px;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 768px) {
  .c-card-platform--unity a:before, .c-card-platform--unity > div:before {
    background-position: top -60px center;
  }
}
@media screen {
  .c-card-platform--unity a:hover:before, .c-card-platform--unity > div:hover:before {
    background-size: 289px;
  }
}
@media screen {
  .c-card-option {
    border: 2px solid #D6E0EF;
    border-radius: 0.5625rem;
  }
  .c-card-option a {
    color: #333333;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    border-radius: 0.5625rem;
    position: relative;
  }
  .c-card-option a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #F2F6FA;
    z-index: -1;
    border-radius: 0.5625rem;
    transition: opacity 0.5s;
  }
  .c-card-option a:hover:before {
    opacity: 1;
  }
  .c-card-option h3 {
    color: #333333;
    font-size: 1.25rem; /* 20/16 */
    line-height: 1.25;
    text-decoration: none;
    text-align: center;
  }
}
@media screen {
  .c-card-option--ios a {
    background-image: url(/assets/artwork/onboarding-apple-icon-4e20e750ef237d1182f3dcab6de9e7e555da2dba4bacab0afb4e4a3c3a261242.svg);
    background-position: center calc(50% - 30px);
    background-size: 60px 65px;
    background-repeat: no-repeat;
  }
}
@media screen {
  .c-card-option--android {
    background-image: url(/assets/artwork/onboarding-android-icon-1cf3c1cd3080f104965c5771d36b6c69b2a14403320987914d1bf2ddcb56c783.svg);
    background-position: center calc(50% - 30px);
    background-size: 74px 50px;
    background-repeat: no-repeat;
  }
}
@media screen {
  .c-card-option--flutter {
    background-image: url(/assets/artwork/onboarding-flutter-icon-bd399909e58361c320f651baafe2990a2566358becca14deaa681ced949bd9b8.svg);
    background-position: center calc(50% - 30px);
    background-size: 65px 69px;
    background-repeat: no-repeat;
  }
}
@media screen {
  .c-card-option--server-side-swift {
    background-image: url(/assets/artwork/onboarding-sss-icon-cf09daa9cd8027ec50a34196dc0f971c140b9fb693da1839c1d0f38ebeab11de.svg);
    background-position: center calc(50% - 30px);
    background-size: 77px 62px;
    background-repeat: no-repeat;
  }
}
@media screen {
  .c-card-option--gametech {
    background-image: url(/assets/artwork/onboarding-unity-icon-1f53dd0e9ffa147bdddb4f7fe6ccd67903d178a4215855a314fdfb77b57d142b.svg);
    background-position: center calc(50% - 30px);
    background-size: 68px 69px;
    background-repeat: no-repeat;
  }
}
@media screen {
  .c-card-simple {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 0.5625rem;
    padding: 20px;
    min-height: 120px;
    position: relative;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
  }
  .c-card-simple > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .c-card-simple .c-card-simple__upper {
    padding-bottom: 20px;
  }
  .c-card-simple .c-card-simple__upper .c-card-simple__title {
    font-family: "Bitter", serif;
    font-size: 1.125rem; /* 18/16 */
    font-weight: bold;
    letter-spacing: -0.25px;
    line-height: 1.35;
  }
  .c-card-simple .c-card-simple__lower .c-card-simple__meta {
    display: block;
    font-size: 0.875rem; /* 14/16 */
    color: #6E7687;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 30px);
    max-width: 100%;
  }
}
@media screen {
  .c-card-simple--notebook .c-card-simple__lower svg {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 18px;
    height: 17px;
    fill: #959DA5;
  }
}
@media screen {
  .c-card-simple--bookmarks .c-card-simple__lower div.c-card-simple__bookmark {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .c-card-simple--bookmarks .c-card-simple__lower div.c-card-simple__bookmark .o-button--bookmark {
    height: 0px;
  }
}
@media screen {
  .c-card-simple--wrap-normal .c-card-simple__lower .c-card-simple__meta {
    white-space: normal;
  }
}
@media screen {
  .c-card-path-progress {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 228px 1fr 90px;
    padding: 20px 20px 20px 0;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    border-radius: 0.5625rem;
    background-color: #ffffff;
  }
}
@media screen and (max-width: 768px) {
  .c-card-path-progress {
    grid-template-columns: 1fr 90px;
    padding: 20px;
  }
}
@media screen {
  .c-card-path-progress .c-card-path-progress__left {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
  .c-card-path-progress .c-card-path-progress__left {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -75px 0 0 -75px;
    opacity: 0.1;
  }
}
@media screen {
  .c-card-path-progress .c-card-path-progress__left img {
    width: 150px;
    height: 150px;
    z-index: 1;
  }
  .c-card-path-progress .c-card-path-progress__left img:first-of-type {
    position: absolute;
    left: -75px;
    top: 50%;
    margin-top: -75px;
    filter: blur(134px);
    z-index: 0;
  }
}
@media screen and (max-width: 768px) {
  .c-card-path-progress .c-card-path-progress__left img:first-of-type {
    left: 0;
    top: 0;
  }
}
@media screen {
  .c-card-path-progress .c-card-path-progress__center {
    overflow-x: hidden;
  }
  .c-card-path-progress .c-card-path-progress__center .c-card-path-progress__title {
    font-size: 1.3125rem; /* 21/16 */
  }
  .c-card-path-progress .c-card-path-progress__center .c-card-path-progress__desc {
    font-size: 0.9375rem; /* 15/16 */
    margin-top: 6px;
    color: #6E7687;
  }
  .c-card-path-progress .c-card-path-progress__center .c-card-path-progress__syllabus {
    display: block;
    font-size: 0.9375rem; /* 15/16 */
    margin-top: 6px;
    color: #6E7687;
  }
  .c-card-path-progress .c-card-path-progress__center .c-box-list {
    margin-top: 24px;
    padding-bottom: 24px;
    position: relative;
  }
  .c-card-path-progress .c-card-path-progress__center .c-box-list:hover:before {
    opacity: 0;
    z-index: 0;
  }
  .c-card-path-progress .c-card-path-progress__center .c-box-list:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 128px;
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;
    transition: opacity 0.2s;
  }
  .c-card-path-progress .c-card-path-progress__center .c-box-list li {
    display: flex;
    white-space: normal;
  }
  .c-card-path-progress .c-card-path-progress__center .c-box-list li > a {
    display: inline-flex;
    white-space: normal;
  }
  .c-card-path-progress .c-card-path-progress__center .c-box-list .c-box-list__item-title {
    white-space: normal;
  }
  .c-card-path-progress .c-card-path-progress__center .c-box-list .c-box-list__item-number {
    color: #333333;
  }
  .c-card-path-progress .c-card-path-progress__center .c-box-list .c-box-list__item-duration {
    color: #6E7687;
    font-weight: normal;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0;
    display: none;
  }
}
@media screen {
  .c-card-path-progress .c-card-path-progress__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
  }
  .c-card-path-progress .c-card-path-progress__right .o-circular--progress .o-circular-progress--label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 54px;
    height: 30px;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: -15px 0 0 -27px;
  }
  .c-card-path-progress .c-card-path-progress__right .o-circular--progress .o-circular-progress--label .o-circluar--percent__text {
    display: inline-flex;
    padding-bottom: 0;
  }
}
@media screen {
  .c-noscript__body {
    margin: 50px 0;
  }
  .c-noscript__body h1 {
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 9rem; /* 144/16 */
    letter-spacing: -5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
@media only screen and (max-width: 600px) {
  .c-noscript__body h1 {
    font-size: 6rem;
  }
  .c-noscript__body h1 img {
    width: 90px;
  }
}
@media screen {
  .c-noscript__body p {
    font-family: "Bitter", serif;
    font-size: 1.25rem; /* 20/16 */
    max-width: 720px;
    margin: 40px auto;
  }
}
@media screen {
  .c-faq h2 {
    margin-top: 54px;
  }
}
@media screen and (max-width: 600px) {
  .c-faq h2 {
    font-size: 1.3125rem;
  }
}
@media screen {
  .c-faq .c-faq__item {
    margin-top: 48px;
    padding-left: 50px;
  }
  .c-faq .c-faq__item h3 {
    font-size: 1.3125rem; /* 21/16 */
    position: relative;
  }
}
@media screen and (max-width: 600px) {
  .c-faq .c-faq__item h3 {
    font-size: 1.1875rem; /* 19/16 */
  }
}
@media screen {
  .c-faq .c-faq__item h3:before {
    content: "";
    position: absolute;
    width: 27px;
    height: 27px;
    background: #73859F;
    background-image: url(/assets/svg-icons/question-30b4ec22034594c5246dad2174ba2e3efef37b7ca31c34a6243e25c59fe3392d.png);
    background-size: cover;
    left: -50px;
    border-radius: 0.5625rem;
  }
}
@media screen {
  .c-faq .c-faq__item p {
    position: relative;
    color: #6E7687;
    font-size: 1rem;
    margin-top: 27px;
  }
}
@media screen and (max-width: 600px) {
  .c-faq .c-faq__item p {
    font-size: 0.9375rem;
  }
}
@media screen {
  .c-faq .c-faq__item p:first-child:before {
    content: "";
    position: absolute;
    width: 27px;
    height: 27px;
    background-image: url(/assets/svg-icons/loopy-arrow-ed620ece85c7319eebf154f3c1f702066b68d9d73799cce24e35b44adc0ecafd.png);
    background-size: cover;
    top: -4px;
    left: -50px;
  }
}
@media screen {
  .c-faq .c-faq__item p a {
    color: #158443;
  }
}
@media screen {
  .c-faq .c-faq__item ul, .c-faq .c-faq__item ol {
    padding-left: 20px;
    margin-top: 27px;
    color: #6E7687;
  }
  .c-faq .c-faq__item ul li, .c-faq .c-faq__item ol li {
    margin-bottom: 6px;
  }
  .c-faq .c-faq__item ul li a, .c-faq .c-faq__item ol li a {
    color: #158443;
  }
}
@media screen {
  .c-faq .c-faq__item ul li {
    list-style: square;
  }
}
@media screen {
  .c-faq .c-faq__item span.o-badge {
    display: inline-block;
    margin-top: 18px;
  }
}
@media screen {
  .c-review-module--invert .l-border-bottom-grey-mako {
    border-bottom: 1px solid #DBDDE0;
  }
  .c-review-module--invert .l-color-grey-chateau {
    color: #6E7687;
  }
  .c-review-module--invert .o-textarea--dark {
    background: #ffffff;
    border: 2px solid #D6E0EF;
    color: #333333;
    width: 100%;
  }
  .c-review-module--invert .o-textarea--dark:focus {
    background: rgba(29, 131, 209, 0.05);
    border: 2px solid #73859F;
  }
  .c-review-module--invert .c-review-module__main-header-controls span {
    font-size: 0.9375rem; /* 15/16 */
    color: #6E7687;
    margin-left: 9px;
  }
  .c-review-module--invert .c-review-module__main-header-controls a {
    color: #158443;
    text-decoration: underline;
  }
  .c-review-module--invert .c-review-module__main-header-stars .l-button__svg-empty-star {
    fill: #CACED2 !important;
  }
  .c-review-module--invert .c-user-review {
    background-color: #ffffff;
  }
  .c-review-module--invert .c-user-review__date {
    color: #6E7687 !important;
  }
  .c-review-module--invert .c-user-review__bottom .l-button__svg-empty-star {
    opacity: 1 !important;
  }
  .c-review-module--invert .c-review-module__illustration {
    background-image: url(/assets/artwork/illustration-ratings-ecbd0a20f8ea5b868641eee840861c289d0591e9419c4df98c00866ccbadbb5e.svg);
    background-size: cover;
  }
  .c-review-module--invert .c-review-module__answers > input[type=checkbox]:hover + label {
    background: #ebf1f7;
  }
  .c-review-module--invert .c-review-module__answers > input[type=checkbox]:checked + label {
    background: #158443;
    border-color: #158443;
    color: #ffffff;
  }
  .c-review-module--invert .c-review-module__answers label {
    background: #F2F6FA;
    border: 2px solid #D6E0EF;
    color: #333333;
  }
}
@media screen {
  .c-review-module__main-header {
    margin-top: 12px;
    margin-bottom: 24px;
  }
  .c-review-module__main-header > div {
    position: relative;
  }
}
@media screen and (max-width: 600px) {
  .c-review-module__main-header > div {
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .c-review-module__main-header p {
    position: absolute;
    top: 30px;
    right: 0;
  }
}
@media screen {
  .c-review-module__main-header .c-review-module__main-header-stars {
    display: flex;
    position: relative;
    top: -4px;
    margin: 0 5px;
  }
}
@media screen and (max-width: 600px) {
  .c-review-module__main-header .c-review-module__main-header-stars {
    position: absolute;
    top: 6px;
    right: 0;
    margin: 0;
  }
}
@media screen {
  .c-review-module__main-header .c-review-module__main-header-stars .l-button__svg-empty-star {
    opacity: 1 !important;
  }
}
@media screen {
  .c-review-module__main-header-controls {
    position: relative;
    top: 1px;
    margin-top: 15px;
    margin-left: -5px;
  }
  .c-review-module__main-header-controls span {
    font-size: 0.9375rem; /* 15/16 */
    color: #A7ADB4;
    margin-left: 9px;
  }
  .c-review-module__main-header-controls a {
    color: #ffffff;
    text-decoration: underline;
  }
}
@media screen {
  .c-review-module__score {
    line-height: 0.8;
    margin-right: 5px;
    letter-spacing: -2px;
    font-family: "Bitter", serif;
    font-weight: bold;
  }
}
@media screen {
  .c-review-module__illustration {
    width: 250px;
    height: 113px;
    background-image: url(/assets/artwork/illustration-ratings-dark-cc5317ff51fd0e2e97cacd02ae7952386f9716f375f4cbd8cc0add529554e1d9.svg);
    background-size: cover;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .c-review-module__illustration {
    width: 200px;
    height: 91px;
  }
}
@media screen {
  .c-review-module__errors span {
    color: #CF3B2B;
    text-transform: uppercase;
    font-size: 0.6875rem; /* 11/16 */
    letter-spacing: 0.5px;
    font-weight: 700;
  }
}
@media screen {
  .c-review-module__errors--top {
    position: absolute;
    top: -24px;
    left: 0;
  }
}
@media screen {
  .c-review-module__errors--inline {
    position: relative;
    top: 50%;
    left: 20px;
  }
}
@media screen {
  .c-review-module__errors--bottom {
    position: absolute;
    bottom: -74px;
    right: 0;
  }
}
@media screen {
  .c-rating-count {
    position: relative;
  }
}
@media screen and (max-width: 768px) {
  .c-rating-count {
    padding-bottom: 24px;
  }
}
@media screen {
  .c-rating-count .c-rating-count__score {
    margin-right: 8px;
    position: relative;
    top: 1px;
  }
}
@media screen {
  .c-rating-count span {
    color: #333333;
  }
}
@media screen {
  .c-rating-count a {
    color: #333333;
  }
}
@media screen and (max-width: 768px) {
  .c-rating-count a {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
  }
}
@media screen {
  .c-add-rating > div {
    grid-template-columns: 1fr auto 1fr;
  }
  .c-add-rating .c-rate__star {
    display: inline-flex;
    justify-content: center;
    background: #A7ADB4;
    border: 2px solid #A7ADB4;
    margin: 0 3px;
  }
  .c-add-rating .c-rate__star svg {
    fill: #ffffff;
  }
  .c-add-rating .c-rate__star--green {
    background: #158443;
    border: 2px solid #158443;
  }
  .c-add-rating .c-rate__star--green svg {
    fill: #ffffff;
  }
}
@media screen {
  .c-user-review {
    padding: 24px 21px;
    background-color: #3B4048;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
    border-radius: 0.5625rem;
    margin-top: 18px;
  }
  .c-user-review .c-user-review__top {
    display: flex;
    justify-content: space-between;
  }
  .c-user-review .c-user-review__top .c-user-review__username {
    font-size: 1rem;
    margin-top: -2px;
  }
  .c-user-review .c-user-review__top .c-user-review__date {
    font-size: 0.9375rem; /* 15/16 */
    color: #A7ADB4;
    margin-top: -2px;
  }
  .c-user-review .c-user-review__top .c-user-review__profile img {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 6px;
  }
  .c-user-review .c-user-review__top .c-user-review__account {
    display: flex;
  }
  .c-user-review .c-user-review__bottom .c-user-review__title {
    width: 250px;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    letter-spacing: -0.5px;
  }
  .c-user-review .c-user-review__bottom .l-button__svg-empty-star {
    opacity: 0.5;
  }
}
@media screen {
  #current-user-rating .c-user-review {
    margin-bottom: 36px !important;
  }
}
@media screen {
  .c-review-module__questions {
    animation: a-slight-fade-in-up 0.25s;
    position: relative;
  }
}
@media screen {
  .c-review-module__answers {
    position: relative;
  }
  .c-review-module__answers input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .c-review-module__answers > input[type=checkbox]:hover + label {
    background: #363b42;
  }
  .c-review-module__answers > input[type=checkbox]:checked + label {
    background: #158443;
    border-color: #00FF6A;
    color: #ffffff;
  }
  .c-review-module__answers label {
    padding: 7px 12px;
    border-radius: 0.5625rem;
    background: #3B4048;
    border: 2px solid #3B4048;
    font-weight: 600;
    font-size: 0.9375rem; /* 15/16 */
    white-space: nowrap;
    display: inline-flex;
    margin: 0 10px 10px 0;
  }
}
@media screen {
  .c-modal--ratings {
    z-index: 99999999999;
  }
  .c-modal--ratings .c-modal__title {
    color: #333333;
  }
}
@media screen and (max-width: 768px) {
  .c-modal--ratings .c-modal__title {
    font-size: 1.5rem !important; /* 24/16 */
  }
}
@media screen {
  .c-modal--ratings .c-modal-wrapper {
    max-width: 540px;
    padding: 36px 24px 40px 24px;
  }
  .c-modal--ratings .c-modal-wrapper > div {
    width: 100%;
    text-align: center;
  }
  .c-modal--ratings .c-modal-wrapper > div .c-modal__complete-illustration {
    padding-top: 0;
  }
  .c-modal--ratings .c-modal-wrapper > div .c-modal__complete-illustration img {
    max-width: 100%;
    width: 250px;
    margin: 20px;
  }
}
@media screen and (max-width: 768px) {
  .c-modal--ratings .c-modal-wrapper > div .c-modal__complete-illustration img {
    width: 200px;
    height: 91px;
  }
}
@media screen {
  .c-notebook {
    height: 100%;
    width: 590px;
    background: #FAFAFA;
    border: 1px solid #DFE7F0;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
    padding: 21px 24px 24px;
    position: fixed;
    top: 72px;
    right: 0;
    z-index: 9999999;
    border-radius: 0.5625rem 0 0 0;
    overflow-y: scroll;
  }
}
@media screen and (max-width: 992px) {
  .c-notebook {
    width: 100%;
    top: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
@media screen {
  .c-notebook .c-notebook__title-actions {
    position: absolute;
    cursor: pointer;
    top: 24px;
  }
}
@media screen {
  .c-notebook .c-notebook__erase {
    right: 24px;
  }
}
@media screen and (max-width: 992px) {
  .c-notebook .c-notebook__erase {
    right: 60px;
  }
}
@media screen {
  .c-notebook .c-notebook__close {
    width: 16px;
    height: 24px;
    right: 24px;
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .c-notebook .c-notebook__close {
    display: block;
  }
}
@media screen {
  .c-notebook .c-notebook__close svg {
    width: 16px;
    transform: rotate(180deg);
  }
}
@media screen {
  .c-notebook h3 {
    padding-right: 100px;
    line-height: 1.125;
  }
}
@media screen {
  .c-notebook .c-notebook__artwork {
    display: block;
    max-width: 240px;
    margin: 60px auto 9px;
  }
}
@media screen {
  .c-notebook .c-notebook__demo {
    position: relative;
    margin-top: 90px;
  }
}
@media screen {
  .c-notebook .c-notebook__demo:before {
    content: "";
    position: absolute;
    top: -90px;
    left: 0;
    width: 100%;
    height: calc(100% + 90px);
    background: transparent;
    z-index: 99999999;
  }
}
@media screen {
  .c-notebook .c-notebook__demo p {
    font-size: 1rem;
  }
}
@media screen {
  .c-notebook .c-notebook__demo p mark {
    background: #F4C3C3;
    color: #333333;
  }
}
@media screen {
  .c-notebook .c-notebook__demo .o-fragment--tooltip {
    top: -64px;
  }
}
@media screen {
  .c-notebook .c-notebook__entry {
    padding-left: 18px;
    padding-bottom: 15px;
    margin-top: 15px;
    position: relative;
    border-bottom: 1px solid #DBDDE0;
  }
}
@media screen {
  .c-notebook .c-notebook__entry:before {
    content: "";
    width: 3px;
    height: calc(100% - 15px);
    position: absolute;
    left: 0;
    top: 0;
    background: #FFE242;
    border-radius: 100px;
  }
}
@media screen {
  .c-notebook .c-notebook__entry:last-child {
    border-bottom: 0;
  }
}
@media screen {
  .c-notebook .c-notebook__entry a {
    color: #333333;
    text-decoration: none;
  }
}
@media screen {
  .c-notebook .c-notebook__entry h4 {
    font-size: 1.125rem; /* 18/16 */
  }
}
@media screen {
  .c-notebook .c-notebook__entry .c-notebook__actions {
    display: flex;
    align-content: center;
    align-items: baseline;
    justify-content: space-between;
  }
}
@media screen {
  .c-notebook .c-notebook__entry .c-notebook__action {
    font-size: 14px;
    font-weight: 600;
    color: #6E7687;
    text-decoration: underline;
    cursor: pointer;
  }
}
@media screen {
  .c-notebook .c-notebook__entry .c-notebook__action--secondary {
    text-decoration: none;
  }
}
@media screen {
  .c-notebook .c-notebook__entry .c-notebook__entry-text {
    font-size: 0.9375rem; /* 15/16 */
    margin-top: 8px;
  }
}
@media screen {
  .c-notebook .c-notebook__entry .c-notebook__entry-text mark {
    color: #333333;
    background-color: transparent;
  }
}
@media screen {
  .c-notebook .c-notebook__entry .c-notebook__entry-note {
    font-size: 14px;
    font-style: italic;
    margin-top: 9px;
  }
}
@media screen {
  .c-notebook .c-notebook__entry .c-notebook__entry-note .o-textarea {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.875rem; /* 14/16 */
  }
}
@media screen {
  .c-notebook .c-notebook__entry .c-notebook__entry-note span {
    color: #6E7687;
  }
}
@media screen {
  .c-notebook .c-notebook__entry.c-notebook__entry--yellow:before {
    background: #FFE242;
  }
}
@media screen {
  .c-notebook .c-notebook__entry.c-notebook__entry--orange:before {
    background: #FBBC5D;
  }
}
@media screen {
  .c-notebook .c-notebook__entry.c-notebook__entry--red:before {
    background: #E58A8A;
  }
}
@media screen {
  .c-notebook .c-notebook__entry.c-notebook__entry--purple:before {
    background: #A0AEF2;
  }
}
@media screen {
  .c-notebook .c-notebook__entry.c-notebook__entry--blue:before {
    background: #85DDE9;
  }
}
@media screen {
  .c-notebook .c-notebook__entry.c-notebook__entry--green:before {
    background: #90DE9C;
  }
}
@media screen {
  .o-fragment--id {
    display: block;
    position: relative;
    top: -48px;
    visibility: hidden;
  }
}
@media screen {
  article.c-book-chapter div blockquote {
    padding-top: 1px;
  }
}
@media screen {
  .o-fragment {
    position: relative;
  }
}
@media screen {
  .o-fragment mark {
    color: #333333;
    background-color: #FFEA75;
  }
}
@media screen {
  .o-fragment .o-fragment--annotation {
    cursor: pointer;
  }
}
@media screen {
  .o-fragment .o-fragment--annotation-note {
    border-bottom: 3px solid #EBC700;
  }
}
@media screen {
  .o-fragment .o-fragment--tooltip-with-note {
    background: #F5F8FB;
    border: 2px solid #D6E0EF;
    font-size: 0.875rem; /* 14/16 */
    font-weight: 600;
    border-radius: 0.5625rem;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.2);
    padding: 21px;
    position: absolute;
    transform: translateX(-50%);
    color: #ffffff;
    z-index: 99999;
    width: auto;
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: 0 !important;
    user-select: none;
  }
}
@media screen {
  .o-fragment .o-fragment--tooltip-with-note span {
    cursor: pointer;
  }
}
@media screen {
  .o-fragment .o-fragment--tooltip-with-note textarea {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #333333;
    width: 100%;
    min-width: 270px;
    min-height: 100px;
    font-size: 0.9375rem; /* 15/16 */
    resize: none;
  }
}
@media screen {
  .o-fragment .o-fragment--tooltip-with-note textarea:focus {
    box-shadow: none;
    outline: 0;
  }
}
@media screen {
  .o-fragment .o-fragment--tooltip-with-note textarea::placeholder {
    color: #6E7687 !important;
  }
}
@media screen {
  .o-fragment .o-fragment--tooltip-with-note:after {
    display: none;
  }
}
@media screen {
  .o-fragment .o-fragment--tooltip-with-note .o-fragment__actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
}
@media screen {
  .o-fragment .o-fragment--tooltip-with-note .o-fragment__action {
    color: #6E7687;
  }
}
@media screen {
  mark.o-fragment--highlighter-yellow {
    background: #FFEA75;
  }
}
@media screen {
  mark.o-fragment--highlighter-yellow.o-fragment--annotation-note {
    border-bottom: 3px solid #EBC700;
  }
}
@media screen {
  mark.o-fragment--highlighter-orange {
    background: #FBCF8E;
  }
}
@media screen {
  mark.o-fragment--highlighter-orange.o-fragment--annotation-note {
    border-bottom: 3px solid #F99A0C;
  }
}
@media screen {
  mark.o-fragment--highlighter-red {
    background: #F4C3C3;
  }
}
@media screen {
  mark.o-fragment--highlighter-red.o-fragment--annotation-note {
    border-bottom: 3px solid #E58A8A;
  }
}
@media screen {
  mark.o-fragment--highlighter-purple {
    background: #CECEF8;
  }
}
@media screen {
  mark.o-fragment--highlighter-purple.o-fragment--annotation-note {
    border-bottom: 3px solid #A0AEF2;
  }
}
@media screen {
  mark.o-fragment--highlighter-blue {
    background: #B4E3E9;
  }
}
@media screen {
  mark.o-fragment--highlighter-blue.o-fragment--annotation-note {
    border-bottom: 3px solid #5BD1E1;
  }
}
@media screen {
  mark.o-fragment--highlighter-green {
    background: #C3F0CA;
  }
}
@media screen {
  mark.o-fragment--highlighter-green.o-fragment--annotation-note {
    border-bottom: 3px solid #90DE9C;
  }
}
@media screen {
  .c-reading-experience-selector {
    width: 320px;
    background: #FAFAFA;
    border: 1px solid #DFE7F0;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
    padding: 21px 24px 24px;
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: 9999999;
    border-radius: 0.5625rem;
  }
}
@media screen and (max-width: 1023px) {
  .c-reading-experience-selector {
    position: fixed;
    top: auto;
    right: auto;
    left: 2.5%;
    bottom: 94px;
    border-radius: 0;
    width: 95%;
    padding-left: 240px;
    padding-right: 240px;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    box-shadow: none;
    border-bottom: 0;
  }
  .c-reading-experience-selector::-webkit-scrollbar {
    width: 0 !important;
  }
}
@media screen and (max-width: 767px) {
  .c-reading-experience-selector {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen {
  .c-reading-experience-selector .o-alert__close {
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
    width: 18px;
    height: 18px;
  }
}
@media screen {
  .c-reading-experience-selector .o-alert__close svg {
    position: absolute;
    width: 18px !important;
    height: 18px !important;
    margin: -9px 0 0 -9px;
  }
}
@media screen and (max-width: 992px) {
  .c-reading-experience-selector .o-alert__close {
    display: block;
  }
}
@media screen {
  .c-reading-experience-selector h4 {
    font-weight: 600;
    font-size: 0.9375rem; /* 15/16 */
    letter-spacing: 0;
  }
}
@media screen {
  .c-reading-experience-selector > div {
    margin-top: 20px;
  }
}
@media screen {
  .c-reading-experience-selector > div:first-child {
    margin-top: 0;
  }
}
@media screen {
  .c-reading-experience-selector .l-width-14 {
    width: 14px !important;
  }
}
@media screen {
  .c-reading-experience-selector .l-width-21 {
    width: 21px !important;
  }
}
@media screen {
  .c-reading-experience-selector .o-dropdown-menu__icon--night-mode {
    display: none;
  }
}
@media screen {
  .c-reading-experience-selector .o-dropdown-menu__icon--night-mode + a {
    font-weight: 600;
    font-size: 0.9375rem; /* 15/16 */
    letter-spacing: 0;
  }
}
@media screen {
  .c-reading-experience-selector .o-dropdown-menu__icon--night-mode + a label {
    right: 24px;
  }
}
@media screen and (max-width: 992px) {
  .c-reading-experience-selector .o-dropdown-menu__icon--night-mode + a label {
    right: auto;
    margin-left: 9px;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__checkbox-wrapper > span:first-child {
    margin-left: 0 !important;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__range-wrapper {
    display: flex;
    align-content: center;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__range-wrapper > span {
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__range {
    -webkit-appearance: none;
    width: 100%;
    margin: 0 9px;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__radio {
    -webkit-appearance: radio;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__radio:checked + span {
    position: absolute;
    background: none;
    border: 2px solid #158443;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 0.5625rem;
    left: -2px;
    top: -2px;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__checkbox {
    width: 27px;
    height: 27px;
    border: 2px solid #73859F;
    border-radius: 0.5625rem;
    display: flex;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__checkbox input {
    opacity: 0;
    cursor: pointer;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__checkbox--large {
    height: 50px;
    border: 2px solid #DBDDE0;
    border-radius: 0.5625rem;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    z-index: 0;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__checkbox--large input {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
}
@media screen {
  .c-reading-experience-selector .c-reading-experience-selector__checkbox--large label {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -35px;
    margin-top: -15px;
    color: #333333;
    white-space: nowrap;
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 0.9375rem; /* 15/16 */
    font-weight: 600;
    z-index: -1;
  }
}
@media screen {
  .c-reading-experience-selector__range::-webkit-slider-runnable-track {
    background: rgba(167, 173, 180, 0.5);
    height: 2px;
  }
}
@media screen {
  .c-reading-experience-selector__range:focus::-webkit-slider-runnable-track {
    background: rgba(167, 173, 180, 0.5);
    height: 2px;
    box-shadow: none;
    outline: none;
    border: none;
  }
}
@media screen {
  .c-reading-experience-selector__range::-moz-range-track {
    background: rgba(167, 173, 180, 0.5);
    height: 2px;
  }
}
@media screen {
  .c-reading-experience-selector__range::-ms-track {
    background: rgba(167, 173, 180, 0.5);
    height: 2px;
  }
}
@media screen {
  .c-reading-experience-selector__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    background: #ffffff;
    border: 2px solid #959DA5;
    cursor: pointer;
    border-radius: 100%;
    margin-top: -11px;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
}
@media screen {
  .c-reading-experience-selector__range::-moz-range-thumb {
    height: 24px;
    width: 24px;
    background: #ffffff;
    cursor: pointer;
    border: 2px solid #959DA5;
    border-radius: 100%;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
}
@media screen {
  .c-reading-experience-selector__range::-ms-thumb {
    height: 24px;
    width: 24px;
    background: #ffffff;
    cursor: pointer;
    border: 2px solid #959DA5;
    border-radius: 100%;
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
}
@media screen {
  .c-bookshelf-book a {
    text-decoration: none;
    color: #333333;
  }
  .c-bookshelf-book figure img {
    max-width: 198px;
    width: 100%;
    border-radius: 0.9375rem; /* 15/16 */
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
  }
  .c-bookshelf-book .c-bookshelf-book__title {
    font-size: 1.5rem; /* 24/16 */
    line-height: 1.125;
    margin-top: 18px;
  }
}
@media screen and (max-width: 768px) {
  .c-bookshelf-book .c-bookshelf-book__title {
    font-size: 1.3125rem; /* 21/16 */
  }
}
@media screen {
  .c-bookshelf-book .c-bookshelf-book__price {
    display: block;
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1.0625rem; /* 17/16 */
    line-height: 1.125;
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  .c-bookshelf-book .c-bookshelf-book__price {
    font-size: 1rem;
  }
}
@media screen {
  .c-bookshelf-book .c-bookshelf-book__description {
    font-size: 0.9375em; /* 15/16 */
    margin-top: 10px;
  }
}
@media screen {
  .c-drawer__overlay {
    background-color: #333333;
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
  }
}
@media screen {
  .c-drawer {
    position: fixed;
    top: 0;
    width: 320px;
    height: 100%;
    background-color: #ffffff;
    padding: 102px 24px 0;
    z-index: 10003;
  }
  .c-drawer .o-button-close {
    position: absolute;
    top: 90px;
    right: 18px;
  }
  .c-drawer .o-button-close svg {
    width: 12px;
    height: 12px;
    transform: rotate(0);
  }
}
@media screen {
  .c-drawer--right {
    right: 0;
  }
}
@media screen and (max-width: 600px) {
  .u-hide-mobile {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .u-hide-mobile--force {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .u-hide-mobile-large {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .u-hide-mobile-large--force {
    display: none !important;
  }
}
@media screen and (max-width: 992px) {
  .u-hide-tablet {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .u-hide-tablet--force {
    display: none !important;
  }
}
@media screen and (max-width: 1080px) {
  .u-hide-1080 {
    display: none;
  }
}
@media screen {
  .u-show-mobile {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .u-show-mobile {
    display: block;
  }
}
@media screen {
  .u-show-mobile-large {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .u-show-mobile-large {
    display: block;
  }
}
@media screen {
  .u-show-tablet-flex--inline {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  .u-show-tablet-flex--inline {
    display: inline-flex;
  }
}
@media screen {
  .u-show-tablet-flex--inline-force {
    display: none !important;
  }
}
@media screen and (max-width: 992px) {
  .u-show-tablet-flex--inline-force {
    display: inline-flex !important;
  }
}
@media screen {
  .u-show-1080-flex--inline {
    display: none;
  }
}
@media screen and (max-width: 1080px) {
  .u-show-1080-flex--inline {
    display: inline-flex;
  }
}
@media screen {
  .u-show-mobile--inline {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .u-show-mobile--inline {
    display: inline;
  }
}
@media screen {
  .u-show-mobile-flex {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .u-show-mobile-flex {
    display: flex;
  }
}
@media screen {
  .u-show-mobile-large-flex {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .u-show-mobile-large-flex {
    display: flex;
  }
}
@media screen {
  .u-show-tablet-flex {
    display: none !important;
  }
}
@media screen and (max-width: 992px) {
  .u-show-tablet-flex {
    display: flex !important;
  }
}
@media screen {
  .u-toggle-dropdown:hover .o-dropdown-menu, .u-toggle-dropdown:active .o-dropdown-menu, .u-toggle-dropdown:focus .o-dropdown-menu {
    display: block;
  }
}
@media screen {
  .u-show--flex {
    display: flex;
  }
}
@media screen {
  .u-show {
    display: block !important;
  }
}
@media screen {
  .u-hide {
    display: none;
  }
}
@media screen {
  button:disabled .u-hide-disabled {
    display: none;
  }
}
@media screen {
  button:enabled .u-show-disabled {
    display: none;
  }
}
@media screen {
  .u-invisible {
    visibility: hidden;
  }
}
@media screen {
  .l-markdown-description p {
    margin-top: 8px;
  }
  .l-markdown-description ul {
    margin-top: 8px;
    margin-left: 15px;
  }
  .l-markdown-description li {
    list-style-type: disc;
  }
}
@media screen {
  .c-banner-draper-sticky .o-alert__close {
    width: 20px;
  }
}
@media screen and (max-width: 900px) {
  .l-community-care-link {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .l-community-care-link {
    display: block;
  }
}
@media screen {
  .l-text-size-60pc {
    font-size: 60%;
  }
}
@media screen {
  .l-text-size-80pc {
    font-size: 80%;
  }
}
@media screen {
  .l-text-size-100pc {
    font-size: 100%;
  }
}
@media screen {
  .l-text-size-120pc {
    font-size: 120%;
  }
}
@media screen {
  .l-text-size-140pc {
    font-size: 140%;
  }
}
@media screen {
  .l-prefers-color-scheme--dark .c-tutorial-item .c-tutorial-item__completable {
    color: #ffffff;
  }
}
@media screen {
  .c-tutorial-item .c-tutorial-item__completable {
    display: inline;
  }
  .c-tutorial-item .c-tutorial-item__clearable {
    display: none;
  }
}
@media screen {
  .c-tutorial-item--complete .c-tutorial-item__completable {
    display: none !important;
  }
  .c-tutorial-item--complete .c-tutorial-item__clearable {
    display: inline !important;
  }
}
@media screen {
  .turbo-progress-bar {
    z-index: 1000000;
    height: 4px;
    background-color: #158443;
  }
}
@media screen {
  .l-box-shadow {
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
  }
}
@media screen {
  .l-padding-right-12 {
    padding-right: 12px;
  }
}
@media screen {
  .l-padding-right-20 {
    padding-right: 20px;
  }
}
@media screen {
  .l-margin-right-20 {
    margin-right: 20px;
  }
}
@media screen {
  .l-line-height-135 {
    line-height: 1.35;
  }
}
@media screen {
  .l-flex-direction-column {
    display: flex;
    flex-direction: column;
  }
}
@media screen {
  .l-display {
    display: inline-block;
    width: 120px;
  }
}
@media screen {
  .l-display-large {
    display: inline-block;
    width: 150px;
  }
}
@media screen {
  .l-display-extra-large {
    display: inline-block;
    width: 200px;
  }
}
@media screen {
  .o-button-color {
    background-color: #e9ebec;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.875rem;
  }
}
@media screen {
  .l-link:link {
    text-decoration: none;
  }
}
@media screen {
  .l-tutorial--component-p p {
    font-size: 0.875rem;
  }
}
@media screen {
  .l-padding-top-20 {
    padding-top: 20px;
  }
}
@media screen {
  .l-margin-left-40 {
    margin-left: 40px;
  }
}
@media screen {
  .l-margin-left-99 {
    margin-left: 99px;
  }
}
@media screen {
  .c-tutorial--all-padding .c-tutorial-item > a, .c-tutorial--all-padding .c-tutorial-item > div {
    padding: 21px;
    border-radius: 0.5625rem;
  }
}
@media screen {
  .l-community-image {
    display: block;
    height: 250px;
  }
}
@media screen {
  .l-community-image--right {
    background-image: url(/assets/photos/community-connect-right-fe58d024caa00d2b9c02d522c8146885f5fa75cf97062c09ebc10fbe3efd972a.png);
    background-repeat: no-repeat;
  }
}
@media screen {
  .bg-transcript--highlighted {
    background: #435E3E;
  }
}
@media screen {
  .bg-transcript--highlighted-typography {
    font-style: normal;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 22px;
    color: #DBDDE0;
  }
}
@media screen {
  .bg-transcript--highlighted--bubble {
    background: #158443;
  }
}
@media screen {
  .c-written-tutorial__content > figure svg {
    max-width: 688px;
    width: 100%;
    height: auto;
    margin-top: 20px;
  }
  .c-written-tutorial__content figure svg {
    max-width: 688px;
    width: 100%;
    height: auto;
    margin-top: 20px;
  }
}
@media screen {
  #Arrow [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=Arrow_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowGrey [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowGrey_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowGreen [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowGreen_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowTurquoise [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowTurquoise_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowLightBlue [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowLightBlue_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowDarkBlue [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowDarkBlue_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowPurple [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowPurple_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowPink [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowPink_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowRed [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowRed_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  #ArrowYellow [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  [id^=ArrowYellow_] [id^=Tip] {
    fill: #ffffff;
  }
}
@media screen {
  .prefers-color-scheme--dark .c-written-tutorial__content {
    /* ==========================================================================
    X. Labels
    ========================================================================== */
    /* ==========================================================================
    X. Shapes
    ========================================================================== */
    /* ==========================================================================
    X. Shapes w/ Inner
    ========================================================================== */
    /* ==========================================================================
    X. Shapes w/ Patterns
    ========================================================================== */
    /* ==========================================================================
    X. Arrows
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (Grey)
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (Green)
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (Turquoise)
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (LightBlue)
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (DarkBlue)
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (Purple)
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (Pink)
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (Red)
    ========================================================================== */
    /* ==========================================================================
    X. Arrow (Yellow)
    ========================================================================== */
    /* ==========================================================================
    X. Lines
    ========================================================================== */
    /* ==========================================================================
    X. Shadows
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Grey)
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Green)
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Turquoise)
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Light Blue)
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Dark Blue)
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Purple)
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Pink)
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Red)
    ========================================================================== */
    /* ==========================================================================
    X. Color Conversion (Yellow)
    ========================================================================== */
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text {
    fill: white;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextGrey {
    fill: #D8DBE1 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextGrey_] {
    fill: #D8DBE1 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextGreen {
    fill: #D6E18D !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextGreen_] {
    fill: #D6E18D !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextTurquoise {
    fill: #97CFC1 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextTurquoise_] {
    fill: #97CFC1 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextLightBlue {
    fill: #A6D9E2 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextLightBlue_] {
    fill: #A6D9E2 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextDarkBlue {
    fill: #B9C3E4 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextDarkBlue_] {
    fill: #B9C3E4 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextPurple {
    fill: #D3BDDB !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextPurple_] {
    fill: #D3BDDB !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextPink {
    fill: #F2BCD7 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextPink_] {
    fill: #F2BCD7 !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextRed {
    fill: #F7B39C !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextRed_] {
    fill: #F7B39C !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text#TextYellow {
    fill: #FFD46F !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content text[id^=TextYellow_] {
    fill: #FFD46F !important;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #Shape rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #Shape rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=Shape_] rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=Shape_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInner > rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInner > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInner_] > rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInner_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerFore > rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerFore > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerFore_] > rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerFore_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerClear > rect {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerClear_] > rect {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerPattern #ShapeInnerBack > rect:nth-of-type(1) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerPattern #ShapeInnerFore > rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerPattern #ShapeInnerFore > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerPattern_] [id^=ShapeInnerBack_] > rect:nth-of-type(1) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerPattern_] [id^=ShapeInnerFore_] > rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerPattern_] [id^=ShapeInnerFore_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapePattern path {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePattern_] path {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapePattern rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePattern_] rect:nth-of-type(1) {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapePattern rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePattern_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerPattern #ShapeBackground {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerPattern_] [id^=ShapeBackground_] {
    fill: #14161E;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #Arrow circle {
    fill: #14161E;
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=Arrow_] circle {
    fill: #14161E;
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #Arrow [id^=Line] {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=Arrow_] [id^=Line] {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #Arrow [id^=Tip] {
    fill: #14161E;
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=Arrow_] [id^=Tip] {
    fill: #14161E;
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowGrey circle {
    fill: #14161E;
    stroke: #D8DBE1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGrey_] circle {
    fill: #14161E;
    stroke: #D8DBE1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowGrey [id^=Line] {
    stroke: #D8DBE1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGrey_] [id^=Line] {
    stroke: #D8DBE1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowGrey [id^=Tip] {
    fill: #14161E;
    stroke: #D8DBE1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGrey_] [id^=Tip] {
    fill: #14161E;
    stroke: #D8DBE1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowGreen circle {
    fill: #14161E;
    stroke: #D6E18D;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGreen_] circle {
    fill: #14161E;
    stroke: #D6E18D;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowGreen [id^=Line] {
    stroke: #D6E18D;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGreen_] [id^=Line] {
    stroke: #D6E18D;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowGreen [id^=Tip] {
    fill: #14161E;
    stroke: #D6E18D;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowGreen_] [id^=Tip] {
    fill: #14161E;
    stroke: #D6E18D;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowTurquoise circle {
    fill: #14161E;
    stroke: #97CFC1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowTurquoise_] circle {
    fill: #14161E;
    stroke: #97CFC1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowTurquoise [id^=Line] {
    stroke: #97CFC1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowTurquoise_] [id^=Line] {
    stroke: #97CFC1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowTurquoise [id^=Tip] {
    fill: #14161E;
    stroke: #97CFC1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowTurquoise_] [id^=Tip] {
    fill: #14161E;
    stroke: #97CFC1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowLightBlue circle {
    fill: #14161E;
    stroke: #A6D9E2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowLightBlue_] circle {
    fill: #14161E;
    stroke: #A6D9E2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowLightBlue [id^=Line] {
    stroke: #A6D9E2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowLightBlue_] [id^=Line] {
    stroke: #A6D9E2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowLightBlue [id^=Tip] {
    fill: #14161E;
    stroke: #A6D9E2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowLightBlue_] [id^=Tip] {
    fill: #14161E;
    stroke: #A6D9E2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowDarkBlue circle {
    fill: #14161E;
    stroke: #B9C3E4;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowDarkBlue_] circle {
    fill: #14161E;
    stroke: #B9C3E4;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowDarkBlue [id^=Line] {
    stroke: #B9C3E4;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowDarkBlue_] [id^=Line] {
    stroke: #B9C3E4;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowDarkBlue [id^=Tip] {
    fill: #14161E;
    stroke: #B9C3E4;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowDarkBlue_] [id^=Tip] {
    fill: #14161E;
    stroke: #B9C3E4;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowPurple circle {
    fill: #14161E;
    stroke: #D3BDDB;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPurple_] circle {
    fill: #14161E;
    stroke: #D3BDDB;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowPurple [id^=Line] {
    stroke: #D3BDDB;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPurple_] [id^=Line] {
    stroke: #D3BDDB;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowPurple [id^=Tip] {
    fill: #14161E;
    stroke: #D3BDDB;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPurple_] [id^=Tip] {
    fill: #14161E;
    stroke: #D3BDDB;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowPink circle {
    fill: #14161E;
    stroke: #F2BCD7;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPink_] circle {
    fill: #14161E;
    stroke: #F2BCD7;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowPink [id^=Line] {
    stroke: #F2BCD7;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPink_] [id^=Line] {
    stroke: #F2BCD7;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowPink [id^=Tip] {
    fill: #14161E;
    stroke: #F2BCD7;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowPink_] [id^=Tip] {
    fill: #14161E;
    stroke: #F2BCD7;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowRed circle {
    fill: #14161E;
    stroke: #F7B39C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowRed_] circle {
    fill: #14161E;
    stroke: #F7B39C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowRed [id^=Line] {
    stroke: #F7B39C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowRed_] [id^=Line] {
    stroke: #F7B39C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowRed [id^=Tip] {
    fill: #14161E;
    stroke: #F7B39C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowRed_] [id^=Tip] {
    fill: #14161E;
    stroke: #F7B39C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowYellow circle {
    fill: #14161E;
    stroke: #FFD46F;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowYellow_] circle {
    fill: #14161E;
    stroke: #FFD46F;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowYellow [id^=Line] {
    stroke: #FFD46F;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowYellow_] [id^=Line] {
    stroke: #FFD46F;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ArrowYellow [id^=Tip] {
    fill: #14161E;
    stroke: #FFD46F;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ArrowYellow_] [id^=Tip] {
    fill: #14161E;
    stroke: #FFD46F;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLine {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLine_] {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineGrey {
    stroke: #D8DBE1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineGrey_] {
    stroke: #D8DBE1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineGreen {
    stroke: #D6E18D;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineGreen_] {
    stroke: #D6E18D;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineTurquoise {
    stroke: #97CFC1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineTurquoise_] {
    stroke: #97CFC1;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineLightBlue {
    stroke: #A6D9E2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineLightBlue_] {
    stroke: #A6D9E2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineDarkBlue {
    stroke: #B9C3E4;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineDarkBlue_] {
    stroke: #B9C3E4;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLinePurple {
    stroke: #D3BDDB;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLinePurple_] {
    stroke: #D3BDDB;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLinePink {
    stroke: #F2BCD7;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLinePink_] {
    stroke: #F2BCD7;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineRed {
    stroke: #F7B39C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineRed_] {
    stroke: #F7B39C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLineYellow {
    stroke: #FFD46F;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLineYellow_] {
    stroke: #FFD46F;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeShadow rect {
    fill: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeShadow_] rect {
    fill: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeGrey rect:nth-of-type(1) {
    fill: #717680;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeGrey rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeGrey_] rect:nth-of-type(1) {
    fill: #717680;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeGrey_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeGrey > rect:nth-of-type(1) {
    fill: #717680;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeGrey > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeGrey_] > rect:nth-of-type(1) {
    fill: #717680;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeGrey_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeGreen rect:nth-of-type(1) {
    fill: #598131;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeGreen rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeGreen_] rect:nth-of-type(1) {
    fill: #598131;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeGreen_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeGreen > rect:nth-of-type(1) {
    fill: #598131;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeGreen > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeGreen_] > rect:nth-of-type(1) {
    fill: #598131;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeGreen_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeTurquoise rect:nth-of-type(1) {
    fill: #417D86;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeTurquoise rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeTurquoise_] rect:nth-of-type(1) {
    fill: #417D86;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeTurquoise_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeTurquoise > rect:nth-of-type(1) {
    fill: #417D86;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeTurquoise > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeTurquoise_] > rect:nth-of-type(1) {
    fill: #417D86;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeTurquoise_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLightBlue rect:nth-of-type(1) {
    fill: #26809C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeLightBlue rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLightBlue_] rect:nth-of-type(1) {
    fill: #26809C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeLightBlue_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeLightBlue > rect:nth-of-type(1) {
    fill: #26809C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeLightBlue > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeLightBlue_] > rect:nth-of-type(1) {
    fill: #26809C;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeLightBlue_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeDarkBlue rect:nth-of-type(1) {
    fill: #0074E0;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeDarkBlue rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeDarkBlue_] rect:nth-of-type(1) {
    fill: #0074E0;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeDarkBlue_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeDarkBlue > rect:nth-of-type(1) {
    fill: #0074E0;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeDarkBlue > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeDarkBlue_] > rect:nth-of-type(1) {
    fill: #0074E0;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeDarkBlue_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapePurple rect:nth-of-type(1) {
    fill: #9A53B2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapePurple rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePurple_] rect:nth-of-type(1) {
    fill: #9A53B2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePurple_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForePurple > rect:nth-of-type(1) {
    fill: #9A53B2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForePurple > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForePurple_] > rect:nth-of-type(1) {
    fill: #9A53B2;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForePurple_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapePink rect:nth-of-type(1) {
    fill: #C34693;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapePink rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePink_] rect:nth-of-type(1) {
    fill: #C34693;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapePink_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForePink > rect:nth-of-type(1) {
    fill: #C34693;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForePink > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForePink_] > rect:nth-of-type(1) {
    fill: #C34693;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForePink_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeRed rect:nth-of-type(1) {
    fill: #C23100;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeRed rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeRed_] rect:nth-of-type(1) {
    fill: #C23100;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeRed_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeRed > rect:nth-of-type(1) {
    fill: #C23100;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeRed > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeRed_] > rect:nth-of-type(1) {
    fill: #C23100;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeRed_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeYellow rect:nth-of-type(1) {
    fill: #9E6B05;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeYellow rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeYellow_] rect:nth-of-type(1) {
    fill: #9E6B05;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeYellow_] rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeYellow > rect:nth-of-type(1) {
    fill: #9E6B05;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content #ShapeInnerForeYellow > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeYellow_] > rect:nth-of-type(1) {
    fill: #9E6B05;
  }
  .prefers-color-scheme--dark .c-written-tutorial__content [id^=ShapeInnerForeYellow_] > rect:nth-of-type(2) {
    stroke: #ffffff;
  }
}
@media screen {
  .hljs-comment,
  .hljs-quote {
    color: #999999;
  }
}
@media screen {
  .hljs-variable,
  .hljs-template-variable,
  .hljs-attribute,
  .hljs-tag,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-regexp,
  .hljs-link,
  .hljs-deletion {
    color: #F64E1A;
  }
}
@media screen {
  .hljs-number,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-literal,
  .hljs-type,
  .hljs-params {
    color: #F08D49;
  }
}
@media screen {
  .hljs-class .hljs-title {
    color: #F8C555;
  }
}
@media screen {
  .hljs-string,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-addition {
    color: #7EC699;
  }
}
@media screen {
  .hljs-meta {
    color: #18B5AB;
  }
}
@media screen {
  .hljs-function,
  .hljs-section,
  .hljs-title {
    color: #70A2FF;
  }
}
@media screen {
  .hljs-keyword,
  .hljs-selector-tag {
    color: #CC99CD;
  }
}
@media screen {
  .hljs {
    display: block;
    padding: 0.5em;
  }
}
@media screen {
  .hljs-emphasis {
    font-style: italic;
  }
}
@media screen {
  .hljs-strong {
    font-weight: bold;
  }
}
@media screen {
  .light-code .hljs-comment,
  .light-code .hljs-quote {
    color: #918791;
  }
}
@media screen {
  .light-code .hljs-variable,
  .light-code .hljs-template-variable,
  .light-code .hljs-attribute,
  .light-code .hljs-tag,
  .light-code .hljs-name,
  .light-code .hljs-selector-id,
  .light-code .hljs-selector-class,
  .light-code .hljs-regexp,
  .light-code .hljs-link,
  .light-code .hljs-deletion {
    color: #E34A4C;
  }
}
@media screen {
  .light-code .hljs-number,
  .light-code .hljs-built_in,
  .light-code .hljs-builtin-name,
  .light-code .hljs-literal,
  .light-code .hljs-type,
  .light-code .hljs-params {
    color: #FF5A00;
  }
}
@media screen {
  .light-code .hljs-class .hljs-title {
    color: #966B19;
  }
}
@media screen {
  .light-code .hljs-string,
  .light-code .hljs-symbol,
  .light-code .hljs-bullet,
  .light-code .hljs-addition {
    color: #157857;
  }
}
@media screen {
  .light-code .hljs-meta {
    color: #1D7EAF;
  }
}
@media screen {
  .light-code .hljs-function,
  .light-code .hljs-section,
  .light-code .hljs-title {
    color: #2E5FFF;
  }
}
@media screen {
  .light-code .hljs-keyword,
  .light-code .hljs-selector-tag {
    color: #6B2372;
  }
}
@media screen {
  .light-code .hljs {
    display: block;
    color: #14161E;
  }
}
@media screen {
  .light-code .hljs-emphasis {
    font-style: italic;
  }
}
@media screen {
  .light-code .hljs-strong {
    font-weight: bold;
  }
}
@media print {
  /**
   * This file contains all application-wide Sass variables.
   *
   * 1. Fonts
   *
   * 2a. Colors
   *
   * 2b. Highlighter Colors
   *
   * 3. Elements
   */
  /* ==========================================================================
     1. Fonts
     ========================================================================== */
  /**
   * This file contains the font-face definitions for the fonts used across the site
   *
   * It was generated using http://google-webfonts-helper.herokuapp.com/fonts
   *
   * Remember to include latin-ext, primarily for names.
   *
   * 1. Bitter
   * 2. IBM Plex Sans
   * 3. IBM Plex Serif
   */
  /* NOTE
   *
   * Creating these fonts (Bitter) was somewhat challenging, because they were updated in
   * Google Fonts with different spacing and weight. It was then very hard to find the
   * original font with the appropriate character set.
   * This directory contains the OTF files that we need.
   * You can use https://everythingfonts.com/subsetter to extract the appropriate subset
   * (Latin Extended) and then https://kombu.kanejaku.org to create the WOFF and WOFF2 versions
   * Current settings on the subset generator:
   *
   * - Basic Latin
   * - Latin-1 Supplement
   * - Advanced Punctuation
   * - Uppercase
   * - Lowercase
   * - Numerals
   * - Basic Punctuation
   * - Currency Symbols
   * - Latin Extended-A
   * - Latin Extended-B
   */
  /* ==========================================================================
     1. Bitter
     ========================================================================== */
  /* bitter-regular - latin-ext_latin */
  @font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/bitter-1.300-latin_ext-regular-ea79c0f752f7656ce3694dca8312fcb969f83cbe92ca5298c5920ccffb126c5d.woff2) format("woff2"), url(/assets/bitter-1.300-latin_ext-regular-eecfd6c3af651231104ba7ae58079c215e1d4c00b80b2ff0e95ae0cbec63452c.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* bitter-italic - latin-ext_latin */
  @font-face {
    font-family: "Bitter";
    font-style: italic;
    font-weight: 400;
    src: url(/assets/bitter-1.002-latin_ext-italic-f4a1b872a93d98cd9f7865f20340e22e936f3634fb142e2372b4598c98def35a.woff2) format("woff2"), url(/assets/bitter-1.002-latin_ext-italic-a6485dae55bfcf03d80c0b42c15a8555767d700b3be2db1a24bcbff003d2c606.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* bitter-700 - latin-ext_latin */
  @font-face {
    font-family: "Bitter";
    font-style: normal;
    font-weight: 700;
    src: url(/assets/bitter-2.110-latin_ext-700-041b7c53b2f3ed8e2378eaef2841cfad596a7cf6af87bd91f96c9c3b26eec206.woff2) format("woff2"), url(/assets/bitter-2.110-latin_ext-700-57857445d4419a791376b73c9bdb14606d59d2aa09a947120d1b6a1e58965e42.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ==========================================================================
     2. IBM Plex Sans
     ========================================================================== */
  /* ibm-plex-sans-regular - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-regular-4126890a77928150a6f3be017f23c93df16f56e6940a72f231823ba29d2ee998.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-regular-3213dca28efc701a797f1a261a9377b0c530a9ae3cfb72b187d1194f3bd196d3.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ibm-plex-sans-500 - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-500-04aba1eb9b084332715891b2a764459df24188e66731279bad286bbe1447e5e8.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-500-2827cf78c931acdac08d21fb21e3c1531fda43e342b49055f9a312cf336f366c.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ibm-plex-sans-700 - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-700-946ed95688a6677fb113b84ac50ef140b42971e05e4da335a3ead116a7c9886b.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-700-7dbcb16e805e3c4e19b6afc0fbe96a730c7229f129c00e1b239eda58b12f6063.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ==========================================================================
     3. IBM Plex Serif
     ========================================================================== */
  /* ibm-plex-serif-regular - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 400;
    src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-regular-e4f826dc262e20e2114e3637d5cab104d4851dee74421c968a6e29d6be2d8b0b.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-regular-98933eb8c158bbfc91428e8e37644e6f906422073f220313353a4ae476c3bbfd.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ibm-plex-serif-500 - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 500;
    src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-500-dcab0f62c8194ccb39b97113223f99f294112e0d173b18918c31f3494c203456.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-500-ae2864b567a0cfaee3af57d9a8a800a374db2a8aee962b54bbcbf83d1c90fa15.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ibm-plex-serif-700 - latin-ext_latin */
  @font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 700;
    src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-700-ec4d87dbc9136c02618bd6878955a63e40207541c72e5109137d56e28ea65b3f.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-700-cf316807d947f5b6ef4492a9ce6ec4a2f348ec1acf64a481cd6f0fbecb846ad0.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ==========================================================================
     4. IBM Plex Mono
     ========================================================================== */
  /* ibm-plex-mono-medium */
  @font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    src: url(/assets/ibm-plex-mono-v1-500-ba9db195c954509bda2236e0303e51b261b85aef320cb28134ed97155de85914.woff2) format("woff2"), url(/assets/ibm-plex-mono-v1-500-37d084bbe45275af60e08db241605f8a7949a8ebc76074954fd9b02b72aa4857.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ==========================================================================
     2a. Colors
     ========================================================================== */
  /* Blacks */
  /* Greys */
  /* Greens */
  /* Blues */
  /* Reds */
  /* Purples */
  /* Teals */
  /* Yellows */
  /* Brands */
  /* Gradients */
  /* ==========================================================================
     2b. Highlighter Colors
     ========================================================================== */
  /* ==========================================================================
     3. Elements
     ========================================================================== */
  /**
   * Consult bourbon.io for a comprehensive list of available mixins before adding one here
   *
   * 1. Card - Used for nearly every container as a background
   *
   * 2. Breakpoints - Powerful mixin with five presets for common screen sizes
   *
   * 3. Position Absolute - A full width/height pseudo element fill
   *
   * 4. Border Hover
   *
   * 5. Mobile scroll - Make overflow scroll springy on mobile
   *
   */
  /* ==========================================================================
    1. Card
    ========================================================================== */
  /* ==========================================================================
   2. Breakpoints
   ========================================================================== */
  /* ==========================================================================
     3. Pseudo element absolute
     ========================================================================== */
  /* ==========================================================================
    4. Border Hover
    ========================================================================== */
  /* ==========================================================================
  5. Mobile scroll
  ========================================================================== */
  /* ==========================================================================
  6. Hide Scrollbar
  ========================================================================== */
  /**
   * A thin layer on top of normalize.css
   */
  html {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  figure,
  p,
  pre {
    margin: 0;
  }
  a, button {
    transition: all 0.3s ease-out;
  }
  button {
    background: transparent;
    border: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  input:focus, button:focus, li:focus, a:focus, span:focus {
    outline: 0;
  }
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  iframe {
    border: 0;
  }
  ol,
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  ol {
    list-style: decimal;
  }
  ol li {
    margin-top: 10px;
  }
  ol li:first-child {
    margin-top: 0;
  }
  input,
  textarea,
  select {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    -webkit-appearance: none;
  }
  /**
   * Suppress the focus outline on elements that cannot be accessed via keyboard.
   * This prevents an unwanted focus outline from appearing around elements that
   * might still respond to pointer events.
   */
  [tabindex="-1"]:focus {
    outline: none !important;
  }
  /**
   * Standardise SVG rendering
   */
  svg g, svg path {
    fill: inherit;
  }
  svg.icon {
    width: 32px;
    height: 32px;
  }
  /**
   * Sets some base rules for typography
   */
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-display: auto;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.45;
    color: #333333;
    -webkit-backface-visibility: hidden;
    text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4, h5 {
    font-family: "Bitter", serif;
    font-display: auto;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  h1 {
    font-size: 3rem;
    line-height: 1.125;
  }
  /**
   *
   * Print Layout
   *
   **/
}
@media print and (max-width: 600px) {
  h1 {
    font-size: 1.875rem;
  }
}
@media print {
  h2 {
    font-size: 1.875rem;
    line-height: 1.25;
  }
}
@media print {
  h3 {
    font-size: 1.5rem;
    line-height: 1.35;
  }
}
@media print {
  h4 {
    font-size: 1.3125rem; /* 21/16 */
    line-height: 1.35;
  }
}
@media print {
  p {
    font-size: 1.0625rem;
  }
}
@media print and (max-width: 600px) {
  p {
    font-size: 0.9375rem;
  }
}
@media print {
  #content, #page {
    width: 100%;
    margin: 0;
    float: none;
  }
  @page {
    margin: 2cm;
  }
  html {
    font-size: 11pt !important;
  }
  body {
    font-family: Georgia, Times New Roman, Times, serif;
    line-height: 1.3;
    background: #fff !important;
    color: #000 !important;
  }
  a {
    color: #000;
  }
  .l-collection-hero__copy h1, .l-collection-hero__copy p {
    color: #000 !important;
  }
  #c-global-header, nav, .c-banner-draper,
  #c-global-footer, .c-written-tutorial__artwork, .c-box-list,
  .o-button--green, .l-bookmark-button-mobile,
  .c-more-tutorials, .c-authors, .c-forum-comments,
  .c-written-tutorial__content-tags, .c-written-tutorial__content-share,
  .c-written-tutorial__content-buttons, .l-collection-hero__artwork--desktop,
  .c-tutorial-episode__length, .o-badge-tutorial--checkmark, .o-alert--info, .o-tag,
  .c-admin-edit-banner, .o-button--bookmark, .l-collection-hero__copy h4,
  .c-written-tutorial__introduction h4,
  .c-banner-related__artwork,
  .c-mobile-navigator,
  .c-paginator, .c-sticky-options-banner,
  .c-banner-draper-sticky,
  #carbonads, .c-rating-count {
    display: none !important;
  }
  .c-written-tutorial__introduction {
    width: 100% !important;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    break-after: avoid !important;
  }
  h2,
  h3,
  h4 {
    margin-top: 18pt !important;
  }
  table, figure {
    break-inside: avoid !important;
  }
  p {
    margin-top: 12pt !important;
  }
  em {
    font-weight: 700 !important;
  }
  .c-content-author {
    display: flex;
    align-items: center;
    margin-top: 24pt;
  }
  .c-content-author img {
    max-width: 60px !important;
    margin-right: 14pt !important;
  }
  img {
    display: block !important;
    width: auto !important;
    max-width: 580px !important;
    height: auto !important;
  }
  [class*=breadcrumbs] {
    display: none !important;
  }
  article {
    max-width: 688pt !important;
  }
  a[href^="#"]:after {
    display: none !important;
  }
  a[href^="https://"] {
    text-decoration: underline !important;
  }
  p a[href^="https://"]:after,
  a[href^="https://"]:after {
    display: inline-block;
    font-size: 80% !important;
    content: " (" attr(href) ")";
    word-break: break-word;
  }
  p a {
    word-wrap: break-word !important;
  }
  code {
    padding: 0 2pt !important;
    box-shadow: inset 0 0 0 1000px #e4e4e4 !important;
  }
  pre {
    margin-top: 8pt !important;
    padding: 8px !important;
    border: 1px solid #000000 !important;
    border-radius: 0.5625rem !important;
    break-inside: avoid !important;
  }
  pre code {
    box-shadow: none !important;
  }
  pre button {
    display: none !important;
  }
  ul li, ol li {
    margin-top: 8pt;
    padding-left: 8pt;
  }
  .note {
    margin-top: 12pt !important;
    padding: 10pt !important;
    box-shadow: inset 0 0 1000px #e4e4e4 !important;
    border-radius: 0.5625rem !important;
  }
  .u-hide {
    display: none !important;
  }
  [class*=c-banner-draper] img {
    display: none !important;
  }
}
/**
* This file contains the font-face definitions for the fonts used across the site
*
* Web Fonts from colophon-foundry.org
*
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Colophon Foundry. 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) 2022 Colophon Foundry
*
* Licenced to Matthew Derrick Kodeco Inc

*
*  1. Relative
*
*/
/* ==========================================================================
  0. Variable definitions
  ========================================================================== */
/* ==========================================================================
   1. Relative
   ========================================================================== */
/* relative-book */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/relative-book-pro-b7bfc78df53a6103abfdccc4f18a0e919172076cc7dd5c5309a0a94d64f19615.woff2) format("woff2"), url(/assets/relative-book-pro-d1079bfa99a0cab9ef8465a629feddad450f13b5b7f7b495f2717b2788b5428f.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 400;
  src: url(/assets/relative-italic-pro-46b2f83e0335d2ee38e8ead7854143fc4642a914ef19d165b7c40027bc649202.woff2) format("woff2"), url(/assets/relative-italic-pro-cbc583d872bfd3462fa990ac1d595cf7d5f6f8a1bc16f70f9f43d12d2f9cb186.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-medium */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/relative-medium-pro-efff202b230c17039474726cd59259a03b75292b1a63068ab73f55dbf6a25dcb.woff2) format("woff2"), url(/assets/relative-medium-pro-16f66e32ff5195a3e52ad1f851b3559c20d2fb56508ed215cf319f2a59cf7abf.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-medium-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 500;
  src: url(/assets/relative-medium-italic-pro-78c16e218cb3c8571907fe11721c5701644595e0c27b839dbc8a71053ac64d21.woff2) format("woff2"), url(/assets/relative-medium-italic-pro-ec9d2644d301a4cd59c1233b2a99af84d75f908d6d60e9e82105643ab841ee1e.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-bold */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/relative-bold-pro-27260fd4e75322220c790f98dd68c0a32a0c0d87bed151a3732089964da11a84.woff2) format("woff2"), url(/assets/relative-bold-pro-5b61cb4c881c1b1713838dbe2b50a7aa601508d74e54551a5bae022d4c7c0c84.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-bold-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 700;
  src: url(/assets/relative-bold-italic-pro-9f0cd55a979f577d9982fa929066340f88f483707128ebc6829136d15ac79ee8.woff2) format("woff2"), url(/assets/relative-bold-italic-pro-c35f296845bfcf8e5da688c8c0fd79c93307872766e0398fce78f46ef00736af.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-mono-10 */
@font-face {
  font-family: "Relative Mono";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/relative-mono-10-pitch-pro-b82594bbdaa88ed3eb167db83ce1e51421fe27906d887c2224bd7f3134d7a9cf.woff2) format("woff2"), url(/assets/relative-mono-10-pitch-pro-d954d74c5298b0cde17bd4d03342ed4974193ad7e5a78e9ebf10d8799ad883ce.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

/**
 * This file contains all colour definitions.
 *
 * 1. Colours
 * 2. Highlighter Colours
 *
 */
/* ==========================================================================
    1. Colours
   ========================================================================== */
/* Black */
/* Dark mode input */
/* Dark mode hover */
/* Dark mode borders */
/* Grey */
/* Main Brand Grey */
/*Main Brand Grey at 50% opacity */
/* Brand Light Grey */
/* Light Multi-platform Colour */
/* Dark Multi-platform Colour */
/* Blue */
/* Light Flutter Colour */
/* Light Flutter 50% opacity */
/* Light Flutter colour equivalent for 50% opacity on dark background */
/* Dark Flutter Colour */
/* Brown */
/* Green */
/* Light Android Colour */
/* Light Android 50% opacity */
/* Light Android colour equivalent for 50% opacity on dark background */
/* Dark Android Colour */
/* Grey */
/* Main Brand Grey */
/*Main Brand Grey at 20% opacity */
/*Main Brand Grey at 50% opacity */
/* Brand Light Grey */
/* Light Multi-platform Colour */
/* Dark Multi-platform Colour */
/* Orange */
/* Main Brand Colour */
/* Brand Light Orange */
/* Brand Light Orange with 20% opacity */
/* Brand Dark Orange */
/* Pink */
/* Light Server-Side Swift Colour */
/* Dark Server-Side Swift Colour */
/* Purple */
/* Light iOS Colour */
/* Light iOS 50% opacity */
/* Light iOS colour equivalent for 50% opacity on dark background */
/* Dark iOS Colour */
/* Light Game Tech Colour */
/* Dark Game Tech Colour */
/* Red */
/* Teal */
/* White */
/* Yellow */
/* Light Pro-Gro Colour */
/* Dark Pro-Gro Colour */
/* ==========================================================================
    2. Highlighter Colours
   ========================================================================== */
/* Function to convert pixel font sizes to rem */
/*
 * Sets some base rules for typography
 */
body {
  font-family: "Relative", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #14161E;
  text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Relative", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: unset !important;
}

button {
  line-height: 1;
}

a {
  color: #14161E;
}

/* RW OVERRIDES
 *
 * We shouldn't need these, but whilst we keep the RW styles in at the top, we might
 * need to override them.
 */
p {
  font-size: 1rem;
}

/**
 * A thin layer on top of normalize.css
 */
html {
  box-sizing: border-box;
  font-family: "Relative";
}

body {
  margin: 0;
}

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

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

a,
button,
details,
summary {
  transition: all 0.5s ease-out;
  cursor: pointer;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: "Relative";
}

/* Hide arrow glyph */
details > summary {
  list-style: none;
  cursor: pointer;
}

/* Hide arrow glyph in Safari */
details > summary::-webkit-details-marker {
  display: none;
}

input:focus,
button:focus,
li:focus,
a:focus,
span:focus {
  outline: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Relative";
}

ol {
  list-style: decimal;
}
ol li {
  margin-top: 10px;
}
ol li:first-child {
  margin-top: 0;
}

input,
textarea,
select {
  font-family: "Relative";
  -webkit-appearance: none;
}

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex="-1"]:focus {
  outline: none !important;
}

/**
 * Standardise SVG rendering
 */
svg g,
svg path {
  fill: inherit;
}

svg.icon {
  width: 32px;
  height: 32px;
}

/**
 * This file contains variables for controlling layout.
 *
 * 1. Page layout
 * 2. Responsiveness
 *
 */
/* ==========================================================================
    1. Page layout
   ========================================================================== */
/* ==========================================================================
    2. Responsiveness
   ========================================================================== */
/* Controlling column layouts */
/* ==========================================================================
    Responsiveness
   ========================================================================== */
/* ==========================================================================
    Truncation
   ========================================================================== */
/* ==========================================================================
    Flexed spacing
   ========================================================================== */
/* ==========================================================================
    Aspect Ratio
   ========================================================================== */
/* ==========================================================================
  Hide Scrollbar
========================================================================== */
/* Containers
 *
 * This creates containers for every different column width, i.e. 1 through 16 columns wide.
 * They are named in terms of their pixel widths. This assumes that the actual page max-width
 * is perfectly divisible by the number of columns.
 *
 * With the current settings, this includes creating the following classes:
 * container-990, container-1188, container-1386, container-1584
 */
.container-99 {
  margin: 0 auto;
  max-width: 99px;
}
@media screen and (max-width: 146px) {
  .container-99 {
    margin: 0 24px;
  }
}

.max-w-99 {
  max-width: 99px;
}

.w-99 {
  width: 99px;
}

.container-198 {
  margin: 0 auto;
  max-width: 198px;
}
@media screen and (max-width: 245px) {
  .container-198 {
    margin: 0 24px;
  }
}

.max-w-198 {
  max-width: 198px;
}

.w-198 {
  width: 198px;
}

.container-297 {
  margin: 0 auto;
  max-width: 297px;
}
@media screen and (max-width: 344px) {
  .container-297 {
    margin: 0 24px;
  }
}

.max-w-297 {
  max-width: 297px;
}

.w-297 {
  width: 297px;
}

.container-396 {
  margin: 0 auto;
  max-width: 396px;
}
@media screen and (max-width: 443px) {
  .container-396 {
    margin: 0 24px;
  }
}

.max-w-396 {
  max-width: 396px;
}

.w-396 {
  width: 396px;
}

.container-495 {
  margin: 0 auto;
  max-width: 495px;
}
@media screen and (max-width: 542px) {
  .container-495 {
    margin: 0 24px;
  }
}

.max-w-495 {
  max-width: 495px;
}

.w-495 {
  width: 495px;
}

.container-594 {
  margin: 0 auto;
  max-width: 594px;
}
@media screen and (max-width: 641px) {
  .container-594 {
    margin: 0 24px;
  }
}

.max-w-594 {
  max-width: 594px;
}

.w-594 {
  width: 594px;
}

.container-693 {
  margin: 0 auto;
  max-width: 693px;
}
@media screen and (max-width: 740px) {
  .container-693 {
    margin: 0 24px;
  }
}

.max-w-693 {
  max-width: 693px;
}

.w-693 {
  width: 693px;
}

.container-792 {
  margin: 0 auto;
  max-width: 792px;
}
@media screen and (max-width: 839px) {
  .container-792 {
    margin: 0 24px;
  }
}

.max-w-792 {
  max-width: 792px;
}

.w-792 {
  width: 792px;
}

.container-891 {
  margin: 0 auto;
  max-width: 891px;
}
@media screen and (max-width: 938px) {
  .container-891 {
    margin: 0 24px;
  }
}

.max-w-891 {
  max-width: 891px;
}

.w-891 {
  width: 891px;
}

.container-990 {
  margin: 0 auto;
  max-width: 990px;
}
@media screen and (max-width: 1037px) {
  .container-990 {
    margin: 0 24px;
  }
}

.max-w-990 {
  max-width: 990px;
}

.w-990 {
  width: 990px;
}

.container-1089 {
  margin: 0 auto;
  max-width: 1089px;
}
@media screen and (max-width: 1136px) {
  .container-1089 {
    margin: 0 24px;
  }
}

.max-w-1089 {
  max-width: 1089px;
}

.w-1089 {
  width: 1089px;
}

.container-1188 {
  margin: 0 auto;
  max-width: 1188px;
}
@media screen and (max-width: 1235px) {
  .container-1188 {
    margin: 0 24px;
  }
}

.max-w-1188 {
  max-width: 1188px;
}

.w-1188 {
  width: 1188px;
}

.container-1287 {
  margin: 0 auto;
  max-width: 1287px;
}
@media screen and (max-width: 1334px) {
  .container-1287 {
    margin: 0 24px;
  }
}

.max-w-1287 {
  max-width: 1287px;
}

.w-1287 {
  width: 1287px;
}

.container-1386 {
  margin: 0 auto;
  max-width: 1386px;
}
@media screen and (max-width: 1433px) {
  .container-1386 {
    margin: 0 24px;
  }
}

.max-w-1386 {
  max-width: 1386px;
}

.w-1386 {
  width: 1386px;
}

.container-1485 {
  margin: 0 auto;
  max-width: 1485px;
}
@media screen and (max-width: 1532px) {
  .container-1485 {
    margin: 0 24px;
  }
}

.max-w-1485 {
  max-width: 1485px;
}

.w-1485 {
  width: 1485px;
}

.container-1584 {
  margin: 0 auto;
  max-width: 1584px;
}
@media screen and (max-width: 1631px) {
  .container-1584 {
    margin: 0 24px;
  }
}

.max-w-1584 {
  max-width: 1584px;
}

.w-1584 {
  width: 1584px;
}

.container-1680 {
  margin: 0 auto;
  max-width: 1680px;
}
@media screen and (max-width: 1727px) {
  .container-1680 {
    margin: 0 24px;
  }
}

.max-w-1680 {
  max-width: 1680px;
}

.w-1680 {
  width: 1680px;
}

/* Using flexbox to make header and footer work as expected */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}
body .content {
  flex: 1 0 auto;
  align-self: center;
}
body > footer.footer {
  flex-shrink: 0;
}

.columns {
  display: flex;
  flex-wrap: wrap;
}

.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}
.column.column-0 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-0 {
    width: 0%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-0 {
    width: 0%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-0 {
    width: 0%;
  }
}
.column.column-0.column-fixed {
  width: 0px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-0 {
    margin-left: 0%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-0 {
    margin-left: 0%;
  }
}
.column.column-1 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-1 {
    width: 25%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-1 {
    width: 12.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-1 {
    width: 6.25%;
  }
}
.column.column-1.column-fixed {
  width: 99px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-1 {
    margin-left: 25%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-1 {
    margin-left: 12.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-1 {
    margin-left: 6.25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-1 {
    margin-left: 6.25%;
  }
}
.column.column-2 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-2 {
    width: 50%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-2 {
    width: 25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-2 {
    width: 12.5%;
  }
}
.column.column-2.column-fixed {
  width: 198px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-2 {
    margin-left: 50%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-2 {
    margin-left: 25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-2 {
    margin-left: 12.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-2 {
    margin-left: 12.5%;
  }
}
.column.column-3 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-3 {
    width: 75%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-3 {
    width: 37.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-3 {
    width: 18.75%;
  }
}
.column.column-3.column-fixed {
  width: 297px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-3 {
    margin-left: 75%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-3 {
    margin-left: 37.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-3 {
    margin-left: 18.75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-3 {
    margin-left: 18.75%;
  }
}
.column.column-4 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-4 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-4 {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-4 {
    width: 25%;
  }
}
.column.column-4.column-fixed {
  width: 396px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-4 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-4 {
    margin-left: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-4 {
    margin-left: 25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-4 {
    margin-left: 25%;
  }
}
.column.column-5 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-5 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-5 {
    width: 62.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-5 {
    width: 31.25%;
  }
}
.column.column-5.column-fixed {
  width: 495px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-5 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-5 {
    margin-left: 62.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-5 {
    margin-left: 31.25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-5 {
    margin-left: 31.25%;
  }
}
.column.column-6 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-6 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-6 {
    width: 75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-6 {
    width: 37.5%;
  }
}
.column.column-6.column-fixed {
  width: 594px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-6 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-6 {
    margin-left: 75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-6 {
    margin-left: 37.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-6 {
    margin-left: 37.5%;
  }
}
.column.column-7 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-7 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-7 {
    width: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-7 {
    width: 43.75%;
  }
}
.column.column-7.column-fixed {
  width: 693px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-7 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-7 {
    margin-left: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-7 {
    margin-left: 43.75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-7 {
    margin-left: 43.75%;
  }
}
.column.column-8 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-8 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-8 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-8 {
    width: 50%;
  }
}
.column.column-8.column-fixed {
  width: 792px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-8 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-8 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-8 {
    margin-left: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-8 {
    margin-left: 50%;
  }
}
.column.column-9 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-9 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-9 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-9 {
    width: 56.25%;
  }
}
.column.column-9.column-fixed {
  width: 891px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-9 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-9 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-9 {
    margin-left: 56.25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-9 {
    margin-left: 56.25%;
  }
}
.column.column-10 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-10 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-10 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-10 {
    width: 62.5%;
  }
}
.column.column-10.column-fixed {
  width: 990px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-10 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-10 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-10 {
    margin-left: 62.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-10 {
    margin-left: 62.5%;
  }
}
.column.column-11 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-11 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-11 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-11 {
    width: 68.75%;
  }
}
.column.column-11.column-fixed {
  width: 1089px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-11 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-11 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-11 {
    margin-left: 68.75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-11 {
    margin-left: 68.75%;
  }
}
.column.column-12 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-12 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-12 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-12 {
    width: 75%;
  }
}
.column.column-12.column-fixed {
  width: 1188px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-12 {
    margin-left: 75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-12 {
    margin-left: 75%;
  }
}
.column.column-13 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-13 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-13 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-13 {
    width: 81.25%;
  }
}
.column.column-13.column-fixed {
  width: 1287px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-13 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-13 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-13 {
    margin-left: 81.25%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-13 {
    margin-left: 81.25%;
  }
}
.column.column-14 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-14 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-14 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-14 {
    width: 87.5%;
  }
}
.column.column-14.column-fixed {
  width: 1386px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-14 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-14 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-14 {
    margin-left: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-14 {
    margin-left: 87.5%;
  }
}
.column.column-15 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-15 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-15 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-15 {
    width: 93.75%;
  }
}
.column.column-15.column-fixed {
  width: 1485px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-15 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-15 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-15 {
    margin-left: 93.75%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-15 {
    margin-left: 93.75%;
  }
}
.column.column-16 {
  flex: none;
}
@media screen and (max-width: 767px) {
  .column.column-16 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-16 {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-16 {
    width: 100%;
  }
}
.column.column-16.column-fixed {
  width: 1584px;
}
@media screen and (max-width: 767px) {
  .column.column-offset-16 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .column.column-offset-16 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-16 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .column.column-offset-desktop-16 {
    margin-left: 100%;
  }
}

/**
 * .written_content is a wrapper class that will format standard things like
 * p, h1, h2, blockquote etc. Used in things like articles.
 *
 */
.written-content h1,
.written-content h2,
.written-content h3,
.written-content h4,
.written-content h5,
.written-content h6 {
  margin-top: 48px;
  word-break: break-word;
}
.written-content h1,
.written-content h2 {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .written-content h1,
  .written-content h2 {
    font-size: 1.75rem;
  }
}
.written-content h3 {
  font-size: 1.5rem;
}
.written-content h4 {
  font-size: 1.25rem;
}
.written-content h5,
.written-content h6 {
  font-size: 1rem;
}
.written-content p, .written-content ul, .written-content ol, .written-content .note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  line-height: 1.66;
  word-break: break-word;
}
.written-content p {
  margin-top: 20px;
}
.written-content a {
  color: #CE3F00;
}
.written-content em {
  font-weight: 700;
  font-style: normal;
}
.written-content code {
  background-color: rgba(215, 215, 215, 0.25);
  border: 1px solid #D7D7D7;
  padding: 2px 8px;
  font-size: 0.9375rem;
  border-radius: 8px;
}
.written-content pre {
  margin-top: 24px;
}
.written-content pre code {
  padding: 24px;
}
.written-content pre + p, .written-content pre + ul, .written-content pre + ol {
  margin-top: 24px;
}
.written-content .note,
.written-content blockquote {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #FF5A00;
  background-color: #FFFFFF;
  border-radius: 16px;
}
.written-content ul {
  margin-top: 4px;
  list-style: none;
}
.written-content ul li {
  position: relative;
  margin-top: 16px;
  padding-left: 40px;
  line-height: 1.66;
}
.written-content ul li::before {
  content: "​";
  background-color: #FF8847;
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 2px;
  position: absolute;
  top: 9px;
  left: 16px;
}
.written-content ol {
  margin-top: 20px;
  padding-left: 20px;
  list-style: number;
}
.written-content ol li {
  position: relative;
  margin-top: 12px;
  padding-top: 4px;
  line-height: 1.66;
}
.written-content img {
  padding: 8px;
  border-radius: 16px;
  margin: 40px auto;
  max-width: 100%;
  height: auto;
  display: block;
}
.written-content img.bordered {
  border: 1px solid #14161E;
}

/**
 * Badges are pretty little rounded rectangles that include a small icon or some text
 * used to highlight new content, pro or the different platforms. They can be used
 * together in a group.
 *
 * 1. Elementary
 *
 */
/* ==========================================================================
    1. Elementary
   ========================================================================== */
.badge, .badge-number {
  /* Appearance */
  width: 56px;
  height: 56px;
  border-radius: 12px;
  /* Display */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Content */
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 2px;
}
.badge-number {
  /* Content */
  font-weight: 400;
  font-size: 1.125rem;
}
.badge svg, .badge-number svg {
  max-width: 24px;
  max-height: 24px;
}
.badge.pulse, .pulse.badge-number {
  position: relative;
  z-index: 0;
}
.badge.pulse.bg-purple-almost-fuchsia:before, .pulse.bg-purple-almost-fuchsia.badge-number:before {
  box-shadow: 0px 0px 0px 4px rgba(180, 78, 91, 0.2);
}
.badge.pulse:before, .pulse.badge-number:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
  transform: scale(1);
  animation: button-pulse-small 1.25s infinite;
  z-index: -1;
}

nav.breadcrumbs > * {
  display: inline-block;
}
nav.breadcrumbs a {
  color: #14161E;
  text-decoration: underline;
}
nav.breadcrumbs a.disabled {
  cursor: default;
  text-decoration: none;
  pointer-events: none;
}
nav.breadcrumbs .trigger-text {
  text-decoration: underline;
}
nav.breadcrumbs .icon {
  vertical-align: baseline;
  width: 6px;
  height: 12px;
  margin: 0 8px;
}
nav.breadcrumbs .dropdown-line {
  white-space: nowrap;
}

/**
 * Buttons come in 6 sizes: small, normal-tight, normal-wide, large-tight,large-wide extra-large
 *
 * 1. Sizes
 * 2. Specifics (Hover states etc)
 * 3. Icon Buttons
 *
 */
/* ==========================================================================
    1. Sizes
   ========================================================================== */
/* Small Button */
.btn-small, .btn-header-signin {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
  border-radius: 12px;
  text-decoration: none;
}

/* Normal-Tight Button */
.btn-normalt {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
}

/* Normal-Wide Button */
.btn-normalw, .content-switcher .scroll-box .btn-switch {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
}

/* Large-Tight Button */
.btn-larget, .btn-article {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  font-size: 1.125rem;
  border-radius: 16px;
  text-decoration: none;
}

/* Large-Wide Button */
.btn-largew {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  font-size: 1.125rem;
  border-radius: 16px;
  text-decoration: none;
}

/* Extra Large Button */
.btn-xlarge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 32px;
  font-size: 1.25rem;
  border-radius: 16px;
  text-decoration: none;
}

/* ==========================================================================
    2. Specifics per Colour
   ========================================================================== */
/* Black Button */
.btn-larget.bg-black-night.fc-white:hover, .bg-black-night.fc-white.btn-article:hover, .btn-larget.bg-black-night.fc-white:focus, .bg-black-night.fc-white.btn-article:focus,
.btn-largew.bg-black-night.fc-white:hover,
.btn-largew.bg-black-night.fc-white:focus,
.btn-normalt.bg-black-night.fc-white:hover,
.btn-normalt.bg-black-night.fc-white:focus,
.btn-normalw.bg-black-night.fc-white:hover,
.content-switcher .scroll-box .bg-black-night.fc-white.btn-switch:hover,
.btn-normalw.bg-black-night.fc-white:focus,
.content-switcher .scroll-box .bg-black-night.fc-white.btn-switch:focus,
.btn-small.bg-black-night.fc-white:hover,
.bg-black-night.fc-white.btn-header-signin:hover,
.btn-small.bg-black-night.fc-white:focus,
.bg-black-night.fc-white.btn-header-signin:focus,
.btn-xlarge.bg-black-night.fc-white:hover,
.btn-xlarge.bg-black-night.fc-white:focus {
  background-color: #43454B;
}

/* Orange Determination Button */
.btn-larget.bg-orange-determination.fc-white:hover, .bg-orange-determination.fc-white.btn-article:hover, .btn-larget.bg-orange-determination.fc-white:focus, .bg-orange-determination.fc-white.btn-article:focus,
.btn-largew.bg-orange-determination.fc-white:hover,
.btn-largew.bg-orange-determination.fc-white:focus,
.btn-normalt.bg-orange-determination.fc-white:hover,
.btn-normalt.bg-orange-determination.fc-white:focus,
.btn-normalw.bg-orange-determination.fc-white:hover,
.content-switcher .scroll-box .bg-orange-determination.fc-white.btn-switch:hover,
.btn-normalw.bg-orange-determination.fc-white:focus,
.content-switcher .scroll-box .bg-orange-determination.fc-white.btn-switch:focus,
.btn-small.bg-orange-determination.fc-white:hover,
.bg-orange-determination.fc-white.btn-header-signin:hover,
.btn-small.bg-orange-determination.fc-white:focus,
.bg-orange-determination.fc-white.btn-header-signin:focus,
.btn-xlarge.bg-orange-determination.fc-white:hover,
.btn-xlarge.bg-orange-determination.fc-white:focus {
  background-color: #ff4f02;
}

/* White Button with Black Outline */
.btn-larget.bg-white, .bg-white.btn-article,
.btn-largew.bg-white,
.btn-normalt.bg-white,
.btn-normalw.bg-white,
.content-switcher .scroll-box .bg-white.btn-switch,
.btn-small.bg-white,
.bg-white.btn-header-signin,
.btn-xlarge.bg-white {
  border: solid 1px #14161E;
}
.btn-larget.bg-white:hover, .bg-white.btn-article:hover, .btn-larget.bg-white:focus, .bg-white.btn-article:focus,
.btn-largew.bg-white:hover,
.btn-largew.bg-white:focus,
.btn-normalt.bg-white:hover,
.btn-normalt.bg-white:focus,
.btn-normalw.bg-white:hover,
.content-switcher .scroll-box .bg-white.btn-switch:hover,
.btn-normalw.bg-white:focus,
.content-switcher .scroll-box .bg-white.btn-switch:focus,
.btn-small.bg-white:hover,
.bg-white.btn-header-signin:hover,
.btn-small.bg-white:focus,
.bg-white.btn-header-signin:focus,
.btn-xlarge.bg-white:hover,
.btn-xlarge.bg-white:focus {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/* Black Button with White Outline */
.btn-larget.bg-black-night.fc-white.bc-white:hover, .bg-black-night.fc-white.bc-white.btn-article:hover, .btn-larget.bg-black-night.fc-white.bc-white:focus, .bg-black-night.fc-white.bc-white.btn-article:focus,
.btn-largew.bg-black-night.fc-white.bc-white:hover,
.btn-largew.bg-black-night.fc-white.bc-white:focus,
.btn-normalt.bg-black-night.fc-white.bc-white:hover,
.btn-normalt.bg-black-night.fc-white.bc-white:focus,
.btn-normalw.bg-black-night.fc-white.bc-white:hover,
.content-switcher .scroll-box .bg-black-night.fc-white.bc-white.btn-switch:hover,
.btn-normalw.bg-black-night.fc-white.bc-white:focus,
.content-switcher .scroll-box .bg-black-night.fc-white.bc-white.btn-switch:focus,
.btn-small.bg-black-night.fc-white.bc-white:hover,
.bg-black-night.fc-white.bc-white.btn-header-signin:hover,
.btn-small.bg-black-night.fc-white.bc-white:focus,
.bg-black-night.fc-white.bc-white.btn-header-signin:focus,
.btn-xlarge.bg-black-night.fc-white.bc-white:hover,
.btn-xlarge.bg-black-night.fc-white.bc-white:focus {
  background-color: rgba(215, 215, 215, 0.5);
  box-shadow: none;
}

/* Header Sign-In Button */
.btn-header-signin {
  border: none;
  background-color: #FFFFFF;
  font-size: 1rem;
  color: #14161E;
}
.btn-header-signin:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/* ==========================================================================
    3. Icon Buttons
   ========================================================================== */
.btn-icon {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.btn-icon svg {
  display: block;
}
.btn-icon:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.btn-icon svg {
  max-height: 20px;
  max-width: 20px;
  fill: #14161E;
}

.btn-iconsm {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}
.btn-iconsm svg {
  display: block;
}
.btn-iconsm:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.btn-iconsm svg {
  max-width: 8px;
  max-height: 8px;
}

.btn-iconxsm {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  text-decoration: none;
}
.btn-iconxsm svg {
  display: block;
}
.btn-iconxsm:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.btn-iconxsm svg {
  max-width: 8px;
  max-height: 8px;
}

/* ==========================================================================
    3. Icon with Links
   ========================================================================== */
.btn-label {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-label .btn-icon:hover,
.btn-label .btn-iconsm:hover,
.btn-label .btn-iconxsm:hover {
  background-color: transparent;
}
.btn-label a,
.btn-label span,
.btn-label p {
  padding-left: 8px;
  justify-content: center;
}
.btn-label a:hover,
.btn-label span:hover,
.btn-label p:hover {
  color: #CE3F00;
}

/* ==========================================================================
  4. Article  Buttons (usually used for promotions)
========================================================================== */
.btn-article {
  background-color: #14161E;
  color: #FFFFFF;
}

.loading {
  max-width: 396px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading .loading-icon {
  padding-bottom: 24px;
}
.loading .loading-icon svg {
  max-width: 40px;
  max-height: 40px;
}
.loading .loading-progress {
  width: 100%;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 22, 30, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: scroll;
  z-index: 99999999;
}
.modal-wrapper {
  max-width: 790px;
  max-height: 100%;
  overflow-y: auto;
  padding: 24px 24px 32px;
  border-radius: 1rem;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  margin-left: 24px;
  margin-right: 24px;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-name: zoom-in;
}
.modal > .btn-icon {
  min-height: 40px;
}
.modal .btn-icon svg {
  max-width: 12px;
  max-height: 12px;
}
.modal .modal-title {
  font-size: 1.5rem;
  min-height: 64px;
  padding-top: 22px;
}
.modal p {
  font-size: 1rem;
  margin-top: 16px;
}
.modal .modal-table {
  height: 80px;
  min-height: 80px;
  display: inline-flex;
  width: 100%;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #14161E;
}
.modal .modal-table:last-child {
  border-bottom: none;
}
.modal .modal-table h4 {
  font-size: 1.125rem;
}
.modal .modal-table p,
.modal .modal-table span {
  font-size: 0.875rem;
}
.modal .modal-table button,
.modal .modal-table a {
  padding: 0 16px;
}

.modal-tight {
  max-width: 396px;
}
.modal-tight .modal-action {
  margin-top: 32px;
  margin-bottom: 16px;
  display: flex;
  max-width: 100% !important;
  justify-content: center;
}
.modal-tight p a,
.modal-tight span a {
  display: inline;
}

/* ==========================================================================
  Full Screen
========================================================================== */
.modal-wrapper__full-screen {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  border-radius: 0;
  background-color: #F7F7F7;
  animation: scale-down 150ms ease-in-out forwards;
  transform-origin: top;
}
.modal-wrapper__full-screen header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  width: 100%;
  font-size: 1.125rem;
  line-height: 1.125rem;
  padding: 0 24px;
}
.modal-wrapper__full-screen .main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 80px);
}
.modal-wrapper__full-screen .main > section {
  max-width: 642px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin: 80px auto;
  padding: 0 24px;
}
.modal-wrapper__full-screen .main > section .title {
  font-size: 1.25rem;
  line-height: 1.25rem;
  font-weight: 500;
  min-height: 64px;
  height: 64px;
  width: 100%;
}
.modal-wrapper__full-screen .main footer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  height: 80px;
  width: 100%;
  padding: 0 24px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.1);
}
.modal-wrapper__full-screen .main footer > section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 594px;
  width: 100%;
}

/**
 * This file contains animation utility classes
 *
 * 1. Button pulse
 * 2. Dot loading animation
* 3. Zoom In
 *
 */
/* ==========================================================================
    1. Button pulse
   ========================================================================== */
@keyframes button-pulse {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.95);
  }
}
@keyframes button-pulse-small {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
/* ==========================================================================
    2. Dot loading animation
   ========================================================================== */
@keyframes a-dot-loader {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.dot-loader .a-dot-loader--1 {
  animation: a-dot-loader 1.5s infinite;
}
.dot-loader .a-dot-loader--2 {
  animation: a-dot-loader 1.5s infinite;
  animation-delay: 0.1s;
}
.dot-loader .a-dot-loader--3 {
  animation: a-dot-loader 1.5s infinite;
  animation-delay: 0.2s;
}

/* ==========================================================================
  3. Zoom In
========================================================================== */
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
/* ==========================================================================
  4. Indeterminate Progress bars
========================================================================== */
@keyframes indeterminate-progress {
  0% {
    margin-left: 0px;
    width: 0%;
  }
  50% {
    margin-left: 25%;
    width: 50%;
  }
  100% {
    margin-left: 100%;
    width: 0%;
  }
}
/* ==========================================================================
  4. Scale Down
========================================================================== */
@keyframes scale-down {
  0% {
    transform: scaleY(0);
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}
/**
 * Progress bars and meters are part of semantic HTML.
 *
 * 1. Progress bars
 * 2. Indeterminate Progress bars
 *
 */
/* ==========================================================================
    1. Progress bars
   ========================================================================== */
.progress {
  width: 100%;
  height: 2px;
  border: none;
  border-radius: 2px;
  background-color: rgba(215, 215, 215, 0.5);
  -webkit-appearance: none;
  overflow: hidden;
}
.progress::-moz-progress-bar {
  background-color: #00B87E;
  border-radius: 2px;
}
.progress::-webkit-progress-value {
  background-color: #00B87E;
  border-radius: 2px;
}
.progress::-webkit-progress-bar {
  border: none;
  border-radius: 2px;
  background-color: rgba(215, 215, 215, 0.5);
}

/* ==========================================================================
    2. Interderminate Progress bars
   ========================================================================== */
progress.progress:indeterminate {
  animation: indeterminate-progress 1s linear infinite;
  background-color: #00B87E;
  /* Firefox */
  /* Webkit */
}
progress.progress:indeterminate::-moz-progress-bar {
  animation: indeterminate-progress 1s linear infinite;
  background-color: #00B87E;
}
progress.progress:indeterminate::-webkit-progress-value {
  animation: indeterminate-progress 1s linear infinite;
  background-color: #00B87E;
}

/**
 * Search come in 2 variants: default (48px) and dynamic height (x-height)
 *
 * 1. Sizes
 * 2. Specifics
 *
 */
/* Object/Input/Text */
label.search {
  position: relative;
}
label.search svg[role=presentation] {
  position: absolute;
  visibility: visible;
  width: 16px;
  height: 16px;
  top: calc(50% - 8px);
  left: 16px;
}

input.search-normal {
  height: 48px;
  font-size: 1rem;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #14161E;
  font-weight: 400;
  padding: 0px 48px 0 48px;
}
input.search-normal + svg {
  position: absolute;
  visibility: visible;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
  right: 16px;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}
input.search-normal + svg:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
input.search-normal:placeholder-shown + svg {
  visibility: hidden;
}
input.search-normal::placeholder {
  color: #8C8C8C;
  line-height: 1;
}
input.search-normal:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
  transition: background 0.3s ease-in;
}
input.search-normal:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  background: #FFFFFF;
  transition: background 0.3s ease-out;
}
input.search-small {
  height: 40px;
  font-size: 1rem;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #14161E;
  font-weight: 400;
  padding: 0px 48px 0 48px;
}
input.search-small + svg {
  position: absolute;
  visibility: visible;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
  right: 16px;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}
input.search-small + svg:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
input.search-small:placeholder-shown + svg {
  visibility: hidden;
}
input.search-small::placeholder {
  color: #8C8C8C;
  line-height: 1;
}
input.search-small:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
  transition: background 0.3s ease-in;
}
input.search-small:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  background: #FFFFFF;
  transition: background 0.3s ease-out;
}

/**
 * Pagination
 */
ul.pagination {
  display: inline-flex;
}
ul.pagination li.page.prev .page-link,
ul.pagination li.page.next .page-link {
  text-decoration: none;
  line-height: 40px;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 40px;
  width: 40px;
  padding: 8px 0px;
  margin-left: 8px;
  background: unset;
  color: #14161E;
  line-height: 24px;
}
ul.pagination li.page.prev .page-link svg,
ul.pagination li.page.next .page-link svg {
  width: 24px;
  height: 12px;
  fill: currentColor;
}
ul.pagination li.page {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tile ul.pagination li.page::before {
  content: none;
}
ul.pagination li.page.prev .page-link:hover {
  background: rgba(215, 215, 215, 0.4980392157) !important;
  color: #14161E !important;
}
ul.pagination li.page.next .page-link:hover {
  background: rgba(215, 215, 215, 0.4980392157) !important;
  color: #14161E !important;
}
ul.pagination li.page .page-link {
  text-decoration: none;
  line-height: 40px;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 40px;
  width: 40px;
  margin-left: 8px;
  background: #14161E;
  color: #FFFFFF;
}
ul.pagination li.page .page-link:not(.active):hover {
  background: #43454B;
  color: #FFFFFF;
}
ul.pagination li.page .page-link.active {
  background: #D7D7D7;
  color: #14161E;
}
ul.pagination li.page.current {
  text-decoration: none;
  line-height: 40px;
  border-radius: 8px;
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 40px;
  width: 40px;
  margin-left: 8px;
  background: #D7D7D7;
  color: #14161E;
}

/* Wrapper class that indicates what gets a tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  /* Actual style of the tooltip */
  /* If you hover the element with class .tooltip, it becomes visible */
}
.tooltip .tooltip-text {
  opacity: 0;
  max-width: 320px;
  width: max-content;
  overflow-wrap: break-word;
  display: none;
  align-items: center;
  background-color: #14161E;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: left;
  padding: 10px 16px;
  border-radius: 8px;
  text-transform: none !important;
  /* Different location of tooltips */
}
.tooltip .tooltip-text.tooltip-bottom {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
}
.tooltip .tooltip-text.tooltip-bottom-align-right {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  right: 0;
}
.tooltip .tooltip-text.tooltip-bottom-align-center {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip .tooltip-text.tooltip-top {
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 8px);
}
.tooltip .tooltip-text.tooltip-top-align-right {
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 8px);
  right: 0;
}
.tooltip .tooltip-text.tooltip-top-align-center {
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.tooltip .tooltip-text.tooltip-right {
  position: absolute;
  z-index: 9999;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip .tooltip-text.tooltip-left {
  position: absolute;
  z-index: 9999;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  display: flex;
}
@media screen and (max-width: 1023px) {
  .tooltip:hover .tooltip-text {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}

/**
 * Tiles
 *
 * 1. Base
 *
 */
/* ==========================================================================
    1. Base
   ========================================================================== */
.tile {
  padding: 0 24px 24px 24px;
  border-radius: 1rem;
}
.tile .tile-header {
  min-height: 80px;
  display: flex;
  align-items: center;
}
.tile .tile-header h2 {
  font-size: 1.25rem;
}
.tile .tile-header svg {
  max-width: 24px;
  max-height: 24px;
  margin-right: 0.8em;
  display: block;
}
.tile ul,
.tile ol,
.tile p {
  font-size: 1rem;
  margin-top: 8px;
}
.tile ul {
  margin-top: 1em;
  padding-left: 0.5em;
}
.tile ul li {
  list-style: none;
  font-size: 1rem;
}
.tile ul li::before {
  content: "•";
  font-size: 1rem;
  line-height: 2;
  margin-right: 0.625em;
}
.tile.bullet-list ul {
  padding-left: 20px !important;
}
.tile.bullet-list ul li {
  list-style: disc;
  margin-bottom: 16px;
}
.tile.bullet-list ul li:before {
  display: none;
}
.tile.bullet-list ul li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
1. Elementary Table
========================================================================== */
.elementary-table {
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-spacing: 0px;
  border-radius: 16px;
  /* ==========================================================================
  2. longtables Table
  ========================================================================== */
  /* ==========================================================================
  3. Zebra rows Table
  ========================================================================== */
  /* ==========================================================================
  4. Row height small Table
  ========================================================================== */
  /* ==========================================================================
  5. Row height extra small Table
  ========================================================================== */
  /* ==========================================================================
  6. Data Table—Selectable, Sortable, Controls + Pagination Table
  ========================================================================== */
  /* ==========================================================================
  7. Data Table—Selectable, Sortable, Controls + Pagination Table
  ========================================================================== */
  /* ==========================================================================
  8. Data Table—Selectable, Sortable, Controls + Pagination Table
  ========================================================================== */
}
.elementary-table thead tr:first-of-type th:first-of-type,
.elementary-table tbody tr:first-of-type th:first-of-type {
  border-top-left-radius: 16px;
}
.elementary-table thead tr:first-of-type th:last-of-type,
.elementary-table tbody tr:first-of-type th:last-of-type {
  border-top-right-radius: 16px;
}
.elementary-table thead th,
.elementary-table tbody th {
  background: #F7F7F7;
}
.elementary-table thead th,
.elementary-table thead td,
.elementary-table tbody th,
.elementary-table tbody td {
  height: 64px;
  font-size: 1rem;
  font-weight: 400;
  padding: 24px;
}
.elementary-table.long-labels-table {
  line-height: 1.25;
}
.elementary-table.long-labels-table tr {
  padding: 24px 0px;
}
.elementary-table.zebra-rows-table tr:nth-child(even) {
  background: #F7F7F7;
}
.elementary-table.rh-small th,
.elementary-table.rh-small td {
  height: 56px !important;
  padding: 20px 24px;
}
.elementary-table.rh-extra-small th,
.elementary-table.rh-extra-small td {
  height: 48px !important;
  padding: 16px 24px;
}
@media only screen and (max-width: 600px) {
  .elementary-table.is-responsive {
    background: linear-gradient(90deg, rgba(215, 215, 215, 0) 0%, #D7D7D7 100%);
  }
}
.elementary-table.is-controls th:nth-child(1),
.elementary-table.is-controls td:nth-child(1) {
  padding: 20px 24px;
}
.elementary-table.is-controls th:nth-child(1) .checkbox .checkbox-tick,
.elementary-table.is-controls td:nth-child(1) .checkbox .checkbox-tick {
  right: calc(100% - 20px) !important;
  vertical-align: middle;
}
.elementary-table.is-controls .btn-normalw {
  padding: 12px 16px;
  border-radius: 8px;
}
.elementary-table.is-controls .btn-normalw:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.elementary-table.is-controls .btn-normalw .arrow-icon {
  display: inherit;
  padding-left: 20px;
}
.elementary-table.is-controls .btn-normalw .arrow-icon svg {
  width: 9.41px;
  height: 14px;
}
.elementary-table.is-controls tfoot tr td {
  padding: 23px 25px 25px;
}
.elementary-table.is-tabs-search thead tr:nth-of-type(1) th {
  text-align: left;
  padding-left: 17px;
}
.elementary-table.is-tabs-search thead tr:nth-of-type(2) th {
  text-align: left;
  padding: 24px 24px 8px;
}
.elementary-table.is-tabs-search .search-normal {
  width: 100%;
}

.selection-results {
  display: flex;
  margin-top: 24px;
  max-width: 100%;
  background-color: #14161E;
  border-radius: 16px;
}
.selection-results .results-text {
  padding: 20px 24px 20px;
}
.selection-results .results-text p {
  color: #FFFFFF;
}
.selection-results .button-container {
  padding: 20px 24px 20px;
  flex: 50%;
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: end;
}
.selection-results .button-container .badge.bg-black-night {
  width: 40px;
  height: 40px;
}
.selection-results .button-container .badge.bg-black-night:hover, .selection-results .button-container .badge.bg-black-night:focus {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.selection-results .button-container .btn-small:hover, .selection-results .button-container .btn-small:focus {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

.table-margin {
  margin-top: 20px;
}

/**
* Badges are pretty little rounded rectangles that include a small icon or some text
* used to highlight new content, pro or the different platforms. They can be used
* together in a group.
*
* 1. Actions — Single Row
* 2. Actions — Small
* 3. Navigation
* 4. Navigation subtitles
* 5. Navigation sections
* 6. Navigation split
*
*/
/* ==========================================================================
1. Actions — Single Row
========================================================================== */
.dropdown {
  position: relative;
  line-height: 1;
  /* Wrapper to make text and button appear on same line */
  /* When details is open, keep the highlight on it */
  /* Positions the dropdown (can be used also without summary-details nonsense) */
}
.dropdown .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Might break everything if there is nothing after the text.. */
}
.dropdown .dropdown-trigger .trigger-text img {
  max-width: 40px;
  max-height: 40px;
  border-radius: 12px;
}
.dropdown details[open] .btn-iconxsm {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.dropdown .dropdown-menu {
  display: block;
  position: absolute;
  overflow: visible;
  margin-top: 8px;
  min-width: 200px;
  left: 0;
  z-index: 99999;
  box-sizing: border-box;
  /* Styles the dropdown container*/
}
.dropdown .dropdown-menu.dropdown-align-center {
  left: 50%;
  transform: translateX(-50%);
}
.dropdown .dropdown-menu.dropdown-align-right {
  left: auto;
  right: 0;
}
@media screen and (max-width: 767px) {
  .dropdown .dropdown-menu.dropdown-align-left-mobile {
    left: 0 !important;
    right: auto !important;
  }
}
.dropdown .dropdown-menu.dropdown-align-left {
  transform: translateX(25%);
}
.dropdown .dropdown-menu .dropdown-content {
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  padding: 0;
  /* Styles each line */
  /* Nasty hack */
}
.dropdown .dropdown-menu .dropdown-content a.dropdown-line,
.dropdown .dropdown-menu .dropdown-content button.dropdown-line,
.dropdown .dropdown-menu .dropdown-content p.dropdown-line {
  display: block;
  margin: 8px;
  padding: 12px 16px;
  text-decoration: none !important;
  list-style: none;
  text-align: left;
  justify-content: center;
  border-radius: 8px;
  width: calc(100% - 16px);
}
.dropdown .dropdown-menu .dropdown-content a.dropdown-line:hover,
.dropdown .dropdown-menu .dropdown-content button.dropdown-line:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.dropdown .dropdown-menu .dropdown-content hr.dropdown-line-spacer-hack {
  height: 0;
  visibility: hidden;
}

/* ==========================================================================
2. Actions - Small
========================================================================== */
.dropdown .dropdown-menu.dropdown-small {
  left: calc(100% - 24px);
  min-width: 48px;
  /* Styles the dropdown container*/
}
.dropdown .dropdown-menu.dropdown-small .dropdown-content {
  overflow: hidden;
  /* Styles each line */
}
.dropdown .dropdown-menu.dropdown-small .dropdown-content a.dropdown-line {
  margin: 0;
}
.dropdown .dropdown-menu.dropdown-small .dropdown-content a.dropdown-line:hover {
  border-radius: 0;
}

/* ==========================================================================
3. Navigation — Single Row
========================================================================== */
.dropdown.dropdown-navigation {
  /* When details is open, keep the highlight on it */
}
.dropdown.dropdown-navigation .dropdown-trigger {
  padding: 12px 16px;
  border-radius: 12px;
}
.dropdown.dropdown-navigation .dropdown-trigger:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.dropdown.dropdown-navigation .dropdown-trigger .btn-iconxsm {
  width: 8px;
  height: 8px;
  position: relative;
  top: 2px;
}
.dropdown.dropdown-navigation .dropdown-trigger .btn-iconxsm:hover {
  background-color: unset;
}
.dropdown.dropdown-navigation details[open] .dropdown-trigger {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.dropdown.dropdown-navigation details[open] .dropdown-trigger .btn-iconxsm {
  background-color: unset;
}

/* ==========================================================================
4. Navigation — Subtitles
========================================================================== */
.dropdown .dropdown-line .dropdown-subtitle {
  display: block;
  min-width: 100%;
  font-size: 0.875rem;
  margin-top: 8px;
}

/* ==========================================================================
5. Navigation — Sections
========================================================================== */
.dropdown .dropdown-content hr.dropdown-line {
  border: none;
  border-top: 1px solid #D7D7D7;
  padding: none;
  margin: 0 16px;
}

/* ==========================================================================
6. Navigation — Split
========================================================================== */
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable {
  min-width: 248px;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable:hover {
  background-color: #F7F7F7;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable:hover .dropdown-submenu {
  display: flex;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable:first-child {
  border-radius: 12px 0 0 0;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable:last-child {
  border-radius: 0 0 0 12px;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable p.dropdown-line {
  margin: 0;
  padding: 20px 24px;
  display: flex;
  justify-items: left;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable p.dropdown-line .text {
  flex-grow: 1;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable p.dropdown-line .icon {
  flex-grow: 0;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable p.dropdown-line .icon svg {
  max-width: 8px;
  max-height: 8px;
  rotate: 270deg;
}
.dropdown .dropdown-menu .dropdown-content .dropdown-expandable .dropdown-submenu {
  position: absolute;
  left: calc(100% - 12px);
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  background-color: #F7F7F7;
  border-top: 1px solid #14161E;
  border-right: 1px solid #14161E;
  border-bottom: 1px solid #14161E;
  border-radius: 0 12px 12px 0;
}

/* ==========================================================================
8. Tabs (Content)
========================================================================== */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tabs li {
  display: block;
  font-size: 1rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 10px;
}
.tabs li a:not(.btn-icon, .dropdown) {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}
.tabs li a:not(.btn-icon, .dropdown):hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.tabs li.tabs-active {
  border-bottom-color: #CE3F00;
}
.tabs li.tabs-active a:not(.btn-icon, .dropdown) {
  color: #CE3F00;
  cursor: default;
  font-weight: 700;
}
.tabs li.tabs-active a:not(.btn-icon, .dropdown):hover {
  background-color: unset;
}
.tabs .dropdown-content li {
  border-bottom: unset;
  padding: unset;
}
.tabs-content {
  padding: 1.5rem;
}

/**
 *  Forms
 *
 * 1. Checkbox
 * 2. Radio
 * 3. Select
 * 4. Text Input
 * 5. Password Input
 * 6. Textarea
 * 7. Slider
 * 8. Toggle Button
 * 9. Switch
 *
 */
/* ==========================================================================
    0. Common
   ========================================================================== */
/* Adding this as a div wrapper makes sure that different input elements are spaced correctly */
.control:nth-child(n+1) {
  margin-bottom: 24px;
}

/* This does sizing and spacing for input types where label is above the input field */
.input-label {
  margin-left: 8px;
  display: block;
  line-height: 1;
  padding-bottom: 16px;
}
.input-label .input-error {
  display: block;
  margin-top: 8px;
  color: #962224;
  font-size: 0.875rem;
}
.input-label .form-validation-error {
  display: none;
}

/* ==========================================================================
    1. Checkbox
   ========================================================================== */
.checkbox {
  display: block;
  position: relative;
  cursor: pointer;
  padding-left: 34px;
  /* On mouse-over, change  background color */
  /* On tab focus, change border */
  /* Show the checkmark when checked */
}
.checkbox:nth-child(n+2) {
  margin-top: 16px;
}
.checkbox .checkbox-tick {
  position: absolute;
  height: 24px;
  width: 24px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 8px;
  left: 0;
  /* Style the checkmark/indicator */
}
.checkbox .checkbox-tick svg {
  display: none;
  position: absolute;
  top: 7px;
  left: 5.5px;
  fill: #FFFFFF;
  width: 10px;
  height: 8.33px;
}
.checkbox:hover input ~ .checkbox-tick {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.checkbox:focus input ~ .checkbox-tick {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.checkbox input:checked ~ span.checkbox-tick {
  background-color: #14161E;
}
.checkbox input:checked ~ span.checkbox-tick svg {
  display: block;
}

/* ==========================================================================
    2. Radio
========================================================================== */
.radio {
  display: block;
  position: relative;
  cursor: pointer;
  padding-left: 34px;
  /* Radio input container looks like this */
  /* On mouse-over, change  background color */
  /* On tab focus, change border */
  /* Show the checkmark when checked */
}
.radio:nth-child(n+1) {
  margin-bottom: 16px;
}
.radio .radio-tick {
  position: absolute;
  height: 24px;
  width: 24px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 50%;
  left: 0;
  /* The dot looks like this */
}
.radio .radio-tick:after {
  content: "";
  position: absolute;
  display: none;
  top: -1px;
  left: -1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 10px solid #14161E;
  background: #FFFFFF;
}
.radio:hover input ~ .radio-tick {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.radio:focus input ~ .radio-tick {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.radio input:checked ~ .radio-tick {
  background-color: #FFFFFF;
}
.radio input:checked ~ .radio-tick:after {
  display: block;
}

/* ==========================================================================
    3. Select
========================================================================== */
.select {
  position: relative;
  /* Add the focus states too, They matter, always! */
}
.select-wrapper {
  position: relative;
}
.select.disabled select.select-native,
.select.disabled .select-custom .select-custom-trigger {
  background-color: rgba(215, 215, 215, 0.4980392157);
  cursor: not-allowed;
  pointer-events: none;
}
.select select.select-native,
.select .select-custom {
  position: relative;
  min-width: 396px;
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #14161E;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-size: 8px;
  background-position: right 23px top 55%;
  font-size: 1rem;
  line-height: 1rem;
}
.select .select-custom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
@media (hover: hover) {
  .select .select-custom {
    display: block;
  }
  .select select.select-native:focus + .select-custom {
    display: none;
  }
}
.select select.select-native:focus,
.select .select-custom.active {
  outline: none;
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.select select.select-native,
.select .select-custom-trigger {
  background: url(/assets/murakami/sprites/kodeco-icons/show-57181d277f9d2301077b58ad77dbee34b9a662556925edcce0b2c4670414c055.svg);
  background-repeat: no-repeat;
  background-size: 8px;
  background-position: right 23px top 55%;
  padding: 16px;
  padding-right: 24px;
}
.select .select-custom-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: inherit;
  cursor: pointer;
  border-radius: 12px;
}
.select .select-custom-trigger:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.select .select-custom.active .select-custom-trigger:hover {
  background-color: inherit;
}
.select .select-custom.active .select-custom-options {
  display: block;
  animation: scale-down 150ms ease-in-out forwards;
  transform-origin: top;
}
.select .select-custom-options {
  position: absolute;
  top: 56px;
  left: 0;
  width: 100%;
  border: 1px solid #14161E;
  border-radius: 12px;
  background-color: inherit;
  z-index: 1;
  display: none;
}
.select .select-custom-options .select-custom-option {
  position: relative;
  padding: 16px;
  margin: 8px;
  border-radius: 12px;
}
.select .select-custom-options .select-custom-option:hover,
.select .select-custom-options .select-custom-option .hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
  cursor: pointer;
}

/* ==========================================================================
    4. Text Input
========================================================================== */
.with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.with-icon svg.label {
  display: block;
  max-height: 16px;
  max-width: 16px;
}

.text-input {
  display: block;
  padding: 0 16px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  height: 48px;
}
.text-input:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.text-input:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.text-input:invalid {
  border-color: #E34A4C;
}
.text-input:disabled {
  color: #8C8C8C;
  background-color: rgba(215, 215, 215, 0.4980392157);
  border-color: #D7D7D7;
}

/* ==========================================================================
    5. Password Input
========================================================================== */
.input-icon {
  display: flex;
  position: relative;
  /* This currently only works if you swap the icon before the input.. Probs to do with paddings and stuff */
}
.input-icon .input-right {
  position: absolute;
  top: 4px;
  right: 8px;
}
.input-icon .input-left {
  position: absolute;
  top: 4px;
  left: 8px;
}

/* ==========================================================================
    6. Textarea
========================================================================== */
.text-area {
  display: block;
  padding: 0 16px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  min-height: 96px;
  width: 100%;
  padding: 16px;
  resize: none;
  outline: none;
  line-height: 1.5;
}
.text-area:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.text-area:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.text-area:invalid {
  border-color: #E34A4C;
}
.text-area:disabled {
  color: #8C8C8C;
  background-color: rgba(215, 215, 215, 0.4980392157);
  border-color: #D7D7D7;
}

/* ==========================================================================
  7. Slider
========================================================================== */
.range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1px;
  background: #FF5A00;
  align-self: center;
  cursor: pointer;
}

/* ==========================================================================
  7.a Slider Cross browser range track styles
========================================================================== */
.range::-webkit-slider-runnable-track {
  background: #FF5A00;
  height: 1px;
}
.range:focus::-webkit-slider-runnable-track {
  background: #FF5A00;
  height: 1px;
  box-shadow: none;
  outline: none;
  border: none;
}
.range::-moz-range-track {
  background: #FF5A00;
  height: 1px;
}
.range::-ms-track {
  background: #FF5A00;
  height: 1px;
}

/* ==========================================================================
  7.b Slider Cross browser range thumb styles
========================================================================== */
.range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: #FF5A00;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 0px 4px #ffdecc;
  border-radius: 50%;
  cursor: pointer;
}
.range::-moz-range-thumb {
  appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: #FF5A00;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 0px 4px #ffdecc;
  border-radius: 50%;
  cursor: pointer;
}
.range::-ms-thumb {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: #FF5A00;
  border-radius: 100%;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 0px 4px #ffdecc;
  cursor: pointer;
}

/* ==========================================================================
  8. Toggle button
========================================================================== */
.toggle-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  padding: 16px;
  background-color: #FFFFFF;
  border-radius: 12px;
  cursor: pointer;
  z-index: 0;
}
.toggle-button:nth-child(n+1) {
  margin-bottom: 16px;
}
.toggle-button__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  cursor: pointer;
}
.toggle-button__label :nth-child(2) {
  flex-basis: calc(100% - 48px);
}
.toggle-button__label :nth-child(3) {
  flex-basis: 100%;
  margin-left: 48px;
}
.toggle-button__icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
  background-color: rgba(215, 215, 215, 0.5);
  position: relative;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 0.875rem;
  text-align: center;
}
.toggle-button__icon::after {
  content: attr(data-value);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.toggle-button__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  z-index: 1;
}
.toggle-button__input:checked {
  border-color: #FF5A00;
}
.toggle-button__input:checked + .toggle-button__label .toggle-button__icon {
  border-radius: 50%;
  background-color: #FF5A00;
}
.toggle-button__input:checked + .toggle-button__label .toggle-button__icon::after {
  content: "";
  mask-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  -webkit-mask-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  background: #FFFFFF;
}
.toggle-button__input.correct {
  border-color: #00B87E;
}
.toggle-button__input.correct + .toggle-button__label .toggle-button__icon {
  border-radius: 50%;
  background-color: #00B87E;
}
.toggle-button__input.correct + .toggle-button__label .toggle-button__icon::after {
  content: "";
  mask-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  -webkit-mask-image: url(/assets/murakami/sprites/kodeco-icons/checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  background: #FFFFFF;
}
.toggle-button__input.incorrect {
  border-color: #E34A4C;
}
.toggle-button__input.incorrect + .toggle-button__label .toggle-button__icon {
  border-radius: 50%;
  background-color: #E34A4C;
}
.toggle-button__input.incorrect + .toggle-button__label .toggle-button__icon::after {
  content: "";
  mask-image: url(/assets/murakami/sprites/kodeco-icons/cross-close-78def72d27e4b70333f8a700ac8f084f60bbb829d3580c78ac39f12af44839b8.svg);
  -webkit-mask-image: url(/assets/murakami/sprites/kodeco-icons/cross-close-78def72d27e4b70333f8a700ac8f084f60bbb829d3580c78ac39f12af44839b8.svg);
  background: #FFFFFF;
}
.toggle-button__input:disabled {
  color: #8C8C8C;
  background-color: rgba(215, 215, 215, 0.4980392157);
  border-color: #D7D7D7;
}

/* ==========================================================================
  9. Switch
========================================================================== */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #14161E;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
  border-radius: 24px;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: #FFFFFF;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: #FF5A00;
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  transition: transform 0.4s;
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px #FF5A00;
}
.switch .slider.round {
  border-radius: 24px;
}
.switch .slider.round:before {
  border-radius: 50%;
}

.error {
  display: flex;
  align-self: center;
  background: #F7F7F7;
  padding: 20px;
}
@media screen and (min-width: 1024px) {
  .error {
    max-width: 60rem;
    margin: 230px auto;
  }
}
@media screen and (max-width: 767px) {
  .error {
    display: grid;
    margin: 110px auto;
    text-align: center;
  }
  .error.error-mobile {
    flex-direction: column;
    max-width: 375px;
    padding: 20px;
  }
  .error .error-artwork-mobile {
    margin-top: 30px;
  }
  .error .error-artwork-mobile img {
    display: block;
    width: 100%;
    max-width: 160px;
  }
  .error .error-info .btn-largew {
    align-self: center;
  }
}
.error .error-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 30px;
}
.error .error-info.error-info-mobile {
  align-items: center;
  margin: 40px 0px;
}
.error .error-info.error-info-mobile h1 {
  font-size: 5rem;
  line-height: 80px;
}
.error .error-info.error-info-mobile p {
  font-size: 1rem;
  line-height: 24px;
  text-align: center;
}
.error .error-info h1 {
  font-size: 10rem;
  color: #14161E;
}
.error .error-info p {
  font-size: 1.125rem;
  line-height: 27px;
  margin-top: 16px;
}
.error .error-info .btn-largew {
  max-width: none;
  margin-top: 24px;
}

/*
 * Notifications are pills or banners with a cross to dismiss
 *
 * 1. Base
 * 2. Top banner
 * 3. Toast
 *
 */
/* ==========================================================================
    1. Base
   ========================================================================== */
.notification {
  background: #14161E;
  border-radius: 16px;
  padding: 12px 24px;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notification p {
  color: #FFFFFF;
}
.notification a {
  color: #FFFFFF;
  text-decoration: underline;
}
.notification .notification--delete {
  display: flex;
  justify-content: center;
  position: relative;
  right: -8px;
  min-width: 32px;
}
.notification .notification--delete:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.notification .notification--delete svg {
  width: 10px;
  height: 10px;
  max-width: 10px;
  max-height: 10px;
  fill: #FFFFFF;
}

.notification + .notification {
  margin-top: 20px;
}

/* ==========================================================================
    2. Top banner
   ========================================================================== */
.notification.notification-banner {
  border-radius: 0;
}
.notification.notification-banner p {
  flex-grow: 1;
  text-align: center;
}

/* ==========================================================================
    3. Toast
   ========================================================================== */
.notification.toast {
  position: fixed;
  width: calc(100% - 48px);
  max-width: 1680px;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 999999;
  margin-left: auto;
  margin-right: auto;
}

/*
 * HTML lists allow web developers to group a set of related items in lists.
 *
 * 1. Ordered List
 *
 * 2. Episodes/Chapters List
 *
 */
/* ==========================================================================
    1. Ordered List
   ========================================================================== */
.ol-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: ol-counter;
}
.ol-list li {
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
  counter-increment: ol-counter;
  padding-top: 16px;
  max-width: 622px;
}
.ol-list li::before {
  content: counter(ol-counter);
  position: absolute;
  left: -2.5em;
  top: 1.3em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  border: 1px solid #000;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  margin-right: 0.5em;
}

/* ==========================================================================
    2. Episodes/Chapters List
   ========================================================================== */
.section-list .section-list-header--wrapper {
  display: flex;
  align-items: flex-start;
  padding: 24px 0;
}
.section-list .section-list-header--wrapper .section-list-header {
  flex-grow: 1;
}
.section-list .section-list-header--wrapper .section-list-header h4 {
  font-size: 1.25rem;
  line-height: 1.25;
}
.section-list .section-list-header--wrapper .section-list-header p {
  font-size: 0.875rem;
  padding-top: 4px;
}
.section-list ul.content-list {
  display: none;
  list-style: none;
  margin: 0;
}
.section-list ul.content-list li {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.section-list ul.content-list li::before {
  content: none;
}
.section-list ul.content-list li .content-list--icon {
  flex-grow: 0;
  flex-shrink: 0;
  padding-top: 4px;
  display: flex;
  justify-items: flex-start;
}
.section-list ul.content-list li .content-list--icon svg {
  max-width: 20px;
  max-height: 20px;
}
.section-list ul.content-list li .content-list--icon .content-list--icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  border: 2px solid #14161E;
  border-radius: 10px;
}
.section-list ul.content-list li .content-list--icon .content-list--icon-circle svg {
  display: none;
  max-width: 10px;
  max-height: 10px;
  fill: #FFFFFF;
}
.section-list ul.content-list li .content-list--icon .content-list--icon-dot {
  width: 4px;
  height: 4px;
  background-color: #14161E;
  border-radius: 2px;
}
.section-list ul.content-list li.content-list--completed .content-list--icon-circle {
  background-color: #00B87E;
  border: none;
}
.section-list ul.content-list li.content-list--completed .content-list--icon-circle svg {
  display: block;
}
.section-list ul.content-list li a.content-list--title {
  flex-grow: 1;
  flex-shrink: 1;
  text-decoration: none;
}
.section-list ul.content-list li a.content-list--title:hover {
  text-decoration: underline;
}
.section-list ul.content-list li .content-list--duration {
  flex-grow: 0;
  flex-shrink: 0;
}
.section-list .content-list.c-video-player__lesson-list--open {
  display: block;
}
.section-list .section-list-header--wrapper .section-list-header--button .tooltip--show {
  display: flex;
}
.section-list .section-list-header--wrapper .section-list-header--button .tooltip--hide {
  display: none;
}
.section-list .section-list-header--wrapper .section-list-header--button svg {
  rotate: 180deg;
}
.section-list .section-list-header--wrapper .section-list-header--button.c-video-player__lessons-header--open .tooltip--show {
  display: none;
}
.section-list .section-list-header--wrapper .section-list-header--button.c-video-player__lessons-header--open .tooltip--hide {
  display: flex;
}
.section-list .section-list-header--wrapper .section-list-header--button.c-video-player__lessons-header--open svg {
  rotate: 0deg;
}

/* ==========================================================================
 Content Switcher
========================================================================== */
.content-switcher {
  display: flex;
  align-items: center;
  min-height: 80px;
  width: 100%;
  overflow: hidden;
}
.content-switcher .btn-iconsm {
  display: flex;
  flex-shrink: 0;
}
.content-switcher .btn-iconsm svg {
  height: 8px;
}
.content-switcher .scroll-box {
  display: flex;
  padding: 16px 8px;
  margin-right: 8px;
  margin-left: 8px;
  scroll-behavior: smooth;
  column-gap: 8px;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.content-switcher .scroll-box::-webkit-scrollbar {
  display: none;
}
.content-switcher .scroll-box .btn-switch {
  background-color: #D7D7D7;
  color: #14161E;
}
.content-switcher .scroll-box .btn-switch.active {
  background-color: #14161E;
  color: #FFFFFF;
}

/**
*  Accordions
*
*
* Displays collapsible content panels for presenting information in a limited amount of space.
*
* 1. Elementary
* 2. Episodes/Chapters
*
*/
/* ==========================================================================
    1. Elementary
   ========================================================================== */
.accordion {
  position: relative;
  min-width: 330px;
}
.accordion details {
  width: 100%;
}
.accordion details summary {
  display: flex;
}
.accordion details[open] .accordion-trigger i .open {
  transform: rotate(180deg);
}
.accordion .accordion-trigger {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  width: 100%;
  padding: 16px 24px;
}
.accordion .accordion-trigger .trigger-text {
  padding-right: 24px;
}
.accordion .accordion-menu {
  align-items: flex-start;
  width: 100%;
  padding-left: 24px;
  display: block;
  padding-top: 8px;
  padding-bottom: 24px;
  box-sizing: border-box;
}

/* ==========================================================================
    2. Episodes/Chapters
   ======================================================================== */
.accordion-content {
  position: relative;
  min-width: 100%;
  border: 1px solid #14161E;
  border-radius: 8px;
}
.accordion-content details {
  width: 100%;
  /* This ensures that there is no dbl border at the bottom*/
  /* If it is open the arrow flips */
}
.accordion-content details:not(:last-child) {
  border-bottom: 1px solid #14161E;
}
.accordion-content details[open] .accordion-trigger .accordion-opener i .open {
  transform: rotate(180deg);
  max-width: 12px;
}
.accordion-content .accordion-trigger {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 16px 24px;
  /* Header is the text bits of the trigger */
  /* This is the "button" */
}
.accordion-content .accordion-trigger .accordion-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  background-color: #D7D7D7;
  border-radius: 8px;
  margin-right: 24px;
  font-size: 1.125rem;
}
.accordion-content .accordion-trigger .accordion-number svg {
  max-width: 24px;
  max-height: 24px;
}
.accordion-content .accordion-trigger .accordion-header {
  display: flex;
  flex-direction: column;
}
.accordion-content .accordion-trigger .accordion-header .accordion-title {
  font-size: 1.25rem;
  padding-right: 24px;
}
.accordion-content .accordion-trigger .accordion-header .accordion-subheader {
  font-size: 1rem;
}
.accordion-content .accordion-trigger .accordion-opener {
  margin-left: auto;
}
.accordion-content .accordion-trigger .accordion-opener svg {
  max-width: 12px;
}
.accordion-content .content-description {
  /* These are widths of "icons" + padding either side of it (if applicable) */
  padding-left: 104px;
  padding-right: 64px;
  padding-bottom: 24px;
}

/*
 * Icon prefixes allow icons followed by text in lines. Can be used as a link if needed
 *
 * 1. Base
 *
 */
/* ==========================================================================
   1. Base
  ========================================================================== */
.icon-prefix {
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon-prefix svg {
  max-width: 20px;
  max-height: 20px;
  margin-right: 12px;
}

.overlay-box {
  position: fixed;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  max-width: 396px;
  padding: 24px 24px 32px;
  border-radius: 16px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  bottom: 0;
  right: 0;
  margin: 24px;
}
@media screen and (max-width: 767px) {
  .overlay-box {
    margin: 12px;
  }
}
.overlay-box .btn-icon svg {
  max-width: 12px;
  max-height: 12px;
}
.overlay-box .overlay-box-title {
  font-size: 1.5rem;
  min-height: 64px;
  padding-top: 22px;
}
.overlay-box p {
  font-size: 1rem;
  margin-top: 16px;
}
.overlay-box .overlay-box-action {
  margin-top: 32px;
  display: flex;
  max-width: 100% !important;
  justify-content: center;
}

.message {
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid #14161E;
  padding: 20px 24px;
  font-size: 16px;
  line-height: 1.5;
}
.message a {
  text-decoration: underline;
}

/**
 * This file contains the map between domains and their colours
 *
 *
 */
/**
 * drapers
 *
 * Floating card drapers containing title, paragraph, graphic and link
 *
 * 1. Admin drapers
 *
 * 2. Custom layout classes
 *
 * 3. Banner draper - Base component for common drapers
 *
 * 4. Banner draper - Pillar variations
 *
 * 5. Banner draper - User variations (create account, newsletter)
 *
 * 6. Related - Products at the end of tutorials
 *
 * 7. Bottom Sticky - A banner that's fixed to bottom of the page
 *
 * 8. Pricing cards
 *
 * 9. Single Line Banner
 *
 * 10. Sales promotions
 *
 */
/* ==========================================================================
  1. Base
 ========================================================================== */
.banner {
  border: 1px solid #14161E;
  padding: 19px 24px;
  background-color: #FF8847;
  border-radius: 16px;
}

.banner.content-top {
  display: block;
  margin-top: 40px;
  margin-bottom: -40px;
}

.banner.bg-transparent {
  background-color: transparent !important;
}

/* ==========================================================================
  5. Banner draper - Base component for common drapers
========================================================================== */
.banner-draper {
  align-items: center;
  position: relative;
  width: 100%;
  height: 640px;
  overflow: hidden;
  margin: 144px 0;
  z-index: 0;
}
.banner-draper.banner {
  display: flex;
  border: none;
}
.banner-draper:before {
  animation: a-triad 1s;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 320px;
  height: 824px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(/assets/murakami/backgrounds/advert-hero-left.svg);
  background-size: contain;
  background-position-x: 0px;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 1379px) {
  .banner-draper:before {
    display: none;
  }
}
.banner-draper:after {
  animation: a-triad 1s;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 320px;
  height: 824px;
  position: absolute;
  top: 0px;
  right: 0px;
  background-image: url(/assets/murakami/backgrounds/advert-hero-right.svg);
  background-size: contain;
  background-position-x: 0px;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 1379px) {
  .banner-draper:after {
    display: none;
  }
}
@media screen and (max-width: 1379px) {
  .banner-draper {
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 767px) {
  .banner-draper h2 + p {
    text-align: left;
  }
}
.banner-draper__wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 384px;
  max-width: 792px;
  margin: 0 auto;
  padding: 0 24px;
}
@media screen and (max-width: 1379px) {
  .banner-draper__wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .banner-draper__wrapper {
    padding: 0 16px;
  }
}
.banner-draper__wrapper .banner-draper__headline {
  width: 100%;
  font-size: 3.5rem;
  line-height: 4.375rem;
  text-align: center;
}
.banner-draper__wrapper .banner-draper__description {
  max-width: 592px;
  font-size: 1.25rem;
  line-height: 1.875rem;
  text-align: center;
  white-space: pre-line;
  margin: 24px auto 32px auto;
}
.banner-draper__wrapper .banner-draper__description.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
 7. Bottom banner
 ========================================================================== */
.banner-draper-sticky {
  background: #FF8847;
  width: 80%;
  margin: 0 10%;
  z-index: 99;
  box-shadow: unset;
  border: 1px solid #14161E;
  border-radius: 16px;
}

.banner-draper-sticky--obfuscate .obfuscated-text {
  background: #14161E;
  color: #FFFFFF;
}

/**
 * Cards
 *
 * 1. Variables
 * 2. Size mixin
 * 3. Base
 * 4. Domains
 * 5. Typography
 * 6. Actions
 * 7. Content + Locked
 * 8. Minimal Card
 *
 */
/* ==========================================================================
     1. Variables
    ========================================================================== */
/* ==========================================================================
     2. Mixin
    ========================================================================== */
/* ==========================================================================
     3. Base
    ========================================================================== */
.card {
  grid-template-columns: 1fr 112px;
  grid-template-rows: 112px 1fr;
  display: grid;
  height: 100%;
}
.card .card-topright::before {
  width: 96px;
  height: 16px;
}
.card .card-topright .card-artwork {
  width: 96px;
  height: 96px;
}
.card > div {
  padding: 24px;
  background-color: #FFFFFF;
}
.card .card-topleft {
  border: 1px #14161E;
  border-style: solid solid none solid;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.card .card-topright {
  background: none;
  position: relative;
  /* This pseudo element creates the internal curved corner for the cut-out. It creates an
    absolutely positioned element, with the correct border radius, and strokes the border.
    To fill in the missing "background" it uses box shadow to fill in the gap. It is placed
    above the pseudo element added below */
}
.card .card-topright::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  border-radius: 0 0 0 16px;
  border: 1px #14161E;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #FFFFFF;
  z-index: 3;
}
.card .card-topright .card-artwork {
  border-radius: 16px;
  position: absolute;
  right: 0;
  top: 0;
  /* Display */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card .card-topright .card-artwork > img {
  max-width: 60px;
  max-height: 60px;
}
.card .card-bottom {
  grid-column-start: 1;
  grid-column-end: 3;
  position: relative;
  border: 1px #14161E;
  border-style: none solid solid solid;
  border-radius: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
}
.card .card-bottom::before {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 17px;
  height: 16px;
  border-radius: 0 16px 0 0;
  border: 1px #14161E;
  border-style: solid solid none none;
}

.card-artwork-56 {
  grid-template-columns: 1fr 72px;
  grid-template-rows: 72px 1fr;
}
.card-artwork-56 .card-topright::before {
  width: 56px;
  height: 16px;
}
.card-artwork-56 .card-topright .card-artwork {
  width: 56px;
  height: 56px;
}

/* ==========================================================================
     3. Domains
    ========================================================================== */
.card .card-topright .card-artwork-android {
  background-color: rgba(0, 184, 126, 0.2);
}
.card .card-topright .card-artwork-flutter {
  background-color: rgba(46, 164, 221, 0.2);
}
.card .card-topright .card-artwork-gametech {
  background-color: rgba(180, 78, 191, 0.2);
}
.card .card-topright .card-artwork-ios {
  background-color: rgba(135, 99, 210, 0.2);
}
.card .card-topright .card-artwork-server-side-swift {
  background-color: rgba(242, 111, 170, 0.2);
}
.card .card-topright .card-artwork-multi-domain {
  background-color: rgba(172, 159, 171, 0.2);
}
.card .card-topright .card-artwork-pro-gro {
  background-color: rgba(227, 169, 61, 0.2);
}
.card .card-topright .card-artwork-learning-path {
  background-color: rgba(89, 124, 238, 0.2);
}
.card .card-topright .card-artwork-article {
  background-color: rgba(21, 120, 87, 0.2);
}
.card .card-topright .card-artwork-video-course {
  background-color: rgba(227, 74, 76, 0.2);
}
.card .card-topright .card-artwork-book {
  background-color: rgba(255, 136, 71, 0.2);
}

/* ==========================================================================
     4. Typography
    ========================================================================== */
.card .card-bottom .card-title {
  font-size: 1.5rem;
  display: block;
  margin-bottom: auto;
  line-height: 1.25;
}
.card .card-bottom .card-metadata {
  font-size: 1rem;
  margin-top: 16px;
  display: flex;
  align-items: center;
  column-gap: 8px;
  line-height: 20px;
}
.card .card-bottom .card-metadata svg {
  max-width: 20px;
  max-height: 20px;
}
.card .card-bottom .card-metadata span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .card-bottom .card-description {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 16px;
}
.card .card-bottom .card-description .card-text {
  font-size: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
     4. Actions
    ========================================================================== */
.card .card-bottom .card-description {
  display: flex;
  align-items: center;
  column-gap: 16px;
  align-items: flex-end;
}
.card .card-bottom .card-description .card-text {
  flex-grow: 1;
}
.card .card-bottom .card-description .progress-control {
  flex-grow: 1;
}
.card .card-bottom .card-description .progress-control .dropdown .dropdown-menu .dropdown-line {
  white-space: nowrap;
}

/* ==========================================================================
     7. Content + Locked
    ========================================================================== */
.card.obscure-banner {
  grid-template-columns: 1fr 72px;
  grid-template-rows: 72px 1fr;
  background: inherit;
  padding: unset;
  border: unset;
  border-radius: unset;
}
.card.obscure-banner .obfuscated-text {
  background: #14161E;
  color: #FFFFFF;
  display: inline-block;
  padding: 0 10px;
  text-align: center;
}
.card.obscure-banner .card-topleft {
  display: flex;
  background-color: #FF8847;
}
@media screen and (min-width: 1024px) {
  .card.obscure-banner .card-topleft {
    padding-bottom: 0;
  }
}
.card.obscure-banner .card-topright::before {
  box-shadow: -4px 4px 0 4px #FF8847;
  width: 56px;
}
.card.obscure-banner .card-topright .card-artwork {
  width: 56px;
  height: 56px;
}
.card.obscure-banner .card-topright .card-artwork > svg {
  width: 16px;
  fill: #FFFFFF;
}
.card.obscure-banner .card-bottom {
  background-color: #FF8847;
}
@media screen and (min-width: 1024px) {
  .card.obscure-banner .card-bottom {
    padding-top: 0;
  }
}
@media screen and (min-width: 1024px) {
  .card.obscure-banner .card-bottom > P {
    padding-right: 43px;
  }
}
.card.obscure-banner .card-bottom .card-description .btn-normalw {
  color: #FFFFFF;
}
.card.obscure-banner p {
  font-size: 1rem;
  line-height: 1.5rem;
  padding: unset;
  margin: unset;
}

/* ==========================================================================
     8. Minimal Card
    ========================================================================== */
.card-minimal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  padding: 24px;
  width: 100%;
}
.card-minimal .card-title {
  font-size: 1.25rem;
  margin: 24px 0;
}

/* ==========================================================================
     9. Card Glow
    ========================================================================== */
.card-glow {
  position: relative;
}
.card-glow:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 90, 0, 0.2);
  filter: blur(100px);
  opacity: 0;
  transition: opacity 0.25s;
}
.card-glow .card-topleft .tooltip {
  z-index: 2;
}
.card-glow .card-topright img {
  transition: transform 0.3s;
}
.card-glow:hover .card-topright img {
  transform: scale(1.1);
}
.card-glow:hover:before {
  opacity: 1;
}

/**
 * Code blocks
 *
 * 1. Formatting
 * 2. Buttons
 * 3. highlight.js theme
 *
 */
/* ==========================================================================
    1. Formatting
   ========================================================================== */
code {
  font-family: "Relative Mono";
  font-variant-ligatures: no-contextual;
}

pre {
  background: #14161E;
  color: #D7D7D7;
  border-radius: 1rem;
  padding: 24px;
  font-size: 0.8125rem;
  position: relative;
  font-family: "Relative Mono", monospace;
  font-variant-ligatures: no-contextual;
}

/* ==========================================================================
    2. Buttons
   ========================================================================== */
.code-button-copy {
  font-family: "Relative";
  position: absolute;
  top: 16px;
  cursor: pointer;
  right: 52px;
}
.code-button-copy button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: none;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  filter: invert(100%);
}
.code-button-copy button:hover {
  background-color: rgba(40, 40, 40, 0.5);
}
.code-button-copy button {
  background-image: url(/assets/murakami/sprites/kodeco-icons/clipboard-367acaf8e11750ae2bbabb6c97f1ddc40b84cf868e7b51585e5152ef1e266886.svg);
}

.code-button-theme {
  font-family: "Relative";
  position: absolute;
  top: 16px;
  cursor: pointer;
  right: 16px;
}
.code-button-theme button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: none;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  filter: invert(100%);
}
.code-button-theme button:hover {
  background-color: rgba(40, 40, 40, 0.5);
}
.code-button-theme button {
  background-image: url(/assets/murakami/sprites/kodeco-icons/colour-split-circle-1bd74aee86fe4b325634dcfe60a969709080512b65a1fdc7a6cbf547bb46bbe6.svg);
}

/* ==========================================================================
    3. highlight.js theme
   ========================================================================== */
pre code.hljs,
pre.hljs {
  display: block;
  overflow-x: auto;
  padding: 24px;
  background: #14161E;
  color: #D7D7D7;
  font-family: "Relative Mono", monospace;
  font-variant-ligatures: no-contextual;
}

/* end baseline CSS */
/* Bright Version (default) */
.hljs {
  background: #14161E;
  color: #D7D7D7;
  font-family: "Relative Mono", monospace;
}

.hljs-comment {
  color: #999999;
  font-family: "Relative Mono", monospace;
}

.hljs-tag,
.hljs-punctuation,
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr,
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name {
  color: #CC99CD;
  font-family: "Relative Mono", monospace;
}

.hljs-formula,
.hljs-attr,
.hljs-property,
.hljs-params,
.hljs-type,
.hljs-number,
.hljs-selector-id,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
  color: #F08D49;
  font-family: "Relative Mono", monospace;
}

.hljs-string,
.hljs-bullet,
.hljs-addition {
  color: #7EC699;
  font-family: "Relative Mono", monospace;
}

.hljs-selector-class,
.hljs-title,
.hljs-section {
  color: #F8C555;
  font-family: "Relative Mono", monospace;
}
.hljs-selector-class.function_,
.hljs-title.function_,
.hljs-section.function_ {
  color: #70A2FF;
  font-family: "Relative Mono", monospace;
}

.hljs-subst,
.hljs-regexp,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo {
  color: #F64E1A;
  font-family: "Relative Mono", monospace;
}

/* Language color: hue: 90; */
.hljs-literal,
.hljs-symbol {
  color: #18B5AB;
  font-family: "Relative Mono", monospace;
}

.hljs-built_in,
.hljs-code {
  color: #FFFFFF;
  font-family: "Relative Mono", monospace;
}

/* Meta color: hue: 200 */
.hljs-meta {
  color: #18B5AB;
  font-family: "Relative Mono", monospace;
}

.hljs-meta .hljs-string {
  color: #38a;
  font-family: "Relative Mono", monospace;
}

/* Misc effects */
.hljs-emphasis {
  font-style: italic;
  font-family: "Relative Mono", monospace;
}

.hljs-strong {
  font-weight: bold;
  font-family: "Relative Mono", monospace;
}

/* Pastel Version */
.pastel-code {
  /* Language color: hue: 90; */
  /* Meta color: hue: 200 */
  /* Misc effects */
}
.pastel-code .hljs {
  background: #14161E;
  color: #D7D7D7;
}
.pastel-code .hljs-comment {
  color: #9FA4B1;
}
.pastel-code .hljs-tag,
.pastel-code .hljs-punctuation,
.pastel-code .hljs-tag .hljs-name,
.pastel-code .hljs-tag .hljs-attr,
.pastel-code .hljs-keyword,
.pastel-code .hljs-attribute,
.pastel-code .hljs-selector-tag,
.pastel-code .hljs-meta .hljs-keyword,
.pastel-code .hljs-doctag,
.pastel-code .hljs-name {
  color: #C192C1;
}
.pastel-code .hljs-formula,
.pastel-code .hljs-attr,
.pastel-code .hljs-property,
.pastel-code .hljs-params,
.pastel-code .hljs-type,
.pastel-code .hljs-number,
.pastel-code .hljs-selector-id,
.pastel-code .hljs-quote,
.pastel-code .hljs-template-tag,
.pastel-code .hljs-deletion {
  color: #F5AB57;
}
.pastel-code .hljs-string,
.pastel-code .hljs-bullet,
.pastel-code .hljs-addition {
  color: #86AD85;
}
.pastel-code .hljs-selector-class,
.pastel-code .hljs-title,
.pastel-code .hljs-section {
  color: #F8C555;
}
.pastel-code .hljs-selector-class.function_,
.pastel-code .hljs-title.function_,
.pastel-code .hljs-section.function_ {
  color: #6293C3;
}
.pastel-code .hljs-subst,
.pastel-code .hljs-regexp,
.pastel-code .hljs-variable,
.pastel-code .hljs-template-variable,
.pastel-code .hljs-link,
.pastel-code .hljs-selector-attr,
.pastel-code .hljs-operator,
.pastel-code .hljs-selector-pseudo {
  color: #F37957;
}
.pastel-code .hljs-literal,
.pastel-code .hljs-symbol {
  color: #5FB3B3;
}
.pastel-code .hljs-built_in,
.pastel-code .hljs-code {
  color: #397300;
}
.pastel-code .hljs-meta {
  color: #5FB3B3;
}
.pastel-code .hljs-meta .hljs-string {
  color: #38a;
}
.pastel-code .hljs-emphasis {
  font-style: italic;
}
.pastel-code .hljs-strong {
  font-weight: bold;
}

/* ==========================================================================
    1. Variables
   ========================================================================== */
/* ==========================================================================
    2. Styling
   ========================================================================== */
.footer {
  color: #FFFFFF;
  margin-top: 180px;
}
.footer .footer-top {
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: 1fr 160px;
}
@media screen and (max-width: 767px) {
  .footer .footer-top {
    display: none;
  }
}
.footer .footer-top .footer-top-logo {
  position: relative;
  grid-row-start: span 2;
  /* This pseudo element creates the internal curved corner for the cut-out. It creates an
  absolutely positioned element, with the correct border radius.
  To fill in the missing "background" it uses box shadow to fill in the gap */
}
.footer .footer-top .footer-top-logo svg {
  max-width: 120px;
  max-height: 120px;
  margin: 60px;
}
.footer .footer-top .footer-top-logo::before {
  content: "";
  width: 192px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #14161E;
}
.footer .footer-top .footer-top-left {
  background-color: #14161E;
  border-radius: 48px 48px 0 0;
}
.footer .footer-bottom {
  background-color: #14161E;
  border-radius: 0 48px 0 0;
  padding-bottom: 90px;
}
@media screen and (max-width: 767px) {
  .footer .footer-bottom {
    border-radius: 48px 48px 0 0;
  }
}
.footer .footer-bottom .columns {
  padding: 24px;
  max-width: 1584px;
  margin: 0 auto;
}
.footer .footer-bottom .columns .column {
  padding: 0;
}
.footer .footer-links-title {
  font-weight: 700;
  font-size: 1rem;
  padding-top: 32px;
  padding-bottom: 24px;
}
.footer ul.footer-links li {
  margin-bottom: 8px;
}
.footer .footer-link {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1rem;
}
.footer .footer-link:hover {
  text-decoration: underline;
}
.footer .footer-cta {
  padding-top: 120px;
}
@media screen and (max-width: 767px) {
  .footer .footer-cta {
    padding-top: 80px;
  }
}
.footer .footer-cta-header {
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 16px;
}
.footer .footer-cta-text {
  line-height: 1.5;
}
.footer .footer-cta-button {
  margin: 24px 0;
}
@media screen and (max-width: 767px) {
  .footer .footer-cta-button {
    margin-bottom: 80px;
  }
}
.footer .footer-icons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 32px;
}
.footer .footer-icons a.footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #FFFFFF;
  border-radius: 12px;
}
.footer .footer-icons a.footer-icon:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.footer .footer-icons svg {
  fill: #FFFFFF;
  max-width: 20px;
  max-height: 20px;
}

header.header {
  display: flex;
  min-height: 80px;
  background-color: #FFFFFF;
  padding: 0;
  position: relative;
  z-index: 9999999;
}
header.header .header-container {
  max-width: 1584px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto;
}
@media screen and (max-width: 1631px) {
  header.header .header-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 767px) {
  header.header .header-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
header.header .header-container.header-container-open .menu-toggle button > div > div:nth-of-type(1) {
  visibility: hidden;
}
header.header .header-container.header-container-open .menu-toggle button > div > div:nth-of-type(2) {
  transform: rotate(45deg);
}
header.header .header-container.header-container-open .menu-toggle button > div > div:nth-of-type(3) {
  transform: rotate(-45deg);
}
header.header .header-container.header-container-open .menu-toggle button > div > div:nth-of-type(4) {
  visibility: hidden;
}
header.header .header-container.header-container-open .header-left-menus {
  display: flex;
}
@media screen and (max-width: 859px) {
  header.header .search-mobile {
    display: inline-flex;
    position: absolute;
    right: 24px;
  }
}
header.header .menu-toggle {
  margin-right: 16px;
}
@media screen and (max-width: 859px) {
  header.header .menu-toggle {
    display: inline-flex;
  }
}
header.header .menu-toggle button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
header.header .menu-toggle button > div {
  width: 20px;
  height: 14px;
  position: relative;
}
header.header .menu-toggle button > div > div {
  width: 100%;
  height: 2px;
  background-color: #14161E;
  border-radius: 2px;
  transition: transform 0.2s;
}
header.header .menu-toggle button > div > div:nth-of-type(1) {
  position: absolute;
  top: 0;
}
header.header .menu-toggle button > div > div:nth-of-type(2) {
  position: absolute;
  top: 50%;
  margin-top: -1px;
}
header.header .menu-toggle button > div > div:nth-of-type(3) {
  position: absolute;
  top: 50%;
  margin-top: -1px;
}
header.header .menu-toggle button > div > div:nth-of-type(4) {
  position: absolute;
  bottom: 0;
}
header.header .header-left {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  gap: 4px;
}
header.header .header-left .header-left-menus {
  display: flex;
  column-gap: 4px;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus {
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    flex-direction: column;
    overflow-y: scroll;
    display: none;
  }
}
header.header .header-left .header-left-menus .header-left-mobile {
  display: none;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus .header-left-mobile {
    display: flex;
    align-items: center;
    padding: 0 24px;
    min-height: 80px;
  }
}
@media screen and (max-width: 767px) {
  header.header .header-left .header-left-menus .header-left-mobile {
    padding: 0 16px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus .header-left-mobile .header-logo {
    display: block;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav {
    position: relative;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 767px) {
  header.header .header-left .header-left-menus > nav {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav:last-of-type:before {
    display: none;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown > details > summary .dropdown-trigger {
    height: 48px;
    padding-left: 24px;
    width: calc(100% - 48px);
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown > details > summary .dropdown-trigger .btn-iconxsm {
    width: 10px;
    height: 10px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown > details > summary .dropdown-trigger svg {
    max-width: 10px;
    max-height: 10px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown > details > summary .trigger-text {
    font-size: 20px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown details[open] .dropdown-trigger {
    background-color: transparent;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-trigger {
    width: 100%;
    padding: 0;
    border-radius: 0;
    justify-content: space-between;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-trigger:hover {
    background-color: transparent;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu {
    position: relative;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 8px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content {
    border: 0;
    border-radius: 0;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable {
    position: relative;
    border-radius: 16px;
    padding-bottom: 8px;
    margin-top: 8px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    left: 16px;
    width: calc(100% - 32px);
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable > .dropdown-line {
    padding-bottom: 8px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable > .dropdown-line + .dropdown-submenu {
    border-radius: 16px;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios {
    background: #E7E0F6;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios:hover {
  background: #E7E0F6;
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios:hover .dropdown-submenu {
  background: #E7E0F6;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios .dropdown-submenu {
    background: #E7E0F6;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios .dropdown-submenu .dropdown-line:hover {
  background: rgba(135, 99, 210, 0.5);
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android {
    background: #CCF1E5;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android:hover {
  background: #CCF1E5;
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android:hover .dropdown-submenu {
  background: #CCF1E5;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android .dropdown-submenu {
    background: #CCF1E5;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android .dropdown-submenu .dropdown-line:hover {
  background: rgba(0, 184, 126, 0.5);
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter {
    background: #D5EDF8;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter:hover {
  background: #D5EDF8;
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter:hover .dropdown-submenu {
  background: #D5EDF8;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter .dropdown-submenu {
    background: #D5EDF8;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter .dropdown-submenu .dropdown-line:hover {
  background: rgba(46, 164, 221, 0.5);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line {
  position: relative;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line svg {
    transform: rotate(90deg);
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line:hover svg {
    transform: rotate(270deg);
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line:hover .dropdown-submenu {
    display: block;
  }
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-sss:hover {
  background: rgba(242, 111, 170, 0.5);
}
header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line.dropdown-line-gametech:hover {
  background: rgba(180, 78, 191, 0.5);
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line .text {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line .icon {
    display: none;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-submenu {
    position: relative;
    left: 0;
    border: 0;
    display: block;
  }
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-submenu a {
    display: block;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable-expanded .dropdown-submenu {
    display: block;
  }
  header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable-expanded svg {
    transform: rotate(270deg);
  }
}
@media screen and (max-width: 1379px) {
  header.header .header-left .header-domain-menu {
    display: none;
  }
}
header.header .header-left .header-left-sign-in {
  display: none;
  margin-top: 32px;
  flex-direction: column;
  row-gap: 16px;
  align-items: center;
}
header.header .header-left .header-left-sign-in a {
  width: fit-content;
}
@media screen and (max-width: 859px) {
  header.header .header-left .header-left-sign-in {
    display: flex;
  }
}
header.header .header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-left: 24px;
}
@media screen and (max-width: 767px) {
  header.header .header-right {
    margin-left: 0;
  }
}
@media screen and (max-width: 1319px) {
  header.header .header-right .search {
    display: none;
  }
}
header.header .header-right .search .search-small {
  min-width: 320px;
}
@media screen and (max-width: 1319px) {
  header.header .header-right .search .search-small {
    max-width: 240px;
    width: 100%;
    min-width: auto;
  }
}
@media screen and (max-width: 1319px) {
  header.header .header-right .search-touch {
    display: inline-block;
    margin-right: -8px;
  }
}
header.header .header-right .search-touch svg {
  max-width: 18px;
  max-height: 18px;
}
header.header .header-right .header-right-menus {
  display: flex;
  column-gap: 16px;
}
@media screen and (max-width: 979px) {
  header.header .header-right .header-right-menus > nav {
    margin-left: 8px;
  }
}
@media screen and (max-width: 349px) {
  header.header .header-right .header-right-menus > nav .dropdown-trigger .btn-iconxsm {
    display: none;
  }
}
header.header .header-right .header-right-menus > nav .dropdown .dropdown-line {
  position: relative;
}
header.header .header-right .header-right-menus > nav .dropdown .dropdown-line .badge {
  width: 48px;
  height: 24px;
  font-size: 10px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
header.header .header-right .header-right-menus .header-right-sign-in {
  display: flex;
  column-gap: 8px;
}
@media screen and (max-width: 859px) {
  header.header .header-right .header-right-menus .header-right-sign-in {
    display: none;
  }
}
header.header .header-right .header-right-menus .header-right-sign-in > a {
  white-space: nowrap;
}
@media screen and (max-width: 979px) {
  header.header .header-right .header-right-menus .bookmarks-link {
    display: none;
  }
}
header.header .header-right .header-right-menus .night-mode-switch {
  margin-left: 8px;
  margin-right: -8px;
}
@media screen and (max-width: 859px) {
  header.header .header-right .header-right-menus .night-mode-switch {
    margin-right: 0;
  }
}
@media screen and (max-width: 399px) {
  header.header .header-right .header-right-menus .night-mode-switch {
    margin-left: 0;
  }
}
@media screen and (max-width: 859px) {
  header.header .header-right .header-right-menus nav.user-menu {
    margin-left: 0;
  }
}
@media screen and (max-width: 399px) {
  header.header .header-right .header-right-menus nav.user-menu {
    margin-left: -8px;
  }
  header.header .header-right .header-right-menus nav.user-menu .dropdown-trigger {
    gap: 0;
  }
  header.header .header-right .header-right-menus nav.user-menu .btn-iconxsm {
    display: none;
  }
}
@media screen and (max-width: 359px) {
  header.header .header-right .header-right-menus nav.user-menu {
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 359px) {
  header.header .header-right .header-right-menus nav.user-menu .trigger-text img {
    width: 24px;
    height: 24px;
  }
}
header.header .header-logo {
  margin-right: 56px;
  flex-shrink: 0;
}
@media screen and (max-width: 1279px) {
  header.header .header-logo {
    margin-right: 24px;
  }
}
@media screen and (max-width: 767px) {
  header.header .header-logo {
    margin-right: 0;
  }
}
header.header .header-logo a {
  min-width: 115px;
}
header.header .header-logo svg {
  max-height: 24px;
  max-width: 115px;
}
header.header .header-logo .header-tagline {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  margin-top: 4px;
}
@media screen and (max-width: 1023px) {
  header.header .header-logo .header-tagline {
    display: none;
  }
}
header.header .btn-small {
  max-width: none;
}
header.header .dropdown-menu {
  min-width: 298px;
}

.notification-banner {
  z-index: 2;
}

.header-container-open {
  z-index: 1;
}
.header-container-open .header-logo {
  z-index: 1;
}
.header-container-open .header-right {
  z-index: 1;
}
.header-container-open .menu-toggle {
  z-index: 1;
}

/* ==========================================================================
  Minimal Header
========================================================================== */
.minimal-header .header-container .header-logo {
  margin-right: 0;
}

/**
* Hero image page header
*
* 1a. Base
*
* 1b. Pattern Variations
*
*/
/* ==========================================================================
1a. Base
========================================================================== */
.hero-page-header {
  width: 100%;
  height: 480px;
  background-color: #14161E;
  border-radius: 0 0 48px 0;
  position: relative;
  z-index: -1;
  overflow: hidden;
}
.hero-page-header:before {
  content: "";
  height: 240px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #F7F7F7;
  border-radius: 0 48px 0 0;
}
.hero-page-header video {
  position: absolute;
  width: 100%;
  z-index: -1;
}
.hero-page-header .hero-page-header-round-top {
  width: 240px;
  height: 240px;
  position: relative;
}
.hero-page-header .hero-page-header-round-top:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #F7F7F7;
}
.hero-page-header .hero-page-header-round-bottom {
  width: 240px;
  height: 240px;
  bottom: 0;
  left: 100%;
  position: relative;
}
.hero-page-header .hero-page-header-round-bottom:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #F7F7F7;
}

/* ==========================================================================
1b. Pattern Variations
========================================================================== */
.hero-page-header-yellow {
  background-image: url(/assets/murakami/kodeco-brand/hero-page-header-yellow@1.5x-a226a061de6efb99f4331ce9b5a9fe4e7b302fdc99017c0aa90eac39b6d72294.jpg);
  background-size: 100%;
}

.hero-page-header-purple {
  background-image: url(/assets/murakami/kodeco-brand/hero-page-header-purple@1.5x-2270d1e4cae0f1f24ae8ad76cb751e58d72bbb94eadb76e728638ed73e8bb5ef.jpg);
  background-size: 100%;
}

/**
 * A progress control includes a progress element and a drop-down list with
 * actions relating to that progress control
 *
 *
 */
.progress-control {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  align-items: start;
}

/**
 * Cards
 *
 * 1. Base
 * 2. Domains
 *
 */
/* ==========================================================================
    1. Base
   ========================================================================== */
@keyframes a-triad {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.triad {
  padding: 0 !important;
  display: block;
  position: relative;
  z-index: 0;
}
.triad .triad-square {
  position: relative;
  width: 100%;
  height: unset;
}
.triad .triad-square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.triad .triad-square .triad-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  animation: a-triad 1s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}
.triad .triad-square .triad-background svg {
  height: 100%;
  width: 100%;
}
.triad .triad-square .triad-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  z-index: 2;
}
.triad .triad-square .triad-grid .triad-cell, .triad .triad-square .triad-grid .triad-bottom-left, .triad .triad-square .triad-grid .triad-top-right, .triad .triad-square .triad-grid .triad-top-left {
  display: flex;
  opacity: 0;
  animation: a-triad 1s;
  animation-fill-mode: forwards;
}
.triad .triad-square .triad-grid .triad-cell > img, .triad .triad-square .triad-grid .triad-bottom-left > img, .triad .triad-square .triad-grid .triad-top-right > img, .triad .triad-square .triad-grid .triad-top-left > img {
  padding: 10%;
  width: 100%;
  height: 100%;
  border-radius: 20%;
}
.triad .triad-square .triad-grid .triad-top-left {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 10% 10% 0;
  animation-delay: 0.25s;
}
.triad .triad-square .triad-grid .triad-top-left .badge {
  width: 100%;
  height: 100%;
  border-radius: 15%;
}
.triad .triad-square .triad-grid .triad-top-left .badge img {
  width: 40%;
  height: 40%;
  max-width: unset;
  max-height: unset;
}
.triad .triad-square .triad-grid .triad-top-right {
  align-items: flex-end;
  justify-content: flex-start;
  animation-delay: 1s;
}
.triad .triad-square .triad-grid .triad-top-right img {
  padding: 35px;
}
.triad .triad-square .triad-grid .triad-bottom-left {
  align-items: flex-start;
  justify-content: flex-end;
  animation-delay: 0.75s;
}
.triad .triad-square .triad-grid .triad-bottom-left img {
  border-radius: 0;
  padding: 35px;
}

/* ==========================================================================
    2. Domains
  ========================================================================== */
.triad.triad-android .triad-square .triad-background svg {
  fill: rgba(0, 184, 126, 0.2);
}
.triad.triad-android .triad-square .triad-grid .triad-top-left .badge {
  background-color: #00B87E;
}

.triad.triad-flutter .triad-square .triad-background svg {
  fill: rgba(46, 164, 221, 0.2);
}
.triad.triad-flutter .triad-square .triad-grid .triad-top-left .badge {
  background-color: #2EA4DD;
}

.triad.triad-gametech .triad-square .triad-background svg {
  fill: rgba(180, 78, 191, 0.2);
}
.triad.triad-gametech .triad-square .triad-grid .triad-top-left .badge {
  background-color: #B44EBF;
}

.triad.triad-ios .triad-square .triad-background svg {
  fill: rgba(135, 99, 210, 0.2);
}
.triad.triad-ios .triad-square .triad-grid .triad-top-left .badge {
  background-color: #8763D2;
}

.triad.triad-server-side-swift .triad-square .triad-background svg {
  fill: rgba(242, 111, 170, 0.2);
}
.triad.triad-server-side-swift .triad-square .triad-grid .triad-top-left .badge {
  background-color: #F26FAA;
}

.triad.triad-multi-domain .triad-square .triad-background svg {
  fill: rgba(172, 159, 171, 0.2);
}
.triad.triad-multi-domain .triad-square .triad-grid .triad-top-left .badge {
  background-color: #AC9FAB;
}

.triad.triad-pro-gro .triad-square .triad-background svg {
  fill: rgba(227, 169, 61, 0.2);
}
.triad.triad-pro-gro .triad-square .triad-grid .triad-top-left .badge {
  background-color: #E3A93D;
}

.triad.triad-learning-path .triad-square .triad-background svg {
  fill: rgba(89, 124, 238, 0.2);
}
.triad.triad-learning-path .triad-square .triad-grid .triad-top-left .badge {
  background-color: #597CEE;
}

.triad.triad-article .triad-square .triad-background svg {
  fill: rgba(21, 120, 87, 0.2);
}
.triad.triad-article .triad-square .triad-grid .triad-top-left .badge {
  background-color: #157857;
}

.triad.triad-video-course .triad-square .triad-background svg {
  fill: rgba(227, 74, 76, 0.2);
}
.triad.triad-video-course .triad-square .triad-grid .triad-top-left .badge {
  background-color: #E34A4C;
}

.triad.triad-book .triad-square .triad-background svg {
  fill: rgba(255, 136, 71, 0.2);
}
.triad.triad-book .triad-square .triad-grid .triad-top-left .badge {
  background-color: #FF8847;
}

/**
 * Turbo Progress Bar
 *
 */
.turbo-progress-bar {
  z-index: 99999999;
  height: 2px;
  border-radius: 1px;
  background-color: #FF5A00;
}

/**
* Night mode
*
* 1. Global
* 2a. Header
* 2b. Header — Mobile
* 3. Tooltips
* 4. Card
* 5. Buttons
* 6. Modals
* 7a. Input — Search
* 7b. Input — Checkbox
* 7c. Input — Radio
* 7d. Input — Select
* 7e. Input — Text Area
* 8. Dropwdown
* 9. Loading
* 10. Breadcrumbs
* 11. Notifications
* 12. Tabs
* 13. Data Table
* 14. Written Content
* 15. Pagination
*
*/
/* ==========================================================================
1. Dark styles as a placeholder to use for JS and OS with single stylesheet
========================================================================== */
/* ==========================================================================
Apply to CSS with class
========================================================================== */
.prefers-color-scheme--dark {
  /* ==========================================================================
  2a. Header
  ========================================================================== */
  /* ==========================================================================
  2b. Header Mobile
  ========================================================================== */
  /* ==========================================================================
  3. Tooltips
  ========================================================================== */
  /* ==========================================================================
  4. Card
  ========================================================================== */
  /* ==========================================================================
  5. Buttons
  ========================================================================== */
  /* ==========================================================================
  6. Modals
  ========================================================================== */
  /* ==========================================================================
  7a. Input — Search
  ========================================================================== */
  /* ==========================================================================
  7b. Input — Checkbox
  ========================================================================== */
  /* ==========================================================================
  7c. Input — Radio
  ========================================================================== */
  /* Show the checkmark when checked */
  /* ==========================================================================
  7d. Input — Radio
  ========================================================================== */
  /* ==========================================================================
  7e. Input — Text Area
  ========================================================================== */
  /* ==========================================================================
  7f. Input — Range
  ========================================================================== */
  /* ==========================================================================
  8. Dropdown
  ========================================================================== */
  /* ==========================================================================
  9. Loading
  ========================================================================== */
  /* ==========================================================================
  10. Breadcrumbs
  ========================================================================== */
  /* ==========================================================================
  11. Notifications
  ========================================================================== */
  /* ==========================================================================
  12. Tabs
  ========================================================================== */
  /* ==========================================================================
  13. Data Table
  ========================================================================== */
  /* ==========================================================================
  14. Written Content
  ========================================================================== */
  /* ==========================================================================
  15. Pagination
  ========================================================================== */
}
.prefers-color-scheme--dark h1,
.prefers-color-scheme--dark h2,
.prefers-color-scheme--dark h3,
.prefers-color-scheme--dark h4,
.prefers-color-scheme--dark h5,
.prefers-color-scheme--dark span,
.prefers-color-scheme--dark p,
.prefers-color-scheme--dark a {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .dark-fc-black {
  color: #14161E !important;
}
.prefers-color-scheme--dark .dark-fc-black span {
  color: #14161E !important;
}
.prefers-color-scheme--dark .dark-fc-orange-glow {
  color: #FF5A00 !important;
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .mobile-dark-fc-white {
    color: #FFFFFF !important;
  }
}
.prefers-color-scheme--dark .dark-bc-white {
  border: 1px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .dark-bc-clear {
  border: none !important;
}
.prefers-color-scheme--dark .dark-bg-clear {
  background-color: transparent !important;
}
.prefers-color-scheme--dark .dark-bg-clear:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark .dark-bg-orange-determination {
  background-color: #CE3F00 !important;
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .btn-largew.bg-black-night.dark-bg-orange-determination:hover {
    background-color: #ff4f02 !important;
  }
}
.prefers-color-scheme--dark .btn-larget.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-largew.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-normalt.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-normalw.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-small.dark-bg-orange-determination,
.prefers-color-scheme--dark .btn-xlarge.dark-bg-orange-determination {
  background-color: #CE3F00 !important;
}
.prefers-color-scheme--dark .btn-larget.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-largew.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-normalt.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-normalw.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-small.dark-bg-orange-determination:hover,
.prefers-color-scheme--dark .btn-xlarge.dark-bg-orange-determination:hover {
  background-color: #ff4f02 !important;
}
.prefers-color-scheme--dark .dark-bg-white {
  background-color: #FFFFFF !important;
}
.prefers-color-scheme--dark .dark-bg-white:hover {
  background-color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .btn-larget.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-largew.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-normalt.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-normalw.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-small.dark-bg-red-lipstick,
.prefers-color-scheme--dark .btn-xlarge.dark-bg-red-lipstick {
  background-color: #962224 !important;
}
.prefers-color-scheme--dark .btn-larget.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-largew.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-normalt.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-normalw.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-small.dark-bg-red-lipstick:hover,
.prefers-color-scheme--dark .btn-xlarge.dark-bg-red-lipstick:hover {
  background-color: #c02b2e !important;
}
.prefers-color-scheme--dark .dark-sc-white {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark header.header {
  background-color: #14161E;
  color: #FFFFFF;
}
.prefers-color-scheme--dark header.header svg {
  fill: #FFFFFF;
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown-trigger:hover, .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown-trigger:active, .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown-trigger:focus, .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown-trigger:target {
    background-color: #3B3D43;
  }
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav details[open] .dropdown-trigger {
    background-color: #3B3D43;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios {
    background: #3C2C64;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios:hover {
  background: #3C2C64;
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios:hover .dropdown-submenu {
    background: #3C2C64;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-ios .dropdown-submenu {
    background: #3C2C64;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android {
    background: #0F553E;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android:hover {
  background: #0F553E;
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android:hover .dropdown-submenu {
    background: #0F553E;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-android .dropdown-submenu {
    background: #0F553E;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter {
    background: #1B4A6B;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter:hover {
  background: #1B4A6B;
}
@media screen and (min-width: 860px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter:hover .dropdown-submenu {
    background: #1B4A6B;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
  }
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-expandable.dropdown-expandable-flutter .dropdown-submenu {
    background: #1B4A6B;
  }
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line {
  color: #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-sss:hover {
  background: rgba(242, 111, 170, 0.5);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content a.dropdown-line.dropdown-line-gametech:hover {
  background: rgba(180, 78, 191, 0.5);
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown-trigger:hover, .prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown-trigger:active, .prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown-trigger:focus, .prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown-trigger:target {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav details[open] .dropdown-trigger {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line {
  color: #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-left .header-left-menus .header-domain-menu > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .search svg {
  fill: #FFFFFF;
  background: unset;
}
.prefers-color-scheme--dark header.header .header-right .search svg[role=clear]:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .search input {
  background-color: #07080A;
  color: #FFFFFF;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark header.header .header-right .search input:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .search input:focus {
  background-color: #07080A;
  border-color: #FF5A00 !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus {
  /* When not logged in, the sign in button appears */
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus .btn-icon:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown-trigger .btn-iconxsm:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav details[open] .dropdown-trigger {
  background-color: #14161E;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown .dropdown-menu .dropdown-content hr.dropdown-line {
  border-top: 1px solid #30363D;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line {
  color: #FFFFFF;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus > nav .dropdown .dropdown-menu .dropdown-content .dropdown-line:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus .header-right-sign-in .btn-header-signin {
  background-color: #14161E;
}
.prefers-color-scheme--dark header.header .header-right .header-right-menus .header-right-sign-in .btn-header-signin:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .menu-toggle button > div > div {
  background-color: #FFFFFF !important;
}
@media screen and (max-width: 859px) {
  .prefers-color-scheme--dark header.header .header-left .header-left-menus {
    background-color: #14161E;
  }
  .prefers-color-scheme--dark header.header .header-left .header-left-menus > nav .dropdown .dropdown-menu .dropdown-content {
    border: unset;
  }
}
.prefers-color-scheme--dark .tooltip .tooltip-text {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .card > div {
  background-color: #14161E;
}
.prefers-color-scheme--dark .card > div .card-title {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .card > div .card-text {
  -webkit-line-clamp: unset;
  color: #D7D7D7;
}
.prefers-color-scheme--dark .card .card-topright {
  background-color: transparent;
}
.prefers-color-scheme--dark .card .card-topright::before {
  border: 1px #30363D;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #14161E;
}
.prefers-color-scheme--dark .card .card-topleft {
  border: 1px #30363D;
  border-style: solid solid none solid;
}
.prefers-color-scheme--dark .card .card-topleft .badge svg {
  fill: #14161E;
}
.prefers-color-scheme--dark .card .card-bottom {
  border: 1px #30363D;
  border-style: none solid solid solid;
}
.prefers-color-scheme--dark .card .card-bottom::before {
  border: 1px #30363D;
  border-style: solid solid none none;
}
.prefers-color-scheme--dark .card .card-bottom .card-description .modal .modal-wrapper {
  background-color: #14161E !important;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .card.obscure-banner .card-topright::before {
  border: 1px #30363D;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #FF8847;
}
.prefers-color-scheme--dark .card.obscure-banner .card-topright .card-artwork {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .btn-larget,
.prefers-color-scheme--dark .btn-largew,
.prefers-color-scheme--dark .btn-normalt,
.prefers-color-scheme--dark .btn-normalw,
.prefers-color-scheme--dark .btn-small,
.prefers-color-scheme--dark .btn-xlarge {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .btn-icon:hover,
.prefers-color-scheme--dark .btn-iconxsm:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark .btn-icon svg,
.prefers-color-scheme--dark .btn-iconxsm svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark a.btn-larget,
.prefers-color-scheme--dark a.btn-largew,
.prefers-color-scheme--dark a.btn-normalt,
.prefers-color-scheme--dark a.btn-normalw,
.prefers-color-scheme--dark a.btn-small,
.prefers-color-scheme--dark a.btn-xlarge {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .modal .modal-wrapper {
  background-color: #14161E;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .modal .modal-wrapper svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .modal .modal-wrapper .btn-icon:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .modal .modal-table {
  border-color: rgba(215, 215, 215, 0.2);
}
.prefers-color-scheme--dark input.search-normal {
  background-color: #07080A;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF;
}
.prefers-color-scheme--dark input.search-normal:hover {
  background-color: rgba(59, 61, 67, 0.5) !important;
}
.prefers-color-scheme--dark input.search-normal:focus {
  background-color: #07080A;
  border-color: #FF5A00 !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark input.search-normal + svg[role=clear] {
  fill: #FFFFFF;
  background: unset;
}
.prefers-color-scheme--dark input.search-normal + svg[role=clear]:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark input.search-normal + svg[role=clear]:focus, .prefers-color-scheme--dark input.search-normal + svg[role=clear]:target, .prefers-color-scheme--dark input.search-normal + svg[role=clear]:active {
  background-color: unset;
}
.prefers-color-scheme--dark .checkbox {
  /* Show the checkmark when checked */
}
.prefers-color-scheme--dark .checkbox .checkbox-tick {
  background-color: #07080A;
  border: 1px solid #FFFFFF;
  /* On mouse-over, change  background color */
  /* On tab focus, change border */
}
.prefers-color-scheme--dark .checkbox .checkbox-tick:hover input ~ .checkbox-tick {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .checkbox .checkbox-tick:focus input ~ .checkbox-tick {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark .checkbox input:checked ~ span.checkbox-tick {
  background-color: #00B87E;
  border-color: #00B87E;
}
.prefers-color-scheme--dark .radio {
  /* On mouse-over, change  background color */
  /* On tab focus, change border */
}
.prefers-color-scheme--dark .radio .radio-tick {
  background-color: #07080A;
  border: 1px solid #FFFFFF;
  /* The dot looks like this */
}
.prefers-color-scheme--dark .radio .radio-tick:after {
  border: 10px solid #30363D;
  background: #FFFFFF;
}
.prefers-color-scheme--dark .radio:hover input ~ .radio-tick {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .radio:focus input ~ .radio-tick {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark input:checked ~ .radio-tick {
  background-color: #00B87E;
  border-color: #00B87E;
}
.prefers-color-scheme--dark select {
  border: 1px solid #30363D;
  background-color: #07080A;
}
.prefers-color-scheme--dark select:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .text-input {
  border: 1px solid #30363D;
  background-color: #07080A;
}
.prefers-color-scheme--dark .text-input:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .text-input:focus {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark .text-input:disabled {
  color: #D7D7D7;
  background-color: #4A4A4B;
  border-color: #30363D;
}
.prefers-color-scheme--dark .range::-webkit-slider-thumb {
  border: 2px solid #0E0F14;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
}
.prefers-color-scheme--dark .range::-moz-range-thumb {
  border: 2px solid #0E0F14;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
}
.prefers-color-scheme--dark .range::-ms-thumb {
  border: 2px solid #0E0F14;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
}
.prefers-color-scheme--dark .dropdown details[open] .btn-iconxsm {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content .dropdown-line {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content hr.dropdown-line {
  border-top: 1px solid #30363D;
}
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content a.dropdown-line:hover,
.prefers-color-scheme--dark .dropdown .dropdown-menu .dropdown-content button.dropdown-line:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .loading .loading-icon svg {
  fill: #FFFFFF;
  -webkit-filter: invert(1);
  /* safari 6.0 - 9.0 */
  filter: invert(1);
}
.prefers-color-scheme--dark nav.breadcrumbs svg.icon {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .notification {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .notification .notification--delete .btn-iconsm svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .notification .notification--delete .btn-iconsm:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .tabs li a:not(.btn-icon, .dropdown):hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .tabs li.tabs-active {
  border-bottom-color: #FFFFFF;
}
.prefers-color-scheme--dark .tabs li.tabs-active a:not(.btn-icon, .dropdown) {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .tabs li.tabs-active a:not(.btn-icon, .dropdown):hover {
  background-color: unset;
}
.prefers-color-scheme--dark .elementary-table {
  background-color: #0E0F14;
  border: 1px solid #30363D;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .elementary-table thead th,
.prefers-color-scheme--dark .elementary-table tbody th {
  background-color: #07080A;
}
.prefers-color-scheme--dark .elementary-table thead th .btn-normalw,
.prefers-color-scheme--dark .elementary-table tbody th .btn-normalw {
  border: unset !important;
  background-color: unset !important;
}
.prefers-color-scheme--dark .elementary-table thead label.search svg,
.prefers-color-scheme--dark .elementary-table tbody label.search svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .elementary-table.zebra-rows-table tr:nth-child(even) {
  background: #07080A;
}
@media only screen and (max-width: 600px) {
  .prefers-color-scheme--dark .elementary-table.is-responsive {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #323232 100%);
  }
}
.prefers-color-scheme--dark .elementary-table.is-controls .btn-normalw:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .selection-results {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .selection-results .button-container .badge.bg-black-night:hover, .prefers-color-scheme--dark .selection-results .button-container .badge.bg-black-night:focus {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .selection-results .button-container .btn-small:hover, .prefers-color-scheme--dark .selection-results .button-container .btn-small:focus {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .written-content .note {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .written-content img.bordered {
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .written-content pre {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .btn-mark-complete {
  border-color: #30363D;
}
.prefers-color-scheme--dark .btn-mark-complete:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark ul.pagination li.page .page-link {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark ul.pagination li.page .page-link:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark ul.pagination li.page .page-link:not(.current):hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark ul.pagination li.page .page-link:not(.current):hover svg {
  fill: white;
}
.prefers-color-scheme--dark ul.pagination li.page a.page-link.active {
  background-color: #FFFFFF !important;
  color: #0E0F14 !important;
}
.prefers-color-scheme--dark ul.pagination li.page a.page-link.active:hover {
  background-color: #D7D7D7 !important;
}

.hidden {
  display: none;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.center-align {
  align-items: center;
}

.center-justify {
  justify-content: center;
}

/**
 * This file contains rotation utility methods
 *
 * 1. Angles
 *
 */
/* ==========================================================================
    1. Angles
   ========================================================================== */
.rot-45 {
  rotate: 45deg;
}

.rot-90 {
  rotate: 90deg;
}

.rot-135 {
  rotate: 135deg;
}

.rot-180 {
  rotate: 180deg;
}

.rot-225 {
  rotate: 225deg;
}

.rot-270 {
  rotate: 270deg;
}

.rot-315 {
  rotate: 315deg;
}

/* If you've defined your colours as ("color-name",$color-variable)
*  in the colour list in the settings folder
*  Then you can use them as background and font colours... and others if added */
/* Font color */
.fc-black-night {
  color: #14161E;
}

/* Background color */
.bg-black-night {
  background-color: #14161E;
}

/* Border color */
.bc-black-night {
  border: 1px solid #14161E;
}

/* SVG Colour */
.sc-black-night {
  fill: #14161E;
}

/* Font color */
.fc-black-night-hover {
  color: #43454B;
}

/* Background color */
.bg-black-night-hover {
  background-color: #43454B;
}

/* Border color */
.bc-black-night-hover {
  border: 1px solid #43454B;
}

/* SVG Colour */
.sc-black-night-hover {
  fill: #43454B;
}

/* Font color */
.fc-black-phantom {
  color: #0E0F14;
}

/* Background color */
.bg-black-phantom {
  background-color: #0E0F14;
}

/* Border color */
.bc-black-phantom {
  border: 1px solid #0E0F14;
}

/* SVG Colour */
.sc-black-phantom {
  fill: #0E0F14;
}

/* Font color */
.fc-black-jaguar {
  color: #07080A;
}

/* Background color */
.bg-black-jaguar {
  background-color: #07080A;
}

/* Border color */
.bc-black-jaguar {
  border: 1px solid #07080A;
}

/* SVG Colour */
.sc-black-jaguar {
  fill: #07080A;
}

/* Font color */
.fc-black-iridium {
  color: #3B3D43;
}

/* Background color */
.bg-black-iridium {
  background-color: #3B3D43;
}

/* Border color */
.bc-black-iridium {
  border: 1px solid #3B3D43;
}

/* SVG Colour */
.sc-black-iridium {
  fill: #3B3D43;
}

/* Font color */
.fc-black-plaza {
  color: #30363D;
}

/* Background color */
.bg-black-plaza {
  background-color: #30363D;
}

/* Border color */
.bc-black-plaza {
  border: 1px solid #30363D;
}

/* SVG Colour */
.sc-black-plaza {
  fill: #30363D;
}

/* Font color */
.fc-grey-thought {
  color: #D7D7D7;
}

/* Background color */
.bg-grey-thought {
  background-color: #D7D7D7;
}

/* Border color */
.bc-grey-thought {
  border: 1px solid #D7D7D7;
}

/* SVG Colour */
.sc-grey-thought {
  fill: #D7D7D7;
}

/* Font color */
.fc-grey-thought-50 {
  color: rgba(215, 215, 215, 0.4980392157);
}

/* Background color */
.bg-grey-thought-50 {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/* Border color */
.bc-grey-thought-50 {
  border: 1px solid rgba(215, 215, 215, 0.4980392157);
}

/* SVG Colour */
.sc-grey-thought-50 {
  fill: rgba(215, 215, 215, 0.4980392157);
}

/* Font color */
.fc-grey-wisp {
  color: #F7F7F7;
}

/* Background color */
.bg-grey-wisp {
  background-color: #F7F7F7;
}

/* Border color */
.bc-grey-wisp {
  border: 1px solid #F7F7F7;
}

/* SVG Colour */
.sc-grey-wisp {
  fill: #F7F7F7;
}

/* Font color */
.fc-grey-london {
  color: #AC9FAB;
}

/* Background color */
.bg-grey-london {
  background-color: #AC9FAB;
}

/* Border color */
.bc-grey-london {
  border: 1px solid #AC9FAB;
}

/* SVG Colour */
.sc-grey-london {
  fill: #AC9FAB;
}

/* Font color */
.fc-grey-taupe {
  color: #5F4F5E;
}

/* Background color */
.bg-grey-taupe {
  background-color: #5F4F5E;
}

/* Border color */
.bc-grey-taupe {
  border: 1px solid #5F4F5E;
}

/* SVG Colour */
.sc-grey-taupe {
  fill: #5F4F5E;
}

/* Font color */
.fc-blue-sky {
  color: #2EA4DD;
}

/* Background color */
.bg-blue-sky {
  background-color: #2EA4DD;
}

/* Border color */
.bc-blue-sky {
  border: 1px solid #2EA4DD;
}

/* SVG Colour */
.sc-blue-sky {
  fill: #2EA4DD;
}

/* Font color */
.fc-blue-sky-50 {
  color: rgba(46, 164, 221, 0.5019607843);
}

/* Background color */
.bg-blue-sky-50 {
  background-color: rgba(46, 164, 221, 0.5019607843);
}

/* Border color */
.bc-blue-sky-50 {
  border: 1px solid rgba(46, 164, 221, 0.5019607843);
}

/* SVG Colour */
.sc-blue-sky-50 {
  fill: rgba(46, 164, 221, 0.5019607843);
}

/* Font color */
.fc-blue-sky-dark {
  color: #1B4A6B;
}

/* Background color */
.bg-blue-sky-dark {
  background-color: #1B4A6B;
}

/* Border color */
.bc-blue-sky-dark {
  border: 1px solid #1B4A6B;
}

/* SVG Colour */
.sc-blue-sky-dark {
  fill: #1B4A6B;
}

/* Font color */
.fc-blue-sea {
  color: #106790;
}

/* Background color */
.bg-blue-sea {
  background-color: #106790;
}

/* Border color */
.bc-blue-sea {
  border: 1px solid #106790;
}

/* SVG Colour */
.sc-blue-sea {
  fill: #106790;
}

/* Font color */
.fc-blue-cornflower {
  color: #597CEE;
}

/* Background color */
.bg-blue-cornflower {
  background-color: #597CEE;
}

/* Border color */
.bc-blue-cornflower {
  border: 1px solid #597CEE;
}

/* SVG Colour */
.sc-blue-cornflower {
  fill: #597CEE;
}

/* Font color */
.fc-blue-denim {
  color: #2C48A1;
}

/* Background color */
.bg-blue-denim {
  background-color: #2C48A1;
}

/* Border color */
.bc-blue-denim {
  border: 1px solid #2C48A1;
}

/* SVG Colour */
.sc-blue-denim {
  fill: #2C48A1;
}

/* Font color */
.fc-green-meadow {
  color: #00B87E;
}

/* Background color */
.bg-green-meadow {
  background-color: #00B87E;
}

/* Border color */
.bc-green-meadow {
  border: 1px solid #00B87E;
}

/* SVG Colour */
.sc-green-meadow {
  fill: #00B87E;
}

/* Font color */
.fc-green-meadow-50 {
  color: rgba(0, 184, 126, 0.5019607843);
}

/* Background color */
.bg-green-meadow-50 {
  background-color: rgba(0, 184, 126, 0.5019607843);
}

/* Border color */
.bc-green-meadow-50 {
  border: 1px solid rgba(0, 184, 126, 0.5019607843);
}

/* SVG Colour */
.sc-green-meadow-50 {
  fill: rgba(0, 184, 126, 0.5019607843);
}

/* Font color */
.fc-green-meadow-dark {
  color: #0F553E;
}

/* Background color */
.bg-green-meadow-dark {
  background-color: #0F553E;
}

/* Border color */
.bc-green-meadow-dark {
  border: 1px solid #0F553E;
}

/* SVG Colour */
.sc-green-meadow-dark {
  fill: #0F553E;
}

/* Font color */
.fc-green-rainforest {
  color: #157857;
}

/* Background color */
.bg-green-rainforest {
  background-color: #157857;
}

/* Border color */
.bc-green-rainforest {
  border: 1px solid #157857;
}

/* SVG Colour */
.sc-green-rainforest {
  fill: #157857;
}

/* Font color */
.fc-green-celery {
  color: #AEB740;
}

/* Background color */
.bg-green-celery {
  background-color: #AEB740;
}

/* Border color */
.bc-green-celery {
  border: 1px solid #AEB740;
}

/* SVG Colour */
.sc-green-celery {
  fill: #AEB740;
}

/* Font color */
.fc-green-cypress {
  color: #575C20;
}

/* Background color */
.bg-green-cypress {
  background-color: #575C20;
}

/* Border color */
.bc-green-cypress {
  border: 1px solid #575C20;
}

/* SVG Colour */
.sc-green-cypress {
  fill: #575C20;
}

/* Font color */
.fc-green-olive {
  color: #778749;
}

/* Background color */
.bg-green-olive {
  background-color: #778749;
}

/* Border color */
.bc-green-olive {
  border: 1px solid #778749;
}

/* SVG Colour */
.sc-green-olive {
  fill: #778749;
}

/* Font color */
.fc-green-kelp {
  color: #3C4425;
}

/* Background color */
.bg-green-kelp {
  background-color: #3C4425;
}

/* Border color */
.bc-green-kelp {
  border: 1px solid #3C4425;
}

/* SVG Colour */
.sc-green-kelp {
  fill: #3C4425;
}

/* Font color */
.fc-grey-thought-20 {
  color: rgba(215, 215, 215, 0.2);
}

/* Background color */
.bg-grey-thought-20 {
  background-color: rgba(215, 215, 215, 0.2);
}

/* Border color */
.bc-grey-thought-20 {
  border: 1px solid rgba(215, 215, 215, 0.2);
}

/* SVG Colour */
.sc-grey-thought-20 {
  fill: rgba(215, 215, 215, 0.2);
}

/* Font color */
.fc-orange-glow {
  color: #FF5A00;
}

/* Background color */
.bg-orange-glow {
  background-color: #FF5A00;
}

/* Border color */
.bc-orange-glow {
  border: 1px solid #FF5A00;
}

/* SVG Colour */
.sc-orange-glow {
  fill: #FF5A00;
}

/* Font color */
.fc-orange-enthusiasm {
  color: #FF8847;
}

/* Background color */
.bg-orange-enthusiasm {
  background-color: #FF8847;
}

/* Border color */
.bc-orange-enthusiasm {
  border: 1px solid #FF8847;
}

/* SVG Colour */
.sc-orange-enthusiasm {
  fill: #FF8847;
}

/* Font color */
.fc-orange-enthusiasm-20 {
  color: rgba(255, 136, 71, 0.2);
}

/* Background color */
.bg-orange-enthusiasm-20 {
  background-color: rgba(255, 136, 71, 0.2);
}

/* Border color */
.bc-orange-enthusiasm-20 {
  border: 1px solid rgba(255, 136, 71, 0.2);
}

/* SVG Colour */
.sc-orange-enthusiasm-20 {
  fill: rgba(255, 136, 71, 0.2);
}

/* Font color */
.fc-orange-determination {
  color: #CE3F00;
}

/* Background color */
.bg-orange-determination {
  background-color: #CE3F00;
}

/* Border color */
.bc-orange-determination {
  border: 1px solid #CE3F00;
}

/* SVG Colour */
.sc-orange-determination {
  fill: #CE3F00;
}

/* Font color */
.fc-orange-raw-sienna {
  color: #CF7F42;
}

/* Background color */
.bg-orange-raw-sienna {
  background-color: #CF7F42;
}

/* Border color */
.bc-orange-raw-sienna {
  border: 1px solid #CF7F42;
}

/* SVG Colour */
.sc-orange-raw-sienna {
  fill: #CF7F42;
}

/* Font color */
.fc-orange-burnt {
  color: #82491D;
}

/* Background color */
.bg-orange-burnt {
  background-color: #82491D;
}

/* Border color */
.bc-orange-burnt {
  border: 1px solid #82491D;
}

/* SVG Colour */
.sc-orange-burnt {
  fill: #82491D;
}

/* Font color */
.fc-pink-doll {
  color: #F26FAA;
}

/* Background color */
.bg-pink-doll {
  background-color: #F26FAA;
}

/* Border color */
.bc-pink-doll {
  border: 1px solid #F26FAA;
}

/* SVG Colour */
.sc-pink-doll {
  fill: #F26FAA;
}

/* Font color */
.fc-pink-peony {
  color: #A53B6B;
}

/* Background color */
.bg-pink-peony {
  background-color: #A53B6B;
}

/* Border color */
.bc-pink-peony {
  border: 1px solid #A53B6B;
}

/* SVG Colour */
.sc-pink-peony {
  fill: #A53B6B;
}

/* Font color */
.fc-pink-peach {
  color: #E6978A;
}

/* Background color */
.bg-pink-peach {
  background-color: #E6978A;
}

/* Border color */
.bc-pink-peach {
  border: 1px solid #E6978A;
}

/* SVG Colour */
.sc-pink-peach {
  fill: #E6978A;
}

/* Font color */
.fc-pink-incense {
  color: #99584D;
}

/* Background color */
.bg-pink-incense {
  background-color: #99584D;
}

/* Border color */
.bc-pink-incense {
  border: 1px solid #99584D;
}

/* SVG Colour */
.sc-pink-incense {
  fill: #99584D;
}

/* Font color */
.fc-purple-iolite {
  color: #8763D2;
}

/* Background color */
.bg-purple-iolite {
  background-color: #8763D2;
}

/* Border color */
.bc-purple-iolite {
  border: 1px solid #8763D2;
}

/* SVG Colour */
.sc-purple-iolite {
  fill: #8763D2;
}

/* Font color */
.fc-purple-iolite-50 {
  color: rgba(135, 99, 210, 0.5019607843);
}

/* Background color */
.bg-purple-iolite-50 {
  background-color: rgba(135, 99, 210, 0.5019607843);
}

/* Border color */
.bc-purple-iolite-50 {
  border: 1px solid rgba(135, 99, 210, 0.5019607843);
}

/* SVG Colour */
.sc-purple-iolite-50 {
  fill: rgba(135, 99, 210, 0.5019607843);
}

/* Font color */
.fc-purple-iolite-dark {
  color: #3C2C64;
}

/* Background color */
.bg-purple-iolite-dark {
  background-color: #3C2C64;
}

/* Border color */
.bc-purple-iolite-dark {
  border: 1px solid #3C2C64;
}

/* SVG Colour */
.sc-purple-iolite-dark {
  fill: #3C2C64;
}

/* Font color */
.fc-purple-amethyst {
  color: #4D3285;
}

/* Background color */
.bg-purple-amethyst {
  background-color: #4D3285;
}

/* Border color */
.bc-purple-amethyst {
  border: 1px solid #4D3285;
}

/* SVG Colour */
.sc-purple-amethyst {
  fill: #4D3285;
}

/* Font color */
.fc-purple-almost-fuchsia {
  color: #B44EBF;
}

/* Background color */
.bg-purple-almost-fuchsia {
  background-color: #B44EBF;
}

/* Border color */
.bc-purple-almost-fuchsia {
  border: 1px solid #B44EBF;
}

/* SVG Colour */
.sc-purple-almost-fuchsia {
  fill: #B44EBF;
}

/* Font color */
.fc-purple-regal {
  color: #6B2372;
}

/* Background color */
.bg-purple-regal {
  background-color: #6B2372;
}

/* Border color */
.bc-purple-regal {
  border: 1px solid #6B2372;
}

/* SVG Colour */
.sc-purple-regal {
  fill: #6B2372;
}

/* Font color */
.fc-red-lychee {
  color: #E34A4C;
}

/* Background color */
.bg-red-lychee {
  background-color: #E34A4C;
}

/* Border color */
.bc-red-lychee {
  border: 1px solid #E34A4C;
}

/* SVG Colour */
.sc-red-lychee {
  fill: #E34A4C;
}

/* Font color */
.fc-red-lipstick {
  color: #962224;
}

/* Background color */
.bg-red-lipstick {
  background-color: #962224;
}

/* Border color */
.bc-red-lipstick {
  border: 1px solid #962224;
}

/* SVG Colour */
.sc-red-lipstick {
  fill: #962224;
}

/* Font color */
.fc-white {
  color: #FFFFFF;
}

/* Background color */
.bg-white {
  background-color: #FFFFFF;
}

/* Border color */
.bc-white {
  border: 1px solid #FFFFFF;
}

/* SVG Colour */
.sc-white {
  fill: #FFFFFF;
}

/* Font color */
.fc-yellow-autumn {
  color: #E3A93D;
}

/* Background color */
.bg-yellow-autumn {
  background-color: #E3A93D;
}

/* Border color */
.bc-yellow-autumn {
  border: 1px solid #E3A93D;
}

/* SVG Colour */
.sc-yellow-autumn {
  fill: #E3A93D;
}

/* Font color */
.fc-yellow-curry {
  color: #966B19;
}

/* Background color */
.bg-yellow-curry {
  background-color: #966B19;
}

/* Border color */
.bc-yellow-curry {
  border: 1px solid #966B19;
}

/* SVG Colour */
.sc-yellow-curry {
  fill: #966B19;
}

/* Font color */
.fc-hljs-bright-grey {
  color: #999999;
}

/* Background color */
.bg-hljs-bright-grey {
  background-color: #999999;
}

/* Border color */
.bc-hljs-bright-grey {
  border: 1px solid #999999;
}

/* SVG Colour */
.sc-hljs-bright-grey {
  fill: #999999;
}

/* Font color */
.fc-hljs-bright-red {
  color: #F64E1A;
}

/* Background color */
.bg-hljs-bright-red {
  background-color: #F64E1A;
}

/* Border color */
.bc-hljs-bright-red {
  border: 1px solid #F64E1A;
}

/* SVG Colour */
.sc-hljs-bright-red {
  fill: #F64E1A;
}

/* Font color */
.fc-hljs-bright-orange {
  color: #F08D49;
}

/* Background color */
.bg-hljs-bright-orange {
  background-color: #F08D49;
}

/* Border color */
.bc-hljs-bright-orange {
  border: 1px solid #F08D49;
}

/* SVG Colour */
.sc-hljs-bright-orange {
  fill: #F08D49;
}

/* Font color */
.fc-hljs-bright-yellow {
  color: #F8C555;
}

/* Background color */
.bg-hljs-bright-yellow {
  background-color: #F8C555;
}

/* Border color */
.bc-hljs-bright-yellow {
  border: 1px solid #F8C555;
}

/* SVG Colour */
.sc-hljs-bright-yellow {
  fill: #F8C555;
}

/* Font color */
.fc-hljs-bright-green {
  color: #7EC699;
}

/* Background color */
.bg-hljs-bright-green {
  background-color: #7EC699;
}

/* Border color */
.bc-hljs-bright-green {
  border: 1px solid #7EC699;
}

/* SVG Colour */
.sc-hljs-bright-green {
  fill: #7EC699;
}

/* Font color */
.fc-hljs-bright-aqua {
  color: #18B5AB;
}

/* Background color */
.bg-hljs-bright-aqua {
  background-color: #18B5AB;
}

/* Border color */
.bc-hljs-bright-aqua {
  border: 1px solid #18B5AB;
}

/* SVG Colour */
.sc-hljs-bright-aqua {
  fill: #18B5AB;
}

/* Font color */
.fc-hljs-bright-blue {
  color: #70A2FF;
}

/* Background color */
.bg-hljs-bright-blue {
  background-color: #70A2FF;
}

/* Border color */
.bc-hljs-bright-blue {
  border: 1px solid #70A2FF;
}

/* SVG Colour */
.sc-hljs-bright-blue {
  fill: #70A2FF;
}

/* Font color */
.fc-hljs-bright-purple {
  color: #CC99CD;
}

/* Background color */
.bg-hljs-bright-purple {
  background-color: #CC99CD;
}

/* Border color */
.bc-hljs-bright-purple {
  border: 1px solid #CC99CD;
}

/* SVG Colour */
.sc-hljs-bright-purple {
  fill: #CC99CD;
}

/* Font color */
.fc-hljs-pastel-grey {
  color: #9FA4B1;
}

/* Background color */
.bg-hljs-pastel-grey {
  background-color: #9FA4B1;
}

/* Border color */
.bc-hljs-pastel-grey {
  border: 1px solid #9FA4B1;
}

/* SVG Colour */
.sc-hljs-pastel-grey {
  fill: #9FA4B1;
}

/* Font color */
.fc-hljs-pastel-red {
  color: #F37957;
}

/* Background color */
.bg-hljs-pastel-red {
  background-color: #F37957;
}

/* Border color */
.bc-hljs-pastel-red {
  border: 1px solid #F37957;
}

/* SVG Colour */
.sc-hljs-pastel-red {
  fill: #F37957;
}

/* Font color */
.fc-hljs-pastel-orange {
  color: #F5AB57;
}

/* Background color */
.bg-hljs-pastel-orange {
  background-color: #F5AB57;
}

/* Border color */
.bc-hljs-pastel-orange {
  border: 1px solid #F5AB57;
}

/* SVG Colour */
.sc-hljs-pastel-orange {
  fill: #F5AB57;
}

/* Font color */
.fc-hljs-pastel-yellow {
  color: #F8C555;
}

/* Background color */
.bg-hljs-pastel-yellow {
  background-color: #F8C555;
}

/* Border color */
.bc-hljs-pastel-yellow {
  border: 1px solid #F8C555;
}

/* SVG Colour */
.sc-hljs-pastel-yellow {
  fill: #F8C555;
}

/* Font color */
.fc-hljs-pastel-green {
  color: #86AD85;
}

/* Background color */
.bg-hljs-pastel-green {
  background-color: #86AD85;
}

/* Border color */
.bc-hljs-pastel-green {
  border: 1px solid #86AD85;
}

/* SVG Colour */
.sc-hljs-pastel-green {
  fill: #86AD85;
}

/* Font color */
.fc-hljs-pastel-aqua {
  color: #5FB3B3;
}

/* Background color */
.bg-hljs-pastel-aqua {
  background-color: #5FB3B3;
}

/* Border color */
.bc-hljs-pastel-aqua {
  border: 1px solid #5FB3B3;
}

/* SVG Colour */
.sc-hljs-pastel-aqua {
  fill: #5FB3B3;
}

/* Font color */
.fc-hljs-pastel-blue {
  color: #6293C3;
}

/* Background color */
.bg-hljs-pastel-blue {
  background-color: #6293C3;
}

/* Border color */
.bc-hljs-pastel-blue {
  border: 1px solid #6293C3;
}

/* SVG Colour */
.sc-hljs-pastel-blue {
  fill: #6293C3;
}

/* Font color */
.fc-hljs-pastel-purple {
  color: #C192C1;
}

/* Background color */
.bg-hljs-pastel-purple {
  background-color: #C192C1;
}

/* Border color */
.bc-hljs-pastel-purple {
  border: 1px solid #C192C1;
}

/* SVG Colour */
.sc-hljs-pastel-purple {
  fill: #C192C1;
}

/* Font color */
.fc-hljs-light-grey {
  color: #918791;
}

/* Background color */
.bg-hljs-light-grey {
  background-color: #918791;
}

/* Border color */
.bc-hljs-light-grey {
  border: 1px solid #918791;
}

/* SVG Colour */
.sc-hljs-light-grey {
  fill: #918791;
}

/* Font color */
.fc-hljs-light-red {
  color: #E34A4C;
}

/* Background color */
.bg-hljs-light-red {
  background-color: #E34A4C;
}

/* Border color */
.bc-hljs-light-red {
  border: 1px solid #E34A4C;
}

/* SVG Colour */
.sc-hljs-light-red {
  fill: #E34A4C;
}

/* Font color */
.fc-hljs-light-orange {
  color: #FF5A00;
}

/* Background color */
.bg-hljs-light-orange {
  background-color: #FF5A00;
}

/* Border color */
.bc-hljs-light-orange {
  border: 1px solid #FF5A00;
}

/* SVG Colour */
.sc-hljs-light-orange {
  fill: #FF5A00;
}

/* Font color */
.fc-hljs-light-yellow {
  color: #966B19;
}

/* Background color */
.bg-hljs-light-yellow {
  background-color: #966B19;
}

/* Border color */
.bc-hljs-light-yellow {
  border: 1px solid #966B19;
}

/* SVG Colour */
.sc-hljs-light-yellow {
  fill: #966B19;
}

/* Font color */
.fc-hljs-light-green {
  color: #157857;
}

/* Background color */
.bg-hljs-light-green {
  background-color: #157857;
}

/* Border color */
.bc-hljs-light-green {
  border: 1px solid #157857;
}

/* SVG Colour */
.sc-hljs-light-green {
  fill: #157857;
}

/* Font color */
.fc-hljs-light-aqua {
  color: #1D7EAF;
}

/* Background color */
.bg-hljs-light-aqua {
  background-color: #1D7EAF;
}

/* Border color */
.bc-hljs-light-aqua {
  border: 1px solid #1D7EAF;
}

/* SVG Colour */
.sc-hljs-light-aqua {
  fill: #1D7EAF;
}

/* Font color */
.fc-hljs-light-blue {
  color: #2E5FFF;
}

/* Background color */
.bg-hljs-light-blue {
  background-color: #2E5FFF;
}

/* Border color */
.bc-hljs-light-blue {
  border: 1px solid #2E5FFF;
}

/* SVG Colour */
.sc-hljs-light-blue {
  fill: #2E5FFF;
}

/* Font color */
.fc-hljs-light-purple {
  color: #6B2372;
}

/* Background color */
.bg-hljs-light-purple {
  background-color: #6B2372;
}

/* Border color */
.bc-hljs-light-purple {
  border: 1px solid #6B2372;
}

/* SVG Colour */
.sc-hljs-light-purple {
  fill: #6B2372;
}

.bg-light-android {
  background-color: #00B87E;
}

.bg-light-flutter {
  background-color: #2EA4DD;
}

.bg-light-gametech {
  background-color: #B44EBF;
}

.bg-light-ios {
  background-color: #8763D2;
}

.bg-light-server-side-swift {
  background-color: #F26FAA;
}

.bg-light-multi-domain {
  background-color: #AC9FAB;
}

.bg-light-pro-gro {
  background-color: #E3A93D;
}

.bg-light-learning-path {
  background-color: #597CEE;
}

.bg-light-article {
  background-color: #157857;
}

.bg-light-video-course {
  background-color: #E34A4C;
}

.bg-light-book {
  background-color: #FF8847;
}

.bg-dark-android {
  background-color: #157857;
}

.bg-dark-flutter {
  background-color: #106790;
}

.bg-dark-gametech {
  background-color: #6B2372;
}

.bg-dark-ios {
  background-color: #4D3285;
}

.bg-dark-server-side-swift {
  background-color: #A53B6B;
}

.bg-dark-multi-domain {
  background-color: #5F4F5E;
}

.bg-dark-pro-gro {
  background-color: #966B19;
}

.display-inline {
  display: inline;
}

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

.display-block {
  display: block;
}

.display-grid {
  display: grid;
}

.display-table {
  display: table;
}

.display-table-row {
  display: table-row;
}

.display-table-cell {
  display: table-cell;
}

.display-flex {
  display: flex;
}

.display-inline-flex {
  display: inline-flex;
}

.display-none {
  display: none;
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.text-decoration-none {
  text-decoration: none;
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-move {
  cursor: move;
}

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

.text-align-left {
  text-align: left;
}

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

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

.text-align-start {
  text-align: start;
}

.text-align-end {
  text-align: end;
}

.text-align-justify {
  text-align: justify;
}

.text-align-unset {
  text-align: unset;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.mw-100 {
  max-width: 100%;
}

.h-25 {
  height: 25%;
}

.h-50 {
  height: 50%;
}

.h-75 {
  height: 75%;
}

.h-100 {
  height: 100%;
}

.h-auto {
  height: auto;
}

.mh-100 {
  max-height: 100%;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.flex-direction-row {
  flex-direction: row;
}

.flex-direction-row-reverse {
  flex-direction: row-reverse;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-direction-column-reverse {
  flex-direction: column-reverse;
}

/* Creates quick margins and paddings */
/* If you want new margins add to the list below */
.m-4 {
  margin: 4px !important;
}

.mt-4 {
  margin-top: 4px !important;
}

.mr-4 {
  margin-right: 4px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.ml-4 {
  margin-left: 4px !important;
}

.mx-4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.m-6 {
  margin: 6px !important;
}

.mt-6 {
  margin-top: 6px !important;
}

.mr-6 {
  margin-right: 6px !important;
}

.mb-6 {
  margin-bottom: 6px !important;
}

.ml-6 {
  margin-left: 6px !important;
}

.mx-6 {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.my-6 {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.m-8 {
  margin: 8px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.mx-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.m-12 {
  margin: 12px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mr-12 {
  margin-right: 12px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.mx-12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.m-16 {
  margin: 16px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mr-16 {
  margin-right: 16px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.ml-16 {
  margin-left: 16px !important;
}

.mx-16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.m-24 {
  margin: 24px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mr-24 {
  margin-right: 24px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.ml-24 {
  margin-left: 24px !important;
}

.mx-24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.my-24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.m-32 {
  margin: 32px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mr-32 {
  margin-right: 32px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.ml-32 {
  margin-left: 32px !important;
}

.mx-32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.my-32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.m-40 {
  margin: 40px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mr-40 {
  margin-right: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.ml-40 {
  margin-left: 40px !important;
}

.mx-40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.my-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.m-48 {
  margin: 48px !important;
}

.mt-48 {
  margin-top: 48px !important;
}

.mr-48 {
  margin-right: 48px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.ml-48 {
  margin-left: 48px !important;
}

.mx-48 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.my-48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.m-60 {
  margin: 60px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mr-60 {
  margin-right: 60px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.ml-60 {
  margin-left: 60px !important;
}

.mx-60 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}

.my-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.m-64 {
  margin: 64px !important;
}

.mt-64 {
  margin-top: 64px !important;
}

.mr-64 {
  margin-right: 64px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

.ml-64 {
  margin-left: 64px !important;
}

.mx-64 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.my-64 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.m-80 {
  margin: 80px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.mr-80 {
  margin-right: 80px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.ml-80 {
  margin-left: 80px !important;
}

.mx-80 {
  margin-left: 80px !important;
  margin-right: 80px !important;
}

.my-80 {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}

.m-120 {
  margin: 120px !important;
}

.mt-120 {
  margin-top: 120px !important;
}

.mr-120 {
  margin-right: 120px !important;
}

.mb-120 {
  margin-bottom: 120px !important;
}

.ml-120 {
  margin-left: 120px !important;
}

.mx-120 {
  margin-left: 120px !important;
  margin-right: 120px !important;
}

.my-120 {
  margin-top: 120px !important;
  margin-bottom: 120px !important;
}

.m-144 {
  margin: 144px !important;
}

.mt-144 {
  margin-top: 144px !important;
}

.mr-144 {
  margin-right: 144px !important;
}

.mb-144 {
  margin-bottom: 144px !important;
}

.ml-144 {
  margin-left: 144px !important;
}

.mx-144 {
  margin-left: 144px !important;
  margin-right: 144px !important;
}

.my-144 {
  margin-top: 144px !important;
  margin-bottom: 144px !important;
}

.m-160 {
  margin: 160px !important;
}

.mt-160 {
  margin-top: 160px !important;
}

.mr-160 {
  margin-right: 160px !important;
}

.mb-160 {
  margin-bottom: 160px !important;
}

.ml-160 {
  margin-left: 160px !important;
}

.mx-160 {
  margin-left: 160px !important;
  margin-right: 160px !important;
}

.my-160 {
  margin-top: 160px !important;
  margin-bottom: 160px !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

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

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

@media screen and (max-width: 767px) {
  .mobile-m-4 {
    margin: 4px !important;
  }
  .mobile-mt-4 {
    margin-top: 4px !important;
  }
  .mobile-mr-4 {
    margin-right: 4px !important;
  }
  .mobile-mb-4 {
    margin-bottom: 4px !important;
  }
  .mobile-ml-4 {
    margin-left: 4px !important;
  }
  .mobile-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .mobile-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .mobile-m-6 {
    margin: 6px !important;
  }
  .mobile-mt-6 {
    margin-top: 6px !important;
  }
  .mobile-mr-6 {
    margin-right: 6px !important;
  }
  .mobile-mb-6 {
    margin-bottom: 6px !important;
  }
  .mobile-ml-6 {
    margin-left: 6px !important;
  }
  .mobile-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .mobile-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .mobile-m-8 {
    margin: 8px !important;
  }
  .mobile-mt-8 {
    margin-top: 8px !important;
  }
  .mobile-mr-8 {
    margin-right: 8px !important;
  }
  .mobile-mb-8 {
    margin-bottom: 8px !important;
  }
  .mobile-ml-8 {
    margin-left: 8px !important;
  }
  .mobile-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .mobile-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .mobile-m-12 {
    margin: 12px !important;
  }
  .mobile-mt-12 {
    margin-top: 12px !important;
  }
  .mobile-mr-12 {
    margin-right: 12px !important;
  }
  .mobile-mb-12 {
    margin-bottom: 12px !important;
  }
  .mobile-ml-12 {
    margin-left: 12px !important;
  }
  .mobile-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .mobile-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .mobile-m-16 {
    margin: 16px !important;
  }
  .mobile-mt-16 {
    margin-top: 16px !important;
  }
  .mobile-mr-16 {
    margin-right: 16px !important;
  }
  .mobile-mb-16 {
    margin-bottom: 16px !important;
  }
  .mobile-ml-16 {
    margin-left: 16px !important;
  }
  .mobile-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .mobile-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .mobile-m-24 {
    margin: 24px !important;
  }
  .mobile-mt-24 {
    margin-top: 24px !important;
  }
  .mobile-mr-24 {
    margin-right: 24px !important;
  }
  .mobile-mb-24 {
    margin-bottom: 24px !important;
  }
  .mobile-ml-24 {
    margin-left: 24px !important;
  }
  .mobile-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .mobile-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .mobile-m-32 {
    margin: 32px !important;
  }
  .mobile-mt-32 {
    margin-top: 32px !important;
  }
  .mobile-mr-32 {
    margin-right: 32px !important;
  }
  .mobile-mb-32 {
    margin-bottom: 32px !important;
  }
  .mobile-ml-32 {
    margin-left: 32px !important;
  }
  .mobile-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .mobile-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .mobile-m-40 {
    margin: 40px !important;
  }
  .mobile-mt-40 {
    margin-top: 40px !important;
  }
  .mobile-mr-40 {
    margin-right: 40px !important;
  }
  .mobile-mb-40 {
    margin-bottom: 40px !important;
  }
  .mobile-ml-40 {
    margin-left: 40px !important;
  }
  .mobile-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .mobile-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .mobile-m-48 {
    margin: 48px !important;
  }
  .mobile-mt-48 {
    margin-top: 48px !important;
  }
  .mobile-mr-48 {
    margin-right: 48px !important;
  }
  .mobile-mb-48 {
    margin-bottom: 48px !important;
  }
  .mobile-ml-48 {
    margin-left: 48px !important;
  }
  .mobile-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .mobile-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .mobile-m-60 {
    margin: 60px !important;
  }
  .mobile-mt-60 {
    margin-top: 60px !important;
  }
  .mobile-mr-60 {
    margin-right: 60px !important;
  }
  .mobile-mb-60 {
    margin-bottom: 60px !important;
  }
  .mobile-ml-60 {
    margin-left: 60px !important;
  }
  .mobile-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .mobile-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .mobile-m-64 {
    margin: 64px !important;
  }
  .mobile-mt-64 {
    margin-top: 64px !important;
  }
  .mobile-mr-64 {
    margin-right: 64px !important;
  }
  .mobile-mb-64 {
    margin-bottom: 64px !important;
  }
  .mobile-ml-64 {
    margin-left: 64px !important;
  }
  .mobile-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .mobile-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .mobile-m-80 {
    margin: 80px !important;
  }
  .mobile-mt-80 {
    margin-top: 80px !important;
  }
  .mobile-mr-80 {
    margin-right: 80px !important;
  }
  .mobile-mb-80 {
    margin-bottom: 80px !important;
  }
  .mobile-ml-80 {
    margin-left: 80px !important;
  }
  .mobile-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .mobile-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .mobile-m-120 {
    margin: 120px !important;
  }
  .mobile-mt-120 {
    margin-top: 120px !important;
  }
  .mobile-mr-120 {
    margin-right: 120px !important;
  }
  .mobile-mb-120 {
    margin-bottom: 120px !important;
  }
  .mobile-ml-120 {
    margin-left: 120px !important;
  }
  .mobile-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .mobile-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .mobile-m-144 {
    margin: 144px !important;
  }
  .mobile-mt-144 {
    margin-top: 144px !important;
  }
  .mobile-mr-144 {
    margin-right: 144px !important;
  }
  .mobile-mb-144 {
    margin-bottom: 144px !important;
  }
  .mobile-ml-144 {
    margin-left: 144px !important;
  }
  .mobile-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .mobile-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .mobile-m-160 {
    margin: 160px !important;
  }
  .mobile-mt-160 {
    margin-top: 160px !important;
  }
  .mobile-mr-160 {
    margin-right: 160px !important;
  }
  .mobile-mb-160 {
    margin-bottom: 160px !important;
  }
  .mobile-ml-160 {
    margin-left: 160px !important;
  }
  .mobile-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .mobile-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .mobile-m-auto {
    margin: auto !important;
  }
  .mobile-mt-auto {
    margin-top: auto !important;
  }
  .mobile-mr-auto {
    margin-right: auto !important;
  }
  .mobile-mb-auto {
    margin-bottom: auto !important;
  }
  .mobile-ml-auto {
    margin-left: auto !important;
  }
  .mobile-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mobile-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media screen and (min-width: 768px) {
  .tablet-m-4 {
    margin: 4px !important;
  }
  .tablet-mt-4 {
    margin-top: 4px !important;
  }
  .tablet-mr-4 {
    margin-right: 4px !important;
  }
  .tablet-mb-4 {
    margin-bottom: 4px !important;
  }
  .tablet-ml-4 {
    margin-left: 4px !important;
  }
  .tablet-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .tablet-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .tablet-m-6 {
    margin: 6px !important;
  }
  .tablet-mt-6 {
    margin-top: 6px !important;
  }
  .tablet-mr-6 {
    margin-right: 6px !important;
  }
  .tablet-mb-6 {
    margin-bottom: 6px !important;
  }
  .tablet-ml-6 {
    margin-left: 6px !important;
  }
  .tablet-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .tablet-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .tablet-m-8 {
    margin: 8px !important;
  }
  .tablet-mt-8 {
    margin-top: 8px !important;
  }
  .tablet-mr-8 {
    margin-right: 8px !important;
  }
  .tablet-mb-8 {
    margin-bottom: 8px !important;
  }
  .tablet-ml-8 {
    margin-left: 8px !important;
  }
  .tablet-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .tablet-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .tablet-m-12 {
    margin: 12px !important;
  }
  .tablet-mt-12 {
    margin-top: 12px !important;
  }
  .tablet-mr-12 {
    margin-right: 12px !important;
  }
  .tablet-mb-12 {
    margin-bottom: 12px !important;
  }
  .tablet-ml-12 {
    margin-left: 12px !important;
  }
  .tablet-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .tablet-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .tablet-m-16 {
    margin: 16px !important;
  }
  .tablet-mt-16 {
    margin-top: 16px !important;
  }
  .tablet-mr-16 {
    margin-right: 16px !important;
  }
  .tablet-mb-16 {
    margin-bottom: 16px !important;
  }
  .tablet-ml-16 {
    margin-left: 16px !important;
  }
  .tablet-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .tablet-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .tablet-m-24 {
    margin: 24px !important;
  }
  .tablet-mt-24 {
    margin-top: 24px !important;
  }
  .tablet-mr-24 {
    margin-right: 24px !important;
  }
  .tablet-mb-24 {
    margin-bottom: 24px !important;
  }
  .tablet-ml-24 {
    margin-left: 24px !important;
  }
  .tablet-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .tablet-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .tablet-m-32 {
    margin: 32px !important;
  }
  .tablet-mt-32 {
    margin-top: 32px !important;
  }
  .tablet-mr-32 {
    margin-right: 32px !important;
  }
  .tablet-mb-32 {
    margin-bottom: 32px !important;
  }
  .tablet-ml-32 {
    margin-left: 32px !important;
  }
  .tablet-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .tablet-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .tablet-m-40 {
    margin: 40px !important;
  }
  .tablet-mt-40 {
    margin-top: 40px !important;
  }
  .tablet-mr-40 {
    margin-right: 40px !important;
  }
  .tablet-mb-40 {
    margin-bottom: 40px !important;
  }
  .tablet-ml-40 {
    margin-left: 40px !important;
  }
  .tablet-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .tablet-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .tablet-m-48 {
    margin: 48px !important;
  }
  .tablet-mt-48 {
    margin-top: 48px !important;
  }
  .tablet-mr-48 {
    margin-right: 48px !important;
  }
  .tablet-mb-48 {
    margin-bottom: 48px !important;
  }
  .tablet-ml-48 {
    margin-left: 48px !important;
  }
  .tablet-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .tablet-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .tablet-m-60 {
    margin: 60px !important;
  }
  .tablet-mt-60 {
    margin-top: 60px !important;
  }
  .tablet-mr-60 {
    margin-right: 60px !important;
  }
  .tablet-mb-60 {
    margin-bottom: 60px !important;
  }
  .tablet-ml-60 {
    margin-left: 60px !important;
  }
  .tablet-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .tablet-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .tablet-m-64 {
    margin: 64px !important;
  }
  .tablet-mt-64 {
    margin-top: 64px !important;
  }
  .tablet-mr-64 {
    margin-right: 64px !important;
  }
  .tablet-mb-64 {
    margin-bottom: 64px !important;
  }
  .tablet-ml-64 {
    margin-left: 64px !important;
  }
  .tablet-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .tablet-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .tablet-m-80 {
    margin: 80px !important;
  }
  .tablet-mt-80 {
    margin-top: 80px !important;
  }
  .tablet-mr-80 {
    margin-right: 80px !important;
  }
  .tablet-mb-80 {
    margin-bottom: 80px !important;
  }
  .tablet-ml-80 {
    margin-left: 80px !important;
  }
  .tablet-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .tablet-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .tablet-m-120 {
    margin: 120px !important;
  }
  .tablet-mt-120 {
    margin-top: 120px !important;
  }
  .tablet-mr-120 {
    margin-right: 120px !important;
  }
  .tablet-mb-120 {
    margin-bottom: 120px !important;
  }
  .tablet-ml-120 {
    margin-left: 120px !important;
  }
  .tablet-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .tablet-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .tablet-m-144 {
    margin: 144px !important;
  }
  .tablet-mt-144 {
    margin-top: 144px !important;
  }
  .tablet-mr-144 {
    margin-right: 144px !important;
  }
  .tablet-mb-144 {
    margin-bottom: 144px !important;
  }
  .tablet-ml-144 {
    margin-left: 144px !important;
  }
  .tablet-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .tablet-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .tablet-m-160 {
    margin: 160px !important;
  }
  .tablet-mt-160 {
    margin-top: 160px !important;
  }
  .tablet-mr-160 {
    margin-right: 160px !important;
  }
  .tablet-mb-160 {
    margin-bottom: 160px !important;
  }
  .tablet-ml-160 {
    margin-left: 160px !important;
  }
  .tablet-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .tablet-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .tablet-m-auto {
    margin: auto !important;
  }
  .tablet-mt-auto {
    margin-top: auto !important;
  }
  .tablet-mr-auto {
    margin-right: auto !important;
  }
  .tablet-mb-auto {
    margin-bottom: auto !important;
  }
  .tablet-ml-auto {
    margin-left: auto !important;
  }
  .tablet-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tablet-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-only-m-4 {
    margin: 4px !important;
  }
  .tablet-only-mt-4 {
    margin-top: 4px !important;
  }
  .tablet-only-mr-4 {
    margin-right: 4px !important;
  }
  .tablet-only-mb-4 {
    margin-bottom: 4px !important;
  }
  .tablet-only-ml-4 {
    margin-left: 4px !important;
  }
  .tablet-only-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .tablet-only-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .tablet-only-m-6 {
    margin: 6px !important;
  }
  .tablet-only-mt-6 {
    margin-top: 6px !important;
  }
  .tablet-only-mr-6 {
    margin-right: 6px !important;
  }
  .tablet-only-mb-6 {
    margin-bottom: 6px !important;
  }
  .tablet-only-ml-6 {
    margin-left: 6px !important;
  }
  .tablet-only-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .tablet-only-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .tablet-only-m-8 {
    margin: 8px !important;
  }
  .tablet-only-mt-8 {
    margin-top: 8px !important;
  }
  .tablet-only-mr-8 {
    margin-right: 8px !important;
  }
  .tablet-only-mb-8 {
    margin-bottom: 8px !important;
  }
  .tablet-only-ml-8 {
    margin-left: 8px !important;
  }
  .tablet-only-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .tablet-only-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .tablet-only-m-12 {
    margin: 12px !important;
  }
  .tablet-only-mt-12 {
    margin-top: 12px !important;
  }
  .tablet-only-mr-12 {
    margin-right: 12px !important;
  }
  .tablet-only-mb-12 {
    margin-bottom: 12px !important;
  }
  .tablet-only-ml-12 {
    margin-left: 12px !important;
  }
  .tablet-only-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .tablet-only-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .tablet-only-m-16 {
    margin: 16px !important;
  }
  .tablet-only-mt-16 {
    margin-top: 16px !important;
  }
  .tablet-only-mr-16 {
    margin-right: 16px !important;
  }
  .tablet-only-mb-16 {
    margin-bottom: 16px !important;
  }
  .tablet-only-ml-16 {
    margin-left: 16px !important;
  }
  .tablet-only-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .tablet-only-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .tablet-only-m-24 {
    margin: 24px !important;
  }
  .tablet-only-mt-24 {
    margin-top: 24px !important;
  }
  .tablet-only-mr-24 {
    margin-right: 24px !important;
  }
  .tablet-only-mb-24 {
    margin-bottom: 24px !important;
  }
  .tablet-only-ml-24 {
    margin-left: 24px !important;
  }
  .tablet-only-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .tablet-only-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .tablet-only-m-32 {
    margin: 32px !important;
  }
  .tablet-only-mt-32 {
    margin-top: 32px !important;
  }
  .tablet-only-mr-32 {
    margin-right: 32px !important;
  }
  .tablet-only-mb-32 {
    margin-bottom: 32px !important;
  }
  .tablet-only-ml-32 {
    margin-left: 32px !important;
  }
  .tablet-only-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .tablet-only-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .tablet-only-m-40 {
    margin: 40px !important;
  }
  .tablet-only-mt-40 {
    margin-top: 40px !important;
  }
  .tablet-only-mr-40 {
    margin-right: 40px !important;
  }
  .tablet-only-mb-40 {
    margin-bottom: 40px !important;
  }
  .tablet-only-ml-40 {
    margin-left: 40px !important;
  }
  .tablet-only-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .tablet-only-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .tablet-only-m-48 {
    margin: 48px !important;
  }
  .tablet-only-mt-48 {
    margin-top: 48px !important;
  }
  .tablet-only-mr-48 {
    margin-right: 48px !important;
  }
  .tablet-only-mb-48 {
    margin-bottom: 48px !important;
  }
  .tablet-only-ml-48 {
    margin-left: 48px !important;
  }
  .tablet-only-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .tablet-only-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .tablet-only-m-60 {
    margin: 60px !important;
  }
  .tablet-only-mt-60 {
    margin-top: 60px !important;
  }
  .tablet-only-mr-60 {
    margin-right: 60px !important;
  }
  .tablet-only-mb-60 {
    margin-bottom: 60px !important;
  }
  .tablet-only-ml-60 {
    margin-left: 60px !important;
  }
  .tablet-only-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .tablet-only-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .tablet-only-m-64 {
    margin: 64px !important;
  }
  .tablet-only-mt-64 {
    margin-top: 64px !important;
  }
  .tablet-only-mr-64 {
    margin-right: 64px !important;
  }
  .tablet-only-mb-64 {
    margin-bottom: 64px !important;
  }
  .tablet-only-ml-64 {
    margin-left: 64px !important;
  }
  .tablet-only-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .tablet-only-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .tablet-only-m-80 {
    margin: 80px !important;
  }
  .tablet-only-mt-80 {
    margin-top: 80px !important;
  }
  .tablet-only-mr-80 {
    margin-right: 80px !important;
  }
  .tablet-only-mb-80 {
    margin-bottom: 80px !important;
  }
  .tablet-only-ml-80 {
    margin-left: 80px !important;
  }
  .tablet-only-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .tablet-only-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .tablet-only-m-120 {
    margin: 120px !important;
  }
  .tablet-only-mt-120 {
    margin-top: 120px !important;
  }
  .tablet-only-mr-120 {
    margin-right: 120px !important;
  }
  .tablet-only-mb-120 {
    margin-bottom: 120px !important;
  }
  .tablet-only-ml-120 {
    margin-left: 120px !important;
  }
  .tablet-only-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .tablet-only-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .tablet-only-m-144 {
    margin: 144px !important;
  }
  .tablet-only-mt-144 {
    margin-top: 144px !important;
  }
  .tablet-only-mr-144 {
    margin-right: 144px !important;
  }
  .tablet-only-mb-144 {
    margin-bottom: 144px !important;
  }
  .tablet-only-ml-144 {
    margin-left: 144px !important;
  }
  .tablet-only-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .tablet-only-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .tablet-only-m-160 {
    margin: 160px !important;
  }
  .tablet-only-mt-160 {
    margin-top: 160px !important;
  }
  .tablet-only-mr-160 {
    margin-right: 160px !important;
  }
  .tablet-only-mb-160 {
    margin-bottom: 160px !important;
  }
  .tablet-only-ml-160 {
    margin-left: 160px !important;
  }
  .tablet-only-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .tablet-only-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .tablet-only-m-auto {
    margin: auto !important;
  }
  .tablet-only-mt-auto {
    margin-top: auto !important;
  }
  .tablet-only-mr-auto {
    margin-right: auto !important;
  }
  .tablet-only-mb-auto {
    margin-bottom: auto !important;
  }
  .tablet-only-ml-auto {
    margin-left: auto !important;
  }
  .tablet-only-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tablet-only-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media screen and (max-width: 1023px) {
  .touch-m-4 {
    margin: 4px !important;
  }
  .touch-mt-4 {
    margin-top: 4px !important;
  }
  .touch-mr-4 {
    margin-right: 4px !important;
  }
  .touch-mb-4 {
    margin-bottom: 4px !important;
  }
  .touch-ml-4 {
    margin-left: 4px !important;
  }
  .touch-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .touch-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .touch-m-6 {
    margin: 6px !important;
  }
  .touch-mt-6 {
    margin-top: 6px !important;
  }
  .touch-mr-6 {
    margin-right: 6px !important;
  }
  .touch-mb-6 {
    margin-bottom: 6px !important;
  }
  .touch-ml-6 {
    margin-left: 6px !important;
  }
  .touch-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .touch-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .touch-m-8 {
    margin: 8px !important;
  }
  .touch-mt-8 {
    margin-top: 8px !important;
  }
  .touch-mr-8 {
    margin-right: 8px !important;
  }
  .touch-mb-8 {
    margin-bottom: 8px !important;
  }
  .touch-ml-8 {
    margin-left: 8px !important;
  }
  .touch-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .touch-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .touch-m-12 {
    margin: 12px !important;
  }
  .touch-mt-12 {
    margin-top: 12px !important;
  }
  .touch-mr-12 {
    margin-right: 12px !important;
  }
  .touch-mb-12 {
    margin-bottom: 12px !important;
  }
  .touch-ml-12 {
    margin-left: 12px !important;
  }
  .touch-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .touch-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .touch-m-16 {
    margin: 16px !important;
  }
  .touch-mt-16 {
    margin-top: 16px !important;
  }
  .touch-mr-16 {
    margin-right: 16px !important;
  }
  .touch-mb-16 {
    margin-bottom: 16px !important;
  }
  .touch-ml-16 {
    margin-left: 16px !important;
  }
  .touch-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .touch-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .touch-m-24 {
    margin: 24px !important;
  }
  .touch-mt-24 {
    margin-top: 24px !important;
  }
  .touch-mr-24 {
    margin-right: 24px !important;
  }
  .touch-mb-24 {
    margin-bottom: 24px !important;
  }
  .touch-ml-24 {
    margin-left: 24px !important;
  }
  .touch-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .touch-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .touch-m-32 {
    margin: 32px !important;
  }
  .touch-mt-32 {
    margin-top: 32px !important;
  }
  .touch-mr-32 {
    margin-right: 32px !important;
  }
  .touch-mb-32 {
    margin-bottom: 32px !important;
  }
  .touch-ml-32 {
    margin-left: 32px !important;
  }
  .touch-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .touch-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .touch-m-40 {
    margin: 40px !important;
  }
  .touch-mt-40 {
    margin-top: 40px !important;
  }
  .touch-mr-40 {
    margin-right: 40px !important;
  }
  .touch-mb-40 {
    margin-bottom: 40px !important;
  }
  .touch-ml-40 {
    margin-left: 40px !important;
  }
  .touch-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .touch-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .touch-m-48 {
    margin: 48px !important;
  }
  .touch-mt-48 {
    margin-top: 48px !important;
  }
  .touch-mr-48 {
    margin-right: 48px !important;
  }
  .touch-mb-48 {
    margin-bottom: 48px !important;
  }
  .touch-ml-48 {
    margin-left: 48px !important;
  }
  .touch-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .touch-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .touch-m-60 {
    margin: 60px !important;
  }
  .touch-mt-60 {
    margin-top: 60px !important;
  }
  .touch-mr-60 {
    margin-right: 60px !important;
  }
  .touch-mb-60 {
    margin-bottom: 60px !important;
  }
  .touch-ml-60 {
    margin-left: 60px !important;
  }
  .touch-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .touch-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .touch-m-64 {
    margin: 64px !important;
  }
  .touch-mt-64 {
    margin-top: 64px !important;
  }
  .touch-mr-64 {
    margin-right: 64px !important;
  }
  .touch-mb-64 {
    margin-bottom: 64px !important;
  }
  .touch-ml-64 {
    margin-left: 64px !important;
  }
  .touch-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .touch-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .touch-m-80 {
    margin: 80px !important;
  }
  .touch-mt-80 {
    margin-top: 80px !important;
  }
  .touch-mr-80 {
    margin-right: 80px !important;
  }
  .touch-mb-80 {
    margin-bottom: 80px !important;
  }
  .touch-ml-80 {
    margin-left: 80px !important;
  }
  .touch-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .touch-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .touch-m-120 {
    margin: 120px !important;
  }
  .touch-mt-120 {
    margin-top: 120px !important;
  }
  .touch-mr-120 {
    margin-right: 120px !important;
  }
  .touch-mb-120 {
    margin-bottom: 120px !important;
  }
  .touch-ml-120 {
    margin-left: 120px !important;
  }
  .touch-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .touch-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .touch-m-144 {
    margin: 144px !important;
  }
  .touch-mt-144 {
    margin-top: 144px !important;
  }
  .touch-mr-144 {
    margin-right: 144px !important;
  }
  .touch-mb-144 {
    margin-bottom: 144px !important;
  }
  .touch-ml-144 {
    margin-left: 144px !important;
  }
  .touch-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .touch-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .touch-m-160 {
    margin: 160px !important;
  }
  .touch-mt-160 {
    margin-top: 160px !important;
  }
  .touch-mr-160 {
    margin-right: 160px !important;
  }
  .touch-mb-160 {
    margin-bottom: 160px !important;
  }
  .touch-ml-160 {
    margin-left: 160px !important;
  }
  .touch-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .touch-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .touch-m-auto {
    margin: auto !important;
  }
  .touch-mt-auto {
    margin-top: auto !important;
  }
  .touch-mr-auto {
    margin-right: auto !important;
  }
  .touch-mb-auto {
    margin-bottom: auto !important;
  }
  .touch-ml-auto {
    margin-left: auto !important;
  }
  .touch-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .touch-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop-m-4 {
    margin: 4px !important;
  }
  .desktop-mt-4 {
    margin-top: 4px !important;
  }
  .desktop-mr-4 {
    margin-right: 4px !important;
  }
  .desktop-mb-4 {
    margin-bottom: 4px !important;
  }
  .desktop-ml-4 {
    margin-left: 4px !important;
  }
  .desktop-mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .desktop-my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
  .desktop-m-6 {
    margin: 6px !important;
  }
  .desktop-mt-6 {
    margin-top: 6px !important;
  }
  .desktop-mr-6 {
    margin-right: 6px !important;
  }
  .desktop-mb-6 {
    margin-bottom: 6px !important;
  }
  .desktop-ml-6 {
    margin-left: 6px !important;
  }
  .desktop-mx-6 {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
  .desktop-my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .desktop-m-8 {
    margin: 8px !important;
  }
  .desktop-mt-8 {
    margin-top: 8px !important;
  }
  .desktop-mr-8 {
    margin-right: 8px !important;
  }
  .desktop-mb-8 {
    margin-bottom: 8px !important;
  }
  .desktop-ml-8 {
    margin-left: 8px !important;
  }
  .desktop-mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .desktop-my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
  .desktop-m-12 {
    margin: 12px !important;
  }
  .desktop-mt-12 {
    margin-top: 12px !important;
  }
  .desktop-mr-12 {
    margin-right: 12px !important;
  }
  .desktop-mb-12 {
    margin-bottom: 12px !important;
  }
  .desktop-ml-12 {
    margin-left: 12px !important;
  }
  .desktop-mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  .desktop-my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .desktop-m-16 {
    margin: 16px !important;
  }
  .desktop-mt-16 {
    margin-top: 16px !important;
  }
  .desktop-mr-16 {
    margin-right: 16px !important;
  }
  .desktop-mb-16 {
    margin-bottom: 16px !important;
  }
  .desktop-ml-16 {
    margin-left: 16px !important;
  }
  .desktop-mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .desktop-my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .desktop-m-24 {
    margin: 24px !important;
  }
  .desktop-mt-24 {
    margin-top: 24px !important;
  }
  .desktop-mr-24 {
    margin-right: 24px !important;
  }
  .desktop-mb-24 {
    margin-bottom: 24px !important;
  }
  .desktop-ml-24 {
    margin-left: 24px !important;
  }
  .desktop-mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
  .desktop-my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .desktop-m-32 {
    margin: 32px !important;
  }
  .desktop-mt-32 {
    margin-top: 32px !important;
  }
  .desktop-mr-32 {
    margin-right: 32px !important;
  }
  .desktop-mb-32 {
    margin-bottom: 32px !important;
  }
  .desktop-ml-32 {
    margin-left: 32px !important;
  }
  .desktop-mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
  }
  .desktop-my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
  }
  .desktop-m-40 {
    margin: 40px !important;
  }
  .desktop-mt-40 {
    margin-top: 40px !important;
  }
  .desktop-mr-40 {
    margin-right: 40px !important;
  }
  .desktop-mb-40 {
    margin-bottom: 40px !important;
  }
  .desktop-ml-40 {
    margin-left: 40px !important;
  }
  .desktop-mx-40 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
  .desktop-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .desktop-m-48 {
    margin: 48px !important;
  }
  .desktop-mt-48 {
    margin-top: 48px !important;
  }
  .desktop-mr-48 {
    margin-right: 48px !important;
  }
  .desktop-mb-48 {
    margin-bottom: 48px !important;
  }
  .desktop-ml-48 {
    margin-left: 48px !important;
  }
  .desktop-mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  .desktop-my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
  }
  .desktop-m-60 {
    margin: 60px !important;
  }
  .desktop-mt-60 {
    margin-top: 60px !important;
  }
  .desktop-mr-60 {
    margin-right: 60px !important;
  }
  .desktop-mb-60 {
    margin-bottom: 60px !important;
  }
  .desktop-ml-60 {
    margin-left: 60px !important;
  }
  .desktop-mx-60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
  }
  .desktop-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .desktop-m-64 {
    margin: 64px !important;
  }
  .desktop-mt-64 {
    margin-top: 64px !important;
  }
  .desktop-mr-64 {
    margin-right: 64px !important;
  }
  .desktop-mb-64 {
    margin-bottom: 64px !important;
  }
  .desktop-ml-64 {
    margin-left: 64px !important;
  }
  .desktop-mx-64 {
    margin-left: 64px !important;
    margin-right: 64px !important;
  }
  .desktop-my-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
  }
  .desktop-m-80 {
    margin: 80px !important;
  }
  .desktop-mt-80 {
    margin-top: 80px !important;
  }
  .desktop-mr-80 {
    margin-right: 80px !important;
  }
  .desktop-mb-80 {
    margin-bottom: 80px !important;
  }
  .desktop-ml-80 {
    margin-left: 80px !important;
  }
  .desktop-mx-80 {
    margin-left: 80px !important;
    margin-right: 80px !important;
  }
  .desktop-my-80 {
    margin-top: 80px !important;
    margin-bottom: 80px !important;
  }
  .desktop-m-120 {
    margin: 120px !important;
  }
  .desktop-mt-120 {
    margin-top: 120px !important;
  }
  .desktop-mr-120 {
    margin-right: 120px !important;
  }
  .desktop-mb-120 {
    margin-bottom: 120px !important;
  }
  .desktop-ml-120 {
    margin-left: 120px !important;
  }
  .desktop-mx-120 {
    margin-left: 120px !important;
    margin-right: 120px !important;
  }
  .desktop-my-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .desktop-m-144 {
    margin: 144px !important;
  }
  .desktop-mt-144 {
    margin-top: 144px !important;
  }
  .desktop-mr-144 {
    margin-right: 144px !important;
  }
  .desktop-mb-144 {
    margin-bottom: 144px !important;
  }
  .desktop-ml-144 {
    margin-left: 144px !important;
  }
  .desktop-mx-144 {
    margin-left: 144px !important;
    margin-right: 144px !important;
  }
  .desktop-my-144 {
    margin-top: 144px !important;
    margin-bottom: 144px !important;
  }
  .desktop-m-160 {
    margin: 160px !important;
  }
  .desktop-mt-160 {
    margin-top: 160px !important;
  }
  .desktop-mr-160 {
    margin-right: 160px !important;
  }
  .desktop-mb-160 {
    margin-bottom: 160px !important;
  }
  .desktop-ml-160 {
    margin-left: 160px !important;
  }
  .desktop-mx-160 {
    margin-left: 160px !important;
    margin-right: 160px !important;
  }
  .desktop-my-160 {
    margin-top: 160px !important;
    margin-bottom: 160px !important;
  }
  .desktop-m-auto {
    margin: auto !important;
  }
  .desktop-mt-auto {
    margin-top: auto !important;
  }
  .desktop-mr-auto {
    margin-right: auto !important;
  }
  .desktop-mb-auto {
    margin-bottom: auto !important;
  }
  .desktop-ml-auto {
    margin-left: auto !important;
  }
  .desktop-mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .desktop-my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
.p-4 {
  padding: 4px !important;
}

.pt-4 {
  padding-top: 4px !important;
}

.pr-4 {
  padding-right: 4px !important;
}

.pb-4 {
  padding-bottom: 4px !important;
}

.pl-4 {
  padding-left: 4px !important;
}

.px-4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.py-4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.p-6 {
  padding: 6px !important;
}

.pt-6 {
  padding-top: 6px !important;
}

.pr-6 {
  padding-right: 6px !important;
}

.pb-6 {
  padding-bottom: 6px !important;
}

.pl-6 {
  padding-left: 6px !important;
}

.px-6 {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.py-6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.p-8 {
  padding: 8px !important;
}

.pt-8 {
  padding-top: 8px !important;
}

.pr-8 {
  padding-right: 8px !important;
}

.pb-8 {
  padding-bottom: 8px !important;
}

.pl-8 {
  padding-left: 8px !important;
}

.px-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.py-8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.p-12 {
  padding: 12px !important;
}

.pt-12 {
  padding-top: 12px !important;
}

.pr-12 {
  padding-right: 12px !important;
}

.pb-12 {
  padding-bottom: 12px !important;
}

.pl-12 {
  padding-left: 12px !important;
}

.px-12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.py-12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.p-16 {
  padding: 16px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.pl-16 {
  padding-left: 16px !important;
}

.px-16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.py-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.p-24 {
  padding: 24px !important;
}

.pt-24 {
  padding-top: 24px !important;
}

.pr-24 {
  padding-right: 24px !important;
}

.pb-24 {
  padding-bottom: 24px !important;
}

.pl-24 {
  padding-left: 24px !important;
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.p-32 {
  padding: 32px !important;
}

.pt-32 {
  padding-top: 32px !important;
}

.pr-32 {
  padding-right: 32px !important;
}

.pb-32 {
  padding-bottom: 32px !important;
}

.pl-32 {
  padding-left: 32px !important;
}

.px-32 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.py-32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.p-40 {
  padding: 40px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.px-40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.py-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.p-48 {
  padding: 48px !important;
}

.pt-48 {
  padding-top: 48px !important;
}

.pr-48 {
  padding-right: 48px !important;
}

.pb-48 {
  padding-bottom: 48px !important;
}

.pl-48 {
  padding-left: 48px !important;
}

.px-48 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.py-48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.p-60 {
  padding: 60px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pr-60 {
  padding-right: 60px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.pl-60 {
  padding-left: 60px !important;
}

.px-60 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

.py-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.p-64 {
  padding: 64px !important;
}

.pt-64 {
  padding-top: 64px !important;
}

.pr-64 {
  padding-right: 64px !important;
}

.pb-64 {
  padding-bottom: 64px !important;
}

.pl-64 {
  padding-left: 64px !important;
}

.px-64 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.py-64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.p-80 {
  padding: 80px !important;
}

.pt-80 {
  padding-top: 80px !important;
}

.pr-80 {
  padding-right: 80px !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.pl-80 {
  padding-left: 80px !important;
}

.px-80 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.py-80 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.p-120 {
  padding: 120px !important;
}

.pt-120 {
  padding-top: 120px !important;
}

.pr-120 {
  padding-right: 120px !important;
}

.pb-120 {
  padding-bottom: 120px !important;
}

.pl-120 {
  padding-left: 120px !important;
}

.px-120 {
  padding-left: 120px !important;
  padding-right: 120px !important;
}

.py-120 {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

.p-144 {
  padding: 144px !important;
}

.pt-144 {
  padding-top: 144px !important;
}

.pr-144 {
  padding-right: 144px !important;
}

.pb-144 {
  padding-bottom: 144px !important;
}

.pl-144 {
  padding-left: 144px !important;
}

.px-144 {
  padding-left: 144px !important;
  padding-right: 144px !important;
}

.py-144 {
  padding-top: 144px !important;
  padding-bottom: 144px !important;
}

.p-160 {
  padding: 160px !important;
}

.pt-160 {
  padding-top: 160px !important;
}

.pr-160 {
  padding-right: 160px !important;
}

.pb-160 {
  padding-bottom: 160px !important;
}

.pl-160 {
  padding-left: 160px !important;
}

.px-160 {
  padding-left: 160px !important;
  padding-right: 160px !important;
}

.py-160 {
  padding-top: 160px !important;
  padding-bottom: 160px !important;
}

.p-auto {
  padding: auto !important;
}

.pt-auto {
  padding-top: auto !important;
}

.pr-auto {
  padding-right: auto !important;
}

.pb-auto {
  padding-bottom: auto !important;
}

.pl-auto {
  padding-left: auto !important;
}

.px-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.py-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}

@media screen and (max-width: 767px) {
  .mobile-p-4 {
    padding: 4px !important;
  }
  .mobile-pt-4 {
    padding-top: 4px !important;
  }
  .mobile-pr-4 {
    padding-right: 4px !important;
  }
  .mobile-pb-4 {
    padding-bottom: 4px !important;
  }
  .mobile-pl-4 {
    padding-left: 4px !important;
  }
  .mobile-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .mobile-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .mobile-p-6 {
    padding: 6px !important;
  }
  .mobile-pt-6 {
    padding-top: 6px !important;
  }
  .mobile-pr-6 {
    padding-right: 6px !important;
  }
  .mobile-pb-6 {
    padding-bottom: 6px !important;
  }
  .mobile-pl-6 {
    padding-left: 6px !important;
  }
  .mobile-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .mobile-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .mobile-p-8 {
    padding: 8px !important;
  }
  .mobile-pt-8 {
    padding-top: 8px !important;
  }
  .mobile-pr-8 {
    padding-right: 8px !important;
  }
  .mobile-pb-8 {
    padding-bottom: 8px !important;
  }
  .mobile-pl-8 {
    padding-left: 8px !important;
  }
  .mobile-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .mobile-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .mobile-p-12 {
    padding: 12px !important;
  }
  .mobile-pt-12 {
    padding-top: 12px !important;
  }
  .mobile-pr-12 {
    padding-right: 12px !important;
  }
  .mobile-pb-12 {
    padding-bottom: 12px !important;
  }
  .mobile-pl-12 {
    padding-left: 12px !important;
  }
  .mobile-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .mobile-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .mobile-p-16 {
    padding: 16px !important;
  }
  .mobile-pt-16 {
    padding-top: 16px !important;
  }
  .mobile-pr-16 {
    padding-right: 16px !important;
  }
  .mobile-pb-16 {
    padding-bottom: 16px !important;
  }
  .mobile-pl-16 {
    padding-left: 16px !important;
  }
  .mobile-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .mobile-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .mobile-p-24 {
    padding: 24px !important;
  }
  .mobile-pt-24 {
    padding-top: 24px !important;
  }
  .mobile-pr-24 {
    padding-right: 24px !important;
  }
  .mobile-pb-24 {
    padding-bottom: 24px !important;
  }
  .mobile-pl-24 {
    padding-left: 24px !important;
  }
  .mobile-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mobile-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .mobile-p-32 {
    padding: 32px !important;
  }
  .mobile-pt-32 {
    padding-top: 32px !important;
  }
  .mobile-pr-32 {
    padding-right: 32px !important;
  }
  .mobile-pb-32 {
    padding-bottom: 32px !important;
  }
  .mobile-pl-32 {
    padding-left: 32px !important;
  }
  .mobile-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .mobile-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .mobile-p-40 {
    padding: 40px !important;
  }
  .mobile-pt-40 {
    padding-top: 40px !important;
  }
  .mobile-pr-40 {
    padding-right: 40px !important;
  }
  .mobile-pb-40 {
    padding-bottom: 40px !important;
  }
  .mobile-pl-40 {
    padding-left: 40px !important;
  }
  .mobile-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .mobile-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .mobile-p-48 {
    padding: 48px !important;
  }
  .mobile-pt-48 {
    padding-top: 48px !important;
  }
  .mobile-pr-48 {
    padding-right: 48px !important;
  }
  .mobile-pb-48 {
    padding-bottom: 48px !important;
  }
  .mobile-pl-48 {
    padding-left: 48px !important;
  }
  .mobile-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .mobile-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .mobile-p-60 {
    padding: 60px !important;
  }
  .mobile-pt-60 {
    padding-top: 60px !important;
  }
  .mobile-pr-60 {
    padding-right: 60px !important;
  }
  .mobile-pb-60 {
    padding-bottom: 60px !important;
  }
  .mobile-pl-60 {
    padding-left: 60px !important;
  }
  .mobile-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .mobile-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .mobile-p-64 {
    padding: 64px !important;
  }
  .mobile-pt-64 {
    padding-top: 64px !important;
  }
  .mobile-pr-64 {
    padding-right: 64px !important;
  }
  .mobile-pb-64 {
    padding-bottom: 64px !important;
  }
  .mobile-pl-64 {
    padding-left: 64px !important;
  }
  .mobile-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .mobile-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .mobile-p-80 {
    padding: 80px !important;
  }
  .mobile-pt-80 {
    padding-top: 80px !important;
  }
  .mobile-pr-80 {
    padding-right: 80px !important;
  }
  .mobile-pb-80 {
    padding-bottom: 80px !important;
  }
  .mobile-pl-80 {
    padding-left: 80px !important;
  }
  .mobile-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .mobile-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .mobile-p-120 {
    padding: 120px !important;
  }
  .mobile-pt-120 {
    padding-top: 120px !important;
  }
  .mobile-pr-120 {
    padding-right: 120px !important;
  }
  .mobile-pb-120 {
    padding-bottom: 120px !important;
  }
  .mobile-pl-120 {
    padding-left: 120px !important;
  }
  .mobile-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .mobile-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .mobile-p-144 {
    padding: 144px !important;
  }
  .mobile-pt-144 {
    padding-top: 144px !important;
  }
  .mobile-pr-144 {
    padding-right: 144px !important;
  }
  .mobile-pb-144 {
    padding-bottom: 144px !important;
  }
  .mobile-pl-144 {
    padding-left: 144px !important;
  }
  .mobile-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .mobile-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .mobile-p-160 {
    padding: 160px !important;
  }
  .mobile-pt-160 {
    padding-top: 160px !important;
  }
  .mobile-pr-160 {
    padding-right: 160px !important;
  }
  .mobile-pb-160 {
    padding-bottom: 160px !important;
  }
  .mobile-pl-160 {
    padding-left: 160px !important;
  }
  .mobile-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .mobile-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .mobile-p-auto {
    padding: auto !important;
  }
  .mobile-pt-auto {
    padding-top: auto !important;
  }
  .mobile-pr-auto {
    padding-right: auto !important;
  }
  .mobile-pb-auto {
    padding-bottom: auto !important;
  }
  .mobile-pl-auto {
    padding-left: auto !important;
  }
  .mobile-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .mobile-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
@media screen and (min-width: 768px) {
  .tablet-p-4 {
    padding: 4px !important;
  }
  .tablet-pt-4 {
    padding-top: 4px !important;
  }
  .tablet-pr-4 {
    padding-right: 4px !important;
  }
  .tablet-pb-4 {
    padding-bottom: 4px !important;
  }
  .tablet-pl-4 {
    padding-left: 4px !important;
  }
  .tablet-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .tablet-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .tablet-p-6 {
    padding: 6px !important;
  }
  .tablet-pt-6 {
    padding-top: 6px !important;
  }
  .tablet-pr-6 {
    padding-right: 6px !important;
  }
  .tablet-pb-6 {
    padding-bottom: 6px !important;
  }
  .tablet-pl-6 {
    padding-left: 6px !important;
  }
  .tablet-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .tablet-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .tablet-p-8 {
    padding: 8px !important;
  }
  .tablet-pt-8 {
    padding-top: 8px !important;
  }
  .tablet-pr-8 {
    padding-right: 8px !important;
  }
  .tablet-pb-8 {
    padding-bottom: 8px !important;
  }
  .tablet-pl-8 {
    padding-left: 8px !important;
  }
  .tablet-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .tablet-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .tablet-p-12 {
    padding: 12px !important;
  }
  .tablet-pt-12 {
    padding-top: 12px !important;
  }
  .tablet-pr-12 {
    padding-right: 12px !important;
  }
  .tablet-pb-12 {
    padding-bottom: 12px !important;
  }
  .tablet-pl-12 {
    padding-left: 12px !important;
  }
  .tablet-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .tablet-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .tablet-p-16 {
    padding: 16px !important;
  }
  .tablet-pt-16 {
    padding-top: 16px !important;
  }
  .tablet-pr-16 {
    padding-right: 16px !important;
  }
  .tablet-pb-16 {
    padding-bottom: 16px !important;
  }
  .tablet-pl-16 {
    padding-left: 16px !important;
  }
  .tablet-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .tablet-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .tablet-p-24 {
    padding: 24px !important;
  }
  .tablet-pt-24 {
    padding-top: 24px !important;
  }
  .tablet-pr-24 {
    padding-right: 24px !important;
  }
  .tablet-pb-24 {
    padding-bottom: 24px !important;
  }
  .tablet-pl-24 {
    padding-left: 24px !important;
  }
  .tablet-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .tablet-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .tablet-p-32 {
    padding: 32px !important;
  }
  .tablet-pt-32 {
    padding-top: 32px !important;
  }
  .tablet-pr-32 {
    padding-right: 32px !important;
  }
  .tablet-pb-32 {
    padding-bottom: 32px !important;
  }
  .tablet-pl-32 {
    padding-left: 32px !important;
  }
  .tablet-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .tablet-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .tablet-p-40 {
    padding: 40px !important;
  }
  .tablet-pt-40 {
    padding-top: 40px !important;
  }
  .tablet-pr-40 {
    padding-right: 40px !important;
  }
  .tablet-pb-40 {
    padding-bottom: 40px !important;
  }
  .tablet-pl-40 {
    padding-left: 40px !important;
  }
  .tablet-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .tablet-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .tablet-p-48 {
    padding: 48px !important;
  }
  .tablet-pt-48 {
    padding-top: 48px !important;
  }
  .tablet-pr-48 {
    padding-right: 48px !important;
  }
  .tablet-pb-48 {
    padding-bottom: 48px !important;
  }
  .tablet-pl-48 {
    padding-left: 48px !important;
  }
  .tablet-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .tablet-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .tablet-p-60 {
    padding: 60px !important;
  }
  .tablet-pt-60 {
    padding-top: 60px !important;
  }
  .tablet-pr-60 {
    padding-right: 60px !important;
  }
  .tablet-pb-60 {
    padding-bottom: 60px !important;
  }
  .tablet-pl-60 {
    padding-left: 60px !important;
  }
  .tablet-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .tablet-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .tablet-p-64 {
    padding: 64px !important;
  }
  .tablet-pt-64 {
    padding-top: 64px !important;
  }
  .tablet-pr-64 {
    padding-right: 64px !important;
  }
  .tablet-pb-64 {
    padding-bottom: 64px !important;
  }
  .tablet-pl-64 {
    padding-left: 64px !important;
  }
  .tablet-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .tablet-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .tablet-p-80 {
    padding: 80px !important;
  }
  .tablet-pt-80 {
    padding-top: 80px !important;
  }
  .tablet-pr-80 {
    padding-right: 80px !important;
  }
  .tablet-pb-80 {
    padding-bottom: 80px !important;
  }
  .tablet-pl-80 {
    padding-left: 80px !important;
  }
  .tablet-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .tablet-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .tablet-p-120 {
    padding: 120px !important;
  }
  .tablet-pt-120 {
    padding-top: 120px !important;
  }
  .tablet-pr-120 {
    padding-right: 120px !important;
  }
  .tablet-pb-120 {
    padding-bottom: 120px !important;
  }
  .tablet-pl-120 {
    padding-left: 120px !important;
  }
  .tablet-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .tablet-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .tablet-p-144 {
    padding: 144px !important;
  }
  .tablet-pt-144 {
    padding-top: 144px !important;
  }
  .tablet-pr-144 {
    padding-right: 144px !important;
  }
  .tablet-pb-144 {
    padding-bottom: 144px !important;
  }
  .tablet-pl-144 {
    padding-left: 144px !important;
  }
  .tablet-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .tablet-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .tablet-p-160 {
    padding: 160px !important;
  }
  .tablet-pt-160 {
    padding-top: 160px !important;
  }
  .tablet-pr-160 {
    padding-right: 160px !important;
  }
  .tablet-pb-160 {
    padding-bottom: 160px !important;
  }
  .tablet-pl-160 {
    padding-left: 160px !important;
  }
  .tablet-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .tablet-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .tablet-p-auto {
    padding: auto !important;
  }
  .tablet-pt-auto {
    padding-top: auto !important;
  }
  .tablet-pr-auto {
    padding-right: auto !important;
  }
  .tablet-pb-auto {
    padding-bottom: auto !important;
  }
  .tablet-pl-auto {
    padding-left: auto !important;
  }
  .tablet-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .tablet-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-only-p-4 {
    padding: 4px !important;
  }
  .tablet-only-pt-4 {
    padding-top: 4px !important;
  }
  .tablet-only-pr-4 {
    padding-right: 4px !important;
  }
  .tablet-only-pb-4 {
    padding-bottom: 4px !important;
  }
  .tablet-only-pl-4 {
    padding-left: 4px !important;
  }
  .tablet-only-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .tablet-only-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .tablet-only-p-6 {
    padding: 6px !important;
  }
  .tablet-only-pt-6 {
    padding-top: 6px !important;
  }
  .tablet-only-pr-6 {
    padding-right: 6px !important;
  }
  .tablet-only-pb-6 {
    padding-bottom: 6px !important;
  }
  .tablet-only-pl-6 {
    padding-left: 6px !important;
  }
  .tablet-only-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .tablet-only-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .tablet-only-p-8 {
    padding: 8px !important;
  }
  .tablet-only-pt-8 {
    padding-top: 8px !important;
  }
  .tablet-only-pr-8 {
    padding-right: 8px !important;
  }
  .tablet-only-pb-8 {
    padding-bottom: 8px !important;
  }
  .tablet-only-pl-8 {
    padding-left: 8px !important;
  }
  .tablet-only-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .tablet-only-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .tablet-only-p-12 {
    padding: 12px !important;
  }
  .tablet-only-pt-12 {
    padding-top: 12px !important;
  }
  .tablet-only-pr-12 {
    padding-right: 12px !important;
  }
  .tablet-only-pb-12 {
    padding-bottom: 12px !important;
  }
  .tablet-only-pl-12 {
    padding-left: 12px !important;
  }
  .tablet-only-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .tablet-only-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .tablet-only-p-16 {
    padding: 16px !important;
  }
  .tablet-only-pt-16 {
    padding-top: 16px !important;
  }
  .tablet-only-pr-16 {
    padding-right: 16px !important;
  }
  .tablet-only-pb-16 {
    padding-bottom: 16px !important;
  }
  .tablet-only-pl-16 {
    padding-left: 16px !important;
  }
  .tablet-only-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .tablet-only-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .tablet-only-p-24 {
    padding: 24px !important;
  }
  .tablet-only-pt-24 {
    padding-top: 24px !important;
  }
  .tablet-only-pr-24 {
    padding-right: 24px !important;
  }
  .tablet-only-pb-24 {
    padding-bottom: 24px !important;
  }
  .tablet-only-pl-24 {
    padding-left: 24px !important;
  }
  .tablet-only-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .tablet-only-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .tablet-only-p-32 {
    padding: 32px !important;
  }
  .tablet-only-pt-32 {
    padding-top: 32px !important;
  }
  .tablet-only-pr-32 {
    padding-right: 32px !important;
  }
  .tablet-only-pb-32 {
    padding-bottom: 32px !important;
  }
  .tablet-only-pl-32 {
    padding-left: 32px !important;
  }
  .tablet-only-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .tablet-only-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .tablet-only-p-40 {
    padding: 40px !important;
  }
  .tablet-only-pt-40 {
    padding-top: 40px !important;
  }
  .tablet-only-pr-40 {
    padding-right: 40px !important;
  }
  .tablet-only-pb-40 {
    padding-bottom: 40px !important;
  }
  .tablet-only-pl-40 {
    padding-left: 40px !important;
  }
  .tablet-only-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .tablet-only-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .tablet-only-p-48 {
    padding: 48px !important;
  }
  .tablet-only-pt-48 {
    padding-top: 48px !important;
  }
  .tablet-only-pr-48 {
    padding-right: 48px !important;
  }
  .tablet-only-pb-48 {
    padding-bottom: 48px !important;
  }
  .tablet-only-pl-48 {
    padding-left: 48px !important;
  }
  .tablet-only-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .tablet-only-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .tablet-only-p-60 {
    padding: 60px !important;
  }
  .tablet-only-pt-60 {
    padding-top: 60px !important;
  }
  .tablet-only-pr-60 {
    padding-right: 60px !important;
  }
  .tablet-only-pb-60 {
    padding-bottom: 60px !important;
  }
  .tablet-only-pl-60 {
    padding-left: 60px !important;
  }
  .tablet-only-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .tablet-only-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .tablet-only-p-64 {
    padding: 64px !important;
  }
  .tablet-only-pt-64 {
    padding-top: 64px !important;
  }
  .tablet-only-pr-64 {
    padding-right: 64px !important;
  }
  .tablet-only-pb-64 {
    padding-bottom: 64px !important;
  }
  .tablet-only-pl-64 {
    padding-left: 64px !important;
  }
  .tablet-only-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .tablet-only-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .tablet-only-p-80 {
    padding: 80px !important;
  }
  .tablet-only-pt-80 {
    padding-top: 80px !important;
  }
  .tablet-only-pr-80 {
    padding-right: 80px !important;
  }
  .tablet-only-pb-80 {
    padding-bottom: 80px !important;
  }
  .tablet-only-pl-80 {
    padding-left: 80px !important;
  }
  .tablet-only-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .tablet-only-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .tablet-only-p-120 {
    padding: 120px !important;
  }
  .tablet-only-pt-120 {
    padding-top: 120px !important;
  }
  .tablet-only-pr-120 {
    padding-right: 120px !important;
  }
  .tablet-only-pb-120 {
    padding-bottom: 120px !important;
  }
  .tablet-only-pl-120 {
    padding-left: 120px !important;
  }
  .tablet-only-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .tablet-only-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .tablet-only-p-144 {
    padding: 144px !important;
  }
  .tablet-only-pt-144 {
    padding-top: 144px !important;
  }
  .tablet-only-pr-144 {
    padding-right: 144px !important;
  }
  .tablet-only-pb-144 {
    padding-bottom: 144px !important;
  }
  .tablet-only-pl-144 {
    padding-left: 144px !important;
  }
  .tablet-only-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .tablet-only-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .tablet-only-p-160 {
    padding: 160px !important;
  }
  .tablet-only-pt-160 {
    padding-top: 160px !important;
  }
  .tablet-only-pr-160 {
    padding-right: 160px !important;
  }
  .tablet-only-pb-160 {
    padding-bottom: 160px !important;
  }
  .tablet-only-pl-160 {
    padding-left: 160px !important;
  }
  .tablet-only-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .tablet-only-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .tablet-only-p-auto {
    padding: auto !important;
  }
  .tablet-only-pt-auto {
    padding-top: auto !important;
  }
  .tablet-only-pr-auto {
    padding-right: auto !important;
  }
  .tablet-only-pb-auto {
    padding-bottom: auto !important;
  }
  .tablet-only-pl-auto {
    padding-left: auto !important;
  }
  .tablet-only-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .tablet-only-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
@media screen and (max-width: 1023px) {
  .touch-p-4 {
    padding: 4px !important;
  }
  .touch-pt-4 {
    padding-top: 4px !important;
  }
  .touch-pr-4 {
    padding-right: 4px !important;
  }
  .touch-pb-4 {
    padding-bottom: 4px !important;
  }
  .touch-pl-4 {
    padding-left: 4px !important;
  }
  .touch-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .touch-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .touch-p-6 {
    padding: 6px !important;
  }
  .touch-pt-6 {
    padding-top: 6px !important;
  }
  .touch-pr-6 {
    padding-right: 6px !important;
  }
  .touch-pb-6 {
    padding-bottom: 6px !important;
  }
  .touch-pl-6 {
    padding-left: 6px !important;
  }
  .touch-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .touch-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .touch-p-8 {
    padding: 8px !important;
  }
  .touch-pt-8 {
    padding-top: 8px !important;
  }
  .touch-pr-8 {
    padding-right: 8px !important;
  }
  .touch-pb-8 {
    padding-bottom: 8px !important;
  }
  .touch-pl-8 {
    padding-left: 8px !important;
  }
  .touch-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .touch-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .touch-p-12 {
    padding: 12px !important;
  }
  .touch-pt-12 {
    padding-top: 12px !important;
  }
  .touch-pr-12 {
    padding-right: 12px !important;
  }
  .touch-pb-12 {
    padding-bottom: 12px !important;
  }
  .touch-pl-12 {
    padding-left: 12px !important;
  }
  .touch-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .touch-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .touch-p-16 {
    padding: 16px !important;
  }
  .touch-pt-16 {
    padding-top: 16px !important;
  }
  .touch-pr-16 {
    padding-right: 16px !important;
  }
  .touch-pb-16 {
    padding-bottom: 16px !important;
  }
  .touch-pl-16 {
    padding-left: 16px !important;
  }
  .touch-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .touch-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .touch-p-24 {
    padding: 24px !important;
  }
  .touch-pt-24 {
    padding-top: 24px !important;
  }
  .touch-pr-24 {
    padding-right: 24px !important;
  }
  .touch-pb-24 {
    padding-bottom: 24px !important;
  }
  .touch-pl-24 {
    padding-left: 24px !important;
  }
  .touch-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .touch-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .touch-p-32 {
    padding: 32px !important;
  }
  .touch-pt-32 {
    padding-top: 32px !important;
  }
  .touch-pr-32 {
    padding-right: 32px !important;
  }
  .touch-pb-32 {
    padding-bottom: 32px !important;
  }
  .touch-pl-32 {
    padding-left: 32px !important;
  }
  .touch-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .touch-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .touch-p-40 {
    padding: 40px !important;
  }
  .touch-pt-40 {
    padding-top: 40px !important;
  }
  .touch-pr-40 {
    padding-right: 40px !important;
  }
  .touch-pb-40 {
    padding-bottom: 40px !important;
  }
  .touch-pl-40 {
    padding-left: 40px !important;
  }
  .touch-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .touch-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .touch-p-48 {
    padding: 48px !important;
  }
  .touch-pt-48 {
    padding-top: 48px !important;
  }
  .touch-pr-48 {
    padding-right: 48px !important;
  }
  .touch-pb-48 {
    padding-bottom: 48px !important;
  }
  .touch-pl-48 {
    padding-left: 48px !important;
  }
  .touch-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .touch-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .touch-p-60 {
    padding: 60px !important;
  }
  .touch-pt-60 {
    padding-top: 60px !important;
  }
  .touch-pr-60 {
    padding-right: 60px !important;
  }
  .touch-pb-60 {
    padding-bottom: 60px !important;
  }
  .touch-pl-60 {
    padding-left: 60px !important;
  }
  .touch-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .touch-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .touch-p-64 {
    padding: 64px !important;
  }
  .touch-pt-64 {
    padding-top: 64px !important;
  }
  .touch-pr-64 {
    padding-right: 64px !important;
  }
  .touch-pb-64 {
    padding-bottom: 64px !important;
  }
  .touch-pl-64 {
    padding-left: 64px !important;
  }
  .touch-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .touch-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .touch-p-80 {
    padding: 80px !important;
  }
  .touch-pt-80 {
    padding-top: 80px !important;
  }
  .touch-pr-80 {
    padding-right: 80px !important;
  }
  .touch-pb-80 {
    padding-bottom: 80px !important;
  }
  .touch-pl-80 {
    padding-left: 80px !important;
  }
  .touch-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .touch-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .touch-p-120 {
    padding: 120px !important;
  }
  .touch-pt-120 {
    padding-top: 120px !important;
  }
  .touch-pr-120 {
    padding-right: 120px !important;
  }
  .touch-pb-120 {
    padding-bottom: 120px !important;
  }
  .touch-pl-120 {
    padding-left: 120px !important;
  }
  .touch-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .touch-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .touch-p-144 {
    padding: 144px !important;
  }
  .touch-pt-144 {
    padding-top: 144px !important;
  }
  .touch-pr-144 {
    padding-right: 144px !important;
  }
  .touch-pb-144 {
    padding-bottom: 144px !important;
  }
  .touch-pl-144 {
    padding-left: 144px !important;
  }
  .touch-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .touch-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .touch-p-160 {
    padding: 160px !important;
  }
  .touch-pt-160 {
    padding-top: 160px !important;
  }
  .touch-pr-160 {
    padding-right: 160px !important;
  }
  .touch-pb-160 {
    padding-bottom: 160px !important;
  }
  .touch-pl-160 {
    padding-left: 160px !important;
  }
  .touch-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .touch-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .touch-p-auto {
    padding: auto !important;
  }
  .touch-pt-auto {
    padding-top: auto !important;
  }
  .touch-pr-auto {
    padding-right: auto !important;
  }
  .touch-pb-auto {
    padding-bottom: auto !important;
  }
  .touch-pl-auto {
    padding-left: auto !important;
  }
  .touch-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .touch-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop-p-4 {
    padding: 4px !important;
  }
  .desktop-pt-4 {
    padding-top: 4px !important;
  }
  .desktop-pr-4 {
    padding-right: 4px !important;
  }
  .desktop-pb-4 {
    padding-bottom: 4px !important;
  }
  .desktop-pl-4 {
    padding-left: 4px !important;
  }
  .desktop-px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .desktop-py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .desktop-p-6 {
    padding: 6px !important;
  }
  .desktop-pt-6 {
    padding-top: 6px !important;
  }
  .desktop-pr-6 {
    padding-right: 6px !important;
  }
  .desktop-pb-6 {
    padding-bottom: 6px !important;
  }
  .desktop-pl-6 {
    padding-left: 6px !important;
  }
  .desktop-px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .desktop-py-6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .desktop-p-8 {
    padding: 8px !important;
  }
  .desktop-pt-8 {
    padding-top: 8px !important;
  }
  .desktop-pr-8 {
    padding-right: 8px !important;
  }
  .desktop-pb-8 {
    padding-bottom: 8px !important;
  }
  .desktop-pl-8 {
    padding-left: 8px !important;
  }
  .desktop-px-8 {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .desktop-py-8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .desktop-p-12 {
    padding: 12px !important;
  }
  .desktop-pt-12 {
    padding-top: 12px !important;
  }
  .desktop-pr-12 {
    padding-right: 12px !important;
  }
  .desktop-pb-12 {
    padding-bottom: 12px !important;
  }
  .desktop-pl-12 {
    padding-left: 12px !important;
  }
  .desktop-px-12 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .desktop-py-12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .desktop-p-16 {
    padding: 16px !important;
  }
  .desktop-pt-16 {
    padding-top: 16px !important;
  }
  .desktop-pr-16 {
    padding-right: 16px !important;
  }
  .desktop-pb-16 {
    padding-bottom: 16px !important;
  }
  .desktop-pl-16 {
    padding-left: 16px !important;
  }
  .desktop-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .desktop-py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .desktop-p-24 {
    padding: 24px !important;
  }
  .desktop-pt-24 {
    padding-top: 24px !important;
  }
  .desktop-pr-24 {
    padding-right: 24px !important;
  }
  .desktop-pb-24 {
    padding-bottom: 24px !important;
  }
  .desktop-pl-24 {
    padding-left: 24px !important;
  }
  .desktop-px-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .desktop-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .desktop-p-32 {
    padding: 32px !important;
  }
  .desktop-pt-32 {
    padding-top: 32px !important;
  }
  .desktop-pr-32 {
    padding-right: 32px !important;
  }
  .desktop-pb-32 {
    padding-bottom: 32px !important;
  }
  .desktop-pl-32 {
    padding-left: 32px !important;
  }
  .desktop-px-32 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .desktop-py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .desktop-p-40 {
    padding: 40px !important;
  }
  .desktop-pt-40 {
    padding-top: 40px !important;
  }
  .desktop-pr-40 {
    padding-right: 40px !important;
  }
  .desktop-pb-40 {
    padding-bottom: 40px !important;
  }
  .desktop-pl-40 {
    padding-left: 40px !important;
  }
  .desktop-px-40 {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .desktop-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .desktop-p-48 {
    padding: 48px !important;
  }
  .desktop-pt-48 {
    padding-top: 48px !important;
  }
  .desktop-pr-48 {
    padding-right: 48px !important;
  }
  .desktop-pb-48 {
    padding-bottom: 48px !important;
  }
  .desktop-pl-48 {
    padding-left: 48px !important;
  }
  .desktop-px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .desktop-py-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .desktop-p-60 {
    padding: 60px !important;
  }
  .desktop-pt-60 {
    padding-top: 60px !important;
  }
  .desktop-pr-60 {
    padding-right: 60px !important;
  }
  .desktop-pb-60 {
    padding-bottom: 60px !important;
  }
  .desktop-pl-60 {
    padding-left: 60px !important;
  }
  .desktop-px-60 {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
  .desktop-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .desktop-p-64 {
    padding: 64px !important;
  }
  .desktop-pt-64 {
    padding-top: 64px !important;
  }
  .desktop-pr-64 {
    padding-right: 64px !important;
  }
  .desktop-pb-64 {
    padding-bottom: 64px !important;
  }
  .desktop-pl-64 {
    padding-left: 64px !important;
  }
  .desktop-px-64 {
    padding-left: 64px !important;
    padding-right: 64px !important;
  }
  .desktop-py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .desktop-p-80 {
    padding: 80px !important;
  }
  .desktop-pt-80 {
    padding-top: 80px !important;
  }
  .desktop-pr-80 {
    padding-right: 80px !important;
  }
  .desktop-pb-80 {
    padding-bottom: 80px !important;
  }
  .desktop-pl-80 {
    padding-left: 80px !important;
  }
  .desktop-px-80 {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
  .desktop-py-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .desktop-p-120 {
    padding: 120px !important;
  }
  .desktop-pt-120 {
    padding-top: 120px !important;
  }
  .desktop-pr-120 {
    padding-right: 120px !important;
  }
  .desktop-pb-120 {
    padding-bottom: 120px !important;
  }
  .desktop-pl-120 {
    padding-left: 120px !important;
  }
  .desktop-px-120 {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  .desktop-py-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .desktop-p-144 {
    padding: 144px !important;
  }
  .desktop-pt-144 {
    padding-top: 144px !important;
  }
  .desktop-pr-144 {
    padding-right: 144px !important;
  }
  .desktop-pb-144 {
    padding-bottom: 144px !important;
  }
  .desktop-pl-144 {
    padding-left: 144px !important;
  }
  .desktop-px-144 {
    padding-left: 144px !important;
    padding-right: 144px !important;
  }
  .desktop-py-144 {
    padding-top: 144px !important;
    padding-bottom: 144px !important;
  }
  .desktop-p-160 {
    padding: 160px !important;
  }
  .desktop-pt-160 {
    padding-top: 160px !important;
  }
  .desktop-pr-160 {
    padding-right: 160px !important;
  }
  .desktop-pb-160 {
    padding-bottom: 160px !important;
  }
  .desktop-pl-160 {
    padding-left: 160px !important;
  }
  .desktop-px-160 {
    padding-left: 160px !important;
    padding-right: 160px !important;
  }
  .desktop-py-160 {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }
  .desktop-p-auto {
    padding: auto !important;
  }
  .desktop-pt-auto {
    padding-top: auto !important;
  }
  .desktop-pr-auto {
    padding-right: auto !important;
  }
  .desktop-pb-auto {
    padding-bottom: auto !important;
  }
  .desktop-pl-auto {
    padding-left: auto !important;
  }
  .desktop-px-auto {
    padding-left: auto !important;
    padding-right: auto !important;
  }
  .desktop-py-auto {
    padding-top: auto !important;
    padding-bottom: auto !important;
  }
}
/* Quick font sizes so you don't rely on headings etc */
.fs-8 {
  font-size: 0.5rem;
}

.lh-8 {
  line-height: 0.5rem;
}

.fs-12 {
  font-size: 0.75rem;
}

.lh-12 {
  line-height: 0.75rem;
}

.fs-14 {
  font-size: 0.875rem;
}

.lh-14 {
  line-height: 0.875rem;
}

.fs-16 {
  font-size: 1rem;
}

.lh-16 {
  line-height: 1rem;
}

.fs-18 {
  font-size: 1.125rem;
}

.lh-18 {
  line-height: 1.125rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.lh-20 {
  line-height: 1.25rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.lh-24 {
  line-height: 1.5rem;
}

.fs-28 {
  font-size: 1.75rem;
}

.lh-28 {
  line-height: 1.75rem;
}

.fs-32 {
  font-size: 2rem;
}

.lh-32 {
  line-height: 2rem;
}

.fs-36 {
  font-size: 2.25rem;
}

.lh-36 {
  line-height: 2.25rem;
}

.fs-40 {
  font-size: 2.5rem;
}

.lh-40 {
  line-height: 2.5rem;
}

.fs-48 {
  font-size: 3rem;
}

.lh-48 {
  line-height: 3rem;
}

.fs-60 {
  font-size: 3.75rem;
}

.lh-60 {
  line-height: 3.75rem;
}

.fs-65 {
  font-size: 4.0625rem;
}

.lh-65 {
  line-height: 4.0625rem;
}

.fs-80 {
  font-size: 5rem;
}

.lh-80 {
  line-height: 5rem;
}

@media screen and (max-width: 767px) {
  .mobile-fs-8 {
    font-size: 0.5rem;
  }
  .mobile-fs-12 {
    font-size: 0.75rem;
  }
  .mobile-fs-14 {
    font-size: 0.875rem;
  }
  .mobile-fs-16 {
    font-size: 1rem;
  }
  .mobile-fs-18 {
    font-size: 1.125rem;
  }
  .mobile-fs-20 {
    font-size: 1.25rem;
  }
  .mobile-fs-24 {
    font-size: 1.5rem;
  }
  .mobile-fs-28 {
    font-size: 1.75rem;
  }
  .mobile-fs-32 {
    font-size: 2rem;
  }
  .mobile-fs-36 {
    font-size: 2.25rem;
  }
  .mobile-fs-40 {
    font-size: 2.5rem;
  }
  .mobile-fs-48 {
    font-size: 3rem;
  }
  .mobile-fs-60 {
    font-size: 3.75rem;
  }
  .mobile-fs-65 {
    font-size: 4.0625rem;
  }
  .mobile-fs-80 {
    font-size: 5rem;
  }
}
@media screen and (min-width: 768px) {
  .tablet-fs-8 {
    font-size: 0.5rem;
  }
  .tablet-fs-12 {
    font-size: 0.75rem;
  }
  .tablet-fs-14 {
    font-size: 0.875rem;
  }
  .tablet-fs-16 {
    font-size: 1rem;
  }
  .tablet-fs-18 {
    font-size: 1.125rem;
  }
  .tablet-fs-20 {
    font-size: 1.25rem;
  }
  .tablet-fs-24 {
    font-size: 1.5rem;
  }
  .tablet-fs-28 {
    font-size: 1.75rem;
  }
  .tablet-fs-32 {
    font-size: 2rem;
  }
  .tablet-fs-36 {
    font-size: 2.25rem;
  }
  .tablet-fs-40 {
    font-size: 2.5rem;
  }
  .tablet-fs-48 {
    font-size: 3rem;
  }
  .tablet-fs-60 {
    font-size: 3.75rem;
  }
  .tablet-fs-65 {
    font-size: 4.0625rem;
  }
  .tablet-fs-80 {
    font-size: 5rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tablet-only-fs-8 {
    font-size: 0.5rem;
  }
  .tablet-only-fs-12 {
    font-size: 0.75rem;
  }
  .tablet-only-fs-14 {
    font-size: 0.875rem;
  }
  .tablet-only-fs-16 {
    font-size: 1rem;
  }
  .tablet-only-fs-18 {
    font-size: 1.125rem;
  }
  .tablet-only-fs-20 {
    font-size: 1.25rem;
  }
  .tablet-only-fs-24 {
    font-size: 1.5rem;
  }
  .tablet-only-fs-28 {
    font-size: 1.75rem;
  }
  .tablet-only-fs-32 {
    font-size: 2rem;
  }
  .tablet-only-fs-36 {
    font-size: 2.25rem;
  }
  .tablet-only-fs-40 {
    font-size: 2.5rem;
  }
  .tablet-only-fs-48 {
    font-size: 3rem;
  }
  .tablet-only-fs-60 {
    font-size: 3.75rem;
  }
  .tablet-only-fs-65 {
    font-size: 4.0625rem;
  }
  .tablet-only-fs-80 {
    font-size: 5rem;
  }
}
@media screen and (max-width: 1023px) {
  .touch-fs-8 {
    font-size: 0.5rem;
  }
  .touch-fs-12 {
    font-size: 0.75rem;
  }
  .touch-fs-14 {
    font-size: 0.875rem;
  }
  .touch-fs-16 {
    font-size: 1rem;
  }
  .touch-fs-18 {
    font-size: 1.125rem;
  }
  .touch-fs-20 {
    font-size: 1.25rem;
  }
  .touch-fs-24 {
    font-size: 1.5rem;
  }
  .touch-fs-28 {
    font-size: 1.75rem;
  }
  .touch-fs-32 {
    font-size: 2rem;
  }
  .touch-fs-36 {
    font-size: 2.25rem;
  }
  .touch-fs-40 {
    font-size: 2.5rem;
  }
  .touch-fs-48 {
    font-size: 3rem;
  }
  .touch-fs-60 {
    font-size: 3.75rem;
  }
  .touch-fs-65 {
    font-size: 4.0625rem;
  }
  .touch-fs-80 {
    font-size: 5rem;
  }
}
@media screen and (min-width: 1024px) {
  .desktop-fs-8 {
    font-size: 0.5rem;
  }
  .desktop-fs-12 {
    font-size: 0.75rem;
  }
  .desktop-fs-14 {
    font-size: 0.875rem;
  }
  .desktop-fs-16 {
    font-size: 1rem;
  }
  .desktop-fs-18 {
    font-size: 1.125rem;
  }
  .desktop-fs-20 {
    font-size: 1.25rem;
  }
  .desktop-fs-24 {
    font-size: 1.5rem;
  }
  .desktop-fs-28 {
    font-size: 1.75rem;
  }
  .desktop-fs-32 {
    font-size: 2rem;
  }
  .desktop-fs-36 {
    font-size: 2.25rem;
  }
  .desktop-fs-40 {
    font-size: 2.5rem;
  }
  .desktop-fs-48 {
    font-size: 3rem;
  }
  .desktop-fs-60 {
    font-size: 3.75rem;
  }
  .desktop-fs-65 {
    font-size: 4.0625rem;
  }
  .desktop-fs-80 {
    font-size: 5rem;
  }
}
.fw-normal {
  font-weight: 400;
}

.fw-medium {
  font-weight: 500;
}

.fw-bold {
  font-weight: 700;
}

/**
 *  Message banners
 *
 * 1. Base
 *
 */
/* ==========================================================================
  1. Base
 ========================================================================== */
.banner {
  border: 1px solid #14161E;
  padding: 19px 24px;
  background-color: #FF8847;
  border-radius: 16px;
}

.banner.content-top {
  display: block;
  margin-top: 40px;
  margin-bottom: -40px;
}

.banner.bg-transparent {
  background-color: transparent !important;
}

/**
 *
 * DO NOT EDIT BASE
 *
 *
 * X. Icons within buttons with text - customise the icon color and background
 *
 */
/* ==========================================================================
   Base
   ========================================================================== */
/* ==========================================================================
   X. Icons
   ========================================================================== */
.btn-normalw .o-button__icon--input, .btn-icon .o-button__icon--input {
  border-radius: 50%;
}
.btn-normalw .o-button__icon--left, .btn-icon .o-button__icon--left {
  border-radius: 50%;
}

/* ==========================================================================
X. Code block (pre) buttons w/ color switcher
========================================================================== */
.button-copy {
  width: 32px;
  height: 32px;
  background-color: transparent;
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  top: 18px;
  right: 52px;
  white-space: nowrap;
}
.button-copy:before {
  content: "";
  display: flex;
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(/assets/svg-icons/clipboard-d3125f0e5d15417adecb7889c1d7cd3719c5ab8ea4d3a8431e7ad5b18cf162ee.svg);
  background-size: 14px 16px;
  background-repeat: no-repeat;
  background-position: center center;
}
.button-copy:after {
  content: "Copy";
  position: absolute;
  top: -48px;
  left: 50%;
  margin-left: -33px;
  width: 66px;
  height: 40px;
  background-color: #14161E;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: none;
}
.button-copy:hover {
  background-color: #3B3D43;
}
.button-copy:hover:after {
  display: flex;
}

.button-code {
  width: 32px;
  height: 32px;
  background-color: transparent;
  position: absolute;
  top: 18px;
  right: 16px;
  border-radius: 8px;
  cursor: pointer;
  background-image: url(/assets/svg-icons/color-palette-49cad584136d3456bd9fe236bf7a6e064f89e4c7158f5b56286985d7408b70ec.svg);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
}
.button-code:after {
  content: "Switch color (Light)";
  position: absolute;
  top: -48px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 40px;
  background-color: #14161E;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: none;
}
.button-code:hover {
  background-color: #3B3D43;
  background-image: url(/assets/svg-icons/color-palette-49cad584136d3456bd9fe236bf7a6e064f89e4c7158f5b56286985d7408b70ec.svg);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center center;
}
.button-code:hover:after {
  display: flex;
}

.light-code .button-copy:before {
  background-image: url(/assets/svg-icons/clipboard-black-3cf79234109ca7a31f5e7c2aad031712009485086ea4e4be2e13296ff5817c8b.svg);
}
.light-code .button-copy:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.light-code .button-code {
  background-image: url(/assets/svg-icons/color-palette-black-28d8d941019b5553218c1c8da8eb971e972d9bd67230c820f661e09b932b926b.svg);
}
.light-code .button-code:after {
  content: "Switch color (Dark)";
}
.light-code .button-code:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}

/**
 *
 * DO NOT EDIT BASE
 *
 * Add additional color classes if required
 *
 * Every tooltip you'll ever need can be created from these o-tooltip class
 *
 * To modify use custom -l classes on html element
 *
 * 1. Base
 *
 * 2. Data tooltip
 *
 * 3. HTML tooltip
 *
 * 4x. Modifiers
 *
 * 5. Note Taking
 *
 * Z. Custom Layouts
 *
 */
/* ==========================================================================
1. Base
========================================================================== */
.o-fragment--tooltip {
  background: #14161E;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  color: #FFFFFF;
  z-index: 99999;
  width: auto;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
2. Data tooltip
========================================================================== */
/* ==========================================================================
* 3. HTML tooltip
========================================================================== */
/* ==========================================================================
4a. Top Left
========================================================================== */
/* ==========================================================================
4b. Top Right
========================================================================== */
/* ==========================================================================
5. Note Taking
========================================================================== */
.o-fragment--tooltip {
  opacity: 1;
  visibility: visible;
  display: flex;
  flex-direction: row;
  background: #14161E !important;
  height: 48px;
  padding: 0 7px 0 7px !important;
  user-select: none;
  border-radius: 16px;
}
.o-fragment--tooltip span {
  cursor: pointer;
}
.o-fragment--tooltip:after {
  content: none;
}
.o-fragment--tooltip > span {
  display: flex;
  align-items: center;
  line-height: 1;
}
.o-fragment--tooltip > div {
  display: flex;
  align-items: center;
  line-height: 1;
}
.o-fragment--tooltip > div > button {
  display: flex;
  align-items: center;
  line-height: 1;
}
.o-fragment--tooltip svg {
  max-width: 24px;
  max-height: 24px;
}
.o-fragment--tooltip .o-tooltip__color {
  /* These are needed because Safari thinks it's ok to "select" a span. But we use
     the concept of selection to determine whether or not the tooltip for a fragment
     should be shown. Since only one thing can be selected at once, if the colour box
     can be selected then the text selection is lost, and hence the annotation.
  */
  user-select: none;
  -webkit-user-select: none;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
}
.o-fragment--tooltip .o-tooltip__color--selected {
  width: 28px;
  height: 28px;
}
.o-fragment--tooltip .o-tooltip__color--selected:before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 16px;
  border: 3px solid #14161E;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -12px;
}
.o-fragment--tooltip .o-tooltip__color--yellow {
  background: #E3A93D;
}
.o-fragment--tooltip .o-tooltip__color--orange {
  background: #CF7F42;
}
.o-fragment--tooltip .o-tooltip__color--red {
  background: #E34A4C;
}
.o-fragment--tooltip .o-tooltip__color--purple {
  background: #B44EBF;
}
.o-fragment--tooltip .o-tooltip__color--blue {
  background: #106790;
}
.o-fragment--tooltip .o-tooltip__color--green {
  background: #AEB740;
}
.o-fragment--tooltip .o-tooltip__svg {
  display: flex;
  width: 20px;
  height: 24px;
  margin: 0 8px;
}
.o-fragment--tooltip .o-tooltip__svg svg {
  width: 20px;
}
.o-fragment--tooltip .o-tooltip__svg--delete {
  margin-left: 13px;
}
.o-fragment--tooltip .o-tooltip__svg--note {
  margin: 0 5px 0 10px;
}

/* ==========================================================================
Z. Custom Layouts
========================================================================== */
/**
 * drapers
 *
 * Floating card drapers containing title, paragraph, graphic and link
 *
 * 1. Admin drapers
 *
 * 2. Custom layout classes
 *
 * 3. Banner draper - Base component for common drapers
 *
 * 4. Banner draper - Pillar variations
 *
 * 5. Banner draper - User variations (create account, newsletter)
 *
 * 6. Related - Products at the end of tutorials
 *
 * 7. Bottom Sticky - A banner that's fixed to bottom of the page
 *
 * 8. Pricing cards
 *
 * 9. Single Line Banner
 *
 * 10. Sales promotions
 *
 */
/* ==========================================================================
   1. Admin drapers
   ========================================================================== */
/* ==========================================================================
7. Bottom banner
========================================================================== */
.c-banner-draper-sticky {
  background: #FF8847;
  width: 80%;
  margin: 0 10%;
  z-index: 99;
  box-shadow: unset;
  border: 1px solid #14161E;
  border-radius: 16px;
}

.c-banner-draper-sticky--obfuscate .l-obfuscated-text {
  background: #14161E;
  color: #FFFFFF;
}

/**
* Book Chapter
*
*
* X. Chapter layout
*
* X. Chapter layout w/chapters
*
* X. Chapter actions
*
* X. Chapter search
*
* X. Chapter obfuscation
*
*/
/* ==========================================================================
X. Chapter layout
========================================================================== */
.chapter-layout {
  max-width: 1584px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 296px 676px 296px;
  grid-column-gap: 32px;
  justify-content: space-between;
}
@media screen and (max-width: 1631px) {
  .chapter-layout {
    margin-left: 24px;
    margin-right: 24px;
  }
}
@media screen and (max-width: 1347px) {
  .chapter-layout {
    grid-template-columns: 98px calc(100% - 260px) 98px;
  }
}
@media screen and (max-width: 1199px) {
  .chapter-layout {
    grid-template-columns: 98px 1fr 98px !important;
  }
}
@media screen and (max-width: 1023px) {
  .chapter-layout {
    grid-template-columns: 100% !important;
  }
}
.chapter-layout .chapter-navigation .btn-chapters-desktop .btn-icon {
  min-width: 40px;
  min-height: 40px;
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .btn-chapters-desktop {
    display: none;
  }
}
.chapter-layout .chapter-navigation .btn-chapters-mobile {
  display: none;
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .btn-chapters-mobile {
    display: flex;
  }
}
@media screen and (max-width: 1023px) {
  .chapter-layout .chapter-navigation .btn-chapters-mobile {
    display: none;
  }
}
.chapter-layout .chapter-navigation .toc-collapsed {
  display: block;
  margin-top: -8px;
  position: sticky;
  top: 40px;
}
.chapter-layout .chapter-navigation .toc-collapsed .toc-container {
  overflow: visible;
}
.chapter-layout .chapter-navigation .toc-collapsed .toc-container .btn-label {
  justify-content: flex-start;
}
.chapter-layout .chapter-navigation .toc-collapsed .toc-container .btn-label a {
  padding-left: 0;
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .toc-expanded .btn-chapters-close .btn-chapters-close-desktop {
    display: none;
  }
}
.chapter-layout .chapter-navigation .toc-expanded .btn-chapters-close .btn-chapters-close-mobile {
  display: none;
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .toc-expanded .btn-chapters-close .btn-chapters-close-mobile {
    display: block;
    max-height: 12px;
    max-width: 12px;
  }
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .toc-expanded .toc-container {
    max-height: calc(100vh - 48px);
  }
}
@media screen and (max-width: 1023px) {
  .chapter-layout .chapter-navigation .toc-expanded .toc-container {
    max-height: calc(100vh - 124px);
  }
}
@media screen and (max-width: 1199px) {
  .chapter-layout .chapter-navigation .toc-expanded {
    display: none;
  }
}
.chapter-layout .written-content {
  max-width: 676px;
  width: 100%;
  margin: 0 auto;
}
.chapter-layout .written-content pre {
  border: 1px solid #14161E;
}
.chapter-layout #c-global-header {
  width: 40px;
  justify-self: flex-end;
}

/* ==========================================================================
X. Chapter layout w/chapters
========================================================================== */
@media screen and (max-width: 1347px) {
  .l-admin--sidebar-open .chapter-layout {
    grid-template-columns: 296px calc(100% - 656px) 296px;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open .chapter-layout .toc-collapsed {
    display: block !important;
  }
}
@media screen and (max-width: 1023px) {
  .l-admin--sidebar-open .chapter-layout .toc-collapsed {
    display: none !important;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open .chapter-layout .toc-expanded {
    display: none !important;
    width: calc(100% - 48px);
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 9999999;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open.s_show_mobile_menu .chapter-layout .toc-expanded {
    display: block !important;
  }
}

/* ==========================================================================
X. Chapter actions
========================================================================== */
.icon-close {
  width: 12px;
  height: 12px;
}

.chapter-actions-sticky {
  position: sticky;
  top: 40px;
}

.chapter-actions .icon-notepad {
  width: 15px;
  height: 20px;
}
.chapter-actions .icon-customize {
  width: 22px;
  height: 14px;
  max-height: none;
  max-width: none;
}
.chapter-actions .icon-arrow {
  width: 14px;
  height: 15px;
}

/* ==========================================================================
X. Chapter search
========================================================================== */
.chapter-search .chapter-search-results ul li {
  padding: 24px 0;
}
.chapter-search .pagination {
  width: 100%;
}
.chapter-search .pagination .page {
  border-bottom: none;
}
.chapter-search .pagination .next {
  margin-left: auto;
}

/* ==========================================================================
X. Chapter obfuscation
========================================================================== */
.c-banner-draper-sticky-chapter {
  max-width: 1188px !important;
}
@media screen and (max-width: 1023px) {
  .c-banner-draper-sticky-chapter {
    bottom: 100px !important;
  }
}
@media screen and (max-width: 767px) {
  .c-banner-draper-sticky-chapter {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 767px) {
  .c-banner-draper-sticky-chapter > div {
    flex-direction: column;
    align-items: flex-start;
  }
}
.c-banner-draper-sticky-chapter .btn-normalw {
  text-decoration: none;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .c-banner-draper-sticky-chapter .btn-normalw {
    margin-left: 0 !important;
    margin-top: 16px;
  }
}

/**
* Cards
*
* Designs for card style components
*
* 1. Follow Pillar Card
*
* 2. Skill Level Card
*
* 3. Plan Card
*
* 4a. Card Platform
*
* 4b. Card Platform Variations
*
* 5. Option Card
*
* 6. Simple Card
*
* 7. Book card artwork
*
*
*
*/
/* ==========================================================================
1. Follow Pillar Card
========================================================================== */
/* ==========================================================================
2. Skill Level Card
========================================================================== */
/* ==========================================================================
3. Plan Card
========================================================================== */
/* ==========================================================================
3. Plan Card (Neon)
========================================================================== */
/* ==========================================================================
4a. Card Platform
========================================================================== */
/* ==========================================================================
4b. Card Platform Variations
========================================================================== */
/* ==========================================================================
5. Option card
========================================================================== */
/* ==========================================================================
6. Simple card
========================================================================== */
/* ==========================================================================
7. Book card artwork
========================================================================== */
.card .card-topright .card-artwork-edition {
  overflow: hidden;
}
.card .card-topright .card-artwork-edition > img {
  min-width: 100%;
  min-height: 100%;
}

/**
 *  Child content list is a type of accordion used on the video course and book
 *  homepages. We provide overrides for interactivity, and child content status.
 *
 * 1. Overrides
 * 2. Actions
 * 3. Appearance
 *
 */
/* ==========================================================================
  1. Overrides
 ========================================================================== */
.child-content-list {
  border-radius: 16px;
}
.child-content-list .accordion-trigger {
  padding: 24px;
}
.child-content-list .accordion-trigger .accordion-number {
  color: #FFFFFF;
  background-color: #14161E;
  border-radius: 12px;
}
.child-content-list .accordion-trigger .accordion-number svg {
  fill: white;
}
.child-content-list .accordion-trigger .accordion-header a.accordion-title {
  text-decoration: none;
  color: #14161E;
  word-break: break-word;
}
.child-content-list .accordion-trigger .accordion-opener {
  display: flex;
  align-items: center;
}
.child-content-list .content-description {
  margin-top: -16px;
}
.child-content-list .content-description p {
  margin-top: 16px;
}
.child-content-list .content-description p:first-of-type {
  margin-top: 0;
}
.child-content-list .content-description p > code {
  font-size: 0.875rem;
  background-color: rgba(215, 215, 215, 0.4980392157);
  padding: 2px 6px;
  border-radius: 8px;
}

/* ==========================================================================
 2. Actions
========================================================================== */
.child-content-list .accordion-trigger .accordion-number .child-content-action--number {
  display: inline;
}
.child-content-list .accordion-trigger .accordion-number .child-content-action--checkmark {
  display: none;
  max-width: 14px;
  max-height: 14px;
}
.child-content-list .child-content--completed .accordion-trigger .accordion-number {
  background-color: #00B87E;
}
.child-content-list .child-content--completed .accordion-trigger .accordion-number .child-content-action--number {
  display: none;
}
.child-content-list .child-content--completed .accordion-trigger .accordion-number .child-content-action--checkmark {
  display: inline;
}

/* ==========================================================================
 3. Appearance
========================================================================== */
.child-content-list-header {
  font-size: 1.5rem;
  margin-top: 48px;
  margin-bottom: 32px;
  word-break: break-word;
}

.child-content-list-header + .child-content-list-description {
  margin-top: -8px;
  word-break: break-word;
}

.child-content-list-description {
  margin-bottom: 32px;
}
.child-content-list-description p, .child-content-list-description ul, .child-content-list-description ol {
  margin-top: 20px;
  word-break: break-word;
}
.child-content-list-description p:first-of-type, .child-content-list-description ul:first-of-type, .child-content-list-description ol:first-of-type {
  margin-top: 0;
}

/**
 *  Comments modal
 *
 * 1. Overrides
 *
 */
/* ==========================================================================
 1. Overrides
========================================================================== */
.modal-comments .modal-wrapper {
  width: min(100vw, 790px);
}

/**
 * Content
 *
 * Components for written tutorials, videos and screencasts
 *
 * 1. Written Tutorial
 *
 * 1a. Written Tutorial (Dark)
 *
 * 1b. Written Tutorial (Event)
 *
 * 2. Light code blocks
 *
 * 3. Admin Edit Banner
 *
 * 4. Sticky Options Banner
 *
 * 5. Book Chapter
 *
 * 5a. Book Chapter (Dedications)
 *
 */
/* ==========================================================================
 1. Written Tutorial
 ========================================================================== */
/* ==========================================================================
 5. Book Chapter
 ========================================================================== */
.c-book-chapter code {
  font-size: 0.9375rem;
}
.c-book-chapter pre code {
  font-size: 0.875rem;
}
.c-book-chapter figure.l-image-bordered img {
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #14161E;
}
.c-book-chapter figure figcaption {
  font-family: "Relative Mono" !important;
  font-size: 0.875rem;
  color: #14161E;
  margin-bottom: 40px;
}
.c-book-chapter blockquote p {
  font-size: 1rem;
  font-family: "Relative" !important;
}
.c-book-chapter blockquote a {
  color: #CE3F00;
}
.c-book-chapter blockquote.c-draper-obfuscate-nudge {
  background: inherit;
  padding: unset;
  border: unset;
  border-radius: unset;
}
.c-book-chapter blockquote.c-draper-obfuscate-nudge a {
  color: #FFFFFF;
}
.c-book-chapter blockquote.card > div {
  background: #FF8847;
}
.c-book-chapter blockquote.card .card-topright::before {
  box-shadow: -4px 4px 0 4px #FF8847;
}
.c-book-chapter blockquote.card .card-topright .card-artwork svg {
  width: 24px;
  height: 24px;
  fill: #FFFFFF;
}

.book-chapter__links {
  padding: 1.5rem 0;
  border-bottom: 1px solid #D7D7D7;
  border-top: 1px solid #D7D7D7;
}
.book-chapter__links a.prev {
  color: #14161E;
}
.book-chapter__links a.next {
  color: #FFFFFF;
}

/* ==========================================================================
 5a. Book Chapter (Dedications)
 ========================================================================== */
.c-book-chapter__dedications {
  max-width: 568px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 18px;
}
.c-book-chapter__dedications p {
  text-align: center;
}
.c-book-chapter__dedications p:nth-child(even) {
  margin-top: 12px !important;
  margin-bottom: 48px;
}

/* ==========================================================================
 5b. Book Chapter (Team)
 ========================================================================== */
.c-book-chapter__team {
  padding-top: 24px;
}
.c-book-chapter__team h2 {
  margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
  .c-book-chapter__team {
    padding-top: 15px;
  }
}
.c-book-chapter__team > div {
  display: flex;
  margin-bottom: 45px;
}
@media screen and (max-width: 767px) {
  .c-book-chapter__team > div {
    margin-bottom: 24px;
  }
}
.c-book-chapter__team figure {
  width: 180px;
  min-width: 180px;
  margin-right: 24px;
}
@media screen and (max-width: 767px) {
  .c-book-chapter__team figure {
    width: 60px;
    min-width: 60px;
    margin-right: 15px;
  }
}
.c-book-chapter__team figure img {
  width: 100%;
  height: auto;
  margin: auto;
}
.c-book-chapter__team p {
  margin: 0 !important;
}
.c-book-chapter__team p strong:first-child {
  font-size: 1.5rem;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .c-book-chapter__team p strong:first-child {
    font-size: 1.25rem;
  }
}
.c-book-chapter__team .l-image-bordered img {
  border: 1px solid #14161E;
  border-radius: 16px;
}

/**
 *  Content Hero
 *
 * 1. Variables
 * 2. Hero
 * 3. Responsiveness
 * 4. Chromeless Page hero
 *
 */
/* ==========================================================================
  1. Variables
 ========================================================================== */
/* This exists in column world, but we only have 14 of the 16. So we'll need to
  do some maths to work out widths and padding.
 */
/* ==========================================================================
  2. Hero
 ========================================================================== */
.content-hero {
  background-color: #14161E;
  border-radius: 40px;
  color: #FFFFFF;
  display: grid;
  padding: 80px 98px;
  grid-template-columns: 398px 1fr 98px;
  grid-column-gap: 8%;
}
@media screen and (max-width: 1279px) {
  .content-hero {
    padding: 80px;
    grid-template-columns: 398px 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .content-hero {
    grid-template-columns: 1fr;
    padding: 80px 40px;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .modal .fc-white {
    color: #FFFFFF;
  }
}
.content-hero .content-hero-left {
  width: 398px;
  max-width: 398px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-left {
    margin: 0 auto !important;
  }
}
.content-hero .content-hero-right {
  min-width: 100%;
}
@media screen and (max-width: 1023px) {
  .content-hero .content-hero-right {
    padding-top: 80px;
  }
}
.content-hero .content-hero-right .content-hero-badge {
  margin-bottom: 16px;
}
.content-hero .content-hero-right h1 {
  font-size: 3rem;
  word-break: break-word;
}
.content-hero .content-hero-right p.description {
  display: block;
  font-size: 1.125rem;
  margin-top: 24px;
  word-break: break-word;
}
.content-hero .content-hero-right p.description a {
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-right p.description a {
    color: #14161E;
  }
}
.content-hero .content-hero-right .metadata {
  margin-top: 24px;
  gap: 0;
}
@media screen and (max-width: 959px) {
  .content-hero .content-hero-right .metadata {
    flex-direction: column;
  }
}
@media screen and (max-width: 959px) {
  .content-hero .content-hero-right .metadata.icon-prefix {
    align-items: normal;
  }
}
.content-hero .content-hero-right .metadata > div:first-of-type {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.content-hero .content-hero-right .metadata .version-count {
  white-space: nowrap;
}
.content-hero .content-hero-right .metadata svg {
  position: relative;
  top: 4px;
  fill: #FFFFFF;
  margin-right: 8px !important;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-right .metadata svg {
    fill: #14161E;
  }
}
.content-hero .content-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 32px;
}
.content-hero .content-hero-cta a.hero-other-versions {
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.hero-other-versions {
    color: #14161E !important;
  }
}
.content-hero .content-hero-cta .progress-control progress {
  background-color: rgba(215, 215, 215, 0.2);
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta .progress-control progress {
    background-color: rgba(215, 215, 215, 0.8);
  }
}
.content-hero .content-hero-cta .progress-control .dropdown .btn-iconxsm svg {
  fill: #D7D7D7;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta .progress-control .dropdown .btn-iconxsm svg {
    fill: #14161E;
  }
}
.content-hero .content-hero-cta .progress-control + p {
  margin-top: 24px;
}
.content-hero .content-hero-cta .progress-control + p + a {
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.btn-largew.bg-black-night {
    border: none !important;
    color: #FFFFFF !important;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.btn-largew.bg-black-night:hover {
    background-color: #43454B !important;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.btn-largew.dark-bc-white {
    border: 1px solid #FFFFFF !important;
  }
}
.content-hero .content-hero-cta .btn-largew {
  min-height: 56px;
  padding-top: 16px;
  padding-bottom: 16px;
  height: auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta a.bg-orange-determination {
    color: #FFFFFF !important;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta .mobile-fc-black-night {
    color: #14161E;
  }
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-cta .mobile-fc-white {
    color: #FFFFFF;
  }
}
.content-hero .content-hero-action,
.content-hero a.content-hero-action {
  min-height: 32px;
  align-items: center;
  color: #FFFFFF;
  margin-top: 8px;
}
.content-hero .content-hero-action.icon-prefix,
.content-hero a.content-hero-action.icon-prefix {
  gap: 0;
}
.content-hero .content-hero-action.icon-prefix a,
.content-hero .content-hero-action.icon-prefix span,
.content-hero a.content-hero-action.icon-prefix a,
.content-hero a.content-hero-action.icon-prefix span {
  color: #FFFFFF;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-action.icon-prefix a,
  .content-hero .content-hero-action.icon-prefix span,
  .content-hero a.content-hero-action.icon-prefix a,
  .content-hero a.content-hero-action.icon-prefix span {
    color: #14161E;
  }
}
.content-hero .content-hero-action.icon-prefix svg,
.content-hero a.content-hero-action.icon-prefix svg {
  fill: #FFFFFF;
  margin-right: 16px;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-action.icon-prefix svg,
  .content-hero a.content-hero-action.icon-prefix svg {
    fill: #14161E;
  }
}
.content-hero .modal {
  /* This is a hack, but I don't know how to do it better */
}
.content-hero .modal a.fc-orange-determination {
  color: #CE3F00;
}
.content-hero .modal.modal-share {
  color: #14161E;
}

/* ==========================================================================
  2. Responsiveness
 ========================================================================== */
@media screen and (max-width: 767px) {
  .content-hero {
    background-color: unset;
    color: unset;
    padding: 0;
    flex-flow: wrap;
    margin-top: 80px;
  }
  .content-hero .content-hero-left {
    margin-left: 0;
    width: 100%;
  }
  .content-hero .content-hero-left .btn-largew.bg-black-night {
    border: 1px solid #14161E;
    color: #14161E;
    background-color: transparent;
  }
  .content-hero .content-hero-right {
    margin-top: 24px;
    margin-left: 0;
    width: 100%;
    padding: 0;
  }
  .content-hero .content-hero-right h1 {
    font-size: 2.25rem;
  }
  .content-hero .content-hero-right a {
    color: #14161E;
  }
  .content-hero .content-hero-action,
  .content-hero a.content-hero-action {
    color: #14161E;
  }
  .content-hero .content-hero-action.icon-prefix a,
  .content-hero a.content-hero-action.icon-prefix a {
    color: #14161E;
  }
  .content-hero .content-hero-action.icon-prefix svg,
  .content-hero a.content-hero-action.icon-prefix svg {
    fill: #14161E;
  }
  .content-hero .content-hero-share {
    width: 100%;
  }
}
/* ==========================================================================
  4. Chromeless page
 ========================================================================== */
.content-hero-chromeless {
  display: flex;
}
.content-hero-chromeless img {
  border-radius: 40px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .content-hero-chromeless img {
    border-radius: 24px;
  }
}

/* ==========================================================================
  5. Book specific
 ========================================================================== */
.book-cover-art {
  text-align: center;
}
.book-cover-art img {
  width: 100%;
  border-radius: 32px;
  border: 1px solid #D7D7D7;
}

.tile .image {
  min-width: 24px;
  display: block;
  margin-right: 0.8em;
}

/**
 *  Contributors
 *
 * 1. Contributors' tile appearance
 * 2. Grid
 * 3. Primary Contributors
 *
 */
/* ==========================================================================
  1. Contributors' Tile Appearance
 ========================================================================== */
.contributors.tile {
  border: 1px solid #14161E;
}
.contributors.tile .tile-header h2 {
  margin: 0;
}
.contributors.tile a {
  color: #CE3F00;
}
.contributors.tile .contributor {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.contributors.tile .contributor p {
  margin: 0;
}

.modal-contributors .contributors.tile {
  border: none;
  padding: unset;
}

/* ==========================================================================
  2. Grid
 ========================================================================== */
@media screen and (max-width: 959px) {
  .contributors.tile {
    margin-bottom: 144px;
  }
}
.contributors.tile .contributors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 48px 80px 72px;
}
@media screen and (max-width: 959px) {
  .contributors.tile .contributors-grid {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
  }
}

.modal-contributors .contributors.tile .contributors-grid {
  margin: 0;
}

/* ==========================================================================
  3. Primary contributors
 ========================================================================== */
.primary-contributors {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.primary-contributors .contributor-avatars {
  display: flex;
  gap: 48px;
  flex-flow: row wrap;
}
@media screen and (max-width: 959px) {
  .primary-contributors .contributor-avatars {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
}
.primary-contributors .contributor-avatars .contributor img {
  max-width: 198px;
  max-height: 198px;
  border: none;
  padding: 0;
  border-radius: 24px;
}
@media screen and (max-width: 767px) {
  .primary-contributors .contributor-avatars .contributor img {
    max-width: 99px;
    max-height: 99px;
  }
}
.primary-contributors .contributor-avatars .contributor .contributor-name {
  margin-top: 16px;
  font-family: "Relative Mono";
  font-size: 1rem;
  text-align: center;
  display: block;
}
.primary-contributors .contributor-avatars .contributor .contributor-name > a {
  color: #CE3F00;
}
.primary-contributors p {
  margin-top: 16px;
  font-family: "Relative Mono";
  font-size: 0.875rem;
}
@media screen and (max-width: 767px) {
  .primary-contributors p {
    text-align: center;
  }
}
.primary-contributors a {
  color: #CE3F00;
}

/**
* Module background
*
* 1a. Module Background
*
* 1b. Module Background: Pattern Variations
*
*
*/
/* ==========================================================================
1a. Module Background
========================================================================== */
.module-background {
  width: 100%;
  height: 1000px;
  background-color: #14161E;
  border-radius: 0 48px 48px 48px;
  position: relative;
  z-index: -1;
  overflow: hidden;
}
.module-background:before {
  content: "";
  height: 240px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #F7F7F7;
  border-radius: 0 48px 0 0;
}
.module-background video {
  position: absolute;
  width: 100%;
  z-index: -1;
}
.module-background .module-background-round-top {
  width: 240px;
  height: 240px;
  position: relative;
}
.module-background .module-background-round-top:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #F7F7F7;
}
.module-background .module-background-round-bottom {
  width: 240px;
  height: 240px;
  bottom: 0;
  left: 100%;
  position: relative;
}
.module-background .module-background-round-bottom:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -12px 12px 0 12px #F7F7F7;
}

/* ==========================================================================
1b. Module Background: Pattern Variations
========================================================================== */
.module-background-yellow {
  background-image: url(/assets/artwork/kodeco/module-page-header-yellow@1.5x-a226a061de6efb99f4331ce9b5a9fe4e7b302fdc99017c0aa90eac39b6d72294.jpg);
  background-size: 100%;
}

.module-background-purple {
  background-image: url(/assets/artwork/kodeco/module-page-header-purple@1.5x-2270d1e4cae0f1f24ae8ad76cb751e58d72bbb94eadb76e728638ed73e8bb5ef.jpg);
  background-size: 100%;
}

/**
 * Navigation components
 *
 * 1. Sidebar - Branded sidebar can be used anywhere as alternative navigation to horizontal use layout modifiers to change width
 *
 * 1a. Sidebar Article
 *
 * 1b. Sidebar Article (White)
 *
 * 1c. My Interests - Logged in homepage
 *
 * 1d. Sidebar (Book)
 *
 * 2. Toggle States for Mobile Menus
 *
 * 3. Main Navigation
 *
 * 4. Explore: Dropdown Menu
 *
 * 5. User: Dropdown Menu
 *
 * 6. Pillar Navigation
 *
 * 7. Footer
 *
 * 8. Tabs
 *
 * 9. Mobile Navigator
 *
 * 10. Book Navigation
 *
 * 11. Paginator
 *
 */
/* ==========================================================================
   1. Sidebar
   ========================================================================== */
/* ==========================================================================
   9. Mobile Navigator
   ========================================================================== */
.c-mobile-navigator {
  background: #F7F7F7;
  bottom: 24px;
  left: 24px;
  width: calc(100% - 48px);
  border: 1px solid #14161E;
  box-shadow: unset;
  border-radius: 16px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 8px;
}

/**
* Photo mosiac 
*
* 1. Photo mosaic pieces
* 
*
*/
/* ==========================================================================
1. Photo mosaic pieces
========================================================================== */
.photo-mosaic-piece {
  width: 182px;
  height: 182px;
  border-radius: 24px;
}

.photo-mosaic-piece-l {
  width: 280px;
  height: 280px;
}

.photo-mosaic-piece-s {
  width: 82px;
  height: 82px;
  border-radius: 16px;
}

.photo-mosaic-piece-logo {
  border: 1px solid #D7D7D7;
}
.photo-mosaic-piece-logo img {
  width: 100%;
  height: 100%;
}

/**
 *
 * These are the components for progress elements (mark as complete, checkmarks etc.)
 *
 *
 * 0. Mark as complete
 * 1. Checkmark
 *
 **/
/* ==========================================================================
  0. Mark as complete
  ========================================================================== */
.btn-mark-complete {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid #14161E;
  transition: all 0.5s;
}
.btn-mark-complete:hover {
  background-color: rgba(215, 215, 215, 0.5);
}
.btn-mark-complete > span {
  display: flex;
  align-items: center;
}
.btn-mark-complete i {
  display: inline-flex;
}
.btn-mark-complete svg {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.btn-mark-complete--completed {
  background-color: #00B87E;
  color: #FFFFFF;
  border-color: #00B87E !important;
}
.btn-mark-complete--completed:focus {
  background-color: #00B87E;
  border-color: #00B87E !important;
}
.btn-mark-complete--completed:hover {
  background-color: #157857 !important;
  border-color: #157857 !important;
}
.btn-mark-complete--completed svg {
  fill: #FFFFFF;
}

.btn-icon-mark-complete i {
  border: none;
}
.btn-icon-mark-complete svg {
  margin: 0;
  position: static;
  width: 20px;
  height: 20px;
}

.content-list--completed .content-list--icon-dot {
  background-color: #FFFFFF !important;
}

/* ==========================================================================
  1. Checkmark
  ========================================================================== */
.checkmark-complete {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #00B87E;
}
.checkmark-complete svg {
  width: 10px;
  height: 8px;
}

/**
* Reading Experience Tools
*
* 1a. Notebook & Highlighting
*
* 1b. Highlighter Colors
*
* 2. Reading Experience Widget
*
*/
/* ==========================================================================
   1a. Notebook & Highlighting
   ========================================================================== */
.c-notebook {
  height: 80%;
  width: 495px;
  background: #FFFFFF;
  border: 1px solid #14161E;
  padding: unset;
  position: fixed;
  top: 160px;
  right: 48px;
  z-index: 9999999;
  border-radius: 16px;
  overflow-y: unset;
}
@media screen and (max-width: 1023px) {
  .c-notebook {
    width: calc(100% - 48px);
    height: calc(100vh - 180px);
    top: 80px;
    box-shadow: none;
    left: 24px;
  }
}
.c-notebook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F7F7F7;
  padding: 12px 24px;
  font-size: 1.125rem;
  border-radius: 16px 16px 0 0;
}
.c-notebook-content {
  overflow-y: auto;
  max-height: 85%;
}
.c-notebook .modal .modal-wrapper {
  max-width: 594px;
}
.c-notebook .modal .modal-wrapper .mt-24:first-of-type {
  margin-top: 8px !important;
}
.c-notebook .c-notebook__title-actions {
  position: absolute;
  cursor: pointer;
  top: 24px;
}
.c-notebook .c-notebook__erase {
  right: 24px;
}
@media screen and (max-width: 1023px) {
  .c-notebook .c-notebook__erase {
    right: 60px;
  }
}
.c-notebook .c-notebook__close {
  width: 16px;
  height: 24px;
  right: 24px;
  display: none;
}
@media screen and (max-width: 1023px) {
  .c-notebook .c-notebook__close {
    display: block;
  }
}
.c-notebook .c-notebook__close svg {
  width: 16px;
  transform: rotate(180deg);
}
.c-notebook h3 {
  padding-right: unset;
  line-height: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  font-size: 1.125rem;
}
.c-notebook .c-notebook__artwork {
  display: block;
  max-width: 240px;
  margin: 60px auto 9px;
}
.c-notebook .c-notebook__demo {
  position: relative;
  margin-top: 90px;
}
.c-notebook .c-notebook__demo:before {
  content: "";
  position: absolute;
  top: -90px;
  left: 0;
  width: 100%;
  height: calc(100% + 90px);
  background: transparent;
  z-index: 99999999;
}
.c-notebook .c-notebook__demo p mark {
  background: rgba(227, 74, 76, 0.4);
  color: #14161E;
}
.c-notebook .c-notebook__demo .o-fragment--tooltip {
  top: -64px;
}
.c-notebook .c-notebook__entry {
  padding-left: unset;
  padding-bottom: unset;
  margin-top: unset;
  position: relative;
  border-bottom: 1px solid #14161E;
}
.c-notebook .c-notebook__entry:before {
  content: none;
}
.c-notebook .c-notebook__entry:not(:first-child) {
  padding-top: 24px;
}
.c-notebook .c-notebook__entry:last-child {
  border-bottom: 0;
}
.c-notebook .c-notebook__entry a {
  color: #14161E;
  text-decoration: none;
}
.c-notebook .c-notebook__entry h4 {
  font-size: 1.125rem;
  /* 18/16 */
}
.c-notebook .c-notebook__entry .c-notebook__actions {
  display: flex;
  align-content: center;
  align-items: baseline;
  justify-content: space-between;
}
.c-notebook .c-notebook__entry .c-notebook__action {
  font-size: 0.875rem;
  font-weight: 400;
  color: #14161E;
  text-decoration: underline;
  cursor: pointer;
}
.c-notebook .c-notebook__entry .c-notebook__action--secondary {
  text-decoration: none;
}
.c-notebook .c-notebook__entry .c-notebook__entry-text {
  font-size: 0.875rem;
  margin-top: 8px;
  padding-bottom: 7px;
}
.c-notebook .c-notebook__entry .c-notebook__entry-text mark {
  color: #14161E;
  background-color: transparent;
}
.c-notebook .c-notebook__entry .c-notebook__entry-note {
  font-size: 0.875rem;
  font-style: normal;
  margin: 16px auto;
}
.c-notebook .c-notebook__entry .c-notebook__entry-note .text-area {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.875rem;
}
.c-notebook .c-notebook__entry .c-notebook__entry-note span {
  color: #14161E;
  padding-left: 32px;
  position: relative;
}
.c-notebook .c-notebook__entry .c-notebook__entry-note span::before {
  content: "";
  background-image: url(/assets/murakami/sprites/kodeco-icons/pencil-742a620a4e8a9b57e9aab1fe2ea15e9999b95424461a3e828634fc91d8d882db.svg);
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  bottom: 2px;
}

.o-fragment--id {
  display: block;
  position: relative;
  top: -48px;
  visibility: hidden;
}

article.c-book-chapter div blockquote {
  padding-top: 1px;
}

.o-fragment {
  position: relative;
}
.o-fragment mark {
  color: #14161E;
  background-color: #E3A93D;
}
.o-fragment .o-fragment--annotation {
  cursor: pointer;
}
.o-fragment .o-fragment--annotation-note {
  border-bottom: 3px solid #E3A93D;
}
.o-fragment .o-fragment--tooltip-with-note {
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 16px;
  padding: 24px;
  position: absolute;
  transform: translateX(-50%);
  color: #14161E;
  z-index: 99999;
  width: auto;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0 !important;
  user-select: none;
  font-weight: 400;
}
.o-fragment .o-fragment--tooltip-with-note:after {
  display: none;
}
.o-fragment .o-fragment--tooltip-with-note:hover {
  background-color: #ebebeb;
}
.o-fragment .o-fragment--tooltip-with-note:focus-within {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  background: #FFFFFF;
}
.o-fragment .o-fragment--tooltip-with-note span {
  cursor: pointer;
}
.o-fragment .o-fragment--tooltip-with-note textarea {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #14161E;
  width: 100%;
  min-width: 270px;
  min-height: 100px;
  font-size: 0.875rem;
  resize: none;
}
.o-fragment .o-fragment--tooltip-with-note textarea::placeholder {
  color: #8C8C8C;
}
.o-fragment .o-fragment--tooltip-with-note .o-fragment__actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.o-fragment .o-fragment--tooltip-with-note .o-fragment__action {
  color: #14161E;
  text-decoration: underline;
}

/* ==========================================================================
   1b. Highlighter Colors
   ========================================================================== */
mark.o-fragment--highlighter-yellow {
  background: rgba(227, 169, 61, 0.4);
}
mark.o-fragment--highlighter-yellow.o-fragment--annotation-note {
  border-bottom: 3px solid #E3A93D;
}

mark.o-fragment--highlighter-orange {
  background: rgba(207, 127, 66, 0.4);
}
mark.o-fragment--highlighter-orange.o-fragment--annotation-note {
  border-bottom: 3px solid #CF7F42;
}

mark.o-fragment--highlighter-red {
  background: rgba(227, 74, 76, 0.4);
}
mark.o-fragment--highlighter-red.o-fragment--annotation-note {
  border-bottom: 3px solid #E34A4C;
}

mark.o-fragment--highlighter-purple {
  background: rgba(180, 78, 191, 0.4);
}
mark.o-fragment--highlighter-purple.o-fragment--annotation-note {
  border-bottom: 3px solid #B44EBF;
}

mark.o-fragment--highlighter-blue {
  background: rgba(16, 103, 144, 0.4);
}
mark.o-fragment--highlighter-blue.o-fragment--annotation-note {
  border-bottom: 3px solid #106790;
}

mark.o-fragment--highlighter-green {
  background: rgba(174, 183, 64, 0.4);
}
mark.o-fragment--highlighter-green.o-fragment--annotation-note {
  border-bottom: 3px solid #AEB740;
}

/* ==========================================================================
   2. Reading Experience Widget
   ==========================================================================
*/
.c-reading-experience-selector {
  top: 90px;
  right: 90px;
  color: #14161E;
  background-color: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #14161E;
  box-shadow: unset;
  width: 395px;
}
@media screen and (max-width: 1023px) {
  .c-reading-experience-selector {
    width: calc(100% - 48px);
    left: 24px;
    padding: 24px;
    bottom: 100px;
  }
}
.c-reading-experience-selector h1,
.c-reading-experience-selector h2,
.c-reading-experience-selector h3,
.c-reading-experience-selector h4,
.c-reading-experience-selector h5,
.c-reading-experience-selector h6 {
  font-family: "Relative";
  font-weight: 400;
  line-height: 1.25;
}
.c-reading-experience-selector .o-alert__close {
  display: block;
  position: relative;
  right: unset;
  margin-bottom: 30px;
}
.c-reading-experience-selector .o-alert__close svg {
  width: 12px;
  height: 12px;
  fill: #14161E;
}
.c-reading-experience-selector .c-reading-experience-selector__checkbox--large {
  height: 50px;
  border: 1px solid #14161E;
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  z-index: 0;
}
.c-reading-experience-selector .c-reading-experience-selector__checkbox--large input {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.c-reading-experience-selector .c-reading-experience-selector__checkbox--large label {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -15px;
  color: #14161E;
  white-space: nowrap;
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 0.9375rem;
  /* 15/16 */
  z-index: -1;
  font-weight: 400;
}
.c-reading-experience-selector .c-reading-experience-selector__radio {
  appearance: radio;
  -webkit-appearance: radio;
}
.c-reading-experience-selector .c-reading-experience-selector__radio:checked ~ label {
  color: #FFFFFF;
}
.c-reading-experience-selector .c-reading-experience-selector__radio:checked + span {
  position: absolute;
  z-index: -1;
  background: #14161E;
  border: 1px solid #14161E;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  border-radius: 12px;
}

/**
 *  ScreenCast
 *
 * 1. Player container
 * 2. Preloader
 * 3. Responsiveness
 *
 */
/* ==========================================================================
  1. Player container
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .screencast.video-episode:not(.video-episode--cinema) {
    width: min(1288px, 100vw - 60px);
    grid-template-columns: 0px 1fr 40px;
    grid-column-gap: 30px;
  }
}

/* ==========================================================================
  2. Preloader
 ========================================================================== */
/* ==========================================================================
  3. Responsiveness
 ========================================================================== */
/**
 * Search
 *
 * Search component styles
 *
 * 1. Search box
 *
 * 2. Search box overlay
 *
 * 3. Library - Platform filter
 *
 * 4. Library - Filters
 *
 * 5. Library - Controls
 *
 * 6. Loading Results
 *
 * 7. No Results
 *
 * 8. Book Search
 *
 *
 */
/* ==========================================================================
  1. Search box
  ========================================================================== */
/* ==========================================================================
8. Book Search
========================================================================== */
.c-global-search--book {
  background: rgba(20, 22, 30, 0.5);
}
.c-global-search--book .o-input {
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  height: 40px;
}
.c-global-search--book .o-input:focus {
  background: #FFFFFF;
  border: 1px solid #CE3F00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  outline: none;
}
.c-global-search--book .input__icon-svg--search {
  fill: unset;
  height: 16px;
  top: 54%;
}
.c-global-search--book .c-global-search__close {
  top: 8px;
  right: 20px;
}
.c-global-search--book .c-global-search__close svg {
  height: 12px;
}
.c-global-search--book .c-global-search__recommendations {
  margin-top: 20px;
}
@media screen and (min-width: 768px), print {
  .c-global-search--book .c-global-search__recommendations {
    padding-left: 0;
    padding-right: 0;
  }
}
.c-global-search--book .c-global-search__recommendations h3 {
  color: #14161E;
}
.c-global-search--book .c-global-search__recommendations ul li {
  border-bottom: 1px solid #14161E;
  padding: 15px 0;
}
.c-global-search--book .c-global-search__recommendations ul li a {
  color: #14161E;
  text-decoration: none;
}
.c-global-search--book .c-global-search__recommendations ul li p {
  font-size: 0.875rem;
  color: #14161E;
}
.c-global-search--book .c-global-search__recommendations ul li .c-search__results--highlight {
  background: #ffad80;
  font-weight: 400;
  padding: 0;
}
.c-global-search--book .c-global-search__recommendations .c-search__results-chapter {
  font-family: "Relative";
  margin-bottom: 6px;
  font-size: 1.125rem;
  font-weight: 400;
  text-decoration: underline;
}
.c-global-search--book .c-global-search__recommendations .c-search__results-chapter:hover {
  color: #43454B;
}
.c-global-search--book .c-global-search__recommendations .c-search__results-chapter:hover {
  color: #CE3F00;
}

/* ==========================================================================
7. No Results
========================================================================== */
.c-search__no-results {
  text-align: center;
}
.c-search__no-results p {
  font-family: inherit;
  font-style: italic;
  font-size: 1.5rem;
}

/**
 *  Share modal
 *
 * 1. Overrides
 *
 */
/* ==========================================================================
 1. Overrides
========================================================================== */
.modal-share h4 {
  margin: 0;
}

/**
 *  Spoilers
 *
 * 1. Base
 *
 */
/* ==========================================================================
  1. Base
 ========================================================================== */
.spoiler {
  border: 1px solid #14161E;
  border-radius: 8px;
  background-color: #FFFFFF;
}
.spoiler details {
  cursor: auto;
}
.spoiler details summary {
  border-radius: 8px;
  background-color: rgba(255, 136, 71, 0.2);
}
.spoiler details summary .accordion-trigger {
  padding: 8px 24px;
}
.spoiler details summary .trigger-text {
  font-size: 1.125rem;
}
.spoiler details[open] summary {
  border-radius: 8px 8px 0px 0px;
}
.spoiler .spoiler-content {
  padding: 16px 24px;
}

/**
 *  Table of Contents
 *
 * 1. Toggling show/hide
 * 2. Appearance
 *
 */
/* ==========================================================================
  1. Toggling show/hide
 ========================================================================== */
.l-admin .toc-collapsed {
  display: unset;
}
@media screen and (max-width: 1023px) {
  .l-admin .toc-collapsed {
    display: none;
  }
}
.l-admin .toc-expanded {
  display: none;
}
.l-admin.l-admin--sidebar-open .toc-collapsed {
  display: none;
}
.l-admin.l-admin--sidebar-open .toc-expanded {
  display: unset;
}
@media screen and (max-width: 1023px) {
  .l-admin.l-admin--sidebar-open .toc-expanded {
    display: none;
  }
}

/* ==========================================================================
  2. Appearance
 ========================================================================== */
.toc-container {
  position: sticky;
  top: 40px;
  max-height: calc(100vh - 80px);
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
}
.toc-container::-webkit-scrollbar {
  display: none;
}

.toc {
  border: 1px solid #14161E;
  border-radius: 16px;
  background-color: #FFFFFF;
}
.toc .toc-header {
  background-color: #F7F7F7;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
}
.toc .toc-header h2 {
  margin: 24px;
  flex-grow: 1;
  font-size: 1.125rem;
}
.toc .toc-header .tooltip {
  margin-right: 16px;
}
.toc .toc-body {
  padding: 24px;
}
.toc .toc-body h2.title {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.toc .toc-body h2.title a {
  text-decoration: none;
}
.toc .toc-body h2.title a:hover {
  text-decoration: underline;
}
.toc .toc-body p.duration {
  font-size: 0.875rem;
}
.toc .toc-body nav {
  list-style: none;
}
.toc .toc-body nav a {
  text-decoration: none;
  display: flex;
  margin-bottom: 12px;
  gap: 16px;
}
.toc .toc-body nav a:hover {
  text-decoration: underline;
}
.toc .toc-body nav a i.toc-item-indicator {
  flex-shrink: 0;
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  background: none;
  border: 2px solid #14161E;
  border-radius: 50%;
  margin-top: 2px;
}
.toc .toc-body nav a.is-active i.toc-item-indicator::after {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  top: 6px;
  left: 6px;
  background: #14161E;
  border-radius: 2px;
}

.turbo-progress-bar {
  z-index: 1000000;
  height: 2px;
  border-radius: 1px;
  background-color: #FF5A00;
}

/**
 * Tutorials
 *
 * Tutorial cards form the base of all tutorials advertisements around the site
 *
 * NOTE - All modifiers should be added to the wrapper/container not the tutorial itself
 *
 * 1. Base: The most common tutorial card items
 *
 * 2. Card modifier
 *
 * 3. List modifier
 *
 * 3d. Progress List modifier
 *
 * 5. Featured modifier
 *
 * 6. Badge modifier (Author, Number, Checkmark)
 *
 * 7. Contributor modifier (Role in tutorial)
 *
 * 8. Mini modifier
 *
 * 9. Episode
 *
 * 10. Large Card modifier
 *
 * 11. Dark modifier
 *
 * 12. Mason modifier
 *
 * 13. Artwork size modifier for mason
 *
 * 14. Mason bookmark
 *
 * 15. Mark as complete
 *
 * 16. White backgroudn modifier
 *
 * 17. Floating button
 *
 * 18. Book
 *
 * 19. Editable
 *
 * 20. No Margin
 *
 * 21. CTA-Card for Community Page (Large image modifier)
 *
 */
/* ==========================================================================
 1. Base
 ========================================================================== */
.learning-path .card .card-bottom {
  display: grid;
}
.learning-path .card .card-bottom .card-title {
  max-height: 90px;
}
.learning-path .card .card-bottom .card-metadata {
  align-self: end;
}
.learning-path .card .card-bottom .card-description {
  display: grid;
}
.learning-path .card .card-bottom .card-description .card-text {
  -webkit-line-clamp: 4;
}

/* ==========================================================================
 2. Card modifier (add to container not the tutorial)
 ========================================================================== */
/* ==========================================================================
 3a. List modifier (add to container not the tutorial)
 ========================================================================== */
/* ==========================================================================
 3b. Basic list modifier (add to container not the tutorial)
 ========================================================================== */
/* ==========================================================================
 3c. Complex list modifier (add to container not the tutorial)
 ========================================================================== */
/* ==========================================================================
 3d. Progress list modifier (list of in progress tutorial)
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .path-progress-title {
    font-size: 48px;
  }
}
@media screen and (max-width: 767px) {
  .path-progress-title {
    font-size: 48px;
  }
}

/* ==========================================================================
 5. Featured modifier (add to container not the tutorial)
 ========================================================================== */
/* ==========================================================================
 6. Number modifier (add to container not the tutorial)
 ========================================================================== */
/* ==========================================================================
 7. Contributor modifier (role)
 ========================================================================== */
/* ==========================================================================
 8. Mini modifier
 ========================================================================== */
/* ==========================================================================
9. Episode
========================================================================== */
/* ==========================================================================
10. Advert
========================================================================== */
/* ==========================================================================
10. Learning Path Modifiers
========================================================================== */
/* ==========================================================================
11. Dark Modifier
========================================================================== */
/* ==========================================================================
12. Mason Modifier
========================================================================== */
/* ==========================================================================
12a. Artwork size modifier for mason
========================================================================== */
/* ==========================================================================
12b. Mason Large Modifier
========================================================================== */
/* ==========================================================================
12c. Mason Art Modifier
========================================================================== */
/* ==========================================================================
12c. Mason Modifier Small
========================================================================== */
/* ==========================================================================
14. If user is signed make room for the bookmark on mason
========================================================================== */
/* ==========================================================================
 3. Number modifier (add to list view to fix layout)
 ========================================================================== */
/* ==========================================================================
15. Mark as complete button
========================================================================== */
/* ==========================================================================
16. White background modifier
========================================================================== */
/* ==========================================================================
17. Floating button
========================================================================== */
/* ==========================================================================
18. Book
========================================================================== */
/* ==========================================================================
19. Editable
========================================================================== */
/* ==========================================================================
20. No Margins
========================================================================== */
/* ==========================================================================
21. CTA Card
========================================================================== */
/**
*
*
* 1. Content Counter
*
*
*/
/* ==========================================================================
1. Content Counter
========================================================================== */
.content-counter {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.content-counter > button {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.content-counter:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 98px;
  height: 98px;
  left: 0;
  top: 0;
  background-color: rgba(255, 90, 0, 0.4);
  filter: blur(100px);
  opacity: 0;
  transition: opacity 0.25s;
}
.content-counter:hover:before {
  opacity: 1;
}

.counter-image {
  width: 98px;
  height: 98px;
  border-radius: 12px;
  transition: box-shadow 0.5s;
}

.counter-title {
  font-size: 1rem;
  margin-top: 16px;
  max-width: 98px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .counter-title {
    white-space: normal;
  }
}

.counter-count {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  font-size: 0.8125rem;
  color: #FF5A00;
  background-color: #FF5A00;
  border-radius: 100%;
  border: 2px solid #FFFFFF;
  display: none;
}
.counter-count:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
  transform: scale(1);
  animation: button-pulse-small 1.25s infinite;
  z-index: -1;
}

.is-highlighted-border .content-counter .counter-count {
  display: flex;
}

/**
 *  Video Player
 *
 * 1. Player container
 * 2. Preloader
 * 3. Complete
 * 4. Responsiveness
 *
 */
/* ==========================================================================
  1. Player container
 ========================================================================== */
.video-player {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 24px;
}
.video-player::before {
  content: "";
  display: inline-block;
  padding-bottom: 56.25%;
}
.video-player > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.c-video-player__video-container.l-block--1080 {
  max-width: none;
}

.c-video-player__video {
  width: 100%;
  height: 100%;
}
.c-video-player__video > * {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
  2. Preloader
 ========================================================================== */
.title-slide {
  background-color: #14161E;
  color: #FFFFFF;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.title-slide h1 {
  font-size: 2.5rem;
  line-height: 1.25;
  width: 55%;
  margin-top: 32px;
  margin-left: 32px;
}
.title-slide p {
  font-size: 1rem;
  margin-left: 32px;
  margin-top: 16px;
}
.title-slide .slide-episode {
  position: absolute;
  left: 32px;
  bottom: 32px;
  width: calc(75% - 64px);
}
.title-slide .slide-episode h2 {
  font-size: 1rem;
  line-height: 1;
  padding-bottom: 16px;
}
.title-slide .slide-episode h3 {
  font-size: 2.5rem;
  line-height: 1.25;
}
.title-slide figure {
  width: 21%;
  height: auto;
  position: absolute;
  bottom: 32px;
  right: 32px;
}
.title-slide figure img {
  width: 100%;
  height: 100%;
}
.title-slide .slide-action {
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
}
.title-slide .slide-action--round {
  border-radius: 50%;
  background-color: #FFFFFF;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-slide .slide-action--round svg {
  max-width: 48px;
  max-height: 48px;
  fill: #14161E;
}
.title-slide .slide-action--play::before {
  content: "";
  position: absolute;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  transform: scale(1);
  animation: button-pulse 1.25s infinite;
  z-index: -1;
}
.title-slide .slide-action--play svg {
  max-width: 40px;
  max-height: 40px;
  margin-left: 6px;
}
.title-slide .slide-domain, .title-slide .slide-domain--book, .title-slide .slide-domain--video-course, .title-slide .slide-domain--article, .title-slide .slide-domain--learning-path, .title-slide .slide-domain--pro-gro, .title-slide .slide-domain--multi-domain, .title-slide .slide-domain--server-side-swift, .title-slide .slide-domain--ios, .title-slide .slide-domain--gametech, .title-slide .slide-domain--flutter, .title-slide .slide-domain--android {
  /* For Chrome, Edge & Opera */
  -webkit-mask: url(/assets/murakami/backgrounds/domain-pattern-e91ab1919aa70863f57140f46a3ad0963245dbecaf37cf4f1b7a8f24f1837ec1.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  /* For Safari & Firefox */
  mask: url(/assets/murakami/backgrounds/domain-pattern-e91ab1919aa70863f57140f46a3ad0963245dbecaf37cf4f1b7a8f24f1837ec1.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  position: absolute;
  opacity: 0.2;
  left: 10%;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.title-slide .slide-domain--android {
  background-color: #00B87E;
}
.title-slide .slide-domain--flutter {
  background-color: #2EA4DD;
}
.title-slide .slide-domain--gametech {
  background-color: #B44EBF;
}
.title-slide .slide-domain--ios {
  background-color: #8763D2;
}
.title-slide .slide-domain--server-side-swift {
  background-color: #F26FAA;
}
.title-slide .slide-domain--multi-domain {
  background-color: #AC9FAB;
}
.title-slide .slide-domain--pro-gro {
  background-color: #E3A93D;
}
.title-slide .slide-domain--learning-path {
  background-color: #597CEE;
}
.title-slide .slide-domain--article {
  background-color: #157857;
}
.title-slide .slide-domain--video-course {
  background-color: #E34A4C;
}
.title-slide .slide-domain--book {
  background-color: #FF8847;
}

/* ==========================================================================
 3a. Complete - Autoplay
 ========================================================================== */
.title-slide-autoplay {
  align-items: center;
}
.title-slide-autoplay h3 {
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: absolute;
  top: 50%;
  margin-top: -154px;
}
.title-slide-autoplay p {
  font-size: 1rem;
  line-height: 1rem;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -97px;
  margin-left: auto;
  margin-right: auto;
}
.title-slide-autoplay .title-slide-autoplay--cancel {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: 77px;
  margin-left: auto;
  margin-right: auto;
}
.title-slide-autoplay .slide-action-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  cursor: pointer;
  border-radius: 100px;
  z-index: 1;
}
.title-slide-autoplay .slide-action-complete {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
}
.title-slide-autoplay .slide-action-complete.slide-action-complete--fill {
  transform: rotate(-90deg);
}

.slide-icon--cover {
  background-color: white;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slide-icon--cover .slide-action-complete--icon {
  width: 40px;
  height: 40px;
  fill: #14161E;
  margin-right: -5px;
}

/* ==========================================================================
  4. Responsiveness
 ========================================================================== */
@media screen and (max-width: 767px) {
  .c-video-player__video-container.l-block {
    padding: 0;
  }
  .title-slide h1 {
    font-size: 1rem;
    width: calc(100% - 48px);
    margin-top: 24px;
    margin-left: 24px;
  }
  .title-slide p {
    margin-left: 24px;
  }
  .title-slide .slide-episode {
    left: 24px;
    bottom: 24px;
    width: calc(100% - 48px);
  }
  .title-slide .slide-episode h3 {
    font-size: 1rem;
  }
  .title-slide .slide-action {
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
  }
  .title-slide .slide-action--round {
    background-color: transparent;
  }
  .title-slide .slide-action--round svg {
    max-width: 28px;
    max-height: 28px;
    fill: #FFFFFF;
  }
  .title-slide .slide-action--play::before {
    content: none;
  }
  .title-slide .slide-action--play svg {
    max-width: 28px;
    max-height: 28px;
    margin-left: 3px;
  }
  .title-slide-autoplay h3 {
    display: none;
  }
  .title-slide-autoplay p {
    font-size: 0.875rem;
    line-height: 0.875rem;
    margin-left: auto;
    margin-top: -60px;
  }
  .title-slide-autoplay .title-slide-autoplay--cancel {
    margin-top: 40px;
    font-size: 0.875rem;
    line-height: 0.875rem;
  }
  .title-slide-autoplay .slide-action-loader {
    width: 60px;
    height: 60px;
  }
  .slide-icon--cover {
    width: 50px;
    height: 50px;
  }
  .slide-icon--cover .slide-action-complete--icon {
    width: 20px;
    height: 20px;
  }
}
/**
 * Version Modal
 * This resets some styling that gets applied by the modal being inside content-hero

**/
.version-modal {
  display: inline-flex;
}
.version-modal .version-count {
  color: #FFFFFF;
  transition: all 0.5s ease-out;
}
@media screen and (max-width: 767px) {
  .version-modal .version-count {
    color: #14161E;
    background-color: transparent;
    border-color: #14161E;
  }
}
.version-modal .modal .modal-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.version-modal .modal .modal-wrapper .btn-icon svg,
.version-modal .modal .modal-wrapper .btn-iconsm svg {
  fill: #14161E;
  margin-right: 0 !important;
  top: unset;
  left: unset;
}

/**
 *
 *  Layout for the /about page
 *
 *  1. Base layout
 *  2. Responsiveness
 *
 */
/* ==========================================================================
  1. Base layout
 ========================================================================== */
.about h1 {
  font-size: 3.5rem;
  line-height: 4.375rem;
}
.about p {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ==========================================================================
  2. Hero
========================================================================== */
.about .hero-page-header {
  background-color: #FF5A00;
  background-blend-mode: luminosity;
  mix-blend-mode: darken;
  background-position-y: -260px;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .about .hero-page-header {
    background-position-y: unset;
  }
}
.about .hero-page-header::before {
  width: calc(100% - 840px);
}
@media screen and (max-width: 1199px) {
  .about .hero-page-header::before {
    width: calc(100% - 360px);
  }
}
@media screen and (max-width: 979px) {
  .about .hero-page-header::before {
    width: 100%;
  }
}
.about .hero-page-header-round-bottom {
  left: calc(100% - 840px);
}
@media screen and (max-width: 1199px) {
  .about .hero-page-header-round-bottom {
    left: calc(100% - 360px);
  }
}
.about .hero-page-header + div {
  margin-top: -160px;
}
@media screen and (max-width: 1551px) {
  .about .hero-page-header + div > div {
    padding-right: 240px;
  }
}
@media screen and (max-width: 1199px) {
  .about .hero-page-header + div > div {
    padding-right: unset;
  }
}

/* ==========================================================================
  3. Team
========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: 295px 1fr;
  column-gap: 98px;
}
@media screen and (max-width: 767px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}
.team-grid:not(:last-of-type) {
  padding-bottom: 120px;
  border-bottom: 1px solid #D7D7D7;
}
.team-grid:not(:first-of-type) {
  padding-top: 120px;
}
.team-grid p {
  font-size: 1rem;
  line-height: 1.5rem;
}
.team-grid__people {
  display: grid;
  column-gap: 50px;
  row-gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(198px, 198px));
  grid-row: 1/4;
}
@media screen and (max-width: 767px) {
  .team-grid__people {
    grid-auto-flow: column;
    overflow-y: hidden;
    margin: 40px 0;
    grid-row: 2;
  }
}
.team-grid__people .member {
  position: relative;
  max-width: 198px;
  max-height: 198px;
  border-radius: 16px;
}
.team-grid__people .member:hover {
  box-shadow: 0 0 100px 0 rgba(255, 90, 0, 0.4);
}
.team-grid__people .member::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #14161E;
  opacity: 0.4;
  border-radius: 16px;
  z-index: 1;
}
.team-grid__people .member img {
  border-radius: 16px;
  min-width: 198px;
  height: 198px;
  z-index: 0;
}
.team-grid__people .member__name {
  font-family: "Relative Mono";
  font-size: 1.125rem;
  line-height: 1.4375rem;
  position: absolute;
  left: 16px;
  bottom: 16px;
  text-decoration: none;
  color: #FFFFFF;
  width: min-content;
  white-space: break-spaces;
  z-index: 2;
}
.team-grid .description {
  grid-column: 1;
  grid-row: 2;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .team-grid .description {
    grid-row: 3;
    margin-top: unset;
  }
}

/* ==========================================================================
 4. Values
========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.about-grid .about-grid-text-left {
  margin-right: 15%;
}
.about-grid .about-grid-text-right {
  margin-left: 15%;
}
.about-grid .about-grid-image img {
  border-radius: 40px;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1023px) {
  .about-grid .about-grid-text h1, .about-grid .about-grid-text-left h1, .about-grid .about-grid-text-right h1 {
    font-size: 2.5rem;
  }
  .about-grid .about-grid-text p, .about-grid .about-grid-text-left p, .about-grid .about-grid-text-right p {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  .about-grid {
    grid-template-columns: 1fr;
    row-gap: 75px;
  }
  .about-grid #about-cell-3 {
    grid-row: 4;
  }
  .about-grid #about-cell-4 {
    grid-row: 3;
  }
  .about-grid .about-grid-text-left {
    margin-right: 0;
  }
  .about-grid .about-grid-text-right {
    margin-left: 0;
  }
}
/* ==========================================================================
 5. Team Directory
========================================================================== */
.team-directory header.h1 {
  font-size: 3rem;
  line-height: 3.75rem;
}
.team-directory .team-grid h2 {
  font-size: 2.5rem;
  line-height: 3.125rem;
}
.team-directory .content-switcher {
  min-height: 56px;
  height: 56px;
  margin-bottom: 80px;
  border: 1px solid #14161E;
  border-radius: 12px;
  background-color: #FFFFFF;
}
.team-directory .content-switcher .scroll-box {
  padding: unset;
}
.team-directory .content-switcher .scroll-box .btn-switch {
  height: 40px;
  min-width: max-content;
  background-color: #FFFFFF;
}
.team-directory .content-switcher .scroll-box .btn-switch.active, .team-directory .content-switcher .scroll-box .btn-switch.is-active {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.team-directory > .affix {
  width: 1584px;
  height: 56px;
  top: 40px !important;
  z-index: 3;
}

/**
 *
 *  Achievements / Badge Layout kodeco variant page
 *
 */
.achievements .achievement-category:not(:last-child) {
  border-bottom: 1px solid #D7D7D7;
}
.achievements .achievement-category .badge-container {
  width: 12.5rem;
  height: 12.5rem;
}
.achievements .achievement-category .badge-container img.greyed {
  filter: grayscale(100%);
  opacity: 0.5;
}

/*
*
* Annotations page
*
*/
.annotations .notebook {
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 1rem;
}

/**
 *  Article Page
 *
 * 1. RW Overrides
 * 2. Chromeless
 * 3. Article (Tutorial)
 */
/* ==========================================================================
  1. RW Overrides
 ========================================================================== */
/* These two shouldn't have any styling attributes—they're there to support show/hide only */
.l-admin {
  padding: 0;
}

.l-admin--sidebar-open {
  padding: 0;
}

/* ==========================================================================
  2. Chromeless
 ========================================================================== */
.chromeless-layout {
  max-width: 594px;
  margin: 0 auto;
  position: relative;
}
.chromeless-layout .written-content {
  padding-top: 16px;
}
.chromeless-layout .written-content h1 + h2 {
  margin-top: 24px;
}
.chromeless-layout .written-content h2, .chromeless-layout .written-content h3, .chromeless-layout .written-content h4 {
  margin-top: 40px;
}
.chromeless-layout .written-content h3 {
  font-size: 1.5rem;
}
.chromeless-layout .written-content h3 {
  font-size: 1.25rem;
}
.chromeless-layout .written-content p, .chromeless-layout .written-content ul, .chromeless-layout .written-content ol {
  font-size: 1.125rem;
  margin-top: 24px;
}
.chromeless-layout .written-content p ul, .chromeless-layout .written-content p ol, .chromeless-layout .written-content ul ul, .chromeless-layout .written-content ul ol, .chromeless-layout .written-content ol ul, .chromeless-layout .written-content ol ol {
  margin-top: 16px;
}
.chromeless-layout .l-article-profile img {
  margin-top: 0;
}
.chromeless-layout .content-footer {
  margin: 40px 0 120px 0;
  gap: normal;
}
.chromeless-layout .content-footer .content-footer-actions .icon-prefix {
  margin-bottom: 0;
}
.chromeless-layout .content-footer .primary-contributors {
  margin: 80px 0 0 0;
}
.chromeless-layout .content-footer .primary-contributors .contributor {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chromeless-layout .content-footer .primary-contributors .contributor a {
  color: #14161E;
}
.chromeless-layout .content-footer .primary-contributors p {
  margin-top: 24px;
}

.chromeless-toc {
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 1019px) {
  .chromeless-toc {
    position: relative;
    max-width: 594px;
    margin: 0 auto 24px;
  }
}
.chromeless-toc .chromeless-date {
  display: block;
  font-size: 1rem;
}
.chromeless-toc .chromeless-author {
  display: block;
  margin-top: 16px;
  font-size: 1rem;
}

.chromeless-content .title {
  font-size: 3rem;
}
@media screen and (max-width: 767px) {
  .chromeless-content .title {
    font-size: 2.5rem;
  }
}
.chromeless-content .description {
  font-size: 2rem;
  margin-top: 24px;
  line-height: 1.25;
}
@media screen and (max-width: 767px) {
  .chromeless-content .description {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
  3. Article (Tutorial)
 ========================================================================== */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 80px;
  position: relative;
}
.article-layout a.bg-black-night {
  color: #FFFFFF;
}
.article-layout .fc-orange-determination {
  color: #CE3F00;
}
.article-layout .toc-collapsed {
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 1023px) {
  .article-layout .toc-collapsed {
    display: flex;
    align-items: flex-start;
    position: relative;
    max-width: 692px;
    width: 100%;
    margin: 0 auto 40px;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout .toc-collapsed {
    display: none !important;
  }
}
.article-layout .toc-collapsed a {
  padding-left: 0;
}
.article-layout .toc-expanded {
  position: relative;
  max-width: 692px;
  width: 100%;
  margin: 0 auto 80px;
}
@media screen and (max-width: 1023px) {
  .article-layout .toc-expanded {
    display: block !important;
    max-width: 692px;
  }
}
@media screen and (max-width: 767px) {
  .article-layout .toc-expanded {
    max-width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout .toc-expanded .toc-container .toc-header .tooltip {
    display: none !important;
  }
}
.article-layout .toc-expanded .toc-container .scrollactive-nav {
  margin-top: 16px;
}
@media screen and (max-width: 1023px) {
  .article-layout .toc-expanded .toc-container {
    max-height: 240px;
  }
}
.article-layout .toc-container {
  margin-top: 0;
}
.article-layout .written-content {
  max-width: 692px;
  margin: 0 auto;
}
.article-layout .written-content pre {
  border: 1px solid #14161E;
  white-space: break-spaces;
  word-break: break-word;
  font-size: 0.875rem;
  overflow: visible;
}
.article-layout .written-content code {
  word-break: break-word;
}
.article-layout .written-content .content-footer {
  gap: 80px;
}
.article-layout .written-content .content-footer .content-footer-actions .icon-prefix {
  margin: 8px 0 0 0;
  padding: 4px 0;
}
.article-layout .written-content .content-footer .modal h3 {
  margin-top: 0;
}
.article-layout .written-content .primary-contributors .contributor-avatars .contributor img {
  margin-top: 0;
  margin-bottom: 24px;
}
.article-layout.l-admin--sidebar-open {
  grid-template-columns: 396px 1fr;
  grid-column-gap: 98px;
}
@media screen and (max-width: 1279px) {
  .article-layout.l-admin--sidebar-open {
    grid-template-columns: 298px 1fr;
    grid-column-gap: 48px;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout.l-admin--sidebar-open {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout.l-admin--sidebar-open .toc-expanded {
    display: block;
  }
}

/**
 *
 * Books
 *
 * For use on book sales and chapters pages
 *
 * 1. Edition Page

 * 2. Sidebar
 *
 * 2. End of chapter message
 *
 * 3. Materials
 *
 * 4. Chapter font style
 *
 * 5. Chapter page color
 *
 * 6. Chapter font size
 *
 * 7. Chapter page size
 *
 * 8. Chapter image size
 *
 * 9. Book hero
 *
 * 10. Book sales
 *
 **/
/* ==========================================================================
1. Edition Page
========================================================================== */
.book-description {
  margin-bottom: 40px;
}
.book-description p {
  display: inline;
}
.book-description .modal-more {
  color: #CE3F00;
  text-decoration: underline;
}
.book-description .modal-description-only {
  margin: 0 24px;
}
.book-description .modal-description-only .written-content p {
  margin-top: 20px;
  display: block;
}
.book-description .modal-description-only .written-content h1,
.book-description .modal-description-only .written-content h2,
.book-description .modal-description-only .written-content h3,
.book-description .modal-description-only .written-content h4 {
  margin-top: 20px;
}

/* ==========================================================================
1. TOC/Sidebar
========================================================================== */
.l-admin.l-admin--sidebar-open .chapter-toc-container.toc-expanded {
  display: unset;
}

/* ==========================================================================
2. End of chapter message
========================================================================== */
/* ==========================================================================
3. Materials
========================================================================== */
/* ==========================================================================
4. Chapter font style
========================================================================== */
.l-chapter-font-serif .c-book-chapter .c-written-tutorial__content p,
.l-chapter-font-serif .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-font-serif .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-font-serif .c-book-chapter .c-written-tutorial__content .note,
.l-chapter-font-serif .c-book-chapter .c-written-tutorial__content figcaption {
  font-family: "IBM Plex Serif", serif !important;
}

.c-reading-experience-selector .l-chapter-font-serif label {
  font-family: "Relative";
}

.l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content p,
.l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content .note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.l-chapter-font-sans-serif .c-book-chapter .c-written-tutorial__content figcaption {
  font-family: "Relative Mono" !important;
}

/* ==========================================================================
6. Chapter text size
========================================================================== */
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content code {
  font-size: 75%;
}
.l-chapter-text-size-75 .c-book-chapter .c-written-tutorial__content figure {
  width: 75%;
}

.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content code {
  font-size: 80%;
}
.l-chapter-text-size-80 .c-book-chapter .c-written-tutorial__content figure {
  width: 80%;
}

.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content code {
  font-size: 85%;
}
.l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content figure {
  width: 85%;
}

.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content code {
  font-size: 90%;
}
.l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content figure {
  width: 90%;
}

.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content code {
  font-size: 100%;
}
.l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content figure {
  width: 100%;
}

.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content code {
  font-size: 110%;
}
.l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content figure {
  width: 110%;
}

.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content code {
  font-size: 120%;
}
.l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content figure {
  width: 120%;
}

.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content code {
  font-size: 130%;
}
.l-chapter-text-size-130 .c-book-chapter .c-written-tutorial__content figure {
  width: 130%;
}

.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h5,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content h6,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content span,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content blockquote,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content pre,
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content code {
  font-size: 140%;
}
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content figure {
  width: 140%;
}

/* ==========================================================================
7. Chapter page size
========================================================================== */
.l-page-size-456 .written-content, .l-page-size-456 .c-book-chapter {
  max-width: 495px;
}

.l-page-size-572 .written-content, .l-page-size-572 .c-book-chapter {
  max-width: 594px;
}

.l-page-size-920 .l-admin--sidebar-open .chapter-layout {
  grid-template-columns: 296px 890px 296px;
}
@media screen and (max-width: 1545px) {
  .l-page-size-920 .l-admin--sidebar-open .chapter-layout {
    grid-template-columns: 296px calc(100% - 656px) 296px;
  }
}
.l-page-size-920 .chapter-layout {
  grid-template-columns: 98px 890px 98px;
}
@media screen and (max-width: 1149px) {
  .l-page-size-920 .chapter-layout {
    grid-template-columns: 98px calc(100% - 260px) 98px;
  }
}
.l-page-size-920 .written-content, .l-page-size-920 .c-book-chapter {
  max-width: 890px;
}

.l-page-size-1036 .l-admin--sidebar-open .chapter-layout {
  grid-template-columns: 296px calc(100% - 656px) 296px;
}
.l-page-size-1036 .chapter-layout {
  grid-template-columns: 98px calc(100% - 260px) 98px;
}
.l-page-size-1036 .written-content, .l-page-size-1036 .c-book-chapter {
  max-width: 1286px;
}

/* ==========================================================================
8. Chapter image size
========================================================================== */
/* ==========================================================================
9. Book Hero
========================================================================== */
/* ==========================================================================
10. Book Sales
========================================================================== */
@media screen and (max-width: 767px) {
  .bookmarks-banner {
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
  }
}
.bookmarks-content {
  margin: 7.5rem 0 28.9375rem 0;
}
.bookmarks-content-empty {
  font-size: 1.75rem;
}
.bookmarks .card .card-bottom .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 *  Collection Pages
 *
 *  This is for video collections and (possibly) books.
 *
 * 1. Content Middle
 */
/* ==========================================================================
  1. Content Middle
 ========================================================================== */
.content-middle {
  display: grid;
  grid-column-gap: 8.33%;
  grid-template-columns: 33.33% 58.33%;
}
@media screen and (max-width: 959px) {
  .content-middle {
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }
}
.content-middle .content-middle-left .tile {
  padding: 0;
  border-radius: 0;
  margin-top: 80px;
}
.content-middle .content-middle-left .tile:first-of-type {
  margin-top: 0;
}
.content-middle .content-middle-left .tile .tile-header {
  min-height: 24px;
  margin-bottom: 20px;
}
.content-middle .content-middle-left .tile p,
.content-middle .content-middle-left .tile ul,
.content-middle .content-middle-left .tile ol {
  margin-top: 20px;
  padding-left: 0;
}
.content-middle .content-middle-left .tile p:first-of-type,
.content-middle .content-middle-left .tile ul:first-of-type,
.content-middle .content-middle-left .tile ol:first-of-type {
  margin-top: 0;
}
.content-middle .content-middle-left .tile p + ul {
  margin-top: 20px;
}
.content-middle .content-middle-left .tile p + ul:first-of-type {
  margin-top: 20px;
}
.content-middle .content-middle-left .tile p + ol {
  margin-top: 20px;
}
.content-middle .content-middle-left .tile p + ol:first-of-type {
  margin-top: 20px;
}
@media screen and (max-width: 959px) {
  .content-middle .content-middle-right {
    margin-top: 80px;
  }
}
.content-middle .content-middle-right .child-content-list-header:first-of-type {
  margin-top: 0;
}
.content-middle .content-middle-right .accordion-title:hover {
  text-decoration: underline !important;
  color: #CE3F00 !important;
  transition: none;
}
.content-middle .content-footer {
  margin: 0;
}

/**
 *  Content Pages
 *
 *  This is shared between articles, video collections and books.
 *
 * 1. Footer
 * 2. Responsiveness
 */
/* ==========================================================================
  1. Footer
 ========================================================================== */
footer.content-footer {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: 48px 0;
}
footer.content-footer a {
  color: #14161E;
}
footer.content-footer .content-footer-actions .icon-prefix {
  margin-bottom: 16px;
}
footer.content-footer .content-footer-actions .icon-prefix svg {
  fill: #14161E;
}

/* ==========================================================================
  2. Responsiveness
 ========================================================================== */
@media screen and (max-width: 767px) {
  .content-container nav.breadcrumbs {
    display: none;
  }
}

/**
 *
 *  A collection of styles that don't really fit anywhere else, and are used globally.
 *
 *  1. Body
 *
 */
/* ==========================================================================
 1. Body
========================================================================== */
.body {
  background-color: #F7F7F7;
}

/**
 *
 *  Library / Layout kodeco variant page
 *
 */
.library {
  max-width: 1584px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  grid-column-gap: 6.25%;
  position: relative;
}
@media screen and (max-width: 1631px) {
  .library {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 1439px) {
  .library {
    grid-template-columns: 280px 1fr;
  }
}
@media screen and (max-width: 959px) {
  .library {
    grid-template-columns: 1fr;
  }
}
.library .library-state {
  max-width: 396px;
  margin: 0 auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.library .library-state h3 {
  font-size: 1.75rem;
  line-height: 1.25;
}
.library .library-state h3 span {
  background-color: rgba(255, 136, 71, 0.5);
}
.library .library-state .loading, .library .library-state .loading-progress {
  width: 100%;
}
.library .library-search {
  display: flex;
  column-gap: 8px;
}
@media screen and (max-width: 767px) {
  .library .library-search {
    flex-direction: column;
    row-gap: 16px;
  }
}
.library .library-search form {
  width: 100%;
}
.library .library-search .dropdown details[open] .dropdown-trigger {
  border-color: #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.library .library-search .dropdown details[open] .btn-iconxsm {
  background-color: transparent;
}
.library .library-search .dropdown .dropdown-trigger {
  height: 48px;
  border-radius: 12px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  padding: 0 16px;
  transition: background-color 0.3s ease-in;
}
@media screen and (max-width: 767px) {
  .library .library-search .dropdown .dropdown-trigger {
    justify-content: space-between;
  }
}
.library .library-search .dropdown .dropdown-trigger:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.library .library-search .dropdown .dropdown-trigger .btn-iconxsm:hover {
  background-color: transparent !important;
}
.library .library-search .dropdown .dropdown-menu {
  left: auto;
  right: 0;
}
@media screen and (max-width: 1439px) {
  .library > div:last-of-type {
    display: none;
  }
}
.library .search {
  width: 100%;
}
.library .search input {
  width: 100%;
}
.library .toggle-filter {
  position: absolute;
  left: 0;
  width: 280px;
  display: none;
}
@media screen and (max-width: 1631px) {
  .library .toggle-filter {
    left: 24px;
  }
}
@media screen and (max-width: 959px) {
  .library .toggle-filter {
    position: relative;
    left: auto;
    display: flex;
  }
}
.library .toc {
  position: absolute;
  left: 0;
  width: 280px;
  display: unset;
}
@media screen and (max-width: 1631px) {
  .library .toc {
    left: 24px;
  }
}
@media screen and (max-width: 959px) {
  .library .toc {
    position: fixed;
    width: calc(100% - 48px);
    left: 24px;
    top: 108px;
    z-index: 10;
    height: calc(100% - 108px);
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .library .toc.hidden {
    display: none;
  }
}
@media screen and (max-width: 959px) {
  .library .toc:before {
    content: "";
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    position: absolute;
    left: -24px;
    top: -24px;
    z-index: -1;
    background-color: rgba(20, 22, 30, 0.5);
  }
}
@media screen and (max-width: 959px) {
  .library .toc .toc-header {
    position: absolute;
    width: 100%;
    z-index: 3;
  }
}
.library .toc .toc-header .tooltip {
  display: none;
}
@media screen and (max-width: 959px) {
  .library .toc .toc-header .tooltip {
    display: inline-block;
  }
}
.library .toc .toc-header .tooltip svg {
  max-width: 12px;
  max-height: 12px;
}
.library .toc .toc-body {
  padding: 0;
}
@media screen and (max-width: 959px) {
  .library .toc .toc-body {
    padding-top: 80px;
    overflow-y: scroll;
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 16px;
  }
}
.library .toc .accordion {
  min-width: auto;
}
.library .toc .accordion .accordion-trigger .trigger-text {
  font-size: 1.125rem;
}
.library .card {
  margin-bottom: 16px;
}
.library .card .card-bottom .card-title {
  font-size: 1.5rem;
}
.library .card .card-bottom mark {
  background-color: rgba(255, 136, 71, 0.5) !important;
}
.library .filter-tag {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 12px;
  font-size: 0.875rem;
  padding: 0 8px 0 16px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  margin-right: 4px;
  margin-bottom: 8px;
}
.library .filter-tag button {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
}
.library .filter-tag button:hover {
  background-color: rgba(215, 215, 215, 0.5);
}
.library .filter-tag button svg {
  width: 8px;
  height: 8px;
}
.library .filter-tag-master {
  background-color: #FF8847;
  text-decoration: none;
}

/**
*
* Night Mode
*
*
* 1. Global
* 2. Homepage (Logged In)
* 3. Homepage (Logged Out)
* 4. Notebook Card
* 5. Author About page
* 6. Library
* 7. Content TOC
* 8. Reviews
* 9a. Video — Episode Info
* 9b. Video — Player
* 10a. Article — TOC
* 10b. Article — Footer
* 11a. Content (accordion, header, footer)
* 11b. Content — Modals
* 11c. Comments — Not done? Old?
* 12a. Book Chapter — TOC
* 12b. Book Chapter — Highlighting Tooltip
* 12c. Book Chapter — Highlighting Colours
* 12d. Book Chapter — Experience Switcher
* 12e. Book Chapter — Notebook
* 12f. Book Chapter — Search
* 12g. Book Chapter — Content
* 12h. Book Chapter — Mobile Nav?
* 13. Learning Paths
* 14. Loading
* 15. Community Banners
* 16. Carbon Ads
* 17. Newsletter
* 18. Loader for Domain pages
* 19. Kodeco Launch overlay
* 20. About and team directory
* 21. Achievements
* 22. Banners / Messaging
* 23. Content pre, blockquote etc.
* 24. Homepage: Why Kodeco
* 25. Code Formatting
*
*
* X. Apply to CSS
*
**/
/* ==========================================================================
1. Dark styles as a placeholder to use for JS and OS with single stylesheet
========================================================================== */
/* ==========================================================================
Apply to CSS with class
========================================================================== */
.prefers-color-scheme--dark {
  background-color: #0E0F14;
  color: #FFFFFF !important;
  /* ==========================================================================
  1. Global
  ========================================================================== */
  /* ==========================================================================
  2. Homepage (Logged In)
  ========================================================================== */
  /* ==========================================================================
  3. Homepage (Logged Out)
  ========================================================================== */
  /* ==========================================================================
  4. Notebook Card
  ========================================================================== */
  /* ==========================================================================
  5. Author about page
  ========================================================================== */
  /* ==========================================================================
  6. Library
  ========================================================================== */
  /* ==========================================================================
  7. Content TOC
  ========================================================================== */
  /* ==========================================================================
  8. Reviews
  ========================================================================== */
  /* ==========================================================================
  9a. Video — Episode info
  ========================================================================== */
  /* ==========================================================================
  9b. Video — Player
  ========================================================================== */
  /* ==========================================================================
  10a. Article TOC
  ========================================================================== */
  /* ==========================================================================
  10b. Article Footer
  ========================================================================== */
  /* ==========================================================================
  11a. Content
  ========================================================================== */
  /* ==========================================================================
  11b. Content — Shared Modals
  ========================================================================== */
  /* ==========================================================================
  11c. Content — Ratings/Reviews Modal
  ========================================================================== */
  /* ==========================================================================
  11c. Comments
  ========================================================================== */
  /* ==========================================================================
  12a. Book Chapter TOC
  ========================================================================== */
  /* ==========================================================================
  12b. Book Chapter Highlighting Tooltip
  ========================================================================== */
  /* ==========================================================================
  12c. Book Chapter Highlighting Colors
  ========================================================================== */
  /* ==========================================================================
  12d. Book Reading Experience Switcher
  ========================================================================== */
  /* ==========================================================================
  12e. Book Reading Notebook
  ========================================================================= */
  /* ==========================================================================
  12f. Book Reading Search
  ========================================================================== */
  /* ==========================================================================
  12g. Book Chapter Content
  ========================================================================== */
  /* ==========================================================================
  12h. Book Chapter Mobile Navigation
  ========================================================================== */
  /* ==========================================================================
  13. Learning Paths
  ========================================================================== */
  /* ==========================================================================
  14. Loading
  ========================================================================== */
  /* ==========================================================================
  15. Community Banners
  ========================================================================== */
  /* ==========================================================================
  16. Carbon Ads
  ========================================================================== */
  /* ==========================================================================
  17. Newsletter
  ========================================================================== */
  /* ==========================================================================
  18. Domain Page loader (cos it is inline SVG inside JS)
  ========================================================================== */
  /* ==========================================================================
  19. Kodeco Launch Overlay
  ========================================================================== */
  /* ==========================================================================
    20. About and team directory
  ========================================================================== */
  /* ==========================================================================
    21. Achievements
  ========================================================================== */
  /* ==========================================================================
    22. Banners / Messaging
  ========================================================================== */
  /* ==========================================================================
    23. Content pre, blockquote etc.
  ========================================================================== */
  /* ==========================================================================
    24. Homepage: Why Kodeco
  ========================================================================== */
  /* ==========================================================================
    25. Code Formatting
  ========================================================================== */
  /* Comment */
  /* Red */
  /* Orange */
  /* Yellow */
  /* Green */
  /* Aqua */
  /* Blue */
  /* Purple */
}
.prefers-color-scheme--dark .body {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .home-section {
  border-color: #30363D;
}
.prefers-color-scheme--dark .topic-select {
  background-color: transparent;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .topic-select:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .topic-selection {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .topic-selection .control .checkbox .checkbox-tick {
  background-color: #0E0F14;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .topic-selection .control .checkbox:hover input ~ .checkbox-tick {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .topic-selection .control .checkbox:focus input ~ .checkbox-tick {
  background-color: #0E0F14;
  border: 1px solid #FF5A00;
  box-shadow: 0px 0px 0px 4px rgba(255, 90, 0, 0.2);
}
.prefers-color-scheme--dark .topic-selection .control .checkbox input:checked ~ span.checkbox-tick {
  background-color: #00B87E;
  border-color: #00B87E;
}
.prefers-color-scheme--dark .topic-selection .control .checkbox input#domain_ids {
  color: #0E0F14 !important;
}
.prefers-color-scheme--dark .content-counter .counter-count {
  color: #FF5A00 !important;
  border: 2px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .home-popular-search label.search svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark .home-popular-search input.search-normal {
  background-color: #07080A;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .home-popular-search input.search-normal:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark .home-popular-search input.search-normal:focus {
  background-color: #07080A !important;
  border-color: #FF5A00;
  box-shadow: 0px 0px 0px 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark .home-popular-search .search-tags a {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .home-popular-search .search-tags a:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .my-topics .topic-tag {
  background-color: transparent;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .my-topics .topic-tag svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .home-note-card {
  background-color: #14161E;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .home-note-card svg {
  fill: #14161E !important;
}
.prefers-color-scheme--dark .skeleton-search,
.prefers-color-scheme--dark .skeleton-domain,
.prefers-color-scheme--dark .skeleton-card,
.prefers-color-scheme--dark .skeleton-book,
.prefers-color-scheme--dark .skeleton-modal,
.prefers-color-scheme--dark .skeleton-note,
.prefers-color-scheme--dark .skeleton-bookmark,
.prefers-color-scheme--dark .skeleton-topic,
.prefers-color-scheme--dark .skeleton-card-100 {
  opacity: 0.1;
}
.prefers-color-scheme--dark .skeleton-container .skeleton-search,
.prefers-color-scheme--dark .skeleton-container .skeleton-domain,
.prefers-color-scheme--dark .skeleton-container .skeleton-card,
.prefers-color-scheme--dark .skeleton-container .skeleton-book,
.prefers-color-scheme--dark .skeleton-container .skeleton-modal,
.prefers-color-scheme--dark .skeleton-container .skeleton-note,
.prefers-color-scheme--dark .skeleton-container .skeleton-bookmark,
.prefers-color-scheme--dark .skeleton-container .skeleton-topic {
  opacity: 0.1;
}
.prefers-color-scheme--dark .skeleton-tags > div {
  opacity: 0.1;
}
.prefers-color-scheme--dark .home-hero {
  box-shadow: none;
}
.prefers-color-scheme--dark .home-hero .home-hero__action h4,
.prefers-color-scheme--dark .home-hero .home-hero__action ul {
  color: #14161E;
}
.prefers-color-scheme--dark section.kodeco-home-hero .kodeco-home-hero-content h1 span.fc-orange-glow {
  color: #FF5A00;
}
.prefers-color-scheme--dark section.kodeco-home-hero .module-background::before {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark section.kodeco-home-hero .module-background .module-background-round-top::before {
  box-shadow: -12px -12px 0 12px #0E0F14;
}
.prefers-color-scheme--dark section.kodeco-home-hero .module-background .module-background-round-bottom::before {
  box-shadow: -12px -12px 0 12px #0E0F14;
}
.prefers-color-scheme--dark section.home-content h2 span.fc-orange-glow {
  color: #FF5A00 !important;
}
.prefers-color-scheme--dark section.home-kodeco-community .home-kodeco-community-top-left h2 span.fc-orange-glow {
  color: #FF5A00 !important;
}
.prefers-color-scheme--dark section.home-logos .home-logos-grid > div {
  background-color: #14161E;
  border-color: #30363D;
}
.prefers-color-scheme--dark section.home-logos .home-logos-grid > div > img {
  filter: unset;
}
.prefers-color-scheme--dark section.home-testimonials .testimonials-card--container .card .card-topright .card-artwork span.badge {
  background-color: #14161E !important;
  border: 1px solid #30363D !important;
}
.prefers-color-scheme--dark section.home-testimonials .testimonials-card--container .card .card-topright .card-artwork span.badge svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark .home-pattern {
  background-image: none !important;
}
.prefers-color-scheme--dark .annotations .notebook {
  background-color: #14161E;
  border: 1px solid #30363D;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .annotations .notebook .badge svg {
  fill: #14161E;
}
.prefers-color-scheme--dark section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right::before {
  box-shadow: 12px 12px 0px 12px #0E0F14;
}
.prefers-color-scheme--dark section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right::after {
  box-shadow: 12px 10px 0px 10px #0E0F14;
}
.prefers-color-scheme--dark .library mark.highlight {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .library-search label.search svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .library-search .dropdown .dropdown-trigger {
  background-color: transparent;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .library-search .dropdown .dropdown-trigger:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .library-search .dropdown .dropdown-trigger:target {
  border-color: #FF5A00;
}
.prefers-color-scheme--dark .library-search .dropdown details[open] .dropdown-trigger {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .library-applied-filters .filter-tag {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .library-applied-filters .filter-tag svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .section-list ul.content-list .content-list--icon .content-list--icon-circle {
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .section-list ul.content-list .content-list--icon .content-list--icon-dot {
  background-color: #FFFFFF;
}
.prefers-color-scheme--dark .rating-questions .text-area {
  background-color: #07080A;
  color: #FFFFFF;
  border-color: #30363D;
}
.prefers-color-scheme--dark .rating-questions .text-area:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .rating-questions .text-area:focus {
  background-color: #07080A;
  border-color: #FF5A00;
}
.prefers-color-scheme--dark .modal-contributors .contributors.tile {
  background-color: #14161E;
}
.prefers-color-scheme--dark .video-player {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .card.banner-thumbnail .card-topright::before {
  box-shadow: -4px 4px 0 4px #FF8847;
}
.prefers-color-scheme--dark .card.banner-thumbnail .card-topright .card-artwork {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .article-layout .toc .toc-body nav a i.toc-item-indicator {
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .article-layout .toc .toc-body nav a i.toc-item-indicator:after {
  background: #FFFFFF;
}
.prefers-color-scheme--dark .content-footer .btn-mark-complete {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .content-footer .btn-mark-complete:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .content-footer .content-footer-actions .icon-prefix svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .accordion-content {
  border-color: #30363D;
  background-color: #14161E;
}
.prefers-color-scheme--dark .accordion-content details:not(:last-child) {
  border-bottom: 1px solid #30363D;
}
.prefers-color-scheme--dark .accordion-content .accordion-trigger .accordion-number {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .accordion-content .accordion-trigger .accordion-title:hover {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .content-hero {
  border: 1px solid #30363D;
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .content-hero {
    border: none;
  }
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .content-hero .dark-bg-orange-determination:hover {
    background-color: #ff4f02 !important;
  }
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .content-hero .metadata, .prefers-color-scheme--dark .content-hero .hero-other-versions {
    color: #FFFFFF !important;
  }
}
.prefers-color-scheme--dark .content-hero .content-hero-action svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark .content-footer section.contributors {
  background-color: #14161E !important;
  border-color: #30363D !important;
}
.prefers-color-scheme--dark .content-hero-share .modal-share .modal-wrapper {
  background-color: #14161E;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-share .modal-share .modal-wrapper .btn-icon svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-share .modal-share .modal-wrapper .modal-table {
  border-bottom: 1px solid rgba(215, 215, 215, 0.1019607843);
}
.prefers-color-scheme--dark .content-hero-share .modal-share .modal-wrapper .modal-table .btn-normalw {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .version-modal .modal .modal-wrapper .btn-icon svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper {
  background-color: #14161E !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .btn-icon svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .fc-black-night {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions p {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions .text-area {
  background-color: #07080A;
  color: #FFFFFF;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions .text-area:hover {
  background-color: unset;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .rating-form .rating-questions .text-area:focus {
  border-color: #FF5A00;
}
.prefers-color-scheme--dark .content-hero-right .modal-ratings .modal-wrapper .user-rating-self {
  background-color: #14161E;
}
.prefers-color-scheme--dark .c-forum-comments__load {
  background: #AC9FAB !important;
}
.prefers-color-scheme--dark .c-forum-comments__load span {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .c-forum-comments__load i svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .toc {
  background-color: #14161E;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .toc .toc-body {
  background-color: initial;
}
.prefers-color-scheme--dark .toc .toc-body .accordion .btn-iconsm svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .toc .toc-header {
  background-color: #14161E;
}
.prefers-color-scheme--dark .o-fragment--tooltip {
  background: #D7D7D7 !important;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .o-fragment--tooltip:after {
  background: #D7D7D7 !important;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__svg svg.o-button__svg--white {
  fill: #14161E !important;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--selected:before {
  border: 3px solid #D7D7D7;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--yellow {
  background: #966B19;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--orange {
  background: #CE3F00;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--red {
  background: #962224;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--purple {
  background: #4D3285;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--blue {
  background: #106790;
}
.prefers-color-scheme--dark .o-fragment--tooltip .o-tooltip__color--green {
  background: #157857;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-yellow {
  fill: #966B19;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-orange {
  fill: #CE3F00;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-red {
  fill: #962224;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-purple {
  fill: #4D3285;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-blue {
  fill: #106790;
}
.prefers-color-scheme--dark .o-button__svg--highlighter-green {
  fill: #157857;
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note {
  background: #07080A !important;
  border: 1px solid #30363D !important;
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note:focus, .prefers-color-scheme--dark .o-fragment--tooltip-with-note:active {
  border-color: #FF5A00 !important;
  box-shadow: 0px 0px 0px 4px rgba(255, 136, 71, 0.2);
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note textarea {
  color: #FFFFFF;
  background-color: #07080A;
}
.prefers-color-scheme--dark .o-fragment--tooltip-with-note textarea::placeholder {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .o-fragment__action {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .o-fragment mark {
  color: #FFFFFF;
  background-color: #966B19;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-yellow {
  background: #E3A93D;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-yellow.o-fragment--annotation-note {
  border-bottom: 3px solid #966B19;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-orange {
  background: #CE3F00;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-orange.o-fragment--annotation-note {
  border-bottom: 3px solid #FF5A00;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-red {
  background: #962224;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-red.o-fragment--annotation-note {
  border-bottom: 3px solid #E34A4C;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-purple {
  background: #B44EBF;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-purple.o-fragment--annotation-note {
  border-bottom: 3px solid #8763D2;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-blue {
  background: #106790;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-blue.o-fragment--annotation-note {
  border-bottom: 3px solid #2EA4DD;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-green {
  background: #157857;
}
.prefers-color-scheme--dark mark.o-fragment--highlighter-green.o-fragment--annotation-note {
  border-bottom: 3px solid #3C4425;
}
.prefers-color-scheme--dark .c-reading-experience-selector {
  background: #0E0F14;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector h4 {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector .o-button__svg--grey-regent {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large {
  background: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large label {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large .c-reading-experience-selector__radio:checked + span {
  background-color: #CE3F00;
  border: 2px solid #CE3F00;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large .c-reading-experience-selector__radio:checked + span:hover {
  background-color: #CE3F00;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__checkbox--large .c-reading-experience-selector__radio:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__range::-webkit-slider-runnable-track {
  background: rgba(215, 215, 215, 0.4980392157);
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__range:focus::-webkit-slider-runnable-track {
  background: rgba(215, 215, 215, 0.4980392157);
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__range::-moz-range-track {
  background: rgba(215, 215, 215, 0.4980392157);
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__range::-ms-track {
  background: rgba(215, 215, 215, 0.4980392157);
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__range::-webkit-slider-thumb {
  border: 0;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__range::-moz-range-thumb {
  border: 0;
}
.prefers-color-scheme--dark .c-reading-experience-selector .c-reading-experience-selector__range::-ms-thumb {
  border: 0;
}
.prefers-color-scheme--dark .c-notebook {
  background-color: #0E0F14;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .c-notebook .c-notebook-header {
  background-color: inherit;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry {
  border-bottom: 1px solid #30363D;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-text {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note span::before {
  filter: invert(1);
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area {
  background: #07080A;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area::placeholder {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area:active, .prefers-color-scheme--dark .c-notebook .c-notebook__entry .c-notebook__entry-note .text-area:focus {
  background-color: #07080A;
  border-color: #FF5A00 !important;
}
.prefers-color-scheme--dark .c-notebook .c-notebook__demo p mark {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .chapter-search .modal-wrapper,
.prefers-color-scheme--dark .c-global-search--book .modal-wrapper {
  background-color: #14161E !important;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .chapter-search .modal-wrapper svg.input__icon-svg--search,
.prefers-color-scheme--dark .c-global-search--book .modal-wrapper svg.input__icon-svg--search {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .chapter-search .modal-wrapper .c-global-search__recommendations .chapter-search-results ul li,
.prefers-color-scheme--dark .c-global-search--book .modal-wrapper .c-global-search__recommendations .chapter-search-results ul li {
  border-bottom: 1px solid #3B3D43;
}
.prefers-color-scheme--dark .chapter-search .modal-wrapper .c-global-search__recommendations .chapter-search-results ul li .c-search__results--highlight,
.prefers-color-scheme--dark .c-global-search--book .modal-wrapper .c-global-search__recommendations .chapter-search-results ul li .c-search__results--highlight {
  background-color: rgba(206, 63, 0, 0.5);
}
.prefers-color-scheme--dark .c-book-chapter .l-written-tutorial--light pre code {
  color: #14161E;
}
.prefers-color-scheme--dark .c-book-chapter h1,
.prefers-color-scheme--dark .c-book-chapter h2,
.prefers-color-scheme--dark .c-book-chapter h3,
.prefers-color-scheme--dark .c-book-chapter h4,
.prefers-color-scheme--dark .c-book-chapter h5,
.prefers-color-scheme--dark .c-book-chapter p,
.prefers-color-scheme--dark .c-book-chapter ol,
.prefers-color-scheme--dark .c-book-chapter ul {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .c-book-chapter blockquote {
  background-color: #14161E;
}
.prefers-color-scheme--dark .c-book-chapter blockquote.c-draper-obfuscate-nudge {
  background-color: unset;
}
.prefers-color-scheme--dark .c-book-chapter blockquote.c-draper-obfuscate-nudge .card-artwork {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .c-book-chapter blockquote.c-draper-obfuscate-nudge .l-obfuscated-text {
  background-color: #14161E;
}
.prefers-color-scheme--dark .c-book-chapter figcaption {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .c-book-chapter .l-image-bordered img {
  border-color: #FFFFFF !important;
}
.prefers-color-scheme--dark .l-written-tutorial--light pre {
  border: 1px solid #FFFFFF !important;
  background: #F7F7F7 !important;
  color: #14161E !important;
}
.prefers-color-scheme--dark .l-written-tutorial--light pre code {
  color: #14161E !important;
}
.prefers-color-scheme--dark .book-chapter__links {
  border-color: #30363D;
}
.prefers-color-scheme--dark .c-mobile-navigator--book {
  background: #0E0F14;
}
.prefers-color-scheme--dark .c-mobile-navigator--book .o-button__svg--grey-regent {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .c-mobile-navigator--book .l-button__svg-toc-icon-nav {
  stroke: #FFFFFF;
}
.prefers-color-scheme--dark .c-mobile-navigator {
  background: #0E0F14;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-mobile-navigator a:hover {
  background: #3B3D43 !important;
}
.prefers-color-scheme--dark .learning-path-completion-card {
  background: #14161E;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .library-state .loading .loading-icon svg {
  fill: #FFFFFF;
  -webkit-filter: invert(1);
  /* safari 6.0 - 9.0 */
  filter: invert(1);
}
.prefers-color-scheme--dark .c-banner-draper--community {
  background-color: #0E0F14 !important;
  color: white;
}
.prefers-color-scheme--dark .c-banner-draper--community:before {
  filter: invert(100%);
}
.prefers-color-scheme--dark .c-banner-draper--community .c-banner-draper__art:before {
  opacity: 0.1;
}
.prefers-color-scheme--dark .c-banner-draper--community-width + div .l-color-invert--dark {
  color: #D7D7D7 !important;
}
.prefers-color-scheme--dark .c-banner-draper--community-connect .c-banner-draper__art--left {
  background-image: url(/assets/artwork/community-connect-left--dark-d188b7bd4185599663b17c1ecdcd8595b5b689fc1357c89b7460ab638417a4c2.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.prefers-color-scheme--dark .c-banner-draper--community-connect .c-banner-draper__art--right {
  background-image: url(/assets/artwork/community-connect-right--dark-df53d5871133c3f43c52673105e9a0772f5590bc0da5de2209ae52bf23900d7d.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.prefers-color-scheme--dark .c-banner-draper--community-resources .c-banner-draper__art--left {
  background-image: url(/assets/artwork/community-people-left--dark-56d19ee88d857675cc159ce5d9180b6051607aa104e333a9100dab7b5f7901b0.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.prefers-color-scheme--dark .c-banner-draper--community-resources .c-banner-draper__art--right {
  background-image: url(/assets/artwork/community-people-right--dark-3d80de63d6da52637150422392d46502420957cfa5843f6dc457e3389178924a.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.prefers-color-scheme--dark #l-carbon-sidebar-ad .carbon-wrap a {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .l-background--grey {
  background-color: #14161E;
}
.prefers-color-scheme--dark .loading .loading-icon svg g {
  fill: #FFFFFF;
  -webkit-filter: invert(1);
  /* safari 6.0 - 9.0 */
  filter: invert(1);
}
.prefers-color-scheme--dark .overlay-box {
  background-color: #0E0F14;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .about .hero-page-header {
  mix-blend-mode: lighten;
}
.prefers-color-scheme--dark .about .hero-page-header:before {
  background-color: #14161E;
}
.prefers-color-scheme--dark .about .hero-page-header .hero-page-header-round-top:before {
  box-shadow: -12px 12px 0 12px #14161E;
}
.prefers-color-scheme--dark .about .hero-page-header .hero-page-header-round-bottom:before {
  box-shadow: -12px 12px 0 12px #14161E;
}
.prefers-color-scheme--dark .about .fc-orange-glow {
  color: #FF5A00 !important;
}
.prefers-color-scheme--dark .team-directory .team-grid:not(:last-of-type) {
  border-bottom: 1px solid #3B3D43;
}
.prefers-color-scheme--dark .team-directory .content-switcher {
  background-color: #0E0F14;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .team-directory .content-switcher .scroll-box .btn-switch {
  background-color: #0E0F14;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .team-directory .content-switcher .scroll-box .btn-switch:hover, .prefers-color-scheme--dark .team-directory .content-switcher .scroll-box .btn-switch.is-active, .prefers-color-scheme--dark .team-directory .content-switcher .scroll-box .btn-switch.active {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .achievement-category {
  border-bottom: 1px solid #30363D !important;
}
.prefers-color-scheme--dark .obscure-banner .card-topleft {
  background-color: #CE3F00;
  border: 1px solid #FFFFFF;
  border-style: solid solid none solid;
}
.prefers-color-scheme--dark .obscure-banner .card-bottom {
  background-color: #CE3F00;
  border: 1px solid #FFFFFF;
  border-style: none solid solid solid;
}
.prefers-color-scheme--dark .obscure-banner .card-bottom:before {
  border: 1px solid #FFFFFF !important;
  border-style: solid solid none none !important;
}
.prefers-color-scheme--dark .obscure-banner .card-topright:before {
  border: 1px solid #FFFFFF !important;
  border-style: none none solid solid !important;
  box-shadow: -4px 4px 0 4px #CE3F00 !important;
}
.prefers-color-scheme--dark .obscure-banner .card-topright .card-artwork {
  border: 1px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .c-banner-draper-sticky--obfuscate {
  background-color: #CE3F00;
}
.prefers-color-scheme--dark .c-written-tutorial__content pre, .prefers-color-scheme--dark .written-content pre {
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .c-written-tutorial__content code, .prefers-color-scheme--dark .written-content code {
  background-color: #14161E;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .c-written-tutorial__content .btn-mark-complete, .prefers-color-scheme--dark .written-content .btn-mark-complete {
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-written-tutorial__content .btn-mark-complete svg, .prefers-color-scheme--dark .written-content .btn-mark-complete svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .c-written-tutorial__content .btn-mark-complete.btn-mark-complete--completed, .prefers-color-scheme--dark .written-content .btn-mark-complete.btn-mark-complete--completed {
  border: none;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre, .prefers-color-scheme--dark .light-code.written-content pre {
  background-color: #F7F7F7;
  color: #14161E;
  /* Comment */
  /* Red */
  /* Orange */
  /* Yellow */
  /* Green */
  /* Aqua */
  /* Blue */
  /* Purple */
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre span, .prefers-color-scheme--dark .light-code.written-content pre span {
  color: #14161E !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-comment,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-quote, .prefers-color-scheme--dark .light-code.written-content pre .hljs-comment,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-quote {
  color: #918791 !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-variable,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-template-variable,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-attribute,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-tag,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-name,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-selector-id,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-selector-class,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-regexp,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-link,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-deletion, .prefers-color-scheme--dark .light-code.written-content pre .hljs-variable,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-template-variable,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-attribute,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-tag,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-name,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-selector-id,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-selector-class,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-regexp,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-link,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-deletion {
  color: #E34A4C !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-number,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-built_in,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-builtin-name,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-literal,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-type,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-params, .prefers-color-scheme--dark .light-code.written-content pre .hljs-number,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-built_in,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-builtin-name,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-literal,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-type,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-params {
  color: #FF5A00 !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-class .hljs-title, .prefers-color-scheme--dark .light-code.written-content pre .hljs-class .hljs-title {
  color: #966B19 !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-string,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-symbol,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-bullet,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-addition, .prefers-color-scheme--dark .light-code.written-content pre .hljs-string,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-symbol,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-bullet,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-addition {
  color: #157857 !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-meta, .prefers-color-scheme--dark .light-code.written-content pre .hljs-meta {
  color: #1D7EAF !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-function,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-section,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre .hljs-title, .prefers-color-scheme--dark .light-code.written-content pre .hljs-function,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-section,
.prefers-color-scheme--dark .light-code.written-content pre .hljs-title {
  color: #2E5FFF !important;
}
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre span.hljs-keyword,
.prefers-color-scheme--dark .light-code.c-written-tutorial__content pre span.hljs-selector-tag, .prefers-color-scheme--dark .light-code.written-content pre span.hljs-keyword,
.prefers-color-scheme--dark .light-code.written-content pre span.hljs-selector-tag {
  color: #6B2372 !important;
}
.prefers-color-scheme--dark .why-card-container .card .card-topleft {
  border: 1px solid #30363D;
  border-style: solid solid none solid;
}
.prefers-color-scheme--dark .why-card-container .card .card-topright:before {
  border: 1px solid #30363D;
  border-style: none none solid solid;
}
.prefers-color-scheme--dark .why-card-container .card .card-bottom {
  border: 1px solid #30363D;
  border-style: none solid solid solid;
}
.prefers-color-scheme--dark .why-card-container .card .card-bottom:before {
  border: 1px solid #30363D;
  border-style: solid solid none none;
}
.prefers-color-scheme--dark .hljs-comment,
.prefers-color-scheme--dark .hljs-quote {
  color: #999999 !important;
}
.prefers-color-scheme--dark .hljs-variable,
.prefers-color-scheme--dark .hljs-template-variable,
.prefers-color-scheme--dark .hljs-attribute,
.prefers-color-scheme--dark .hljs-tag,
.prefers-color-scheme--dark .hljs-name,
.prefers-color-scheme--dark .hljs-selector-id,
.prefers-color-scheme--dark .hljs-selector-class,
.prefers-color-scheme--dark .hljs-regexp,
.prefers-color-scheme--dark .hljs-link,
.prefers-color-scheme--dark .hljs-deletion {
  color: #F64E1A !important;
}
.prefers-color-scheme--dark .hljs-number,
.prefers-color-scheme--dark .hljs-built_in,
.prefers-color-scheme--dark .hljs-builtin-name,
.prefers-color-scheme--dark .hljs-literal,
.prefers-color-scheme--dark .hljs-type,
.prefers-color-scheme--dark .hljs-params {
  color: #F08D49 !important;
}
.prefers-color-scheme--dark .hljs-class .hljs-title {
  color: #F8C555 !important;
}
.prefers-color-scheme--dark .hljs-string,
.prefers-color-scheme--dark .hljs-symbol,
.prefers-color-scheme--dark .hljs-bullet,
.prefers-color-scheme--dark .hljs-addition {
  color: #7EC699 !important;
}
.prefers-color-scheme--dark .hljs-meta {
  color: #18B5AB !important;
}
.prefers-color-scheme--dark .hljs-function,
.prefers-color-scheme--dark .hljs-section,
.prefers-color-scheme--dark .hljs-title {
  color: #70A2FF !important;
}
.prefers-color-scheme--dark .hljs-keyword,
.prefers-color-scheme--dark .hljs-selector-tag {
  color: #CC99CD !important;
}

/**
 *
 * Layouts
 *
 * For use on path pages
 *
 * 1. Grid
 *
 * 2. Hero
 *
 * 3. Course List
 *
 **/
/* ==========================================================================
1. Grid
========================================================================== */
.learning-path-grid {
  display: grid;
  grid-template-columns: 398px 1fr;
  grid-column-gap: 98px;
}
@media screen and (max-width: 1023px) {
  .learning-path-grid {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
    max-width: 692px;
    margin: 0 auto;
  }
}
.learning-path-grid .get-started {
  max-width: 100%;
  width: 100%;
  justify-content: center;
}

.simple-format + p {
  text-align: start;
}

/* ==========================================================================
2. Hero
========================================================================== */
.learning-path-grid .hero-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}
.learning-path-grid .hero-wrapper .triad {
  max-width: 398px;
  margin: 0 auto;
}
.learning-path-grid .hero h1 {
  display: none;
}
@media screen and (max-width: 1023px) {
  .learning-path-grid .hero h1 {
    display: block;
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 767px) {
  .learning-path-grid .hero h1 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
.learning-path-grid .hero p {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-top: 20px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .learning-path-grid .hero p {
    font-size: 1rem;
  }
}
.learning-path-grid .hero p:first-of-type {
  margin-top: 0;
}

/* ==========================================================================
3. Course List
========================================================================== */
.learning-path-wrapper h1 {
  font-size: 3.5rem;
  line-height: 3.5rem;
}
@media screen and (max-width: 1023px) {
  .learning-path-wrapper h1 {
    display: none;
  }
}
.learning-path-list {
  max-width: 43.25rem;
}
@media screen and (max-width: 767px) {
  .learning-path-list {
    margin-top: 5rem;
  }
}
.learning-path-list .card .card-topleft > span.badge {
  font-weight: normal !important;
  letter-spacing: 0;
}
.learning-path-next-course {
  margin-top: 9rem;
}
@media screen and (min-width: 1024px) {
  .learning-path-next-course-title {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  .learning-path-next-course-title {
    font-size: 28px;
  }
}
.learning-path-next-course .content-item--collection {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 1279px) {
  .learning-path-next-course .content-item--collection {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .learning-path-next-course .content-item--collection {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .learning-path-next-course .content-item--collection {
    grid-template-columns: 1fr;
  }
}
.learning-path-next-course .card .card-bottom {
  display: grid;
}
.learning-path-next-course .card .card-bottom .card-description {
  display: grid;
}
.learning-path-next-course .card .card-bottom .card-description .card-text {
  -webkit-line-clamp: 4;
}
.learning-path-completion {
  margin-top: 9rem;
}
@media screen and (min-width: 1024px) {
  .learning-path-completion-title {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  .learning-path-completion-title {
    font-size: 28px;
  }
}
.learning-path-completion-card {
  margin-top: 2rem;
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 16px;
  align-items: center;
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-column-gap: 40px;
  padding: 40px;
}
@media screen and (max-width: 767px) {
  .learning-path-completion-card {
    grid-template-columns: 1fr;
    padding: 40px 24px;
  }
}
@media screen and (max-width: 767px) {
  .learning-path-completion-card {
    flex-direction: column;
  }
}
.learning-path-completion-card-artwork {
  max-width: 232px;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .learning-path-completion-card-artwork {
    margin: 0 auto 40px;
  }
}
.learning-path-completion-card-artwork .triad-top-right img, .learning-path-completion-card-artwork .triad-bottom-left img {
  padding: 20px !important;
}
/**
 *
 *  profile kodeco variant page
 *
 */
.profile .profile-banner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.profile .biography-wrapper {
  display: flex;
  justify-content: center;
}
.profile .biography-wrapper .biography {
  width: 37.125rem;
  line-height: 2.25rem;
}
.profile .biography-wrapper .biography h1 {
  line-height: 3.75rem;
}
@media screen and (max-width: 767px) {
  .profile .biography-wrapper .biography h1 {
    line-height: 3.125rem;
  }
}
.profile .biography-wrapper .biography .bio-description {
  line-height: 2.25rem;
}
@media screen and (max-width: 767px) {
  .profile .biography-wrapper .biography .bio-description {
    line-height: 1.875rem;
  }
}
.profile .biography-wrapper .biography .bio-description a {
  color: #FF5A00;
}
.profile .biography-wrapper .biography .modal .modal-wrapper {
  position: absolute;
  top: 0;
}

/**
 *  Contribution Modal
 */
.modal-contribution {
  overflow: hidden;
}
.modal-contribution .modal-wrapper {
  height: 80vh;
  overflow-y: scroll;
  overflow-x: hidden;
}
.modal-contribution .modal-wrapper::-webkit-scrollbar {
  display: none;
}

/**
* Banner Artwork
*
*/
/* ==========================================================================
1a. Banner Artwork
========================================================================== */
section.profile-artwork {
  position: relative;
  max-width: 1680px;
  margin: 40px auto 0;
  overflow: hidden;
  border-radius: 48px 48px 24px 48px;
}
@media screen and (min-width: 768px) {
  section.profile-artwork {
    background-size: 100%;
    background-image: url(/assets/artwork/kodeco/module-page-header-yellow@1.5x-a226a061de6efb99f4331ce9b5a9fe4e7b302fdc99017c0aa90eac39b6d72294.jpg);
  }
}
@media screen and (max-width: 767px) {
  section.profile-artwork {
    margin-top: 80px;
  }
}
section.profile-artwork .profile-artwork-top {
  border-radius: 48px 48px 48px 0;
  padding-top: 80px;
  height: 240px;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-top {
    display: none;
    height: 200px;
  }
}
section.profile-artwork .profile-artwork-top > div {
  display: grid;
  grid-template-columns: 496px 594px;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-top > div {
    padding-bottom: 80px;
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-top > div {
    padding-bottom: 0;
  }
}
section.profile-artwork .profile-artwork-bottom {
  grid-template-columns: 1fr 240px;
  height: 240px;
  display: grid;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom {
    display: flex;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-left {
  border-radius: 0 0 48px 48px;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-left {
    display: none;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right {
  position: relative;
  justify-content: end;
  background-color: #F7F7F7;
  border-radius: 48px 0;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right {
    margin: 0 auto;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: -120px;
  border-radius: 0 0 48px 0;
  box-shadow: 12px 12px 0px 12px #F7F7F7;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right:before {
    display: none;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right:after {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  top: -48px;
  right: 0px;
  border-radius: 0 0 48px 0;
  box-shadow: 12px 10px 0px 10px #F7F7F7;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right:after {
    display: none;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right-profile-picture {
  overflow: hidden;
  border-radius: 24px;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
@media screen and (max-width: 767px) {
  section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right-profile-picture {
    position: unset;
  }
}
section.profile-artwork .profile-artwork-bottom .profile-artwork-bottom-right-profile-picture img {
  max-width: 200px;
  min-width: 100%;
  min-height: 100%;
}

/**
 *  Tutorials
 *
 * 1. Containers modifier
 * 2. Responsiveness
 * 3. Bookmark button modifier
 * 4. Cards
 * 5. Pagination
 *
 */
/* ==========================================================================
  1. Containers modifier
 ========================================================================== */
.content--empty-state {
  max-width: 396px;
  text-align: center;
  margin: 60px 0;
}
.content--empty-state h4 {
  font-size: 1.75rem;
}

/* ==========================================================================
  2. Responsiveness
 ========================================================================== */
/* ==========================================================================
  3. Bookmark button modifier
 ========================================================================== */
/* ==========================================================================
  4. Cards
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .tutorial-card-container .card {
    height: 353px;
  }
}
.tutorial-card-container .card .card-bottom .card-title {
  font-size: 1.5rem;
}
.tutorial-card-container .card .card-bottom .card-description .dropdown .dropdown-menu {
  min-width: 298px;
}
.tutorial-card-container .card .card-bottom .card-action .tooltip .tooltip-text.tooltip-left {
  bottom: calc(100% + 8px);
  right: 0;
  top: inherit;
  transform: none;
}

/* ==========================================================================
  5. Pagination
 ========================================================================== */
.tutorials-pagination ul.pagination li.page.active a.page-link {
  background: #D7D7D7;
  color: #14161E;
}

/**
 *
 * These are the components that makeup the logged in home page
 *
 *
 * 0. Home Layout
 * 1. Popular Searches
 * 2. New Content
 * 3. Tutorial Progress
 * 4. Community
 * 5. Empty States
 * 6. Skeletons
 * 7. Achievements
 * 8. My topics + subscriber nonsense stuff
 * 9. My notes
 * 10. Dropdowns
 *
 **/
/* ==========================================================================
  0. Home layout
 ========================================================================== */
.home-container {
  max-width: 1149px;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 296px;
  grid-column-gap: 100px;
}
@media screen and (max-width: 1179px) {
  .home-grid {
    display: block;
  }
}

.home-section {
  padding-bottom: 40px;
  border-bottom: 1px solid #D7D7D7;
}

.home-section-header {
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
  1. Popular Searches
 ========================================================================== */
.home-popular-search input {
  margin-top: 32px;
  margin-bottom: 16px;
  width: 100%;
}
.home-popular-search .search-tags :nth-child(n+1) {
  margin-right: 4px;
  margin-bottom: 8px;
}
@media screen and (max-width: 1023px) {
  .home-popular-search .search-tags {
    overflow-x: scroll;
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
    white-space: nowrap;
  }
  .home-popular-search .search-tags::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
  2. New content
 ========================================================================== */
.new-content-grid {
  display: flex;
  column-gap: 40px;
}
.new-content-grid > div {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 1023px) {
  .new-content-grid {
    overflow-x: scroll;
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
    /* for reasons unknown the top of the circle cuts off on mobile...*/
    padding-top: 16px;
  }
  .new-content-grid::-webkit-scrollbar {
    display: none;
  }
}

.new-content .modal .modal-wrapper {
  min-height: 586px;
  height: 50%;
  overflow-y: scroll !important;
  overflow-x: hidden;
}
.new-content .card-action .btn-icon svg {
  max-width: 20px !important;
  max-height: 20px !important;
}

/* ==========================================================================
  3. Tutorial progress
 ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}
@media screen and (max-width: 767px) {
  .card-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
    padding-bottom: 24px;
  }
}

/* ==========================================================================
  4. Community
 ========================================================================== */
.home-community-card .card .card-bottom .card-title {
  font-size: 1.5rem;
}

@media screen and (max-width: 1023px) {
  .home-community-list {
    border-bottom: 1px solid #D7D7D7;
  }
  .home-community-list .card-grid {
    flex-direction: column;
  }
}

/* ==========================================================================
  5. Empty States
 ========================================================================== */
.progress-empty {
  text-align: center;
  margin: 40px auto;
  max-width: 496px;
}
.progress-empty .btn-small,
.progress-empty .btn-normalw,
.progress-empty .btn-normalt {
  min-width: fit-content;
}

/* ==========================================================================
  6. Skeletons
 ========================================================================== */
.skeleton-search {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 48px;
  margin-top: 32px;
}

.skeleton-container {
  margin-top: 40px;
  display: flex;
}
.skeleton-container :nth-child(n+2) {
  margin-left: 32px;
}
.skeleton-container .skeleton-domain {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 98px;
  width: 98px;
  margin-right: 8px;
}

.skeleton-card {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 320px;
  width: 380px;
}

.skeleton-book {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  width: 200px;
  height: 260px;
}

.skeleton-modal {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  width: 740px;
  height: 290px;
}

.skeleton-note {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 244px;
}

.skeleton-bookmark {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 338px;
}

.skeleton-topic {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 104px;
}

.skeleton-card-100 {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  height: 320px;
  width: 100%;
}

.skeleton-tags {
  display: flex;
  flex-direction: row;
  column-gap: 8px;
}
.skeleton-tags > div {
  max-width: 100%;
  border-radius: 12px;
  background: rgba(215, 215, 215, 0.4980392157);
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: linear-gradient(to right, #E1E3E6 8%, #E6E8EB 18%, #E1E3E6 33%);
  background-size: 800px 104px;
  width: 80px;
  height: 40px;
  border-radius: 12px;
}

/* ==========================================================================
  7. Achievements
 ========================================================================== */
.home-achievements .achievement-title {
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  display: block;
  max-width: 118px;
  margin: 24px auto 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.home-achievements .achievement-subtitle {
  font-size: 0.875rem;
  line-height: 1;
  margin-top: 16px;
  display: block;
}
@media screen and (max-width: 1023px) {
  .home-achievements .card-grid {
    display: grid;
  }
}

/* ==========================================================================
  8. My topics + subscriber nonsense stuff
 ========================================================================== */
.my-topics .with-icon .tooltip .tooltip-top-align-center {
  width: 316px;
  white-space: normal;
  padding: 16px;
  height: auto;
}
@media screen and (max-width: 1023px) {
  .my-topics {
    margin-top: 80px;
  }
}
.my-topics .topic-tag {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 12px;
  font-size: 0.875rem;
  padding: 0 8px 0 16px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  margin-right: 4px;
  margin-bottom: 8px;
}
.my-topics .topic-tag button {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
}
.my-topics .topic-tag button:hover {
  background-color: rgba(215, 215, 215, 0.5);
}
.my-topics .topic-tag button svg {
  width: 8px;
  height: 8px;
}
.my-topics .home-sub-checklist {
  display: block;
  width: 100;
}
.my-topics .home-sub-checklist .toc .toc-header .btn-icon {
  margin-right: 20px;
}
.my-topics .home-sub-checklist .toc .toc-header .btn-icon svg {
  height: 12px;
}
.my-topics .home-sub-checklist .home-activity-checklist {
  padding: 0 24px 0;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry {
  margin-bottom: 16px;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry .activity-checklist-entry-top {
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry .activity-checklist-entry-top > button svg {
  fill: #14161E;
  width: 12px;
  height: 9px;
  position: absolute;
  top: 6px;
  right: 0;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry .activity-checklist-entry-bottom {
  padding-left: 39px;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry .activity-checklist-entry-list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry .activity-checklist-entry-title {
  font-size: 1rem;
  padding-left: 39px;
  white-space: nowrap;
  max-width: 100%;
  width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry .o-button-disclose--small {
  position: absolute;
  width: 100%;
  height: 100%;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry .activity-checklist-entry-desc {
  font-size: 0.875rem;
  color: #14161E;
  margin-top: 16px;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry .c-activity-checklist__entry__action {
  display: inline-flex;
  background-color: #14161E;
  font-size: 0.875rem;
  color: #FFFFFF;
  justify-content: center;
  padding: 12px 32px;
  margin-top: 16px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry--completed .activity-checklist-entry-title {
  text-decoration: line-through;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry--completed .activity-checklist-entry-list {
  background-color: #00B87E;
  border: unset;
}
.my-topics .home-sub-checklist .home-activity-checklist .activity-checklist-entry--completed .activity-checklist-entry-list svg {
  fill: #FFFFFF;
  width: 12px;
  height: 10px;
}

.topic-select {
  min-height: 16px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.topic-select .topic-name {
  font-size: 1rem;
  color: #14161E;
  display: block;
}

.topic-selection {
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  padding: 24px;
  margin-top: 8px;
  position: absolute;
  width: 100%;
}

/* ==========================================================================
  9. My notes
 ========================================================================== */
.home-note-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  padding: 24px;
  min-height: 196px;
  width: 100%;
}
.home-note-card .card-text {
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .home-note-card .card-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media screen and (max-width: 1023px) {
  .home-note-card {
    margin-bottom: 40px;
  }
}

/* ==========================================================================
  9. Dropdown
 ========================================================================== */
.home-grid .card .dropdown .dropdown-menu .dropdown-content {
  min-width: 298px;
}

/**
 *  Video Episode Page
 *
 * 1. Layout
 * 2. Cinema Mode
 * 3. Actions
 * 4. Table of Contents
 * 5. Transcript
 * 6. Notes
 * 7. Responsiveness
 */
/* ==========================================================================
  1. Layout
 ========================================================================== */
.video-episode {
  display: grid;
  grid-template-columns: 98px 1fr 98px;
  grid-template-rows: max-content 1fr;
  width: min(1536px, 100vw - 48px);
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  grid-column-gap: 16px;
  place-items: start;
}
@media screen and (max-width: 1279px) {
  .video-episode {
    grid-template-columns: 64px 1fr 64px;
  }
}
@media screen and (max-width: 1023px) {
  .video-episode {
    grid-template-columns: 1fr;
  }
}
.video-episode .video-toc {
  grid-column: 1;
  grid-row: 1/3;
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 1023px) {
  .video-episode .video-toc {
    margin-top: 24px;
  }
}
.video-episode .video-toc .toc-collapsed {
  text-align: center;
}
.video-episode .video-toc .toc-collapsed .toc-container {
  overflow: visible;
}
.video-episode .video-toc .toc-collapsed .toc-container .btn-label > span {
  padding-left: 0;
}
.video-episode .video-toc .toc-container {
  margin-top: 0;
}
.video-episode .video-toc .toc-header {
  min-height: 64px;
}
.video-episode .video-toc .toc-header h2 {
  margin: 0 24px;
}
.video-episode .video-toc .toc-body {
  padding: 16px 24px 24px;
}
.video-episode .video-toc .toc-body h2 {
  margin-bottom: 4px;
}
.video-episode .video-toc .section-list-header--wrapper, .video-episode .video-toc .content-list {
  padding: 24px 0 0 0;
}
.video-episode .video-player {
  grid-column: 2;
  grid-row: 1;
}
@media screen and (max-width: 1023px) {
  .video-episode .video-player {
    margin-bottom: 16px;
  }
}
.video-episode .video-actions {
  grid-column: 3;
  grid-row: 1;
  grid-gap: 4px;
}
.video-episode .video-details {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  margin-top: 24px;
}

/* ==========================================================================
  2. Cinema Mode
 ========================================================================== */
.video-episode.video-episode--cinema {
  grid-template-columns: 380px 1fr;
  grid-template-rows: min-content min-content 1fr;
  grid-row-gap: 40px;
  grid-column-gap: 98px;
}
@media screen and (max-width: 1023px) {
  .video-episode.video-episode--cinema {
    display: flex;
    flex-direction: column;
    grid-row-gap: inherit;
  }
}
.video-episode.video-episode--cinema .video-toc {
  grid-row: 2/4;
}
@media screen and (max-width: 1023px) {
  .video-episode.video-episode--cinema .video-toc {
    order: 4;
  }
}
.video-episode.video-episode--cinema .video-toc .toc-collapsed, .video-episode.video-episode--cinema .video-toc .toc-toggle {
  display: none !important;
}
.video-episode.video-episode--cinema .video-toc .toc-expanded {
  display: flex !important;
}
.video-episode.video-episode--cinema .video-toc .toc {
  width: 100%;
}
.video-episode.video-episode--cinema .video-player {
  grid-column: 1/3;
}
@media screen and (min-width: 1680px) {
  .video-episode.video-episode--cinema .video-player .title-slide h1 {
    font-size: 4.375rem;
  }
}
@media screen and (min-width: 1680px) {
  .video-episode.video-episode--cinema .video-player .title-slide p {
    font-size: 1.125rem;
  }
}
@media screen and (min-width: 1680px) {
  .video-episode.video-episode--cinema .video-player .title-slide .slide-episode h2 {
    font-size: 1.125rem;
  }
}
.video-episode.video-episode--cinema .video-player .title-slide .slide-episode h3 {
  line-height: 1.25;
}
@media screen and (min-width: 1680px) {
  .video-episode.video-episode--cinema .video-player .title-slide .slide-episode h3 {
    font-size: 4.375rem;
  }
}
.video-episode.video-episode--cinema .video-actions {
  grid-column: 2;
  grid-row: 2;
  margin-left: 0;
}
.video-episode.video-episode--cinema .video-details {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0;
}
@media screen and (max-width: 1023px) {
  .video-episode.video-episode--cinema .video-details {
    margin-top: 24px;
  }
}

/* ==========================================================================
  3. Actions
 ========================================================================== */
.video-episode .video-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
}
.video-episode .video-actions .spacer {
  flex-grow: 1;
  flex-shrink: 1;
}
.video-episode .video-actions .btn-icon-arrow svg {
  max-height: 15px;
  width: 14px;
  height: 15px;
}
.video-episode.video-episode--cinema .video-actions {
  flex-direction: row;
}

/* ==========================================================================
  4. Table of Contents
 ========================================================================== */
.video-episode .video-toc .toc-collapsed {
  display: block;
}
.video-episode .video-toc .toc-expanded {
  display: none;
}

.video-episode-toc--open {
  grid-template-columns: 380px 5fr 98px;
}
@media screen and (max-width: 1279px) {
  .video-episode-toc--open {
    grid-template-columns: 292px 5fr 64px;
  }
}
@media screen and (max-width: 1023px) {
  .video-episode-toc--open {
    grid-template-columns: 1fr;
  }
}
.video-episode-toc--open.video-episode--cinema {
  grid-template-columns: 380pxr 5fr !important;
}
@media screen and (max-width: 1279px) {
  .video-episode-toc--open.video-episode--cinema {
    grid-template-columns: 380pxr 5fr !important;
  }
}
.video-episode-toc--open .video-toc .toc-collapsed {
  display: none;
}
.video-episode-toc--open .video-toc .toc-expanded {
  display: block;
  padding-right: 16px;
}
@media screen and (max-width: 1023px) {
  .video-episode-toc--open .video-toc .toc-expanded {
    padding-right: 0;
  }
}

/* ==========================================================================
  5. Transcript
 ========================================================================== */
.transcript {
  position: relative;
  max-width: 806px;
  margin: 0 auto;
}
.transcript .video-timestamp {
  display: flex;
  align-items: center;
  position: absolute;
  left: -62px;
  height: 24px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: underline;
  color: #14161E;
  background: none;
  box-shadow: none;
  border: none;
}
.transcript ul li {
  position: relative;
  margin-right: 56px;
}
.transcript ul li .video-timestamp {
  margin-left: -24px;
}
.transcript ul li p {
  margin-left: 0px;
  margin-right: 56px;
}
.transcript ul li p .video-timestamp {
  margin-left: -24px;
}
.transcript ul, .transcript p, .transcript ol, .transcript pre {
  font-size: 1rem;
  margin-left: 62px;
  margin-right: 48px;
  position: relative;
}
.transcript pre {
  display: none;
  animation: scale-down 200ms ease-in-out;
  transform-origin: top;
}
.transcript pre code {
  padding: 0;
  font-size: 0.8125rem;
  border: none;
}
.transcript pre code span {
  font-size: 0.8125rem;
}
.transcript .o-checkbox-toggle--dark .o-checkbox-toggle__indicator {
  background-color: #14161E;
}
.transcript .o-checkbox-toggle .o-checkbox-toggle__input:checked ~ .o-checkbox-toggle__indicator {
  background-color: #FF5A00;
}
.transcript .o-checkbox-toggle.right-0 {
  right: 0;
}
.transcript .o-tooltip {
  background-color: #14161E;
  border: none;
}
.transcript .bg-transcript--highlighted {
  background-color: rgba(255, 90, 0, 0.5);
}
.transcript .bg-transcript--highlighted-typography {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  color: #14161E;
}
.transcript .bg-transcript--highlighted--bubble {
  background: none;
  color: #CE3F00;
}

.transcript--banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  padding: 30px 24px !important;
  gap: 2px;
  background: #3B4048;
  border-radius: 9px;
}
.transcript--banner .l-obfuscated-text {
  display: inline-block;
  width: 104px;
  text-align: center;
}
.transcript--banner p, .transcript--banner div, .transcript--banner span {
  font-family: Bitter;
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.5px;
  text-align: left;
}
.transcript--banner p {
  margin: 0px 0px 18px 0px !important;
}

/* ==========================================================================
  6. Notes
 ========================================================================== */
.notes {
  max-width: 676px;
  margin: 0 auto;
}

/* ==========================================================================
  7. Responsiveness
 ========================================================================== */
@media screen and (max-width: 1023px) {
  .video-episode {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .video-episode .video-toc {
    grid-row: 4;
    grid-column: 1;
  }
  .video-episode .video-toc .toc-collapsed {
    display: none;
  }
  .video-episode .video-toc .toc-expanded {
    display: block;
  }
  .video-episode .video-toc .toc-expanded .toc-toggle {
    display: none;
  }
  .video-episode .video-player {
    grid-row: 1;
    grid-column: 1;
  }
  .video-episode .video-actions {
    grid-row: 2;
    grid-column: 1;
    margin-left: 0;
    flex-direction: row;
    width: 100%;
  }
  .video-episode .video-actions .cinema-mode {
    display: none;
  }
  .video-episode .video-details {
    grid-row: 3;
    grid-column: 1;
  }
}
/**
 *
 * Home
 *
 * 1. Hero
 *
 * 2. Intro
 *
 * 3. Why
 *
 * 4. Platforms
 *
 * 5. Content
 *
 * 6. Community
 *
 * 7. Logos
 *
 * 8. Testimonials
 *
 *
 *
 **/
/* ==========================================================================
1. Hero
========================================================================== */
section.kodeco-home-hero {
  position: relative;
  z-index: 1;
}
section.kodeco-home-hero .kodeco-home-hero-content {
  padding-top: 120px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero .kodeco-home-hero-content {
    padding-top: 80px;
  }
}
section.kodeco-home-hero .kodeco-home-hero-content h1 {
  max-width: 990px;
  margin: 0 auto;
  text-align: center;
  font-size: 6rem;
  line-height: 1;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero .kodeco-home-hero-content h1 {
    font-size: 4.5rem;
    line-height: 1.25;
    text-align: left;
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero .kodeco-home-hero-content h1 {
    font-size: 2.5rem;
  }
}
section.kodeco-home-hero .kodeco-home-hero-content h1 span {
  color: #FF5A00;
}
section.kodeco-home-hero .kodeco-home-hero-content p {
  max-width: 495px;
  margin-top: 174px;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero .kodeco-home-hero-content p {
    margin-top: 32px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero .kodeco-home-hero-content p {
    max-width: auto;
    font-size: 1.125rem;
  }
}
section.kodeco-home-hero .module-background {
  max-width: 1680px;
  margin: -144px auto 0;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero .module-background {
    height: 720px;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero .module-background {
    display: none;
  }
}
section.kodeco-home-hero .module-background:before {
  width: 742px;
  border-radius: 0 0 48px 0;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero .module-background:before {
    width: 100%;
  }
}
section.kodeco-home-hero .module-background .module-background-round-top {
  position: absolute;
  top: 0;
  left: 742px;
}
section.kodeco-home-hero .module-background .module-background-round-top:before {
  top: 0;
  bottom: auto;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #F7F7F7;
}
section.kodeco-home-hero .module-background .module-background-round-bottom {
  position: absolute;
  top: 240px;
  left: 0;
  bottom: auto;
}
section.kodeco-home-hero .module-background .module-background-round-bottom:before {
  top: 0;
  bottom: auto;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #F7F7F7;
}

/* ==========================================================================
2. Intro
========================================================================== */
section.home-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 14%;
  margin-top: 144px;
}
@media screen and (max-width: 1079px) {
  section.home-intro {
    grid-column-gap: 98px;
  }
}
@media screen and (max-width: 979px) {
  section.home-intro {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro {
    grid-row-gap: 32px;
  }
}
section.home-intro h2 {
  font-size: 4.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-intro h2 {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro p {
    font-size: 1.125rem;
  }
}
section.home-intro .home-intro-photo img {
  width: 100%;
  border-radius: 40px;
}
@media screen and (max-width: 979px) {
  section.home-intro .home-intro-photo img {
    max-width: 420px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro .home-intro-photo img {
    border-radius: 24px;
  }
}

/* ==========================================================================
3. Why
========================================================================== */
section.home-why {
  margin-top: 144px;
  max-width: 1680px;
}
section.home-why h2 {
  font-size: 5rem;
  line-height: 1;
  max-width: 692px;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  section.home-why h2 {
    padding-top: 80px;
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-why .home-why-top {
  display: grid;
  grid-template-columns: 938px 1fr;
  grid-template-rows: 1fr 240px;
}
@media screen and (max-width: 1279px) {
  section.home-why .home-why-top {
    grid-template-columns: 75% 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-why .home-why-top {
    grid-template-columns: 50% 1fr;
    grid-template-rows: 1fr 120px;
  }
}
section.home-why .home-why-top .home-why-right {
  position: relative;
  grid-row-start: span 2;
}
section.home-why .home-why-top .home-why-right::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 48px;
  box-shadow: -13px 13px 0 12px #14161E;
}
section.home-why .home-why-left {
  border-radius: 48px 48px 0 0;
  background-color: #14161E;
}
section.home-why .home-why-bottom {
  border-radius: 0 48px 48px 48px;
  padding-bottom: 144px;
  background-color: #14161E;
}
@media screen and (max-width: 767px) {
  section.home-why .home-why-bottom {
    padding-bottom: 80px;
  }
}
section.home-why .why-card-wrapper {
  max-width: 100%;
  margin-top: 80px;
}
section.home-why .why-card-wrapper .why-card-container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 1rem;
  overflow-x: scroll;
  padding-bottom: 65px;
  scrollbar-color: hsl(21deg, 100%, 50%) hsla(0deg, 0%, 100%, 0.1);
  scrollbar-width: thin;
}
section.home-why .why-card-wrapper .why-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-why .why-card-wrapper .why-card-container::-webkit-scrollbar-track {
  background: hsla(0deg, 0%, 100%, 0.1);
}
section.home-why .why-card-wrapper .why-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-why .why-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
@media screen and (max-width: 767px) {
  section.home-why .why-card-wrapper .card {
    width: 328px;
  }
}
section.home-why .why-card-wrapper .card > div {
  background-color: #14161E;
}
section.home-why .why-card-wrapper .card > div .badge {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
section.home-why .why-card-wrapper .card > div .badge > span {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 20px;
  color: #FFFFFF;
}
section.home-why .why-card-wrapper .card > div .card-title {
  color: #FFFFFF;
}
section.home-why .why-card-wrapper .card > div .card-text {
  -webkit-line-clamp: unset;
  color: #D7D7D7;
}
section.home-why .why-card-wrapper .card-topright::before {
  border: 1px #FFFFFF;
  border-style: none none solid solid;
  box-shadow: -4px 4px 0 4px #14161E;
}
section.home-why .why-card-wrapper .card-topleft {
  border: 1px #FFFFFF;
  border-style: solid solid none solid;
}
section.home-why .why-card-wrapper .card-bottom {
  border: 1px #FFFFFF;
  border-style: none solid solid solid;
}
section.home-why .why-card-wrapper .card-bottom::before {
  border: 1px #FFFFFF;
  border-style: solid solid none none;
}

/* ==========================================================================
4. Platforms
========================================================================== */
section.home-platforms .home-platforms-grid-outer {
  display: grid;
  grid-template-columns: 37% 56%;
  grid-column-gap: 7%;
}
@media screen and (max-width: 1023px) {
  section.home-platforms .home-platforms-grid-outer {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
section.home-platforms .home-platforms-grid-outer h2 {
  font-size: 5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-platforms .home-platforms-grid-outer h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 399px) {
  section.home-platforms .home-platforms-grid-outer > div a:nth-of-type(1) {
    display: none;
  }
}
section.home-platforms .home-platforms-grid-outer > div a:nth-of-type(2) {
  display: none;
}
@media screen and (max-width: 399px) {
  section.home-platforms .home-platforms-grid-outer > div a:nth-of-type(2) {
    display: inline-flex;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms .home-platforms-grid-outer:nth-of-type(2) {
    margin-top: 80px !important;
  }
}
section.home-platforms .home-platforms-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 24px;
}
@media screen and (max-width: 1199px) {
  section.home-platforms .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms .home-platforms-grid-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-platforms .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
section.home-platforms .home-platforms-grid-inner .card {
  min-height: 380px;
}
section.home-platforms .home-platforms-grid-inner .card .card-bottom {
  display: flex;
  flex-direction: column;
}
section.home-platforms .home-platforms-grid-inner .card .card-bottom .card-title {
  margin-bottom: 16px;
}
section.home-platforms .home-platforms-grid-inner .card .card-bottom .card-description {
  margin-top: auto;
}
section.home-platforms .home-platforms-grid-inner .card .card-bottom .card-description .card-text {
  display: block;
}

/* ==========================================================================
5. Content
========================================================================== */
section.home-content {
  margin-top: 144px;
  position: relative;
}
section.home-content h2 {
  max-width: 792px;
  font-size: 4.5rem;
  line-height: 1;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section.home-content h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-content .home-content-slider {
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-content .home-content-slider {
    margin-top: 40px;
    gap: 8px;
    overflow-x: scroll;
  }
}
@media screen and (max-width: 767px) {
  section.home-content .home-content-slider a {
    white-space: nowrap;
  }
}
section.home-content .button__icon--prev {
  position: absolute;
  left: 0;
  padding-left: 36px;
  top: 50px;
  height: 150px;
  display: none;
}
section.home-content .button__icon--prev > span {
  position: absolute;
  top: 100px;
  cursor: pointer;
}
section.home-content .button__icon--prev .prev--icon {
  width: 10px;
  height: 10px;
  rotate: -180deg;
}
section.home-content .button__icon--next {
  position: absolute;
  background: linear-gradient(90.87deg, rgba(247, 247, 247, 0) 0.63%, #F7F7F7 99.25%);
  width: 164px;
  height: 150px;
  right: 0;
  opacity: 1;
  padding-right: 36px;
  top: 50px;
  display: none;
}
section.home-content .button__icon--next > span {
  position: absolute;
  top: 100px;
  right: 24px;
  cursor: pointer;
}
section.home-content .button__icon--next .next--icon {
  width: 10px;
  height: 10px;
}
section.home-content .content-card-wrapper {
  max-width: 100%;
}
section.home-content .content-card-wrapper .content-card-container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 16px;
  overflow-x: scroll;
  padding-bottom: 65px;
  scrollbar-color: hsl(21deg, 100%, 50%) hsla(228deg, 20%, 10%, 0.1);
  scrollbar-width: thin;
  padding-top: 48px;
}
section.home-content .content-card-wrapper .content-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-content .content-card-wrapper .content-card-container::-webkit-scrollbar-track {
  background: hsla(228deg, 20%, 10%, 0.1);
}
section.home-content .content-card-wrapper .content-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-content .content-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
section.home-content .content-card-wrapper .card .card-bottom .card-metadata {
  margin-top: 16px;
}
section.home-content .content-card-wrapper .card-description {
  margin-top: 16px;
}
section.home-content .content-card-wrapper .card-description .card-text {
  -webkit-line-clamp: 4;
}

/* ==========================================================================
6. Community
========================================================================== */
section.home-kodeco-community {
  position: relative;
  max-width: 1680px;
  margin: 144px auto 0;
  overflow: hidden;
}
section.home-kodeco-community .home-kodeco-community-top {
  background-color: #14161E;
  border-radius: 48px 48px 48px 0;
  padding-top: 80px;
}
section.home-kodeco-community .home-kodeco-community-top > div {
  display: grid;
  grid-template-columns: 496px 594px;
  justify-content: space-between;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community .home-kodeco-community-top > div {
    padding-bottom: 80px;
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top > div {
    padding-bottom: 0;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left {
  align-self: center;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: left;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left h2 {
  font-size: 4.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left p {
  color: #D7D7D7;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:first-of-type {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:last-of-type {
  display: none;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:last-of-type {
    display: inline-flex;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 594px;
    justify-self: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 100%;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .home-kodeco-community-mosaic-top {
  position: relative;
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece {
  background-color: #14161E;
  background-image: url(/assets/photos/community-sprite@1.5x-5647f81805df16acadef3a134b7d84f2da50d725d694767a1bc978c8cb8a58ad.jpg);
  background-repeat: no-repeat;
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-logo {
  background-image: none;
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
  background-size: 1680px;
  position: relative;
  left: 106px;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
  background-size: 1092px;
  background-position: top 0px left -546px;
  margin-top: 40px;
  margin-left: calc(100% - 182px);
}
@media screen and (max-width: 1139px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    margin-left: 0;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    margin-left: calc(100% - 182px);
    left: auto;
    transform: none;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
  background-size: 1092px;
  background-position: top 0px left -364px;
  position: relative;
  left: 158px;
}
@media screen and (max-width: 1139px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
  background-size: 1092px;
  background-position: top 0px left -728px;
  position: absolute;
  bottom: 0;
  right: 40px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
  background-size: 492px;
  background-position: top 0px left -82px;
  position: absolute;
  top: 0;
  right: 108px;
}
@media screen and (max-width: 1039px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: auto;
    left: 8px;
  }
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: 108px;
    left: auto;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    right: 20px;
    top: -120px;
  }
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
  background-size: 492px;
  background-position: top 0px left -410px;
  position: absolute;
  left: 8px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
    display: none;
  }
}
section.home-kodeco-community .home-kodeco-community-bottom {
  display: grid;
  grid-template-columns: 1fr 262px;
  height: 222px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community .home-kodeco-community-bottom {
    height: 120px;
    grid-template-columns: 1fr 120px;
  }
}
section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-left {
  border-radius: 0 0 48px 48px;
  background-color: #14161E;
}
section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-right {
  position: relative;
}
section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-right:before {
  content: "";
  width: 120px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #14161E;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community .home-kodeco-community-bottom .home-kodeco-community-bottom-right:before {
    width: 60px;
  }
}

/* ==========================================================================
7. Logos
========================================================================== */
section.home-logos {
  margin-top: 144px;
}
section.home-logos h2 {
  font-size: 4.5rem;
}
@media screen and (max-width: 767px) {
  section.home-logos h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-logos .home-logos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
@media screen and (max-width: 767px) {
  section.home-logos .home-logos-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px !important;
  }
}
section.home-logos .home-logos-grid > div {
  background-color: #FFFFFF;
  border: 1px solid #BFBFC2;
  border-radius: 16px;
}
section.home-logos .home-logos-grid > div img {
  width: 100%;
  height: 100%;
  filter: brightness(10%) hue-rotate(240deg) saturate(50%);
}

/* ==========================================================================
8. Testimonials
========================================================================== */
section.home-testimonials {
  margin-top: 144px;
}
section.home-testimonials h2 {
  font-size: 4.5rem;
  line-height: 1;
  text-align: center;
  max-width: 990px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  section.home-testimonials h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-testimonials .testimonials-card--wrapper {
  margin-top: 120px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-testimonials .testimonials-card--wrapper {
    margin-top: 40px;
  }
}
section.home-testimonials .testimonials-card--wrapper .testimonials-card--container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 1rem;
  overflow-x: scroll;
  padding-bottom: 64px;
  scrollbar-color: hsl(21deg, 100%, 50%) hsla(228deg, 20%, 10%, 0.1);
  scrollbar-width: thin;
}
section.home-testimonials .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar {
  height: 2px;
}
section.home-testimonials .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-track {
  background: hsla(228deg, 20%, 10%, 0.1);
}
section.home-testimonials .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-testimonials .testimonials-card--wrapper .card {
  width: 380px;
}
@media screen and (max-width: 767px) {
  section.home-testimonials .testimonials-card--wrapper .card {
    width: 328px;
  }
}
section.home-testimonials .testimonials-card--wrapper .card .card-topleft {
  z-index: 1;
}
section.home-testimonials .testimonials-card--wrapper .card .card-topleft .badge {
  border: 0;
  overflow: hidden;
  margin-top: 24px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-topleft .badge img {
  width: 100%;
  height: 100%;
}
section.home-testimonials .testimonials-card--wrapper .card .card-description {
  height: 270px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-text {
  font-size: 1.125rem;
  line-height: 27px;
  -webkit-line-clamp: unset;
}
section.home-testimonials .testimonials-card--wrapper .card .card-date {
  font-size: 1.125rem;
  line-height: 18px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-title,
section.home-testimonials .testimonials-card--wrapper .card .card-metadata {
  color: #CE3F00;
  font-size: 1.125rem;
  line-height: 18px;
  font-weight: 700;
}
section.home-testimonials .testimonials-card--wrapper .card .card-metadata {
  color: #14161E;
  margin-top: 8px;
}
section.home-testimonials .testimonials-card--wrapper .card .card-description {
  flex-direction: column;
  align-items: flex-start;
}
section.home-testimonials .testimonials-card--wrapper .badge {
  width: 56px;
  height: 56px;
  border: 1px solid #14161E;
  border-radius: 0.75rem;
}
section.home-testimonials .testimonials-card--wrapper .badge .svg {
  width: 24px;
  height: 19px;
}

/*
*
* Rating Layouts
*
* For use on rating components
*
* 1. Modal
*
* 2. Reviews header
*
* 3. Rating
*
* 4. Rating form
*
*/
/* ==========================================================================
Universal
========================================================================== */
.rating-dot {
  margin: 0 4px;
}

/* ==========================================================================
1. Modal
========================================================================== */
.modal-ratings {
  overflow: hidden;
}
.modal-ratings p {
  margin-top: 0;
}
.modal-ratings .modal-wrapper {
  height: 80vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* ==========================================================================
2. Reviews header
========================================================================== */
.ratings-header .ratings-wrapper {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .ratings-header .ratings-wrapper {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 16px;
  }
}
.ratings-header .ratings-header-right {
  display: flex;
  align-items: baseline;
  color: #14161E;
}
@media screen and (max-width: 767px) {
  .ratings-header .ratings-controls {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    width: 100%;
  }
  .ratings-header .ratings-controls > div, .ratings-header .ratings-controls .btn-normalw {
    width: 100%;
    margin: 0 !important;
  }
  .ratings-header .ratings-controls .btn-normalw {
    order: 0;
  }
  .ratings-header .ratings-controls a {
    order: 1;
    text-align: center;
  }
}
.ratings-header p.icon-prefix > svg {
  margin: 0 8px 0 16px;
}
.ratings-header p.icon-prefix .rating-avg {
  font-weight: 700;
}
.ratings-header .dropdown {
  color: #14161E;
}
.ratings-header .dropdown .dropdown-trigger {
  border: 1px solid #14161E;
  border-radius: 0.75rem;
  padding: 12px 8px 12px 16px;
}
.ratings-header .dropdown .dropdown-menu {
  min-width: 298px;
}
.ratings-header .dropdown .dropdown-menu .dropdown-content span.dropdown-line {
  display: block;
  margin: 8px;
  padding: 12px 16px;
  list-style: none;
  text-align: left;
  justify-content: center;
  border-radius: 8px;
}
.ratings-header .dropdown .dropdown-menu .dropdown-content span.dropdown-line:hover {
  background: rgba(215, 215, 215, 0.5);
}
.ratings-header .dropdown .dropdown-menu .dropdown-content span.dropdown-line > a {
  text-decoration: none !important;
}

.user-rating-self {
  margin: 20px -24px 0 -24px;
  padding: 0 24px;
  background: #F7F7F7;
}

.rating-leave-btn-container {
  position: relative;
}
.rating-leave-btn-container .rating-leave-btn-wrapper {
  position: absolute;
  right: 181px;
  top: -50px;
}

/* ==========================================================================
3. Rating
========================================================================== */
.user-rating {
  height: auto;
  display: flex;
  width: 100%;
  align-items: flex-start;
  flex-direction: column;
  border-bottom: 1px solid #D7D7D7;
  color: #14161E;
}
.user-rating .user-rating-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-rating .user-rating-top .user-rating-account {
  display: flex;
  align-items: center;
  margin-top: 24px;
}
.user-rating .user-rating-top .user-rating-account .rating-profile-pic-small {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left {
  margin-left: 16px;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left .rating-username {
  font-size: 1rem;
  line-height: 1rem;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left .rating-date {
  display: flex;
  font-size: 0.875rem;
  line-height: 0.875rem;
  margin-top: 8px;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left span.icon-prefix > svg {
  max-width: 12px;
  max-height: 12px;
  margin-right: 2px;
}
.user-rating .user-rating-top .user-rating-account .user-rating-account-left span.icon-prefix .rating-avg {
  font-weight: 700;
}
.user-rating .user-rating-bottom > p {
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 18px 0 24px 0;
}

/* ==========================================================================
4. Rating form
========================================================================== */
.rating-form {
  margin-top: 44px;
}
.rating-form p {
  font-size: 1rem;
  line-height: 1rem;
  color: #14161E;
  font-weight: 500;
  margin-top: 16px;
}
.rating-form .rating-questions {
  animation: a-slight-fade-in-up 0.25s;
  position: relative;
}
.rating-form .rating-questions .rating-button--small {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
}
.rating-form .rating-questions .add-rating .rate-star {
  display: inline-flex;
  justify-content: center;
  background: #F7F7F7;
  border: 1px solid #14161E;
  margin: 0 3px;
}
.rating-form .rating-questions .add-rating .rate-star svg {
  fill: #14161E;
  width: 20px;
  height: 19px;
}
.rating-form .rating-questions .add-rating .c-rate__star--green {
  background: #FF8847;
}
.rating-form .c-review-module__answers > input[type=checkbox]:hover + label {
  background: #FF8847;
  border-color: #FF5A00;
  color: #14161E;
}
.rating-form .c-review-module__answers > input[type=checkbox]:checked + label {
  background: #FF8847;
  border-color: #14161E;
  color: #14161E;
}
.rating-form .c-review-module__answers label {
  padding: 12px 16px;
  border-radius: 0.75rem;
  background: #F7F7F7;
  border: 1px solid #14161E;
  font-weight: 400;
  color: #14161E;
  font-size: 0.875rem;
  line-height: 0.875rem;
  white-space: nowrap;
  display: inline-flex;
  margin: 0 8px 10px 0;
}
.rating-form .text-area {
  padding: 24px;
  font-size: 1rem;
}

/**
*
* Onboarding
*
* Layouts for onboarding views
*
* 1. Hello
*
* 2. Topics
*
* 3. Questions
*
* 4. Reasons
*
* 5. Progress
*
* 6. Generate Recommendations
*
**/
/* ==========================================================================
  1. Hello
========================================================================== */
.onboarding-hello .card-minimal {
  width: 288px;
  height: 240px;
}
@media screen and (max-width: 767px) {
  .onboarding-hello .card-minimal {
    width: 100%;
  }
}
.onboarding-hello .card-minimal__title {
  display: flex;
  flex: 1;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 1.375rem;
  line-height: 1.75rem;
}

/* ==========================================================================
  4. Progress
========================================================================== */
.onboarding-progress {
  position: absolute;
  top: 80px;
  left: 0;
  display: flex;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .onboarding-progress {
    display: none;
  }
}
.onboarding-progress li {
  width: 25%;
  height: 2px;
  position: relative;
}
.onboarding-progress__bar--complete:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #00B87E;
}

/* ==========================================================================
  6. Geneate Recommendations
========================================================================== */
@media screen and (max-width: 767px) {
  .generate-recommendations {
    font-size: 1.5rem;
    text-align: center;
  }
}

/**
 * A reserved place for nasty CSS hacks.
 *
 * If you need to add a quick fix for a live bug, constrained by time or something else. Add it here.
 *
 * This keeps the 'main' codebase clean and ensures these hacks don't go unnoticed and unresolved.
 *
 */
.three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-column-gap: 1rem;
  grid-row-gap: 1.5rem;
}
@media screen and (max-width: 1023px) {
  .three-column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .three-column-grid {
    grid-template-columns: 1fr;
  }
}

.two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-column-gap: 1rem;
  grid-row-gap: 1.5rem;
}
@media screen and (max-width: 1023px) {
  .two-column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .two-column-grid {
    grid-template-columns: 1fr;
  }
}

.card-minh-342 .card {
  min-height: 342px;
}
@media screen and (max-width: 767px) {
  .card-minh-342 .card {
    min-height: auto;
  }
}

.l-font-header {
  font-family: "Relative";
}

.l-font-relative {
  font-family: "Relative" !important;
}

@media screen and (max-width: 1023px) {
  .touch-display-none {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .mobile-display-none {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .mobile-display-block {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .mobile-w-100 {
    width: 100%;
  }
}

.border-none {
  border: none;
}

.flex-wrap-nowrap {
  flex-wrap: nowrap;
}

.content {
  width: 100%;
}

.line-height-1 {
  line-height: 1;
}

.mw-594 {
  max-width: 594px;
}

.w-594 {
  width: 594px;
}

.w-742 {
  width: 742px;
}

/* ==========================================================================
  RW Overrides
 ========================================================================== */
.c-admin-edit-banner {
  left: 0;
  width: 100vw;
}

.btn-icon i.o-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon i.o-button__icon .l-button__svg-bookmark-icon {
  margin: 0;
  position: static;
}

.l-admin-alert-sticky {
  width: calc(100% - 48px);
  max-width: 1680px;
  left: 24px;
  bottom: 24px;
}
@media screen and (max-width: 767px) {
  .l-admin-alert-sticky {
    width: 100% !important;
    left: 0;
  }
}

.footer-signup-modal .modal-tight .btn-normalw {
  color: #FFFFFF;
}

.svg-w-12 {
  height: 12px;
  width: 12px;
}

.svg-w-20 {
  height: 20px;
  width: 20px;
}

.w-16 {
  height: 16px;
  width: 16px;
}

.w-18 {
  height: 18px;
  width: 18px;
}

.svg-20 {
  height: 20px;
  width: 20px;
}

.w-24 {
  height: 24px;
  width: 24px;
}

.z-index-0 {
  z-index: 0;
}

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

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

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

.font-mono {
  font-family: "Relative Mono" !important;
}

@media screen and (max-width: 767px) {
  .mobile-mt-0 {
    margin-top: 0 !important;
  }
}

.minw-282 {
  min-width: 282px;
}

.grid-gap-16 {
  grid-gap: 16px;
}

.modal-790 .modal-wrapper {
  width: 790px;
}
@media screen and (max-width: 837px) {
  .modal-790 .modal-wrapper {
    width: 100%;
  }
}

.white-space-nowrap {
  white-space: nowrap;
}

.u-hide-force {
  display: none !important;
}

.modal-table-selected h4 {
  background-color: rgba(255, 136, 71, 0.5) !important;
}

.written-content pre {
  overflow: visible;
  white-space: break-spaces;
  word-break: break-word;
  padding: 24px;
}
.written-content.light-code pre {
  padding: 24px;
  border: 1px solid #14161E;
  background-color: #FFFFFF;
  color: #14161E;
}
.written-content.light-code pre code {
  background-color: inherit;
}

.overflow-hidden {
  overflow: hidden;
}

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