@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(bitter-1.300-latin_ext-regular-ea79c0f752f7656ce3694dca8312fcb969f83cbe92ca5298c5920ccffb126c5d.woff2) format("woff2"), url(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(bitter-1.002-latin_ext-italic-f4a1b872a93d98cd9f7865f20340e22e936f3634fb142e2372b4598c98def35a.woff2) format("woff2"), url(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(bitter-2.110-latin_ext-700-041b7c53b2f3ed8e2378eaef2841cfad596a7cf6af87bd91f96c9c3b26eec206.woff2) format("woff2"), url(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(ibm-plex-sans-v3-latin-ext_latin-regular-4126890a77928150a6f3be017f23c93df16f56e6940a72f231823ba29d2ee998.woff2) format("woff2"), url(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(ibm-plex-sans-v3-latin-ext_latin-500-04aba1eb9b084332715891b2a764459df24188e66731279bad286bbe1447e5e8.woff2) format("woff2"), url(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(ibm-plex-sans-v3-latin-ext_latin-700-946ed95688a6677fb113b84ac50ef140b42971e05e4da335a3ead116a7c9886b.woff2) format("woff2"), url(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(ibm-plex-serif-v4-latin-ext_latin-regular-e4f826dc262e20e2114e3637d5cab104d4851dee74421c968a6e29d6be2d8b0b.woff2) format("woff2"), url(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(ibm-plex-serif-v4-latin-ext_latin-500-dcab0f62c8194ccb39b97113223f99f294112e0d173b18918c31f3494c203456.woff2) format("woff2"), url(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(ibm-plex-serif-v4-latin-ext_latin-700-ec4d87dbc9136c02618bd6878955a63e40207541c72e5109137d56e28ea65b3f.woff2) format("woff2"), url(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(ibm-plex-mono-v1-500-ba9db195c954509bda2236e0303e51b261b85aef320cb28134ed97155de85914.woff2) format("woff2"), url(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";
    scroll-behavior: smooth;
  }
  *,
  *::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 20% opacity */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Red */
  /* Pink */
  /* Light Server-Side Swift Colour */
  /* Dark Server-Side Swift Colour */
  /* Orange */
  /* Main Brand Colour */
  /* Brand Light Orange */
  /* Brand Light Orange with 20% opacity */
  /* Brand Dark Orange */
  /* Yellow */
  /* Light Pro-Gro Colour */
  /* Dark Pro-Gro Colour */
  /* Green */
  /* Light Android Colour */
  /* Light Android 50% opacity */
  /* Light Android colour equivalent for 50% opacity on dark background */
  /* Dark Android Colour */
  /* Blue */
  /* Light Flutter Colour */
  /* Light Flutter 50% opacity */
  /* Light Flutter colour equivalent for 50% opacity on dark background */
  /* Dark Flutter 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 */
  /* White */
  /* Transparent */
  /* ==========================================================================
    2. Highlighter Colours
  ========================================================================== */
  /* ==========================================================================
    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 20% opacity */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Red */
  /* Pink */
  /* Light Server-Side Swift Colour */
  /* Dark Server-Side Swift Colour */
  /* Orange */
  /* Main Brand Colour */
  /* Brand Light Orange */
  /* Brand Light Orange with 20% opacity */
  /* Brand Dark Orange */
  /* Yellow */
  /* Light Pro-Gro Colour */
  /* Dark Pro-Gro Colour */
  /* Green */
  /* Light Android Colour */
  /* Light Android 50% opacity */
  /* Light Android colour equivalent for 50% opacity on dark background */
  /* Dark Android Colour */
  /* Blue */
  /* Light Flutter Colour */
  /* Light Flutter 50% opacity */
  /* Light Flutter colour equivalent for 50% opacity on dark background */
  /* Dark Flutter 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 */
  /* White */
  /* Transparent */
  /* ==========================================================================
    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
  ========================================================================== */
  /* ==========================================================================
  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
  ========================================================================== */
  /* ==========================================================================
  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
  ========================================================================== */
  /**
   * 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&amp;family=IBM+Plex+Sans:wght@500&amp;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 20% opacity */
  /*Main Brand Grey at 50% opacity */
  /* Brand Light Grey */
  /* Light Multi-platform Colour */
  /* Dark Multi-platform Colour */
  /* Red */
  /* Pink */
  /* Light Server-Side Swift Colour */
  /* Dark Server-Side Swift Colour */
  /* Orange */
  /* Main Brand Colour */
  /* Brand Light Orange */
  /* Brand Light Orange with 20% opacity */
  /* Brand Dark Orange */
  /* Yellow */
  /* Light Pro-Gro Colour */
  /* Dark Pro-Gro Colour */
  /* Green */
  /* Light Android Colour */
  /* Light Android 50% opacity */
  /* Light Android colour equivalent for 50% opacity on dark background */
  /* Dark Android Colour */
  /* Blue */
  /* Light Flutter Colour */
  /* Light Flutter 50% opacity */
  /* Light Flutter colour equivalent for 50% opacity on dark background */
  /* Dark Flutter 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 */
  /* White */
  /* Transparent */
  /* ==========================================================================
    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;
  }
  h3 {
    font-size: 1.5rem;
    line-height: 1.35;
  }
  h4 {
    font-size: 1.3125rem; /* 21/16 */
    line-height: 1.35;
  }
  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;
  }
  .o-dropdown-menu--accessible {
    display: block;
  }
  .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;
  }
  .o-dropdown-menu--actions-left {
    top: 48px;
    left: -30px;
  }
  .o-dropdown-menu--actions-left:before {
    top: -3px;
    left: 45px;
  }
  .o-dropdown-menu--actions-right {
    top: 48px;
    right: -30px;
  }
  .o-dropdown-menu--actions-right:before {
    top: -3px;
    right: 39px;
    left: auto;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .o-button--background-yellow {
    background: #F3B36A !important;
  }
  .o-button--background-yellow:hover {
    background: #f4ba78;
  }
  .o-button--background-blue {
    background: #157CB8 !important;
  }
  .o-button--background-blue:hover {
    background: #1785c6;
  }
  .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;
  }
  .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;
  }
  .o-button--full-col {
    display: block;
    width: 100%;
  }
  .o-button--huge {
    height: 66px;
    line-height: 66px;
    padding: 0 18px;
  }
  .o-button--large {
    height: 50px;
    padding: 0 18px;
  }
  .o-button--small {
    height: 42px;
  }
  .o-button--smaller {
    height: 40px;
    line-height: 40px;
    font-size: 0.875rem;
    padding: 0 12px;
  }
  .o-button--mini {
    height: 36px;
    line-height: 36px;
    padding: 0 13px;
    font-size: 0.875rem;
  }
  .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;
  }
  .o-button-round--blue {
    background: #157CB8;
  }
  .o-button-round--green {
    background: #158443;
  }
  .o-button-round--disabled {
    background: #DBDDE0;
    color: #959DA5;
  }
  .o-button__icon--large {
    height: 27px !important;
    width: 27px !important;
  }
  .o-button__svg {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .o-button__svg--grey {
    fill: #6E7687;
  }
  .o-button__svg--medium-grey {
    fill: #CACED2;
  }
  .o-button__svg--grey-mako {
    fill: #434A53;
  }
  .o-button__svg--grey-chateau {
    fill: #A7ADB4;
  }
  .o-button__svg--grey-regent {
    fill: #959DA5;
  }
  .o-button__svg--light-grey {
    fill: #F2F6FA;
  }
  .o-button__svg--white {
    fill: #ffffff;
  }
  .o-button__svg--black {
    fill: #333333;
  }
  .o-button__svg--black-force {
    fill: #333333 !important;
  }
  .o-button__svg--green {
    fill: #158443;
  }
  .o-button__svg--red {
    fill: #CF3B2B;
  }
  .o-button__svg--orange {
    fill: #FD7401;
  }
  .o-button__svg--twitter {
    fill: #1D83D1;
  }
  .o-button__svg--highlighter-yellow {
    fill: #FFE242;
  }
  .o-button__svg--highlighter-orange {
    fill: #FBBC5D;
  }
  .o-button__svg--highlighter-red {
    fill: #E58A8A;
  }
  .o-button__svg--highlighter-purple {
    fill: #A0AEF2;
  }
  .o-button__svg--highlighter-blue {
    fill: #85DDE9;
  }
  .o-button__svg--highlighter-green {
    fill: #90DE9C;
  }
  .o-button__icon--white {
    background: #ffffff;
  }
  .o-button__icon--yellow {
    background: #FCB526;
  }
  .o-button__icon--black {
    background: #333333;
  }
  .o-button__icon--grey {
    background: #6E7687;
  }
  .o-button__icon--medium-grey {
    background: #CACED2;
  }
  .o-button__icon--green {
    background: #158443;
  }
  .o-button__icon--blue {
    background: #157CB8;
  }
  .o-button__icon--black-slate {
    background: #2F4F4F;
  }
  .o-button__icon--light-green {
    background: #e3f0e8;
  }
  .o-button__icon--input {
    border: 2px solid #ffffff;
  }
  .o-button__icon {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    border-radius: 0.5625rem;
    position: relative;
  }
  .o-button__icon--only {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    border-radius: 0.5625rem;
    position: relative;
  }
  .o-button__icon--left {
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 24px;
    border-radius: 0.5625rem;
    position: relative;
    margin-right: 10px;
  }
  .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;
  }
  .o-button__icon--right-small {
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    width: 15px;
    position: relative;
    margin-right: -2px;
    margin-left: 6px;
  }
  .o-button__icon--left-small {
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    width: 15px;
    position: relative;
    margin-left: -2px;
    margin-right: 6px;
  }
  .o-button__loader-text {
    padding-left: 36px;
  }
  .o-button__loader-text--center {
    position: relative;
  }
  .o-button__loader-text--center .l-button__loader-pulse {
    left: -40px;
  }
  .l-button__loader-pulse {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -16px;
  }
  .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;
  }
  .o-icon-button--small {
    width: 27px;
    height: 27px;
  }
  .o-icon-button--tiny {
    width: 24px;
    height: 24px;
  }
  .o-button__icon--dark-blue svg {
    fill: #3B4048;
  }
  .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;
  }
  .o-text-button--green {
    color: #158443;
  }
  .o-text-button--black {
    color: #333333;
  }
  .o-text-button--clear:hover .o-button__label {
    text-decoration: none;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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(light-0d5837a4fcf134d5de69d367f5d3b717ec4e8a54a1e903d337257d330836cbef.png);
    background-size: cover;
  }
  .o-button-code:hover {
    background: #647388;
    background-image: url(light-0d5837a4fcf134d5de69d367f5d3b717ec4e8a54a1e903d337257d330836cbef.png);
    background-size: cover;
  }
  .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;
  }
  .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;
  }
  .o-button-sidebar {
    width: 36px;
    height: 36px;
  }
  .o-alert__close {
    order: 10;
    height: 16px;
    cursor: pointer;
  }
  .o-alert__close svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
  }
  .o-button-close {
    display: flex;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .o-button-close svg {
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
  }
  .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;
  }
  .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);
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .o-button-chapter svg {
    width: 17px;
    height: 15px;
    fill: #A7ADB4;
  }
  .o-button-chapter--left {
    left: 0;
    transform: rotate(180deg);
  }
  .o-button-chapter--right {
    right: 0;
  }
  .o-button-disclose--small {
    display: flex;
    width: 15px;
    height: 9px;
    cursor: pointer;
  }
  .o-button-disclose--small svg {
    width: 15px;
    height: 9px;
  }
  .o-button-disclose--grey svg {
    fill: #798494;
  }
  .o-button-disclose--rotate svg {
    transform: rotate(180deg);
  }
  .o-button__wrapper {
    display: flex;
    align-items: center;
  }
  .o-button--center .o-button__label, .o-button--center i {
    margin-left: auto;
  }
  .o-button--center-left .o-button__label, .o-button--center-left i {
    margin-right: auto;
  }
  .o-button--long-label {
    justify-content: center;
    white-space: normal;
    line-height: 1.25;
  }
  .l-button-accessible-hover .l-button__nub {
    transition: opacity 0.3s;
  }
  .l-button-accessible-hover:hover .l-button__nub {
    opacity: 0.75;
  }
  .l-button__svg-checkmark {
    width: 14px;
    height: 11px;
    margin-top: -5px;
    margin-left: -7px;
  }
  .l-button__svg-plus {
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
  }
  .l-button__svg-question {
    width: 13px;
    position: relative;
    left: 3px;
    top: -1px;
  }
  .l-button__svg-question--tooltip {
    opacity: 1;
  }
  .l-button__svg-close {
    width: 18px;
    transform: rotate(45deg);
  }
  .l-button__svg-close--button {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    transform: rotate(45deg);
  }
  .l-button-inside-input {
    position: absolute;
    top: 40px;
    right: 15px;
  }
  .l-button__svg-hamburger {
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
  }
  .l-button__svg-filter {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }
  .l-button__svg-grid {
    width: 18px;
    height: 18px;
    margin-right: 9px;
  }
  .l-button__svg-clear {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
  .l-button__svg-clear--button {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }
  .l-button__svg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-top: -20px;
    margin-left: -10px;
  }
  .l-button__svg-bookmark-icon-nav {
    width: 20px;
    height: 20px;
  }
  .l-button__svg-arrow {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
  }
  .l-button__svg-arrow-45 {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    transform: rotate(-45deg);
  }
  .l-button__svg-arrow-90 {
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    transform: rotate(90deg);
  }
  .l-button__nub {
    width: 10px;
    height: 10px;
    margin-top: -6px;
    margin-left: -6px;
    position: relative;
    top: -15.5px;
  }
  .l-button__grid-nub {
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -5px;
    position: relative;
    top: -16px;
  }
  .l-button__search {
    width: 18px;
    height: 20px;
    top: 1px;
    margin-right: 8px;
  }
  .l-button__search svg {
    width: 18px;
    height: 18px;
  }
  .l-button__svg-facebook {
    width: 11px;
    position: relative;
    top: 4px;
    left: -1px;
  }
  .l-button__svg-facebook-share {
    width: 12px;
    height: 22px;
    position: absolute;
    top: 6px;
    left: 6px;
  }
  .l-button__svg-twitter {
    width: 17px;
  }
  .l-button__svg-twitter-share {
    width: 17px;
    height: 13px;
    position: absolute;
    top: 7px;
    left: 5px;
  }
  .l-button__svg-follow-twitter {
    width: 17px;
    height: 17px;
    margin-left: -8.5px;
    margin-top: -8.5px;
  }
  .l-button__svg-speech-bubble {
    width: 22px;
    height: 22px;
    opacity: 0.5;
  }
  .l-button__svg-star {
    width: 15px;
    height: 15px;
  }
  .l-button__svg-empty-star {
    width: 15px;
    height: 15px;
  }
  .l-button__svg-half-star {
    width: 8px;
    height: 15px;
    z-index: 1;
  }
  .l-button-newsletter-icon {
    position: absolute;
    right: 15px;
    top: 13px;
  }
  .l-button__svg-cog {
    width: 25px;
    height: 25px;
  }
  .l-button__svg-search-navigator {
    width: 23px;
    height: 23px;
  }
  .l-button__svg-bookmark-navigator {
    width: 22px;
    height: 22px;
  }
  .l-button__svg-22 {
    width: 22px;
    height: 22px;
  }
  .l-button__svg-watch-offline {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }
  .l-button__svg-notepad-icon-nav {
    width: 24px;
    height: 23px;
  }
  .l-button__svg-lettering-icon-nav {
    width: 30px;
    height: 17px;
  }
  .l-button__svg-toc-icon-nav {
    width: 24px;
    height: 21px;
    margin-top: 4px;
    margin-right: -6px;
    stroke: white;
  }
  .l-button__search-nav {
    width: 18px;
    height: 20px;
    top: 1px;
    margin-right: 8px;
  }
  .l-button__search-nav svg {
    width: 21px;
    height: 21px;
  }
  .l-button__svg-arrow-nav {
    transition: 0.25s all;
    width: 12px;
    height: 12px;
    margin-left: 3px;
  }
  .l-button__svg-arrow-to-nav {
    width: 10px;
    height: 10px;
    margin-right: 8px;
    opacity: 0.5;
    transform: rotate(270deg);
  }
  .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;
  }
  .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;
  }
  .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%;
  }
  .o-badge-tutorial--checkmark {
    background: #158443;
  }
  .o-badge-tutorial--checkmark svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
  }
  .o-badge-tutorial--locked svg {
    width: 16px;
    fill: #ffffff;
    display: block !important;
  }
  .o-badge-tutorial--recording svg {
    width: 22px;
    fill: #ffffff;
    display: block !important;
  }
  .o-badge-product {
    color: #ffffff;
    border-radius: 9px 3px 9px 9px;
    padding: 5px 12px;
    box-shadow: none;
  }
  .o-badge-product--new {
    background: #157CB8;
  }
  .o-badge-product--update {
    background: #41AEA4;
  }
  .o-badge-product--sale {
    background: #CF3B2B;
  }
  .o-badge-product--highlight {
    background: none;
    color: #ffffff;
  }
  .o-badge-product--preorder {
    background: #3B4048;
  }
  .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;
  }
  .o-badge--new {
    background: #9668B0;
    color: #ffffff;
    box-shadow: none;
    border-radius: 9px 3px 9px 9px;
  }
  .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;
  }
  .o-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #333333;
  }
  .o-label .o-label__info {
    font-size: 0.6875rem;
    color: #959DA5;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .o-textarea--dark {
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
  }
  .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;
  }
  .o-checkbox__wrapper {
    position: relative;
  }
  .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;
  }
  .o-checkbox__title {
    display: inline-block;
    padding-top: 2px;
    padding-left: 36px;
  }
  .o-checkbox--dark .checkbox__indicator {
    background: none;
    border: 2px solid rgba(115, 133, 159, 0.75);
  }
  .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;
  }
  .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;
  }
  .o-checkbox-toggle--dark .o-checkbox-toggle__indicator {
    background-color: rgba(219, 221, 224, 0.2);
  }
  .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;
  }
  .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;
  }
  @keyframes loader-pulse {
    0%, 100% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
  }
  .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;
  }
  .o-loader-pulse__bounce-2 {
    animation-delay: -1s;
  }
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  .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;
  }
  @keyframes a-dot-loader {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .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;
  }
  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;
  }
  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;
  }
  .o-rounded-image {
    border-radius: 0.5625rem;
  }
  .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;
  }
  .o-profile-pic--largest {
    width: 120px;
    height: 120px;
  }
  .o-profile-pic--large {
    width: 90px;
    height: 90px;
  }
  .o-profile-pic--medium {
    width: 54px;
    height: 54px;
  }
  .o-profile-pic--small {
    width: 40px;
    height: 40px;
  }
  .o-screenshot {
    border: 12px solid #ffffff;
    border-radius: 0.5625rem;
    box-shadow: 0px 2px 1px 0 rgba(51, 51, 51, 0.05);
  }
  .o-screenshot--large {
    border: 24px solid #ffffff;
  }
  .receipt-date {
    width: 100px;
  }
  .receipt-products {
    width: 400px;
  }
  .receipt-tax {
    width: 150px;
  }
  .receipt-order-total {
    width: 150px;
  }
  .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;
  }
  .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;
  }
  .o-alert .o-alert__close svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
    margin: -8px 0 0 -8px;
  }
  .o-alert--success {
    background: #14161E;
    padding-left: 94px;
  }
  .o-alert--danger {
    background: #CF3B2B;
    padding-left: 78px;
  }
  .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;
  }
  .o-alert--warning {
    background: #FCB526;
    padding-left: 94px;
  }
  .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;
  }
  .o-alert--tip {
    background: #2F4F4F;
    padding-left: 58px;
  }
  .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;
  }
  .o-alert--info {
    background: #14161E;
    padding-left: 68px;
  }
  .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;
  }
  .o-alert--archive {
    background: #CF3B2B;
    padding-left: 90px;
  }
  .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;
  }
  .o-alert--announce {
    background: #6767A8;
    padding-left: 138px;
  }
  .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;
  }
  .o-alert--subscription {
    background: #FDCF74;
    color: #333333;
    padding-left: 68px;
  }
  .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;
  }
  .o-alert--pro {
    background: #157CB8;
    padding-left: 68px;
  }
  .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;
  }
  .l-alert-admin-top {
    margin-bottom: 27px;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .o-tag--black {
    background: #3B4048;
    border: 2px solid #73859F;
    color: #ffffff;
  }
  .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;
  }
  @font-face {
    font-family: "Relative";
    font-style: normal;
    font-weight: 400;
    src: url(relative-book-pro-b7bfc78df53a6103abfdccc4f18a0e919172076cc7dd5c5309a0a94d64f19615.woff2) format("woff2"), url(relative-book-pro-d1079bfa99a0cab9ef8465a629feddad450f13b5b7f7b495f2717b2788b5428f.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: "Relative";
    font-style: italic;
    font-weight: 400;
    src: url(relative-italic-pro-46b2f83e0335d2ee38e8ead7854143fc4642a914ef19d165b7c40027bc649202.woff2) format("woff2"), url(relative-italic-pro-cbc583d872bfd3462fa990ac1d595cf7d5f6f8a1bc16f70f9f43d12d2f9cb186.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: "Relative";
    font-style: normal;
    font-weight: 500;
    src: url(relative-medium-pro-efff202b230c17039474726cd59259a03b75292b1a63068ab73f55dbf6a25dcb.woff2) format("woff2"), url(relative-medium-pro-16f66e32ff5195a3e52ad1f851b3559c20d2fb56508ed215cf319f2a59cf7abf.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: "Relative";
    font-style: italic;
    font-weight: 500;
    src: url(relative-medium-italic-pro-78c16e218cb3c8571907fe11721c5701644595e0c27b839dbc8a71053ac64d21.woff2) format("woff2"), url(relative-medium-italic-pro-ec9d2644d301a4cd59c1233b2a99af84d75f908d6d60e9e82105643ab841ee1e.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: "Relative";
    font-style: normal;
    font-weight: 700;
    src: url(relative-bold-pro-27260fd4e75322220c790f98dd68c0a32a0c0d87bed151a3732089964da11a84.woff2) format("woff2"), url(relative-bold-pro-5b61cb4c881c1b1713838dbe2b50a7aa601508d74e54551a5bae022d4c7c0c84.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: "Relative";
    font-style: italic;
    font-weight: 700;
    src: url(relative-bold-italic-pro-9f0cd55a979f577d9982fa929066340f88f483707128ebc6829136d15ac79ee8.woff2) format("woff2"), url(relative-bold-italic-pro-c35f296845bfcf8e5da688c8c0fd79c93307872766e0398fce78f46ef00736af.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: "Relative Mono";
    font-style: normal;
    font-weight: 400;
    src: url(relative-mono-10-pitch-pro-b82594bbdaa88ed3eb167db83ce1e51421fe27906d887c2224bd7f3134d7a9cf.woff2) format("woff2"), url(relative-mono-10-pitch-pro-d954d74c5298b0cde17bd4d03342ed4974193ad7e5a78e9ebf10d8799ad883ce.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  .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;
  }
  [data-tooltip] {
    position: relative;
  }
  [data-tooltip]:before {
    content: attr(data-tooltip);
  }
  [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;
  }
  [data-tooltip]:hover:before, [data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
  }
  .o-button-tooltip:hover .o-tooltip {
    visibility: visible;
    opacity: 1;
  }
  .o-tooltip {
    height: 40px;
    line-height: 24px;
  }
  .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;
  }
  .o-tooltip--slim {
    padding: 6px 14px;
    height: 36px;
    line-height: 24px;
  }
  .o-tooltip--arrow-top:after {
    top: -3px;
    transform: rotate(45deg);
    border-radius: 3px;
  }
  .o-tooltip--arrow-top-left:after {
    left: 20px;
    top: -3px;
    transform: rotate(45deg);
    border-radius: 3px;
  }
  .o-tooltip--arrow-top-right:after {
    left: auto;
    right: 20px;
    top: -3px;
    transform: rotate(45deg);
    border-radius: 3px;
  }
  .o-tooltip--white {
    background: #ffffff;
    color: #333333;
  }
  .o-tooltip--white:after {
    background: #ffffff;
  }
  .o-tooltip--dark {
    background: #3B4048;
    color: #ffffff;
  }
  .o-tooltip--dark:after {
    background: #3B4048;
  }
  .o-tooltip--dark-small {
    border: 2px solid #959DA5;
  }
  .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;
  }
  .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;
  }
  .o-tooltip--green {
    background: #158443;
  }
  .o-tooltip--green:after {
    background: #158443;
  }
  .o-tooltip--top {
    top: -54px !important;
  }
  .o-tooltip--top-42 {
    top: -42px !important;
  }
  .o-tooltip--align-bottom {
    top: auto !important;
    bottom: 36px;
  }
  .o-tooltip--align-bottom:after {
    top: auto;
    bottom: -3px;
  }
  .o-tooltip--paragraph {
    height: auto;
    text-align: left;
    white-space: normal;
    line-height: 1.45;
    padding: 12px 18px;
  }
  .data-tooltip--top-left {
    position: unset !important;
  }
  .data-tooltip--top-left:before {
    top: -52px;
    left: 82px;
  }
  .data-tooltip--top-left:after {
    top: -30px;
    left: 24px;
  }
  .data-tooltip--top-right:before {
    top: -48px;
    left: auto;
    right: -90px;
  }
  .data-tooltip--top-right:after {
    top: -25px;
    left: auto;
    right: 5px;
  }
  .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;
  }
  .o-fragment--tooltip span {
    cursor: pointer;
  }
  .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;
  }
  .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: 0.375rem; /* 6/16 */
    position: relative;
    margin-left: 10px;
  }
  .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: 4px;
    border: 3px solid #333333;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -12px;
  }
  .o-fragment--tooltip .o-tooltip__color--yellow {
    background: #FFE242;
  }
  .o-fragment--tooltip .o-tooltip__color--orange {
    background: #FBBC5D;
  }
  .o-fragment--tooltip .o-tooltip__color--red {
    background: #E58A8A;
  }
  .o-fragment--tooltip .o-tooltip__color--purple {
    background: #A0AEF2;
  }
  .o-fragment--tooltip .o-tooltip__color--blue {
    background: #85DDE9;
  }
  .o-fragment--tooltip .o-tooltip__color--green {
    background: #90DE9C;
  }
  .o-fragment--tooltip .o-tooltip__action {
    padding: 0 10px;
    border-left: 1px solid #434A53;
  }
  .l-tooltip-book-chapters {
    left: 45px;
    top: 35px;
  }
  .l-tooltip-book-tools {
    top: 35px;
  }
  .l-tooltip-erase-notebook {
    left: auto;
    right: 0;
    right: -78px;
    top: 32px;
  }
  .l-tooltip-erase-notebook:after {
    right: 10px;
  }
  .prefers-color-scheme--dark .transcript.o-tooltip {
    background-color: #3B3D43;
  }
  .o-link--green {
    color: #158443;
  }
  .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);
  }
  .o-circular--progress .o-circluar--bg-none {
    background: none;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .l-height-0 {
    height: 0 !important;
  }
  .l-height-100-percent {
    height: 100%;
  }
  .l-height-100 {
    height: 100vh;
  }
  .l-height-20 {
    height: 20px;
  }
  .l-height-52 {
    height: 52px;
  }
  .l-height-52--force {
    height: 52px !important;
  }
  .l-height-72--force {
    height: 72px !important;
  }
  .l-height-90--force {
    height: 90px !important;
  }
  .l-height-120--force {
    height: 120px !important;
  }
  .l-height-144--force {
    height: 144px !important;
  }
  .l-height-200--force {
    height: 200px !important;
  }
  .l-height-280--force {
    height: 280px !important;
  }
  .l-height-200 {
    height: 200px;
  }
  .l-width--90 {
    width: 90px !important;
  }
  .l-block--170 {
    max-width: 170px;
  }
  .l-block--224 {
    max-width: 224px;
  }
  .l-block--275 {
    max-width: 275px;
  }
  .l-min-height-100 {
    min-height: 100vh;
  }
  .l-block--card-320 {
    max-width: 320px;
  }
  .l-block--card-360 {
    max-width: 360px;
  }
  .l-block--card-420 {
    max-width: 420px;
  }
  .l-block--card-small {
    max-width: 640px;
  }
  .l-block--484 {
    max-width: 484px;
  }
  .l-block--686 {
    max-width: 686px;
  }
  .l-block--688 {
    max-width: 688px;
  }
  .l-block--696 {
    max-width: 696px;
  }
  .l-block--card-medium {
    max-width: 720px;
  }
  .l-block--806 {
    max-width: 806px;
  }
  .l-block--906 {
    max-width: 906px;
  }
  .l-block--912 {
    max-width: 912px;
  }
  .l-block--920 {
    max-width: 920px;
  }
  .l-block--968 {
    max-width: 968px;
  }
  .l-block--1080 {
    max-width: 1080px;
  }
  .l-block--1152 {
    max-width: 1152px;
  }
  .l-block--1200 {
    max-width: 1215px;
  }
  .l-block--1300 {
    max-width: 1300px;
  }
  .l-block--100 {
    max-width: 100%;
  }
  .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%;
  }
  .l-half-col {
    width: 50%;
  }
  .l-width-max-120 {
    max-width: 120px;
  }
  .l-width-min-100 {
    min-width: 100%;
  }
  .l-margin-auto {
    margin: 0 auto;
  }
  .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;
  }
  .l-margin-1 {
    margin-top: 1px;
  }
  .l-margin-2 {
    margin-top: 2px;
  }
  .l-margin-3 {
    margin-top: 3px;
  }
  .l-margin-4 {
    margin-top: 4px;
  }
  .l-margin-6 {
    margin-top: 6px;
  }
  .l-margin-9 {
    margin-top: 9px;
  }
  .l-margin-9--force {
    margin-top: 9px !important;
  }
  .l-margin-10 {
    margin-top: 10px;
  }
  .l-margin-12 {
    margin-top: 12px;
  }
  .l-margin-12--force {
    margin-top: 12px !important;
  }
  .l-margin-15 {
    margin-top: 15px;
  }
  .l-margin-18 {
    margin-top: 18px;
  }
  .l-margin-18--i {
    margin-top: 18px !important;
  }
  .l-margin-20 {
    margin-top: 20px;
  }
  .l-margin-21 {
    margin-top: 21px;
  }
  .l-margin-21--force {
    margin-top: 21px !important;
  }
  .l-margin-24 {
    margin-top: 24px;
  }
  .l-margin-27 {
    margin-top: 27px;
  }
  .l-margin-30 {
    margin-top: 30px;
  }
  .l-margin-30--force {
    margin-top: 30px !important;
  }
  .l-margin-36 {
    margin-top: 36px;
  }
  .l-margin-40 {
    margin-top: 40px;
  }
  .l-margin-42 {
    margin-top: 42px;
  }
  .l-margin-45 {
    margin-top: 45px;
  }
  .l-margin-50 {
    margin-top: 50px;
  }
  .l-margin-60 {
    margin-top: 60px;
  }
  .l-margin-72 {
    margin-top: 72px;
  }
  .l-margin-90 {
    margin-top: 90px;
  }
  .l-margin-120 {
    margin-top: 120px;
  }
  .l-margin-145 {
    margin-top: 145px;
  }
  .l-margin-180 {
    margin-top: 180px;
  }
  .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;
  }
  .l-margin-left-9 {
    margin-left: 9px;
  }
  .l-margin-left-10 {
    margin-left: 10px;
  }
  .l-margin-left-6 {
    margin-left: 6px;
  }
  .l-margin-sides-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .l-margin-sides-2 {
    margin-left: 2px;
    margin-right: 2px;
  }
  .l-margin-sides-3 {
    margin-left: 3px;
    margin-right: 3px;
  }
  .l-margin-sides-8 {
    margin-left: 8px;
    margin-right: 8px;
  }
  .l-margin-n-9 {
    margin-top: -9px;
  }
  .l-margin-n-18 {
    margin-top: -18px;
  }
  .l-margin-n-20 {
    margin-top: -20px;
  }
  .l-margin-left-6 {
    margin-left: 6px;
  }
  .l-margin-left-9 {
    margin-left: 9px;
  }
  .l-margin-left-15 {
    margin-left: 15px;
  }
  .l-margin-left-18 {
    margin-left: 18px;
  }
  .l-margin-left-29 {
    margin-left: 29px;
  }
  .l-margin-right-0 {
    margin-right: 0 !important;
  }
  .l-margin-right-3 {
    margin-right: 3px;
  }
  .l-margin-right-4 {
    margin-right: 4px;
  }
  .l-margin-right-6 {
    margin-right: 6px;
  }
  .l-margin-right-8 {
    margin-right: 8px !important;
  }
  .l-margin-right-9 {
    margin-right: 9px !important;
  }
  .l-margin-right-10 {
    margin-right: 10px !important;
  }
  .l-margin-right-12 {
    margin-right: 12px !important;
  }
  .l-margin-right-15 {
    margin-right: 15px !important;
  }
  .l-margin-right-16 {
    margin-right: 16px !important;
  }
  .l-margin-right-18 {
    margin-right: 18px !important;
  }
  .l-margin-right-21 {
    margin-right: 21px !important;
  }
  .l-margin-right-24 {
    margin-right: 24px !important;
  }
  .l-margin-right-30 {
    margin-right: 30px !important;
  }
  .l-margin-left-auto {
    margin-left: auto !important;
  }
  .l-margin-right-auto {
    margin-right: auto !important;
  }
  .l-margin-bottom-n-10 {
    margin-bottom: -10px;
  }
  .l-margin-bottom-n-12 {
    margin-bottom: -12px;
  }
  .l-margin-bottom-n-18 {
    margin-bottom: -18px;
  }
  .l-margin-bottom-12 {
    margin-bottom: 12px !important;
  }
  .l-margin-bottom-18 {
    margin-bottom: 18px !important;
  }
  .l-margin-right-n-24 {
    margin-right: -24px;
  }
  .l-margin-left-n-24 {
    margin-left: -24px;
  }
  .l-margin-bottom-20 {
    margin-bottom: 20px !important;
  }
  .l-margin-bottom-27 {
    margin-bottom: 27px !important;
  }
  .l-margin-bottom-45 {
    margin-bottom: 45px !important;
  }
  .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;
  }
  .l-padding-sides-0 {
    padding: 0 !important;
  }
  .l-padding-sides-20 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .l-padding-sides-45 {
    padding-left: 45px;
    padding-right: 45px;
  }
  .l-padding-0 {
    padding-top: 0 !important;
  }
  .l-padding-3 {
    padding-top: 3px;
  }
  .l-padding-6 {
    padding-top: 6px;
  }
  .l-padding-9 {
    padding-top: 9px;
  }
  .l-padding-15 {
    padding-top: 15px;
  }
  .l-padding-20 {
    padding-top: 20px;
  }
  .l-padding-24 {
    padding-top: 24px;
  }
  .l-padding-30 {
    padding-top: 30px;
  }
  .l-padding-42 {
    padding-top: 42px;
  }
  .l-padding-45 {
    padding-top: 45px;
  }
  .l-padding-48 {
    padding-top: 48px;
  }
  .l-padding-60 {
    padding-top: 60px;
  }
  .l-padding-72 {
    padding-top: 72px;
  }
  .l-padding-90 {
    padding-top: 90px;
  }
  .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;
  }
  .l-padding-bottom-30 {
    padding-bottom: 30px;
  }
  .l-padding-bottom-60 {
    padding-bottom: 60px;
  }
  .l-padding-bottom-90 {
    padding-bottom: 90px;
  }
  .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;
  }
  .l-padding-right-0 {
    padding-right: 0 !important;
  }
  .l-padding-right-20 {
    padding-right: 20px;
  }
  .l-padding-right-30 {
    padding-right: 30px;
  }
  .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;
  }
  .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;
  }
  .l-padding-all-20 {
    padding: 20px;
  }
  .l-padding-all-24 {
    padding: 24px;
  }
  .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;
  }
  .l-flex-wrap-justify {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .l-flex-nowrap-justify {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .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;
  }
  .l-flex-align-start {
    display: flex;
    align-items: flex-start;
  }
  .l-flex-align-end {
    display: flex;
    align-items: flex-end;
  }
  .l-flex-align-stretch {
    display: flex;
    align-items: stretch;
  }
  .l-flex-justify-center {
    display: flex;
    justify-content: center;
  }
  .l-flex-justify-right {
    display: flex;
    justify-content: flex-end;
  }
  .l-flex-justify-space-between {
    display: flex;
    justify-content: space-between;
  }
  .l-flex-align-content--center {
    align-content: center;
  }
  .l-align-items-start {
    align-items: flex-start;
  }
  .l-relative {
    position: relative;
  }
  .l-absolute {
    position: absolute;
    top: 0;
  }
  .l-absolute-right {
    position: absolute;
    top: 0;
    right: 0;
  }
  .l-top-13 {
    top: 13px;
  }
  .l-right-0 {
    right: 0;
  }
  .l-bottom-0 {
    bottom: 0;
  }
  .l-text-align-left {
    text-align: left;
  }
  .l-text-align-left--force {
    text-align: left !important;
  }
  .l-text-align-center {
    text-align: center;
  }
  .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;
  }
  .l-font-header {
    font-family: "Bitter", serif;
  }
  .l-font-header ul {
    font-family: "Bitter", serif;
  }
  .l-font-header--force {
    font-family: "Bitter", serif !important;
  }
  .l-font-normal {
    font-weight: normal;
  }
  .l-font-semibold {
    font-weight: 600;
  }
  .l-font-bold {
    font-weight: 700;
  }
  .l-font-italic {
    font-style: italic;
  }
  .l-font-no-decor {
    text-decoration: none;
  }
  .l-font-no-decor--hover:hover {
    text-decoration: none !important;
  }
  .l-font-no-decor--hover:hover .o-button__label {
    text-decoration: none !important;
  }
  .l-font-underline {
    text-decoration: underline;
  }
  .l-font-underline--force {
    text-decoration: underline !important;
  }
  .l-font-line {
    text-decoration: line-through;
  }
  .l-line-height-1 {
    line-height: 1;
  }
  .l-line-height-1125 {
    line-height: 1.125;
  }
  .l-line-height-1125--force {
    line-height: 1.125 !important;
  }
  .l-line-height-12 {
    line-height: 1.2;
  }
  .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 */
  }
  .l-font-13 {
    font-size: 0.8125rem; /* 13/16 */
  }
  .l-font-14 {
    font-size: 0.875rem; /* 14/16 */
  }
  .l-font-15 {
    font-size: 0.9375rem; /* 15/16 */
  }
  .l-font-15--force {
    font-size: 0.9375rem !important; /* 15/16 */
  }
  .l-font-16 {
    font-size: 1rem; /* 15/16 */
  }
  .l-font-17 {
    font-size: 1.0625rem; /* 24/16 */
  }
  .l-font-18 {
    font-size: 1.125em;
  }
  .l-font-19 {
    font-size: 1.1875rem; /* 19/16 */
  }
  .l-font-20 {
    font-size: 1.25rem; /* 20/16 */
  }
  .l-font-21 {
    font-size: 1.3125rem; /* 21/16 */
  }
  .l-font-24 {
    font-size: 1.5rem; /* 24/16 */
  }
  .l-font-27 {
    font-size: 1.6875rem;
  }
  .l-font-30 {
    font-size: 1.875rem; /* 30/16 */
  }
  .l-font-36 {
    font-size: 2.25rem; /* 36/16 */
  }
  .l-font-42 {
    font-size: 2.625rem; /* 42/16 */
  }
  .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;
  }
  .l-color-grey-regent {
    color: #959DA5;
  }
  .l-color-grey-cadet {
    color: #ACB6BF;
  }
  .l-color-grey-chateau {
    color: #A7ADB4;
  }
  .l-color-white {
    color: #ffffff;
  }
  .l-color-white--force {
    color: #ffffff !important;
  }
  .l-color-white-hover:hover {
    color: #ffffff !important;
  }
  .l-color-black {
    color: #333333 !important;
  }
  .l-color-green {
    color: #158443;
  }
  .l-color-red {
    color: #CF3B2B;
  }
  .l-color-green--force {
    color: #158443 !important;
  }
  .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;
  }
  .l-whitespace {
    white-space: nowrap;
  }
  .l-whitespace-reset {
    white-space: normal !important;
  }
  .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;
  }
  .l-no-font-spacing {
    letter-spacing: 0px;
  }
  .l-grid {
    display: grid;
  }
  .l-grid-2-fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .l-grid-3-fr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .l-grid-3-auto {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  .l-grid-2 {
    display: grid;
    grid-template-columns: auto auto;
  }
  .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;
  }
  .l-grid-6-3-fr {
    display: grid;
    grid-template-columns: 6fr 3fr;
  }
  .l-grid-col-gap-8 {
    grid-column-gap: 8px;
  }
  .l-grid-col-gap-12 {
    grid-column-gap: 12px;
  }
  .l-grid-col-gap-16 {
    grid-column-gap: 16px;
  }
  .l-grid-col-gap-18 {
    grid-column-gap: 18px;
  }
  .l-grid-col-gap-20 {
    grid-column-gap: 20px;
  }
  .l-grid-col-gap-24 {
    grid-column-gap: 24px;
  }
  .l-grid-col-gap-25 {
    grid-column-gap: 25px;
  }
  .l-grid-col-gap-26 {
    grid-column-gap: 26px;
  }
  .l-grid-col-gap-30 {
    grid-column-gap: 30px;
  }
  .l-grid-col-gap-36 {
    grid-column-gap: 36px;
  }
  .l-grid-col-gap-40 {
    grid-column-gap: 40px;
  }
  .l-grid-col-gap-45 {
    grid-column-gap: 45px;
  }
  .l-grid-col-gap-142 {
    grid-column-gap: 142px;
  }
  .l-grid-row-gap-15 {
    grid-row-gap: 15px;
  }
  .l-grid-row-gap-18 {
    grid-row-gap: 18px;
  }
  .l-grid-row-gap-20 {
    grid-row-gap: 20px;
  }
  .l-grid-row-gap-25 {
    grid-row-gap: 25px;
  }
  .l-grid-row-gap-26 {
    grid-row-gap: 26px;
  }
  .l-grid-row-gap-30 {
    grid-row-gap: 30px;
  }
  .l-grid-row-gap-36 {
    grid-row-gap: 36px;
  }
  .l-grid-col-gap-60 {
    grid-column-gap: 60px;
  }
  .l-grid-row-gap-40 {
    grid-row-gap: 40px;
  }
  .l-grid-row-gap-50 {
    grid-row-gap: 50px;
  }
  .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;
  }
  .l-background--none {
    background: none;
  }
  .l-background--white {
    background: #ffffff;
  }
  .l-background--grey {
    background: #F2F6FA;
  }
  .l-background--blue-grey {
    background: #E2E6F7;
  }
  .l-background--black {
    background: #333333;
  }
  .l-background--black-slate {
    background: #2F4F4F !important;
  }
  .l-background--dark-black {
    background: #222222 !important;
  }
  .l-background--yellow {
    background: #F3B36A !important;
  }
  .l-background--yellow-grandis {
    background: #FDCF74 !important;
  }
  .l-background--blue {
    background: #157CB8 !important;
  }
  .l-overflow-x {
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .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;
  }
  .l-border-top-grey {
    border-top: 1px solid #DBDDE0;
  }
  .l-border-top-grey-catskill {
    border-top: 1px solid #DFE7F0;
  }
  .l-border-bottom-grey {
    border-bottom: 1px solid #DBDDE0;
  }
  .l-border-bottom-grey-aqua-haze {
    border-bottom: 1px solid #EFF3F6;
  }
  .l-border-bottom-grey-mako {
    border-bottom: 1px solid #434A53;
  }
  .l-border-radius {
    border-radius: 0.5625rem;
  }
  .l-display-block {
    display: block;
  }
  .l-display-block--force {
    display: block !important;
  }
  .l-inline-block {
    display: inline-block;
  }
  .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;
  }
  .l-z-index-1 {
    z-index: 1;
  }
  .l-border-top {
    border-top: 1px solid #DFE7F0;
  }
  .l-border-bottom {
    border-bottom: 1px solid #DFE7F0;
  }
  .l-no-focus:focus {
    box-shadow: none !important;
    outline: 0 !important;
  }
  .l-image-float-left {
    float: left;
    margin-right: 30px;
  }
  .l-image-float-left img {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
  .l-image-float-right {
    float: right;
    margin-left: 30px;
  }
  .l-image-float-right img {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
  .l-visibility-hidden {
    visibility: hidden;
  }
  .l-rotate-180 {
    transform: rotate(180deg);
  }
  .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;
  }
  .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;
  }
  .l-admin--sidebar-open .c-global-header__logo .o-header-logo__text {
    opacity: 1 !important;
  }
  .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;
  }
  .l-video-overlay--start {
    align-items: flex-start;
  }
  .l-tutorial-collection {
    padding-top: 42px;
  }
  .l-tutorial-collection .l-margin-24 {
    margin-top: 24px !important;
  }
  .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;
  }
  .l-block-tutorials .c-tutorial-item__metadata-short {
    color: #333333;
  }
  .l-block-tutorials .c-tutorial-item__metadata-short, .l-block-tutorials .c-tutorial-item__type {
    display: block !important;
    margin-top: 6px;
  }
  .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;
  }
  .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);
  }
  .l-tutorial-container--slider .o-button__icon--prev svg {
    transform: rotate(180deg);
  }
  .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);
  }
  .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;
  }
  .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%;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content code {
    font-size: 0.875em;
  }
  .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;
  }
  .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;
  }
  .l-chapter-text-size-85 .c-book-chapter .c-written-tutorial__content {
    font-size: 85%;
  }
  .l-chapter-text-size-90 .c-book-chapter .c-written-tutorial__content {
    font-size: 90%;
  }
  .l-chapter-text-size-100 .c-book-chapter .c-written-tutorial__content {
    font-size: 100%;
  }
  .l-chapter-text-size-110 .c-book-chapter .c-written-tutorial__content {
    font-size: 110%;
  }
  .l-chapter-text-size-120 .c-book-chapter .c-written-tutorial__content {
    font-size: 120%;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .l-book-sales-copy ul {
    list-style: disc;
  }
  .l-book-sales-copy ol {
    list-style: decimal;
  }
  .l-book-sales-copy a {
    color: #158443;
  }
  .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;
  }
  .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);
  }
  .l-book-toc .c-tutorial-episode p {
    margin-top: 6px;
    font-size: 0.9375em;
    /* 15/16 */
  }
  .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;
  }
  .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;
  }
  .l-book-contributors .c-authors {
    background: none;
    padding: 0;
  }
  .l-book-contributors .l-block-wrapper {
    padding: 0;
  }
  .l-book-contributors .c-content-author p {
    display: none;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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%;
  }
  .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;
  }
  #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;
  }
  #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;
  }
  #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;
  }
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__platform {
    display: none;
  }
  #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);
  }
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__icon {
    right: -96px;
    position: relative;
    display: none;
  }
  #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;
  }
  .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;
  }
  .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;
  }
  .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 */
  }
  .l-collection-modules .l-collection-modules__pitch-cards a {
    color: #158443;
  }
  .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 */
  }
  .l-collection-modules .l-collection-modules__pitch-cards p {
    margin-top: 18px;
  }
  .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(checkmark--clear-green-e7cb550028b55997c9619c790965bfe6f3cbd9a1b6f6593a4c8e7d9cd9cbdb84.png);
    background-size: cover;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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(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(black-friday-2021-hero-pattern-style-2-cbf4df08a1a98cb35dbaf7d2149956f0dffe854767702da9245960bee1a4c304.png);
    background-repeat: repeat-x;
    background-size: 1480px;
  }
  .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(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(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;
  }
  .l-black-friday-ui-sales-2021.c-banner-draper--subscription p {
    color: #A7ADB4 !important;
  }
  .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;
  }
  .c-banner-draper-sticky.l-black-friday-ui-sales-2021 img {
    width: 240px;
    max-width: none !important;
    margin-bottom: -30px;
    margin-top: -10px;
  }
  .c-video-player__paywall.l-black-friday-ui-sales-2021 {
    position: absolute !important;
  }
  .home-pattern {
    background-size: 2000px;
    background-position-x: -500px;
  }
  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;
  }
  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;
  }
  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 */
  }
  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;
  }
  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(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(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;
  }
  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;
  }
  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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .home-pillars--android:after {
    content: "";
    width: 230px;
    height: 290px;
    background-image: url(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;
  }
  .home-pillars--android .home-pillars__entry-hint svg {
    fill: #49C9D7;
  }
  .home-pillars--server-side-swift {
    background: #363B44;
    background-image: url(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;
  }
  .home-pillars--unity {
    background: #687BAD;
    background-image: url(unity-vr-fe00fd0b52b25e10558b299ff0c0f54d8c9eecf812f9358ca0a69e56b20b6add.svg);
    background-size: 420px;
    background-position: bottom -250px right -175px;
    background-repeat: no-repeat;
  }
  .home-pillars--unity svg {
    fill: #687BAD;
  }
  .home-pillars--unreal-engine {
    background: #535a65;
    background-image: url(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;
  }
  .home-pillars--flutter {
    background: #096ABB;
    background-image: url(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;
  }
  .home-pillars--library {
    background: #1E8C75;
    background-image: url(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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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(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;
  }
  .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(illustration-paths-6d7cc0918e3be5ab9fe64bfd9d511fab8099b5dd330983ad7d1f6f9853109304.svg);
    background-size: cover;
  }
  .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(illustration-ios-app-6fe01cac104d72c4c4f6859a8ecba8881d1fa176c021c6f868634e82eb53beb5.svg);
    background-size: cover;
  }
  .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(illustration-android-app-a5e1f0bed7c8b52abdf37955cbbda89773dedff4a44634ecb3ce8b02c000efc8.svg);
    background-size: cover;
  }
  .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(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;
  }
  .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);
  }
  .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);
  }
  .l-home-continue-watching .c-tutorial-item .o-badge--new, .l-home-continue-watching .c-tutorial-item .c-tutorial-item__platform {
    display: none;
  }
  .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;
  }
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__text {
    display: block;
    white-space: normal;
    padding: 21px 21px 9px 21px !important;
    width: 100%;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .l-home-new-tutorials-sidebar .o-badge-tutorial--locked, .l-home-new-tutorials-sidebar .o-badge-tutorial--recording {
    display: none !important;
  }
  .l-home-new-tutorials-sidebar .c-tutorial-item__metadata {
    order: 3;
    font-size: 0.875rem !important; /* 14/16 */
    display: block !important;
  }
  .l-home-new-tutorials-sidebar .c-tutorial-item__type, .l-home-new-tutorials-sidebar .c-tutorial-item__metadata-short {
    display: none !important;
  }
  .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 */
  }
  .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;
  }
  .l-home-new-tutorials .c-tutorial-item .c-tutorial-item__complete {
    margin-top: 15px !important;
    width: 113px !important;
  }
  .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;
  }
  .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;
  }
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__upper {
    display: block;
  }
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__lower {
    display: none !important;
  }
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__text-upper-meta {
    display: none;
  }
  .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;
  }
  .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(shape-background-1-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg), url(shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(shape-background-3-04b435a8b367f2acd5df19e9a5a9ebbc5cb9ebd83de592acf2614e6811916be2.svg), url(shape-background-4-0d96a3121fa3a02c4d7b878e6ed0675842ff726f49e40aba07030e84c1193067.svg), url(shape-background-5-c379900da8d28c5958f954b1f923c28e7059467db686e6466713c15ac59f9392.svg), url(shape-background-6-72adcee52e0ba4a563c8508d53eb3b86254d8a1c13794ac6058f49f443a162ff.svg), url(shape-background-7-807e6193fe372045c1a6e371de27240b7fa9c6f6204d89927caaf5d4ae34dee8.svg), url(shape-background-8-016f417c5c3633a91c7042c5b3cd3cd44e789c909675095750cc017b23010be4.svg), url(shape-background-9-67e08e905fe410e51fb03d1d9680af2c223752da21fd60247fc858579622ef3e.svg), url(shape-background-10-f4b5dbb2c2e157d0f0c5bd136cf6c3f8f54dd1b26e19bf117289e79ae35a6522.svg), url(shape-background-11-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg), url(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;
  }
  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(illustration-home-hero-7e4cfa11e8db4d2d1a0afbd5f7b6fd7f80bc4d22f8ec6a9c363668c68d23b493.svg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  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(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 */
  }
  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 */
  }
  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(illustration-home-footer-5e6ec24f93a67f76aacbd96085b7f42a0632451ee740aafc1b231d4e5c27573f.svg) !important;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section.l-home-hero-teaspoon-bottom .l-home-hero-teaspoon__right:before {
    background-image: url(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;
  }
  .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;
  }
  .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(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(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;
  }
  .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;
  }
  .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;
  }
  .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(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;
  }
  .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;
  }
  .l-home-recommended .c-tutorial-item--article-content .c-tutorial-item__video-player:before {
    display: none !important;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__text {
    padding: 0 !important;
  }
  .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;
  }
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__platform {
    font-size: 0.875rem !important; /* 14/16 */
  }
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__art {
    position: relative !important;
    border-radius: 21px;
  }
  .l-home-recommended .c-tutorial-item--book-content .c-tutorial-item__art-image--primary {
    top: auto !important;
  }
  .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 */
  }
  .l-onboarding-background {
    background-image: url(shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(shape-background-1-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg);
    background-size: 100%, 1440px;
    background-position: top -72px right, top -60px right -60px;
    background-repeat: no-repeat;
  }
  .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;
  }
  .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;
  }
  .l-onboarding-skill--multiple {
    max-width: none !important;
  }
  .l-subscription-plans--teaspoon {
    background-image: url(illustration-subscription-header-923bfbe189a4967a8aa7d5afda8500cc54c825927e383d2434d94171e11bbafb.svg), url(shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(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;
  }
  .l-subscription-plans--teaspoon .c-plan--emphasis .o-badge {
    color: #157CB8;
    border-color: #157CB8;
  }
  .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;
  }
  .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);
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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(checkmark-input-1b8bd8dd799f9ea5860fb52681f477caf55c87984a33ed8c58cefdcd097ca5d2.png);
    background-size: cover;
    opacity: 0;
  }
  .l-onboarding-reason label:hover {
    background: #F2F6FA;
  }
  .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 */
  }
  .l-onboarding-header div:nth-of-type(2) {
    text-align: right;
  }
  .l-onboarding-header a {
    font-size: 1rem;
    color: #6E7687;
  }
  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(people-left-large%402x-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(people-right-large%402x-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(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;
  }
  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;
  }
  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;
  }
  .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;
  }
  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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .l-community-care-article .l-community-care-upcoming-events ul li a {
    color: #333333;
    text-decoration: underline;
    margin-left: 12px;
  }
  .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;
  }
  .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;
  }
  .l-article-rating-footer h3 {
    font-size: 1.0625rem !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .l-svg-collection {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 9px;
  }
  .l-svg-notebook-bin {
    width: 17px;
    height: 21px;
  }
  .l-svg-breadcrumb {
    width: 10px;
    transform: rotate(90deg);
    height: 10px;
    fill: #6E7687;
  }
  .l-svg-nub-down {
    width: 10px;
    height: 10px;
    margin-top: -6px;
    margin-left: -6px;
    position: relative;
  }
  .l-svg-more {
    width: 20px;
    height: 5px;
  }
  .l-svg-empty-state-bookmark {
    width: 13px;
    height: 18px;
    top: 5px;
    position: relative;
    margin: 0 5px;
  }
  .l-svg-video-mode, .l-svg-cinema-mode {
    width: 30px;
    height: 24px;
  }
  .l-svg-videos-nav {
    fill: #DBDDE0;
    width: 20px;
    height: 20px;
  }
  .l-svg-search-nav {
    fill: #DBDDE0;
    width: 16px;
    height: 16px;
  }
  .l-svg-articles-nav {
    fill: #DBDDE0;
    width: 18px;
    height: 18px;
  }
  .l-svg-instagram-footer {
    width: 23px;
    height: 23px;
  }
  .l-svg-twitter-footer {
    width: 23px;
    height: 20px;
  }
  .l-svg-facebook-footer {
    width: 23px;
    height: 23px;
  }
  .l-svg-linkedin-footer {
    width: 22px;
    height: 22px;
  }
  .l-disclose--small {
    width: 15px;
    height: 9px;
  }
  .l-svg-color-white {
    fill: #ffffff !important;
  }
  .l-svg-color-grey-regent {
    fill: #959DA5 !important;
  }
  .l-svg-color-grey-raven {
    fill: #6E7687 !important;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-button:hover {
    opacity: 1;
  }
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-button svg {
    fill: #262626;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-nav-sidebar--article .c-nav-sidebar__nav .c-global-header__logo .o-header-logo__text {
    opacity: 0 !important;
  }
  .c-nav-sidebar--article .o-header-logo__link:hover .o-header-logo__mark {
    fill: #158443 !important;
  }
  .c-nav-sidebar--article .c-nav-sidebar__nav-action {
    display: inline-flex;
    position: relative;
    top: 0;
    margin-top: 0;
    padding: 20px 0 0;
  }
  .c-nav-sidebar--article .c-nav-sidebar__nav-action .o-button__label--open {
    display: none;
  }
  .c-nav-sidebar--article .c-nav-sidebar__nav-action i {
    margin-right: 0;
    margin-left: 4px;
  }
  .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;
  }
  .c-nav-sidebar--article .c-nav-sidebar__title svg {
    position: relative !important;
    left: 0;
    top: 0;
    margin-right: 6px;
    width: 12px;
    height: 12px;
  }
  .c-nav-sidebar--article .c-sidebar-navigator__link {
    color: #333333;
  }
  .c-nav-sidebar--article .c-sidebar-navigator__link:hover {
    color: #333333;
  }
  .c-nav-sidebar--article nav.c-video-player__lessons {
    width: 100%;
  }
  .c-nav-sidebar--article nav.c-video-player__lessons .c-video-player__lessons-section {
    display: block;
  }
  .c-nav-sidebar--white .c-nav-sidebar--article {
    background: none;
  }
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__link:hover .c-sidebar-navigator__indicator:before {
    background: #dbdde0;
  }
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__indicator {
    background: #ffffff;
    border: 2px solid #dbdde0;
  }
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__indicator:after {
    background: #dbdde0;
  }
  .c-nav-sidebar--white .c-nav-sidebar--article .is-active .c-sidebar-navigator__indicator:before {
    background: #dbdde0 !important;
  }
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__title {
    color: #333333;
  }
  .c-nav-sidebar--white .c-nav-sidebar--article .c-sidebar-navigator__title:hover {
    color: #158443;
  }
  .c-sidebar-navigator {
    position: relative;
    padding-bottom: 30px;
  }
  .c-sidebar-navigator li {
    list-style: none;
    margin-top: 16px;
    font-size: 0.875rem; /* 14/16 */
  }
  .c-sidebar-navigator li:last-child .c-sidebar-navigator__indicator:after {
    display: none;
  }
  .c-sidebar-navigator li:nth-last-child(2) .c-sidebar-navigator__indicator:after {
    display: none;
  }
  .c-sidebar-navigator li a {
    display: flex;
    align-items: flex-start;
    color: #ffffff;
    text-decoration: none;
    position: relative;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-nav-sidebar-my-interests .o-header-logo .o-header-logo__mark {
    width: 50px;
  }
  .c-nav-sidebar-my-interests .o-header-logo .o-header-logo__text {
    visibility: hidden;
    opacity: 0;
  }
  .c-nav-sidebar-my-interests .c-nav-sidebar__menu-toggle--opener {
    display: flex;
  }
  .c-nav-sidebar-my-interests .c-nav-sidebar__menu-toggle--closer {
    display: none;
  }
  .c-nav-sidebar-my-interests .o-button-sidebar {
    position: relative;
    margin-top: 15px;
  }
  .c-nav-sidebar-my-interests .o-button-sidebar svg {
    margin-left: -12.5px;
    margin-top: -12.5px;
  }
  .c-nav-sidebar-my-interests .c-nav-sidebar__wrapper {
    padding-bottom: 30px;
    display: none;
  }
  .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;
  }
  .c-nav-sidebar-my-interests button.c-nav-sidebar__menu-toggle svg {
    display: flex;
    align-self: center;
    width: 20px;
    height: 20px;
    fill: #ffffff;
  }
  .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;
  }
  .c-nav-sidebar-my-interests .c-nav-sidebar__section {
    display: flex;
    align-items: center;
    height: 50px;
    cursor: initial;
    position: relative;
  }
  .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;
  }
  .c-nav-sidebar-my-interests .c-nav-sidebar__section svg {
    width: 17px;
    height: 17px;
    fill: #333333;
  }
  .c-nav-sidebar-my-interests .c-nav-sidebar__section .c-nav-sidebar__section-svg--large {
    width: 19px;
    height: 19px;
    fill: #333333;
    margin-right: -1px;
  }
  .c-nav-sidebar-my-interests .c-sidebar-navigator__link {
    color: #333333;
  }
  .c-nav-sidebar-my-interests .c-sidebar-navigator__link:hover {
    color: #333333;
  }
  .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;
  }
  .c-nav-sidebar-my-interests a.c-nav-sidebar__item:hover {
    padding-left: 4px;
    color: #73859F;
  }
  .c-nav-sidebar-my-interests a.c-nav-sidebar__item:last-of-type {
    margin-bottom: 10px;
  }
  .c-nav-sidebar-my-interests a.c-nav-sidebar__link--active {
    color: #333333;
    background: #158443;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
  }
  .c-nav-sidebar-my-interests a.c-nav-sidebar__link--active:hover {
    color: #ffffff;
    padding-left: 24px;
  }
  .c-nav-sidebar-my-interests div.c-nav-sidebar__logo--mobile-menu {
    display: none;
    position: absolute;
    top: 0;
  }
  .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;
  }
  .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);
  }
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-message {
    display: block;
    color: #ffffff;
  }
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-controls {
    text-align: right;
  }
  .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;
  }
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-button:hover {
    opacity: 1;
  }
  .c-nav-sidebar-my-interests div.c-nav-sidebar__profile .c-nav-sidebar__profile-button svg {
    fill: #262626;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-nav-sidebar--book {
    z-index: 1;
    display: none;
    background: #FAFAFA;
  }
  .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;
  }
  .c-nav-sidebar--book .c-video-player__lessons-section:last-child {
    padding-bottom: 120px;
  }
  .c-nav-sidebar--book .c-video-player__lessons-header svg {
    fill: #A7ADB4 !important;
    opacity: 1 !important;
  }
  .c-nav-sidebar--book .c-video-player__lessons-title {
    color: #333333 !important;
  }
  .c-nav-sidebar--book .c-video-player__lessons-title a {
    color: #333333 !important;
  }
  .c-nav-sidebar--book .c-video-player__lessons-title a:hover {
    text-decoration: underline !important;
  }
  .c-nav-sidebar--book .c-video-player__lessons-sum {
    color: #6E7687 !important;
  }
  .c-nav-sidebar--book .c-box-list li a {
    color: #333333;
  }
  .c-nav-sidebar--book .c-box-list li a:hover {
    color: #333333;
    text-decoration: underline;
  }
  .c-nav-sidebar--book .c-box-list--linked li:before {
    background: #ffffff;
  }
  .c-nav-sidebar--book .c-box-list--linked li:after {
    display: none;
  }
  .c-nav-sidebar--book .c-box-list__item--complete {
    text-decoration: none !important;
  }
  .c-nav-sidebar--book .c-box-list__item--complete:before {
    background-image: url(checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png) !important;
    background-size: cover;
  }
  .c-nav-sidebar--book .c-box-list__item--complete a {
    color: #333333 !important;
  }
  .c-nav-sidebar--book .c-box-list__item--complete:hover {
    color: #333333;
  }
  .c-nav-sidebar--book .c-box-list__item--complete .c-box-list__item-scroll-to:hover {
    color: #333333 !important;
  }
  .c-nav-sidebar--book .c-box-list__item--complete + .c-sidebar-navigator:before {
    background: #158443;
  }
  .c-nav-sidebar--book .c-box-list__item--complete + nav:before {
    background: #158443;
  }
  .c-nav-sidebar--book .c-box-list .c-box-list__item--active:before {
    background-image: url(chevron--black-454278cfec6d2fd7013bd089533ed0fa999a8811f872991b37387fc67a6a5144.png);
    background-size: cover;
  }
  .c-nav-sidebar--book .c-box-list__item-scroll-to:hover {
    color: #333333 !important;
  }
  .c-nav-sidebar--book .c-box-list .c-box-list__item--locked:before {
    background-image: url(padlock--black-700be4229af004b19bd24e2e8164e393e38dfe8e1b8946cb9a135e7e4f54556f.png) !important;
    background-size: cover;
  }
  .c-nav-sidebar--book .c-sidebar-navigator {
    padding-bottom: 0;
    position: relative;
  }
  .c-nav-sidebar--book .c-sidebar-navigator:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 9px;
    width: 2px;
    height: calc(100% + 18px);
    background: #DBDDE0;
  }
  .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;
  }
  .c-nav-sidebar--book .c-sidebar-navigator li:before {
    display: none;
  }
  .c-nav-sidebar--book .c-sidebar-navigator li a {
    white-space: normal !important;
    font-weight: 400;
    color: #6E7687 !important;
  }
  .c-nav-sidebar--book .c-sidebar-navigator li a:hover {
    text-decoration: underline;
  }
  .c-nav-sidebar--book .c-sidebar-navigator .is-active {
    text-decoration: underline;
  }
  .c-nav-sidebar--book .c-sidebar-navigator .c-sidebar-navigator__indicator {
    display: none;
  }
  .s_show_mobile_menu .c-nav-sidebar__wrapper {
    display: block !important;
  }
  .s_show_mobile_menu .c-nav-sidebar__cover {
    display: block !important;
  }
  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;
  }
  header#c-global-header a:focus-visible, header#c-global-header button:focus-visible {
    outline: 1px dotted grey;
  }
  header#c-global-header details[open] summary::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    cursor: default;
  }
  header#c-global-header details summary::marker {
    display: none;
  }
  header#c-global-header details summary::-webkit-details-marker {
    display: none;
  }
  header#c-global-header summary {
    list-style: none;
  }
  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;
  }
  header#c-global-header .c-global-header__nav > div.o-button-menu {
    display: none;
  }
  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;
  }
  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;
  }
  header#c-global-header .c-global-header__nav > ul > li > span {
    font-weight: 600 !important;
  }
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile {
    margin-top: 30px;
  }
  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;
  }
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile li a {
    margin-left: 12px;
  }
  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;
  }
  header#c-global-header .c-global-header__nav .l-night-mode-toggle--mobile .o-checkbox {
    top: 50%;
    margin-top: -13px;
    right: 0;
  }
  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);
  }
  header#c-global-header .c-global-header__nav .c-global-header__search {
    font-weight: 600;
  }
  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;
  }
  header#c-global-header .c-global-header__user {
    margin-left: auto;
    display: flex;
    z-index: 999;
  }
  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;
  }
  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;
  }
  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;
  }
  header#c-global-header .c-global-header__user .l-button__nub {
    top: 0;
    margin-left: 2px;
  }
  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;
  }
  header#c-global-header .c-global-header__user .c-global-header__action a:hover {
    background: #17914a;
  }
  header#c-global-header .c-global-header__user .c-global-header__action a span {
    position: relative;
    top: 25px;
  }
  header#c-global-header .c-global-header__user .c-global-header__action a span:hover {
    text-decoration: none;
  }
  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;
  }
  header#c-global-header .c-global-header__user .c-global-header__user-control a .o-tooltip {
    top: 42px;
  }
  .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;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li {
    padding: 0;
    margin-right: 40px;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li:last-child {
    margin-right: 0;
    margin-left: auto;
  }
  .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;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li a svg {
    margin-right: 10px;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__lower > ul li a:hover {
    text-decoration: underline !important;
  }
  .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;
  }
  .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);
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__established a {
    display: flex;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__established span {
    display: block;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__lead {
    font-size: 1rem; /* 18/16 */
    color: #A7ADB4;
  }
  .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;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__established--no-hover:before {
    display: none;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li {
    height: auto;
    padding: 0;
    margin-top: 8px;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li:first-child {
    margin-top: 2px;
  }
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li:last-child {
    margin-bottom: 4px;
  }
  .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;
  }
  .c-dropdown-menu--expanded-tutorials {
    width: 320px;
    padding: 12px 0;
  }
  .c-dropdown-menu--expanded-tutorials li {
    height: auto;
    padding: 12px 24px;
  }
  .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;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5625rem;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon svg {
    fill: #ffffff;
    width: 18px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--admin {
    background: #3B4048;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--admin svg {
    width: 20px;
    height: 20px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--subscription {
    background: #3268a6;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--subscription svg {
    position: relative;
    width: 21px;
    height: 21px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--account {
    background: #158443;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--account svg {
    width: 26px;
    height: 26px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--profile {
    background: #2EA664;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--profile svg {
    height: 25px;
    width: 30px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--products {
    background: #FD7401;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--products svg {
    width: 12px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--bookmarks {
    background: #585E66;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--bookmarks svg {
    width: 12px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--newsletter {
    background: #157CB8;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--newsletter svg {
    height: 20px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--support {
    background: #687BAD;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--support svg {
    width: 9px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--forums {
    background: #41AEA4;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--forums svg {
    width: 18px;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--logout {
    background: #CF3B2B;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--logout svg {
    width: 16px;
    height: 16px;
    transform: rotate(-45deg);
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--night-mode {
    background: #333333;
  }
  .l-dropdown-menu-user i.o-dropdown-menu__icon--night-mode svg {
    width: 16px;
    height: 20px;
  }
  .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;
  }
  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%;
  }
  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;
  }
  nav#c-pillar-navigation ul li a:hover {
    color: #158443;
  }
  nav#c-pillar-navigation ul li a.active {
    color: #158443;
  }
  footer#c-global-footer {
    background-color: #333333;
    padding: 30px;
    position: relative;
    z-index: 9999999;
    overflow: hidden;
  }
  footer#c-global-footer:before {
    content: "";
    position: absolute;
    top: -80px;
    right: 0;
    z-index: 0;
    width: 200px;
    height: 327px;
    background-image: url(devices-outline-06aea0bcb7c18d3c7df5a7abdc003d44a2e6925a3569cec2b23c230832283d8c.svg);
    background-size: 200px;
    background-repeat: no-repeat;
    opacity: 0.3;
  }
  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;
  }
  footer#c-global-footer .c-global-footer__wrapper > div .o-header-logo .o-header-logo__mark {
    position: relative;
    width: 40px;
    fill: #ffffff;
  }
  footer#c-global-footer .c-global-footer__wrapper > div h4 {
    color: #ffffff;
    font-size: 1rem; /* 18/16 */
  }
  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;
  }
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places li a {
    transition: border 0s;
  }
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places li a:hover {
    border-bottom: 2px solid #73859F;
  }
  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;
  }
  footer#c-global-footer .c-global-footer__wrapper > div input {
    width: 100%;
    margin-top: 21px;
  }
  footer#c-global-footer .c-global-footer__wrapper > div .o-icon-button--tiny {
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -12px;
  }
  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;
  }
  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;
  }
  footer#c-global-footer .c-global-footer__copyright ul a {
    text-decoration: none;
    transition: border 0s;
  }
  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%;
  }
  .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;
  }
  .c-tabs li:first-child {
    margin-left: 0;
  }
  .c-tabs li.c-tabs--active:before {
    content: "";
    bottom: -2px;
    left: 0;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #157CB8;
  }
  .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;
  }
  .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;
  }
  .c-tabs-wrapper::-webkit-scrollbar {
    width: 0 !important;
  }
  .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;
  }
  .c-tabs--emphasis .l-overflow-x {
    scrollbar-width: none;
  }
  .c-tabs--emphasis > li > ul > li {
    margin: 0;
  }
  .c-tabs--emphasis li {
    font-family: "Bitter", serif;
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.25px;
  }
  .c-tabs--emphasis li span {
    font-weight: 500;
  }
  .c-tabs--emphasis li a {
    height: 44px;
    line-height: 44px;
    text-decoration: none;
    color: #ffffff;
    padding: 0 20px;
    z-index: 1;
  }
  .c-tabs--emphasis li a svg {
    fill: #ffffff;
  }
  .c-tabs--emphasis li .c-tabs__link--start {
    background: #3268A6;
    border-radius: 50px;
    margin-right: 20px;
  }
  .c-tabs--emphasis li .c-tabs__link--start:hover {
    background: #366fb2;
  }
  .c-tabs--emphasis li.c-tabs--active a {
    background: #158443;
    border-radius: 50px;
  }
  .c-tabs--dark {
    border-color: #434A53;
  }
  .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;
  }
  .c-tabs-navigation::-webkit-scrollbar {
    width: 0 !important;
  }
  .c-tabs-navigation::-webkit-scrollbar {
    display: none;
  }
  .c-tabs-navigation li {
    margin-left: 24px;
  }
  .c-tabs-navigation li:first-child {
    margin-left: 0;
  }
  .c-tabs-navigation li a {
    color: #A7ADB4;
    font-size: 0.9375rem; /* 15/16 */
    font-weight: 600;
    text-decoration: none;
  }
  .c-tabs-navigation li.c-tabs--active a {
    color: #ffffff;
    position: relative;
  }
  .c-tabs-navigation li.c-tabs--active a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -27px;
    width: 100%;
    height: 3px;
    background: #158443;
  }
  .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;
  }
  .c-mobile-navigator li a {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .c-mobile-navigator li a:hover {
    background: #DBDDE0;
  }
  .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;
  }
  .c-nav-sidebar-my-interests--show .c-nav-sidebar__menu-toggle--opener {
    display: none;
  }
  .c-nav-sidebar-my-interests--show .c-nav-sidebar__menu-toggle--closer {
    display: flex;
  }
  .c-nav-sidebar-my-interests--show .c-nav-sidebar__wrapper {
    display: block;
  }
  .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;
  }
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__menu-toggle--opener {
    display: none;
  }
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__menu-toggle--closer {
    display: flex;
  }
  .c-nav-sidebar-my-interests--show-mobile .c-nav-sidebar__wrapper {
    display: block;
  }
  .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;
  }
  .c-book-header .c-global-header__logo .o-header-logo__link:hover svg {
    fill: #158443 !important;
  }
  .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;
  }
  .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;
  }
  .c-mobile-navigator--book {
    background: #FAFAFA;
  }
  .c-mobile-navigator--book a:hover {
    background: #DBDDE0 !important;
  }
  .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;
  }
  .c-paginator a:hover {
    background: #F5F8FB;
  }
  .c-paginator a span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-paginator a svg {
    width: 17px;
    height: 15px;
    fill: #A7ADB4;
  }
  .c-paginator .c-paginator__back:hover svg {
    transform: translateX(-5px);
  }
  .c-paginator .c-paginator__back span, .c-paginator .c-paginator__back svg {
    margin-right: auto;
    margin-right: auto;
  }
  .c-paginator .c-paginator__back span {
    margin-left: -41px;
  }
  .c-paginator .c-paginator__back svg {
    transition: all 0.25s;
    margin-left: 24px;
  }
  .c-paginator .c-paginator__forward:hover svg {
    transform: translateX(5px);
  }
  .c-paginator .c-paginator__forward span, .c-paginator .c-paginator__forward svg {
    margin-left: auto;
    margin-left: auto;
  }
  .c-paginator .c-paginator__forward span {
    margin-right: -41px;
  }
  .c-paginator .c-paginator__forward svg {
    transition: all 0.25s;
    margin-right: 24px;
  }
  .c-paginator .c-paginator__pages {
    display: flex;
  }
  .c-paginator .c-paginator__pages .c-paginator__pages--active {
    cursor: default;
    color: #A7ADB4;
    text-decoration: none;
  }
  .c-paginator .c-paginator__pages a {
    color: #158443;
    text-decoration: underline;
    margin: 0 8px;
  }
  .c-paginator--no-hover a:hover {
    background: none;
  }
  .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;
  }
  .c-notification-badge img {
    min-height: 120px;
    width: 120px;
  }
  .c-notification-badge p {
    font-family: "Bitter", serif;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.125rem; /* 18/16 */
  }
  .c-notification-badge a {
    color: #6E7687;
    font-size: 0.875rem; /* 14/16 */
  }
  .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;
  }
  .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;
  }
  .c-form__info-cta a {
    white-space: nowrap;
    color: #158443;
  }
  .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;
  }
  .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;
  }
  .c-login-form__header {
    display: flex;
    align-items: baseline;
  }
  .c-login-form__header h3 {
    flex-grow: 1;
  }
  .c-login-form__form .form__validation--error {
    position: relative;
    top: -12px;
  }
  .c-login-form__terms {
    font-size: 0.875rem; /* 14/16 */
    color: #959DA5;
  }
  .c-login-form__terms a {
    color: #158443;
  }
  .c-login-form__copy {
    font-size: 0.9375rem; /* 15/16 */
    color: #959DA5;
  }
  .c-login-form__links {
    font-family: "Bitter", serif;
    font-weight: 500;
    font-size: 0.9375rem; /* 15/16 */
    color: #158443;
    text-decoration: underline;
    cursor: pointer;
  }
  .c-login-form__newsletter .form__validation--error {
    top: 3px;
    left: 32px;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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(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(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(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;
  }
  .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;
  }
  .c-box-list--black li {
    color: #333333;
    font-weight: 400;
  }
  .c-box-list--black li.c-box-list__item--active:before {
    background-image: url(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;
  }
  .c-box-list--checked li {
    cursor: inherit;
  }
  .c-box-list--checked li:before {
    background-image: url(checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
    background-size: cover;
    border: 2px solid #ffffff;
  }
  .l-list-item-wrapper:first-child {
    margin-top: 30px;
  }
  .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(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;
  }
  .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;
  }
  .c-item-list-icon--arrow-right li:before {
    background-image: url(arrow-right--clear-green-40db3118f25edfdd310ed4a1c7c26857ec61928061ed7b77ef9d64b716bae0ed.png);
    background-size: cover;
  }
  .c-item-list-icon--checkmark li:before {
    background-image: url(checkmark--clear-green-e7cb550028b55997c9619c790965bfe6f3cbd9a1b6f6593a4c8e7d9cd9cbdb84.png);
    background-size: cover;
  }
  .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;
  }
  .c-list-filter--dark .c-list-filter__label {
    color: #ffffff;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-admin-draper > div {
    display: flex;
    flex-wrap: wrap;
  }
  .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;
  }
  .c-admin-draper .c-admin-draper__copy a {
    margin-top: 30px;
    align-self: flex-end;
  }
  .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%;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-banner-draper--ios {
    background-color: #F64E1A;
  }
  .c-banner-draper--ios:before {
    background-image: url(ios-pattern%402x-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;
  }
  .c-banner-draper--android {
    background-image: linear-gradient(to right, #0575e6, #00a0ff, #00c3f4, #00deb5, #00f260);
  }
  .c-banner-draper--android:before {
    background-image: url(android-pattern%402x-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;
  }
  .c-banner-draper--server-side-swift {
    background-color: #363B44;
  }
  .c-banner-draper--server-side-swift:before {
    background-image: url(server-side-swift-pattern%402x-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;
  }
  .c-banner-draper--unity {
    background-color: #194A85;
  }
  .c-banner-draper--unity:before {
    background-image: url(unity-pattern%402x-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;
  }
  .c-banner-draper--flutter {
    background-color: #096ABB;
  }
  .c-banner-draper--flutter:before {
    background-image: url(flutter-pattern%402x-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;
  }
  .c-banner-draper--unreal-engine {
    background-color: #79376C;
  }
  .c-banner-draper--unreal-engine:before {
    background-image: url(unreal-engine-pattern%402x-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;
  }
  .c-banner-draper--macos {
    background-color: #41AEA4;
  }
  .c-banner-draper--macos:before {
    background-image: url(macos-pattern%402x-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;
  }
  .c-banner-draper--archive {
    background-color: #333333;
  }
  .c-banner-draper--archive:before {
    background-image: url(archive-pattern%402x-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;
  }
  .c-banner-draper--podcast {
    background-color: #333333;
  }
  .c-banner-draper--podcast:before {
    background-image: url(podcast-pattern%402x-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;
  }
  .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;
  }
  .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(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;
  }
  .c-banner-draper--account-list {
    padding-bottom: 60px;
  }
  .c-banner-draper--account-list:before {
    background-image: url(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;
  }
  .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(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;
  }
  .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%;
  }
  .c-banner-draper--pro-subscription {
    background-color: #157CB8 !important;
  }
  .c-banner-draper--pro-subscription h2, .c-banner-draper--pro-subscription p {
    color: #ffffff !important;
  }
  .c-banner-draper--pro-subscription-wide:before {
    content: "";
    position: absolute;
    left: -100px;
    bottom: 0;
    top: auto;
    width: 340px;
    height: 210px;
    background-image: url(illustration-pro-subscription-items-banner--left%402x-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(illustration-pro-subscription-items-banner--right%402x-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;
  }
  .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(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(illustration-android-path-2-926e39e35948a8c71e63e5488048173dd116bd1c8ba55d3f7cfbf861ff732e6a.svg);
    background-size: cover;
  }
  .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(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(illustration-ios-path-1-b38bf847db51e4c39d55d606c9068dc264153f3cb6cd806b5d0f7f111219dbc4.svg);
    background-size: cover;
  }
  .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(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(illustration-flutter-path-2-b50f3988f24008897d0f68918cb8c4b6cd1cbdfac5f777776dfe45e3aa35781e.svg);
    background-size: cover;
  }
  .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(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(illustration-unity-path-2-4688f78d49e6a90c49bb8125a20b9c2c9086b559322c44197dfe0669a13ecdb9.svg);
    background-size: cover;
  }
  .c-banner-draper--black-friday-2020 h2, .c-banner-draper--black-friday-2020 p {
    color: #ffffff !important;
  }
  .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;
  }
  .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;
  }
  .c-banner-draper-sticky--account {
    background: #41AEA4;
    background-image: url(flare-relate-pattern--dark-teal-ae0808f8dec26eea570712492e5bbdfe208f598016b1be055ba108966a73eb5f.png);
    background-size: cover;
  }
  .c-banner-draper-sticky--newsletter {
    background: #333333;
    background-image: url(geometric-relate-pattern--dark-e78f59cb4699e24d8f72a0d8d6d16483af21c3fd818ce1b9c417a5cc8733f466.png);
    background-size: cover;
  }
  .c-banner-draper-sticky--newsletter img {
    max-width: 120px !important;
    top: 20px;
  }
  .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;
  }
  .c-banner-draper-sticky--subscribe img {
    max-width: 180px !important;
    margin-right: 20px !important;
    margin-left: -30px !important;
    top: 0;
  }
  .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;
  }
  .c-banner-draper-sticky--pro-subscribe img {
    max-width: 150px !important;
    margin-right: 20px !important;
    margin-left: -30px !important;
    top: 10px;
  }
  .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;
  }
  .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;
  }
  .c-banner-draper-sticky--obfuscate img {
    max-width: 170px !important;
  }
  .c-banner-draper-sticky--obfuscate .l-obfuscated-text {
    display: inline-block;
    width: 104px;
    text-align: center;
    background: #F4C3C3;
  }
  .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(black-friday-2020-banner-background-left-green%402x-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(black-friday-2020-banner-background-right-green%402x-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;
  }
  .c-price-card--small {
    width: 270px;
  }
  .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;
  }
  .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(black-friday-2020-top-banner-background-left-green%402x-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(black-friday-2020-top-banner-background-right-green%402x-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;
  }
  .c-banner-draper-top--spring-ahead-2021 {
    background-color: #FDEA89 !important;
    background-image: url(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;
  }
  .c-banner-draper-top--spring-ahead-2021 h2, .c-banner-draper-top--spring-ahead-2021 p {
    color: #333333 !important;
  }
  .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;
  }
  .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;
  }
  .c-banner-draper-sticky--spring-ahead-2021 img {
    max-width: 216px !important;
  }
  .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;
  }
  .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;
  }
  .c-banner-draper--community .c-banner-draper__copy h2, .c-banner-draper--community .c-banner-draper__copy p {
    margin-top: 9px;
  }
  .c-banner-draper--community .c-banner-draper__copy p {
    color: #6E7687;
  }
  .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;
  }
  .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 */
  }
  .c-banner-draper--community-width + div > div .l-border-bottom {
    border-bottom: none;
  }
  .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 */
  }
  .c-banner-draper--community-intersticial > div .c-banner-draper__copy p {
    color: #6E7687;
    margin-top: 12px;
  }
  .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%;
  }
  .c-banner-draper--community-connect .c-banner-draper__art--left {
    background-image: url(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(community-connect-right-74345afbd0f42e2fed5a8e4f8d4ac0d8c3decf3ca3cb59f1a4c151e3a14bed26.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .c-banner-draper--community-resources .c-banner-draper__art--left {
    height: 228px !important;
    background-image: url(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(community-people-right-033285e844670c7bf19a5ae4560402289e11c53111ea950344d424598c83b019.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .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;
  }
  .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;
  }
  .c-modal .c-modal__copy .c-modal__description p:first-child {
    margin-top: 0;
  }
  .c-modal .c-modal__copy .c-modal__description--scroll {
    max-height: 240px;
    overflow: scroll;
    border-bottom: 1px solid #EFF3F6;
    padding-bottom: 24px;
  }
  .c-modal .c-modal__copy .c-modal__form .c-modal__checkbox {
    display: inline-block;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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%;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-modal--video-tutorial .o-button-video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
  }
  .c-modal--video-tutorial .c-modal__player-container:before {
    display: none;
  }
  .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;
  }
  @keyframes shimmer {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
  .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;
  }
  .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;
  }
  .o-skeleton__graphic--small {
    width: 54px;
    height: 54px;
  }
  .o-skeleton__graphic--large {
    width: 90px;
    height: 90px;
  }
  .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;
  }
  .o-skeleton__text--small {
    width: 180px;
  }
  .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;
  }
  .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;
  }
  .o-skeleton-sidebar__meta--small {
    width: 30px;
    margin-top: 9px;
  }
  .o-skeleton-sidebar__meta--large {
    width: 180px;
  }
  .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;
  }
  .o-skeleton-card--small {
    padding: 24px 24px;
  }
  .o-skeleton-card--large {
    padding-bottom: 45px;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-tutorial-item .o-button--mark-as-complete button:focus {
    outline: none;
  }
  .c-tutorial-item .o-badge-tutorial--locked, .c-tutorial-item .o-badge-tutorial--recording {
    display: none;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__parent {
    display: none;
  }
  .c-tutorial-item .c-tutorial-item__text > span {
    display: block;
    width: 100%;
    font-size: 0.9375rem;
  }
  .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 */
  }
  .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;
  }
  .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;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__continue {
    display: none;
    margin-top: 8px;
  }
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__platform-long {
    display: none;
  }
  .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;
  }
  .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;
  }
  .c-tutorial-item .c-tutorial-item__text .o-badge {
    width: auto;
    font-size: 0.6875rem; /* 11/16 */
    margin-top: 10px;
    display: none;
  }
  .c-tutorial-item .c-tutorial-item__text .o-badge--soon {
    display: none;
  }
  .c-tutorial-item .c-tutorial-item__lower {
    display: none;
  }
  .c-tutorial-item .c-tutorial-item__number-badge .o-badge-tutorial--checkmark {
    display: none;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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);
  }
  .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;
  }
  .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;
  }
  .c-tutorial--card .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__platform {
    display: none;
  }
  .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;
  }
  .c-tutorial--card .c-tutorial-item .o-badge-tutorial {
    position: absolute;
    left: 12px;
    top: 132px;
  }
  .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;
  }
  .c-tutorial--list .c-tutorial-item .o-button--bookmark {
    display: inline-block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 12px;
  }
  .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;
  }
  .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);
  }
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art img.c-tutorial-item__art-image--primary {
    display: none;
  }
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art img.c-tutorial-item__art-image--alternate {
    display: flex;
  }
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__complete {
    display: none;
  }
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art--product img {
    transform: scale(1) !important;
  }
  .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;
  }
  .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 */
  }
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__text-upper-meta {
    order: 2;
    margin-top: 6px;
  }
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__description {
    font-size: 0.875rem; /* 14/16 */
    margin-top: 0;
    padding-right: 30px;
  }
  .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;
  }
  .c-tutorial--list-style-basic .c-tutorial-item--in-progress {
    border-bottom: none;
  }
  .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;
  }
  .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;
  }
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art .c-tutorial-item__art-image--primary {
    display: none;
  }
  .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);
  }
  .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;
  }
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper-meta {
    display: none;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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);
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-tutorial--list-progress .c-tutorial-item__platform-long {
    display: none !important;
  }
  .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 */
  }
  .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%;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-tutorial--list.c-tutorial--number .c-tutorial-item.c-tutorial-item--complete:before {
    background: #158443;
  }
  .c-tutorial--list.c-tutorial--number .o-badge-tutorial {
    position: absolute;
    top: 36px;
    left: 0;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-tutorial-episode .o-badge {
    margin-left: 12px;
    position: relative;
    top: 1px;
  }
  .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;
  }
  .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;
  }
  .c-tutorial-episode__number-badge .o-badge-tutorial--checkmark, .c-tutorial-episode__number-badge .o-badge-tutorial--locked {
    display: none;
  }
  .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;
  }
  .c-tutorial-episode--locked .o-badge-tutorial {
    display: none;
  }
  .c-tutorial-episode--locked .o-badge-tutorial--locked {
    display: flex;
  }
  .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;
  }
  .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%;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-tutorial-item--learning-path .c-tutorial-item__continue .c-tutorial-item__complete-text {
    position: relative;
    top: -1px;
  }
  .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;
  }
  .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;
  }
  .c-tutorial--dark .c-tutorial-item .c-tutorial-item__metadata {
    color: #A7ADB4 !important;
  }
  .c-tutorial--dark .c-tutorial-item .c-tutorial-item__metadata-short {
    color: #A7ADB4 !important;
  }
  .c-tutorial--dark .c-tutorial-item .c-tutorial-item__description, .c-tutorial--dark .c-tutorial-item .c-tutorial-item__platform {
    color: #A7ADB4 !important;
  }
  .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;
  }
  .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;
  }
  .c-tutorial--mason-mini .c-tutorial-item__metadata {
    display: block !important;
  }
  .c-tutorial--mason-mini .c-tutorial-item__metadata-short {
    color: #333333;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-tutorial--editable-books .c-tutorial-item__actions--book {
    display: block;
  }
  .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;
  }
  .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;
  }
  .c-tutorial--reduced.c-tutorial--mason-small .c-tutorial-item .c-tutorial-item__metadata-short {
    display: none;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  div.vimeo-player > div[style] {
    padding: 0 0 0 0 !important;
    position: inherit !important;
  }
  .c-video-player__lessons:hover {
    overflow-y: auto;
  }
  .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;
  }
  .c-video-player__lessons .o-button-sidebar--close {
    display: none;
  }
  .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);
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list--open {
    display: block;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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);
  }
  .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;
  }
  .c-video-player__next .c-video-player__next-wrapper > h3 {
    font-size: 1.5rem; /* 24/16 */
  }
  .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 */
  }
  .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;
  }
  .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;
  }
  .c-video-player--nav .c-video-player__paywall-options {
    display: flex;
    flex-wrap: wrap;
    max-width: 600px;
    padding: 0 20px;
    flex-direction: column-reverse;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-video-player__paywall--black-friday--mod-spring {
    background-image: url(spring-fling-video-background%402x-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(free-weekend-video-background%402x-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 */
  }
  .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;
  }
  .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;
  }
  .c-video-information .c-written-tutorial__content ol {
    list-style: decimal;
  }
  .c-video-information .c-written-tutorial__content a {
    color: #158443;
    text-decoration: underline;
  }
  .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(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;
  }
  .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;
  }
  .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;
  }
  .c-video-player--cinema .l-svg-video-mode, .c-video-player--cinema .o-tooltip--default {
    display: block !important;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-video-player__notes ol {
    padding-left: 24px;
  }
  .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;
  }
  .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;
  }
  .c-video-player__transcripts p,
  .c-video-player__transcripts ul {
    color: #CED5DE;
    margin-bottom: 18px;
    font-size: 15px;
  }
  .c-video-player__transcripts p,
  .c-video-player__transcripts ul,
  .c-video-player__transcripts ol {
    position: relative;
  }
  .c-video-player__transcripts p {
    padding-left: 3px;
    margin-right: 56px;
  }
  .c-video-player__transcripts h2 {
    display: none;
  }
  .c-video-player__transcripts pre {
    display: none;
  }
  .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;
  }
  .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);
  }
  .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;
  }
  .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(dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
    background-size: cover;
  }
  .c-video-player__notes--light .o-button-code:hover {
    background: #647388;
    background-image: url(dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
    background-size: cover;
  }
  .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;
  }
  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 */
  }
  article.c-written-tutorial header .o-button--green {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  article.c-written-tutorial .c-written-tutorial__content ul li {
    list-style: square;
  }
  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;
  }
  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;
  }
  article.c-written-tutorial .c-written-tutorial__content div.note a {
    color: #158443;
  }
  article.c-written-tutorial .c-written-tutorial__content pre, article.c-written-tutorial .c-written-tutorial__content code {
    word-wrap: break-word;
  }
  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;
  }
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler pre {
    margin-left: 0px;
    width: 100%;
  }
  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;
  }
  article.c-written-tutorial .c-written-tutorial__content .bordered {
    border: 0.75rem solid #DFE7F0;
    border-radius: 0.5625rem;
  }
  article.c-written-tutorial .c-written-tutorial__content .wp-caption {
    margin: 36px auto;
  }
  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%;
  }
  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;
  }
  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;
  }
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer a {
    color: #158443;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  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(dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
    background-size: cover;
  }
  .l-written-tutorial--light .o-button-code:hover {
    background: #647388;
    background-image: url(dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
    background-size: cover;
  }
  .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;
  }
  .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;
  }
  .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(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;
  }
  .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;
  }
  .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;
  }
  .c-book-chapter pre code {
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }
  .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;
  }
  .c-book-chapter blockquote em {
    font-style: italic;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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%;
  }
  .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 {
  .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;
  }
  .c-global-search .c-global-search__recommendations h3 {
    font-size: 1.3125rem; /* 21/16 */
    color: #ffffff;
    margin-bottom: 21px;
  }
  .c-global-search .c-global-search__recommendations .c-tutorial--dark .c-tutorial-item a {
    background: #3B4048 !important;
    border-radius: 0.5625rem !important;
  }
  .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%;
  }
  .c-global-search .c-global-search__input .c-global-search__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    overflow: hidden;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-library-filters .c-video-player__lesson-list {
    margin-bottom: 0 !important;
  }
  .c-library-filters .c-video-player__lesson-list--open {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .c-library-filters .c-video-player__lesson-list-dropdown--open {
    display: block !important;
  }
  .c-library-filters #library-query {
    margin-bottom: 0;
  }
  .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;
  }
  .c-library-filters .c-library-filters__key-controls .o-button-apply {
    display: none;
  }
  .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;
  }
  .c-library-filters .c-library-filters__added {
    margin-top: 18px;
  }
  .c-library-filters .c-library-filters__added span.o-tag {
    margin-right: 5px;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-library-filters .dropdown-menu li.active a {
    background: none;
  }
  .c-library-filters .dropdown-menu li.active a:before {
    background: #158443;
    background-image: url(checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
    background-size: cover;
    border: none;
  }
  .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;
  }
  .c-library-filters--open .c-library-filters__key-controls {
    display: flex;
    width: 380px;
  }
  .c-library-filters--open .o-button__label--close {
    display: none;
  }
  .c-library-filters--open .o-button__label--open {
    display: block;
  }
  .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;
  }
  .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;
  }
  .l-library.l-background--black .c-library-controls button {
    color: #ffffff;
  }
  .l-library.l-background--black .c-library-controls button svg {
    fill: #ffffff;
  }
  .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;
  }
  .c-search__loading .c-search__loading-animate img.a-file-rotate--3 {
    top: 75px;
    left: 85px;
    animation-duration: 3.1s;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-global-search--book .c-paginator {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    border-bottom: 1px solid #DBDDE0;
  }
  .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;
  }
  .c-content-author a {
    color: #333333;
    text-decoration: none;
  }
  .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;
  }
  .c-content-author .c-content-author__title--large {
    font-size: 1.125rem; /* 18/16 */
    margin-top: 0 !important;
  }
  .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;
  }
  .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;
  }
  .c-content-author .o-badge {
    display: inline-block;
    margin-top: 12px;
  }
  .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;
  }
  .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;
  }
  .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(punctutation-a2544368f2caec4bc5be734142714d92543038d9cf6bf95e0a06680be8f1629a.png);
    background-size: cover;
  }
  .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;
  }
  .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;
  }
  .c-profile__empty {
    text-align: center;
  }
  .c-profile__empty img {
    width: 320px;
  }
  .c-profile__contributions .c-tutorial-item__in-progress, .c-profile__contributions .c-tutorial-item__complete {
    display: none !important;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-empty-state--loader .c-search__loading {
    margin-left: -20px;
  }
  .c-empty-state--loader .c-search__loading-animate {
    margin-top: 40px;
  }
  .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;
  }
  .c-empty-state--suggestions h3 {
    font-size: 1.75rem; /* 32/16 */
  }
  .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;
  }
  .c-empty-state--books img {
    width: 120px;
  }
  .c-empty-state--articles img {
    width: 130px;
  }
  .c-empty-state--announcements img {
    width: 66px;
  }
  .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;
  }
  .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(punctutation-a2544368f2caec4bc5be734142714d92543038d9cf6bf95e0a06680be8f1629a.png);
    background-size: cover;
    position: absolute;
    top: -10px;
    left: -10px;
    opacity: 0.25;
    z-index: -1;
  }
  .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;
  }
  .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);
  }
  .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;
  }
  .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;
  }
  .c-testimonial--twitter svg {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 22px;
    height: 18px;
  }
  .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%;
  }
  .c-card-category .c-card-category__artwork .o-badge {
    position: absolute;
    top: 12px;
    left: 12px;
  }
  .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%;
  }
  .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%);
  }
  .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(checkmark--green-1e096ae45df68feb9ffcc548c7c6510565f7f0d4098690d0121fe6739a2a7e76.png);
    background-size: cover;
  }
  .c-plan a, .c-plan .o-button {
    position: absolute;
    bottom: 36px;
    transform: translateX(-50%);
  }
  .c-plan .o-button--primary {
    bottom: 84px;
  }
  .c-plan .o-button--secondary {
    bottom: 36px;
    text-decoration: underline;
    font-size: 0.9375rem; /* 15/16 */
    white-space: nowrap;
  }
  .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(checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  }
  .c-plan--emphasis .c-plan__benefits .c-plan__benefits--highlight:before {
    background-image: url(checkmark--blue-18803e2ee06f4c404b6c173497e54fbbb6e251bac81ecc8dfc030657cf775724.png);
  }
  .c-plan--team .c-plan__price-main {
    letter-spacing: -10px !important;
  }
  .c-plan--no-price p {
    height: 222px;
    display: flex;
    align-items: center;
  }
  .c-plan--left {
    border-radius: 0.5625rem 0 0 0.5625rem;
  }
  .c-plan--right {
    border-radius: 0 0.5625rem 0.5625rem 0;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .c-card-platform--ios a:before, .c-card-platform--ios > div:before {
    background-image: url(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;
  }
  .c-card-platform--android a:before, .c-card-platform--android > div:before {
    background-image: url(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;
  }
  .c-card-platform--flutter a:before, .c-card-platform--flutter > div:before {
    background-image: url(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;
  }
  .c-card-platform--server-side-swift a:before, .c-card-platform--server-side-swift > div:before {
    background-image: url(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;
  }
  .c-card-platform--unity a:before, .c-card-platform--unity > div:before {
    background-image: url(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;
  }
  .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;
  }
  .c-card-option--ios a {
    background-image: url(onboarding-apple-icon-4e20e750ef237d1182f3dcab6de9e7e555da2dba4bacab0afb4e4a3c3a261242.svg);
    background-position: center calc(50% - 30px);
    background-size: 60px 65px;
    background-repeat: no-repeat;
  }
  .c-card-option--android {
    background-image: url(onboarding-android-icon-1cf3c1cd3080f104965c5771d36b6c69b2a14403320987914d1bf2ddcb56c783.svg);
    background-position: center calc(50% - 30px);
    background-size: 74px 50px;
    background-repeat: no-repeat;
  }
  .c-card-option--flutter {
    background-image: url(onboarding-flutter-icon-bd399909e58361c320f651baafe2990a2566358becca14deaa681ced949bd9b8.svg);
    background-position: center calc(50% - 30px);
    background-size: 65px 69px;
    background-repeat: no-repeat;
  }
  .c-card-option--server-side-swift {
    background-image: url(onboarding-sss-icon-cf09daa9cd8027ec50a34196dc0f971c140b9fb693da1839c1d0f38ebeab11de.svg);
    background-position: center calc(50% - 30px);
    background-size: 77px 62px;
    background-repeat: no-repeat;
  }
  .c-card-option--gametech {
    background-image: url(onboarding-unity-icon-1f53dd0e9ffa147bdddb4f7fe6ccd67903d178a4215855a314fdfb77b57d142b.svg);
    background-position: center calc(50% - 30px);
    background-size: 68px 69px;
    background-repeat: no-repeat;
  }
  .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%;
  }
  .c-card-simple--notebook .c-card-simple__lower svg {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 18px;
    height: 17px;
    fill: #959DA5;
  }
  .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;
  }
  .c-card-simple--wrap-normal .c-card-simple__lower .c-card-simple__meta {
    white-space: normal;
  }
  .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;
  }
  .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;
  }
  .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;
  }
  .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(question-30b4ec22034594c5246dad2174ba2e3efef37b7ca31c34a6243e25c59fe3392d.png);
    background-size: cover;
    left: -50px;
    border-radius: 0.5625rem;
  }
  .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(loopy-arrow-ed620ece85c7319eebf154f3c1f702066b68d9d73799cce24e35b44adc0ecafd.png);
    background-size: cover;
    top: -4px;
    left: -50px;
  }
  .c-faq .c-faq__item p a {
    color: #158443;
  }
  .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;
  }
  .c-faq .c-faq__item ul li {
    list-style: square;
  }
  .c-faq .c-faq__item span.o-badge {
    display: inline-block;
    margin-top: 18px;
  }
  .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(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;
  }
  .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;
  }
  .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;
  }
  .c-review-module__score {
    line-height: 0.8;
    margin-right: 5px;
    letter-spacing: -2px;
    font-family: "Bitter", serif;
    font-weight: bold;
  }
  .c-review-module__illustration {
    width: 250px;
    height: 113px;
    background-image: url(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;
  }
  .c-review-module__errors--top {
    position: absolute;
    top: -24px;
    left: 0;
  }
  .c-review-module__errors--inline {
    position: relative;
    top: 50%;
    left: 20px;
  }
  .c-review-module__errors--bottom {
    position: absolute;
    bottom: -74px;
    right: 0;
  }
  .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;
  }
  .c-rating-count span {
    color: #333333;
  }
  .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;
  }
  .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;
  }
  #current-user-rating .c-user-review {
    margin-bottom: 36px !important;
  }
  .c-review-module__questions {
    animation: a-slight-fade-in-up 0.25s;
    position: relative;
  }
  .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;
  }
  .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;
  }
  .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);
  }
  .c-notebook h3 {
    padding-right: 100px;
    line-height: 1.125;
  }
  .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 {
    font-size: 1rem;
  }
  .c-notebook .c-notebook__demo p mark {
    background: #F4C3C3;
    color: #333333;
  }
  .c-notebook .c-notebook__demo .o-fragment--tooltip {
    top: -64px;
  }
  .c-notebook .c-notebook__entry {
    padding-left: 18px;
    padding-bottom: 15px;
    margin-top: 15px;
    position: relative;
    border-bottom: 1px solid #DBDDE0;
  }
  .c-notebook .c-notebook__entry:before {
    content: "";
    width: 3px;
    height: calc(100% - 15px);
    position: absolute;
    left: 0;
    top: 0;
    background: #FFE242;
    border-radius: 100px;
  }
  .c-notebook .c-notebook__entry:last-child {
    border-bottom: 0;
  }
  .c-notebook .c-notebook__entry a {
    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: 14px;
    font-weight: 600;
    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.9375rem; /* 15/16 */
    margin-top: 8px;
  }
  .c-notebook .c-notebook__entry .c-notebook__entry-text mark {
    color: #333333;
    background-color: transparent;
  }
  .c-notebook .c-notebook__entry .c-notebook__entry-note {
    font-size: 14px;
    font-style: italic;
    margin-top: 9px;
  }
  .c-notebook .c-notebook__entry .c-notebook__entry-note .o-textarea {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.875rem; /* 14/16 */
  }
  .c-notebook .c-notebook__entry .c-notebook__entry-note span {
    color: #6E7687;
  }
  .c-notebook .c-notebook__entry.c-notebook__entry--yellow:before {
    background: #FFE242;
  }
  .c-notebook .c-notebook__entry.c-notebook__entry--orange:before {
    background: #FBBC5D;
  }
  .c-notebook .c-notebook__entry.c-notebook__entry--red:before {
    background: #E58A8A;
  }
  .c-notebook .c-notebook__entry.c-notebook__entry--purple:before {
    background: #A0AEF2;
  }
  .c-notebook .c-notebook__entry.c-notebook__entry--blue:before {
    background: #85DDE9;
  }
  .c-notebook .c-notebook__entry.c-notebook__entry--green:before {
    background: #90DE9C;
  }
  .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: #333333;
    background-color: #FFEA75;
  }
  .o-fragment .o-fragment--annotation {
    cursor: pointer;
  }
  .o-fragment .o-fragment--annotation-note {
    border-bottom: 3px solid #EBC700;
  }
  .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;
  }
  .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: #333333;
    width: 100%;
    min-width: 270px;
    min-height: 100px;
    font-size: 0.9375rem; /* 15/16 */
    resize: none;
  }
  .o-fragment .o-fragment--tooltip-with-note textarea:focus {
    box-shadow: none;
    outline: 0;
  }
  .o-fragment .o-fragment--tooltip-with-note textarea::placeholder {
    color: #6E7687 !important;
  }
  .o-fragment .o-fragment--tooltip-with-note:after {
    display: none;
  }
  .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: #6E7687;
  }
  mark.o-fragment--highlighter-yellow {
    background: #FFEA75;
  }
  mark.o-fragment--highlighter-yellow.o-fragment--annotation-note {
    border-bottom: 3px solid #EBC700;
  }
  mark.o-fragment--highlighter-orange {
    background: #FBCF8E;
  }
  mark.o-fragment--highlighter-orange.o-fragment--annotation-note {
    border-bottom: 3px solid #F99A0C;
  }
  mark.o-fragment--highlighter-red {
    background: #F4C3C3;
  }
  mark.o-fragment--highlighter-red.o-fragment--annotation-note {
    border-bottom: 3px solid #E58A8A;
  }
  mark.o-fragment--highlighter-purple {
    background: #CECEF8;
  }
  mark.o-fragment--highlighter-purple.o-fragment--annotation-note {
    border-bottom: 3px solid #A0AEF2;
  }
  mark.o-fragment--highlighter-blue {
    background: #B4E3E9;
  }
  mark.o-fragment--highlighter-blue.o-fragment--annotation-note {
    border-bottom: 3px solid #5BD1E1;
  }
  mark.o-fragment--highlighter-green {
    background: #C3F0CA;
  }
  mark.o-fragment--highlighter-green.o-fragment--annotation-note {
    border-bottom: 3px solid #90DE9C;
  }
  .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;
  }
  .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;
  }
  .c-reading-experience-selector > div {
    margin-top: 20px;
  }
  .c-reading-experience-selector > div:first-child {
    margin-top: 0;
  }
  .c-reading-experience-selector .l-width-14 {
    width: 14px !important;
  }
  .c-reading-experience-selector .l-width-21 {
    width: 21px !important;
  }
  .c-reading-experience-selector .o-dropdown-menu__icon--night-mode {
    display: none;
  }
  .c-reading-experience-selector .o-dropdown-menu__icon--night-mode + a {
    font-weight: 600;
    font-size: 0.9375rem; /* 15/16 */
    letter-spacing: 0;
  }
  .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;
  }
  .c-reading-experience-selector .c-reading-experience-selector__range-wrapper {
    display: flex;
    align-content: center;
  }
  .c-reading-experience-selector .c-reading-experience-selector__range-wrapper > span {
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .c-reading-experience-selector .c-reading-experience-selector__range {
    -webkit-appearance: none;
    width: 100%;
    margin: 0 9px;
  }
  .c-reading-experience-selector .c-reading-experience-selector__radio {
    -webkit-appearance: radio;
  }
  .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;
  }
  .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;
  }
  .c-reading-experience-selector .c-reading-experience-selector__checkbox input {
    opacity: 0;
    cursor: pointer;
  }
  .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;
  }
  .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: #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;
  }
  .c-reading-experience-selector__range::-webkit-slider-runnable-track {
    background: rgba(167, 173, 180, 0.5);
    height: 2px;
  }
  .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;
  }
  .c-reading-experience-selector__range::-moz-range-track {
    background: rgba(167, 173, 180, 0.5);
    height: 2px;
  }
  .c-reading-experience-selector__range::-ms-track {
    background: rgba(167, 173, 180, 0.5);
    height: 2px;
  }
  .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);
  }
  .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);
  }
  .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);
  }
  .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;
  }
  .c-drawer__overlay {
    background-color: #333333;
    opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
  }
  .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);
  }
  .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;
  }
  .u-show--flex {
    display: flex;
  }
  .u-show {
    display: block !important;
  }
  .u-hide {
    display: none;
  }
  button:disabled .u-hide-disabled {
    display: none;
  }
  button:enabled .u-show-disabled {
    display: none;
  }
  .u-invisible {
    visibility: hidden;
  }
  .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;
  }
  .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%;
  }
  .l-text-size-80pc {
    font-size: 80%;
  }
  .l-text-size-100pc {
    font-size: 100%;
  }
  .l-text-size-120pc {
    font-size: 120%;
  }
  .l-text-size-140pc {
    font-size: 140%;
  }
  .l-prefers-color-scheme--dark .c-tutorial-item .c-tutorial-item__completable {
    color: #ffffff;
  }
  .c-tutorial-item .c-tutorial-item__completable {
    display: inline;
  }
  .c-tutorial-item .c-tutorial-item__clearable {
    display: none;
  }
  .c-tutorial-item--complete .c-tutorial-item__completable {
    display: none !important;
  }
  .c-tutorial-item--complete .c-tutorial-item__clearable {
    display: inline !important;
  }
  .turbo-progress-bar {
    z-index: 1000000;
    height: 4px;
    background-color: #158443;
  }
  .l-box-shadow {
    box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.075);
  }
  .l-padding-right-12 {
    padding-right: 12px;
  }
  .l-padding-right-20 {
    padding-right: 20px;
  }
  .l-margin-right-20 {
    margin-right: 20px;
  }
  .l-line-height-135 {
    line-height: 1.35;
  }
  .l-flex-direction-column {
    display: flex;
    flex-direction: column;
  }
  .l-display {
    display: inline-block;
    width: 120px;
  }
  .l-display-large {
    display: inline-block;
    width: 150px;
  }
  .l-display-extra-large {
    display: inline-block;
    width: 200px;
  }
  .o-button-color {
    background-color: #e9ebec;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.875rem;
  }
  .l-link:link {
    text-decoration: none;
  }
  .l-tutorial--component-p p {
    font-size: 0.875rem;
  }
  .l-padding-top-20 {
    padding-top: 20px;
  }
  .l-margin-left-40 {
    margin-left: 40px;
  }
  .l-margin-left-99 {
    margin-left: 99px;
  }
  .c-tutorial--all-padding .c-tutorial-item > a, .c-tutorial--all-padding .c-tutorial-item > div {
    padding: 21px;
    border-radius: 0.5625rem;
  }
  .l-community-image {
    display: block;
    height: 250px;
  }
  .l-community-image--right {
    background-image: url(community-connect-right-fe58d024caa00d2b9c02d522c8146885f5fa75cf97062c09ebc10fbe3efd972a.png);
    background-repeat: no-repeat;
  }
  .bg-transcript--highlighted {
    background: #435E3E;
  }
  .bg-transcript--highlighted-typography {
    font-style: normal;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 22px;
    color: #DBDDE0;
  }
  .bg-transcript--highlighted--bubble {
    background: #158443;
  }
  .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;
  }
  #Arrow [id^=Tip] {
    fill: #ffffff;
  }
  [id^=Arrow_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowGrey [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowGrey_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowGreen [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowGreen_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowTurquoise [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowTurquoise_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowLightBlue [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowLightBlue_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowDarkBlue [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowDarkBlue_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowPurple [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowPurple_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowPink [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowPink_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowRed [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowRed_] [id^=Tip] {
    fill: #ffffff;
  }
  #ArrowYellow [id^=Tip] {
    fill: #ffffff;
  }
  [id^=ArrowYellow_] [id^=Tip] {
    fill: #ffffff;
  }
  .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;
  }
  .hljs-comment,
  .hljs-quote {
    color: #999999;
  }
  .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;
  }
  .hljs-number,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-literal,
  .hljs-type,
  .hljs-params {
    color: #F08D49;
  }
  .hljs-class .hljs-title {
    color: #F8C555;
  }
  .hljs-string,
  .hljs-symbol,
  .hljs-bullet,
  .hljs-addition {
    color: #7EC699;
  }
  .hljs-meta {
    color: #18B5AB;
  }
  .hljs-function,
  .hljs-section,
  .hljs-title {
    color: #70A2FF;
  }
  .hljs-keyword,
  .hljs-selector-tag {
    color: #CC99CD;
  }
  .hljs {
    display: block;
    padding: 0.5em;
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: bold;
  }
  .light-code .hljs-comment,
  .light-code .hljs-quote {
    color: #918791;
  }
  .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;
  }
  .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;
  }
  .light-code .hljs-class .hljs-title {
    color: #966B19;
  }
  .light-code .hljs-string,
  .light-code .hljs-symbol,
  .light-code .hljs-bullet,
  .light-code .hljs-addition {
    color: #157857;
  }
  .light-code .hljs-meta {
    color: #1D7EAF;
  }
  .light-code .hljs-function,
  .light-code .hljs-section,
  .light-code .hljs-title {
    color: #2E5FFF;
  }
  .light-code .hljs-keyword,
  .light-code .hljs-selector-tag {
    color: #6B2372;
  }
  .light-code .hljs {
    display: block;
    color: #14161E;
  }
  .light-code .hljs-emphasis {
    font-style: italic;
  }
  .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(bitter-1.300-latin_ext-regular-ea79c0f752f7656ce3694dca8312fcb969f83cbe92ca5298c5920ccffb126c5d.woff2) format("woff2"), url(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(bitter-1.002-latin_ext-italic-f4a1b872a93d98cd9f7865f20340e22e936f3634fb142e2372b4598c98def35a.woff2) format("woff2"), url(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(bitter-2.110-latin_ext-700-041b7c53b2f3ed8e2378eaef2841cfad596a7cf6af87bd91f96c9c3b26eec206.woff2) format("woff2"), url(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(ibm-plex-sans-v3-latin-ext_latin-regular-4126890a77928150a6f3be017f23c93df16f56e6940a72f231823ba29d2ee998.woff2) format("woff2"), url(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(ibm-plex-sans-v3-latin-ext_latin-500-04aba1eb9b084332715891b2a764459df24188e66731279bad286bbe1447e5e8.woff2) format("woff2"), url(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(ibm-plex-sans-v3-latin-ext_latin-700-946ed95688a6677fb113b84ac50ef140b42971e05e4da335a3ead116a7c9886b.woff2) format("woff2"), url(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(ibm-plex-serif-v4-latin-ext_latin-regular-e4f826dc262e20e2114e3637d5cab104d4851dee74421c968a6e29d6be2d8b0b.woff2) format("woff2"), url(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(ibm-plex-serif-v4-latin-ext_latin-500-dcab0f62c8194ccb39b97113223f99f294112e0d173b18918c31f3494c203456.woff2) format("woff2"), url(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(ibm-plex-serif-v4-latin-ext_latin-700-ec4d87dbc9136c02618bd6878955a63e40207541c72e5109137d56e28ea65b3f.woff2) format("woff2"), url(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(ibm-plex-mono-v1-500-ba9db195c954509bda2236e0303e51b261b85aef320cb28134ed97155de85914.woff2) format("woff2"), url(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";
    scroll-behavior: smooth;
  }
  *,
  *::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;
  }
  h3 {
    font-size: 1.5rem;
    line-height: 1.35;
  }
  h4 {
    font-size: 1.3125rem; /* 21/16 */
    line-height: 1.35;
  }
  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(relative-book-pro-b7bfc78df53a6103abfdccc4f18a0e919172076cc7dd5c5309a0a94d64f19615.woff2) format("woff2"), url(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(relative-italic-pro-46b2f83e0335d2ee38e8ead7854143fc4642a914ef19d165b7c40027bc649202.woff2) format("woff2"), url(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(relative-medium-pro-efff202b230c17039474726cd59259a03b75292b1a63068ab73f55dbf6a25dcb.woff2) format("woff2"), url(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(relative-medium-italic-pro-78c16e218cb3c8571907fe11721c5701644595e0c27b839dbc8a71053ac64d21.woff2) format("woff2"), url(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(relative-bold-pro-27260fd4e75322220c790f98dd68c0a32a0c0d87bed151a3732089964da11a84.woff2) format("woff2"), url(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(relative-bold-italic-pro-9f0cd55a979f577d9982fa929066340f88f483707128ebc6829136d15ac79ee8.woff2) format("woff2"), url(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(relative-mono-10-pitch-pro-b82594bbdaa88ed3eb167db83ce1e51421fe27906d887c2224bd7f3134d7a9cf.woff2) format("woff2"), url(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 20% opacity */
/*Main Brand Grey at 50% opacity */
/* Brand Light Grey */
/* Light Multi-platform Colour */
/* Dark Multi-platform Colour */
/* Red */
/* Pink */
/* Light Server-Side Swift Colour */
/* Dark Server-Side Swift Colour */
/* Orange */
/* Main Brand Colour */
/* Brand Light Orange */
/* Brand Light Orange with 20% opacity */
/* Brand Dark Orange */
/* Yellow */
/* Light Pro-Gro Colour */
/* Dark Pro-Gro Colour */
/* Green */
/* Light Android Colour */
/* Light Android 50% opacity */
/* Light Android colour equivalent for 50% opacity on dark background */
/* Dark Android Colour */
/* Blue */
/* Light Flutter Colour */
/* Light Flutter 50% opacity */
/* Light Flutter colour equivalent for 50% opacity on dark background */
/* Dark Flutter 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 */
/* White */
/* Transparent */
/* ==========================================================================
  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: 1px 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;
}

/* ==========================================================================
  5. Common Properties for all buttons
========================================================================== */
button:disabled,
.btn-small:disabled,
.btn-header-signin:disabled,
.btn-normalt:disabled,
.btn-normalw:disabled,
.content-switcher .scroll-box .btn-switch:disabled,
.btn-larget:disabled,
.btn-article:disabled,
.btn-largew:disabled,
.btn-xlarge:disabled {
  cursor: not-allowed;
}

.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: 792px;
  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 Sticky
========================================================================== */
.modal-sticky {
  overflow: hidden;
}
.modal-sticky .modal-wrapper {
  height: 80vh;
  overflow: hidden !important;
  padding: 0;
}
.modal-sticky .modal-wrapper .modal-wrapper {
  margin-left: 0;
  margin-right: 0;
  border: none !important;
}
.modal-sticky-fill {
  height: 80px;
  width: 100%;
}
.modal-sticky-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: inherit;
  z-index: 1;
}
.modal-sticky-header .btn-icon {
  position: relative;
  top: 20px;
  left: 24px;
}
.modal-sticky-content {
  overflow-y: auto;
  height: 100%;
  padding: 0 24px 184px;
}
.modal-sticky-content-controls {
  overflow-y: auto;
  height: 100%;
  padding: 0 24px 176px;
}
.modal-sticky-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 24px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  border-top: 1px solid #D7D7D7;
}

/* ==========================================================================
  Modal Tight
========================================================================== */
.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;
}

/* ==========================================================================
  Modal Normal Tight
========================================================================== */
.modal .modal-wrapper.modal-normalt {
  max-width: 594px;
}

/* ==========================================================================
  Full Screen
========================================================================== */
.modal-wrapper__full-screen {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  border-radius: 0;
  background-color: #F7F7F7;
  animation: move-up 250ms ease-in-out forwards;
  transform-origin: top;
}
.modal-wrapper__full-screen header {
  display: grid;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  width: 100%;
  font-size: 1.125rem;
  padding: 0 24px;
  text-align: center;
  white-space: nowrap;
}
@media screen and (min-width: 768px), print {
  .modal-wrapper__full-screen header {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen header {
    display: flex;
    flex-direction: column;
    justify-content: center !important;
  }
}
.modal-wrapper__full-screen header .title {
  justify-self: center;
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen header .title {
    font-size: 1.125rem;
    font-weight: 500;
    max-width: 200px;
  }
}
.modal-wrapper__full-screen header .info {
  justify-self: end;
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen header .info {
    font-size: 0.875rem;
  }
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen header .btn-icon {
    position: absolute;
    top: 20px;
    left: 24px;
  }
}
.modal-wrapper__full-screen .main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 80px);
}
.modal-wrapper__full-screen .main .progress__bar {
  position: absolute;
  z-index: 1;
  height: 2px;
  background-color: #00B87E;
}
.modal-wrapper__full-screen .main > section {
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}
.modal-wrapper__full-screen .main > section > .quiz-ui {
  width: 100%;
  max-width: 594px;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 160px;
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen .main > section > .quiz-ui {
    padding-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen .main > section .quiz-result {
    border: none;
    background-color: transparent;
  }
}
.modal-wrapper__full-screen .main > section .title {
  width: 100%;
}
.modal-wrapper__full-screen .main > section .title > p {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .modal-wrapper__full-screen .main > section .title > p {
    font-size: 1.125rem;
  }
}
.modal-wrapper__full-screen .main > section .title pre {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}
.modal-wrapper__full-screen .main footer {
  position: fixed;
  bottom: 0;
  left: 0;
  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.2);
}
.modal-wrapper__full-screen .main footer > section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 594px;
  margin: 0 auto;
}
.modal-wrapper__full-screen .main footer > section button[disabled] {
  cursor: default;
  background-color: rgba(20, 22, 30, 0.2);
}
.modal-wrapper__full-screen .main footer > section button[disabled]:hover {
  background-color: rgba(20, 22, 30, 0.2);
}
.modal-wrapper__full-screen .main footer > section .submission {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125rem;
  line-height: 1;
  animation: fade-in-up 0.5s ease-in-out forwards;
}
.modal-wrapper__full-screen .main footer > section .submission-icon {
  background-color: #FF5A00;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-wrapper__full-screen .main footer > section .submission-icon.correct {
  background-color: #00B87E;
}
.modal-wrapper__full-screen .main footer > section .submission-icon.incorrect {
  background-color: #E34A4C;
}
.modal-wrapper__full-screen .main footer > section .submission-icon svg {
  width: 12px;
  aspect-ratio: 1/1;
  fill: #FFFFFF;
}
.modal-wrapper__full-screen .main .written-content code {
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
}
.modal-wrapper__full-screen .main .written-content pre {
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 400;
}
.modal-wrapper__full-screen .main .written-content pre code {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border: none;
}

/**
 * Progress bars and meters are part of semantic HTML.
 *
 * 1. Progress bars
 * 2. Indeterminate Progress bars
 *
 */
/**
 * 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);
  }
}
/* ==========================================================================
  5. Move up
========================================================================== */
@keyframes move-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}
/* ==========================================================================
  6. Fade in and up
========================================================================== */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(1%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
.fade-in-up {
  animation: fade-in-up 0.5s ease-in-out forwards;
}

/* ==========================================================================
  7. Shake
========================================================================== */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}
/* ==========================================================================
    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.zebra-rows-table tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}
.elementary-table.zebra-rows-table tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}
.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);
}

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

/* ==========================================================================
7. Navigation — Team library
========================================================================== */
.dropdown.team-library-dropdown details[open] .dropdown-trigger,
.dropdown.team-library-dropdown .dropdown-trigger {
  background-color: #14161E;
}
.dropdown.team-library-dropdown details[open] .dropdown-trigger:hover,
.dropdown.team-library-dropdown .dropdown-trigger:hover {
  background-color: #43454B;
}
.dropdown.team-library-dropdown .dropdown-menu {
  min-width: 200px;
}

.header-enterprise .dropdown.team-library-dropdown details[open] .dropdown-trigger,
.header-enterprise .dropdown.team-library-dropdown .dropdown-trigger {
  background-color: #CE3F00;
}
.header-enterprise .dropdown.team-library-dropdown details[open] .dropdown-trigger:hover,
.header-enterprise .dropdown.team-library-dropdown .dropdown-trigger:hover {
  background-color: #CE3F00;
}

/* ==========================================================================
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: flex;
  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;
  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 {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
  border-color: #FF5A00 !important;
}
.select .select-custom.active {
  border-color: #FF5A00 !important;
}
.select .select-custom.active .select-custom-trigger {
  border-color: #FF5A00 !important;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.select select.select-native {
  padding: 0 24px 0 16px;
}
.select .select-custom-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: inherit;
  cursor: pointer;
  border-radius: 12px;
  padding: 16px;
  padding-right: 24px;
  display: flex;
  justify-content: space-between;
}
.select .select-custom-trigger:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.select .select-custom-trigger svg {
  width: 12px;
  height: 12px;
}
.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: start;
  flex-wrap: wrap;
  gap: 16px;
  cursor: pointer;
  width: 100%;
}
.toggle-button__label .toggle-button__text {
  padding-right: 24px;
  margin-top: 3px;
  flex-basis: calc(100% - 48px);
  max-width: calc(100% - 48px);
}
.toggle-button__label .toggle-button__text > p {
  font-size: 1.125rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .toggle-button__label .toggle-button__text > p {
    font-size: 1rem;
  }
}
.toggle-button__label .toggle-button__description {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: -10px;
  flex-basis: 100%;
  margin-left: 48px;
}
.toggle-button__label pre {
  font-size: 0.8125rem;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-top: 16px;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px;
}
.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: 12px;
  aspect-ratio: 1/1;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  line-height: 0.66;
}
.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:hover {
  border: 2px solid #FF5A00;
  box-shadow: 0 0 0 4px rgba(255, 136, 71, 0.2);
}
.toggle-button__input:checked {
  border-color: #FF5A00 !important;
}
.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(checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  -webkit-mask-image: url(checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  background: #FFFFFF;
}
.toggle-button__input.correct {
  border-color: #00B87E !important;
}
.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(checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  -webkit-mask-image: url(checkmark-b11a0141c8804718d4976466cd51aeccc33e7a4cb27a0210e077120cfddc69d0.svg);
  background: #FFFFFF;
}
.toggle-button__input.incorrect {
  border-color: #E34A4C !important;
  animation: shake 0.75s ease-in-out forwards;
}
.toggle-button__input.incorrect + .toggle-button__label {
  animation: shake 0.75s ease-in-out forwards;
}
.toggle-button__input.incorrect + .toggle-button__label .toggle-button__icon {
  border-radius: 50%;
  background-color: #E34A4C;
  animation: shake 0.75s ease-in-out forwards;
}
.toggle-button__input.incorrect + .toggle-button__label .toggle-button__icon::after {
  content: "";
  mask-image: url(cross-close-78def72d27e4b70333f8a700ac8f084f60bbb829d3580c78ac39f12af44839b8.svg);
  -webkit-mask-image: url(cross-close-78def72d27e4b70333f8a700ac8f084f60bbb829d3580c78ac39f12af44839b8.svg);
  background: #FFFFFF;
}
.toggle-button__input:disabled {
  cursor: default;
}
.toggle-button__input:disabled:hover {
  border: 2px solid #FFFFFF;
  box-shadow: none;
}

/* ==========================================================================
  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-items: center;
  justify-self: center;
  gap: 120px;
  max-width: 990px;
  margin: 120px 24px 0;
}
@media screen and (max-width: 989px) {
  .error {
    margin: 80px 24px 0;
  }
}
@media screen and (max-width: 767px) {
  .error {
    flex-direction: column;
    max-width: 320px;
    gap: 80px;
  }
}
.error h1 {
  font-size: 10rem;
  line-height: 10rem;
  margin-bottom: 24px;
}
@media screen and (max-width: 767px) {
  .error h1 {
    font-size: 5rem;
    line-height: 5rem;
  }
}
.error p {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  .error p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .error-artwork img {
    width: 160px;
  }
}
.error-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .error-info {
    align-items: center;
    text-align: center;
  }
}

/*
 * Notifications are pills or banners with a cross to dismiss
 *
 * 1. Base
 * 2. Top banner
 * 3. Toast
 * 4. Notification with actions
 *
 */
/* ==========================================================================
    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;
}

/* ==========================================================================
    4. Notification with actions
   ========================================================================== */
.notification.toast.notification--actions {
  background-color: #CE3F00;
}
.notification.toast.notification--actions > span:nth-child(2) {
  display: flex;
  align-items: center;
}
.notification.toast.notification--actions > span:nth-child(2) a {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.notification.toast.notification--actions > span:nth-child(2) a > svg {
  height: 20px;
  width: 20px;
}
.notification.toast.notification--actions > span:nth-child(2) > button {
  border: 1px solid #FFFFFF;
  white-space: nowrap;
  margin-left: 1rem;
  text-decoration: none;
}

/*
 * 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;
  background-color: #FFFFFF;
}
.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,
.accordion-content .accordion-trigger .accordion-number--locked {
  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,
.accordion-content .accordion-trigger .accordion-number--locked 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;
}

/**
 * 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
 *
 */
/**
 * This file contains the map between domains and their colours
 *
 *
 */
/* ==========================================================================
  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 auto;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .banner-draper {
    min-height: 640px;
    height: auto;
  }
}
.banner-draper.banner {
  display: flex;
  border: none;
  border-radius: 48px;
}
@media screen and (max-width: 1379px) {
  .banner-draper.banner {
    padding-bottom: 40px;
  }
}
.banner-draper:before {
  animation: a-triad 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 320px;
  height: 824px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(advert-hero-left-6fc0e72993842d7238f1422385d6cb9bf3eaa423b55cbebe74d5735488eed108.svg);
  background-position-x: 0px;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 1279px) {
  .banner-draper:before {
    left: -80px;
  }
}
@media screen and (max-width: 1079px) {
  .banner-draper:before {
    left: -160px;
  }
}
@media screen and (max-width: 879px) {
  .banner-draper:before {
    left: -210px;
  }
}
@media screen and (max-width: 767px) {
  .banner-draper:before {
    display: none;
  }
}
.banner-draper:after {
  animation: a-triad 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 320px;
  height: 824px;
  position: absolute;
  top: 0px;
  right: 0px;
  background-image: url(advert-hero-right-9edd22d9e7349d744f3c9d8c76058c1bc8ddcb66e2003115b145c934a149d8f1.svg);
  background-position-x: 12px;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 1279px) {
  .banner-draper:after {
    right: -80px;
  }
}
@media screen and (max-width: 1079px) {
  .banner-draper:after {
    right: -160px;
  }
}
@media screen and (max-width: 879px) {
  .banner-draper:after {
    right: -210px;
  }
}
@media screen and (max-width: 767px) {
  .banner-draper:after {
    display: none;
  }
}
.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;
  text-align: center;
}
@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;
    align-items: start;
    text-align: left;
  }
}
.banner-draper__wrapper .banner-draper__headline {
  width: 100%;
  font-size: 3rem;
  line-height: 1.125;
}
@media screen and (max-width: 767px) {
  .banner-draper__wrapper .banner-draper__headline {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}
.banner-draper__wrapper .banner-draper__description {
  max-width: 592px;
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 24px auto 32px auto;
}
@media screen and (max-width: 1079px) {
  .banner-draper__wrapper .banner-draper__description {
    font-size: 1.125rem;
  }
}
.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-article {
  background-color: rgba(21, 120, 87, 0.2);
}
.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-professional-growth {
  background-color: rgba(227, 169, 61, 0.2);
}
.card .card-topright .card-artwork-multi-domain {
  background-color: rgba(172, 159, 171, 0.2);
}
.card .card-topright .card-artwork-learning-path {
  background-color: rgba(89, 124, 238, 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;
  font-family: "Relative";
  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);
  transform: translate3d(0, 0, 0);
  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 {
  z-index: 99999;
}
.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(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(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;
}

/**
 * Cards
 *
 * 1. Base
 * 2. Domains
 *
 */
/* ==========================================================================
  1. Base
========================================================================== */
.triad.dyad .triad-square .triad-grid {
  grid-template-columns: 64% 36%;
  grid-template-rows: 36% 64%;
}
.triad.dyad .triad-square .triad-grid .triad-top-right svg {
  width: 100%;
  height: 100%;
  padding: 35px;
}

/* ==========================================================================
    2. Domains
  ========================================================================== */
.dyad.triad.triad-article .triad-square .triad-background svg {
  fill: rgba(21, 120, 87, 0.6);
}
.dyad.triad.triad-article .triad-square .triad-grid svg {
  fill: #157857;
}
.dyad.triad.triad-article.overlay .triad-background svg {
  fill: transparent;
  stroke: #157857;
  stroke-width: 3;
}

.dyad.triad.triad-android .triad-square .triad-background svg {
  fill: rgba(0, 184, 126, 0.6);
}
.dyad.triad.triad-android .triad-square .triad-grid svg {
  fill: #00B87E;
}
.dyad.triad.triad-android.overlay .triad-background svg {
  fill: transparent;
  stroke: #00B87E;
  stroke-width: 3;
}

.dyad.triad.triad-flutter .triad-square .triad-background svg {
  fill: rgba(46, 164, 221, 0.6);
}
.dyad.triad.triad-flutter .triad-square .triad-grid svg {
  fill: #2EA4DD;
}
.dyad.triad.triad-flutter.overlay .triad-background svg {
  fill: transparent;
  stroke: #2EA4DD;
  stroke-width: 3;
}

.dyad.triad.triad-gametech .triad-square .triad-background svg {
  fill: rgba(180, 78, 191, 0.6);
}
.dyad.triad.triad-gametech .triad-square .triad-grid svg {
  fill: #B44EBF;
}
.dyad.triad.triad-gametech.overlay .triad-background svg {
  fill: transparent;
  stroke: #B44EBF;
  stroke-width: 3;
}

.dyad.triad.triad-ios .triad-square .triad-background svg {
  fill: rgba(135, 99, 210, 0.6);
}
.dyad.triad.triad-ios .triad-square .triad-grid svg {
  fill: #8763D2;
}
.dyad.triad.triad-ios.overlay .triad-background svg {
  fill: transparent;
  stroke: #8763D2;
  stroke-width: 3;
}

.dyad.triad.triad-server-side-swift .triad-square .triad-background svg {
  fill: rgba(242, 111, 170, 0.6);
}
.dyad.triad.triad-server-side-swift .triad-square .triad-grid svg {
  fill: #F26FAA;
}
.dyad.triad.triad-server-side-swift.overlay .triad-background svg {
  fill: transparent;
  stroke: #F26FAA;
  stroke-width: 3;
}

.dyad.triad.triad-professional-growth .triad-square .triad-background svg {
  fill: rgba(227, 169, 61, 0.6);
}
.dyad.triad.triad-professional-growth .triad-square .triad-grid svg {
  fill: #E3A93D;
}
.dyad.triad.triad-professional-growth.overlay .triad-background svg {
  fill: transparent;
  stroke: #E3A93D;
  stroke-width: 3;
}

.dyad.triad.triad-multi-domain .triad-square .triad-background svg {
  fill: rgba(172, 159, 171, 0.6);
}
.dyad.triad.triad-multi-domain .triad-square .triad-grid svg {
  fill: #AC9FAB;
}
.dyad.triad.triad-multi-domain.overlay .triad-background svg {
  fill: transparent;
  stroke: #AC9FAB;
  stroke-width: 3;
}

.dyad.triad.triad-learning-path .triad-square .triad-background svg {
  fill: rgba(89, 124, 238, 0.6);
}
.dyad.triad.triad-learning-path .triad-square .triad-grid svg {
  fill: #597CEE;
}
.dyad.triad.triad-learning-path.overlay .triad-background svg {
  fill: transparent;
  stroke: #597CEE;
  stroke-width: 3;
}

.dyad.triad.triad-video-course .triad-square .triad-background svg {
  fill: rgba(227, 74, 76, 0.6);
}
.dyad.triad.triad-video-course .triad-square .triad-grid svg {
  fill: #E34A4C;
}
.dyad.triad.triad-video-course.overlay .triad-background svg {
  fill: transparent;
  stroke: #E34A4C;
  stroke-width: 3;
}

.dyad.triad.triad-book .triad-square .triad-background svg {
  fill: rgba(255, 136, 71, 0.6);
}
.dyad.triad.triad-book .triad-square .triad-grid svg {
  fill: #FF8847;
}
.dyad.triad.triad-book.overlay .triad-background svg {
  fill: transparent;
  stroke: #FF8847;
  stroke-width: 3;
}

/* ==========================================================================
    1. Variables
   ========================================================================== */
/* ==========================================================================
    2. Styling
   ========================================================================== */
.footer {
  color: #FFFFFF;
  margin-top: 80px;
}
.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: 99999;
}
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: 1439px) {
  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: 1439px) {
  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;
  /* separating the classes and isolating them with this approach is the only way the letter-spacing changes apply*/
}
@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 .header-logo .header-tagline-enterprise {
  font-size: 0.6875rem;
  text-transform: uppercase;
  /* identical to box height, or 91% */
  letter-spacing: 5.5px;
  font-weight: 500;
  margin-top: 4px;
}
@media screen and (max-width: 1023px) {
  header.header .header-logo .header-tagline-enterprise {
    display: block !important;
  }
}
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;
}

/* ==========================================================================
  -. Enterprise Header
========================================================================== */
header.header-enterprise {
  background-color: #14161E;
  color: #FFFFFF;
  fill: #FFFFFF;
  position: relative;
}
header.header-enterprise .header-logo .header-tagline {
  font-weight: 500;
  font-size: 11px;
  line-height: 10px;
  /* identical to box height, or 91% */
  letter-spacing: 5.5px;
  text-transform: uppercase;
  color: #FFFFFF;
}
@media screen and (max-width: 1023px) {
  header.header-enterprise .header-logo .header-tagline {
    display: block !important;
  }
}
header.header-enterprise .header-left-menus a {
  position: relative;
  z-index: 1;
  text-decoration: none;
}
header.header-enterprise .header-left-menus a:before {
  content: "";
  background-color: #3B3D43;
  position: absolute;
  left: -12px;
  top: -8px;
  width: calc(100% + 24px);
  height: calc(100% + 16px);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 8px;
  z-index: -1;
}
header.header-enterprise .header-left-menus a:hover:before {
  opacity: 1;
}
header.header-enterprise nav a {
  color: inherit;
  position: relative;
}
header.header-enterprise nav a.header-enterprise__link--active:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -30px;
  top: auto !important;
  left: 0;
  background-color: #FFFFFF;
  opacity: 1;
}
header.header-enterprise .dropdown .dropdown-menu .dropdown-content {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
header.header-enterprise .btn-icon:hover {
  background-color: #3B3D43;
}
header.header-enterprise svg {
  fill: #FFFFFF;
}

/**
* 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: 0;
  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(hero-page-header-yellow%401.5x-a226a061de6efb99f4331ce9b5a9fe4e7b302fdc99017c0aa90eac39b6d72294.jpg);
  background-size: 100%;
}

.hero-page-header-purple {
  background-image: url(hero-page-header-purple%401.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%;
  aspect-ratio: 1/1;
}
.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-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-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-professional-growth .triad-square .triad-background svg {
  fill: rgba(227, 169, 61, 0.2);
}
.triad.triad-professional-growth .triad-square .triad-grid .triad-top-left .badge {
  background-color: #E3A93D;
}

.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-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-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 Options
* 7e. Input — Text Area
* 8. Dropdown
* 9. Loading
* 10. Breadcrumbs
* 11. Notifications
* 12. Tabs
* 13. Data Table
* 14. Written Content
* 15. Pagination
* 16. Tiles
* 17. End of Page Adverts
* 18. Hero
* 19. Lists
*/
/* ==========================================================================
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 — Select Options
  ========================================================================== */
  /* ==========================================================================
  7e. Input — Text Area
  ========================================================================== */
  /* ==========================================================================
  7f. Input — Range
  ========================================================================== */
  /* ==========================================================================
    7g. Input — Toggle button
  ========================================================================== */
  /* ==========================================================================
  8. Dropdown
  ========================================================================== */
  /* ==========================================================================
  9. Loading
  ========================================================================== */
  /* ==========================================================================
  10. Breadcrumbs
  ========================================================================== */
  /* ==========================================================================
  11. Notifications
  ========================================================================== */
  /* ==========================================================================
  12. Tabs
  ========================================================================== */
  /* ==========================================================================
  13. Data Table
  ========================================================================== */
  /* ==========================================================================
  14. Written Content
  ========================================================================== */
  /* ==========================================================================
  15. Pagination
  ========================================================================== */
  /* ==========================================================================
  16. Tiles
  ========================================================================== */
  /* ==========================================================================
    17. End of Page Adverts
  ========================================================================== */
  /* ==========================================================================
    18. Hero
  ========================================================================== */
  /* ==========================================================================
  19. Lists
  ========================================================================== */
  /* ==========================================================================
  20. Lists
  ========================================================================== */
  /* ==========================================================================
  21. Progress
  ========================================================================== */
}
.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-black-plaza {
  border: 1px solid #30363D;
}
.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;
}
.prefers-color-scheme--dark .dark-bg-black-night {
  background-color: #14161E;
}
@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 .card-minimal {
  background-color: #14161E;
  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-wrapper__full-screen {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .modal .modal-wrapper__full-screen footer {
  background-color: #14161E;
}
.prefers-color-scheme--dark .modal .modal-table {
  border-color: rgba(215, 215, 215, 0.2);
}
.prefers-color-scheme--dark .modal-sticky .modal-sticky-footer {
  background-color: #14161E;
  border-top: 1px solid #3B3D43;
}
.prefers-color-scheme--dark input.search-normal,
.prefers-color-scheme--dark input.search-small {
  background-color: #07080A;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF;
}
.prefers-color-scheme--dark input.search-normal:hover,
.prefers-color-scheme--dark input.search-small:hover {
  background-color: rgba(59, 61, 67, 0.5) !important;
}
.prefers-color-scheme--dark input.search-normal:focus,
.prefers-color-scheme--dark input.search-small: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],
.prefers-color-scheme--dark input.search-small + svg[role=clear] {
  fill: #FFFFFF;
  background: unset;
}
.prefers-color-scheme--dark input.search-normal + svg[role=clear]:hover,
.prefers-color-scheme--dark input.search-small + 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,
.prefers-color-scheme--dark input.search-small + svg[role=clear]:focus,
.prefers-color-scheme--dark input.search-small + svg[role=clear]:target,
.prefers-color-scheme--dark input.search-small + 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,
.prefers-color-scheme--dark .select select.select-native,
.prefers-color-scheme--dark .select .select-custom {
  border-color: #FFFFFF;
  background-color: #14161E;
  color: #FFFFFF;
}
.prefers-color-scheme--dark select:hover,
.prefers-color-scheme--dark .select select.select-native:hover,
.prefers-color-scheme--dark .select .select-custom:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .select-custom .select-custom-trigger {
  background-color: #14161E;
}
.prefers-color-scheme--dark .select-custom .select-custom-options {
  background-color: #14161E;
  border-color: #FFFFFF;
}
.prefers-color-scheme--dark .select-custom .select-custom-options .select-custom-option:hover,
.prefers-color-scheme--dark .select-custom .select-custom-options .select-custom-option .hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .text-input {
  border: 1px solid #FFFFFF;
  background-color: #07080A;
  color: #FFFFFF;
}
.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: #FFFFFF;
}
.prefers-color-scheme--dark .text-input:invalid {
  border: 1px solid #E34A4C;
}
.prefers-color-scheme--dark .control .text-area {
  background-color: #07080A;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .control span.input-error {
  color: #E34A4C !important;
}
.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 .toggle-button {
  background-color: #14161E;
}
.prefers-color-scheme--dark .toggle-button__input {
  border-width: 1px;
  border-color: #30363D;
}
.prefers-color-scheme--dark .toggle-button__input:hover {
  border-color: #FF5A00;
  border-width: 1px;
}
.prefers-color-scheme--dark .toggle-button__input:hover:disabled {
  border-color: #30363D;
}
.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(odd) {
  background-color: #14161E;
}
.prefers-color-scheme--dark .elementary-table.zebra-rows-table tr:nth-child(even) {
  background-color: rgba(7, 8, 10, 0.5);
}
@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;
}
.prefers-color-scheme--dark .banner-draper-end-of-page {
  background-color: #CE3F00;
}
.prefers-color-scheme--dark .banner-draper-end-of-page:before {
  filter: invert(100%);
}
.prefers-color-scheme--dark .banner-draper-end-of-page:after {
  filter: invert(100%);
}
.prefers-color-scheme--dark .banner-draper-end-of-page .banner-draper__headline,
.prefers-color-scheme--dark .banner-draper-end-of-page .banner-draper__description {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .hero-page-header::before {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark .hero-page-header .hero-page-header-round-top:before {
  box-shadow: -12px 12px 0 12px #0E0F14;
}
.prefers-color-scheme--dark .hero-page-header .hero-page-header-round-bottom:before {
  box-shadow: -12px 12px 0 12px #0E0F14;
}
.prefers-color-scheme--dark .ol-list li::before {
  border: 1px solid #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 .accordion-trigger .accordion-number,
.prefers-color-scheme--dark .accordion-trigger .accordion-number--locked {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .progress {
  background-color: rgba(215, 215, 215, 0.05);
}

.hidden {
  display: none;
}

.hidden-force {
  display: none !important;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

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

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

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * 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-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-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-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-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-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-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-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-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-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-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-transparent {
  color: transparent;
}

/* Background color */
.bg-transparent {
  background-color: transparent;
}

/* Border color */
.bc-transparent {
  border: 1px solid transparent;
}

/* SVG Colour */
.sc-transparent {
  fill: transparent;
}

/* 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-article {
  background-color: #157857;
}

.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-professional-growth {
  background-color: #E3A93D;
}

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

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

.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-professional-growth {
  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;
}

.text-wrap-wrap {
  white-space: wrap;
}

.text-wrap-nowrap {
  white-space: nowrap;
}

.white-space-normal {
  white-space: normal;
}

.white-space-nowrap {
  white-space: nowrap;
}

.white-space-pre {
  white-space: pre;
}

.white-space-pre-line {
  white-space: pre-line;
}

.white-space-pre-wrap {
  white-space: pre-wrap;
}

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

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

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

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

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

.align-self-stretch {
  align-self: 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;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

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

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

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

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

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

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

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

.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-36 {
  margin: 36px !important;
}

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

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

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

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

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

.my-36 {
  margin-top: 36px !important;
  margin-bottom: 36px !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-96 {
  margin: 96px !important;
}

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

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

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

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

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

.my-96 {
  margin-top: 96px !important;
  margin-bottom: 96px !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-0 {
    margin: 0px !important;
  }
  .mobile-mt-0 {
    margin-top: 0px !important;
  }
  .mobile-mr-0 {
    margin-right: 0px !important;
  }
  .mobile-mb-0 {
    margin-bottom: 0px !important;
  }
  .mobile-ml-0 {
    margin-left: 0px !important;
  }
  .mobile-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .mobile-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .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-36 {
    margin: 36px !important;
  }
  .mobile-mt-36 {
    margin-top: 36px !important;
  }
  .mobile-mr-36 {
    margin-right: 36px !important;
  }
  .mobile-mb-36 {
    margin-bottom: 36px !important;
  }
  .mobile-ml-36 {
    margin-left: 36px !important;
  }
  .mobile-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .mobile-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !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-96 {
    margin: 96px !important;
  }
  .mobile-mt-96 {
    margin-top: 96px !important;
  }
  .mobile-mr-96 {
    margin-right: 96px !important;
  }
  .mobile-mb-96 {
    margin-bottom: 96px !important;
  }
  .mobile-ml-96 {
    margin-left: 96px !important;
  }
  .mobile-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .mobile-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !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-0 {
    margin: 0px !important;
  }
  .tablet-mt-0 {
    margin-top: 0px !important;
  }
  .tablet-mr-0 {
    margin-right: 0px !important;
  }
  .tablet-mb-0 {
    margin-bottom: 0px !important;
  }
  .tablet-ml-0 {
    margin-left: 0px !important;
  }
  .tablet-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .tablet-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .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-36 {
    margin: 36px !important;
  }
  .tablet-mt-36 {
    margin-top: 36px !important;
  }
  .tablet-mr-36 {
    margin-right: 36px !important;
  }
  .tablet-mb-36 {
    margin-bottom: 36px !important;
  }
  .tablet-ml-36 {
    margin-left: 36px !important;
  }
  .tablet-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .tablet-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !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-96 {
    margin: 96px !important;
  }
  .tablet-mt-96 {
    margin-top: 96px !important;
  }
  .tablet-mr-96 {
    margin-right: 96px !important;
  }
  .tablet-mb-96 {
    margin-bottom: 96px !important;
  }
  .tablet-ml-96 {
    margin-left: 96px !important;
  }
  .tablet-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .tablet-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !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-0 {
    margin: 0px !important;
  }
  .tablet-only-mt-0 {
    margin-top: 0px !important;
  }
  .tablet-only-mr-0 {
    margin-right: 0px !important;
  }
  .tablet-only-mb-0 {
    margin-bottom: 0px !important;
  }
  .tablet-only-ml-0 {
    margin-left: 0px !important;
  }
  .tablet-only-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .tablet-only-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .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-36 {
    margin: 36px !important;
  }
  .tablet-only-mt-36 {
    margin-top: 36px !important;
  }
  .tablet-only-mr-36 {
    margin-right: 36px !important;
  }
  .tablet-only-mb-36 {
    margin-bottom: 36px !important;
  }
  .tablet-only-ml-36 {
    margin-left: 36px !important;
  }
  .tablet-only-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .tablet-only-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !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-96 {
    margin: 96px !important;
  }
  .tablet-only-mt-96 {
    margin-top: 96px !important;
  }
  .tablet-only-mr-96 {
    margin-right: 96px !important;
  }
  .tablet-only-mb-96 {
    margin-bottom: 96px !important;
  }
  .tablet-only-ml-96 {
    margin-left: 96px !important;
  }
  .tablet-only-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .tablet-only-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !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-0 {
    margin: 0px !important;
  }
  .touch-mt-0 {
    margin-top: 0px !important;
  }
  .touch-mr-0 {
    margin-right: 0px !important;
  }
  .touch-mb-0 {
    margin-bottom: 0px !important;
  }
  .touch-ml-0 {
    margin-left: 0px !important;
  }
  .touch-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .touch-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .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-36 {
    margin: 36px !important;
  }
  .touch-mt-36 {
    margin-top: 36px !important;
  }
  .touch-mr-36 {
    margin-right: 36px !important;
  }
  .touch-mb-36 {
    margin-bottom: 36px !important;
  }
  .touch-ml-36 {
    margin-left: 36px !important;
  }
  .touch-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .touch-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !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-96 {
    margin: 96px !important;
  }
  .touch-mt-96 {
    margin-top: 96px !important;
  }
  .touch-mr-96 {
    margin-right: 96px !important;
  }
  .touch-mb-96 {
    margin-bottom: 96px !important;
  }
  .touch-ml-96 {
    margin-left: 96px !important;
  }
  .touch-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .touch-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !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-0 {
    margin: 0px !important;
  }
  .desktop-mt-0 {
    margin-top: 0px !important;
  }
  .desktop-mr-0 {
    margin-right: 0px !important;
  }
  .desktop-mb-0 {
    margin-bottom: 0px !important;
  }
  .desktop-ml-0 {
    margin-left: 0px !important;
  }
  .desktop-mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .desktop-my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .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-36 {
    margin: 36px !important;
  }
  .desktop-mt-36 {
    margin-top: 36px !important;
  }
  .desktop-mr-36 {
    margin-right: 36px !important;
  }
  .desktop-mb-36 {
    margin-bottom: 36px !important;
  }
  .desktop-ml-36 {
    margin-left: 36px !important;
  }
  .desktop-mx-36 {
    margin-left: 36px !important;
    margin-right: 36px !important;
  }
  .desktop-my-36 {
    margin-top: 36px !important;
    margin-bottom: 36px !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-96 {
    margin: 96px !important;
  }
  .desktop-mt-96 {
    margin-top: 96px !important;
  }
  .desktop-mr-96 {
    margin-right: 96px !important;
  }
  .desktop-mb-96 {
    margin-bottom: 96px !important;
  }
  .desktop-ml-96 {
    margin-left: 96px !important;
  }
  .desktop-mx-96 {
    margin-left: 96px !important;
    margin-right: 96px !important;
  }
  .desktop-my-96 {
    margin-top: 96px !important;
    margin-bottom: 96px !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-0 {
  padding: 0px !important;
}

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

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

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

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

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

.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !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-36 {
  padding: 36px !important;
}

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

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

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

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

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

.py-36 {
  padding-top: 36px !important;
  padding-bottom: 36px !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-96 {
  padding: 96px !important;
}

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

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

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

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

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

.py-96 {
  padding-top: 96px !important;
  padding-bottom: 96px !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-0 {
    padding: 0px !important;
  }
  .mobile-pt-0 {
    padding-top: 0px !important;
  }
  .mobile-pr-0 {
    padding-right: 0px !important;
  }
  .mobile-pb-0 {
    padding-bottom: 0px !important;
  }
  .mobile-pl-0 {
    padding-left: 0px !important;
  }
  .mobile-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .mobile-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .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-36 {
    padding: 36px !important;
  }
  .mobile-pt-36 {
    padding-top: 36px !important;
  }
  .mobile-pr-36 {
    padding-right: 36px !important;
  }
  .mobile-pb-36 {
    padding-bottom: 36px !important;
  }
  .mobile-pl-36 {
    padding-left: 36px !important;
  }
  .mobile-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .mobile-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !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-96 {
    padding: 96px !important;
  }
  .mobile-pt-96 {
    padding-top: 96px !important;
  }
  .mobile-pr-96 {
    padding-right: 96px !important;
  }
  .mobile-pb-96 {
    padding-bottom: 96px !important;
  }
  .mobile-pl-96 {
    padding-left: 96px !important;
  }
  .mobile-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .mobile-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !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-0 {
    padding: 0px !important;
  }
  .tablet-pt-0 {
    padding-top: 0px !important;
  }
  .tablet-pr-0 {
    padding-right: 0px !important;
  }
  .tablet-pb-0 {
    padding-bottom: 0px !important;
  }
  .tablet-pl-0 {
    padding-left: 0px !important;
  }
  .tablet-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .tablet-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .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-36 {
    padding: 36px !important;
  }
  .tablet-pt-36 {
    padding-top: 36px !important;
  }
  .tablet-pr-36 {
    padding-right: 36px !important;
  }
  .tablet-pb-36 {
    padding-bottom: 36px !important;
  }
  .tablet-pl-36 {
    padding-left: 36px !important;
  }
  .tablet-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .tablet-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !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-96 {
    padding: 96px !important;
  }
  .tablet-pt-96 {
    padding-top: 96px !important;
  }
  .tablet-pr-96 {
    padding-right: 96px !important;
  }
  .tablet-pb-96 {
    padding-bottom: 96px !important;
  }
  .tablet-pl-96 {
    padding-left: 96px !important;
  }
  .tablet-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .tablet-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !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-0 {
    padding: 0px !important;
  }
  .tablet-only-pt-0 {
    padding-top: 0px !important;
  }
  .tablet-only-pr-0 {
    padding-right: 0px !important;
  }
  .tablet-only-pb-0 {
    padding-bottom: 0px !important;
  }
  .tablet-only-pl-0 {
    padding-left: 0px !important;
  }
  .tablet-only-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .tablet-only-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .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-36 {
    padding: 36px !important;
  }
  .tablet-only-pt-36 {
    padding-top: 36px !important;
  }
  .tablet-only-pr-36 {
    padding-right: 36px !important;
  }
  .tablet-only-pb-36 {
    padding-bottom: 36px !important;
  }
  .tablet-only-pl-36 {
    padding-left: 36px !important;
  }
  .tablet-only-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .tablet-only-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !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-96 {
    padding: 96px !important;
  }
  .tablet-only-pt-96 {
    padding-top: 96px !important;
  }
  .tablet-only-pr-96 {
    padding-right: 96px !important;
  }
  .tablet-only-pb-96 {
    padding-bottom: 96px !important;
  }
  .tablet-only-pl-96 {
    padding-left: 96px !important;
  }
  .tablet-only-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .tablet-only-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !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-0 {
    padding: 0px !important;
  }
  .touch-pt-0 {
    padding-top: 0px !important;
  }
  .touch-pr-0 {
    padding-right: 0px !important;
  }
  .touch-pb-0 {
    padding-bottom: 0px !important;
  }
  .touch-pl-0 {
    padding-left: 0px !important;
  }
  .touch-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .touch-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .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-36 {
    padding: 36px !important;
  }
  .touch-pt-36 {
    padding-top: 36px !important;
  }
  .touch-pr-36 {
    padding-right: 36px !important;
  }
  .touch-pb-36 {
    padding-bottom: 36px !important;
  }
  .touch-pl-36 {
    padding-left: 36px !important;
  }
  .touch-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .touch-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !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-96 {
    padding: 96px !important;
  }
  .touch-pt-96 {
    padding-top: 96px !important;
  }
  .touch-pr-96 {
    padding-right: 96px !important;
  }
  .touch-pb-96 {
    padding-bottom: 96px !important;
  }
  .touch-pl-96 {
    padding-left: 96px !important;
  }
  .touch-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .touch-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !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-0 {
    padding: 0px !important;
  }
  .desktop-pt-0 {
    padding-top: 0px !important;
  }
  .desktop-pr-0 {
    padding-right: 0px !important;
  }
  .desktop-pb-0 {
    padding-bottom: 0px !important;
  }
  .desktop-pl-0 {
    padding-left: 0px !important;
  }
  .desktop-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .desktop-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  .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-36 {
    padding: 36px !important;
  }
  .desktop-pt-36 {
    padding-top: 36px !important;
  }
  .desktop-pr-36 {
    padding-right: 36px !important;
  }
  .desktop-pb-36 {
    padding-bottom: 36px !important;
  }
  .desktop-pl-36 {
    padding-left: 36px !important;
  }
  .desktop-px-36 {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .desktop-py-36 {
    padding-top: 36px !important;
    padding-bottom: 36px !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-96 {
    padding: 96px !important;
  }
  .desktop-pt-96 {
    padding-top: 96px !important;
  }
  .desktop-pr-96 {
    padding-right: 96px !important;
  }
  .desktop-pb-96 {
    padding-bottom: 96px !important;
  }
  .desktop-pl-96 {
    padding-left: 96px !important;
  }
  .desktop-px-96 {
    padding-left: 96px !important;
    padding-right: 96px !important;
  }
  .desktop-py-96 {
    padding-top: 96px !important;
    padding-bottom: 96px !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;
  }
}
.gap-0 {
  gap: 0px !important;
}

.gap-4 {
  gap: 4px !important;
}

.gap-6 {
  gap: 6px !important;
}

.gap-8 {
  gap: 8px !important;
}

.gap-12 {
  gap: 12px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-24 {
  gap: 24px !important;
}

.font-mono {
  font-family: "Relative Mono";
}

/* Quick font sizes so you don't rely on headings etc */
.fs-8 {
  font-size: 0.5rem;
}

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

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

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

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

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

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

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

.fs-32 {
  font-size: 2rem;
}

.fs-36 {
  font-size: 2.25rem;
}

.fs-40 {
  font-size: 2.5rem;
}

.fs-48 {
  font-size: 3rem;
}

.fs-60 {
  font-size: 3.75rem;
}

.fs-64 {
  font-size: 4rem;
}

.fs-80 {
  font-size: 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-64 {
    font-size: 4rem;
  }
  .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-64 {
    font-size: 4rem;
  }
  .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-64 {
    font-size: 4rem;
  }
  .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-64 {
    font-size: 4rem;
  }
  .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-64 {
    font-size: 4rem;
  }
  .desktop-fs-80 {
    font-size: 5rem;
  }
}
.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

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

.lh-1-25 {
  line-height: 1.25;
}

.lh-1-5 {
  line-height: 1.5;
}

.lh-2 {
  line-height: 2;
}

/**
 *  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(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(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(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(clipboard-black-3cf79234109ca7a31f5e7c2aad031712009485086ea4e4be2e13296ff5817c8b.svg);
}
.light-code .button-copy:hover {
  background-color: rgba(215, 215, 215, 0.4980392157);
}
.light-code .button-code {
  background-image: url(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
========================================================================== */
/**
 *  Written content
 *
 * 1. Checkbox ul
 * 2. Bulletless ul
 * 3. Embedded google form
 *
 */
/* ==========================================================================
  1. Checkbox ul
 ========================================================================== */
.written-content.checkbox-ul ul {
  padding-left: 0 !important;
}
.written-content.checkbox-ul ul li {
  list-style: none;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.5;
}
.written-content.checkbox-ul ul li::before {
  content: "";
  background-image: url(checkmark-completed-9477e13da288703753677ee812161f7fbb1c658e20ca71db3f2f11c7b746d476.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  display: inline-block;
  background-color: transparent;
  left: 0;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
}

/* ==========================================================================
  2. Bulletless ul
 ========================================================================== */
.written-content.bulletless-ul ul {
  padding-left: 0 !important;
}
.written-content.bulletless-ul ul li {
  list-style: none;
  padding-left: 0;
}

/* ==========================================================================
  3. Embedded google form
 ========================================================================== */
.written-content .gform-iframe {
  width: 100%;
}

/**
 * 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 (min-width: 1200px) {
  .l-admin--sidebar-open .chapter-layout .toc-expanded .toc-body {
    padding-bottom: 176px;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open.s_show_mobile_menu .chapter-layout .toc-expanded {
    display: block !important;
  }
}
@media screen and (max-width: 1199px) {
  .l-admin--sidebar-open.s_show_mobile_menu .chapter-layout .toc-expanded .toc .toc-body {
    padding-bottom: 144px;
  }
}
@media screen and (max-width: 1023px) {
  .l-admin--sidebar-open.s_show_mobile_menu .chapter-layout .toc-expanded .toc .toc-body {
    padding-bottom: 220px;
  }
}

/* ==========================================================================
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;
}
.chapter-actions li .modal > .modal-wrapper {
  text-align: left;
}
.chapter-actions li .modal > .modal-wrapper > p {
  line-height: 1.5em;
}

/* ==========================================================================
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
*
* 8. Multi-modal learning path module 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. Book card artwork
========================================================================== */
.card .card-topright .card-artwork-edition {
  overflow: hidden;
}
.card .card-topright .card-artwork-edition > img {
  min-width: 100%;
  min-height: 100%;
}

/* ==========================================================================
8. Multi-modal LP hompage module card
========================================================================== */
.learning-path.content-module .card .card-topleft .badge > svg {
  fill: #FFFFFF;
}
.learning-path.content-module .card .card-description .description-row {
  display: inline-flex;
  gap: 16px;
  align-items: flex-end;
  width: 100%;
  z-index: 4;
}
@media screen and (max-width: 767px) {
  .learning-path.content-module .card .card-description .description-row {
    flex-direction: column;
  }
}
.learning-path.content-module .card .card-description .description-row .do-not-shrink {
  flex-shrink: 0;
}
.learning-path.content-module .card .card-description .description-row .description-action {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  .learning-path.content-module .card .card-description .description-row .description-action {
    align-self: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .learning-path.content-module .card .card-description .description-row.description-with-progress {
    flex-direction: row;
  }
}
.learning-path.content-module .card .card-description .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.learning-path.content-module .card .card-action .accordion {
  z-index: 3;
}
.learning-path.content-module .card .card-action .accordion details[open] .accordion-open {
  display: inline;
}
.learning-path.content-module .card .card-action .accordion details[open] .accordion-closed {
  display: none;
}
.learning-path.content-module .card .card-action .accordion details:not([open]) .accordion-open {
  display: none;
}
.learning-path.content-module .card .card-action .accordion details:not([open]) .accordion-closed {
  display: inline;
}
.learning-path.content-module .card .card-action .accordion-trigger {
  padding: 0;
}
.learning-path.content-module .card .card-action .accordion-trigger .trigger-text {
  font-weight: 500;
}
.learning-path.content-module .card .card-action ul.lesson-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.learning-path.content-module .card .card-action ul.lesson-list li .left-icon {
  flex-shrink: 0;
  flex-grow: 0;
}
.learning-path.content-module .card .card-action ul.lesson-list li .right-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.learning-path.content-module .card .card-action ul.lesson-list li .right-text span:first-child a:first-child:hover {
  text-decoration: underline;
}
.learning-path.content-module .card .card-action ul.lesson-list li:last-child {
  margin-bottom: 0;
}

/**
 *  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[data-type=quiz] {
  background-color: #597CEE;
}
.child-content-list .accordion-trigger .accordion-number svg {
  fill: white;
}
.child-content-list .accordion-trigger .accordion-number .badge {
  font-size: 1.125rem;
  letter-spacing: unset;
  font-weight: 400;
}
.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-header a.accordion-title:hover {
  text-decoration: underline;
  color: #CE3F00;
  transition: none;
}
.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;
  color: #FFFFFF;
}
.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)
 *
 * 5b. Book Chapter (Team)
 *
 * 6. Content Module
 */
/* ==========================================================================
 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;
}

/* ==========================================================================
  6. Content Module
========================================================================== */
@media screen and (max-width: 1023px) {
  .content-module .triad {
    width: 398px;
    max-width: 398px;
    margin: 0 auto;
  }
}
.content-module .breadcrumbs.breadcrumbs-video {
  text-align: unset;
  padding: unset;
  width: min(1536px, 100vw - 48px);
}
.content-module .breadcrumbs.breadcrumbs-video .dropdown,
.content-module .breadcrumbs.breadcrumbs-video > a.dropdown-line {
  display: inline-block;
}
.content-module nav ul.content-list--padded li {
  padding: 12px 24px;
  margin: unset;
  align-items: center;
}
.content-module nav ul.content-list--padded li:hover, .content-module nav ul.content-list--padded li.active {
  background: #F7F7F7;
}
.content-module nav ul.content-list--padded li:not(.content-list--completed) .content-list--icon-circle {
  display: none;
}
.content-module nav ul.content-list--padded li.content-list--completed .content-icon {
  display: none;
}
.content-module .video-episode {
  margin-top: 80px;
  gap: 32px;
}
@media screen and (max-width: 1023px) {
  .content-module .video-episode {
    gap: 0;
    margin-top: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .content-module .video-episode.video-episode-toc--open:not(.content-module .video-episode.video-episode--cinema) {
    grid-template-columns: 396px 1fr 40px;
  }
}
@media screen and (min-width: 1024px) {
  .content-module .video-episode.video-episode-toc--open:not(.content-module .video-episode.video-episode--cinema) .content-action__wrapper {
    grid-row: span 2;
  }
}
@media screen and (max-width: 1023px) {
  .content-module .video-episode .content-action__wrapper {
    padding-top: 36px;
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 1023px) {
  .content-module .video-episode.text .video-toc {
    grid-row: 3;
  }
}
.content-module .video-episode .video-toc {
  z-index: 0;
}
@media screen and (max-width: 1023px) {
  .content-module .video-episode .video-toc {
    margin: unset;
  }
}
.content-module .video-episode .video-toc .toc-expanded {
  padding-right: unset;
}
.content-module .video-episode .video-toc .toc-expanded .toc .toc-body {
  padding: 24px 0;
}
.content-module .video-episode .video-toc .section-list-header--wrapper {
  padding: 36px 24px 0;
  gap: 24px;
}
.content-module .video-episode .video-actions {
  max-height: 498px;
}
.content-module .video-episode.video-episode--cinema .video-actions {
  position: relative;
  top: 0;
}
.content-module .c-book-chapter header h1 {
  margin-top: unset;
}
.content-module .child-content-list > details #segment-tooltip::after {
  content: "Display segments";
}
.content-module .child-content-list > details[open] #segment-tooltip::after {
  content: "Hide segments";
}
.content-module .accordion-trigger.accordion-metadata {
  padding-left: 104px;
  gap: 24px;
}
.content-module .accordion-trigger.accordion-metadata .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-module .accordion-trigger.accordion-metadata .accordion-opener {
  margin: unset;
  align-self: end;
}
.content-module .content-description {
  display: grid;
  gap: 16px;
  padding-top: 16px;
  padding-right: 24px;
}
.content-module .content-description .content-segment {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 48px;
}
.content-module .content-description .content-segment-icon {
  width: 24px;
  height: 24px;
}
.content-module .content-description .content-segment-icon svg {
  width: 24px;
  height: 24px;
}
.content-module .content-description .content-segment-info {
  display: grid;
  align-items: center;
}
.content-module .content-description .content-segment-info .segment-title {
  text-decoration: none;
}
.content-module .content-description .content-segment-info .segment-title:hover {
  text-decoration: underline;
}
.content-module .content-description .content-segment-info .segment-metadata {
  font-size: 0.875rem;
}
.content-module footer.content-footer a {
  color: #FFFFFF;
}
.content-module footer.content-footer .contributors.tile a {
  color: #CE3F00;
}

/**
 *  Content Hero
 *
 * 1. Variables
 * 2. Hero
 * 3. Responsiveness
 * 4. Chromeless Page hero
 * 5. Book specific
 * 6. Content module specific
 * 7. Content module learning path specific
 *
 */
/* ==========================================================================
  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-left p a {
  color: inherit;
}
.content-hero .content-hero-right, .content-module .content-hero.content-hero--dark .content-hero-left {
  min-width: 100%;
}
.content-hero .content-hero-right .content-hero-badge, .content-module .content-hero.content-hero--dark .content-hero-left .content-hero-badge {
  margin-bottom: 16px;
}
.content-hero .content-hero-right h1, .content-module .content-hero.content-hero--dark .content-hero-left h1 {
  font-size: 3rem;
  word-break: break-word;
}
.content-hero .content-hero-right p.description, .content-module .content-hero.content-hero--dark .content-hero-left p.description {
  display: block;
  font-size: 1.125rem;
  margin-top: 24px;
  word-break: break-word;
}
.content-hero .content-hero-right p.description a, .content-module .content-hero.content-hero--dark .content-hero-left p.description a {
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-right p.description a, .content-module .content-hero.content-hero--dark .content-hero-left p.description a {
    color: #14161E;
  }
}
.content-hero .content-hero-right .metadata, .content-module .content-hero.content-hero--dark .content-hero-left .metadata {
  margin-top: 24px;
  gap: 0;
}
@media screen and (max-width: 959px) {
  .content-hero .content-hero-right .metadata, .content-module .content-hero.content-hero--dark .content-hero-left .metadata {
    flex-direction: column;
  }
}
.content-hero .content-hero-right .metadata .icon-prefix, .content-module .content-hero.content-hero--dark .content-hero-left .metadata .icon-prefix {
  align-items: center;
}
.content-hero .content-hero-right .metadata > div > span, .content-module .content-hero.content-hero--dark .content-hero-left .metadata > div > span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content-hero .content-hero-right .metadata .version-count, .content-module .content-hero.content-hero--dark .content-hero-left .metadata .version-count {
  white-space: nowrap;
}
.content-hero .content-hero-right .metadata svg, .content-module .content-hero.content-hero--dark .content-hero-left .metadata svg {
  position: relative;
}
@media screen and (max-width: 767px) {
  .content-hero .content-hero-right .metadata svg, .content-module .content-hero.content-hero--dark .content-hero-left .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;
}
.content-hero .tooltip-text {
  background-color: #3B3D43;
}

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

/* ==========================================================================
  6. Content module specific
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .content-module .content-hero {
    grid-column-gap: 105px;
    grid-template-columns: minmax(494px, 690px) minmax(230px, 378px);
    padding: 72px 106px;
    min-height: 676px;
  }
}
.content-module .content-hero .content-hero-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 398px;
}
@media screen and (max-width: 1023px) {
  .content-module .content-hero .content-hero-right {
    grid-row: 1;
    min-width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .content-module .content-hero .content-hero-left {
    display: grid;
    width: unset;
    min-width: 100%;
    margin: unset;
  }
}
@media screen and (max-width: 1023px) {
  .content-module .content-hero .content-hero-left {
    grid-row: 2;
    min-width: 100%;
  }
}
.content-module .content-hero .content-hero-left .content-hero-cta {
  max-width: 494px;
}
.content-module .content-hero .content-hero-left .metadata {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  margin-top: 24px;
}
.content-module .content-hero .content-hero-left .programme-metadata {
  display: flex;
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .content-module .content-hero .content-hero-left .programme-metadata {
    flex-direction: column;
    align-items: flex-start;
  }
}
.content-module .content-hero .content-hero-left .programme-metadata__segment {
  display: flex;
  gap: 16px;
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #FFFFFF;
  margin-top: 36px;
}
@media screen and (max-width: 767px) {
  .content-module .content-hero .content-hero-left .programme-metadata__segment {
    border-right: none;
    padding-left: unset;
    padding-right: unset;
  }
}
.content-module .content-hero .content-hero-left .programme-metadata__segment:first-of-type {
  padding-left: 0;
}
.content-module .content-hero .content-hero-left .programme-metadata__segment:last-of-type {
  border-right: none;
  padding-right: 0;
}
.content-module .content-hero .content-hero-left .programme-metadata__segment-icon {
  align-self: center;
}
.content-module .content-hero .content-hero-left .programme-metadata__segment-info {
  display: grid;
  align-items: center;
  gap: 6px;
}
@media screen and (max-width: 767px) {
  .content-module .content-hero.content-hero--dark svg {
    fill: #14161E;
  }
}

/* ==========================================================================
  7. Content module learning path specific
 ========================================================================== */
.content-module.learning-path .content-hero {
  background-color: #FFFFFF;
  color: inherit;
  min-height: 564px;
  border: 1px #14161E solid;
}
@media screen and (max-width: 767px) {
  .content-module.learning-path .content-hero {
    background-color: inherit;
    border: none;
  }
}
.content-module.learning-path .content-hero .content-hero-left {
  display: grid;
}
.content-module.learning-path .content-hero .content-hero-left .metadata {
  gap: 0px;
}
@media screen and (max-width: 767px) {
  .content-module.learning-path .content-hero .content-hero-left .metadata {
    grid-row: 6;
  }
}
.content-module.learning-path .content-hero .content-hero-left .programme-metadata__segment {
  border-color: #14161E;
}

/* ==========================================================================
  8. Program
 ========================================================================== */
@media screen and (min-width: 1024px) {
  .program .content-hero {
    grid-column-gap: 105px;
    grid-template-columns: minmax(494px, 690px) minmax(230px, 378px);
    padding: 72px 106px;
    min-height: 676px;
  }
}
.program .content-hero .content-hero-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 398px;
}
@media screen and (max-width: 1023px) {
  .program .content-hero .content-hero-right {
    grid-row: 1;
    min-width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .program .content-hero .content-hero-left {
    display: grid;
    width: unset;
    min-width: 100%;
    margin: unset;
  }
}
@media screen and (max-width: 1023px) {
  .program .content-hero .content-hero-left {
    grid-row: 2;
    min-width: 100%;
  }
}
.program .content-hero .content-hero-left .content-hero-cta {
  max-width: 494px;
}
.program .content-hero .content-hero-left .metadata {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  margin-top: 24px;
}
.program .content-hero .content-hero-left .programme-metadata {
  display: flex;
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .program .content-hero .content-hero-left .programme-metadata {
    flex-direction: column;
    align-items: flex-start;
  }
}
.program .content-hero .content-hero-left .programme-metadata__segment {
  display: flex;
  gap: 16px;
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #FFFFFF;
  margin-top: 36px;
}
@media screen and (max-width: 767px) {
  .program .content-hero .content-hero-left .programme-metadata__segment {
    border-right: none;
    padding-left: unset;
    padding-right: unset;
  }
}
.program .content-hero .content-hero-left .programme-metadata__segment:first-of-type {
  padding-left: 0;
}
.program .content-hero .content-hero-left .programme-metadata__segment:last-of-type {
  border-right: none;
  padding-right: 0;
}
.program .content-hero .content-hero-left .programme-metadata__segment-icon {
  align-self: center;
}
.program .content-hero .content-hero-left .programme-metadata__segment-info {
  display: grid;
  align-items: center;
  gap: 6px;
}
@media screen and (max-width: 767px) {
  .program .content-hero.content-hero--dark svg {
    fill: #14161E;
  }
}

/**
 *  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(module-page-header-yellow%401.5x-a226a061de6efb99f4331ce9b5a9fe4e7b302fdc99017c0aa90eac39b6d72294.jpg);
  background-size: 100%;
}

.module-background-purple {
  background-image: url(module-page-header-purple%401.5x-2270d1e4cae0f1f24ae8ad76cb751e58d72bbb94eadb76e728638ed73e8bb5ef.jpg);
  background-size: 100%;
}

/**
 *  Modal
 *
 * 1. Full screen
 *
 */
/* ==========================================================================
  1. Full screen
 ========================================================================== */
.modal .modal-wrapper__full-screen .written-content > * {
  font-family: "Relative";
}
.modal .modal-wrapper__full-screen .written-content p {
  margin: unset;
  line-height: 1.5;
}
.modal .modal-wrapper__full-screen .toggle-button__description > * {
  font-size: inherit !important;
  line-height: inherit !important;
}
.modal .modal-wrapper__full-screen .toggle-button__description > p:first-of-type {
  display: inline;
}

/**
 * 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
   ========================================================================== */
/* ==========================================================================
  1d. Sidebar Book
  ========================================================================== */
.c-sidebar-navigator li:after {
  background: none;
}
.c-sidebar-navigator li a {
  color: #14161E;
  gap: unset !important;
  margin-bottom: 0px !important;
}
.c-sidebar-navigator li a .c-sidebar-navigator__indicator {
  display: block;
  width: 4px;
  height: 4px;
  background: #14161E;
  border-radius: 50%;
  margin: 8px 24px 0 8px;
}
.c-sidebar-navigator li a.c-sidebar-navigator__link.is-active {
  text-decoration: underline;
}

/* ==========================================================================
   9. a 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;
}

/* ==========================================================================
  9. b Mobile Navigation (auto columns)
========================================================================== */
@media screen and (max-width: 1023px) {
  .mobile-navigator {
    position: fixed;
    height: 60px;
    max-height: 60px !important;
    background: #F7F7F7;
    top: unset;
    bottom: 24px;
    left: 24px;
    width: calc(100% - 48px) !important;
    border: 1px solid #14161E;
    box-shadow: unset;
    border-radius: 16px;
    display: grid !important;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-column-gap: 8px;
    justify-items: center;
    z-index: 1;
  }
  .mobile-navigator .spacer {
    display: none;
  }
}

/* ==========================================================================
  12. Action wrapper
========================================================================== */
.content-action__wrapper {
  position: relative;
  height: 100%;
}

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

/**
 *  Program Hero
 *
 * 1. Variables
 * 2. Hero
 * 3. Testimonials
 * 4. Offerings
 * 5. Plan Cards
 * 6. FAQs
 * 7. Program metadata
 *
 */
/* ==========================================================================
  1. Variables
========================================================================== */
/* ==========================================================================
  2. Hero
========================================================================== */
.program .content-hero {
  grid-template-columns: minmax(494px, 780px) minmax(230px, 320px);
  border: unset;
  padding: unset;
  padding: 120px 0;
  min-height: 320px;
}
@media screen and (max-width: 767px) {
  .program .content-hero {
    grid-template-columns: 1fr;
    padding-bottom: 60px;
    color: #FFFFFF;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .content-hero {
    grid-template-columns: 1fr;
  }
}
.program .content-hero .modal .written-content {
  color: #14161E;
}
@media screen and (max-width: 1023px) {
  .program .content-hero-left .metadata > div {
    max-width: unset;
  }
}
@media screen and (max-width: 767px) {
  .program .content-hero-left nav.breadcrumbs a {
    color: #FFFFFF;
  }
}
@media screen and (max-width: 767px) {
  .program .content-hero-left nav.breadcrumbs .dropdown .dropdown-menu .dropdown-content a.dropdown-line {
    color: #14161E;
  }
}
@media screen and (max-width: 767px) {
  .program .content-hero-left nav.breadcrumbs .icon {
    fill: #FFFFFF;
  }
}
.program .content-module .content-middle {
  grid-template-columns: 66.33% 30.33%;
  grid-column-gap: 5.33%;
}
@media screen and (max-width: 767px) {
  .program .content-module .content-middle {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .program .content-module .content-middle {
    grid-template-columns: 1fr;
  }
}
.program .content-middle {
  grid-template-columns: 66.33% 24.33%;
}
@media screen and (max-width: 1023px) {
  .program .content-middle {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 767px) {
  .program .content-middle .content-middle-right {
    margin-top: 0;
  }
}
.program .content-middle .content-middle-right .contributors img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}
@media screen and (max-width: 767px) {
  .program .content-middle .content-middle-right .contributors.tile {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .content-middle .content-middle-right .contributors.tile {
    margin-bottom: 0;
  }
}
.program .content-middle .content-middle-left .prerequisites > div > ul {
  margin: 16px 0 16px 24px;
}
.program .content-middle .content-middle-left .prerequisites > div > ul > li {
  position: relative;
}
.program .content-middle .content-middle-left .prerequisites > div > ul > li:before {
  content: "•";
  color: #CE3F00;
  position: absolute;
  display: inline-block;
  background-color: transparent;
  left: -16px;
}
.program .content-middle .content-middle-left .prerequisites > div > ul > li + li {
  margin-top: 16px;
}
.program .content-middle .content-middle-left .prerequisites > div > ul > li > a {
  color: #CE3F00;
}

/* ==========================================================================
  3. Testimonials
========================================================================== */
.program .testimonials {
  display: grid;
  gap: 48px;
  grid-template-columns: 296px 1fr;
  padding: 108px 0;
}
@media screen and (max-width: 767px) {
  .program .testimonials {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    padding: 24px 0;
  }
}

/* ==========================================================================
  4. Offerings
========================================================================== */
.program .offerings {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-items: center;
}
.program .offerings-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 80px;
  width: 100%;
  gap: 48px;
}
.program .offerings-list-item {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 325px;
}
.program .offerings-list-item__image > svg {
  width: 48px;
  height: 48px;
}
@media screen and (max-width: 767px) {
  .program .offerings-list-item__image > svg {
    width: 40px;
    height: 40px;
  }
}
.program .offerings-list-item__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==========================================================================
  5. Plan Cards
========================================================================== */
.program .plan_cards {
  display: flex;
  justify-content: center;
  align-items: center;
}
.program .plan_cards .plan_cards__container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  max-width: 776px;
  max-height: 320px;
}
@media screen and (max-width: 767px) {
  .program .plan_cards .plan_cards__container {
    flex-direction: column;
    max-height: unset;
  }
}
.program .plan_cards .plan_cards__container .plan_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 24px 40px 24px 24px;
  max-width: 380px;
}

/* ==========================================================================
  6. FAQs
========================================================================== */
.program .faqs .content-middle {
  grid-template-columns: 24.33% 66.33%;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .program .faqs .content-middle {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .faqs .content-middle {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .program .faqs .content-middle .content-middle-right.faq {
    margin-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .faqs .content-middle .content-middle-right.faq {
    margin-top: 40px;
  }
}
.program .faqs .content-middle .content-middle-right.faq .accordion-content details .content-description {
  padding-left: 24px;
}

/* ==========================================================================
  7. Program Metadata
========================================================================== */
.program .programme-metadata {
  display: flex;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 16px;
  padding: 24px;
  margin-top: 36px;
}
.program .programme-metadata > * {
  flex-grow: 1;
}
@media screen and (max-width: 767px) {
  .program .programme-metadata {
    flex-direction: column;
    gap: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .program .programme-metadata > * {
    flex: 1 0 50%;
  }
}
.program .programme-metadata__segment {
  display: flex;
  gap: 16px;
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #14161E;
}
@media screen and (max-width: 767px) {
  .program .programme-metadata__segment {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid #14161E;
    padding-bottom: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata__segment {
    padding-right: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata__segment:nth-of-type(2) {
    border-right: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata__segment:nth-of-type(3) {
    padding-left: 0;
    padding-top: 20px;
  }
}
.program .programme-metadata__segment:first-of-type {
  padding-left: 0;
}
.program .programme-metadata__segment:last-of-type {
  border-right: none;
  padding-right: 0;
}
@media screen and (max-width: 767px) {
  .program .programme-metadata__segment:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .program .programme-metadata__segment:last-of-type {
    padding-top: 20px;
  }
}
.program .programme-metadata__segment-icon {
  width: 30px;
  height: 30px;
  align-self: center;
}
.program .programme-metadata__segment-info {
  display: grid;
  align-items: center;
  gap: 6px;
}

/**
 *
 * 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 {
  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;
  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(pencil-742a620a4e8a9b57e9aab1fe2ea15e9999b95424461a3e828634fc91d8d882db.svg);
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  top: 0px;
}

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

/* ==========================================================================
  1c. Non-highlighting notebook
========================================================================== */
@media screen and (min-width: 1024px) {
  .c-notebook.non-highlighting {
    position: absolute;
    top: 0;
    right: 48px;
  }
  .c-notebook.non-highlighting .c-notebook__entry .c-notebook__actions {
    justify-content: flex-start;
  }
}

@media screen and (min-width: 1024px) {
  .video-episode--cinema .video-actions .c-notebook.non-highlighting {
    top: 48px;
    left: 0px;
  }
}

/* ==========================================================================
   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;
}
@media screen and (min-width: 1024px) {
  .content-module .c-reading-experience-selector {
    position: absolute;
    top: 0px;
    right: 48px;
  }
}

/**
 *  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: hidden;
  scrollbar-width: none;
}
.toc-container::-webkit-scrollbar {
  display: none;
}

.toc {
  border: 1px solid #14161E;
  border-radius: 16px;
  background-color: #FFFFFF;
  overflow: hidden;
}
.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;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.toc .toc-body::-webkit-scrollbar {
  display: none;
}
.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;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 0;
}
.content-counter > button {
  position: absolute;
  z-index: 1;
  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 #F7F7F7;
  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.quiz {
  position: unset;
  background-color: #FFFFFF;
  color: #14161E;
  border: 1px solid #14161E;
  border-radius: 24px;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz {
    gap: 16px;
    max-width: 100%;
    padding: 24px;
  }
}
.title-slide.quiz .quiz-loader {
  transform: translateY(-50%);
  top: 50%;
  position: relative;
  margin-top: -80px;
}
.title-slide.quiz .slide-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 24px;
  max-width: 594px;
  width: 100%;
  height: auto;
  top: unset;
  left: unset;
  position: relative;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action {
    gap: 16px;
    max-width: 100%;
  }
}
.title-slide.quiz .slide-action .details {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 12px;
  flex: none;
  order: 0;
  flex-grow: 0;
  max-width: inherit;
}
.title-slide.quiz .slide-action .details .info {
  flex: none;
  order: 0;
  flex-grow: 0;
  text-align: center;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 2px;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action .details .info {
    font-size: 0.75rem;
  }
}
.title-slide.quiz .slide-action .details .title {
  flex: none;
  order: 1;
  flex-grow: 0;
  font-size: 2rem;
  line-height: 1.25;
  text-align: center;
  max-width: inherit;
  padding: 0 24px;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action .details .title {
    font-size: 1.5rem;
    line-height: 1.5;
  }
}
.title-slide.quiz .slide-action .details p {
  font-size: 0.875rem;
  text-align: center;
  order: 2;
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action .details p {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .title-slide.quiz .slide-action .btn-start-quiz {
    height: 40px;
    padding: 0 16px;
    font-size: 0.875rem;
    border-radius: 12px;
  }
}
.title-slide h1 {
  font-size: 2.5rem;
  line-height: 1.25;
  width: calc(100% - 64px);
  margin-top: 32px;
  margin-bottom: 8px;
  margin-left: 32px;
}
.title-slide p {
  font-size: 1rem;
  margin-left: 32px;
}
.title-slide .slide-episode {
  position: absolute;
  left: 32px;
  bottom: 32px;
  width: calc(75% - 64px);
}
.title-slide .slide-episode h2 {
  line-height: 1;
  padding-bottom: 8px;
  font-size: 0.75rem;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  font-weight: 500;
}
.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--learning-path, .title-slide .slide-domain--multi-domain, .title-slide .slide-domain--professional-growth, .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, .title-slide .slide-domain--article {
  /* For Chrome, Edge & Opera */
  -webkit-mask: url(domain-pattern-e91ab1919aa70863f57140f46a3ad0963245dbecaf37cf4f1b7a8f24f1837ec1.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  /* For Safari & Firefox */
  mask: url(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--article {
  background-color: #157857;
}
.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--professional-growth {
  background-color: #E3A93D;
}
.title-slide .slide-domain--multi-domain {
  background-color: #AC9FAB;
}
.title-slide .slide-domain--learning-path {
  background-color: #597CEE;
}
.title-slide .slide-domain--video-course {
  background-color: #E34A4C;
}
.title-slide .slide-domain--book {
  background-color: #FF8847;
}

.segment-slide .slide-episode h2 {
  text-transform: unset;
  letter-spacing: normal !important;
  font-weight: 400;
}
.segment-slide .slide-episode h3 {
  font-size: 1.5rem;
}

/* ==========================================================================
 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;
  }
  .segment-slide .slide-episode h2 {
    text-transform: unset;
    letter-spacing: normal !important;
    font-weight: 400;
  }
}
/**
 * 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;
  z-index: 0;
}
@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 .badge-container {
  width: 12.5rem;
  height: 12.5rem;
}
.achievements .badge-container img.greyed {
  filter: grayscale(100%);
  opacity: 0.5;
}

/*
*
* Annotations page
*
*/
.annotations .notebook {
  background: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 1rem;
}
.annotations .notebook > div, .annotations .notebook > h3 {
  position: relative;
}
.annotations .notebook.card-glow:hover {
  z-index: unset;
}

/**
 *  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-layout.chromeless-wide {
  max-width: 800px;
}

.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;
}
@media screen and (min-width: 1024px) {
  .article-layout .toc-expanded {
    position: relative;
    max-width: 692px;
    width: 100%;
    margin: 0 auto 80px;
  }
}
.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: none;
  }
}

/* ==========================================================================
  4. Article TOC
 ========================================================================== */
/* ==========================================================================
X. Chapter layout w/chapters
========================================================================== */
@media screen and (min-width: 1024px) {
  .article-layout .toc-expanded .toc .toc-body {
    max-height: calc(100vh - 152px);
  }
}
.article-layout .c-mobile-navigator {
  display: none;
}
@media screen and (max-width: 767px) {
  .article-layout .btn-chapters-close .btn-chapters-close-desktop {
    display: none;
  }
}
.article-layout .btn-chapters-close .btn-chapters-close-mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .article-layout .btn-chapters-close .btn-chapters-close-mobile {
    display: block;
    max-height: 12px;
    max-width: 12px;
  }
}
@media screen and (max-width: 1023px) {
  .article-layout.s_show_mobile_menu.l-admin--sidebar-open .toc-expanded {
    display: block !important;
    position: fixed;
    width: calc(100% - 48px);
    top: 24px;
    left: 24px;
    z-index: 9999999;
  }
  .article-layout.s_show_mobile_menu.l-admin--sidebar-open .toc-expanded .toc-container {
    max-height: calc(100vh - 124px);
    height: calc(100vh - 124px);
  }
}
@media screen and (max-width: 1023px) {
  .article-layout.s_show_mobile_menu.l-admin--sidebar-open .toc-expanded .toc .toc-body {
    padding-bottom: 220px;
  }
}

/**
 *
 * 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 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-font-serif .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-font-serif .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-font-serif .written-content .c-book-chapter .c-written-tutorial__content .note,
.l-chapter-font-serif .written-content .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 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-font-sans-serif .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-font-sans-serif .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-font-sans-serif .written-content .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 .written-content .c-book-chapter .c-written-tutorial__content figcaption {
  font-family: "Relative Mono" !important;
}

/* ==========================================================================
6. Chapter text size
========================================================================== */
.written-content .c-book-chapter .c-written-tutorial__content h1,
.written-content .c-book-chapter .c-written-tutorial__content h2 {
  font-size: 1.875em;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content h1,
  .written-content .c-book-chapter .c-written-tutorial__content h2 {
    font-size: 1.5em;
    /* 24/16 */
  }
}
.written-content .c-book-chapter .c-written-tutorial__content h3 {
  font-size: 1.5em;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content h3 {
    font-size: 1.25em;
    /* 21/16 */
  }
}
.written-content .c-book-chapter .c-written-tutorial__content h4 {
  font-size: 1.188em;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content h4 {
    font-size: 1em;
  }
}
.written-content .c-book-chapter .c-written-tutorial__content ul,
.written-content .c-book-chapter .c-written-tutorial__content ol,
.written-content .c-book-chapter .c-written-tutorial__content p,
.written-content .c-book-chapter .c-written-tutorial__content blockquote {
  font-size: 1em;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content ul,
  .written-content .c-book-chapter .c-written-tutorial__content ol,
  .written-content .c-book-chapter .c-written-tutorial__content p,
  .written-content .c-book-chapter .c-written-tutorial__content blockquote {
    font-size: 0.9375em;
    /* 15/16 */
    margin-top: 18px;
  }
}
.written-content .c-book-chapter .c-written-tutorial__content ul p,
.written-content .c-book-chapter .c-written-tutorial__content ol p,
.written-content .c-book-chapter .c-written-tutorial__content p p,
.written-content .c-book-chapter .c-written-tutorial__content blockquote p {
  font-size: 1em;
}
.written-content .c-book-chapter .c-written-tutorial__content ul li p,
.written-content .c-book-chapter .c-written-tutorial__content ol li p,
.written-content .c-book-chapter .c-written-tutorial__content p li p,
.written-content .c-book-chapter .c-written-tutorial__content blockquote li p {
  margin-top: 0.5rem;
  font-size: 1em;
  display: inherit;
}
.written-content .c-book-chapter .c-written-tutorial__content ul ul,
.written-content .c-book-chapter .c-written-tutorial__content ul ol,
.written-content .c-book-chapter .c-written-tutorial__content ol ul,
.written-content .c-book-chapter .c-written-tutorial__content ol ol,
.written-content .c-book-chapter .c-written-tutorial__content p ul,
.written-content .c-book-chapter .c-written-tutorial__content p ol,
.written-content .c-book-chapter .c-written-tutorial__content blockquote ul,
.written-content .c-book-chapter .c-written-tutorial__content blockquote ol {
  font-size: 1em;
}
.written-content .c-book-chapter .c-written-tutorial__content pre {
  font-size: 0.875em;
}
.written-content .c-book-chapter .c-written-tutorial__content pre code {
  font-size: 1em;
}
.written-content .c-book-chapter .c-written-tutorial__content code {
  font-size: 0.875em;
}
.written-content .c-book-chapter .c-written-tutorial__content blockquote {
  font-size: 1em;
  padding-top: 24px;
}
@media screen and (max-width: 767px) {
  .written-content .c-book-chapter .c-written-tutorial__content blockquote {
    font-size: 0.9375em;
    /* 15/16 */
  }
}

.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 75%;
}
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 30px;
}
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 18px;
}
.l-chapter-text-size-75 .written-content .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 80%;
}
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 30px;
}
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 18px;
}
.l-chapter-text-size-80 .written-content .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-85 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 85%;
}

.l-chapter-text-size-90 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 90%;
}

.l-chapter-text-size-100 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 100%;
}

.l-chapter-text-size-110 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 110%;
}

.l-chapter-text-size-120 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 120%;
}

.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 130%;
}
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 42px;
}
@media screen and (max-width: 767px) {
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 24px !important;
  }
}
.l-chapter-text-size-130 .written-content .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content {
  font-size: 140%;
}
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h1,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h2,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h3,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h4,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h5 {
  margin-top: 42px;
}
@media screen and (max-width: 767px) {
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h1,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h2,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h3,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h4,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content h5 {
    margin-top: 30px !important;
  }
}
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content ul,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content ol,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content p,
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content ul,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content ol,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content p,
  .l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content blockquote {
    margin-top: 24px !important;
  }
}
.l-chapter-text-size-140 .written-content .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

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

/**
 *
 * Carbon ads custom CSS classes to fix layout, display and positioning
 *
 * 1. Content
 *
 * 2. Hero
 *
 *
 *
 **/
/* REFERENCES

  https://codepen.io/collection/nrwLmB
  https://codepen.io/collection/AyEoKk
  https://buysellads.gitbook.io/monetization/custom-template-integration/about
*/
/* ==========================================================================
1. Content
========================================================================== */
@media screen and (min-width: 1500px) {
  .carbon-ad-box {
    position: absolute;
    right: -180px;
    max-width: 150px;
    height: 100%;
  }
}
.carbon-ad-box #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;
  text-align: left;
  position: relative;
}
@media screen and (min-width: 1500px) {
  .carbon-ad-box #carbonads {
    position: sticky;
    top: 16px;
  }
}
.carbon-ad-box #carbonads a {
  text-decoration: none;
  color: inherit;
}
.carbon-ad-box #carbonads a:hover {
  color: inherit;
}
.carbon-ad-box #carbonads span {
  display: block;
  overflow: hidden;
}
.carbon-ad-box #carbonads img {
  margin: 0;
  padding: 0;
}
.carbon-ad-box #carbonads .carbon-img {
  display: block;
  margin: 0 auto 8px;
  line-height: 1;
}
.carbon-ad-box #carbonads .carbon-text {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}
.carbon-ad-box #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: 1498px) {
  .carbon-ad-box #carbonads {
    margin: 20px 0;
  }
  .carbon-ad-box #carbonads .carbon-wrap {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .carbon-ad-box #carbonads .carbon-img {
    margin: 0;
  }
  .carbon-ad-box #carbonads .carbon-text {
    margin-bottom: 28px;
    padding: 10px 10px 0 10px;
    font-size: 12px;
  }
  .carbon-ad-box #carbonads .carbon-poweredby {
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
}

/* ==========================================================================
2. Hero
========================================================================== */
#carbon-hero-ad {
  z-index: 100;
  margin-top: 50px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  overflow: hidden;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 1px 8px 1px hsla(0, 100%, 100%, 0.05);
}
#carbon-hero-ad * {
  margin: initial;
  padding: initial;
}
#carbon-hero-ad .native-banner {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  background-color: #14161E;
  color: #FFFFFF;
  flex-flow: row nowrap;
}
#carbon-hero-ad .native-img {
  display: flex;
  align-items: center;
  padding: 0 20px;
  line-height: 0;
  box-sizing: border-box;
}
#carbon-hero-ad .native-img img {
  line-height: 1;
  max-width: 125px;
}
#carbon-hero-ad a {
  color: #FFFFFF;
}
#carbon-hero-ad .native-details {
  display: flex;
  align-items: start;
  padding: 10px;
  flex-flow: column nowrap;
}
#carbon-hero-ad .native-company {
  font-size: 10px;
  font-weight: 600;
  max-width: 80%;
  text-transform: uppercase;
}
#carbon-hero-ad .native-desc {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
#carbon-hero-ad .native-cta {
  margin-top: 4px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  border: solid 1px hsla(0, 100%, 100%, 0.1);
  border-radius: 4px;
}

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

/* new class for path builder as a placeholder */
.path-builder {
  display: flex;
  gap: 96px;
}
@media screen and (max-width: 1023px) {
  .path-builder {
    flex-direction: column;
    gap: 48px;
  }
}
.path-builder nav.path-builder-nav {
  max-width: 298px;
  width: 100%;
}
.path-builder .path-builder-container {
  border-radius: 16px;
  padding: 24px;
  background-color: #14161E;
  margin-top: 96px;
  max-width: 792px;
  width: 100%;
  border: 1px solid #FFFFFF;
  /* Placeholder for list items until we can get a fix for the murakami version */
}
@media screen and (max-width: 1023px) {
  .path-builder .path-builder-container {
    margin-top: unset;
  }
}
.path-builder .path-builder-container .search.input-icon .input-right {
  right: 16px;
  width: auto;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6) !important;
}
.path-builder .path-builder-container .search.input-icon .search-normal {
  padding-right: 120px;
}
.path-builder .path-builder-container .error-message {
  background-color: #962224;
  inline-size: fit-content;
  margin-top: 8px;
  padding: 13px 16px;
  border-radius: 0.5rem;
  position: relative;
  top: -30px;
}
.path-builder .path-builder-container .clip {
  position: relative;
  top: 16px;
  left: 32px;
  z-index: 1;
}
.path-builder .path-builder-container .ol-list li::before {
  left: -1em;
  top: 1em;
  border: none;
}
.path-builder .path-builder-container .ol-list li {
  max-width: 701px;
}
.path-builder .path-builder-container .reposition-control {
  position: absolute;
  display: grid;
  gap: 8px;
  left: -56px;
  top: 0;
}
.path-builder svg.icon {
  max-height: 16px;
  max-width: 16px;
}
.path-builder .tooltip .tooltip-text {
  max-width: 245px;
}
.path-builder .suggestions {
  position: relative;
  background-color: #2B2D34;
  border: 1px solid #FFFFFF;
  border-radius: 16px;
  top: -30px;
  max-width: 744px;
  padding: 24px;
  z-index: 1;
  display: flex;
  gap: 24px;
}
.path-builder .suggestions-content {
  max-width: 610px;
}
.path-builder .suggestions-btn {
  align-self: flex-end;
}
.path-builder .suggestions-link {
  font-size: 1.25rem;
  line-height: 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid #FFFFFF;
}
.path-builder .suggestions-metadata {
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1rem;
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.path-builder .suggestions-metadata > svg {
  max-width: 20px;
  max-height: 20px;
}
.path-builder .suggestions-description {
  margin-top: 16px;
  display: flex;
  align-items: flex-end;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.delete-modal,
.share-modal,
.preview {
  width: 100%;
}
.delete-modal svg,
.share-modal svg,
.preview svg {
  cursor: pointer;
  max-width: 20px;
  max-height: 20px;
}

.assignees-table.elementary-table {
  border: 1px solid #FFFFFF;
}
.assignees-table.elementary-table .tooltip > svg {
  max-width: 16px;
  max-height: 16px;
  margin-bottom: -4px;
}
.assignees-table.elementary-table .tooltip .tooltip-text.tooltip-text-multi {
  max-width: none;
}
.assignees-table.elementary-table .dropdown {
  display: flex;
  justify-content: flex-start;
}
.assignees-table.elementary-table .dropdown .dropdown-menu {
  right: 0;
  margin-top: 20px;
  left: unset;
}
.assignees-table.elementary-table .dropdown .dropdown-menu .dropdown-content a.dropdown-line {
  display: flex;
  justify-content: flex-start;
}

.cards-clp .card.card-clp:hover .card-bottom .card-action {
  z-index: 3;
}
.cards-clp .card.card-clp .card-bottom .card-action .tooltip svg.none-editable-assignee {
  opacity: 0.2;
}
.cards-clp .card.card-clp .card-bottom .card-action .tooltip .tooltip-text {
  text-align: center;
}
.cards-clp .card.card-clp .card-bottom .card-action svg.icon {
  width: 20px;
  height: 20px;
}
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu {
  z-index: 999999;
}
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu a.dropdown-line,
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu p.dropdown-line,
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu button.dropdown-line {
  display: flex;
  justify-content: flex-start;
}
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu p.dropdown-line {
  cursor: default;
}
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu p.dropdown-line svg.none-editable-assignee,
.cards-clp .card.card-clp .card-bottom .card-action .dropdown .dropdown-menu p.dropdown-line > span {
  opacity: 0.2;
}

/* ============================================================
 Team Library
============================================================ */
.team-library-member .tabs-content {
  padding: 32px 0;
}
.team-library-admin .tabs-content {
  padding: 24px 0;
}

/* ============================================================
 Assignee Modal
============================================================ */
.assignee-modal .modal-sticky-content {
  padding: unset;
  padding-bottom: 80px;
}
.assignee-modal .modal-sticky-content .elementary-table {
  border: unset;
}
.assignee-modal .elementary-table {
  border-radius: none;
}
.assignee-modal .elementary-table.is-controls .checkbox {
  padding-left: 16px;
}
.assignee-modal .elementary-table.is-controls td {
  margin: 4px;
}
.assignee-modal .elementary-table.is-controls .user-profile {
  display: flex;
  gap: 16px;
  height: 40px;
}
.assignee-modal .elementary-table.is-controls .user-profile .user-info img.profile-pic {
  border: 1px solid #FFFFFF;
  border-radius: 8px;
  width: 40px;
}
.assignee-modal .checkbox {
  display: inline-block;
}

/* ============================================================
 Progress indicator
============================================================ */
.progress-bar {
  width: 20px;
  height: 20px;
  position: relative;
}
.progress-bar .circle {
  fill: transparent;
  transform: rotate(-90deg);
}
.progress-bar .circle .circle-outline {
  /* Opacity for remaining progress */
  stroke: rgba(215, 215, 215, 0.2);
  stroke-width: 2px;
}
.progress-bar .circle .circle-progress {
  /* Solid color for completed progress */
  stroke: #00B87E;
  stroke-width: 2px;
  fill: transparent;
  stroke-dasharray: 0 56.55;
}

/**
 *
 *  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: 48px;
  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;
}
.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;
  max-height: none;
  overflow-y: visible;
  overflow-x: visible;
}
@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-menu .dropdown-trigger.advance-filter-select {
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 24px 0 0;
}
.library .toc .accordion .accordion-menu .dropdown-trigger.advance-filter-select .trigger-text {
  font-size: 1rem;
  color: #14161E;
  display: block;
}
.library .toc .accordion .accordion-menu .dropdown-menu {
  min-width: 298px;
  background-color: #FFFFFF;
  border: 1px solid #14161E;
  border-radius: 12px;
  margin-top: 8px;
  position: absolute;
  width: 100%;
  z-index: 99999;
  max-height: 416px;
  overflow: hidden;
  height: 80vh;
}
@media screen and (max-width: 959px) {
  .library .toc .accordion .accordion-menu .dropdown-menu {
    position: relative;
    width: auto;
    min-width: 0;
  }
}
.library .toc .accordion .accordion-menu .dropdown-menu .dropdown-content {
  overflow-y: auto;
  height: 100%;
}
.library .toc .accordion .accordion-menu .dropdown-menu .dropdown-content label.checkbox {
  margin-top: 16px;
}
.library .toc .accordion .accordion-menu .dropdown-menu .dropdown-content label.checkbox .checkbox-tick > svg {
  left: 7px;
}
.library .toc .accordion .accordion-menu .dropdown-menu .dropdown-content .dropdown-content--container {
  padding: 0px 0px 80px 24px;
}
.library .toc .accordion .accordion-menu .dropdown-menu .dropdown-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #FFFFFF;
  border-top: 1px solid #D7D7D7;
  padding-left: 24px;
}
.library .toc .accordion .accordion-menu:nth-last-child(n+2) {
  padding-bottom: 8px;
}
.library .toc .accordion .accordion-trigger {
  padding: 0 24px;
}
.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
* 10c. Article — Spoilers
* 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
* 26. Quiz
* 27. Program
* 28. Progress - Mark as complete
* 29. Content Module
*
* 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
  ========================================================================== */
  /* ==========================================================================
  10c. Article — Spoilers
  ========================================================================== */
  /* ==========================================================================
  10d. Article — Figcaptions
  ========================================================================== */
  /* ==========================================================================
  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
  ========================================================================== */
  /* ==========================================================================
    12i. Book Chapter Sidebar
  ========================================================================== */
  /* ==========================================================================
  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 */
  /* ==========================================================================
    26. Quiz
  ========================================================================== */
  /* ==========================================================================
    27. Program
  ========================================================================== */
  /* ==========================================================================
    28. Progress - Mark as complete
  ========================================================================== */
  /* ==========================================================================
    29. Content Module
  ========================================================================== */
}
.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, .prefers-color-scheme--dark section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 span.fc-orange-glow, .prefers-color-scheme--dark section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 span.fc-orange-glow {
  color: #FF5A00;
}
.prefers-color-scheme--dark section.kodeco-home-hero .module-background::before, .prefers-color-scheme--dark section.kodeco-home-hero_v1 .module-background::before, .prefers-color-scheme--dark section.kodeco-home-hero_v2 .module-background::before {
  background-color: #0E0F14;
}
.prefers-color-scheme--dark section.kodeco-home-hero .module-background .module-background-round-top::before, .prefers-color-scheme--dark section.kodeco-home-hero_v1 .module-background .module-background-round-top::before, .prefers-color-scheme--dark section.kodeco-home-hero_v2 .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, .prefers-color-scheme--dark section.kodeco-home-hero_v1 .module-background .module-background-round-bottom::before, .prefers-color-scheme--dark section.kodeco-home-hero_v2 .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, .prefers-color-scheme--dark section.home-logos_v1 .home-logos-grid > div, .prefers-color-scheme--dark section.home-logos_v2 .home-logos-grid > div {
  background-color: #14161E;
  border-color: #30363D;
}
.prefers-color-scheme--dark section.home-logos .home-logos-grid > div > img, .prefers-color-scheme--dark section.home-logos_v1 .home-logos-grid > div > img, .prefers-color-scheme--dark section.home-logos_v2 .home-logos-grid > div > img {
  filter: unset;
}
.prefers-color-scheme--dark section.home-testimonials .testimonials-card--container .card .card-topright .card-artwork span.badge, .prefers-color-scheme--dark section.home-testimonials_v1 .testimonials-card--container .card .card-topright .card-artwork span.badge, .prefers-color-scheme--dark section.home-testimonials_v2 .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, .prefers-color-scheme--dark section.home-testimonials_v1 .testimonials-card--container .card .card-topright .card-artwork span.badge svg, .prefers-color-scheme--dark section.home-testimonials_v2 .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 .accordion .accordion-menu .dropdown-trigger.advance-filter-select {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .library .accordion .accordion-menu .dropdown-trigger.advance-filter-select .trigger-text {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .library .accordion .accordion-menu .dropdown-menu {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .library .accordion .accordion-menu .dropdown-menu .dropdown-footer {
  background-color: #14161E;
}
.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 .section-list ul.content-list--padded li:hover, .prefers-color-scheme--dark .section-list ul.content-list--padded li.active {
  background: #3B3D43;
}
.prefers-color-scheme--dark .rating-questions .rate-star {
  border: 1px solid #FFFFFF !important;
  background-color: transparent !important;
}
.prefers-color-scheme--dark .rating-questions .rate-star:hover {
  background-color: #3B3D43 !important;
}
.prefers-color-scheme--dark .rating-questions .rate-star svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark .rating-questions .c-rate__star--green {
  background-color: #CE3F00 !important;
}
.prefers-color-scheme--dark .rating-questions .c-rate__star--green:hover {
  background-color: rgba(206, 63, 0, 0.8) !important;
}
.prefers-color-scheme--dark .rating-questions .c-review-module__answers > input[type=checkbox]:checked + label {
  background-color: #CE3F00;
  border: 1px solid #FFFFFF !important;
}
.prefers-color-scheme--dark .rating-questions .c-review-module__answers > input[type=checkbox]:checked + label:hover {
  background-color: rgba(206, 63, 0, 0.8);
}
.prefers-color-scheme--dark .rating-questions .c-review-module__answers label {
  border: 1px solid #FFFFFF !important;
  background-color: transparent;
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .rating-questions .c-review-module__answers label:hover {
  background-color: #3B3D43 !important;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF;
}
.prefers-color-scheme--dark .rating-questions .text-area {
  background-color: #07080A;
  color: #FFFFFF;
  border: 1px solid #FFFFFF !important;
}
.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 !important;
}
.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 .title-slide {
  background-color: #14161E;
  outline: 1px solid #3B3D43;
}
.prefers-color-scheme--dark .title-slide.quiz {
  color: #FFFFFF;
}
.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 .spoiler {
  border-color: #30363D;
  background-color: #14161E;
}
.prefers-color-scheme--dark .spoiler details summary {
  background-color: #CE3F00;
}
.prefers-color-scheme--dark .spoiler details summary span.dark-bg-black-night:hover {
  background-color: #3B3D43;
}
.prefers-color-scheme--dark .figcaption {
  color: #D7D7D7;
}
.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;
}
.prefers-color-scheme--dark .content-hero .book-cover-art img {
  border: 1px solid #3B3D43;
}
@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,
.prefers-color-scheme--dark .content-hero .metadata svg {
  fill: #FFFFFF !important;
}
.prefers-color-scheme--dark .content-hero.content-hero--dark svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .learning-path .content-hero {
  background-color: #14161E;
  border: 1px solid #30363D;
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .learning-path .content-hero {
    background-color: inherit;
    border: none;
  }
}
.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 .modal .modal-wrapper.modal-tight.modal-share button.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 .user-rating {
  border-bottom: 1px solid #3B3D43;
}
.prefers-color-scheme--dark .user-rating-self {
  background-color: rgba(7, 8, 10, 0.5);
}
.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 .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,
.prefers-color-scheme--dark .mobile-navigator {
  background: #0E0F14;
  border: 1px solid #FFFFFF;
}
.prefers-color-scheme--dark .c-mobile-navigator a:hover,
.prefers-color-scheme--dark .mobile-navigator a:hover {
  background: #3B3D43 !important;
}
.prefers-color-scheme--dark .chapter-navigation .c-sidebar-navigator__indicator {
  background: #FFFFFF;
}
.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 {
  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(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(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(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(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 .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;
}
.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 .c-written-tutorial__content.checkbox-ul li::before,
.prefers-color-scheme--dark .written-content.checkbox-ul li::before {
  filter: invert(1);
}
.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 .written-content blockquote {
  background-color: #0E0F14;
}
.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;
}
.prefers-color-scheme--dark .title-slide.quiz form.main > footer button[disabled] {
  background-color: rgba(215, 215, 215, 0.5) !important;
}
.prefers-color-scheme--dark .title-slide.quiz form.main > footer button[disabled]:hover {
  background-color: rgba(215, 215, 215, 0.5) !important;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .written-content > code {
  border-color: #3B3D43;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .toggle-button__input:checked + .toggle-button__label .toggle-button__icon {
  border: none;
  background-color: #FF5A00;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .toggle-button__input.correct + .toggle-button__label .toggle-button__icon {
  border: none;
  background-color: #00B87E;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .toggle-button__input.incorrect + .toggle-button__label .toggle-button__icon {
  border: none;
  background-color: #E34A4C;
}
.prefers-color-scheme--dark .title-slide.quiz .quiz-ui .toggle-button__icon {
  border: 1px solid #FFFFFF;
  background-color: transparent;
}
.prefers-color-scheme--dark #lottie-animation {
  filter: invert(1);
}
@media screen and (max-width: 767px) {
  .prefers-color-scheme--dark .program .program-hero {
    background-color: #14161E;
  }
}
.prefers-color-scheme--dark .program .content-hero {
  border: unset;
}
.prefers-color-scheme--dark .program .content-hero .modal .written-content {
  color: #FFFFFF;
}
.prefers-color-scheme--dark .program .programme-metadata {
  background-color: #14161E;
  border-color: #30363D;
}
.prefers-color-scheme--dark .program .programme-metadata__segment {
  border-color: #30363D;
}
.prefers-color-scheme--dark .program .contributors {
  background-color: #14161E;
  border-color: #30363D;
}
.prefers-color-scheme--dark .program .plan_cards__container .plan_card {
  background-color: #0E0F14;
  border: 1px solid #30363D;
}
.prefers-color-scheme--dark .program .faqs .content-middle .content-middle-left.faq > p a {
  color: #FFFFFF !important;
}
.prefers-color-scheme--dark .btn-mark-complete svg {
  fill: #FFFFFF;
}
.prefers-color-scheme--dark .content-module nav ul.content-list--padded li:hover, .prefers-color-scheme--dark .content-module nav ul.content-list--padded li.active {
  background: #3B3D43;
}

/**
 *
 * Layouts
 *
 * For use on path pages
 *
 * 1. Grid
 *
 * 2. Hero
 *
 * 3. Course List
 *
 * 4. Multi-modal LP home page
 *
 **/
/* ==========================================================================
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: 3rem;
  line-height: 1.125;
}
@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;
}
/* ==========================================================================
3. Multi-modal LP Homepage
========================================================================== */
.learning-path.content-module .achievements .badge-container {
  width: 165px;
  height: 165px;
  padding: 20px;
}
.learning-path.content-module .achievements .badge-container.dotted-outline {
  border: dashed 1px #3B3D43;
  border-radius: 16px;
}

/**
 *
 *  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(module-page-header-yellow%401.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: 8px;
  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: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  column-gap: 40px;
  row-gap: 40px;
}
.new-content-grid > div {
  display: flex;
  justify-content: center;
}

.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.25;
  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%;
  z-index: 1;
}

/* ==========================================================================
  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-glow:hover {
  z-index: unset;
}
.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;
  }
}

/* ==========================================================================
  10. Dropdown
 ========================================================================== */
.home-grid .card .dropdown .dropdown-menu .dropdown-content {
  min-width: 298px;
}

/* ==========================================================================
  11. My bookmarks
 ========================================================================== */
.my-bookmarks .card .card-bottom .card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**
 *  Video Episode Page
 *
 * 1. Layout
 * 2. Cinema Mode
 * 3. Actions
 * 4. Table of Contents
 * 5. Transcript
 * 6. Notes
 * 7. Responsiveness
 */
/* ==========================================================================
  1. Layout
 ========================================================================== */
.breadcrumbs-video {
  text-align: center;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1536px;
  margin: 0 auto;
}
@media screen and (max-width: 1019px) {
  .breadcrumbs-video {
    text-align: left;
  }
}
@media screen and (max-width: 1019px) {
  .breadcrumbs-video > a.dropdown-line {
    display: none;
  }
}
.breadcrumbs-video .dropdown {
  display: none;
}
@media screen and (max-width: 1019px) {
  .breadcrumbs-video .dropdown {
    display: inline-flex;
  }
}

.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: 48px;
}
@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: 0.875rem;
  }
}
.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: none;
  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;
  font-weight: 400;
  background: none;
  box-shadow: none;
  border: none;
}
.transcript ul li {
  position: relative;
}
.transcript ul li .video-timestamp {
  margin-left: 0px;
}
.transcript ul li p {
  margin-left: 0px;
}
.transcript ul li p .video-timestamp {
  margin-left: -24px;
}
.transcript ol li span.video-timestamp {
  left: -82px;
}
.transcript blockquote {
  margin-left: 62px;
}
.transcript blockquote > p {
  margin-left: 0px;
  margin-top: 0px;
}
.transcript blockquote > p span.video-timestamp {
  left: -86px;
}
.transcript ul, .transcript p, .transcript ol, .transcript pre {
  font-size: 1rem;
  margin-left: 62px;
  position: relative;
}
.transcript pre code {
  padding: 0;
  border: none;
}
.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;
  font-weight: 700;
}

.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: none;
  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(21, 100%, 50%) hsla(0, 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(0, 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(21, 100%, 50%) hsla(228, 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(228, 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(community-sprite%401.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(21, 100%, 50%) hsla(228, 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(228, 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;
}

/**
*
* Home
*
* 1. V1: Hero
*
* 2. V1: Intro
*
* 3. V1: Why
*
* 4. V1: Platforms
*
* 5. V1: Content
*
* 6. V1: Community
*
* 7. V1: Logos
*
* 8. V1: Testimonials
*
* 9. V2: Hero
*
* 10. V2: Intro
*
* 11. V2: Why
*
* 12. V2: Platforms
*
* 13. V2: Content
*
* 14. V2: Community
*
* 15. V2: Logos
*
* 16. V2: Testimonials
*
*
*
**/
/* ==========================================================================
1. V1: Hero
========================================================================== */
section.kodeco-home-hero_v1 {
  position: relative;
  z-index: 1;
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content {
  padding-top: 80px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content {
    padding-top: 60px;
  }
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
  max-width: 675px;
  margin: 0 auto;
  text-align: center;
  font-size: 4.5rem;
  line-height: 1;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.25;
    text-align: left;
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
    font-size: 2.5rem;
  }
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 span {
  color: #FF5A00;
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
  max-width: 495px;
  margin-top: 122px;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
    margin-top: 32px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
    max-width: auto;
    font-size: 1.125rem;
  }
}
section.kodeco-home-hero_v1 .module-background {
  max-width: 1680px;
  margin: -144px auto 0;
  height: 700px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .module-background {
    height: 700px;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .module-background {
    display: none;
  }
}
section.kodeco-home-hero_v1 .module-background:before {
  width: 742px;
  border-radius: 0 0 48px 0;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .module-background:before {
    width: 100%;
  }
}
section.kodeco-home-hero_v1 .module-background .module-background-round-top {
  position: absolute;
  top: 0;
  left: 742px;
}
section.kodeco-home-hero_v1 .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_v1 .module-background .module-background-round-bottom {
  position: absolute;
  top: 240px;
  left: 0;
  bottom: auto;
}
section.kodeco-home-hero_v1 .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. V1: Intro
========================================================================== */
section.home-intro_v1 {
  display: grid;
  grid-template-columns: 445px 1fr;
  grid-column-gap: 14%;
  margin-top: 144px;
}
@media screen and (max-width: 1079px) {
  section.home-intro_v1 {
    grid-column-gap: 98px;
  }
}
@media screen and (max-width: 979px) {
  section.home-intro_v1 {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v1 {
    grid-row-gap: 32px;
  }
}
section.home-intro_v1 h2 {
  font-size: 3rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-intro_v1 h2 {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v1 p {
    font-size: 1.125rem;
  }
}
section.home-intro_v1 .home-intro-photo img {
  width: 100%;
  height: 445px;
  border-radius: 40px;
}
@media screen and (max-width: 979px) {
  section.home-intro_v1 .home-intro-photo img {
    max-width: 420px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v1 .home-intro-photo img {
    border-radius: 24px;
  }
}

/* ==========================================================================
3. V1: Why
========================================================================== */
section.home-why_v1 {
  margin-top: 144px;
  max-width: 1680px;
}
section.home-why_v1 h2 {
  font-size: 4.5rem;
  line-height: 1;
  max-width: 692px;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  section.home-why_v1 h2 {
    padding-top: 80px;
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-why_v1 .home-why-top {
  display: grid;
  grid-template-columns: 938px 1fr;
  grid-template-rows: 1fr 240px;
}
@media screen and (max-width: 1279px) {
  section.home-why_v1 .home-why-top {
    grid-template-columns: 75% 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-why_v1 .home-why-top {
    grid-template-columns: 50% 1fr;
    grid-template-rows: 1fr 120px;
  }
}
section.home-why_v1 .home-why-top .home-why-right {
  position: relative;
  grid-row-start: span 2;
}
section.home-why_v1 .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_v1 .home-why-left {
  border-radius: 48px 48px 0 0;
  background-color: #14161E;
}
section.home-why_v1 .home-why-bottom {
  border-radius: 0 48px 48px 48px;
  padding-bottom: 144px;
  background-color: #14161E;
}
@media screen and (max-width: 767px) {
  section.home-why_v1 .home-why-bottom {
    padding-bottom: 80px;
  }
}
section.home-why_v1 .why-card-wrapper {
  max-width: 100%;
  margin-top: 80px;
}
section.home-why_v1 .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(21, 100%, 50%) hsla(0, 0%, 100%, 0.1);
  scrollbar-width: thin;
}
section.home-why_v1 .why-card-wrapper .why-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-why_v1 .why-card-wrapper .why-card-container::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.1);
}
section.home-why_v1 .why-card-wrapper .why-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-why_v1 .why-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
@media screen and (max-width: 767px) {
  section.home-why_v1 .why-card-wrapper .card {
    width: 328px;
  }
}
section.home-why_v1 .why-card-wrapper .card > div {
  background-color: #14161E;
}
section.home-why_v1 .why-card-wrapper .card > div .badge {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
section.home-why_v1 .why-card-wrapper .card > div .badge > span {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 20px;
  color: #FFFFFF;
}
section.home-why_v1 .why-card-wrapper .card > div .card-title {
  color: #FFFFFF;
}
section.home-why_v1 .why-card-wrapper .card > div .card-text {
  -webkit-line-clamp: unset;
  color: #D7D7D7;
}
section.home-why_v1 .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_v1 .why-card-wrapper .card-topleft {
  border: 1px #FFFFFF;
  border-style: solid solid none solid;
}
section.home-why_v1 .why-card-wrapper .card-bottom {
  border: 1px #FFFFFF;
  border-style: none solid solid solid;
}
section.home-why_v1 .why-card-wrapper .card-bottom::before {
  border: 1px #FFFFFF;
  border-style: solid solid none none;
}

/* ==========================================================================
4. V1: Platforms
========================================================================== */
section.home-platforms_v1 .home-platforms-grid-outer {
  display: grid;
  grid-template-columns: 37% 56%;
  grid-column-gap: 7%;
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v1 .home-platforms-grid-outer {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
section.home-platforms_v1 .home-platforms-grid-outer h2 {
  font-size: 3.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-platforms_v1 .home-platforms-grid-outer h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 399px) {
  section.home-platforms_v1 .home-platforms-grid-outer > div a:nth-of-type(1) {
    display: none;
  }
}
section.home-platforms_v1 .home-platforms-grid-outer > div a:nth-of-type(2) {
  display: none;
}
@media screen and (max-width: 399px) {
  section.home-platforms_v1 .home-platforms-grid-outer > div a:nth-of-type(2) {
    display: inline-flex;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v1 .home-platforms-grid-outer:nth-of-type(2) {
    margin-top: 80px !important;
  }
}
section.home-platforms_v1 .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_v1 .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v1 .home-platforms-grid-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-platforms_v1 .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
section.home-platforms_v1 .home-platforms-grid-inner .card {
  min-height: 380px;
}
section.home-platforms_v1 .home-platforms-grid-inner .card .card-bottom {
  display: flex;
  flex-direction: column;
}
section.home-platforms_v1 .home-platforms-grid-inner .card .card-bottom .card-title {
  margin-bottom: 16px;
}
section.home-platforms_v1 .home-platforms-grid-inner .card .card-bottom .card-description {
  margin-top: auto;
}
section.home-platforms_v1 .home-platforms-grid-inner .card .card-bottom .card-description .card-text {
  display: block;
}

/* ==========================================================================
5. V1: Content
========================================================================== */
section.home-content_v1 {
  margin-top: 144px;
  position: relative;
}
section.home-content_v1 h2 {
  max-width: 792px;
  font-size: 4rem;
  line-height: 1;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section.home-content_v1 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-content_v1 .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_v1 .home-content-slider {
    margin-top: 40px;
    gap: 8px;
    overflow-x: scroll;
  }
}
@media screen and (max-width: 767px) {
  section.home-content_v1 .home-content-slider a {
    white-space: nowrap;
  }
}
section.home-content_v1 .button__icon--prev {
  position: absolute;
  left: 0;
  padding-left: 36px;
  top: 50px;
  height: 150px;
  display: none;
}
section.home-content_v1 .button__icon--prev > span {
  position: absolute;
  top: 100px;
  cursor: pointer;
}
section.home-content_v1 .button__icon--prev .prev--icon {
  width: 10px;
  height: 10px;
  rotate: -180deg;
}
section.home-content_v1 .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_v1 .button__icon--next > span {
  position: absolute;
  top: 100px;
  right: 24px;
  cursor: pointer;
}
section.home-content_v1 .button__icon--next .next--icon {
  width: 10px;
  height: 10px;
}
section.home-content_v1 .content-card-wrapper {
  max-width: 100%;
}
section.home-content_v1 .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(21, 100%, 50%) hsla(228, 20%, 10%, 0.1);
  scrollbar-width: thin;
  padding-top: 48px;
}
section.home-content_v1 .content-card-wrapper .content-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-content_v1 .content-card-wrapper .content-card-container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-content_v1 .content-card-wrapper .content-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-content_v1 .content-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
section.home-content_v1 .content-card-wrapper .card .card-bottom .card-metadata {
  margin-top: 16px;
}
section.home-content_v1 .content-card-wrapper .card-description {
  margin-top: 16px;
}
section.home-content_v1 .content-card-wrapper .card-description .card-text {
  -webkit-line-clamp: 4;
}

/* ==========================================================================
6. V1: Community
========================================================================== */
section.home-kodeco-community_v1 {
  position: relative;
  max-width: 1680px;
  margin: 144px auto 0;
  overflow: hidden;
}
section.home-kodeco-community_v1 .home-kodeco-community-top {
  background-color: #14161E;
  border-radius: 48px 48px 48px 0;
  padding-top: 80px;
}
section.home-kodeco-community_v1 .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_v1 .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_v1 .home-kodeco-community-top > div {
    padding-bottom: 0;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left {
  align-self: center;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: left;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left h2 {
  font-size: 3.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left p {
  color: #D7D7D7;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:first-of-type {
    display: none;
  }
}
section.home-kodeco-community_v1 .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_v1 .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_v1 .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 594px;
    justify-self: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 100%;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .home-kodeco-community-mosaic-top {
  position: relative;
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece {
  background-color: #14161E;
  background-image: url(community-sprite%401.5x-5647f81805df16acadef3a134b7d84f2da50d725d694767a1bc978c8cb8a58ad.jpg);
  background-repeat: no-repeat;
}
section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-logo {
  background-image: none;
}
section.home-kodeco-community_v1 .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_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
    display: none;
  }
}
section.home-kodeco-community_v1 .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_v1 .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_v1 .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_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    display: none;
  }
}
section.home-kodeco-community_v1 .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;
  display: none;
}
@media screen and (max-width: 1139px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    display: none;
  }
}
section.home-kodeco-community_v1 .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_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
    display: none;
  }
}
section.home-kodeco-community_v1 .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_v1 .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_v1 .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_v1 .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_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    display: none;
  }
}
section.home-kodeco-community_v1 .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_v1 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
    display: none;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-bottom {
  display: grid;
  grid-template-columns: 1fr 262px;
  height: 222px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v1 .home-kodeco-community-bottom {
    height: 120px;
    grid-template-columns: 1fr 120px;
  }
}
section.home-kodeco-community_v1 .home-kodeco-community-bottom .home-kodeco-community-bottom-left {
  border-radius: 0 0 48px 48px;
  background-color: #14161E;
}
section.home-kodeco-community_v1 .home-kodeco-community-bottom .home-kodeco-community-bottom-right {
  position: relative;
}
section.home-kodeco-community_v1 .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_v1 .home-kodeco-community-bottom .home-kodeco-community-bottom-right:before {
    width: 60px;
  }
}

/* ==========================================================================
7. V1: Logos
========================================================================== */
section.home-logos_v1 {
  margin-top: 144px;
}
section.home-logos_v1 h2 {
  font-size: 3rem;
}
@media screen and (max-width: 767px) {
  section.home-logos_v1 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-logos_v1 .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_v1 .home-logos-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px !important;
  }
}
section.home-logos_v1 .home-logos-grid > div {
  background-color: #FFFFFF;
  border: 1px solid #BFBFC2;
  border-radius: 16px;
}
section.home-logos_v1 .home-logos-grid > div img {
  width: 100%;
  height: 100%;
  filter: brightness(10%) hue-rotate(240deg) saturate(50%);
}

/* ==========================================================================
8. V1: Testimonials
========================================================================== */
section.home-testimonials_v1 {
  margin-top: 144px;
}
section.home-testimonials_v1 h2 {
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  max-width: 545px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v1 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-testimonials_v1 .testimonials-card--wrapper {
  margin-top: 80px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v1 .testimonials-card--wrapper {
    margin-top: 40px;
  }
}
section.home-testimonials_v1 .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(21, 100%, 50%) hsla(228, 20%, 10%, 0.1);
  scrollbar-width: thin;
}
section.home-testimonials_v1 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar {
  height: 2px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-testimonials_v1 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card {
  width: 380px;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v1 .testimonials-card--wrapper .card {
    width: 328px;
  }
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-topleft {
  z-index: 1;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-topleft .badge {
  border: 0;
  overflow: hidden;
  margin-top: 24px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-topleft .badge img {
  width: 100%;
  height: 100%;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-description {
  height: 270px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-text {
  font-size: 1.125rem;
  line-height: 27px;
  -webkit-line-clamp: unset;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-date {
  font-size: 1.125rem;
  line-height: 18px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-title,
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-metadata {
  color: #CE3F00;
  font-size: 1.125rem;
  line-height: 18px;
  font-weight: 700;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-metadata {
  color: #14161E;
  margin-top: 8px;
}
section.home-testimonials_v1 .testimonials-card--wrapper .card .card-description {
  flex-direction: column;
  align-items: flex-start;
}
section.home-testimonials_v1 .testimonials-card--wrapper .badge {
  width: 56px;
  height: 56px;
  border: 1px solid #14161E;
  border-radius: 0.75rem;
}
section.home-testimonials_v1 .testimonials-card--wrapper .badge .svg {
  width: 24px;
  height: 19px;
}

/* ==========================================================================
1. V1: Hero
========================================================================== */
section.kodeco-home-hero_v1 {
  position: relative;
  z-index: 1;
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content {
  padding-top: 80px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content {
    padding-top: 60px;
  }
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
  max-width: 675px;
  margin: 0 auto;
  text-align: center;
  font-size: 4.5rem;
  line-height: 1;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.25;
    text-align: left;
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 {
    font-size: 2.5rem;
  }
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content h1 span {
  color: #FF5A00;
}
section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
  max-width: 495px;
  margin-top: 122px;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
    margin-top: 32px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .kodeco-home-hero-content p {
    max-width: auto;
    font-size: 1.125rem;
  }
}
section.kodeco-home-hero_v1 .module-background {
  max-width: 1680px;
  margin: -144px auto 0;
  height: 700px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .module-background {
    height: 700px;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v1 .module-background {
    display: none;
  }
}
section.kodeco-home-hero_v1 .module-background:before {
  width: 742px;
  border-radius: 0 0 48px 0;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v1 .module-background:before {
    width: 100%;
  }
}
section.kodeco-home-hero_v1 .module-background .module-background-round-top {
  position: absolute;
  top: 0;
  left: 742px;
}
section.kodeco-home-hero_v1 .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_v1 .module-background .module-background-round-bottom {
  position: absolute;
  top: 240px;
  left: 0;
  bottom: auto;
}
section.kodeco-home-hero_v1 .module-background .module-background-round-bottom:before {
  top: 0;
  bottom: auto;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #F7F7F7;
}

/* ==========================================================================
==========================================================================
============================================================================ */
/* ==========================================================================
9. V2: Hero
========================================================================== */
section.kodeco-home-hero_v2 {
  position: relative;
  z-index: 1;
}
section.kodeco-home-hero_v2 .kodeco-home-hero-content {
  padding-top: 80px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content {
    padding-top: 60px;
  }
}
section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 {
  max-width: 675px;
  margin: 0 auto;
  text-align: center;
  font-size: 4rem;
  line-height: 1;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.25;
    text-align: left;
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 {
    font-size: 2.5rem;
  }
}
section.kodeco-home-hero_v2 .kodeco-home-hero-content h1 span {
  color: #FF5A00;
}
section.kodeco-home-hero_v2 .kodeco-home-hero-content p {
  max-width: 495px;
  margin-top: 80px;
  font-size: 1.25rem;
  line-height: 1.5;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content p {
    margin-top: 32px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v2 .kodeco-home-hero-content p {
    max-width: auto;
    font-size: 1.125rem;
  }
}
section.kodeco-home-hero_v2 .module-background {
  max-width: 1680px;
  margin: -144px auto 0;
  height: 700px;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .module-background {
    height: 700px;
  }
}
@media screen and (max-width: 767px) {
  section.kodeco-home-hero_v2 .module-background {
    display: none;
  }
}
section.kodeco-home-hero_v2 .module-background:before {
  width: 742px;
  border-radius: 0 0 48px 0;
}
@media screen and (max-width: 1079px) {
  section.kodeco-home-hero_v2 .module-background:before {
    width: 100%;
  }
}
section.kodeco-home-hero_v2 .module-background .module-background-round-top {
  position: absolute;
  top: 0;
  left: 742px;
}
section.kodeco-home-hero_v2 .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_v2 .module-background .module-background-round-bottom {
  position: absolute;
  top: 240px;
  left: 0;
  bottom: auto;
}
section.kodeco-home-hero_v2 .module-background .module-background-round-bottom:before {
  top: 0;
  bottom: auto;
  border-radius: 48px 0 0 0;
  box-shadow: -12px -12px 0 12px #F7F7F7;
}

/* ==========================================================================
10. V2: Intro
========================================================================== */
section.home-intro_v2 {
  display: grid;
  grid-template-columns: 445px 1fr;
  grid-column-gap: 14%;
  margin-top: 144px;
}
@media screen and (max-width: 1079px) {
  section.home-intro_v2 {
    grid-column-gap: 98px;
  }
}
@media screen and (max-width: 979px) {
  section.home-intro_v2 {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v2 {
    grid-row-gap: 32px;
  }
}
section.home-intro_v2 h2 {
  font-size: 3rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-intro_v2 h2 {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v2 p {
    font-size: 1.125rem;
  }
}
section.home-intro_v2 .home-intro-photo img {
  width: 100%;
  height: 445px;
  border-radius: 40px;
}
@media screen and (max-width: 979px) {
  section.home-intro_v2 .home-intro-photo img {
    max-width: 420px;
  }
}
@media screen and (max-width: 767px) {
  section.home-intro_v2 .home-intro-photo img {
    border-radius: 24px;
  }
}

/* ==========================================================================
11. V2: Why
========================================================================== */
section.home-why_v2 {
  margin-top: 144px;
  max-width: 1680px;
}
section.home-why_v2 h2 {
  font-size: 4.5rem;
  line-height: 1;
  max-width: 692px;
  color: #FFFFFF;
}
@media screen and (max-width: 767px) {
  section.home-why_v2 h2 {
    padding-top: 80px;
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-why_v2 .home-why-top {
  display: grid;
  grid-template-columns: 938px 1fr;
  grid-template-rows: 1fr 240px;
}
@media screen and (max-width: 1279px) {
  section.home-why_v2 .home-why-top {
    grid-template-columns: 75% 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-why_v2 .home-why-top {
    grid-template-columns: 50% 1fr;
    grid-template-rows: 1fr 120px;
  }
}
section.home-why_v2 .home-why-top .home-why-right {
  position: relative;
  grid-row-start: span 2;
}
section.home-why_v2 .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_v2 .home-why-left {
  border-radius: 48px 48px 0 0;
  background-color: #14161E;
}
section.home-why_v2 .home-why-bottom {
  border-radius: 0 48px 48px 48px;
  padding-bottom: 144px;
  background-color: #14161E;
}
@media screen and (max-width: 767px) {
  section.home-why_v2 .home-why-bottom {
    padding-bottom: 80px;
  }
}
section.home-why_v2 .why-card-wrapper {
  max-width: 100%;
  margin-top: 80px;
}
section.home-why_v2 .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(21, 100%, 50%) hsla(0, 0%, 100%, 0.1);
  scrollbar-width: thin;
}
section.home-why_v2 .why-card-wrapper .why-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-why_v2 .why-card-wrapper .why-card-container::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.1);
}
section.home-why_v2 .why-card-wrapper .why-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-why_v2 .why-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
@media screen and (max-width: 767px) {
  section.home-why_v2 .why-card-wrapper .card {
    width: 328px;
  }
}
section.home-why_v2 .why-card-wrapper .card > div {
  background-color: #14161E;
}
section.home-why_v2 .why-card-wrapper .card > div .badge {
  background-color: #14161E;
  border: 1px solid #FFFFFF;
}
section.home-why_v2 .why-card-wrapper .card > div .badge > span {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 20px;
  color: #FFFFFF;
}
section.home-why_v2 .why-card-wrapper .card > div .card-title {
  color: #FFFFFF;
}
section.home-why_v2 .why-card-wrapper .card > div .card-text {
  -webkit-line-clamp: unset;
  color: #D7D7D7;
}
section.home-why_v2 .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_v2 .why-card-wrapper .card-topleft {
  border: 1px #FFFFFF;
  border-style: solid solid none solid;
}
section.home-why_v2 .why-card-wrapper .card-bottom {
  border: 1px #FFFFFF;
  border-style: none solid solid solid;
}
section.home-why_v2 .why-card-wrapper .card-bottom::before {
  border: 1px #FFFFFF;
  border-style: solid solid none none;
}

/* ==========================================================================
12. V2: Platforms
========================================================================== */
section.home-platforms_v2 .home-platforms-grid-outer {
  display: grid;
  grid-template-columns: 37% 56%;
  grid-column-gap: 7%;
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v2 .home-platforms-grid-outer {
    grid-template-columns: 1fr;
    grid-row-gap: 80px;
  }
}
section.home-platforms_v2 .home-platforms-grid-outer h2 {
  font-size: 3.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-platforms_v2 .home-platforms-grid-outer h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
@media screen and (max-width: 399px) {
  section.home-platforms_v2 .home-platforms-grid-outer > div a:nth-of-type(1) {
    display: none;
  }
}
section.home-platforms_v2 .home-platforms-grid-outer > div a:nth-of-type(2) {
  display: none;
}
@media screen and (max-width: 399px) {
  section.home-platforms_v2 .home-platforms-grid-outer > div a:nth-of-type(2) {
    display: inline-flex;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v2 .home-platforms-grid-outer:nth-of-type(2) {
    margin-top: 80px !important;
  }
}
section.home-platforms_v2 .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_v2 .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 1023px) {
  section.home-platforms_v2 .home-platforms-grid-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  section.home-platforms_v2 .home-platforms-grid-inner {
    grid-template-columns: 1fr;
  }
}
section.home-platforms_v2 .home-platforms-grid-inner .card {
  min-height: 380px;
}
section.home-platforms_v2 .home-platforms-grid-inner .card .card-bottom {
  display: flex;
  flex-direction: column;
}
section.home-platforms_v2 .home-platforms-grid-inner .card .card-bottom .card-title {
  margin-bottom: 16px;
}
section.home-platforms_v2 .home-platforms-grid-inner .card .card-bottom .card-description {
  margin-top: auto;
}
section.home-platforms_v2 .home-platforms-grid-inner .card .card-bottom .card-description .card-text {
  display: block;
}

/* ==========================================================================
13. V2: Content
========================================================================== */
section.home-content_v2 {
  margin-top: 144px;
  position: relative;
}
section.home-content_v2 h2 {
  max-width: 792px;
  font-size: 3.5rem;
  line-height: 1;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section.home-content_v2 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-content_v2 .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_v2 .home-content-slider {
    margin-top: 40px;
    gap: 8px;
    overflow-x: scroll;
  }
}
@media screen and (max-width: 767px) {
  section.home-content_v2 .home-content-slider a {
    white-space: nowrap;
  }
}
section.home-content_v2 .button__icon--prev {
  position: absolute;
  left: 0;
  padding-left: 36px;
  top: 50px;
  height: 150px;
  display: none;
}
section.home-content_v2 .button__icon--prev > span {
  position: absolute;
  top: 100px;
  cursor: pointer;
}
section.home-content_v2 .button__icon--prev .prev--icon {
  width: 10px;
  height: 10px;
  rotate: -180deg;
}
section.home-content_v2 .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_v2 .button__icon--next > span {
  position: absolute;
  top: 100px;
  right: 24px;
  cursor: pointer;
}
section.home-content_v2 .button__icon--next .next--icon {
  width: 10px;
  height: 10px;
}
section.home-content_v2 .content-card-wrapper {
  max-width: 100%;
}
section.home-content_v2 .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(21, 100%, 50%) hsla(228, 20%, 10%, 0.1);
  scrollbar-width: thin;
  padding-top: 48px;
}
section.home-content_v2 .content-card-wrapper .content-card-container::-webkit-scrollbar {
  height: 2px;
}
section.home-content_v2 .content-card-wrapper .content-card-container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-content_v2 .content-card-wrapper .content-card-container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-content_v2 .content-card-wrapper .card {
  width: 380px;
  min-height: 460px;
}
section.home-content_v2 .content-card-wrapper .card .card-bottom .card-metadata {
  margin-top: 16px;
}
section.home-content_v2 .content-card-wrapper .card-description {
  margin-top: 16px;
}
section.home-content_v2 .content-card-wrapper .card-description .card-text {
  -webkit-line-clamp: 4;
}

/* ==========================================================================
14. V2: Community
========================================================================== */
section.home-kodeco-community_v2 {
  position: relative;
  max-width: 1680px;
  margin: 144px auto 0;
  overflow: hidden;
}
section.home-kodeco-community_v2 .home-kodeco-community-top {
  background-color: #14161E;
  border-radius: 48px 48px 48px 0;
  padding-top: 80px;
}
section.home-kodeco-community_v2 .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_v2 .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_v2 .home-kodeco-community-top > div {
    padding-bottom: 0;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left {
  align-self: center;
}
@media screen and (max-width: 979px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left {
    text-align: left;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left h2 {
  font-size: 3.5rem;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left h2 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left p {
  color: #D7D7D7;
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-left .btn-larget:first-of-type {
    display: none;
  }
}
section.home-kodeco-community_v2 .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_v2 .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_v2 .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 594px;
    justify-self: center;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-top-right {
    width: 100%;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .home-kodeco-community-mosaic-top {
  position: relative;
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece {
  background-color: #14161E;
  background-image: url(community-sprite%401.5x-5647f81805df16acadef3a134b7d84f2da50d725d694767a1bc978c8cb8a58ad.jpg);
  background-repeat: no-repeat;
}
section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-logo {
  background-image: none;
}
section.home-kodeco-community_v2 .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_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-1 {
    display: none;
  }
}
section.home-kodeco-community_v2 .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_v2 .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_v2 .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_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-2 {
    display: none;
  }
}
section.home-kodeco-community_v2 .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;
  display: none;
}
@media screen and (max-width: 1139px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  section.home-kodeco-community_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-3 {
    display: none;
  }
}
section.home-kodeco-community_v2 .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_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-4 {
    display: none;
  }
}
section.home-kodeco-community_v2 .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_v2 .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_v2 .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_v2 .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_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-5 {
    display: none;
  }
}
section.home-kodeco-community_v2 .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_v2 .home-kodeco-community-top .home-kodeco-community-mosaic .photo-mosaic-piece-6 {
    display: none;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-bottom {
  display: grid;
  grid-template-columns: 1fr 262px;
  height: 222px;
}
@media screen and (max-width: 399px) {
  section.home-kodeco-community_v2 .home-kodeco-community-bottom {
    height: 120px;
    grid-template-columns: 1fr 120px;
  }
}
section.home-kodeco-community_v2 .home-kodeco-community-bottom .home-kodeco-community-bottom-left {
  border-radius: 0 0 48px 48px;
  background-color: #14161E;
}
section.home-kodeco-community_v2 .home-kodeco-community-bottom .home-kodeco-community-bottom-right {
  position: relative;
}
section.home-kodeco-community_v2 .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_v2 .home-kodeco-community-bottom .home-kodeco-community-bottom-right:before {
    width: 60px;
  }
}

/* ==========================================================================
15. V2: Logos
========================================================================== */
section.home-logos_v2 {
  margin-top: 144px;
}
section.home-logos_v2 h2 {
  font-size: 3rem;
}
@media screen and (max-width: 767px) {
  section.home-logos_v2 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-logos_v2 .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_v2 .home-logos-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px !important;
  }
}
section.home-logos_v2 .home-logos-grid > div {
  background-color: #FFFFFF;
  border: 1px solid #BFBFC2;
  border-radius: 16px;
}
section.home-logos_v2 .home-logos-grid > div img {
  width: 100%;
  height: 100%;
  filter: brightness(10%) hue-rotate(240deg) saturate(50%);
}

/* ==========================================================================
16. V2: Testimonials
========================================================================== */
section.home-testimonials_v2 {
  margin-top: 144px;
}
section.home-testimonials_v2 h2 {
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  max-width: 545px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v2 h2 {
    font-size: 2.5rem;
    line-height: 1.25;
    text-align: left;
  }
}
section.home-testimonials_v2 .testimonials-card--wrapper {
  margin-top: 80px;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v2 .testimonials-card--wrapper {
    margin-top: 40px;
  }
}
section.home-testimonials_v2 .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(21, 100%, 50%) hsla(228, 20%, 10%, 0.1);
  scrollbar-width: thin;
}
section.home-testimonials_v2 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar {
  height: 2px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-track {
  background: hsla(228, 20%, 10%, 0.1);
}
section.home-testimonials_v2 .testimonials-card--wrapper .testimonials-card--container::-webkit-scrollbar-thumb {
  background: #FF5A00;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card {
  width: 380px;
}
@media screen and (max-width: 767px) {
  section.home-testimonials_v2 .testimonials-card--wrapper .card {
    width: 328px;
  }
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-topleft {
  z-index: 1;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-topleft .badge {
  border: 0;
  overflow: hidden;
  margin-top: 24px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-topleft .badge img {
  width: 100%;
  height: 100%;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-description {
  height: 270px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-text {
  font-size: 1.125rem;
  line-height: 27px;
  -webkit-line-clamp: unset;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-date {
  font-size: 1.125rem;
  line-height: 18px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-title,
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-metadata {
  color: #CE3F00;
  font-size: 1.125rem;
  line-height: 18px;
  font-weight: 700;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-metadata {
  color: #14161E;
  margin-top: 8px;
}
section.home-testimonials_v2 .testimonials-card--wrapper .card .card-description {
  flex-direction: column;
  align-items: flex-start;
}
section.home-testimonials_v2 .testimonials-card--wrapper .badge {
  width: 56px;
  height: 56px;
  border: 1px solid #14161E;
  border-radius: 0.75rem;
}
section.home-testimonials_v2 .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-top {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    width: 100%;
  }
  .ratings-header .ratings-controls-top > div, .ratings-header .ratings-controls-top .btn-normalw {
    width: 100%;
    margin: 0 !important;
  }
  .ratings-header .ratings-controls-top .btn-normalw {
    order: 0;
  }
  .ratings-header .ratings-controls-top 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: 24px;
}
.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;
  transition: background-color 0.25s ease-out;
}
.rating-form .rating-questions .add-rating .rate-star:hover {
  background: rgba(215, 215, 215, 0.4980392157);
}
.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 .rating-questions .add-rating .c-rate__star--green:hover {
  background: #FF8847;
}
.rating-form .c-review-module__answers > input[type=checkbox]:hover + label {
  background: rgba(215, 215, 215, 0.4980392157);
  border-color: #14161E;
  color: #14161E;
  transition: background-color 0.25s ease-out;
}
.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. Wrapper, title and inputs
*
* 2. Hello
*
* 3. Progress
*
* 4. Generate Recommendations
*
**/
/* ==========================================================================
  1. Wrapper, title and inputs
========================================================================== */
.container-onboarding {
  min-width: 594px;
}
@media screen and (max-width: 641px) {
  .container-onboarding {
    min-width: auto;
  }
}
.container-onboarding .lh-32 {
  line-height: 1.25;
}
.container-onboarding .control label.radio {
  display: flex;
}

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

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

/* ==========================================================================
  4. 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.
 *
 */
/* ==========================================================================
  Grids
========================================================================== */
.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;
  }
}

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

.four-column-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-column-gap: 1rem;
  grid-row-gap: 1.5rem;
}
@media screen and (max-width: 1023px) {
  .four-column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .four-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;
}

.w-152 {
  width: 152px;
}

.h-152 {
  height: 152px;
}

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

.modal .modal-wrapper.modal-tight.modal-share button.btn-icon svg {
  fill: #14161E;
  max-width: 12px;
  max-height: 12px;
}

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

.subscription-plan-sale {
  display: block;
  text-decoration: line-through;
  font-size: 1rem;
  line-height: 1;
}

.svg-w-12 {
  height: 12px;
  width: 12px;
}

.svg-w-20 {
  height: 20px;
  width: 20px;
}

.wh-80 {
  height: 80px;
  width: 80px;
}

.w-16 {
  height: 16px;
  width: 16px;
}

.w-18 {
  height: 18px;
  width: 18px;
}

.svg-20 {
  height: 20px;
  width: 20px;
}

.w-24 {
  height: 24px;
  width: 24px;
}

@media screen and (min-width: 1024px) {
  .desktop-h-auto {
    height: auto;
  }
}

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

.hidden-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;
}

.bg-hover-grey-thought-50:hover {
  background-color: rgba(215, 215, 215, 0.5);
}

.tooltip-text-multi {
  line-height: 1.5;
}

@media screen and (max-width: 1439px) {
  .overflow-desktop {
    position: relative;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px 0 24px;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .overflow-desktop::-webkit-scrollbar {
    width: 0 !important;
  }
  .overflow-desktop .card {
    white-space: normal;
  }
}

@media screen and (max-width: 1023px) {
  .overflow-mobile {
    position: relative;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px 0 24px;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .overflow-mobile::-webkit-scrollbar {
    width: 0 !important;
  }
  .overflow-mobile.mt-32 {
    margin-top: -32px !important;
    padding-top: 64px;
  }
  .overflow-mobile .card {
    white-space: normal;
  }
}

@media screen and (max-width: 767px) {
  .mobile-text-align-left {
    text-align: left;
  }
}

.figcaption {
  font-family: "Relative Mono" !important;
  font-size: 0.875rem;
  color: #14161E;
  margin-bottom: 40px;
  text-align: center;
}

/* ==========================================================================
  Badge class handling in content sidebar
========================================================================== */
.section-list ul.content-list li .content-list--icon .badge {
  width: unset;
  height: unset;
}

/* ==========================================================================
  HubSpot
========================================================================== */
#hubspot-messages-iframe-container {
  z-index: 999999 !important;
}

.written-content .article-pagination {
  margin-top: 2rem;
}
.written-content .article-pagination ul li::before {
  display: none;
}

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