/* ==========================================================================
X. Typography
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@500&display=swap");
/*! 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__wrapper, section.home-hero .home-hero__testimonial {
  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 header, article.c-written-tutorial .c-written-tutorial__content, .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 .c-video-player__video .c-video-player__preloader, .c-video-player__complete .c-video-player__complete-wrapper, .c-video-player__paywall .c-video-player__paywall-wrapper, .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 .c-video-player__video .c-video-player__preloader, .c-video-player__complete .c-video-player__complete-wrapper, .c-video-player__paywall .c-video-player__paywall-wrapper, .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-global-search .c-global-search__input input, .c-search__loading, .c-search__no-results, 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%;
  }
}
/**
 * A thin layer on top of normalize.css
 */
/**
 * This file contains all application-wide Sass variables.
 *
 * 1. Fonts
 *
 * 2a. Colors
 *
 * 2b. Highlighter Colors
 *
 * 3. Elements
 */
/**
 * This file contains the font-face definitions for the fonts used across the site
 *
 * It was generated using http://google-webfonts-helper.herokuapp.com/fonts
 *
 * Remember to include latin-ext, primarily for names.
 *
 * 1. Bitter
 * 2. IBM Plex Sans
 * 3. IBM Plex Serif
 */
/* NOTE
 *
 * Creating these fonts (Bitter) was somewhat challenging, because they were updated in
 * Google Fonts with different spacing and weight. It was then very hard to find the
 * original font with the appropriate character set.
 * This directory contains the OTF files that we need.
 * You can use https://everythingfonts.com/subsetter to extract the appropriate subset
 * (Latin Extended) and then https://kombu.kanejaku.org to create the WOFF and WOFF2 versions
 * Current settings on the subset generator:
 *
 * - Basic Latin
 * - Latin-1 Supplement
 * - Advanced Punctuation
 * - Uppercase
 * - Lowercase
 * - Numerals
 * - Basic Punctuation
 * - Currency Symbols
 * - Latin Extended-A
 * - Latin Extended-B
 */
/* ==========================================================================
   1. Bitter
   ========================================================================== */
/* bitter-regular - latin-ext_latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/bitter-1.300-latin_ext-regular-ea79c0f752f7656ce3694dca8312fcb969f83cbe92ca5298c5920ccffb126c5d.woff2) format("woff2"), url(/assets/bitter-1.300-latin_ext-regular-eecfd6c3af651231104ba7ae58079c215e1d4c00b80b2ff0e95ae0cbec63452c.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-italic - latin-ext_latin */
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 400;
  src: url(/assets/bitter-1.002-latin_ext-italic-f4a1b872a93d98cd9f7865f20340e22e936f3634fb142e2372b4598c98def35a.woff2) format("woff2"), url(/assets/bitter-1.002-latin_ext-italic-a6485dae55bfcf03d80c0b42c15a8555767d700b3be2db1a24bcbff003d2c606.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* bitter-700 - latin-ext_latin */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/bitter-2.110-latin_ext-700-041b7c53b2f3ed8e2378eaef2841cfad596a7cf6af87bd91f96c9c3b26eec206.woff2) format("woff2"), url(/assets/bitter-2.110-latin_ext-700-57857445d4419a791376b73c9bdb14606d59d2aa09a947120d1b6a1e58965e42.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
   2. IBM Plex Sans
   ========================================================================== */
/* ibm-plex-sans-regular - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-regular-4126890a77928150a6f3be017f23c93df16f56e6940a72f231823ba29d2ee998.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-regular-3213dca28efc701a797f1a261a9377b0c530a9ae3cfb72b187d1194f3bd196d3.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-500 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-500-04aba1eb9b084332715891b2a764459df24188e66731279bad286bbe1447e5e8.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-500-2827cf78c931acdac08d21fb21e3c1531fda43e342b49055f9a312cf336f366c.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-sans-700 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/ibm-plex-sans-v3-latin-ext_latin-700-946ed95688a6677fb113b84ac50ef140b42971e05e4da335a3ead116a7c9886b.woff2) format("woff2"), url(/assets/ibm-plex-sans-v3-latin-ext_latin-700-7dbcb16e805e3c4e19b6afc0fbe96a730c7229f129c00e1b239eda58b12f6063.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
   3. IBM Plex Serif
   ========================================================================== */
/* ibm-plex-serif-regular - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-regular-e4f826dc262e20e2114e3637d5cab104d4851dee74421c968a6e29d6be2d8b0b.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-regular-98933eb8c158bbfc91428e8e37644e6f906422073f220313353a4ae476c3bbfd.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-serif-500 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-500-dcab0f62c8194ccb39b97113223f99f294112e0d173b18918c31f3494c203456.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-500-ae2864b567a0cfaee3af57d9a8a800a374db2a8aee962b54bbcbf83d1c90fa15.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ibm-plex-serif-700 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/ibm-plex-serif-v4-latin-ext_latin-700-ec4d87dbc9136c02618bd6878955a63e40207541c72e5109137d56e28ea65b3f.woff2) format("woff2"), url(/assets/ibm-plex-serif-v4-latin-ext_latin-700-cf316807d947f5b6ef4492a9ce6ec4a2f348ec1acf64a481cd6f0fbecb846ad0.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
   4. IBM Plex Mono
   ========================================================================== */
/* ibm-plex-mono-medium */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/ibm-plex-mono-v1-500-ba9db195c954509bda2236e0303e51b261b85aef320cb28134ed97155de85914.woff2) format("woff2"), url(/assets/ibm-plex-mono-v1-500-37d084bbe45275af60e08db241605f8a7949a8ebc76074954fd9b02b72aa4857.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* ==========================================================================
   1. Fonts
   ========================================================================== */
/* ==========================================================================
   2a. Colors
   ========================================================================== */
/* Blacks */
/* Greys */
/* Greens */
/* Blues */
/* Reds */
/* Purples */
/* Teals */
/* Yellows */
/* Brands */
/* Gradients */
/* ==========================================================================
   2b. Highlighter Colors
   ========================================================================== */
/* ==========================================================================
   3. Elements
   ========================================================================== */
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
 */
/**
 * 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
========================================================================== */
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;
}
@media (max-width: 600px) {
  h1 {
    font-size: 1.875rem;
  }
}

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 (max-width: 600px) {
  p {
    font-size: 0.9375rem;
  }
}

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

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

/**
 *
 * 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
   ========================================================================== */
.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: rgb(22.47, 141.24, 71.69);
}

.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: rgb(21.9373170732, 129.5346341463, 192.2126829268);
}

.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: rgb(113.5693877551, 121.8289795918, 139.3806122449);
}

.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: rgb(211.6216, 62.3192, 46.1784);
}

.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: rgb(254.0223622047, 120.085984252, 7.6576377953);
}

.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: rgb(64.1208396947, 69.5548091603, 78.2491603053);
}

.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: rgb(64.1208396947, 69.5548091603, 78.2491603053);
}

.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: rgb(252.09, 183.22, 44.51);
}

.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: rgb(29.9942857143, 135.4914285714, 216.1657142857);
}

.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 (max-width: 600px) {
  .o-button--neon-green {
    border: 1px solid #199E50;
  }
}
.o-button--neon-green:hover {
  background: rgb(22.47, 141.24, 71.69);
}

.o-button--background-yellow {
  background: #F3B36A !important;
}
.o-button--background-yellow:hover {
  background: rgb(243.36, 181.28, 110.47);
}

.o-button--background-blue {
  background: #157CB8 !important;
}
.o-button--background-blue:hover {
  background: rgb(21.9373170732, 129.5346341463, 192.2126829268);
}

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

/* ==========================================================================
   3a. Size
   ========================================================================== */
.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 (max-width: 600px) {
  .o-button--shrink {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 0.875rem;
  }
  .o-button--shrink i {
    display: none;
  }
}

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

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

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

/* ==========================================================================
   Single button icons no text
   ========================================================================== */
.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;
}

/* ==========================================================================
Text buttons with no background
========================================================================== */
.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;
}

/* Apply to inside label span only */
.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;
}

/* ==========================================================================
Text buttons with background on hover
========================================================================== */
.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;
}

/* ==========================================================================
   Buttons inside input elements eg. password show
   ========================================================================== */
.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;
}

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

/* ==========================================================================
8. Badge / Button - Eg. Copy
========================================================================== */
.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;
}

/* ==========================================================================
8. Button for Code Blocks
========================================================================== */
.o-button-code {
  width: 24px;
  height: 24px;
  background: rgba(86, 98, 115, 0.5);
  top: 12px;
  right: 15px;
  border-radius: 0.5625rem;
  cursor: pointer;
  background-image: url(/assets/svg-icons/light-0d5837a4fcf134d5de69d367f5d3b717ec4e8a54a1e903d337257d330836cbef.png);
  background-size: cover;
}
.o-button-code:hover {
  background: #647388;
  background-image: url(/assets/svg-icons/light-0d5837a4fcf134d5de69d367f5d3b717ec4e8a54a1e903d337257d330836cbef.png);
  background-size: cover;
}

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

/* ==========================================================================
10. Close
========================================================================== */
.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);
}

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

/* ==========================================================================
12. Share Buttons
========================================================================== */
.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);
}

/* ==========================================================================
13. How to
========================================================================== */
.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;
}

/* ==========================================================================
14. Start of content
========================================================================== */
.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;
}

/* ==========================================================================
15. Chapter buttons
========================================================================== */
.o-button-chapter {
  width: 90px;
  height: 100vh;
  background: #F5F8FB;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
@media (max-width: 992px) {
  .o-button-chapter {
    width: 60px;
  }
}
@media (max-width: 768px) {
  .o-button-chapter {
    display: none;
  }
}
.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;
}

/* ==========================================================================
15. Disclose
========================================================================== */
.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);
}

/* ==========================================================================
Custom layouts for buttons
========================================================================== */
/* A hack for buttons that need to wrap their children in a span */
.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;
}

/* ==========================================================================
Custom layouts for button icons
========================================================================== */
/* Misc */
.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;
}

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

/* Search */
.l-button__search {
  width: 18px;
  height: 20px;
  top: 1px;
  margin-right: 8px;
}
.l-button__search svg {
  width: 18px;
  height: 18px;
}

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

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

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

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

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

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

/* ==========================================================================
New badge
========================================================================== */
.o-badge--new {
  background: #9668B0;
  color: #ffffff;
  box-shadow: none;
  border-radius: 9px 3px 9px 9px;
}

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

/**
 * 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
   ========================================================================== */
.o-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
}
.o-label .o-label__info {
  font-size: 0.6875rem;
  color: #959DA5;
}

/* ==========================================================================
   2. Regular input and textarea
   ========================================================================== */
.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;
}
.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 {
  background: #3B4048;
  border: 2px solid #73859F;
  color: #ffffff;
}
.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;
}
.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 {
  line-height: 1.45;
  min-width: 100%;
  max-width: 100%;
}

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

/* ==========================================================================
   3a. Checkbox (Simple)
   ========================================================================== */
.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;
}

/* ==========================================================================
   3b. Checkbox (Toggle)
   ========================================================================== */
.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);
}

/* ==========================================================================
   4. Validation
   ========================================================================== */
.form__validation {
  position: absolute;
  left: 0;
  top: 82px;
  font-size: 0.75em; /* 12/16 */
}
@media (max-width: 600px) {
  .form__validation {
    position: relative;
    top: -15px;
  }
}

.form__validation--error {
  font-weight: 600;
  color: #CF3B2B;
}

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

/**
 * Loading Animations
 *
 * DO NOT EDIT
 *
 * To change size color use layout classes
 *
 * 1. Pulse
 *
 * 2. Circle
 *
 * 3. Dots
 *
 */
/* ==========================================================================
1. Pulse
========================================================================== */
@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;
}

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

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

/**
 * 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
========================================================================== */
div.o-header-logo {
  width: 100%;
  position: relative;
}
@media (max-width: 992px) {
  div.o-header-logo {
    width: 48px;
    height: 48px;
  }
}
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 (max-width: 992px) {
  div.o-header-logo svg.o-header-logo__mark {
    width: 48px;
    position: relative;
  }
}
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;
}

/* ==========================================================================
2. Rounded
========================================================================== */
.o-rounded-image {
  border-radius: 0.5625rem;
}

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

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

/**
 * 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
   ========================================================================== */
.receipt-date {
  width: 100px;
}

.receipt-products {
  width: 400px;
}

.receipt-tax {
  width: 150px;
}

.receipt-order-total {
  width: 150px;
}

/**
 * Feedback banners and messages
 *
 * Notify the user when they've made a change via a form or to highlight news and announcements
 *
 * 1. Base DO NOT EDIT
 *
 * 2. Class Modifiers for success, warning, danger and info messages
 *
 * X. Custom layout classes
 */
/**
 * 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 */
/* Light AI Colour */
/* Dark AI 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
  ========================================================================== */
.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 (max-width: 600px) {
  .o-alert {
    font-size: 0.875rem;
  }
}
.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;
}

/* ==========================================================================
  2. Class Modifiers for success, warning, danger and info messages
  ========================================================================== */
.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;
}

/* ==========================================================================
  X. Custom layout classes
  ========================================================================== */
.l-alert-admin-top {
  margin-bottom: 27px;
}

.l-alert-sticky {
  position: fixed;
  z-index: 999999;
  bottom: 0;
  border-radius: 0;
}
@media (max-width: 992px) {
  .l-alert-sticky {
    left: 0;
    width: 100%;
  }
}

.l-alert-banner {
  border-radius: 0;
  margin-top: 0;
}

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

/* ==========================================================================
   2. Progress Indicator (HTML)
   ========================================================================== */
.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;
}

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

/**
 *
 * 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
 *
 */
/**
* This file contains the font-face definitions for the fonts used across the site
*
* Web Fonts from colophon-foundry.org
*
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Colophon Foundry. The fonts are protected under domestic and international trademark and
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
* distributing this font software.
*
* (c) 2022 Colophon Foundry
*
* Licenced to Matthew Derrick Kodeco Inc

*
*  1. Relative
*
*/
/* ==========================================================================
  0. Variable definitions
  ========================================================================== */
/* ==========================================================================
   1. Relative
   ========================================================================== */
/* relative-book */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/relative-book-pro-b7bfc78df53a6103abfdccc4f18a0e919172076cc7dd5c5309a0a94d64f19615.woff2) format("woff2"), url(/assets/relative-book-pro-d1079bfa99a0cab9ef8465a629feddad450f13b5b7f7b495f2717b2788b5428f.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 400;
  src: url(/assets/relative-italic-pro-46b2f83e0335d2ee38e8ead7854143fc4642a914ef19d165b7c40027bc649202.woff2) format("woff2"), url(/assets/relative-italic-pro-cbc583d872bfd3462fa990ac1d595cf7d5f6f8a1bc16f70f9f43d12d2f9cb186.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-medium */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 500;
  src: url(/assets/relative-medium-pro-efff202b230c17039474726cd59259a03b75292b1a63068ab73f55dbf6a25dcb.woff2) format("woff2"), url(/assets/relative-medium-pro-16f66e32ff5195a3e52ad1f851b3559c20d2fb56508ed215cf319f2a59cf7abf.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-medium-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 500;
  src: url(/assets/relative-medium-italic-pro-78c16e218cb3c8571907fe11721c5701644595e0c27b839dbc8a71053ac64d21.woff2) format("woff2"), url(/assets/relative-medium-italic-pro-ec9d2644d301a4cd59c1233b2a99af84d75f908d6d60e9e82105643ab841ee1e.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-bold */
@font-face {
  font-family: "Relative";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/relative-bold-pro-27260fd4e75322220c790f98dd68c0a32a0c0d87bed151a3732089964da11a84.woff2) format("woff2"), url(/assets/relative-bold-pro-5b61cb4c881c1b1713838dbe2b50a7aa601508d74e54551a5bae022d4c7c0c84.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-bold-italic */
@font-face {
  font-family: "Relative";
  font-style: italic;
  font-weight: 700;
  src: url(/assets/relative-bold-italic-pro-9f0cd55a979f577d9982fa929066340f88f483707128ebc6829136d15ac79ee8.woff2) format("woff2"), url(/assets/relative-bold-italic-pro-c35f296845bfcf8e5da688c8c0fd79c93307872766e0398fce78f46ef00736af.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* relative-mono-10 */
@font-face {
  font-family: "Relative Mono";
  font-style: normal;
  font-weight: 400;
  src: url(/assets/relative-mono-10-pitch-pro-b82594bbdaa88ed3eb167db83ce1e51421fe27906d887c2224bd7f3134d7a9cf.woff2) format("woff2"), url(/assets/relative-mono-10-pitch-pro-d954d74c5298b0cde17bd4d03342ed4974193ad7e5a78e9ebf10d8799ad883ce.woff) format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* 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
========================================================================== */
.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;
}

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

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

/* ==========================================================================
4a. Top Left
========================================================================== */
.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;
}

/* ==========================================================================
4b. Top Right
========================================================================== */
.data-tooltip--top-right:before {
  top: -48px;
  left: auto;
  right: -90px;
}
.data-tooltip--top-right:after {
  top: -25px;
  left: auto;
  right: 5px;
}

/* ==========================================================================
5. Note Taking
========================================================================== */
.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;
}

/* ==========================================================================
Z. Custom Layouts
========================================================================== */
.l-tooltip-book-chapters {
  left: 45px;
  top: 35px;
}

.l-tooltip-book-tools {
  top: 35px;
}

.l-tooltip-erase-notebook:after {
  right: 10px;
}
.l-tooltip-erase-notebook {
  left: auto;
  right: 0;
  right: -78px;
  top: 32px;
}

/* ==========================================================================
 Shame
========================================================================== */
.prefers-color-scheme--dark .transcript.o-tooltip {
  background-color: #3B3D43;
}

/**
 *
 * 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
  ========================================================================== */
.o-link--green {
  color: #158443;
}

/* ==========================================================================
Variables
========================================================================== */
/* ==========================================================================
Mixins
========================================================================== */
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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 .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 {
  clip: rect(auto, auto, auto, auto);
}
.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;
}

/**
*
*
* 1. Content Counter
*
*
*/
/* ==========================================================================
1. Content Counter
========================================================================== */
.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;
}

/**
 *
 * 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
========================================================================== */
.l-block {
  margin: 0 auto;
}
@media (max-width: 768px) {
  .l-block {
    max-width: none;
    padding: 0 20px;
  }
}

.l-block-padding-early {
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .l-block-padding-early {
    max-width: none;
    padding: 0 20px;
  }
}

.l-block-no-padding-mobile {
  margin: 0 auto;
}
@media (max-width: 768px) {
  .l-block-no-padding-mobile {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .l-block-padding-mobile-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 1200px) {
  .l-block-padding-1200 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 768px) {
  .l-block-padding-mobile-24 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

.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 (min-width: 1440px) {
  .l-block-wide {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .l-block-wide {
    max-width: none;
    padding: 0 20px;
  }
}

.l-block-wide-padding {
  padding: 0 30px;
}
@media (max-width: 768px) {
  .l-block-wide-padding {
    padding: 0 20px;
  }
}

/* ==========================================================================
  2. Columns
  ========================================================================== */
.l-full-col {
  width: 100%;
}

.l-half-col {
  width: 50%;
}

.l-width-max-120 {
  max-width: 120px;
}

.l-width-min-100 {
  min-width: 100%;
}

/* ==========================================================================
  3. Margins
  ========================================================================== */
.l-margin-auto {
  margin: 0 auto;
}

.l-margin-0 {
  margin-top: 0 !important;
}

@media (max-width: 992px) {
  .l-margin-0-tablet {
    margin-top: 0 !important;
  }
}

.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 (max-width: 768px) {
  .l-margin-240 {
    margin-top: 180px;
  }
}

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

/* Responsive margins */
@media (max-width: 768px) {
  .l-margin-mobile-0 {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-9 {
    margin-top: 9px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-12 {
    margin-top: 12px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-15 {
    margin-top: 15px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-18 {
    margin-top: 18px;
  }
}

@media (max-width: 768px) {
  .l-margin-left-0--mobile-large {
    margin-left: 0 !important;
  }
}

@media (max-width: 600px) {
  .l-margin-mobile-large-40 {
    margin-top: 40px;
  }
}

@media (max-width: 600px) {
  .l-margin-mobile-18 {
    margin-top: 18px;
  }
}

@media (max-width: 600px) {
  .l-margin-mobile-30 {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-30 {
    margin-top: 30px;
  }
}

@media (max-width: 992px) {
  .l-margin-tablet-60 {
    margin-top: 60px;
  }
}

@media (max-width: 992px) {
  .l-margin-tablet-30 {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-60 {
    margin-top: 60px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-90 {
    margin-top: 90px;
  }
}

@media (max-width: 768px) {
  .l-margin-mobile-large-left-20 {
    margin-left: 20px;
  }
}

/* ==========================================================================
   7. Padding
   ========================================================================== */
.l-padding-wrapper {
  padding-left: 30px;
  padding-right: 30px;
}
@media (max-width: 768px) {
  .l-padding-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

.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 (max-width: 992px) {
  .l-padding-0--tablet {
    padding-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .l-padding-0--mobile-large {
    padding-top: 0 !important;
  }
}

.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 (max-width: 768px) {
  .l-padding-bottom-30--mobile-large {
    padding-bottom: 30px !important;
  }
}

.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 (max-width: 768px) {
  .l-no-padding-right {
    padding-right: 0;
  }
}

.l-padding-left-20 {
  padding-left: 20px;
}

.l-padding-left-86 {
  padding-left: 86px;
}

@media (max-width: 992px) {
  .l-no-padding-left--tablet {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .l-padding-sides-30--mobile-large {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 992px) {
  .l-padding-sides-24--tablet {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 1200px) {
  .l-padding-sides-60--temporary {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 768px) {
  .l-padding-sides-60--temporary {
    padding-left: 0;
    padding-right: 0;
  }
}

.l-padding-all-15 {
  padding: 15px;
}

.l-padding-all-20 {
  padding: 20px;
}

.l-padding-all-24 {
  padding: 24px;
}

/* ==========================================================================
  5. Flex
  ========================================================================== */
.l-flex {
  display: flex;
}

@media (max-width: 768px) {
  .l-flex-column--mobile {
    flex-direction: column;
  }
}

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

@media (max-width: 768px) {
  .l-flex-wrap--mobile-large {
    display: flex;
    flex-wrap: wrap;
  }
}

.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 (max-width: 768px) {
  .l-flex-align-center--mobile-large {
    align-items: center !important;
  }
}

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

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

/* ==========================================================================
7. Text
========================================================================== */
.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 (max-width: 768px) {
  .l-text-align-left--mobile {
    text-align: left;
  }
}

@media (max-width: 992px) {
  .l-text-align-center--tablet {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .l-text-align-center--mobile {
    text-align: center;
  }
}

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

/* ==========================================================================
8. Fonts
========================================================================== */
@media (max-width: 768px) {
  .l-font-header--mobile {
    font-size: 1.5em !important;
    line-height: 1.35;
  }
}

@media (max-width: 768px) {
  .l-font-header--mobile-27 {
    font-size: 1.7rem !important; /* 36/16 */
    line-height: 1.35;
  }
}

@media (max-width: 768px) {
  .l-font-header--mobile-27-1125 {
    font-size: 1.7rem !important;
    line-height: 1.125;
  }
}

.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 (max-width: 768px) {
  .l-line-height-125--mobile-large {
    line-height: 1.25 !important;
  }
}

.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 (max-width: 768px) {
  .l-font-15--mobile {
    font-size: 0.9375rem; /* 15/16 */
  }
}

@media (max-width: 768px) {
  .l-font-15--mobile-force {
    font-size: 0.9375rem !important; /* 15/16 */
  }
}

@media (max-width: 768px) {
  .l-font-16--mobile {
    font-size: 1rem !important; /* 17/16 */
  }
}

@media (max-width: 768px) {
  .l-font-17--mobile {
    font-size: 1.0625rem !important; /* 17/16 */
  }
}

@media (max-width: 768px) {
  .l-font-22--mobile {
    font-size: 1.375rem; /* 22/16 */
    line-height: 1.25;
  }
}

@media (max-width: 768px) {
  .l-font-24--mobile {
    font-size: 1.5rem; /* 24/16 */
  }
}

@media (max-width: 768px) {
  .l-font-27--mobile {
    font-size: 1.6875rem; /* 27/16 */
  }
}

@media (max-width: 768px) {
  .l-font-30--mobile {
    font-size: 1.875rem !important; /* 30/16 */
  }
}

.l-font-36--mobile {
  font-size: 2.25rem; /* 36/16 */
}
@media (max-width: 768px) {
  .l-font-36--mobile {
    font-size: 1.5em;
  }
}

.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 (max-width: 600px) {
  .l-color-neon--red {
    -webkit-text-stroke-width: 1px;
  }
}

.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 (max-width: 600px) {
  .l-color-neon--blue {
    -webkit-text-stroke-width: 1px;
  }
}

.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 (max-width: 600px) {
  .l-whitespace--desktop {
    white-space: normal;
  }
}

.l-font-spacing {
  letter-spacing: -0.5px;
}

.l-no-font-spacing {
  letter-spacing: 0px;
}

/* ==========================================================================
9. Grid
========================================================================== */
.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 (max-width: 768px) {
  .l-grid-3 {
    display: block;
  }
}

.l-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 600px) {
  .l-grid-4 {
    display: block;
  }
}

.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 (max-width: 1080px) {
  .l-grid-2fr-1080 {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 992px) {
  .l-grid-2fr-tablet {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 992px) {
  .l-grid-4fr-tablet {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (max-width: 992px) {
  .l-grid-tablet {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .l-grid-mobile {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .l-grid-1fr-mobile {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .l-grid-mobile--force {
    display: grid;
    grid-template-columns: 1fr !important;
  }
}

.l-mason-grid {
  display: grid;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1080px) {
  .l-mason-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .l-mason-grid {
    grid-template-columns: 1fr;
  }
}
.l-mason-grid .c-tutorial-item {
  margin-top: 0 !important;
}

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

/* ==========================================================================
11. Overflow
========================================================================== */
.l-overflow-x {
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.l-overflow-hidden {
  overflow: hidden;
}

@media (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;
  }
}

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

/* ==========================================================================
13. Block
========================================================================== */
.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 (max-width: 768px) {
  .l-block-mobile-large {
    display: block;
  }
}

@media (max-width: 600px) {
  .l-block-mobile {
    display: block;
  }
}

/* ==========================================================================
14. Cursor
========================================================================== */
.l-cursor-pointer {
  cursor: pointer;
}

/* ==========================================================================
14. Z-index
========================================================================== */
.l-z-index-1 {
  z-index: 1;
}

/* ==========================================================================
14. Borders
========================================================================== */
.l-border-top {
  border-top: 1px solid #DFE7F0;
}

.l-border-bottom {
  border-bottom: 1px solid #DFE7F0;
}

/* ==========================================================================
15. States
========================================================================== */
.l-no-focus:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

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

/* ==========================================================================
17. Visibility
========================================================================== */
.l-visibility-hidden {
  visibility: hidden;
}

/* ==========================================================================
18. Transform
========================================================================== */
.l-rotate-180 {
  transform: rotate(180deg);
}

/**
* Admin Layouts
*
* Custom classes for widths, margins, padding, font-sizes etc. for accounts.rw.com
*
* 1. Wrappers, Text
*
* 2. Sidebar
*
*/
/* ==========================================================================
1. Wrappers, Text
========================================================================== */
.l-admin {
  padding-left: 80px;
}
@media (max-width: 992px) {
  .l-admin {
    padding-left: 0;
  }
}
.l-admin .container {
  padding-top: 36px;
  padding-bottom: 90px;
}

.l-admin-big-container {
  margin: 0 -40px;
}
@media (max-width: 1200px) {
  .l-admin-big-container {
    margin: 0;
  }
}

.admin__subtitle {
  font-size: 1rem;
  color: #6E7687;
  margin-top: 15px;
}
@media (max-width: 600px) {
  .admin__subtitle {
    font-size: 0.9375em;
  }
}

/* ==========================================================================
2. Sidebar
========================================================================== */
.l-admin--sidebar-open {
  padding-left: 320px;
}
@media (max-width: 1080px) {
  .l-admin--sidebar-open {
    padding-left: 270px;
  }
}
@media (max-width: 992px) {
  .l-admin--sidebar-open {
    padding-left: 0;
    padding-right: 0;
  }
}
.l-admin--sidebar-open .c-banner-draper .c-banner-draper__copy p {
  display: none;
}
@media (max-width: 992px) {
  .l-admin--sidebar-open .c-banner-draper .c-banner-draper__copy p {
    display: block;
  }
}
.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 (max-width: 1080px) {
  .l-admin--sidebar-open .c-nav-sidebar--article {
    width: 270px !important;
  }
}
@media (max-width: 1200px) {
  .l-admin--sidebar-open .c-written-tutorial {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 992px) {
  .l-admin--sidebar-open .c-written-tutorial {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.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;
}

/**
 *
 * Layouts
 *
 * For use on video components
 *
 * 1. Overlay
 *
 **/
/* ==========================================================================
1. Overlay
========================================================================== */
.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;
}

/**
 *
 * 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
========================================================================== */
.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 (min-width: 1440px) {
  .l-block-tutorials {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .l-block-tutorials {
    max-width: none;
  }
}
.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;
}

/* ==========================================================================
2. Container - Scroll tutorials horizontally
========================================================================== */
.l-tutorial-container {
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .l-tutorial-container {
    padding-right: 0;
  }
}
.l-tutorial-container:hover .o-button__icon {
  opacity: 1;
}
.l-tutorial-container .c-tutorial-item {
  width: 300px;
  min-width: 300px;
}
@media (max-width: 992px) {
  .l-tutorial-container .c-tutorial-item {
    margin-top: 0 !important;
  }
}

.l-tutorial-container--slider {
  position: relative;
}
.l-tutorial-container--slider .c-tutorial-item {
  margin: 0 9px;
}
.l-tutorial-container--slider .o-button__icon--prev {
  left: 10px;
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  transition: all 0.5s;
}
@media (max-width: 992px) {
  .l-tutorial-container--slider .o-button__icon--prev {
    opacity: 1;
  }
}
.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 {
  right: 10px;
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  transition: all 0.5s;
}
@media (max-width: 992px) {
  .l-tutorial-container--slider .o-button__icon--next {
    opacity: 1;
  }
}
.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);
}

/* ==========================================================================
3. Hero - Homepage
========================================================================== */
.l-home-hero {
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-column-gap: 54px;
}
@media (max-width: 1280px) {
  .l-home-hero {
    padding: 0 30px;
  }
}
@media (max-width: 1080px) {
  .l-home-hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .l-home-hero {
    grid-template-columns: 1fr;
    padding: 0;
  }
}
@media (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;
  }
}
.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 (max-width: 768px) {
  .l-home-hero .l-home-hero__video-wrapper .c-tutorial-item .c-tutorial-item__art {
    display: none;
  }
}
@media (max-width: 1080px) {
  .l-home-hero .l-home-hero__new {
    margin-top: 30px;
  }
}
.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 (max-width: 768px) {
  .l-home-hero .l-home-hero__video-player {
    border-radius: 0.5625rem;
  }
}
.l-home-hero .l-home-hero__video-player img {
  width: 100%;
}

/* ==========================================================================
3. Follow pillars
========================================================================== */
.l-follow-pillars {
  background: #ffffff;
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
@media (max-width: 1280px) {
  .l-follow-pillars {
    padding: 0 0 0 30px;
  }
}
@media (max-width: 768px) {
  .l-follow-pillars {
    padding: 0;
  }
}
.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 (max-width: 992px) {
  .l-follow-pillars h3 {
    margin-right: 15px;
  }
}
.l-follow-pillars ul {
  margin-left: auto;
  margin-right: auto;
}
.l-follow-pillars ul li {
  margin: 0 6px;
}

/* ==========================================================================
4. Library - Dark mode layout fixes
========================================================================== */
.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;
}

/* ==========================================================================
5. Up Next Fixes/Hacks
========================================================================== */
.l-tutorial-next-course .c-tutorial-item__in-progress {
  display: none !important;
}
@media (max-width: 768px) {
  .l-tutorial-next-course .c-tutorial-item__metadata-short {
    display: flex !important;
  }
}
@media (max-width: 768px) {
  .l-tutorial-next-course .c-tutorial-item__art {
    display: none !important;
  }
}

/**
 *
 * 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
========================================================================== */
.l-book-chapter .l-admin {
  padding-left: 0;
}
@media (max-width: 1080px) {
  .l-book-chapter .l-admin--sidebar-open {
    padding-left: 270px;
  }
}
@media (max-width: 992px) {
  .l-book-chapter .l-admin--sidebar-open {
    padding-left: 0;
    padding-right: 0;
  }
}
.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 (max-width: 1080px) {
  .l-book-chapter .l-admin--sidebar-open .c-nav-sidebar--article {
    width: 270px !important;
  }
}
.l-book-chapter .l-admin--sidebar-open .o-button-chapter {
  display: none;
}
@media (max-width: 1200px) {
  .l-book-chapter .l-admin--sidebar-open .c-written-tutorial {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (max-width: 992px) {
  .l-book-chapter .l-admin--sidebar-open .c-written-tutorial {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.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 (max-width: 768px) {
  .l-book-chapter .c-written-tutorial__content {
    margin-top: 0 !important;
  }
}
@media (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;
  }
}

.l-book-chapter .l-book-header--hide {
  display: none !important;
}
.l-book-chapter .l-book-header--margin {
  margin-left: -3px !important;
}

/* ==========================================================================
2. End of chapter message
========================================================================== */
.l-book-chapter-end-message {
  padding: 60px 24px 60px;
  border-top: 1px solid #DFE7F0;
  margin-top: 0;
}
@media (max-width: 768px) {
  .l-book-chapter-end-message {
    padding: 60px 0;
  }
}
.l-book-chapter-end-message p {
  font-size: 0.9375rem !important;
  /* 15/16 */
  color: #6E7687;
}

/* ==========================================================================
3. Materials
========================================================================== */
.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: rgb(64.1208396947, 69.5548091603, 78.2491603053) !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 (max-width: 800px) {
  .l-book-materials-download .c-modal .c-modal__close {
    width: 36px !important;
  }
}
.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 (max-width: 800px) {
  .l-book-materials-download .c-modal .o-button--green {
    width: auto !important;
  }
}
@media (max-width: 800px) {
  .l-book-materials-download .c-modal .o-button--green .o-button__icon--right {
    margin-left: 10px !important;
  }
}
.l-book-materials-download .c-modal .o-button--green svg {
  fill: #158443 !important;
}

/* ==========================================================================
4. Chapter font style
========================================================================== */
/* ==========================================================================
6. Chapter text size
========================================================================== */
.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 (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 */
  }
}
.l-book-chapter article.c-written-tutorial .c-written-tutorial__content h3 {
  font-size: 1.5em;
}
@media (max-width: 768px) {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h3 {
    font-size: 1.25em;
    /* 21/16 */
  }
}
.l-book-chapter article.c-written-tutorial .c-written-tutorial__content h4 {
  font-size: 1.188em;
}
@media (max-width: 768px) {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content h4 {
    font-size: 1.0625em;
  }
}
.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 (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;
  }
}
.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 (max-width: 768px) {
  .l-book-chapter article.c-written-tutorial .c-written-tutorial__content blockquote {
    font-size: 0.9375em;
    /* 15/16 */
  }
}

.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 (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;
  }
}
.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 (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;
  }
}
.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 (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;
  }
}
.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 (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;
  }
}
.l-chapter-text-size-140 .c-book-chapter .c-written-tutorial__content blockquote p:first-child {
  margin-top: 0 !important;
}

/* ==========================================================================
7. Chapter page size
========================================================================== */
/* ==========================================================================
8. Chapter image size
========================================================================== */
.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;
}

/* ==========================================================================
9. Book Hero
========================================================================== */
.l-book-hero {
  padding-bottom: 0 !important;
}
@media (max-width: 992px) {
  .l-book-hero {
    padding-bottom: 45px !important;
  }
}
@media (max-width: 768px) {
  .l-book-hero {
    padding-top: 45px !important;
  }
}
@media (max-width: 600px) {
  .l-book-hero {
    padding-top: 30px !important;
    padding-bottom: 15px !important;
  }
}
.l-book-hero .l-collection-hero__wrapper {
  grid-template-columns: 300px 1fr !important;
  align-items: flex-start !important;
}
@media (max-width: 992px) {
  .l-book-hero .l-collection-hero__wrapper {
    grid-column-gap: 0 !important;
    grid-template-columns: 285px 1fr !important;
  }
}
@media (max-width: 768px) {
  .l-book-hero .l-collection-hero__wrapper {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  .l-book-hero .l-collection-hero__artwork {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center;
  }
}
@media (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;
  }
}
.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 (max-width: 768px) {
  .l-book-hero .l-collection-hero__copy-markdown {
    font-size: 1rem !important;
    /* 17/16 */
  }
}
@media (max-width: 992px) {
  .l-book-hero .l-collection-hero__artwork img {
    max-width: 240px !important;
  }
}
@media (max-width: 768px) {
  .l-book-hero .l-collection-hero__artwork img {
    max-width: 180px !important;
  }
}
@media (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 (max-width: 600px) {
  .l-book-hero .l-book-hero__buttons .l-book-materials-download .u-hide-mobile {
    display: inline-block !important;
  }
}

.l-book-modules .l-collection-modules__module {
  grid-template-columns: 300px 1fr !important;
  grid-column-gap: 90px !important;
}
@media (max-width: 992px) {
  .l-book-modules .l-collection-modules__module {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 992px) {
  .l-book-modules .l-collection-modules__pitch-cards {
    order: 2;
  }
}

/* ==========================================================================
10. Book Sales
========================================================================== */
.l-book-sales-grid {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 4fr;
  grid-column-gap: 16px;
}
@media (max-width: 768px) {
  .l-book-sales-grid {
    grid-template-columns: 1fr;
  }
}

.l-book-sales-left {
  padding-right: 50px;
}
@media (max-width: 1200px) {
  .l-book-sales-left {
    padding-right: 24px;
  }
}
@media (max-width: 768px) {
  .l-book-sales-left {
    padding-right: 0;
  }
}

.l-book-sales-left-top {
  display: grid;
  grid-template-columns: 0.25fr 0.75fr;
  grid-column-gap: 8px;
}
@media (max-width: 1200px) {
  .l-book-sales-left-top {
    grid-column-gap: 24px;
  }
}
@media (max-width: 768px) {
  .l-book-sales-left-top {
    grid-template-columns: 2fr 8fr;
  }
}

@media (max-width: 992px) {
  .l-collection-hero__copy-markdown {
    font-size: 0.9375rem;
    /* 15/16 */
  }
}
@media (max-width: 768px) {
  .l-collection-hero__copy-markdown {
    display: none;
  }
}

.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 (max-width: 768px) {
  .l-book-meta span {
    font-size: 0.875rem;
    /* 14/16 */
  }
}
.l-book-meta span:last-child {
  font-weight: 700;
  margin-top: 3px;
}

.l-book-art {
  text-align: right;
}
@media (max-width: 768px) {
  .l-book-art {
    text-align: left;
  }
}
.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 (max-width: 768px) {
  .l-book-art img {
    max-width: 324px;
  }
}
.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 (max-width: 768px) {
  .l-book-sales-copy h2 {
    font-size: 1.375rem;
    /* 22/16 */
  }
}
.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 (max-width: 768px) {
  .l-book-sales-copy h3 {
    font-size: 1.1875rem;
    /* 19/16 */
  }
}
.l-book-sales-copy h4 {
  font-size: 1.0625rem;
  /* 17/16 */
  margin-top: 12px;
}
.l-book-sales-copy p {
  margin-top: 18px;
}
@media (max-width: 768px) {
  .l-book-sales-copy p {
    font-size: 1rem;
    /* 15/16 */
  }
}
.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 (max-width: 768px) {
  .l-book-toc h2 {
    font-size: 1.375rem;
    /* 22/16 */
  }
}
.l-book-toc h2:first-child {
  margin-top: 0;
}
.l-book-toc h4 {
  line-height: 1.25;
}
@media (max-width: 768px) {
  .l-book-toc h4 {
    font-size: 1.1875rem !important;
    /* 19/16 */
  }
}
.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 (max-width: 768px) {
  .l-book-contributors .l-grid-3 {
    grid-template-columns: 1fr;
    grid-row-gap: 0;
  }
}
@media (max-width: 768px) {
  .l-book-contributors .c-content-author:first-child {
    margin-top: 0;
  }
}
.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 (max-width: 768px) {
  .l-book-contributors .c-content-author__title {
    max-width: none;
    font-size: 1.1875rem !important;
    /* 19/16 */
  }
}
.l-book-contributors .c-content-author img {
  width: 90px;
  height: 90px;
  border-radius: 0.5625rem;
  /* 9/16 */
  border: 0;
  box-shadow: 0;
}
@media (max-width: 768px) {
  .l-book-contributors .c-content-author img {
    width: 72px;
    height: 72px;
  }
}

.l-book-sales-right {
  margin-top: -24px;
}
@media (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);
  }
}
.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 (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container {
    padding-top: 0;
    height: auto;
  }
}
.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 (max-width: 992px) {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count {
    padding-bottom: 24px;
  }
}
@media (max-width: 992px) {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count a {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
  }
}
.l-book-sales-right .l-book-sales-right--container .c-rating-count--empty {
  margin-top: 3px !important;
}
@media (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count--empty {
    margin-top: 0 !important;
  }
}
.l-book-sales-right .l-book-sales-right--container .c-rating-count--empty a {
  color: #158443;
}
@media (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container .c-rating-count--empty a {
    font-size: 0.875rem;
  }
}
.l-book-sales-right .l-book-sales-right--container .o-button-close {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
}
@media (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container .o-button-close {
    display: flex;
  }
}
.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 (min-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container-minify .l-button-book-meta-open {
    display: none;
  }
}
@media (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 (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right--container-minify > .l-flex {
    display: none;
  }
}
.l-book-sales-right h1 {
  line-height: 1;
}
@media (max-width: 992px) {
  .l-book-sales-right h1 {
    font-size: 2.5rem;
  }
}
@media (max-width: 768px) {
  .l-book-sales-right h1 {
    font-size: 1.375rem;
    /* 22/16 */
  }
}
.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 (max-width: 768px) {
  .l-book-sales-right a.rating {
    display: none;
  }
}
.l-book-sales-right a.rating .l-font-17 {
  font-size: 1.5rem;
  /* 24/16 */
  top: 2px;
  position: relative;
}
@media (max-width: 992px) {
  .l-book-sales-right a.rating .l-font-17 {
    font-size: 1.1875rem;
    /* 19/16 */
  }
}
.l-book-sales-right a.rating svg {
  width: 20px;
  height: 19px;
}
@media (max-width: 992px) {
  .l-book-sales-right a.rating svg {
    width: 16px;
  }
}
.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 (max-width: 992px) {
  .l-book-sales-right .l-book-sales-right-authors {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .l-book-sales-right .l-book-sales-right-authors {
    font-size: 0.875rem !important;
    /* 14/16 */
  }
}

@media (max-width: 768px) {
  .l-book-sales-right--show {
    overflow-y: scroll;
    height: 100%;
  }
}
.l-book-sales-right--show .o-button-close {
  display: none !important;
}
@media (max-width: 768px) {
  .l-book-sales-right--show .l-book-sales-cta-secondary {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .l-book-sales-right--show .l-book-sales-cta-tertiary {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .l-book-sales-right--show .l-book-sales-cta-close {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .l-book-sales-right--show .l-no-border {
    border-bottom: 1px solid #DFE7F0 !important;
  }
}
@media (max-width: 768px) {
  .l-book-sales-right--show .o-button--huge {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}

.l-book-sales-cta {
  border-bottom: 1px solid #DFE7F0;
  margin-top: 15px;
  padding-bottom: 15px;
}
@media (max-width: 768px) {
  .l-book-sales-cta {
    margin-top: 10px;
    padding-bottom: 10px;
  }
}
.l-book-sales-cta:last-child {
  border-bottom: 0;
}
@media (max-width: 768px) {
  .l-book-sales-cta .o-button--huge {
    height: auto;
    line-height: 1.25;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media (max-width: 768px) {
  .l-book-sales-cta.l-book-sales-cta-secondary {
    display: none;
  }
}
.l-book-sales-cta.l-book-sales-cta-tertiary {
  display: none;
}
@media (max-width: 768px) {
  .l-book-sales-cta.l-book-sales-cta-tertiary {
    display: block;
  }
}
.l-book-sales-cta.l-book-sales-cta-open {
  padding-bottom: 0;
}
.l-book-sales-cta.l-book-sales-cta-close {
  display: none;
}
@media (max-width: 768px) {
  .l-book-sales-cta .l-book-sales-right-info {
    font-size: 0.8125rem;
    /* 13/16 */
  }
}
@media (max-width: 768px) {
  .l-book-sales-cta .o-button {
    font-size: 0.875rem;
    /* 14/16 */
  }
}

.l-book-sales-related {
  max-width: 1152px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .l-book-sales-related .l-grid-4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .l-book-sales-related .l-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .l-book-sales-related .l-grid-4 {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/**
 *
 * Layouts
 *
 * For use on path pages
 *
 * 1. Hero
 *
 * 2. Popular
 *
 * 3. List
 *
 * 4. Collection of Paths
 *
 **/
.l-path-grid {
  display: grid;
  grid-template-columns: 3.33fr 6.66fr;
  grid-column-gap: 26px;
}
@media (max-width: 992px) {
  .l-path-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
1. Hero
========================================================================== */
.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 (max-width: 768px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__copy .o-button--continue .o-button__label {
    max-width: 200px;
  }
}
.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 (max-width: 1080px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__video {
    margin-right: -100px;
  }
}
@media (max-width: 992px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__video {
    order: 1;
  }
}
@media (max-width: 768px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__video {
    margin-right: 0;
  }
}
.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 (max-width: 992px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork--feature {
    width: 300px;
  }
}
@media (max-width: 600px) {
  .l-path-hero .l-path-hero__wrapper .l-path-hero__artwork--feature {
    margin: 0 auto;
  }
}
.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 (max-width: 768px) {
  .l-path-hero p {
    font-size: 1rem;
  }
}
.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 (min-width: 1080px) {
  .l-path-hero .c-video-player__video {
    width: 720px;
  }
}
@media (max-width: 768px) {
  .l-path-hero .c-video-player__video {
    width: 100%;
  }
}
.l-path-hero .c-video-player__video img {
  width: 100%;
}
.l-path-hero .c-box-list {
  position: absolute;
  top: 10px;
  left: 180px;
}
@media (max-width: 768px) {
  .l-path-hero .c-box-list {
    left: 10px;
    top: 70px;
  }
}
.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;
}

/* ==========================================================================
2. Popular
========================================================================== */
@media (max-width: 768px) {
  .l-popular-paths {
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }
}

/* ==========================================================================
3. List
========================================================================== */
#learning-path .learning-path-list .c-tutorial-item:before {
  top: 68px;
}
@media (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item:before {
    top: 66px;
    left: 19px;
  }
}
#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 (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__upper {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__upper .c-tutorial-item__title {
    font-size: 1.3125rem;
  }
}
#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 (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__metadata-short {
    display: none;
  }
}
#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 (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text {
    margin-left: 0;
    margin-top: 0 !important;
  }
}
#learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text .c-tutorial-item__description {
  padding-right: 0;
}
@media (max-width: 768px) {
  #learning-path .learning-path-list .c-tutorial-item a .c-tutorial-item__text .c-tutorial-item__description {
    padding-right: 20px;
  }
}
@media (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 */
  }
}
#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;
}

/* ==========================================================================
4. Collection of Paths
========================================================================== */
@media (max-width: 992px) {
  .l-collection-paths {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .l-collection-paths {
    grid-template-columns: 1fr;
  }
}
.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;
}

/**
 *
 * Domains
 *
 *
 *
 * 1. Collection of tutorials
 *
 *
 **/
/* ==========================================================================
1. Collection of tutorials
========================================================================== */
@media (max-width: 768px) {
  .l-domain-collection .c-tutorial--list.c-tutorial--number .c-tutorial-item .c-tutorial-item__text {
    margin-top: 0 !important;
  }
}
@media (max-width: 768px) {
  .l-domain-collection .c-tutorial--list.c-tutorial--number .c-tutorial-item__number-badge .o-badge-tutorial {
    left: auto !important;
  }
}
@media (max-width: 768px) {
  .l-domain-collection .c-tutorial--list .c-tutorial-item {
    margin-top: 0 !important;
  }
}
.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 (max-width: 768px) {
  .l-domain-collection .c-tutorial--number .c-tutorial-item .c-tutorial-item__text {
    margin-top: 0 !important;
  }
}
.l-domain-collection .c-tutorial--number .c-tutorial-item .o-badge-tutorial {
  top: 28px !important;
  right: 28px !important;
  left: auto !important;
}
@media (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 (max-width: 768px) {
  .l-domain-collection .c-tutorial--number .c-tutorial-item .c-tutorial-item__text {
    margin-top: 0 !important;
  }
}

/**
 *
 * Collections
 *
 *
 *
 * 1. Hero
 *
 * 1a. Trailer modifier
 *
 * 2. Collection
 *
 * 3. Modules & Videos
 *
 * 4. Book hero
 *
 *
 *
 **/
/* ==========================================================================
1. Hero
========================================================================== */
.l-collection-hero {
  padding-top: 72px;
  padding-bottom: 72px;
  padding-left: 30px;
  padding-right: 30px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .l-collection-hero {
    padding-top: 0;
    padding-bottom: 54px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.l-collection-hero .l-collection-hero__wrapper {
  display: grid;
  grid-template-columns: 1fr 500px;
  grid-column-gap: 90px;
  align-items: center;
}
@media (max-width: 992px) {
  .l-collection-hero .l-collection-hero__wrapper {
    grid-template-columns: 1fr 300px;
  }
}
@media (max-width: 768px) {
  .l-collection-hero .l-collection-hero__wrapper {
    grid-template-columns: 1fr;
  }
}
.l-collection-hero h1 {
  line-height: 1.125;
}
@media (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;
  }
}
.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 (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;
  }
}
.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 (max-width: 768px) {
  .l-collection-hero .l-collection-hero__artwork {
    order: 1;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-bottom: 10px;
    animation: none;
  }
}
.l-collection-hero .l-collection-hero__artwork img {
  max-width: 100%;
}
@media (max-width: 768px) {
  .l-collection-hero .l-collection-hero__artwork img {
    width: 100%;
  }
}
.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 (max-width: 768px) {
  .l-collection-hero .l-collection-hero__artwork--desktop {
    display: none;
  }
}
.l-collection-hero .l-collection-hero__artwork--mobile {
  display: none;
}
@media (max-width: 768px) {
  .l-collection-hero .l-collection-hero__artwork--mobile {
    display: block;
  }
}

/* ==========================================================================
1a. Trailer modifier
========================================================================== */
.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 (max-width: 768px) {
  .l-collection-hero--trailer .l-collection-hero__wrapper {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .l-collection-hero--trailer .l-collection-hero__copy {
    margin-top: 0;
  }
}
.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 (min-width: 1200px) {
  .l-collection-hero--trailer .l-collection-hero__trailer {
    width: 100%;
    padding-bottom: 56.25%;
  }
}
@media (max-width: 768px) {
  .l-collection-hero--trailer .l-collection-hero__trailer {
    width: 100%;
    padding-bottom: 56.25%;
    margin-top: 15px;
    border: none;
  }
}
.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 (max-width: 768px) {
  .l-collection-hero--trailer .l-collection-hero__trailer img, .l-collection-hero--trailer .l-collection-hero__trailer iframe {
    height: 100%;
  }
}

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

/* ==========================================================================
3. Modules & Videos
========================================================================== */
.l-collection-modules .l-collection-modules__module {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-column-gap: 120px;
}
@media (max-width: 1080px) {
  .l-collection-modules .l-collection-modules__module {
    grid-template-columns: 1fr 360px;
  }
}
@media (max-width: 992px) {
  .l-collection-modules .l-collection-modules__module {
    grid-template-columns: 1fr;
  }
}
.l-collection-modules .l-collection-modules__module-episodes h2 {
  margin-top: 50px;
}
@media (max-width: 768px) {
  .l-collection-modules .l-collection-modules__module-episodes h2 {
    font-size: 1.5rem;
  }
}
.l-collection-modules .l-collection-modules__module-episodes h2:first-child {
  margin-top: 0;
}
@media (max-width: 992px) {
  .l-collection-modules .l-collection-modules__pitch-cards {
    margin-top: 60px;
  }
}
.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(/assets/svg-icons/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;
}

/**
 * Achievements
 *
 *
 * 1. Achievements / Badge Layout page
 *
 *
 */
/* ==========================================================================
1. Achievements / Badge Layout page
========================================================================== */
.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;
}

/**
 *
 * 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
========================================================================== */
.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(/assets/patterns/black-friday-2021-hero-pattern-style-1-aad4f39f6af8bd547f5e1cda523dc4aecc476aeca0340d78984c32e242ac88ae.png);
  background-repeat: repeat-x;
  background-size: 1480px;
}
.l-black-friday-ui-pattern-2021:after {
  content: "";
  position: absolute;
  bottom: -90px;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-2-cbf4df08a1a98cb35dbaf7d2149956f0dffe854767702da9245960bee1a4c304.png);
  background-repeat: repeat-x;
  background-size: 1480px;
}

/* ==========================================================================
1c. Black Friday 2021 Top Advert
========================================================================== */
.c-banner-draper.l-black-friday-ui-sales-2021 {
  position: relative;
  padding: 70px 0;
}
.c-banner-draper.l-black-friday-ui-sales-2021:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-1-aad4f39f6af8bd547f5e1cda523dc4aecc476aeca0340d78984c32e242ac88ae.png);
  background-repeat: repeat-x;
  background-size: 1480px;
}
.c-banner-draper.l-black-friday-ui-sales-2021:after {
  content: "";
  position: absolute;
  bottom: -90px;
  left: 0;
  width: 100%;
  height: 120px;
  background-image: url(/assets/patterns/black-friday-2021-hero-pattern-style-2-cbf4df08a1a98cb35dbaf7d2149956f0dffe854767702da9245960bee1a4c304.png);
  background-repeat: repeat-x;
  background-size: 1480px;
}
@media (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;
  }
}

/* ==========================================================================
1d. Black Friday 2021 Related Advert
========================================================================== */
.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 (max-width: 768px) {
  .c-banner-related.l-black-friday-ui-sales-2021 .c-banner-related__artwork {
    margin-bottom: -10px;
  }
}

/* ==========================================================================
1e. Black Friday 2021 End of Page Advert
========================================================================== */
.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 (max-width: 1080px) {
  .l-black-friday-ui-sales-2021.c-banner-draper--subscription .c-banner-draper__copy {
    text-align: center;
  }
}

@media (max-width: 1080px) {
  .l-black-friday-ui-sales-2021.c-banner-draper--subscription .c-banner-draper__art {
    margin-bottom: -10px;
  }
}

/* ==========================================================================
1f. Black Friday 2021 Sticky Banner
========================================================================== */
.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 (max-width: 985px) {
  .c-banner-draper-sticky.l-black-friday-ui-sales-2021 .c-banner-draper-sticky__wrapper {
    padding: 10px 60px 15px 20px;
  }
}
.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;
}

/* ==========================================================================
1g. Black Friday 2021 Video Paywall
========================================================================== */
.c-video-player__paywall.l-black-friday-ui-sales-2021 {
  position: absolute !important;
}

/**
 *
 * Home
 *
 *
 *
 * 1. Hero
 *
 * 2. Pillars
 *
 * 3. Top Tutorials
 *
 * 4. Our Community
 *
 * 5. Wrapper
 *
 * 6. Getting Started
 *
 **/
/* ==========================================================================
1. Hero
========================================================================== */
.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 (max-width: 768px) {
  section.home-hero {
    padding-top: 60px;
  }
}
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 (max-width: 992px) {
  section.home-hero .home-hero__wrapper {
    display: block;
  }
}
section.home-hero h1, section.home-hero p {
  color: #ffffff;
}
section.home-hero h1 {
  font-size: 4rem; /* 64/16 */
}
@media (max-width: 1080px) {
  section.home-hero h1 {
    font-size: 3.5rem;
  }
}
@media (max-width: 768px) {
  section.home-hero h1 {
    font-size: 1.875rem;
  }
}
section.home-hero p {
  font-family: "Bitter", serif;
  font-size: 1.5rem; /* 24/16 */
}
@media (max-width: 768px) {
  section.home-hero p {
    font-size: 1rem;
  }
}
section.home-hero .home-hero__testimonial {
  margin-bottom: 90px;
}
@media (max-width: 992px) {
  section.home-hero .home-hero__testimonial {
    display: none;
  }
}
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 (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;
  }
}
section.home-hero .home-hero__action h4 {
  text-align: center;
  font-size: 1.5rem; /* 24/16 */
  padding: 0 60px;
  margin-bottom: 27px;
}
@media (max-width: 992px) {
  section.home-hero .home-hero__action h4 {
    display: none;
  }
}
section.home-hero .home-hero__action h5 {
  text-align: center;
  font-size: 1.1875rem; /* 19/16 */
}
@media (max-width: 992px) {
  section.home-hero .home-hero__action h5 {
    display: none;
  }
}
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 (max-width: 992px) {
  section.home-hero .home-hero__action ul li {
    color: #ffffff;
  }
}
@media (max-width: 768px) {
  section.home-hero .home-hero__action ul li {
    font-size: 1rem;
  }
}
section.home-hero .home-hero__action ul li:before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url(/assets/svg-icons/checkmark--green-1e096ae45df68feb9ffcc548c7c6510565f7f0d4098690d0121fe6739a2a7e76.png);
  background-size: cover;
  position: absolute;
  left: 0;
  top: 1px;
}
@media (max-width: 992px) {
  section.home-hero .home-hero__action ul li:before {
    background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  }
}
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;
}

/* ==========================================================================
2. Pillars
========================================================================== */
section.home-pillars {
  position: relative;
}
section.home-pillars .home-pillars--adjust {
  margin-top: -50px;
}
@media (max-width: 992px) {
  section.home-pillars .home-pillars--adjust {
    margin-top: 0;
  }
}
@media (max-width: 992px) {
  section.home-pillars .l-flex {
    display: block;
  }
}
section.home-pillars h2 {
  color: #ffffff;
  font-size: 3rem; /* 48/16 */
  line-height: 1.125;
}
@media (max-width: 768px) {
  section.home-pillars h2 {
    font-size: 1.875rem; /* 15/16 */
  }
}
section.home-pillars p {
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
  margin-top: 15px;
  color: #ffffff;
}
@media (max-width: 768px) {
  section.home-pillars p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
section.home-pillars .home-pillars__entry {
  min-height: 720px;
  padding: 45px 90px;
  overflow: hidden;
}
@media (max-width: 1080px) {
  section.home-pillars .home-pillars__entry {
    padding: 45px 60px;
  }
}
@media (max-width: 768px) {
  section.home-pillars .home-pillars__entry {
    min-height: auto;
    padding: 30px 30px;
  }
}
section.home-pillars .home-pillars__entry-wrapper {
  max-width: 550px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  section.home-pillars .home-pillars__entry-wrapper {
    max-width: auto;
  }
}
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;
}

/* Adjustments for beta pillars */
.home-pillars--beta {
  min-height: 420px !important;
}
@media (max-width: 768px) {
  .home-pillars--beta {
    min-height: auto !important;
  }
}
.home-pillars--beta h2 {
  font-size: 2.25rem !important; /* 36/16 */
  margin-top: 15px;
}
@media (max-width: 768px) {
  .home-pillars--beta h2 {
    font-size: 1.875rem !important; /* 15/16 */
  }
}
.home-pillars--beta p {
  font-size: 1rem !important;
}
@media (max-width: 768px) {
  .home-pillars--beta p {
    font-size: 0.9375rem !important; /* 15/16 */
  }
}
.home-pillars--beta .home-pillars__entry-hint {
  margin-top: 48px;
}
.home-pillars--beta .o-button--dark {
  background: none;
  padding: 0;
}

@media (min-width: 1200px) {
  .home-pillars__left, .home-pillars__right {
    width: 50%;
  }
}

/* Designs for each pillar */
.home-pillars--swift {
  background: #FF6333;
}
.home-pillars--swift img {
  width: 340px;
  display: block;
  margin: 0 auto;
  position: relative;
  right: -70px;
  bottom: -20px;
}
@media (max-width: 768px) {
  .home-pillars--swift img {
    width: 240px;
  }
}
.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 (max-width: 992px) {
  .home-pillars--android {
    border-radius: 0;
  }
}
.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(/assets/artwork/android-pillar--no-shadow-667398ceb6be2f3e7c6f8452778b1dedbc987c594b248e24226e9d8cdb0f3399.svg);
  background-size: cover;
  position: absolute;
  bottom: -80px;
  left: 50%;
  z-index: -1;
  margin-left: -115px;
}
@media (max-width: 768px) {
  .home-pillars--android:after {
    display: none;
  }
}
.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(/assets/artwork/server-side-swift-database-d8876bd377c59aa11239c919f6ee265191d69f60124957f9ac575c0a78330884.svg);
  background-size: 210px;
  background-position: bottom -70px right -15px;
  background-repeat: no-repeat;
}
@media (max-width: 992px) {
  .home-pillars--server-side-swift {
    border-radius: 0;
  }
}
.home-pillars--server-side-swift svg {
  fill: #363B44;
}

.home-pillars--unity {
  background: #687BAD;
  background-image: url(/assets/artwork/unity-vr-fe00fd0b52b25e10558b299ff0c0f54d8c9eecf812f9358ca0a69e56b20b6add.svg);
  background-size: 420px;
  background-position: bottom -250px right -175px;
  background-repeat: no-repeat;
}
.home-pillars--unity svg {
  fill: #687BAD;
}

.home-pillars--unreal-engine {
  background: #535a65;
  background-image: url(/assets/artwork/unreal-engine-ray-gun-7a18eaede9834f3a11c2d0fa336e36cf3eeed706dd3fef81d309cb525b76edd5.svg);
  background-size: 180px;
  background-position: bottom -20px right 50px;
  background-repeat: no-repeat;
  border-radius: 0 0 12px 0;
}
@media (max-width: 992px) {
  .home-pillars--unreal-engine {
    border-radius: 0;
  }
}
.home-pillars--unreal-engine svg {
  fill: #535a65;
}

.home-pillars--flutter {
  background: #096ABB;
  background-image: url(/assets/artwork/flutter-logo-acf12cd5392998d5437cbfeefb41a3edfb6d680dd49a0c52818dae970ed995b5.svg);
  background-size: 210px;
  background-position: bottom -60px right 25px;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .home-pillars--flutter {
    background-size: 180px;
    background-position: bottom -60px right 10px;
  }
}
.home-pillars--flutter svg {
  fill: #096ABB;
}

.home-pillars--library {
  background: #1E8C75;
  background-image: url(/assets/artwork/library-yeti-eddcfa99f0336e4f8e3b212ff494672ad171c20724e49a58235a875823592b65.svg);
  background-size: 320px;
  background-position: bottom -90px right -125px;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .home-pillars--library {
    background-size: 240px;
  }
}
.home-pillars--library svg {
  fill: #1E8C75;
}

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

/* ==========================================================================
4. Our Community
========================================================================== */
.home-community {
  position: relative;
  z-index: 1;
}
.home-community h3 {
  font-size: 3rem; /* 48/16 */
}
@media (max-width: 768px) {
  .home-community h3 {
    font-size: 1.875rem;
  }
}
.home-community p {
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
  margin-top: 20px;
}
@media (max-width: 768px) {
  .home-community p {
    font-size: 1rem;
  }
}

/* ==========================================================================
5. Tutorials
========================================================================== */
@media (max-width: 768px) {
  .home-tutorials h3 {
    text-align: left;
  }
}
.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;
}

/* ==========================================================================
6. Logged in homepage
========================================================================== */
.l-home-section-border-padding {
  padding-top: 30px;
  border-top: 1px solid #D6E0EF;
}
@media (max-width: 768px) {
  .l-home-section-border-padding {
    padding-top: 0;
    border-top: none;
  }
}

.l-home-section-border-padding-bottom {
  padding-bottom: 42px;
  border-bottom: 1px solid #D6E0EF;
  margin-bottom: -18px;
}
@media (max-width: 768px) {
  .l-home-section-border-padding-bottom {
    padding-bottom: 0;
    border-top: none;
    margin-bottom: 0;
  }
}

/* ==========================================================================
6. Getting Started
========================================================================== */
.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 (max-width: 768px) {
  .l-home-getting-started .c-tutorial-item .c-tutorial-item__art img {
    max-width: 270px;
  }
}
.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 (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 */
  }
}
.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(/assets/artwork/illustration-onboarding-video-8127ed9d0195d0511990d8c4286c7e69b98a68f656d11a57348a90f788a992d7.svg);
  background-size: cover;
  z-index: -1;
  transition: transform 0.25s ease-out;
}
.l-home-getting-started .c-tutorial-item--onboarding-video > a {
  flex-wrap: wrap;
  padding-top: 0;
}
.l-home-getting-started .c-tutorial-item--path a:before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 244px;
  height: 154px;
  margin-left: -122px;
  background-image: url(/assets/artwork/illustration-paths-6d7cc0918e3be5ab9fe64bfd9d511fab8099b5dd330983ad7d1f6f9853109304.svg);
  background-size: cover;
}
.l-home-getting-started .c-tutorial-item--ios a:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  width: 182px;
  height: 147px;
  margin-left: -90px;
  background-image: url(/assets/artwork/illustration-ios-app-6fe01cac104d72c4c4f6859a8ecba8881d1fa176c021c6f868634e82eb53beb5.svg);
  background-size: cover;
}
.l-home-getting-started .c-tutorial-item--android a:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 50%;
  width: 190px;
  height: 139px;
  margin-left: -95px;
  background-image: url(/assets/artwork/illustration-android-app-a5e1f0bed7c8b52abdf37955cbbda89773dedff4a44634ecb3ce8b02c000efc8.svg);
  background-size: cover;
}
.l-home-getting-started .c-tutorial-item--book a:before {
  content: "";
  position: absolute;
  top: 27px;
  left: 50%;
  width: 240px;
  height: 140px;
  margin-left: -120px;
  background-image: url(/assets/artwork/illustration-ios-apprentice-2ea93f658abc2aaec4e97ed68c2b2c2d5aeb027c63513e660be6d07692e6cb2d.svg);
  background-size: cover;
}

/* ==========================================================================
7. Videos & Screencasts
========================================================================== */
@media (min-width: 1440px) {
  .l-home-card-grid .l-grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .l-home-card-grid .l-grid-2 {
    display: block;
  }
}
@media (max-width: 1080px) {
  .l-home-card-grid .c-tutorial--list {
    grid-template-columns: 1fr 1fr;
  }
}
.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 (max-width: 768px) {
  .l-home-card-grid .c-tutorial-item .c-tutorial-item__number-badge {
    display: none;
  }
}
.l-home-card-grid .c-tutorial-item .o-badge-tutorial--locked {
  display: flex;
}

/* ==========================================================================
7. Continue Watching
========================================================================== */
.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 (min-width: 1600px) {
  .l-home-continue-watching .c-tutorial--featured {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .l-home-continue-watching .c-tutorial--featured {
    display: grid;
  }
}
.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 (min-width: 1600px) {
  .l-home-continue-watching .c-tutorial-item {
    min-width: auto !important;
  }
}
.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 (max-width: 992px) {
  .l-home-continue-watching .c-tutorial-item .c-tutorial-item__title {
    white-space: wrap;
  }
}
.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;
}

/* ==========================================================================
8. New Tutorials w/ Sidebar
========================================================================== */
.l-home-new-tutorials-sidebar > div {
  display: grid;
  grid-template-columns: 1fr 420px;
  grid-column-gap: 90px;
}
@media (max-width: 1200px) {
  .l-home-new-tutorials-sidebar > div {
    grid-template-columns: 1fr 360px;
    grid-column-gap: 60px;
  }
}
@media (max-width: 992px) {
  .l-home-new-tutorials-sidebar > div {
    grid-template-columns: 1fr;
  }
}
.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 (max-width: 768px) {
  .l-home-new-tutorials .c-tutorial-item a .c-tutorial-item__text {
    display: grid !important;
  }
}
.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;
}

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

/* ==========================================================================
10. Books
========================================================================== */
.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 (max-width: 992px) {
  .l-home-books .c-tutorial--mason-mini {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini {
    grid-template-columns: 1fr;
  }
}
.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 (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item > a {
    grid-template-columns: 1fr 72px !important;
  }
}
@media (max-width: 768px) {
  .l-home-books .c-tutorial--mason-mini .c-tutorial-item > a .c-tutorial-item__upper {
    display: grid;
  }
}
.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 (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;
  }
}
.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 (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;
  }
}
.l-home-books .c-tutorial--mason-mini .c-tutorial-item .c-tutorial-item__art .c-tutorial-item__art-image--alternate {
  display: none !important;
}
@media (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;
  }
}
.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;
}

/* ==========================================================================
11. Recommendations/ Top Picks for You
========================================================================== */
.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;
}

/* ==========================================================================
5. Container
========================================================================== */
.l-home-dashboard {
  padding-left: 80px;
}
@media (max-width: 992px) {
  .l-home-dashboard {
    padding-left: 0;
  }
}
.l-home-dashboard .l-grid-2 {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1080px) {
  .l-home-dashboard .l-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.l-home-dashboard--sidebar {
  padding-left: 280px;
}
@media (max-width: 992px) {
  .l-home-dashboard--sidebar {
    padding-left: 0;
  }
}
.l-home-dashboard--sidebar .l-grid-2 {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 1440px) {
  .l-home-dashboard--sidebar .l-grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (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;
  }
}

/**
 *
 * 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
========================================================================== */
.l-home-teaspoon {
  overflow: hidden;
  background-image: url(/assets/patterns/shape-background-1-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg), url(/assets/patterns/shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-3-04b435a8b367f2acd5df19e9a5a9ebbc5cb9ebd83de592acf2614e6811916be2.svg), url(/assets/patterns/shape-background-4-0d96a3121fa3a02c4d7b878e6ed0675842ff726f49e40aba07030e84c1193067.svg), url(/assets/patterns/shape-background-5-c379900da8d28c5958f954b1f923c28e7059467db686e6466713c15ac59f9392.svg), url(/assets/patterns/shape-background-6-72adcee52e0ba4a563c8508d53eb3b86254d8a1c13794ac6058f49f443a162ff.svg), url(/assets/patterns/shape-background-7-807e6193fe372045c1a6e371de27240b7fa9c6f6204d89927caaf5d4ae34dee8.svg), url(/assets/patterns/shape-background-8-016f417c5c3633a91c7042c5b3cd3cd44e789c909675095750cc017b23010be4.svg), url(/assets/patterns/shape-background-9-67e08e905fe410e51fb03d1d9680af2c223752da21fd60247fc858579622ef3e.svg), url(/assets/patterns/shape-background-10-f4b5dbb2c2e157d0f0c5bd136cf6c3f8f54dd1b26e19bf117289e79ae35a6522.svg), url(/assets/patterns/shape-background-11-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg), url(/assets/patterns/shape-background-12-cf3b5cd30f02a0d25be106a8a8c5e4d38413686cfd6e9d4e3a6321bf8b628a07.svg);
  background-size: 1440px, 1440px, 1440px, 630px, 630px, 630px, 630px, 730px, 730px, 730px, 1440px, 1452px;
  background-position: top -40px right -50px, top right, top 430px right -200px, top 1330px left -400px, top 1380px left -420px, top 1530px right -400px, top 1580px right -420px, top 3030px right -400px, top 3580px right -420px, bottom 1000px left, bottom right -50px, bottom -1000px left;
  background-repeat: no-repeat;
}

/* ==========================================================================
1a. Hero (Top)
========================================================================== */
section.l-home-hero-teaspoon {
  padding-top: 136px;
}
@media (max-width: 1080px) {
  section.l-home-hero-teaspoon {
    padding-top: 90px;
  }
}
@media (max-width: 768px) {
  section.l-home-hero-teaspoon {
    padding-top: 60px;
  }
}
section.l-home-hero-teaspoon .l-home-hero-teaspoon__wrapper {
  display: grid;
  grid-template-columns: 0.6fr 0.4fr;
  grid-column-gap: 26px;
}
@media (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__wrapper {
    grid-template-columns: 1fr;
  }
}
section.l-home-hero-teaspoon .l-home-hero-teaspoon__left {
  position: relative;
}
@media (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left {
    max-width: 686px;
    margin: 0 auto;
  }
}
section.l-home-hero-teaspoon .l-home-hero-teaspoon__left:before {
  content: "";
  position: absolute;
  top: -240px;
  left: -180px;
  width: 324px;
  height: 541px;
  background-image: url(/assets/artwork/illustration-home-hero-7e4cfa11e8db4d2d1a0afbd5f7b6fd7f80bc4d22f8ec6a9c363668c68d23b493.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
section.l-home-hero-teaspoon .l-home-hero-teaspoon__left h1 {
  font-size: 3.75rem; /* 60/16 */
  line-height: 1;
}
@media (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left h1 {
    text-align: center;
  }
}
@media (max-width: 768px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left h1 {
    font-size: 2.25rem;
  }
}
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 (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__left p {
    text-align: center;
  }
}
@media (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;
  }
}
section.l-home-hero-teaspoon .l-home-hero-teaspoon__right {
  position: relative;
  z-index: 0;
}
section.l-home-hero-teaspoon .l-home-hero-teaspoon__right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -240px;
  left: 0;
  width: 626px;
  height: 669px;
  background-image: url(/assets/patterns/shape-background-13-08bfdf1a7c5ed93dd002ff177265c01825031b3c533df81d72958740f0ef2df8.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right:before {
    display: none;
  }
}
section.l-home-hero-teaspoon .l-home-hero-teaspoon__right > div {
  margin-top: -76px;
  padding-left: 40px;
}
@media (max-width: 1080px) {
  section.l-home-hero-teaspoon .l-home-hero-teaspoon__right > div {
    margin-top: 20px !important;
    padding-left: 0;
  }
}
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 (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;
  }
}
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 */
}

/* ==========================================================================
1b. Hero (Bottom)
========================================================================== */
section.l-home-hero-teaspoon-bottom {
  padding-bottom: 140px;
}
@media (max-width: 768px) {
  section.l-home-hero-teaspoon-bottom {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
section.l-home-hero-teaspoon-bottom .l-home-hero-teaspoon__left:before {
  top: -140px;
  left: -180px;
  width: 295px;
  height: 633px;
  background-image: url(/assets/artwork/illustration-home-footer-5e6ec24f93a67f76aacbd96085b7f42a0632451ee740aafc1b231d4e5c27573f.svg) !important;
  background-size: cover;
  background-repeat: no-repeat;
}
section.l-home-hero-teaspoon-bottom .l-home-hero-teaspoon__right:before {
  background-image: url(/assets/patterns/shape-background-14-f2bd03f1cf7707c297a77aa034a76339bf3bb6d26ce0d7cb71112f00a996fe0c.svg) !important;
  background-size: cover;
  background-repeat: no-repeat;
}
section.l-home-hero-teaspoon-bottom .l-home-hero-teaspoon__right > div {
  margin-top: 0;
}

/* ==========================================================================
2. Promo Video
========================================================================== */
@media (max-width: 1080px) {
  .l-home-promo-video-teaspoon {
    margin-top: 90px;
  }
}
.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 (max-width: 1080px) {
  .l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid {
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }
}
.l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid p {
  padding-right: 20px;
  font-size: 1rem;
}
@media (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 (max-width: 1080px) {
  .l-home-promo-video-teaspoon .l-home-promo-video-teaspoon__grid .l-home-promo-video-teaspoon__video {
    order: 0;
  }
}
@media (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;
  }
}

/* ==========================================================================
3. Platforms
========================================================================== */
.l-home-platforms .l-home-platforms__grid-outer {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 16px;
}
@media (max-width: 1080px) {
  .l-home-platforms .l-home-platforms__grid-outer {
    grid-template-columns: 1fr;
    grid-row-gap: 16px;
  }
}
.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 (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 (max-width: 768px) {
  .l-home-platforms .l-home-platforms__grid-inner-left {
    grid-template-columns: 1fr;
    grid-row-gap: 16px;
  }
}
.l-home-platforms .l-home-platforms__grid-inner-left .c-card-platform {
  min-height: 420px;
}
@media (max-width: 768px) {
  .l-home-platforms .l-home-platforms__grid-inner-left .c-card-platform {
    min-height: auto;
  }
}
.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 (max-width: 1080px) {
  .l-home-platforms .l-home-platforms__grid-inner-right {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
  }
}
@media (max-width: 768px) {
  .l-home-platforms .l-home-platforms__grid-inner-right {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1080px) {
  .l-home-platforms .l-home-platforms__grid-inner-right .c-card-platform a {
    padding-top: 120px;
  }
}
.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 (max-width: 768px) {
  .l-home-platforms .l-home-platforms__grid-inner-right .c-card-platform a p {
    display: block;
  }
}
@media (max-width: 768px) {
  .l-home-platforms .c-card-platform h2, .l-home-platforms .c-card-platform p {
    max-width: none;
    display: block;
  }
}

/* ==========================================================================
4. Our Community
========================================================================== */
.l-home-community {
  position: relative;
  z-index: 1;
}
.l-home-community > div {
  position: relative;
}
.l-home-community > div:before {
  content: "";
  position: absolute;
  left: -482px;
  top: -50px;
  width: 572px;
  height: 574px;
  background-image: url(/assets/photos/people-mosaic-left-f3c554523b744b526745fc02f9b939026cc816602cdd23ecb53a317724637f6f.png);
  background-size: cover;
}
@media (max-width: 768px) {
  .l-home-community > div:before {
    display: none;
  }
}
.l-home-community > div:after {
  content: "";
  position: absolute;
  right: -482px;
  top: -50px;
  width: 572px;
  height: 574px;
  background-image: url(/assets/photos/people-mosaic-right-af29365753cc684a0ecd2d5128c8cb69bbcaf0747b33c84c25047e8e89075836.png);
  background-size: cover;
}
@media (max-width: 768px) {
  .l-home-community > div:after {
    display: none;
  }
}
.l-home-community p {
  font-family: "Bitter", serif;
  font-size: 1.25rem; /* 20/16 */
  margin-top: 20px;
  letter-spacing: -0.5px;
}
@media (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;
  }
}
.l-home-community p:first-child {
  margin-top: 40px;
}

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

/* ==========================================================================
6. Why Choose
========================================================================== */
@media (max-width: 1080px) {
  .l-home-why-choose .l-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .l-home-why-choose > div > div {
    margin-top: 40px;
  }
}
@media (max-width: 768px) {
  .l-home-why-choose h3, .l-home-why-choose p {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .l-home-why-choose h3 {
    margin-top: 20px;
  }
}
.l-home-why-choose p {
  font-size: 1rem;
}
@media (max-width: 768px) {
  .l-home-why-choose p {
    font-size: 1.0625rem; /* 17/16 */
  }
}

/**
 *
 * Home (2022)
 *
 * 1. Layout Grid
 *
 * 2. Scrollable Contianers (Mobile)
 *
 * 3. Popular Searches
 *
 * 4. New Content
 *
 * 5. Recommended
 *
 * 6. My Books
 *
 **/
/* ==========================================================================
1. Layout Grid
========================================================================== */
.l-home-grid-2022 {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-column-gap: 65px;
}
@media (max-width: 992px) {
  .l-home-grid-2022 {
    display: block;
  }
}

/* ==========================================================================
2. Scrollable Containers (Mobile)
========================================================================== */
@media (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;
  }
  .l-home-scrollable-mobile::-webkit-scrollbar {
    width: 0 !important;
  }
  .l-home-scrollable-mobile {
    -webkit-overflow-scrolling: touch;
  }
  .l-home-scrollable-mobile > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 30px;
  }
}

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

/* ==========================================================================
4. New Content
========================================================================== */
@media (max-width: 600px) {
  .l-grid-new-content.l-home-scrollable-mobile {
    padding-top: 14px;
  }
}
@media (max-width: 768px) {
  .l-grid-new-content.c-skeleton-tutorials {
    display: grid;
  }
}

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

/* ==========================================================================
5. Recommended
========================================================================== */
.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 (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;
  }
  .l-home-recommended .l-grid-2-fr::-webkit-scrollbar {
    width: 0 !important;
  }
  .l-home-recommended .l-grid-2-fr {
    -webkit-overflow-scrolling: touch;
  }
  .l-home-recommended .l-grid-2-fr > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 0px;
    min-width: 320px;
  }
}
.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 (max-width: 768px) {
  .l-home-recommended .c-tutorial-item .c-tutorial-item__art img {
    max-width: 270px;
  }
}
.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(/assets/artwork/illustration-onboarding-video-8127ed9d0195d0511990d8c4286c7e69b98a68f656d11a57348a90f788a992d7.svg);
  background-size: cover;
  z-index: -1;
  transition: transform 0.25s ease-out;
}
.l-home-recommended .c-tutorial-item--onboarding-video > a {
  flex-wrap: wrap;
  padding-top: 0;
}
.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 (max-width: 600px) {
  .l-home-recommended .c-tutorial-item--book-content {
    min-width: 180px !important;
  }
}
.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;
}

/* ==========================================================================
6. My Books
========================================================================== */
.l-home-my-books .c-tutorial--book {
  display: grid;
  grid-template-columns: 180px 180px 180px;
  justify-content: space-around;
  padding: 0 20px;
}
@media (max-width: 1080px) {
  .l-home-my-books .c-tutorial--book {
    grid-template-columns: 180px 180px;
  }
}
@media (max-width: 992px) {
  .l-home-my-books .c-tutorial--book {
    grid-template-columns: 180px 180px 180px;
  }
}
@media (max-width: 768px) {
  .l-home-my-books .c-tutorial--book {
    grid-template-columns: 180px 180px;
  }
}
@media (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;
  }
}
.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 */
}

/**
*
* 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)
========================================================================== */
.l-onboarding-background {
  background-image: url(/assets/patterns/shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-1-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg);
  background-size: 100%, 1440px;
  background-position: top -72px right, top -60px right -60px;
  background-repeat: no-repeat;
}

/* ==========================================================================
1. Interest Cards (Deprecated)
========================================================================== */
.l-onboarding-interests {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
@media (max-width: 1080px) {
  .l-onboarding-interests {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 992px) {
  .l-onboarding-interests {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .l-onboarding-interests {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.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;
}

/* ==========================================================================
2. Skill Cards (Deprecated)
========================================================================== */
.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 (max-width: 768px) {
  .l-onboarding-skill .c-card-choice {
    margin-left: 30px;
    width: 300px;
    min-width: 300px;
  }
}
.l-onboarding-skill .c-card-choice img {
  margin-top: 24px;
  width: 160px;
}

.l-onboarding-skill--multiple {
  max-width: none !important;
}

/* ==========================================================================
3a. Payment (Deprecated)
========================================================================== */
.l-subscription-plans--teaspoon {
  background-image: url(/assets/artwork/illustration-subscription-header-923bfbe189a4967a8aa7d5afda8500cc54c825927e383d2434d94171e11bbafb.svg), url(/assets/patterns/shape-background-2-e1e3ba65a6ccd7893c55d105867b69ba4d51396c549a4b6a157e8ba590138edd.svg), url(/assets/patterns/shape-background-1-8d1d14b36b1a12b1f03999757d035e5bd0d6bbb71fc146cac5befc6c212e47e7.svg);
  background-size: 1500px, 100%, 1440px;
  background-position: top -120px center, top -72px right, top -60px right -60px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon > div > .l-flex-justify-center {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .l-margin-30--force {
    margin-top: 0 !important;
  }
}
.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 (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan {
    width: 100%;
    text-align: center;
    padding-bottom: 36px;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan:first-of-type {
    order: 1;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (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 (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__info {
    grid-template-areas: "intro intro" "benefits benefits" "options options";
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro {
    grid-area: intro;
  }
}
.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 (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__intro .c-plan__blurb {
    margin-bottom: 0;
  }
}
@media (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;
  }
}
.l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
  padding-bottom: 90px;
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    padding-bottom: 0;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    grid-area: benefits;
  }
}
@media (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits {
    padding-bottom: 0;
    margin-top: 24px !important;
  }
}
.l-subscription-plans--teaspoon .c-plan .c-plan__benefits li {
  font-size: 0.9375rem; /* 15/16 */
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__benefits li:first-child {
    margin-top: 0;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options {
    grid-area: options;
    margin-top: 30px;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options a {
    position: relative;
    transform: none;
    bottom: auto;
  }
}
.l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--primary {
  bottom: 36px;
}
@media (max-width: 768px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--primary {
    bottom: 0;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--secondary {
    margin-top: 20px;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .l-subscription-plans--teaspoon .c-plan .c-plan__options .o-button--secondary {
    white-space: normal;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--left, .l-subscription-plans--teaspoon .c-plan--right {
    border-radius: 0.5625rem;
  }
}
.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 (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--emphasis {
    order: 0;
    min-height: auto;
  }
}
@media (max-width: 992px) {
  .l-subscription-plans--teaspoon .c-plan--emphasis:after {
    display: none;
  }
}
.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;
}

/* ==========================================================================
3b. Payment (Black Friday) (Deprecated)
========================================================================== */
@media (max-width: 992px) {
  .l-onboarding-plans--black-friday .c-plan--neon {
    border: none;
    box-shadow: none;
  }
}
.l-onboarding-plans--black-friday .o-tooltip {
  line-height: 1;
}
.l-onboarding-plans--black-friday .o-tooltip:after {
  display: none;
}

/* ==========================================================================
X. Flourish (Deprecated)
========================================================================== */
.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);
}

/* ==========================================================================
1. Hello
========================================================================== */
.l-onboarding-hello {
  max-width: 670px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .l-onboarding-hello {
    padding: 0 30px;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }
}
.l-onboarding-hello .c-card-option {
  height: 320px;
}
@media (max-width: 768px) {
  .l-onboarding-hello .c-card-option:nth-of-type(1) {
    order: 2;
  }
}
.l-onboarding-hello .c-card-option:nth-of-type(1) img {
  padding-top: 10px;
  width: 175px;
}
@media (max-width: 768px) {
  .l-onboarding-hello .c-card-option:nth-of-type(2) {
    order: 1;
  }
}
.l-onboarding-hello .c-card-option:nth-of-type(2) img {
  width: 290px;
  margin: 0 auto;
  padding-top: 20px;
}
@media (max-width: 380px) {
  .l-onboarding-hello .c-card-option:nth-of-type(2) img {
    width: 260px;
  }
}
.l-onboarding-hello .c-card-option a {
  display: grid;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 30px;
}

/* ==========================================================================
2. Topics
========================================================================== */
.l-onboarding-topics {
  max-width: 500px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .l-onboarding-topics {
    padding: 0 30px;
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }
}
.l-onboarding-topics .c-card-option {
  height: 240px;
}
@media (max-width: 768px) {
  .l-onboarding-topics .c-card-option {
    height: 200px;
  }
}
.l-onboarding-topics .c-card-option a {
  display: grid;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 42px;
}

/* ==========================================================================
3. Questions
========================================================================== */
.l-onboarding-questions {
  max-width: 428px;
  margin: 0 auto;
  display: grid;
  grid-row-gap: 20px;
}
@media (max-width: 768px) {
  .l-onboarding-questions {
    padding: 0 30px;
    grid-row-gap: 15px;
  }
}
.l-onboarding-questions a {
  color: #333333;
  text-decoration: none;
  border: 2px solid #D6E0EF;
  border-radius: 0.5625rem;
  padding: 12px 16px;
}
@media (max-width: 768px) {
  .l-onboarding-questions a {
    font-size: 0.9375rem; /* 15/16 */
    padding: 11px 16px;
    text-align: center;
  }
}
.l-onboarding-questions a:hover {
  background: #F2F6FA;
}

/* ==========================================================================
4. Reason
========================================================================== */
.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 (max-width: 992px) {
  .l-onboarding-reason form > div {
    max-width: 428px;
    grid-template-columns: 1fr;
    grid-row-gap: 15px;
  }
}
@media (max-width: 768px) {
  .l-onboarding-reason form > div {
    padding: 0 30px;
  }
}
.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 (max-width: 768px) {
  .l-onboarding-reason div > input[type=checkbox]:checked + label:before {
    opacity: 0;
  }
}
.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 (max-width: 768px) {
  .l-onboarding-reason label {
    font-size: 0.9375rem; /* 15/16 */
    padding: 11px 16px;
    text-align: center;
  }
}
.l-onboarding-reason label:before {
  content: "";
  width: 14px;
  height: 11px;
  top: 50%;
  right: 18px;
  margin-top: -5px;
  position: absolute;
  background-image: url(/assets/svg-icons/checkmark-input-1b8bd8dd799f9ea5860fb52681f477caf55c87984a33ed8c58cefdcd097ca5d2.png);
  background-size: cover;
  opacity: 0;
}
.l-onboarding-reason label:hover {
  background: #F2F6FA;
}

/* ==========================================================================
5. Header
========================================================================== */
.l-onboarding-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 30px;
  margin-bottom: 90px;
}
@media (max-width: 768px) {
  .l-onboarding-header {
    margin-bottom: 45px;
  }
}
.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;
}

/**
 *
 * About
 *
 *
 *
 * 1. Hero
 *
 * 2. Stats
 *
 * 3. Team
 *
 *
 **/
/* ==========================================================================
1. Hero
========================================================================== */
section.l-about-hero {
  height: 450px;
  z-index: 1;
  position: relative;
  overflow: hidden;
}
section.l-about-hero:before {
  content: "";
  width: 560px;
  height: 100%;
  background-image: url(/assets/patterns/people-left-large@2x-4cc481f79d54a5f3cb15b85d10654f6001af31c846d96fb0200911cbb06feffb.png);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media (max-width: 1200px) {
  section.l-about-hero:before {
    left: -150px;
  }
}
@media (max-width: 992px) {
  section.l-about-hero:before {
    display: none;
  }
}
section.l-about-hero:after {
  content: "";
  width: 560px;
  height: 100%;
  background-image: url(/assets/patterns/people-right-large@2x-96c41691ead326cb15541bdef6a06b2c9be827f2dc1173ebfb5051220b085b0f.png);
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
@media (max-width: 1200px) {
  section.l-about-hero:after {
    right: -150px;
  }
}
@media (max-width: 992px) {
  section.l-about-hero:after {
    display: none;
  }
}
section.l-about-hero h1 {
  width: 100%;
  font-size: 3.75rem; /* 60/16 */
  text-align: center;
}
@media (max-width: 768px) {
  section.l-about-hero h1 {
    font-size: 2rem;
  }
}
section.l-about-hero h1 span {
  margin-top: 12px;
  display: block;
  font-size: 1.875rem; /* 30/16 */
  line-height: 1.35;
}
@media (max-width: 768px) {
  section.l-about-hero h1 span {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
2. Stats
========================================================================== */
section.l-about-stats {
  background: #158443;
  background-image: url(/assets/patterns/geometric-relate-pattern--green-8de5dc544490e80b5189ea4003defbc30e0426d1efc37a89346f0895265c5f91.png);
  background-size: cover;
  padding: 54px 0;
}
section.l-about-stats h2, section.l-about-stats p, section.l-about-stats li {
  color: #ffffff;
}
section.l-about-stats .l-about-stats__figures {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
@media (max-width: 768px) {
  section.l-about-stats .l-about-stats__figures {
    display: none;
  }
}
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 (max-width: 768px) {
  section.l-about-stats .l-about-stats__quotes {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  section.l-about-stats .l-about-stats__quotes .l-grid-2 {
    display: block;
  }
}
section.l-about-stats .l-about-stats__quotes h2 {
  font-size: 3rem; /* 48/16 */
}
@media (max-width: 768px) {
  section.l-about-stats .l-about-stats__quotes h2 {
    font-size: 1.5rem;
  }
}
section.l-about-stats .l-about-stats__quotes p {
  font-family: "Bitter", serif;
  font-size: 1.125rem; /* 18/16 */
}
@media (max-width: 768px) {
  section.l-about-stats .l-about-stats__quotes p {
    font-size: 0.9375rem; /* 15/16 */
    margin-top: 15px;
  }
}

/* ==========================================================================
3. Team
========================================================================== */
section.l-about-team {
  padding-top: 72px;
  padding-left: 300px;
}
@media (max-width: 992px) {
  section.l-about-team {
    padding-left: 0;
  }
}
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 (max-width: 768px) {
  section.l-about-team .l-about-team__title {
    font-size: 1.75rem;
    text-align: left;
  }
}
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;
}

/* ==========================================================================
4. Join Team
========================================================================== */
section.l-join-team {
  padding: 120px 0;
}
section.l-join-team h3 {
  font-size: 1.875rem; /* 30/16 */
}
@media (max-width: 768px) {
  section.l-join-team h3 {
    font-size: 1.5rem;
  }
}
section.l-join-team p {
  font-family: "Bitter", serif;
  font-size: 1.0625rem; /* 17/16 */
}
@media (max-width: 768px) {
  section.l-join-team p {
    font-size: 0.9375rem; /* 15/16 */
  }
}

/**
 *
 * Library
 *
 * Custom layouts for the library page
 *
 *
 * 1. Wrapper
 *
 * 2. Added Filters
 *
 *
 **/
/* ==========================================================================
1. Wrapper
========================================================================== */
.l-library-wrapper {
  max-width: 960px;
  padding: 0 30px;
}
@media (max-width: 1200px) {
  .l-library-wrapper {
    max-width: none;
    padding-right: 130px;
  }
}
@media (max-width: 992px) {
  .l-library-wrapper {
    padding-right: 30px;
  }
}

.c-library-filters--open .l-library-wrapper {
  max-width: none;
  padding-right: 410px;
  padding-left: 30px;
}
@media (max-width: 992px) {
  .c-library-filters--open .l-library-wrapper {
    padding-right: 30px;
  }
}

/* ==========================================================================
2. Added Filters
========================================================================== */
.l-library-wrapper.c-library-filters__added .o-tag {
  margin-right: 5px;
}

/**
* Article Layouts
*
* Custom classes for articles
*
* 1. Contributors
*
* 2. Community Care
*
* 3. Article profile
*
*/
/* ==========================================================================
1. Contributors
========================================================================== */
.l-contributors-article .l-block-wrapper {
  max-width: 720px;
  padding: 0;
}
@media (max-width: 1280px) {
  .l-contributors-article .l-block-wrapper {
    padding: 0 20px;
  }
}
@media (max-width: 768px) {
  .l-contributors-article .l-block-wrapper {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
.l-contributors-article .l-block-wrapper .l-grid-3 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .l-contributors-article .l-block-wrapper .l-grid-3 {
    grid-template-columns: 1fr;
  }
}
.l-contributors-article .c-content-author__description {
  font-size: 0.875rem !important; /* 14/16 */
}

/* ==========================================================================
2. Community Care
========================================================================== */
@media (max-width: 768px) {
  .l-community-care-article .l-grid-row-gap-40 {
    grid-row-gap: 30px !important;
  }
}
@media (max-width: 768px) {
  .l-community-care-article .c-tutorial-item {
    margin-top: 0 !important;
  }
}
.l-community-care-article .c-tutorial-item .c-tutorial-item__title {
  font-size: 1.875rem !important; /* 30/16 */
}
@media (max-width: 768px) {
  .l-community-care-article .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.3125rem !important; /* 21/16 */
  }
}
@media (max-width: 992px) {
  .l-community-care-article .c-tutorial--card.c-tutorial--floating-button {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 768px) {
  .l-community-care-article .c-tutorial--card.c-tutorial--floating-button {
    grid-template-columns: 1fr !important;
  }
}
.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 (max-width: 768px) {
  .l-community-care-article .l-community-care-upcoming-events ul li {
    font-size: 1.25rem;
  }
}
.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;
}

/* ==========================================================================
* 3. Article profile
========================================================================== */
.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 (max-width: 768px) {
  .l-article-profile img {
    margin-right: 18px !important;
    min-width: 90px;
    width: 90px;
    height: 90px;
  }
}

/**
 *
 * Menu Layouts
 *
 * For use on menu objects
 *
 * 1. Layouts for menus (dropdowns etc.)
 *
 *
 **/
/* ==========================================================================
1. Custom Layouts
========================================================================== */
.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;
}

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

/* ==========================================================================
1a. Button as icon (same as above without media query)
========================================================================== */
.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;
}

/* ==========================================================================
2. Remove button position on mobile
========================================================================== */
.l-bookmark-button-remove .c-tutorial-item__icon {
  display: none !important;
}
@media (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;
  }
}

/**
 *
 * Rating Layouts
 *
 * For use on rating components
 *
 * 1. Video
 *
 **/
/* ==========================================================================
1. Video (Footer)
========================================================================== */
.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;
}

/* ==========================================================================
X. Collection (Footer)
========================================================================== */
.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;
}

/* ==========================================================================
X. Article (Footer)
========================================================================== */
.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;
}

/* ==========================================================================
X. Books
========================================================================== */
.l-review-module--books {
  border-top: 1px solid #DFE7F0;
  padding-top: 24px;
  margin-top: 60px;
  margin-bottom: -30px;
}
@media (max-width: 600px) {
  .l-review-module--books {
    margin-bottom: 0;
  }
}

/**
 *
 * Grids
 *
 *
 *
 * 1. Bookshelf (5 books)
 *
 * 2. New content (Homepage)
 *
 *
 **/
/* ==========================================================================
1. Bookshelf (5 books)
========================================================================== */
.l-grid-bookshelf-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 1080px) {
  .l-grid-bookshelf-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: 890px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 880px) {
  .l-grid-bookshelf-5 {
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 550px) {
  .l-grid-bookshelf-5 {
    grid-template-columns: 1fr 1fr;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
2. New content (Homepage)
========================================================================== */
.l-grid-new-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-row-gap: 30px;
}
@media (max-width: 768px) {
  .l-grid-new-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.l-grid-new-content > div {
  display: flex;
  justify-content: center;
}

/**
 *
 * SVG
 *
 *
 *
 * 1. Custom Sizes
 *
 * 2. Colors
 *
 *
 **/
/* ==========================================================================
1. Custom sizes
========================================================================== */
.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;
}

/* ==========================================================================
2. Colors
========================================================================== */
.l-svg-color-white {
  fill: #ffffff !important;
}

.l-svg-color-grey-regent {
  fill: #959DA5 !important;
}

.l-svg-color-grey-raven {
  fill: #6E7687 !important;
}

/**
 * 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
   ========================================================================== */
.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 (max-width: 992px) {
  .c-nav-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    background: #262626;
  }
}
@media (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 (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 (max-width: 992px) {
  .c-nav-sidebar .c-nav-sidebar__nav {
    height: calc(100% - 90px);
    overflow: scroll;
    margin-top: 20px;
  }
}
.c-nav-sidebar button.c-nav-sidebar__menu-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
  display: none;
}
@media (max-width: 992px) {
  .c-nav-sidebar button.c-nav-sidebar__menu-toggle {
    display: flex !important;
  }
}
.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 (max-width: 992px) {
  .c-nav-sidebar a.c-nav-sidebar__item {
    height: 54px;
    line-height: 54px;
    font-size: 1.1875rem;
  }
}
.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 (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;
  }
}
.c-nav-sidebar a.c-nav-sidebar__link--active:hover {
  padding-left: 24px !important;
}
@media (max-width: 992px) {
  .c-nav-sidebar a.c-nav-sidebar__link--active:hover {
    padding-left: 0 !important;
  }
}
.c-nav-sidebar div.c-nav-sidebar__logo--mobile-menu {
  display: none;
  position: absolute;
  top: 0;
}
@media (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar__logo--mobile-menu {
    display: block !important;
  }
}
.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 (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar__profile {
    margin-top: 18px;
  }
}
.c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-message {
  display: block;
  color: #ffffff;
}
@media (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-message {
    font-size: 15px;
  }
}
.c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-controls {
  text-align: right;
}
@media (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar__profile .c-nav-sidebar__profile-image img {
    width: 48px;
    height: 48px;
  }
}
.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 (max-width: 992px) {
  .c-nav-sidebar div.c-nav-sidebar-advert {
    display: none;
  }
}
.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;
}

/* ==========================================================================
1a. Sidebar Article
========================================================================== */
.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 (max-width: 992px) {
  .c-nav-sidebar--article {
    width: 100%;
    height: auto;
    position: relative;
    background: #FAFAFA;
    padding-bottom: 0;
  }
}
@media (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;
  }
}
.c-nav-sidebar--article .c-nav-sidebar__nav {
  padding-top: 15px;
}
@media (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 (max-width: 992px) {
  .c-nav-sidebar--article .c-nav-sidebar__nav {
    height: calc(100% - 90px);
    overflow: scroll;
    margin-top: 20px;
    padding-left: 2px;
  }
}
.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;
}

/* ==========================================================================
1b. Sidebar Article (White)
========================================================================== */
.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;
}

/* ==========================================================================
1b. Sidebar Article Navigation
========================================================================== */
.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;
}
/* ==========================================================================
1c. Sidebar My Interests
========================================================================== */
.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 (max-width: 992px) {
  .c-nav-sidebar-my-interests {
    display: none;
    z-index: 999999;
  }
}
@media (max-width: 768px) {
  .c-nav-sidebar-my-interests {
    width: 210px !important;
  }
}
.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 (max-width: 992px) {
  .c-nav-sidebar-my-interests .o-header-logo {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-nav-sidebar-my-interests--close {
    left: 186px;
  }
}

/* ==========================================================================
1b. Sidebar Admin (Open)
========================================================================== */
.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 (min-width: 1200px) {
  .c-nav-sidebar-admin--open .c-nav-sidebar__wrapper {
    overflow: initial;
  }
}
.c-nav-sidebar-admin--open .c-nav-sidebar__wrapper .c-nav-sidebar__link--active {
  border-right: none;
}

/* ==========================================================================
1d. Sidebar Book
========================================================================== */
.l-admin--sidebar-open .c-nav-sidebar--book {
  display: block;
}
@media (max-width: 992px) {
  .l-admin--sidebar-open .c-nav-sidebar--book {
    overflow: initial;
  }
}
.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 (max-width: 992px) {
  .c-nav-sidebar--book .c-video-player__lessons {
    padding-top: 0;
  }
}
@media (max-width: 992px) {
  .c-nav-sidebar--book .c-nav-sidebar__wrapper {
    background: #FAFAFA;
    animation: none;
  }
}
.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(/assets/svg-icons/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(/assets/svg-icons/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(/assets/svg-icons/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;
}

/* ==========================================================================
   2. Toggle States for Mobile Menus
   ========================================================================== */
.s_show_mobile_menu .c-nav-sidebar__wrapper {
  display: block !important;
}
.s_show_mobile_menu .c-nav-sidebar__cover {
  display: block !important;
}

/* ==========================================================================
   3. Main Navigation
   ========================================================================== */
header#c-global-header {
  height: 72px;
  background: #333333;
  padding: 0 25px 0 15px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999999;
}
@media (max-width: 768px) {
  header#c-global-header {
    z-index: 99999;
  }
}
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 (max-width: 1144px) {
  header#c-global-header .c-global-header__logo {
    width: 50px;
  }
}
header#c-global-header .c-global-header__logo .o-header-logo__mark {
  width: 50px;
  height: 50px;
}
@media (max-width: 1144px) {
  header#c-global-header .c-global-header__logo svg.o-header-logo__text {
    display: none;
  }
}
@media (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 (max-width: 768px) {
  header#c-global-header .c-global-header__nav .u-toggle-dropdown .o-button--dark {
    display: none;
  }
}
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 (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;
  }
}
header#c-global-header .c-global-header__nav > ul {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul {
    display: block;
    padding: 0 20px;
  }
}
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 (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul > li {
    margin-left: 0;
  }
}
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 (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 */
  }
}
header#c-global-header .c-global-header__nav > ul > li > a.c-global-header__nav-link--active {
  border-bottom: 2px solid #73859F;
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav > ul > li > a.c-global-header__nav-link--active {
    border: 0;
  }
}
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 (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;
  }
}
header#c-global-header .c-global-header__nav .c-global-header__search span {
  position: relative;
  text-decoration: none;
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav .c-global-header__search span:hover:before {
    display: none;
  }
}
@media (max-width: 768px) {
  header#c-global-header .c-global-header__nav .c-global-header__search span {
    padding-left: 24px;
  }
}
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;
}
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 a.c-global-header__user-login, header#c-global-header .c-global-header__user button.c-global-header__user-login {
  line-height: 48px;
}
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 (max-width: 360px) {
  header#c-global-header .c-global-header__user .c-global-header__action {
    display: none;
  }
}
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: rgb(22.47, 141.24, 71.69);
}
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 (max-width: 992px) {
  header#c-global-header .c-global-header__user .c-global-header__user-control {
    display: none;
  }
}
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;
}

/* ==========================================================================
   4. Explore: Dropdown Menu
   ========================================================================== */
.c-dropdown-menu--expanded {
  background-color: #222222;
  width: 780px;
  left: 0;
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
}
@media (max-width: 992px) {
  .c-dropdown-menu--expanded {
    left: 0;
    margin-left: 0;
    width: 600px;
  }
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded {
    padding-top: 0;
  }
}
.c-dropdown-menu--expanded:before {
  display: none;
}
@media (max-width: 992px) {
  .c-dropdown-menu--expanded:before {
    left: 50px;
  }
}
@media (max-width: 600px) {
  .c-dropdown-menu--expanded:before {
    display: none;
  }
}
@media (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;
  }
}
.c-dropdown-menu--expanded > li {
  display: block;
  height: auto;
  padding: 0;
}
@media (max-width: 600px) {
  .c-dropdown-menu--expanded li {
    padding: 0;
  }
  .c-dropdown-menu--expanded li a {
    color: #ffffff !important;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__upper {
  padding: 30px;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper {
    padding: 12px 0;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__upper > ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 18px;
}
@media (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 (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul {
    grid-template-columns: 1fr;
    grid-row-gap: 18px;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li {
  border-right: 1px solid rgba(50, 54, 58, 0.5);
  padding: 0;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li {
    border: 0;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li:last-child {
  border-right: 0;
}
@media (max-width: 992px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__upper > ul > li:nth-of-type(3) {
    border-right: 0;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__lower {
  background-color: #1a1a1a;
  padding: 8px 30px;
}
@media (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__lower {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established {
    padding-left: 0;
    padding-right: 0;
  }
}
.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 (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:before {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established:hover {
    background: none;
  }
}
.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 (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__title {
    font-size: 1.125rem !important; /* 18/16 */
  }
}
.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 (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__subtitle {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media (max-width: 600px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established span.o-dropdown-menu__subtitle {
    color: #A7ADB4;
  }
}
.c-dropdown-menu--expanded .c-dropdown-menu__established i {
  width: 48px;
  height: 48px;
  margin-right: 22px;
}
@media (max-width: 600px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__established i {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-dropdown-menu--expanded .c-dropdown-menu__sublinks li a {
    font-size: 0.875rem !important; /* 14/16 */
  }
}
.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;
}

/* ==========================================================================
5. User: Dropdown Menu
========================================================================== */
.l-dropdown-menu-user {
  right: -22px;
  top: 42px;
}
@media (max-width: 600px) {
  .l-dropdown-menu-user {
    top: 52px;
    left: -210px;
    width: 270px;
  }
  .l-dropdown-menu-user:before {
    display: none;
  }
}
@media (max-width: 360px) {
  .l-dropdown-menu-user {
    left: auto;
    right: 10px;
  }
}
.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 (max-width: 600px) {
  .l-dropdown-menu-user .o-checkbox {
    display: none;
  }
}

.l-dropdown-menu-user--mini {
  right: -30px;
}

/* ==========================================================================
6. Pillar Navigation
========================================================================== */
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 (max-width: 768px) {
  nav#c-pillar-navigation {
    padding: 0;
  }
}
nav#c-pillar-navigation > div {
  width: 100%;
}
nav#c-pillar-navigation ul {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: scroll;
}
@media (max-width: 600px) {
  nav#c-pillar-navigation ul {
    justify-content: flex-start;
  }
}
nav#c-pillar-navigation ul li {
  padding: 0 15px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  nav#c-pillar-navigation ul li:first-child {
    padding-left: 35px;
  }
}
@media (max-width: 768px) {
  nav#c-pillar-navigation ul li:last-child {
    padding-right: 30px;
  }
}
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;
}

/* ==========================================================================
6. Footer
========================================================================== */
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(/assets/artwork/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 (max-width: 1200px) {
  footer#c-global-footer .c-global-footer__wrapper {
    margin-bottom: 30px;
  }
}
@media (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 (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "logo logo";
  }
}
@media (max-width: 600px) {
  footer#c-global-footer .c-global-footer__wrapper {
    grid-template-columns: 1fr;
    grid-template-areas: "logo";
  }
}
@media (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 (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper .c-global-footer__logo {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  footer#c-global-footer .c-global-footer__wrapper > div {
    padding-right: 0;
  }
}
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 (max-width: 1200px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 992px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__places {
    grid-template-columns: 1fr;
  }
}
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 (max-width: 992px) {
  footer#c-global-footer .c-global-footer__wrapper > div .c-global-footer__newsletter-text img {
    display: none;
  }
}
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 (max-width: 768px) {
  footer#c-global-footer .c-global-footer__copyright ul {
    display: block;
    text-align: center;
  }
}
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 (max-width: 768px) {
  footer#c-global-footer .c-global-footer__copyright ul a {
    margin-top: 6px;
  }
}

/* ==========================================================================
8. Tabs (Content)
========================================================================== */
.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 (max-width: 768px) {
  .c-tabs li.c-tabs--title {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-tabs--emphasis {
    width: calc(100% + 30px);
  }
}
.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: rgb(52.0416666667, 108.2466666667, 172.7783333333);
}
.c-tabs--emphasis li.c-tabs--active a {
  background: #158443;
  border-radius: 50px;
}

.c-tabs--dark {
  border-color: #434A53;
}

/* ==========================================================================
8b. Tabs (Navigation)
========================================================================== */
.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;
}

/* ==========================================================================
   9. Mobile Navigator
   ========================================================================== */
.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;
  }
}
.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 (max-width: 992px) {
  .c-nav-sidebar-my-interests--show {
    display: none !important;
  }
}
.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 (max-width: 992px) {
  .c-nav-sidebar-my-interests--show-mobile {
    display: block !important;
  }
}
@media (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 (max-width: 992px) {
  .c-nav-sidebar-my-interests--show-mobile {
    display: flex !important;
  }
}
.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;
}

/* ==========================================================================
   10. Book Navigation
   ========================================================================== */
.c-book-header {
  background: #ffffff !important;
  justify-content: space-between;
  position: sticky !important;
  top: 0;
}
@media (max-width: 992px) {
  .c-book-header {
    position: relative !important;
  }
}
@media (max-width: 768px) {
  .c-book-header {
    justify-content: unset;
  }
}
.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 (max-width: 768px) {
  .c-book-header .c-book-header__chapter-intro {
    display: block;
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .c-book-header .c-book-header__chapter-intro a, .c-book-header .c-book-header__chapter-intro span {
    display: block;
  }
}
.c-book-header .c-book-header__chapter-title {
  display: inline-block;
  line-height: 1.25;
  display: flex !important;
  margin-right: -110px;
}
@media (max-width: 1080px) {
  .c-book-header .c-book-header__chapter-title {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .c-book-header .c-book-header__chapter-title {
    padding-right: 30px;
  }
}
@media (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 (max-width: 600px) {
  .c-book-header .c-global-header__nav ul {
    width: 100%;
  }
}
.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 (max-width: 768px) {
  .c-book-header .c-global-header__user {
    margin-left: auto !important;
  }
}
@media (max-width: 600px) {
  .c-book-header .c-global-header__user .c-global-header__action {
    display: none;
  }
}
.c-book-header .login-link {
  color: #959DA5 !important;
}

.c-mobile-navigator--book {
  background: #FAFAFA;
}
.c-mobile-navigator--book a:hover {
  background: #DBDDE0 !important;
}

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

/**
 * Notifications
 *
 * Notify the user via a modal/popup when they earn a badge for example
 *
 * 1. Badge/Achievements Notifications
 *
 */
/* ==========================================================================
   1. Badge/Achievements Notifications
   ========================================================================== */
.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 (max-width: 992px) {
  .c-notification-badge {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: none;
  }
}
@media (max-width: 600px) {
  .c-notification-badge {
    width: 90%;
  }
}
.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 */
}

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

/* ==========================================================================
2. Paragraph and CTA
========================================================================== */
.c-form__info-cta {
  display: grid;
  grid-template-columns: 1fr auto;
}
@media (max-width: 768px) {
  .c-form__info-cta {
    display: block !important;
  }
}
.c-form__info-cta p {
  font-size: 1rem;
  color: #6E7687;
  padding-right: 20px;
}
.c-form__info-cta a {
  white-space: nowrap;
  color: #158443;
}

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

/* ==========================================================================
4. Sign In / Sign Up Form
========================================================================== */
.c-login-form .o-input {
  width: 100%;
  margin-bottom: 15px;
}
@media (max-width: 992px) {
  .c-login-form > .l-fill-col {
    display: none;
  }
}
@media (max-width: 992px) {
  .c-login-form > .l-form-col {
    width: 100%;
  }
}

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

/* ==========================================================================
5. Single input and CTA
========================================================================== */
.c-single-input-form {
  position: relative;
}
.c-single-input-form input {
  margin: 0 !important;
}
@media (max-width: 768px) {
  .c-single-input-form input {
    height: 50px;
  }
}
.c-single-input-form button, .c-single-input-form a {
  position: absolute;
  right: 7px;
  top: 10px;
  margin-top: -3px;
}
@media (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;
  }
}

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

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

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

/* ==========================================================================
 4. Box list - Checkbox style list
 ========================================================================== */
.c-box-list li {
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 600;
  position: relative;
  margin-top: 18px;
  color: #ffffff;
  cursor: pointer;
  z-index: 1;
  padding-left: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}
.c-box-list li:first-child {
  margin-top: 0;
}
.c-box-list li:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 0.4375rem; /* 7/16 */
  border: 2px solid #DBDDE0;
  z-index: -1;
}
.c-box-list li.c-box-list__item--active {
  cursor: auto;
}
.c-box-list li.c-box-list__item--active:before {
  background-image: url(/assets/svg-icons/chevron--white-5b5a863a30ba18e88b6250dd9ae968438a95342be885d585ee66ba9b73a1cfc8.png);
  background-size: cover;
}
.c-box-list li.c-box-list__item--active a:hover {
  color: #ffffff;
  cursor: auto;
}
.c-box-list li.c-box-list__item--complete {
  color: #158443;
  text-decoration: line-through;
}
.c-box-list li.c-box-list__item--complete:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  background: #158443;
  background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  background-size: cover;
  border-radius: 0.4375rem; /* 7/16 */
  border: 0;
}
.c-box-list li.c-box-list__item--complete a {
  color: #158443;
}
.c-box-list li.c-box-list__item--complete a .c-box-list__item-duration {
  color: #158443;
}
.c-box-list li.c-box-list__item--pending {
  opacity: 0.2;
}
.c-box-list li.c-box-list__item--pending .o-badge {
  display: none;
}
.c-box-list li.c-box-list__item--locked:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  background: none;
  background-image: url(/assets/svg-icons/padlock-422049d82c4fd85a56375c162d817aea257aaa413a0445d8a84b3e94cb97d0c0.png) !important;
  background-size: cover !important;
  border-radius: 0; /* 7/16 */
  border: 0;
}
.c-box-list li a {
  display: flex;
  margin-left: -30px;
  padding-left: 30px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
.c-box-list li a:hover {
  color: #158443;
}
.c-box-list li a .c-box-list__item-number {
  margin-right: 3px;
}
.c-box-list li a .c-box-list__item-duration {
  margin-left: auto;
  color: #A7ADB4;
}
.c-box-list li a .c-box-list__item-title {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.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(/assets/svg-icons/chevron--black-454278cfec6d2fd7013bd089533ed0fa999a8811f872991b37387fc67a6a5144.png);
  background-size: cover;
}
.c-box-list--black a {
  color: #333333 !important;
  text-decoration: none;
}
.c-box-list--black a:hover {
  color: #158443 !important;
}

.c-box-list--checked li {
  cursor: inherit;
}
.c-box-list--checked li:before {
  background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  background-size: cover;
  border: 2px solid #ffffff;
}

/* ==========================================================================
5. Custom layout classes
========================================================================== */
.l-list-item-wrapper:first-child {
  margin-top: 30px;
}

/* ==========================================================================
6a. Onboarding Progress (Square)
========================================================================== */
.c-onboarding-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.c-onboarding-progress li {
  min-width: 27px;
  height: 27px;
  background: #333333;
  border-radius: 0.5625rem;
  font-family: "Bitter", serif;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  position: relative;
}
.c-onboarding-progress li .c-onboarding-progress__step {
  line-height: 26px;
}
.c-onboarding-progress li.c-onboarding-progress__bar {
  background: #DFE7F0;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  margin: 0 9px;
}
.c-onboarding-progress li.c-onboarding-progress__bar.c-onboarding-progress__bar--in-progress:before {
  content: "";
  width: 50%;
  height: 100%;
  border-radius: 100px;
  background: #158443;
  position: absolute;
  left: 0;
}
.c-onboarding-progress li.c-onboarding-progress__bar.c-onboarding-progress__bar--complete {
  background: #158443;
}
.c-onboarding-progress li.c-onboarding-progress--complete {
  background: #158443;
  background-image: url(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  background-size: cover;
}
.c-onboarding-progress li.c-onboarding-progress--complete .c-onboarding-progress__step {
  display: none;
}
.c-onboarding-progress li.c-onboarding-progress--complete .o-tooltip {
  background: #158443;
}
.c-onboarding-progress li.c-onboarding-progress--complete .o-tooltip:after {
  background: #158443;
}
.c-onboarding-progress li .o-tooltip {
  visibility: visible;
  opacity: 1;
  top: -50px;
  height: 36px;
  line-height: 17px;
}
@media (max-width: 992px) {
  .c-onboarding-progress li .o-tooltip {
    display: none;
  }
}
.c-onboarding-progress li .o-tooltip:after {
  top: 20px;
}

/* ==========================================================================
6b. Onboarding Progress (Circular)
========================================================================== */
/* ==========================================================================
7. Item list with icons
========================================================================== */
.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(/assets/svg-icons/arrow-right--clear-green-40db3118f25edfdd310ed4a1c7c26857ec61928061ed7b77ef9d64b716bae0ed.png);
  background-size: cover;
}

.c-item-list-icon--checkmark li:before {
  background-image: url(/assets/svg-icons/checkmark--clear-green-e7cb550028b55997c9619c790965bfe6f3cbd9a1b6f6593a4c8e7d9cd9cbdb84.png);
  background-size: cover;
}

/* ==========================================================================
   8. Filter list
   ========================================================================== */
.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;
}

/* ==========================================================================
   9. Version history
   ========================================================================== */
.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 (max-width: 768px) {
  .c-version-history-table .c-version-history-table__row h3 {
    font-size: 1.1875rem; /* 19/16 */
  }
}
.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;
}

/* ==========================================================================
   10. Activity Checklist
   ========================================================================== */
.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;
}

/**
 * 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
 ========================================================================== */
.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 (max-width: 600px) {
  .c-admin-draper-wrapper .l-half-col {
    width: 100%;
  }
}

.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 (max-width: 600px) {
  .c-admin-draper {
    min-height: auto;
  }
}
.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 (max-width: 600px) {
  .c-admin-draper .c-admin-draper__copy .c-admin-draper__title {
    font-size: 1.3125rem;
  }
}
.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 (max-width: 600px) {
  .c-admin-draper .c-admin-draper__copy--large {
    min-height: auto;
  }
}
.c-admin-draper .c-admin-draper__copy--large .c-admin-draper__title {
  font-size: 2.25rem;
}
@media (max-width: 600px) {
  .c-admin-draper .c-admin-draper__copy--large .c-admin-draper__title {
    font-size: 1.3125rem;
  }
}
.c-admin-draper .c-admin-draper__copy--large .c-admin-draper__subtitle {
  font-size: 1rem;
  padding-right: 10%;
}
@media (max-width: 600px) {
  .c-admin-draper .c-admin-draper__copy--large .c-admin-draper__subtitle {
    font-size: 0.9375rem;
    padding-right: 0;
  }
}
.c-admin-draper .c-admin-draper__artwork {
  width: 90px;
  height: 90px;
  align-self: center;
}
@media (min-width: 993px) and (max-width: 1080px) {
  .c-admin-draper .c-admin-draper__artwork {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 768px) {
  .c-admin-draper .c-admin-draper__artwork {
    align-self: flex-start;
    width: 60px;
    height: 60px;
  }
}
.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 (max-width: 600px) {
  .c-admin-draper .c-admin-draper__artwork--large {
    width: 60px;
    height: 60px;
  }
}

.c-admin-draper--large {
  min-height: 300px;
}
@media (max-width: 600px) {
  .c-admin-draper--large {
    min-height: auto;
  }
}

/* ==========================================================================
   2. Custom layout classes
   ========================================================================== */
.l-custom-admin-draper--large {
  width: 360px !important;
  height: 304px !important;
  margin-top: -30px;
  margin-right: -30px;
  align-self: flex-start !important;
}
@media (min-width: 993px) and (max-width: 1080px) {
  .l-custom-admin-draper--large {
    width: 300px !important;
    height: 250px !important;
  }
}
@media (max-width: 600px) {
  .l-custom-admin-draper--large {
    width: 140px !important;
    height: 120px !important;
  }
}

/* ==========================================================================
   3. Banner draper - Used for drapers and pillar heros
   ========================================================================== */
.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 (max-width: 1080px) {
  .c-banner-draper {
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.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 (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__flex-wrapper {
    display: grid;
    grid-template-columns: auto auto;
  }
}
@media (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__flex-wrapper {
    grid-template-columns: 1fr;
  }
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__art {
  height: 100%;
}
@media (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__art {
    display: none;
  }
}
.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 (max-width: 1080px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy {
    margin-left: 0;
  }
}
.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 (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy h2 {
    font-size: 1.5rem; /* 24/16 */
  }
}
.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 (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 */
  }
}
.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 (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__copy p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.c-banner-draper .c-banner-draper__wrapper .c-banner-draper__action {
  margin-left: auto;
}
@media (max-width: 600px) {
  .c-banner-draper .c-banner-draper__wrapper .c-banner-draper__action {
    margin-top: 18px;
    margin-left: 0;
  }
}

.c-banner-draper--no-height {
  height: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

/* ==========================================================================
   4. Banner draper - Pillar variations (iOS, Android, Unity, Unreal)
   ========================================================================== */
/* iOS */
.c-banner-draper--ios {
  background-color: #F64E1A;
}
.c-banner-draper--ios:before {
  background-image: url(/assets/patterns/ios-pattern@2x-afa82e7a21383f962e6cc10db0d78ffebb131d0ccd9727b43e238d7322e0ad12.png);
  background-size: cover;
}
.c-banner-draper--ios .c-banner-draper__art {
  width: 222px;
  margin-left: -30px;
}
.c-banner-draper--ios .c-banner-draper__art img {
  top: 24px;
}

/* Android */
.c-banner-draper--android {
  background-image: linear-gradient(to right, #0575e6, #00a0ff, #00c3f4, #00deb5, #00f260);
}
.c-banner-draper--android:before {
  background-image: url(/assets/patterns/android-pattern@2x-0acfc99c22ba9a9593d5d397392601e47bb5a1a8d5c1090f340a5d0c299f444b.png);
  background-size: cover;
}
.c-banner-draper--android .c-banner-draper__art {
  width: 140px;
}
.c-banner-draper--android .c-banner-draper__art img {
  top: 20px;
}

/* Server Side Swift */
.c-banner-draper--server-side-swift {
  background-color: #363B44;
}
.c-banner-draper--server-side-swift:before {
  background-image: url(/assets/patterns/server-side-swift-pattern@2x-f3dba2893826ed475bdd037b3b0397a8c096e2f21aee50d77781af37a953f59f.png);
  background-size: cover;
}
.c-banner-draper--server-side-swift .c-banner-draper__art {
  width: 140px;
}
.c-banner-draper--server-side-swift .c-banner-draper__art img {
  width: 100%;
}
.c-banner-draper--server-side-swift .o-button--dark {
  background: #FD7401;
}
.c-banner-draper--server-side-swift .o-button--dark svg {
  fill: #FD7401;
}

/* Unity */
.c-banner-draper--unity {
  background-color: #194A85;
}
.c-banner-draper--unity:before {
  background-image: url(/assets/patterns/unity-pattern@2x-ea54493ebce63300483f86d19b76151ab61e9b720dd2ffa7a9692f687f5d7985.png);
  background-size: cover;
}
.c-banner-draper--unity .c-banner-draper__art {
  width: 160px;
}
.c-banner-draper--unity .c-banner-draper__art img {
  top: 20px;
}

/* Flutter */
.c-banner-draper--flutter {
  background-color: #096ABB;
}
.c-banner-draper--flutter:before {
  background-image: url(/assets/patterns/flutter-pattern@2x-9e12512906f6b2a385152d09df75b94627d2f703c2c564245c1fdfc144f4eacf.png);
  background-size: cover;
}
.c-banner-draper--flutter .c-banner-draper__art {
  width: 160px;
}
.c-banner-draper--flutter .c-banner-draper__art img {
  top: 20px;
}

/* Unreal Engine */
.c-banner-draper--unreal-engine {
  background-color: #79376C;
}
.c-banner-draper--unreal-engine:before {
  background-image: url(/assets/patterns/unreal-engine-pattern@2x-48474441fbdadf19f554060204e7e715fdf4a428bb0ab43345320402699c5be0.png);
  background-size: cover;
}
.c-banner-draper--unreal-engine .c-banner-draper__art {
  width: 172px;
}
.c-banner-draper--unreal-engine .c-banner-draper__art img {
  top: 20px;
}

/* macOS */
.c-banner-draper--macos {
  background-color: #41AEA4;
}
.c-banner-draper--macos:before {
  background-image: url(/assets/patterns/macos-pattern@2x-ef0d6844edb6e457193f139c0ccfa6fd5bf50c13a07ea14791c1befbc290d0ab.png);
  background-size: cover;
}
.c-banner-draper--macos .c-banner-draper__art {
  width: 172px;
}
.c-banner-draper--macos .c-banner-draper__art img {
  top: 20px;
}

/* archive */
.c-banner-draper--archive {
  background-color: #333333;
}
.c-banner-draper--archive:before {
  background-image: url(/assets/patterns/archive-pattern@2x-1ce809bc4aa1a52ab4319309866b6e042d0148b4bcc20f4f63344adeb7d7363b.png);
  background-size: cover;
}
.c-banner-draper--archive .c-banner-draper__art {
  width: 120px;
}
.c-banner-draper--archive .c-banner-draper__art img {
  top: 30px;
}

/* archive */
.c-banner-draper--podcast {
  background-color: #333333;
}
.c-banner-draper--podcast:before {
  background-image: url(/assets/patterns/podcast-pattern@2x-e0178d0b9c54e1e3a503e42e111d2098c5057345f09b3cdc5fb5aa162b4135de.png);
  background-size: cover;
}
.c-banner-draper--podcast .c-banner-draper__copy p {
  max-width: 720px;
}
.c-banner-draper--podcast .c-banner-draper__art {
  width: 120px;
}
.c-banner-draper--podcast .c-banner-draper__art img {
  top: 30px;
}

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

/* ==========================================================================
5. Banner draper - Campaign variations
========================================================================== */
.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 (max-width: 768px) {
  .c-banner-draper--campaign .c-banner-draper__copy p {
    padding-right: 0;
  }
}

/* Create Account */
.c-banner-draper--account {
  background-color: #333333;
}
.c-banner-draper--account:before {
  background-image: url(/assets/patterns/flare-relate-pattern--dark-teal-ae0808f8dec26eea570712492e5bbdfe208f598016b1be055ba108966a73eb5f.png);
  background-size: cover;
}
.c-banner-draper--account .c-banner-draper__art {
  width: 300px;
}
.c-banner-draper--account .c-banner-draper__art img {
  top: 20px;
  margin-top: -40px;
  margin-bottom: -60px;
}

.c-banner-draper--account-list {
  padding-bottom: 60px;
}
.c-banner-draper--account-list:before {
  background-image: url(/assets/patterns/large-geometric-relate-pattern--dark-83ce2ab52da02a0fda9a08230d73ce14f6dbd16193a6eb1e339e35429af2ffcc.png);
  background-size: cover;
}
@media (max-width: 1080px) {
  .c-banner-draper--account-list .l-block-wrapper {
    width: 100%;
  }
}
.c-banner-draper--account-list h2 {
  font-size: 1.875rem !important; /* 30/16 */
  line-height: 1.35 !important;
}
@media (max-width: 768px) {
  .c-banner-draper--account-list h2 {
    font-size: 1.5rem !important; /* 24/16 */
    line-height: 1.25 !important;
  }
}
.c-banner-draper--account-list .c-banner-draper__art {
  width: 240px;
  min-width: 240px;
  margin-left: auto;
}
@media (max-width: 1080px) {
  .c-banner-draper--account-list .c-banner-draper__art {
    display: block !important;
  }
}
@media (max-width: 768px) {
  .c-banner-draper--account-list .c-banner-draper__art {
    display: none !important;
  }
}
.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 (max-width: 768px) {
  .c-banner-draper--account-list .c-box-list li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.c-banner-draper--account-list .c-box-list li:before {
  top: 3px;
}
@media (max-width: 768px) {
  .c-banner-draper--account-list .c-box-list li:before {
    top: 1px;
  }
}

/* Newsletter */
.c-banner-draper--newsletter {
  background-color: #158443;
}
.c-banner-draper--newsletter:before {
  background-image: url(/assets/patterns/geometric-relate-pattern--dark-e78f59cb4699e24d8f72a0d8d6d16483af21c3fd818ce1b9c417a5cc8733f466.png);
  background-size: cover;
}
.c-banner-draper--newsletter .c-banner-draper__art {
  width: 200px;
}
.c-banner-draper--newsletter .c-banner-draper__art img {
  margin-bottom: -120px;
}

/* Subscription */
.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 (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__flex-wrapper {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .c-banner-draper--subscription h2 {
    white-space: normal;
  }
}
.c-banner-draper--subscription h2, .c-banner-draper--subscription p {
  color: #333333 !important;
}
@media (max-width: 1080px) {
  .c-banner-draper--subscription h2, .c-banner-draper--subscription p {
    display: block !important;
  }
}
.c-banner-draper--subscription .c-banner-draper__copy {
  margin: 0 !important;
}
@media (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__copy {
    order: 2;
    text-align: center;
    max-width: 560px;
    margin: 30px auto 0 !important;
  }
}
.c-banner-draper--subscription .c-banner-draper__art {
  width: 100%;
}
@media (max-width: 1080px) {
  .c-banner-draper--subscription .c-banner-draper__art {
    display: block !important;
    order: 1;
    max-width: 442px;
    margin: 0 auto;
  }
}
.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(/assets/patterns/illustration-pro-subscription-items-banner--left@2x-31f3916e8318791188fa174cb5fd47adc10c8e806d2da943a1b78dfd31889771.png);
  background-size: cover;
}
@media (max-width: 1080px) {
  .c-banner-draper--pro-subscription-wide:before {
    left: -200px;
  }
}
@media (max-width: 600px) {
  .c-banner-draper--pro-subscription-wide:before {
    left: -275px;
  }
}
.c-banner-draper--pro-subscription-wide:after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: 0;
  top: auto;
  width: 340px;
  height: 210px;
  background-image: url(/assets/patterns/illustration-pro-subscription-items-banner--right@2x-6bf8ea3b615a092f7f47b771138f6a592cf6271a629929cca837f667f4a7a6b2.png);
  background-size: cover;
}
@media (max-width: 1080px) {
  .c-banner-draper--pro-subscription-wide:after {
    right: -200px;
  }
}
@media (max-width: 600px) {
  .c-banner-draper--pro-subscription-wide:after {
    right: -275px;
  }
}

.c-banner-draper--team-subscription {
  background: #A5CEB5;
}
.c-banner-draper--team-subscription .c-banner-draper__art {
  display: inline-table;
  width: 420px;
}
@media (max-width: 768px) {
  .c-banner-draper--team-subscription .c-banner-draper__art {
    max-width: 300px;
    width: 100%;
  }
}

/* Learning Path Android */
.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(/assets/artwork/illustration-android-path-1-4816269d716633f79033611fb0061cbebcd3f396eeb63a3097b896ff07ed1377.svg);
  background-size: cover;
}
.c-banner-draper--path-android .c-banner-draper__wrapper:after {
  content: "";
  width: 175px;
  height: 168px;
  position: absolute;
  right: -175px;
  top: 50%;
  margin-top: -86px;
  background-image: url(/assets/artwork/illustration-android-path-2-926e39e35948a8c71e63e5488048173dd116bd1c8ba55d3f7cfbf861ff732e6a.svg);
  background-size: cover;
}

.c-banner-draper--path-ios {
  background-color: #FCAC6D;
}
.c-banner-draper--path-ios .c-banner-draper__wrapper:before {
  content: "";
  width: 167px;
  height: 175px;
  position: absolute;
  left: -167px;
  top: 50%;
  margin-top: -90px;
  background-image: url(/assets/artwork/illustration-ios-path-2-645ab9db690dfe533b48c574033de0e8219b6d3cad6257dce06b35e0df7d6e79.svg);
  background-size: cover;
}
.c-banner-draper--path-ios .c-banner-draper__wrapper:after {
  content: "";
  width: 195px;
  height: 158px;
  position: absolute;
  right: -195px;
  top: 50%;
  margin-top: -80px;
  background-image: url(/assets/artwork/illustration-ios-path-1-b38bf847db51e4c39d55d606c9068dc264153f3cb6cd806b5d0f7f111219dbc4.svg);
  background-size: cover;
}

.c-banner-draper--path-flutter {
  background-color: #C7E7F6;
}
.c-banner-draper--path-flutter .c-banner-draper__wrapper:before {
  content: "";
  width: 170px;
  height: 130px;
  position: absolute;
  left: -170px;
  top: 50%;
  margin-top: -65px;
  background-image: url(/assets/artwork/illustration-flutter-path-1-2826a5fe356022558251511fe47191025b8ca62ffe74d36760ad5e147de7a60c.svg);
  background-size: cover;
}
.c-banner-draper--path-flutter .c-banner-draper__wrapper:after {
  content: "";
  width: 222px;
  height: 134px;
  position: absolute;
  right: -222px;
  top: 50%;
  margin-top: -67px;
  background-image: url(/assets/artwork/illustration-flutter-path-2-b50f3988f24008897d0f68918cb8c4b6cd1cbdfac5f777776dfe45e3aa35781e.svg);
  background-size: cover;
}

.c-banner-draper--path-unity {
  background-color: #8CBDDA;
}
.c-banner-draper--path-unity .c-banner-draper__wrapper:before {
  content: "";
  width: 185px;
  height: 165px;
  position: absolute;
  left: -185px;
  top: 50%;
  margin-top: -75px;
  background-image: url(/assets/artwork/illustration-unity-path-1-648e7bb4411b2adeb3f71dded5c1f2cd1a0f7b88ad424e4e8b8a380db7dcc759.svg);
  background-size: cover;
}
.c-banner-draper--path-unity .c-banner-draper__wrapper:after {
  content: "";
  width: 155px;
  height: 166px;
  position: absolute;
  right: -155px;
  top: 50%;
  margin-top: -83px;
  background-image: url(/assets/artwork/illustration-unity-path-2-4688f78d49e6a90c49bb8125a20b9c2c9086b559322c44197dfe0669a13ecdb9.svg);
  background-size: cover;
}

.c-banner-draper--black-friday-2020 h2, .c-banner-draper--black-friday-2020 p {
  color: #ffffff !important;
}

/* ==========================================================================
6. Related
========================================================================== */
.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 (max-width: 1080px) {
  .c-banner-related {
    padding: 45px 50px;
  }
}
@media (max-width: 768px) {
  .c-banner-related {
    padding: 45px 0;
  }
}
.c-banner-related .c-banner-related__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 80px;
  align-items: center;
  position: relative;
}
@media (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text {
    text-align: center;
  }
}
.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 (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 (max-width: 600px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text .c-banner-related__headline {
    font-size: 1.5rem; /* 24/16 */
  }
}
.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 (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__text .c-banner-related__description {
    font-size: 1rem; /* 18/16 */
  }
}
@media (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__artwork {
    text-align: center;
    margin-top: 30px;
  }
}
.c-banner-related .c-banner-related__wrapper .c-banner-related__artwork img {
  width: 100%;
}
@media (max-width: 768px) {
  .c-banner-related .c-banner-related__wrapper .c-banner-related__artwork img {
    max-width: 320px;
  }
}

/* Related banner design */
.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 (max-width: 768px) {
  .c-banner-related--subscription .c-banner-related__text {
    order: 2;
  }
}
@media (max-width: 768px) {
  .c-banner-related--subscription .c-banner-related__artwork {
    order: 1;
    margin-top: 0 !important;
    margin-bottom: 30px;
  }
}

/* Related content banner design */
.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 (max-width: 768px) {
  .c-banner-related--content .c-banner-related__text {
    order: 2;
  }
}
@media (max-width: 768px) {
  .c-banner-related--content .c-banner-related__text .o-header-logo__mark {
    display: none;
  }
}
.c-banner-related--content .c-banner-related__artwork {
  text-align: right;
}
@media (max-width: 768px) {
  .c-banner-related--content .c-banner-related__artwork {
    order: 1;
    text-align: left !important;
    margin-top: 0 !important;
  }
}
.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 (max-width: 768px) {
  .c-banner-related--content .c-banner-related__artwork img {
    max-width: 250px !important;
  }
}

/* ==========================================================================
7. Bottom banner
========================================================================== */
.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 (max-width: 992px) {
  .c-banner-draper-sticky {
    height: auto;
  }
}
.c-banner-draper-sticky .c-banner-draper-sticky__wrapper {
  display: flex;
  align-items: center;
  padding: 0 60px;
}
@media (max-width: 992px) {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper {
    padding: 10px 60px 15px 20px;
  }
}
@media (max-width: 600px) {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper {
    display: block;
  }
}
.c-banner-draper-sticky .c-banner-draper-sticky__wrapper img {
  max-width: 90px;
  margin-right: 30px;
  position: relative;
}
@media (max-width: 992px) {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper img {
    display: none;
  }
}
.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 (max-width: 600px) {
  .c-banner-draper-sticky .c-banner-draper-sticky__wrapper p {
    margin-bottom: 15px;
  }
}
.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(/assets/patterns/flare-relate-pattern--dark-teal-ae0808f8dec26eea570712492e5bbdfe208f598016b1be055ba108966a73eb5f.png);
  background-size: cover;
}

.c-banner-draper-sticky--newsletter {
  background: #333333;
  background-image: url(/assets/patterns/geometric-relate-pattern--dark-e78f59cb4699e24d8f72a0d8d6d16483af21c3fd818ce1b9c417a5cc8733f466.png);
  background-size: cover;
}
.c-banner-draper-sticky--newsletter img {
  max-width: 120px !important;
  top: 20px;
}

.c-banner-draper-sticky--subscribe {
  background: #FDCF74;
}
.c-banner-draper-sticky--subscribe .c-banner-draper-sticky__wrapper {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 992px) {
  .c-banner-draper-sticky--subscribe .c-banner-draper-sticky__wrapper {
    padding-left: 24px;
    padding-right: 60px;
    padding-top: 15px;
  }
}
@media (max-width: 600px) {
  .c-banner-draper-sticky--subscribe .c-banner-draper-sticky__wrapper {
    padding-right: 24px;
  }
}
.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 (max-width: 992px) {
  .c-banner-draper-sticky--pro-subscribe .c-banner-draper-sticky__wrapper {
    padding-top: 15px;
  }
}
.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 (max-width: 992px) {
  .c-banner-draper-sticky--team-subscribe .c-banner-draper-sticky__wrapper {
    padding-left: 24px;
    padding-right: 60px;
  }
}
@media (max-width: 600px) {
  .c-banner-draper-sticky--team-subscribe .c-banner-draper-sticky__wrapper {
    padding-right: 24px;
  }
}
.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 (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;
  }
}
.c-banner-draper-sticky--obfuscate .c-banner-draper-sticky__wrapper {
  max-width: 1140px;
  padding: 0;
}
@media (max-width: 1200px) {
  .c-banner-draper-sticky--obfuscate .c-banner-draper-sticky__wrapper {
    padding: 0 24px;
  }
}
@media (max-width: 992px) {
  .c-banner-draper-sticky--obfuscate .c-banner-draper-sticky__wrapper {
    padding: 0;
  }
}
.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 (max-width: 992px) {
  .c-banner-draper-sticky--cta-only .c-banner-draper-sticky__wrapper {
    padding: 15px 20px 15px 20px;
  }
}

.c-banner-draper-sticky--black-friday-2020 {
  background: #222222;
}
.c-banner-draper-sticky--black-friday-2020:before {
  content: "";
  position: absolute;
  left: -120px;
  top: 0;
  width: 300px;
  height: 100%;
  background-image: url(/assets/patterns/black-friday-2020-banner-background-left-green@2x-1457eeb695c0ff616b9105dd99462e1f20b3cf8253ec452b092436f05ca10bbd.png);
  background-size: cover;
  z-index: -1;
}
@media (max-width: 1200px) {
  .c-banner-draper-sticky--black-friday-2020:before {
    left: -200px;
  }
}
@media (max-width: 992px) {
  .c-banner-draper-sticky--black-friday-2020:before {
    display: none;
  }
}
.c-banner-draper-sticky--black-friday-2020:after {
  content: "";
  position: absolute;
  right: -120px;
  top: 0;
  width: 300px;
  height: 100%;
  background-image: url(/assets/patterns/black-friday-2020-banner-background-right-green@2x-76fd0f37b155af57046dfc30ea318a0d7ba625973a933df46f229c06e5846adb.png);
  background-size: cover;
  z-index: -1;
}
@media (max-width: 1200px) {
  .c-banner-draper-sticky--black-friday-2020:after {
    right: -200px;
  }
}
@media (max-width: 1080px) {
  .c-banner-draper-sticky--black-friday-2020:after {
    right: -250px;
  }
}
@media (max-width: 992px) {
  .c-banner-draper-sticky--black-friday-2020:after {
    display: none;
  }
}
.c-banner-draper-sticky--black-friday-2020 .c-banner-draper-sticky__wrapper {
  padding-left: 0;
  padding-right: 0;
  max-width: 678px;
}
@media (max-width: 992px) {
  .c-banner-draper-sticky--black-friday-2020 .c-banner-draper-sticky__wrapper {
    padding-left: 24px;
    padding-right: 60px;
    max-width: none;
  }
}

/* ==========================================================================
8. Pricing cards
========================================================================== */
.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;
}

/* ==========================================================================
   10a. Sales Promotions (Teaspoon)
   ========================================================================== */
.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 (max-width: 768px) {
  .c-banner-draper--teaspoon-launch .c-banner-draper__artwork-left {
    bottom: -92px;
    top: auto;
  }
}
.c-banner-draper--teaspoon-launch .c-banner-draper__artwork-right {
  position: absolute;
  right: -340px;
  top: -92px;
  width: 380px;
}
@media (max-width: 768px) {
  .c-banner-draper--teaspoon-launch .c-banner-draper__artwork-right {
    bottom: -92px;
    top: auto;
  }
}

/* ==========================================================================
   10a. Sales Promotions (Black Friday 2020)
   ========================================================================== */
.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(/assets/patterns/black-friday-2020-top-banner-background-left-green@2x-ddd3afcdcf4e19be05da694a3cc6ef4309c43ebbc3e61cab7a90eb6ba63094bb.png);
  background-size: cover;
}

@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020::before {
    display: none;
  }
}
.c-banner-draper--black-friday--2020::after {
  content: "";
  position: absolute;
  width: 302px;
  height: 205px;
  position: absolute;
  right: -100px;
  top: auto;
  bottom: 0;
  background-image: url(/assets/patterns/black-friday-2020-top-banner-background-right-green@2x-5c58fe59f9cffd45842df12bad8bc7b45a80d6f5fa4fd906107ed06dd7173c51.png);
  background-size: cover;
}

@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020::after {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  .c-banner-draper--black-friday--2020 h2 {
    display: block !important;
  }
  .c-banner-draper--black-friday--2020 h2 > span {
    display: block;
  }
}
.c-banner-draper--black-friday--2020 .c-banner-draper__flex-wrapper {
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
10b. Sales Promotions (Spring Ahead 2021)
========================================================================== */
.c-banner-draper-top--spring-ahead-2021 {
  background-color: #FDEA89 !important;
  background-image: url(/assets/artwork/illustration-spring-ahead-row-0338a27e2b54ba2378c23026bfded650b896b6b3472c94d82a9f41627c5c157c.png);
  background-size: 1440px 158px;
  background-position: center bottom -80px;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-bottom: 90px;
  height: auto;
}
@media only screen and (max-width: 1080px) {
  .c-banner-draper-top--spring-ahead-2021 .c-banner-draper__flex-wrapper {
    grid-template-columns: auto !important;
  }
}
.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 (max-width: 992px) {
  .c-banner-draper-sticky--spring-ahead-2021 .c-banner-draper-sticky__wrapper {
    padding: 10px 60px 15px 20px !important;
  }
}
.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;
}

/* ==========================================================================
  11a. Community Header
  ========================================================================== */
.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 (max-width: 1440px) {
  .c-banner-draper--community > div {
    margin: 0 auto;
  }
}
@media (max-width: 992px) {
  .c-banner-draper--community > div {
    flex-direction: column;
  }
}
.c-banner-draper--community .c-banner-draper__copy {
  max-width: 720px;
  padding-right: 30px;
}
@media (max-width: 992px) {
  .c-banner-draper--community .c-banner-draper__copy {
    text-align: center;
    padding-right: 0;
  }
}
.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 (max-width: 992px) {
  .c-banner-draper--community .c-banner-draper__art {
    margin-top: 30px;
  }
}
.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 (max-width: 768px) {
  .c-banner-draper--community .c-banner-draper__art:before {
    display: none;
  }
}
.c-banner-draper--community .c-banner-draper__art img {
  width: 100%;
  border-radius: 12px;
}

/* ==========================================================================
  11b. Community Hack (Change widths of tutorial layouts)
  ========================================================================== */
.c-banner-draper--community-width + div > div {
  max-width: 1152px;
}
@media (max-width: 1440px) {
  .c-banner-draper--community-width + div > div {
    margin: 0 auto;
  }
}
.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;
}

/* ==========================================================================
  11c. Community Adverts
  ========================================================================== */
.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 (max-width: 1440px) {
  .c-banner-draper--community-intersticial > div {
    margin: 0 auto;
  }
}
.c-banner-draper--community-intersticial > div .c-banner-draper__copy {
  text-align: center;
  padding: 0 60px;
}
@media (max-width: 992px) {
  .c-banner-draper--community-intersticial > div .c-banner-draper__copy {
    padding: 0;
  }
}
.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 (max-width: 992px) {
  .c-banner-draper--community-intersticial > div .c-banner-draper__art {
    display: none;
  }
}
.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(/assets/artwork/community-connect-left-bce21b6b2108866cbbf453b81faf599c264a9b97090d3a638629260e1a19e34f.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.c-banner-draper--community-connect .c-banner-draper__art--right {
  background-image: url(/assets/artwork/community-connect-right-74345afbd0f42e2fed5a8e4f8d4ac0d8c3decf3ca3cb59f1a4c151e3a14bed26.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.c-banner-draper--community-resources .c-banner-draper__art--left {
  height: 228px !important;
  background-image: url(/assets/artwork/community-people-left-7c2e3b4d6f8ac4183f79f1a9c845e49d25b0831d8e7ad08db1923240be20e86c.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.c-banner-draper--community-resources .c-banner-draper__art--right {
  height: 221px !important;
  background-image: url(/assets/artwork/community-people-right-033285e844670c7bf19a5ae4560402289e11c53111ea950344d424598c83b019.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

/**
* 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
  ========================================================================== */
.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 (max-width: 992px) {
  .c-modal {
    padding: 20px;
  }
}
.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 (max-width: 768px) {
  .c-modal .c-modal-wrapper {
    padding-top: 24px;
  }
}
.c-modal .c-modal__copy {
  flex-grow: 1;
  padding: 15px 36px 24px;
}
@media (max-width: 768px) {
  .c-modal .c-modal__copy {
    padding: 27px 24px;
  }
}
.c-modal .c-modal__copy .c-modal__title {
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .c-modal .c-modal__copy .c-modal__title {
    font-size: 1.875rem;
  }
}
.c-modal .c-modal__copy .c-modal__subtitle {
  font-weight: 500;
  font-size: 1.3125rem;
}
@media (max-width: 600px) {
  .c-modal .c-modal__copy .c-modal__subtitle {
    font-size: 1.125rem;
  }
}
.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 (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;
  }
}
.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;
}

/* ==========================================================================
2. Account Sign Up
========================================================================== */
.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 (max-width: 600px) {
  .c-modal--sign-up .c-modal__title {
    font-size: 1.3125rem !important; /* 21/16 */
    padding: 0;
  }
}
.c-modal--sign-up .c-modal__artwork {
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .c-modal--sign-up .c-modal__artwork {
    display: none;
  }
}
.c-modal--sign-up .c-modal__artwork img {
  width: 100%;
  max-width: 140px !important;
  margin: 0 auto !important;
  border: 0 !important;
}

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

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

/* ==========================================================================
5. Video Trailer
========================================================================== */
.c-modal--trailer .c-modal-wrapper {
  background: none;
  width: auto;
}
@media (max-width: 768px) {
  .c-modal--trailer .c-modal-wrapper {
    width: 100%;
  }
}
.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 (min-width: 1080px) {
  .c-modal--trailer .c-modal-wrapper .c-modal__player {
    width: 720px;
  }
}
.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 (max-width: 768px) {
  .c-modal--trailer .c-modal__close {
    position: fixed;
    top: 15px;
    right: 15px;
  }
}
.c-modal--trailer .c-modal__close svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
}

/* ==========================================================================
6. Video Tutorial
========================================================================== */
.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 (max-width: 768px) {
  .c-modal--video-tutorial .c-modal__title {
    font-size: 1.5em !important; /* 24/16 */
  }
}
.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;
}

/**
 * Skeleton components
 *
 */
/* ==========================================================================
   1. Base
   ========================================================================== */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
/* ==========================================================================
   2. Objects
   ========================================================================== */
.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 (max-width: 600px) {
  .o-skeleton__title {
    height: 33px;
  }
}

.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 (max-width: 600px) {
  .o-skeleton__button {
    display: block;
    margin-top: 9px;
  }
}

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

/* ==========================================================================
   3. Component - Admin Sidebar
   ========================================================================== */
.c-skeleton-sidebar {
  align-self: flex-start;
  opacity: 0.8;
}
@media (max-width: 992px) {
  .c-skeleton-sidebar {
    display: none;
  }
}
.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;
}

/* ==========================================================================
  4. Component - Admin Main
  ========================================================================== */
.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 (max-width: 1140px) {
  .c-skeleton-tutorials {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .c-skeleton-tutorials > div {
    margin-top: 30px;
  }
}
@media (max-width: 992px) {
  .c-skeleton-tutorials {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .c-skeleton-tutorials {
    display: block;
  }
}

/**
 * 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
 ========================================================================== */
.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 (max-width: 768px) {
  .c-tutorial-item .o-button--mark-as-complete {
    display: none !important;
  }
}
.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 (max-width: 600px) {
  .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    word-break: break-word;
  }
}
.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;
}

/* ==========================================================================
 2. Card modifier (add to container not the tutorial)
 ========================================================================== */
@media (max-width: 992px) {
  .c-tutorial--card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .c-tutorial--card {
    grid-template-columns: 1fr 1fr;
  }
}
.c-tutorial--card .o-button--bookmark {
  display: inline-block;
  position: absolute;
  top: 177px;
  right: 0px;
}
.c-tutorial--card .c-tutorial-item {
  position: relative;
}
@media (max-width: 600px) {
  .c-tutorial--card .c-tutorial-item {
    margin-top: 45px;
  }
}
.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;
}

/* ==========================================================================
 3a. List modifier (add to container not the tutorial)
 ========================================================================== */
.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 (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item {
    margin-top: 15px !important;
  }
}
.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 (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;
  }
}
.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 (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 1fr 72px !important;
  }
}
.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 (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 (max-width: 768px) and (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__art .o-badge {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text {
    display: block;
    order: 1;
    margin: 0;
  }
}
@media (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.3125rem; /* 21/16 */
  }
}
@media (max-width: 600px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.25rem; /* 21/16 */
  }
}
@media (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .o-badge--pro {
    display: inline-flex;
    max-width: min-content;
  }
}
.c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
  display: none;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    font-size: 0.875rem; /* 14/16 */
  }
}
@media (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 */
  }
}
.c-tutorial--list .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__description {
  display: block;
  margin-bottom: 8px;
  padding-right: 80px;
}
@media (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 */
  }
}
.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 (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 (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 */
  }
}
.c-tutorial--list .c-tutorial-item .c-tutorial-item__icon {
  display: flex;
}
@media (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .c-tutorial-item__icon {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-tutorial--list .c-tutorial-item .o-badge-tutorial {
    position: absolute;
    left: 12px !important;
    top: 132px !important;
    z-index: 1;
  }
}

/* ==========================================================================
 3b. Basic list modifier (add to container not the tutorial)
 ========================================================================== */
.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 (max-width: 992px) {
  .c-tutorial--list-style-basic .c-tutorial-item .c-tutorial-item__title {
    font-size: 1.25rem;
  }
}
.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;
}

/* ==========================================================================
 3c. Complex list modifier (add to container not the tutorial)
 ========================================================================== */
.c-tutorial--list-style-complex .c-tutorial-item {
  padding-bottom: 20px;
  border-bottom: 1px solid #DBDDE0;
}
@media (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item {
    padding-bottom: 0;
    border-bottom: none;
  }
}
@media (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;
  }
}
.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 (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .o-button--bookmark {
    right: 12px;
  }
}
.c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper {
  display: grid;
  grid-template-columns: 1fr 90px;
  grid-column-gap: 30px;
}
@media (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 1fr 72px;
  }
}
.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 (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__art {
    width: 72px;
    height: 72px;
  }
}
.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 (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__upper .c-tutorial-item__text-upper {
    align-content: flex-start;
  }
}
.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 (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;
  }
}
.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 (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;
  }
}
.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 (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;
  }
}
.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 (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower {
    flex-wrap: wrap;
  }
}
.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 (max-width: 992px) {
  .c-tutorial--list-style-complex .c-tutorial-item .c-tutorial-item__lower .c-tutorial-item__description {
    order: 0;
  }
}
.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 (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;
  }
}
.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 (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;
  }
}
.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 (max-width: 992px) {
  .c-tutorial--list-style-complex-zero .c-tutorial-item__metadata {
    display: block !important;
  }
}

/* ==========================================================================
 3d. Progress list modifier (list of in progress tutorial)
 ========================================================================== */
.c-tutorial--list-progress .c-tutorial-item {
  height: 120px;
}
.c-tutorial--list-progress .c-tutorial-item a {
  padding: 0 !important;
}
@media (max-width: 768px) {
  .c-tutorial--list-progress .c-tutorial-item a {
    align-content: initial !important;
  }
}
.c-tutorial--list-progress .c-tutorial-item .c-tutorial-item__upper {
  grid-template-columns: 120px 1fr !important;
}
@media (max-width: 768px) {
  .c-tutorial--list-progress .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 120px 1fr !important;
  }
}
.c-tutorial--list-progress .c-tutorial-item__text {
  align-content: center !important;
  padding-right: 18px;
}
@media (max-width: 768px) {
  .c-tutorial--list-progress .c-tutorial-item__text {
    order: 2 !important;
    padding-left: 18px;
    min-width: 100%;
  }
}
.c-tutorial--list-progress .c-tutorial-item__art {
  width: 120px !important;
  height: 120px !important;
  border-radius: 0 !important;
  background: none !important;
  position: relative;
}
@media (max-width: 768px) {
  .c-tutorial--list-progress .c-tutorial-item__art {
    order: 1;
  }
}
.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;
}

/* ==========================================================================
 5. Featured modifier (add to container not the tutorial)
 ========================================================================== */
.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;
}

/* ==========================================================================
 6. Number modifier (add to container not the tutorial)
 ========================================================================== */
.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 (max-width: 768px) {
  .c-tutorial--list.c-tutorial--number .c-tutorial-item {
    padding-left: 56px;
  }
}
.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;
}

/* ==========================================================================
 7. Contributor modifier (role)
 ========================================================================== */
.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;
}

/* ==========================================================================
 8. Mini modifier
 ========================================================================== */
.c-tutorial--mini .c-tutorial-item {
  margin-top: 15px;
}
@media (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item {
    margin-top: 0;
  }
}
.c-tutorial--mini .c-tutorial-item a {
  padding: 13px 15px;
  grid-template-columns: 54px 1fr;
}
@media (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item a {
    padding: 0;
  }
}
.c-tutorial--mini .c-tutorial-item .o-button--bookmark {
  display: none;
}
@media (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .o-button--bookmark {
    display: block;
  }
}
.c-tutorial--mini .c-tutorial-item .c-tutorial-item__art {
  width: 54px;
  height: 54px;
}
@media (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__art {
    width: 72px;
    height: 72px;
  }
}
.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 (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text {
    margin-left: 0;
  }
}
.c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
  font-size: 1.125rem; /* 18/16 */
}
@media (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__title {
    font-size: 1.3125rem;
  }
}
.c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
  margin-top: 2px;
}
@media (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__text .c-tutorial-item__metadata {
    margin-top: 8px;
  }
}
.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 (max-width: 768px) {
  .c-tutorial--mini .c-tutorial-item .c-tutorial-item__icon {
    display: none;
  }
}

/* ==========================================================================
9. Episode
========================================================================== */
.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 (max-width: 768px) {
  .c-tutorial-episode p {
    font-size: 0.9375rem;
  }
}
.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;
}

/* ==========================================================================
10. Advert
========================================================================== */
.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 (max-width: 768px) {
  .c-tutorial-card--large .c-tutorial-item {
    background: none;
    padding: 0;
    box-shadow: none;
    margin-top: 24px;
  }
}
.c-tutorial-card--large .c-tutorial-item__art {
  display: flex;
  min-height: 240px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .c-tutorial-card--large .c-tutorial-item__art {
    background: none;
    margin-bottom: 21px;
    min-height: auto;
  }
}
.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 (max-width: 768px) {
  .c-tutorial-card--large .c-tutorial-item__title {
    font-size: 1.3125rem !important; /* 21/16 */
    line-height: 1.35;
  }
}
.c-tutorial-card--large .c-tutorial-item__icon {
  position: absolute;
  top: 20px;
  right: 20px;
}
@media (max-width: 768px) {
  .c-tutorial-card--large .c-tutorial-item__icon {
    top: 0;
    right: 0;
  }
}
.c-tutorial-card--large .o-button {
  display: flex;
  position: absolute;
  bottom: 30px;
  width: calc(100% - 60px);
}
@media (max-width: 768px) {
  .c-tutorial-card--large .o-button {
    width: 100%;
    position: relative;
    bottom: auto;
    margin-top: 18px;
  }
}
.c-tutorial-card--large .o-progress-indicator {
  margin-top: 18px;
}
.c-tutorial-card--large .o-progress-indicator .o-progress-indicator__fill {
  width: 25%;
}

/* ==========================================================================
10. Learning Path Modifiers
========================================================================== */
.c-tutorial-item__art.c-tutorial-item__art--learning-path {
  background: none !important;
  height: 100% !important;
}
@media (max-width: 768px) {
  .c-tutorial-item__art.c-tutorial-item__art--learning-path {
    height: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}
.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 (max-width: 768px) {
  .c-tutorial-item--learning-path {
    margin-top: 24px !important;
  }
}
.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 (max-width: 768px) {
  .c-tutorial-item--learning-path .c-tutorial-item__text {
    margin-left: 0 !important;
  }
}
@media (max-width: 768px) {
  .c-tutorial-item--learning-path .c-tutorial-item__art {
    margin-bottom: 21px !important;
  }
}
@media (max-width: 768px) {
  .c-tutorial-item--learning-path .c-tutorial-item__icon {
    top: 0 !important;
    right: 0 !important;
  }
}
.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 (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;
  }
}
.c-tutorial-item--learning-path .c-tutorial-item__continue:hover {
  background: rgb(22.47, 141.24, 71.69);
}
.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;
}

/* ==========================================================================
11. Dark Modifier
========================================================================== */
.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 (max-width: 768px) {
  .c-tutorial--dark .c-tutorial-item a {
    padding: 0 0 21px 0;
    border-bottom: 0;
  }
}
.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;
}

/* ==========================================================================
12. Mason Modifier
========================================================================== */
.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;
}

/* ==========================================================================
12a. Artwork size modifier for mason
========================================================================== */
.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 (max-width: 768px) {
  .c-tutorial--mason-mini .c-tutorial-item__title {
    font-size: 1.3125em !important; /* 21/16 */
  }
}
.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;
}

/* ==========================================================================
12b. Mason Large Modifier
========================================================================== */
.c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__upper {
  grid-template-columns: 90px 1fr;
}
@media (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__upper {
    grid-template-columns: 1fr 72px;
  }
}
.c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper {
  margin-left: 18px;
  order: 2;
}
@media (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper {
    margin-left: 0;
    order: 1;
  }
}
.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 (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;
  }
}
.c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper-meta {
  display: block;
}
@media (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__text-upper-meta {
    display: none;
  }
}
.c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__platform {
  display: none;
}
@media (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__platform {
    display: block;
  }
}
.c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__platform-long {
  display: block;
}
@media (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__platform-long {
    display: none;
  }
}
.c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__description {
  margin-top: 9px !important;
}
@media (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__description {
    margin-top: 15px !important;
  }
}
.c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__lower {
  display: none;
}
@media (max-width: 768px) {
  .c-tutorial--mason-large .c-tutorial-item .c-tutorial-item__lower {
    display: block;
  }
}

/* ==========================================================================
12c. Mason Art Modifier
========================================================================== */
.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;
}

/* ==========================================================================
12c. Mason Modifier Small
========================================================================== */
.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;
}

/* ==========================================================================
14. If user is signed make room for the bookmark on mason
========================================================================== */
.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;
}

/* ==========================================================================
 3. Number modifier (add to list view to fix layout)
 ========================================================================== */
@media (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 (max-width: 768px) {
  .c-tutorial--list.c-tutorial--number .c-tutorial-item__art {
    display: none;
  }
}

/* ==========================================================================
15. Mark as complete button
========================================================================== */
.c-tutorial--mark-as-complete .o-button--bookmark {
  display: none !important;
}
.c-tutorial--mark-as-complete .o-button--mark-as-complete {
  display: block;
}

/* ==========================================================================
16. White background modifier
========================================================================== */
.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;
}

/* ==========================================================================
17. Floating button
========================================================================== */
.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;
}

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

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

/* ==========================================================================
20. No Margins
========================================================================== */
.c-tutorial--no-margin .c-tutorial-item {
  margin-top: 0;
}
@media (max-width: 768px) {
  .c-tutorial--no-margin .c-tutorial-item {
    margin-top: 0 !important;
  }
}

/* ==========================================================================
21. CTA Card
========================================================================== */
.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;
}

/**
 * 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
 ========================================================================== */
.c-video-player {
  min-height: 100vh;
  position: relative;
  background: #333333;
  color: #ffffff;
  overflow: hidden;
  padding: 0px 60px 120px 140px;
}
@media (max-width: 1080px) {
  .c-video-player {
    padding: 0px 30px 0 110px;
  }
}
@media (max-width: 992px) {
  .c-video-player {
    padding: 0px 30px 0;
  }
}
@media (max-width: 768px) {
  .c-video-player {
    padding: 0;
  }
}
.c-video-player.c-video-player--cinema nav {
  top: inherit !important;
}
.c-video-player.c-video-player--nav {
  padding: 0px 60px 90px;
}
@media (max-width: 1080px) {
  .c-video-player.c-video-player--nav {
    padding: 0px 30px 0;
  }
}
@media (max-width: 768px) {
  .c-video-player.c-video-player--nav {
    padding: 0 20px 0;
  }
}
.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 (max-width: 992px) {
  .c-video-player.c-video-player--nav .o-button-sidebar--close {
    display: none;
  }
}
.c-video-player.c-video-player--nav .c-video-player__lessons {
  display: block !important;
  width: 320px;
}
@media (max-width: 992px) {
  .c-video-player.c-video-player--nav .c-video-player__lessons {
    width: 100%;
  }
}
.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 (max-width: 992px) {
  .c-video-player.c-video-player--nav .c-video-player__lessons-section--action {
    display: none;
  }
}
.c-video-player.c-video-player--nav .c-video-player__wrapper {
  margin: 0 auto 0 auto;
  padding-left: 320px;
  max-width: 1280px;
}
@media (max-width: 992px) {
  .c-video-player.c-video-player--nav .c-video-player__wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}
.c-video-player.c-video-player--nav .c-video-player__video {
  border-radius: 0.5625rem;
}
@media (max-width: 992px) {
  .c-video-player.c-video-player--nav .c-video-player__video {
    border-radius: 0;
  }
}
@media (max-width: 992px) {
  .c-video-player .c-video-player__wrapper {
    display: grid;
    width: 100%;
  }
}
.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 (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 (max-width: 768px) {
  .c-video-player .c-video-player__video {
    margin-left: -20px;
    width: calc(100% + 40px);
  }
}
@media (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;
  }
}
.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;
}

/* ==========================================================================
 2. Navigation
 ========================================================================== */
.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 (max-width: 992px) {
  .c-video-player__lessons {
    width: 100%;
    position: relative;
    order: 3;
    background: none;
    padding: 0;
  }
}
@media (max-width: 992px) {
  .c-video-player__lessons .c-video-player__lessons-section--action {
    display: none;
  }
}
.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 (max-width: 992px) {
  .c-video-player__lessons .c-video-player__lessons-section {
    display: block;
    padding: 0 0 24px 0;
  }
}
.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 (max-width: 1080px) {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list > li a:before {
    display: none;
  }
}
.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 (max-width: 1080px) {
  .c-video-player__lessons .c-video-player__lessons-section .c-video-player__lesson-list > li a:after {
    display: none;
  }
}
.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;
}

/* ==========================================================================
 3a. Complete - Autoplay
 ========================================================================== */
.c-video-player__complete {
  display: none;
}
.c-video-player__complete .c-video-player__complete-wrapper {
  text-align: center;
}
@media (max-width: 768px) {
  .c-video-player__complete h3 {
    display: none;
  }
}
@media (max-width: 768px) {
  .c-video-player__complete .o-button--dark {
    background: none;
    margin-top: 9px;
  }
}
.c-video-player__complete .c-video-player__complete-countdown {
  font-size: 0.9375rem; /* 15/16 */
  font-weight: 700;
  color: #ffffff;
}
@media (max-width: 768px) {
  .c-video-player__complete .c-video-player__complete-countdown {
    display: none;
  }
}
.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 (max-width: 600px) {
  .c-video-player__complete .c-video-player__complete-loader {
    width: 60px;
    height: 60px;
  }
}
.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 (max-width: 600px) {
  .c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-icon {
    width: 20px;
    height: 30px;
  }
}
.c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-circle {
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 600px) {
  .c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-circle {
    width: 60px;
    height: 60px;
  }
}
.c-video-player__complete .c-video-player__complete-loader .c-video-player__complete-circle.c-video-player__complete-circle--fill {
  transform: rotate(-90deg);
}

/* ==========================================================================
 3b. Complete - Up Next
 ========================================================================== */
.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 (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper {
    padding: 0 20px;
  }
}
@media (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .l-video-player-path-complete {
    display: none;
  }
}
.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 (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 (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item .o-button--bookmark {
    display: none !important;
  }
}
.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 (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a:before {
    display: none !important;
  }
}
.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 (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a:after {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a {
    text-align: center;
    border: none;
    padding: 0 !important;
  }
}
.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 (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;
  }
}
.c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__art {
  order: 1 !important;
}
@media (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__art {
    display: none;
  }
}
.c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__text {
  order: 2 !important;
}
@media (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__text {
    text-align: center;
  }
}
.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 (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__description {
    display: none;
  }
}
.c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .c-tutorial-item__in-progress {
  display: none;
}
@media (max-width: 992px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .o-button--green {
    display: none;
  }
}
@media (max-width: 768px) {
  .c-video-player__next .c-video-player__next-wrapper .c-tutorial-item a .o-button--green {
    display: inline-flex !important;
  }
}

@media (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-video-player__next-wrapper {
    padding: 0 20px;
  }
}
@media (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-video-player__next-wrapper .l-video-player-path-complete {
    display: none;
  }
}
@media (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 (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 (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 (max-width: 1280px) {
  .c-video-player--nav .c-video-player__next .c-tutorial-item a .c-tutorial-item__art {
    display: none;
  }
}

/* ==========================================================================
4. Paywall
========================================================================== */
.c-video-player__paywall {
  display: none;
}
.c-video-player__paywall .c-video-player__paywall-mobile-link {
  display: none;
}
@media (max-width: 600px) {
  .c-video-player__paywall .c-video-player__paywall-mobile-link {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
.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 (max-width: 1080px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    padding: 60px;
  }
}
@media (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .c-video-player__paywall .c-video-player__paywall-wrapper {
    padding: 15px;
  }
}
.c-video-player__paywall .c-video-player__paywall-sign-in {
  font-size: 1rem;
}
@media (max-width: 600px) {
  .c-video-player__paywall .c-video-player__paywall-sign-in {
    display: none;
  }
}
.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 (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-copy {
    padding-right: 0;
  }
}
@media (max-width: 992px) {
  .c-video-player__paywall .c-video-player__paywall-artwork {
    display: none;
  }
}
.c-video-player__paywall .c-video-player__paywall-artwork img {
  width: 320px;
}
@media (max-width: 600px) {
  .c-video-player__paywall .c-video-player__paywall-options {
    margin-top: 0;
  }
}
@media (max-width: 992px) {
  .c-video-player__paywall h3 {
    text-align: center !important;
    line-height: 1.25;
  }
}
@media (max-width: 768px) {
  .c-video-player__paywall h3 {
    font-size: 1.5rem !important; /* 24/16 */
  }
}
@media (max-width: 400px) {
  .c-video-player__paywall h3 {
    font-size: 1.1875rem !important; /* 19/16 */
  }
}
@media (max-width: 600px) {
  .c-video-player__paywall .c-price-card {
    padding: 10px 0 !important;
  }
}
@media (max-width: 600px) {
  .c-video-player__paywall .c-price-card h4 {
    font-size: 1rem;
  }
}
@media (max-width: 600px) {
  .c-video-player__paywall .c-price-card .o-badge {
    display: none;
  }
}
@media (max-width: 600px) {
  .c-video-player__paywall .c-price-card__price span {
    font-size: 1rem !important;
  }
}
.c-video-player__paywall {
  /* Below 1080px change the layout dramatically */
}
@media (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;
  }
}

/* Need a different layout when the sidebar is open */
.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 (max-width: 1200px) {
  .c-video-player--nav .c-video-player__paywall-copy .l-font-17 {
    display: none;
  }
}
.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;
}

/* ==========================================================================
5. Black Friday Paywall
========================================================================== */
.c-video-player__paywall--black-friday .c-video-player__paywall-artwork img {
  width: 420px;
}
@media (max-width: 1140px) {
  .c-video-player__paywall--black-friday .c-video-player__paywall-artwork img {
    width: 320px;
  }
}

/* Layout adjustments for tablet devices */
@media (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;
  }
}
/* Layout adjustments for open lesson navigation */
.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;
}

/* ==========================================================================
6. Spring Free Weekend
========================================================================== */
.c-video-player__paywall--black-friday-2019 {
  background: #333333;
}
@media (max-width: 1080px) {
  .c-video-player__paywall--black-friday-2019 .c-video-player__paywall-wrapper .c-plan--neon {
    box-shadow: none;
    border: none;
  }
}
@media (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;
  }
}

.c-video-player--nav .c-video-player__paywall--black-friday .c-plan--neon {
  border: none;
  box-shadow: none;
}

/* ==========================================================================
5. Spring Free Weekend
========================================================================== */
.c-video-player__paywall--black-friday--mod-spring {
  background-image: url(/assets/patterns/spring-fling-video-background@2x-3988623820d39ac467cd1d396f2edff3b7122cb4d00ef89fe45b4a3242213f8a.png) !important;
  background-color: #ffd7d6 !important;
  background-size: 100% !important;
  background: no-repeat;
}
.c-video-player__paywall--black-friday--mod-spring .c-video-player__paywall-wrapper h3, .c-video-player__paywall--black-friday--mod-spring .c-video-player__paywall-sign-in {
  color: #333333 !important;
}
.c-video-player__paywall--black-friday--mod-spring .c-price-card__price-main {
  font-size: 6.5rem !important;
  letter-spacing: -7px !important;
}
@media (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 (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 (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 (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 (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 (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;
  }
}

.c-video-player__paywall--free-weekend {
  background: #FDC774;
  background-image: url(/assets/patterns/free-weekend-video-background@2x-971948267a0d8bf3fb8fed1c09d4b218dcc2f9adb644d415910b57f97f0b5031.png);
  background-size: cover;
  display: block;
  text-align: center;
  align-items: center;
}
.c-video-player__paywall--free-weekend h3, .c-video-player__paywall--free-weekend p {
  color: #333333 !important;
}
@media (max-width: 992px) {
  .c-video-player__paywall--free-weekend h3 {
    font-size: 2rem;
  }
}
.c-video-player__paywall--free-weekend h3 span {
  display: block;
  font-size: 2.1rem; /* 40/16 */
  margin-top: -6px;
}
@media (max-width: 992px) {
  .c-video-player__paywall--free-weekend h3 span {
    font-size: 1.75rem;
  }
}
@media (max-width: 768px) {
  .c-video-player__paywall--free-weekend h3 span {
    display: none;
  }
}
.c-video-player__paywall--free-weekend h3 + p {
  font-family: "Bitter", serif;
  font-size: 1.1875rem; /* 19/16 */
  padding: 0 60px;
}
@media (max-width: 992px) {
  .c-video-player__paywall--free-weekend h3 + p {
    font-size: 1.0625rem;
  }
}
@media (max-width: 600px) {
  .c-video-player__paywall--free-weekend h3 + p {
    padding: 0 20px;
    font-size: 0.875rem;
  }
}
@media (max-width: 600px) {
  .c-video-player__paywall--free-weekend .l-margin-21 {
    margin-top: 0;
  }
}
@media (max-width: 600px) {
  .c-video-player__paywall--free-weekend .l-margin-30 {
    margin-top: 15px;
  }
}

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

/* ==========================================================================
5b. Spring Ahead 2021
========================================================================== */
.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;
}

/* ==========================================================================
6. Video Information
========================================================================== */
.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 (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 */
  }
}
.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;
}

/* ==========================================================================
7. Promo Video
========================================================================== */
.c-subscription-promo-video .c-subscription-promo-video__wrapper {
  position: relative;
  border-radius: 1.25rem; /* 20/16 */
}
.c-subscription-promo-video .c-subscription-promo-video__wrapper img {
  border-radius: 1.25rem;
}
.c-subscription-promo-video .c-subscription-promo-video__placeholder {
  opacity: 0;
  border-radius: 1.25rem;
}
.c-subscription-promo-video .c-subscription-promo-video__fake {
  background: url(/assets/photos/promo-video-bg-96ecc3946d56abea1a36858b57e39ffc4dda22c0bc8782be1102ed89ec1dd572.jpg);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  cursor: pointer;
  border-radius: 1.25rem;
  padding-top: 56.25%;
  box-shadow: 4px 4px 30px 0 rgba(51, 51, 51, 0.25);
}
.c-subscription-promo-video .c-subscription-promo-video__fake:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(35, 41, 43, 0);
  z-index: -1;
  transition: all 0.05s linear;
}
.c-subscription-promo-video .c-subscription-promo-video__fake .o-button-video {
  position: absolute;
}

/* ==========================================================================
8. Preview
========================================================================== */
.c-video-player__preview {
  background: #1A1A1A;
  padding: 30px;
}
@media (max-width: 768px) {
  .c-video-player__preview {
    padding: 18px;
  }
}
.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 (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 300px;
    max-height: 300px;
    margin: -150px 0 0 -150px;
  }
}
@media (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-artwork {
    max-width: 200px;
    max-height: 200px;
    margin: -100px 0 0 -100px;
  }
}
.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 (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-title {
    font-size: 0.9375rem; /* 15/16 */
    top: 18px;
    left: 18px;
  }
}
@media (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-title {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-part {
    font-size: 0.625rem; /* 10/16 */
    top: 40px;
    left: 18px;
  }
}
@media (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-part {
    position: absolute;
    top: 18px;
  }
}
.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 (max-width: 992px) {
  .c-video-player__preview .c-video-player__preview-episode {
    font-size: 2.625rem; /* 42/16 */
  }
}
@media (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 (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-episode {
    top: 34px;
  }
}
.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 (max-width: 768px) {
  .c-video-player__preview .c-video-player__preview-domains {
    font-size: 0.625rem; /* 10/16 */
    bottom: 18px;
    left: 18px;
  }
}
@media (max-width: 480px) {
  .c-video-player__preview .c-video-player__preview-domains {
    display: none;
  }
}

@media (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 (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 (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 (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 (max-width: 1200px) {
  .c-video-player--nav .c-video-player__preview .c-video-player__preview-episode {
    font-size: 2.625rem; /* 42/16 */
  }
}
@media (max-width: 768px) {
  .c-video-player--nav .c-video-player__preview .c-video-player__preview-episode {
    font-size: 0.9375rem; /* 15/16 */
  }
}

/* ==========================================================================
9. Cinema Mode
========================================================================== */
.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 (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%;
  }
}
.c-video-player--cinema .c-video-player__video {
  margin: 0 0 24px 0;
  border-radius: 0 !important;
}
@media (max-width: 992px) {
  .c-video-player--cinema .c-video-player__video {
    width: 100%;
    margin-bottom: 0;
  }
}
@media (max-width: 768px) {
  .c-video-player--cinema .c-video-player__video {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .c-video-player--cinema .c-video-player__video {
    width: 100%;
  }
}
.c-video-player--cinema .c-video-player__video-container {
  height: 56.25vw;
  max-height: calc(100vh - 169px);
  min-height: 480px;
}
@media (max-width: 992px) {
  .c-video-player--cinema .c-video-player__video-container {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
  }
}
.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 (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;
  }
}
.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 (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%;
  }
}
.c-video-player--cinema .c-video-player__lessons {
  margin-top: -70px;
  min-height: 350px;
}
@media (max-width: 992px) {
  .c-video-player--cinema .c-video-player__lessons {
    margin-top: 0;
  }
}
.c-video-player--cinema.c-video-player--nav .c-video-player__wrapper {
  padding-left: 350px;
  position: relative;
}
@media (max-width: 992px) {
  .c-video-player--cinema.c-video-player--nav .c-video-player__wrapper {
    padding: 0 30px;
  }
}
@media (max-width: 768px) {
  .c-video-player--cinema.c-video-player--nav .c-video-player__wrapper {
    padding: 0 20px;
  }
}
.c-video-player--cinema .c-video-player__wrapper {
  padding: 24px 30px 0 100px;
}
@media (max-width: 992px) {
  .c-video-player--cinema .c-video-player__wrapper {
    padding: 0 30px;
    margin-top: 0 !important;
  }
}
@media (max-width: 768px) {
  .c-video-player--cinema .c-video-player__wrapper {
    padding: 0 20px;
  }
}
.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;
}

/* ==========================================================================
10. Controls (Subheader)
========================================================================== */
.c-video-player__sub-controls {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
}
@media (max-width: 992px) {
  .c-video-player__sub-controls {
    order: 5;
    margin-bottom: 36px;
  }
}
.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 (max-width: 992px) {
  .c-video-player__sub-controls h1 {
    display: none;
  }
}
.c-video-player__sub-controls .l-bookmark-button-mobile .o-button--bookmark {
  padding-top: 20px;
}
@media (max-width: 600px) {
  .c-video-player__sub-controls .l-bookmark-button-mobile .o-button--bookmark {
    padding-top: 0;
  }
}
.c-video-player__sub-controls .o-button--dark, .c-video-player__sub-controls .o-button--green {
  margin: 0 !important;
}
@media (max-width: 992px) {
  .c-video-player__sub-controls .l-button-cinema-mode {
    display: none;
  }
}

/* ==========================================================================
11a. Metadata
========================================================================== */
@media (max-width: 992px) {
  .c-video-player .c-video-player__tabs {
    order: 4;
    margin-bottom: 24px;
    overflow: hidden;
    overflow-x: scroll;
  }
}
.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 (max-width: 992px) {
  .c-video-player .c-video-player__information p {
    font-size: 0.9375rem; /* 15/16 */
  }
}

.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 (max-width: 992px) {
  .c-video-player__notes p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.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 (max-width: 992px) {
  .c-video-player__notes li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.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 (max-width: 768px) {
  .c-video-player__notes code {
    font-size: 0.8125rem; /* 13/16 */
  }
}
.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 (max-width: 768px) {
  .c-video-player__notes pre {
    font-size: 0.75rem; /* 12/16 */
  }
}

/* ==========================================================================
11a. Transcripts
========================================================================== */
.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;
}
.c-video-player__notes--light pre code {
  color: #333333;
}
.c-video-player__notes--light pre {
  /* Comment */
}
.c-video-player__notes--light pre .hljs-comment,
.c-video-player__notes--light pre .hljs-quote {
  color: #bbbbbb;
}
.c-video-player__notes--light pre {
  /* Red */
}
.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 {
  /* Orange */
}
.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 {
  /* Yellow */
}
.c-video-player__notes--light pre .hljs-attribute {
  color: #e29803;
}
.c-video-player__notes--light pre {
  /* Green */
}
.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 {
  /* Blue */
}
.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 {
  /* Purple */
}
.c-video-player__notes--light pre .hljs-keyword,
.c-video-player__notes--light pre .hljs-selector-tag {
  color: #703da9;
}
.c-video-player__notes--light .o-button-code {
  background-image: url(/assets/svg-icons/dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
  background-size: cover;
}
.c-video-player__notes--light .o-button-code:hover {
  background: #647388;
  background-image: url(/assets/svg-icons/dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
  background-size: cover;
}

/* ==========================================================================
11b. Authors
========================================================================== */
.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 (max-width: 768px) {
  .c-video-player .c-authors .l-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
11c. Comments
========================================================================== */
.c-video-player .c-forum-comments {
  background: #333333;
}

/**
 * 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
 ========================================================================== */
article.c-written-tutorial {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (max-width: 600px) {
  article.c-written-tutorial {
    padding-top: 0;
    margin-top: 0;
    overflow: hidden;
  }
}
article.c-written-tutorial header {
  display: grid;
  grid-template-columns: 1fr 210px;
  grid-column-gap: 25px;
}
@media (max-width: 1280px) {
  article.c-written-tutorial header {
    grid-column-gap: 30px;
  }
}
@media (max-width: 1080px) {
  article.c-written-tutorial header {
    grid-template-columns: 1fr 250px;
  }
}
@media (max-width: 768px) {
  article.c-written-tutorial header {
    grid-template-columns: 1fr 200px;
  }
}
@media (max-width: 600px) {
  article.c-written-tutorial header {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    animation: none;
  }
}
article.c-written-tutorial header h1 {
  line-height: 1;
  color: #333333;
  word-break: break-word;
  font-size: 2.625rem; /* 42/16 */
}
@media (max-width: 768px) {
  article.c-written-tutorial header h1 {
    font-size: 2.25rem; /* 36/16 */
  }
}
@media (max-width: 600px) {
  article.c-written-tutorial header h1 {
    font-size: 1.875rem; /* 36/16 */
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial header .c-written-tutorial__breadcrumbs a {
    font-size: 0.9375rem; /* 15/16 */
  }
}
@media (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;
  }
}
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 (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;
  }
}
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 (max-width: 1080px) {
  article.c-written-tutorial header .c-written-tutorial__artwork img {
    width: 250px;
    height: 250px;
  }
}
@media (max-width: 768px) {
  article.c-written-tutorial header .c-written-tutorial__artwork img {
    width: 200px;
    height: 200px;
  }
}
@media (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;
  }
}
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 (max-width: 992px) {
  article.c-written-tutorial .c-written-tutorial__content {
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content {
    padding: 0;
    margin-top: 24px;
  }
}
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 (max-width: 600px) {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer {
    display: block;
  }
}
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 (max-width: 600px) {
  article.c-written-tutorial .c-written-tutorial__content .c-written-tutorial__content-footer .c-written-tutorial__content-share {
    margin-top: 30px;
  }
}
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 (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;
  }
}
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 (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 */
  }
}
article.c-written-tutorial .c-written-tutorial__content h3 {
  font-size: 1.3125rem; /* 21/16 */
  margin-top: 24px;
}
@media (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h3 {
    font-size: 1.3125rem; /* 21/16 */
  }
}
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 (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;
  }
}
article.c-written-tutorial .c-written-tutorial__content h1 + span + p {
  margin-top: 10px;
}
@media (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h1 + span + p {
    margin-top: 10px !important;
  }
}
article.c-written-tutorial .c-written-tutorial__content h2 + span + p {
  margin-top: 10px;
}
@media (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h2 + span + p {
    margin-top: 10px !important;
  }
}
article.c-written-tutorial .c-written-tutorial__content h3 + span + p {
  margin-top: 10px;
}
@media (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h3 + span + p {
    margin-top: 10px !important;
  }
}
article.c-written-tutorial .c-written-tutorial__content h4 + span + p {
  margin-top: 10px;
}
@media (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h4 + span + p {
    margin-top: 10px !important;
  }
}
article.c-written-tutorial .c-written-tutorial__content h4 + span + p {
  margin-top: 10px !important;
}
@media (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content h4 + span + p {
    margin-top: 10px !important;
  }
}
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 (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;
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content div.note {
    font-size: 0.9375rem; /* 15/16 */
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content div.note p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
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 (max-width: 992px) {
  article.c-written-tutorial .c-written-tutorial__content pre {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content pre {
    font-size: 0.75rem; /* 12/16 */
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content code {
    font-size: 0.8125rem; /* 13/16 */
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content .o-button--files {
    display: none;
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer {
    font-size: 0.9375rem; /* 15/16 */
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial .c-written-tutorial__content .c-spoiler .c-spoiler__answer p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
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;
}

/* ==========================================================================
 1b. Written Tutorial (Event)
 ========================================================================== */
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 (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header .c-written-tutorial__introduction {
    background: none;
    margin-left: 0;
    padding: 0;
  }
}
article.c-written-tutorial.c-written-tutorial--event header h1 {
  font-size: 3rem;
}
@media (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header h1 {
    font-size: 2.5rem;
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event header p {
    font-size: 15px;
  }
}
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 (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 */
  }
}
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 (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 */
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content > h2 {
  font-size: 2.25rem;
  line-height: 1.125;
}
@media (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content > h2 {
    font-size: 1.5rem;
  }
}
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 (max-width: 768px) {
  article.c-written-tutorial.c-written-tutorial--event .c-written-tutorial__content img.bordered {
    border-width: 6px;
  }
}

/* ==========================================================================
 2. Code block modifier to light
 ========================================================================== */
.l-written-tutorial--light pre {
  border: 1px solid #D6E0EF !important;
  background: #F2F6FA !important;
  color: #333333 !important;
}
.l-written-tutorial--light pre .hljs {
  color: #333333 !important;
}
.l-written-tutorial--light div.note pre .hljs {
  color: #333333 !important;
}
.l-written-tutorial--light .o-button-code {
  background-image: url(/assets/svg-icons/dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
  background-size: cover;
}
.l-written-tutorial--light .o-button-code:hover {
  background: #647388;
  background-image: url(/assets/svg-icons/dark-359a27a4dca640e91c3d0d4c9b9457249d797e2ca85026f6d84a81d5e8657756.png);
  background-size: cover;
}

/* ==========================================================================
 3. Admin Edit Banner
 ========================================================================== */
.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: 9999;
}
@media (max-width: 768px) {
  .c-admin-edit-banner {
    justify-content: center;
  }
}
.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 (max-width: 992px) {
  .c-admin-edit-banner .c-admin-edit-banner__links {
    display: none;
  }
}
@media (max-width: 768px) {
  .c-admin-edit-banner .c-admin-edit-banner__profile {
    display: none;
  }
}
.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(/assets/svg-icons/warning-d5e52e154c388e379e8676cde7ce41fa41669469ccafa9c3018f95f207f54603.png);
  background-size: cover;
  position: absolute;
  left: 0;
  top: 9px;
}
@media (max-width: 768px) {
  .c-admin-edit-banner .o-text-button--warning li {
    max-width: 200px;
  }
}
.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 (max-width: 992px) {
  .c-admin-edit-banner .o-text-button--warning .o-tooltip {
    left: auto !important;
    right: 0;
    transform: none;
  }
}
@media (max-width: 768px) {
  .c-admin-edit-banner .o-text-button--warning .o-tooltip {
    left: 50% !important;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
 4. Sticky Options Banner
 ========================================================================== */
.c-sticky-options-banner {
  position: fixed;
  top: 10px;
  right: 30px;
  z-index: 99999;
  width: 27px;
}
@media (max-width: 1200px) {
  .c-sticky-options-banner {
    display: none;
  }
}
.c-sticky-options-banner button {
  width: 27px;
  padding: 0;
  margin-top: 15px;
}
.c-sticky-options-banner button i {
  width: 27px;
}

/* ==========================================================================
 5. Book Chapter
 ========================================================================== */
.c-book-chapter header {
  display: block !important;
  animation: none !important;
}
.c-book-chapter header h1 {
  margin-top: 20px;
}
@media (max-width: 600px) {
  .c-book-chapter header .c-written-tutorial__introduction {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 768px) {
  .c-book-chapter header .c-written-tutorial__introduction .l-font-17 {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .c-book-chapter header .c-written-tutorial__introduction .l-font-42 {
    font-size: 2rem;
  }
}
.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 (max-width: 768px) {
  .c-book-chapter blockquote {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.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 (max-width: 768px) {
  .c-book-chapter blockquote p {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.c-book-chapter blockquote p:first-child {
  margin-top: 0;
}
@media (max-width: 768px) {
  .c-book-chapter blockquote p:first-child {
    margin-top: 0 !important;
  }
}
.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 (max-width: 768px) {
  .c-book-chapter figure figcaption {
    font-size: 0.8125em; /* 13/16 */
  }
}
@media (max-width: 600px) {
  .c-book-chapter figure figcaption {
    text-align: left;
  }
}
.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;
}

/* ==========================================================================
 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 h2 {
  margin-bottom: 24px;
}
.c-book-chapter__team {
  padding-top: 24px;
}
@media (max-width: 768px) {
  .c-book-chapter__team {
    padding-top: 15px;
  }
}
.c-book-chapter__team > div {
  display: flex;
  margin-bottom: 45px;
}
@media (max-width: 768px) {
  .c-book-chapter__team > div {
    margin-bottom: 24px;
  }
}
.c-book-chapter__team figure {
  width: 180px;
  min-width: 180px;
  margin-right: 24px;
}
@media (max-width: 768px) {
  .c-book-chapter__team figure {
    width: 60px;
    min-width: 60px;
    margin-right: 15px;
  }
}
.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 (max-width: 768px) {
  .c-book-chapter__team p strong:first-child {
    font-size: 1.1875rem; /* 19/16 */
  }
}

/**
 * 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
 ========================================================================== */
.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 (max-width: 992px) {
  .c-global-search .c-global-search__recommendations {
    padding: 0 30px;
  }
}
.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 (max-width: 768px) {
  .c-global-search .c-global-search__input {
    height: 120px;
  }
}
.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 (max-width: 768px) {
  .c-global-search .c-global-search__input .c-global-search__icon {
    margin-top: -15px;
  }
}
.c-global-search .c-global-search__input .c-global-search__icon svg {
  width: 48px;
  height: 48px;
  fill: #959DA5;
}
@media (max-width: 768px) {
  .c-global-search .c-global-search__input .c-global-search__icon svg {
    width: 30px;
    height: 30px;
  }
}
.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 (max-width: 768px) {
  .c-global-search .c-global-search__input input {
    font-size: 1.5rem;
    padding-left: 48px;
  }
}
@media (max-width: 768px) {
  .c-global-search .c-global-search__input input {
    font-size: 1.25rem;
  }
}
.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;
}

/* ==========================================================================
 2. Search box overlay
 ========================================================================== */
.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 (max-width: 600px) {
  .c-global-search--overlay {
    padding-top: 0;
  }
}

/* ==========================================================================
 3. Library - Platform filter
 ========================================================================== */
.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 (max-width: 992px) {
  .c-filter-platform {
    height: 80px;
    line-height: 80px;
    display: flex;
    min-width: auto;
    white-space: nowrap;
  }
}
.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 (max-width: 992px) {
  .c-filter-platform li {
    border-right: 0;
    font-size: 1.0625rem; /* 17/16 */
  }
}
@media (max-width: 992px) {
  .c-filter-platform li:first-child {
    margin-left: 15px;
  }
}
.c-filter-platform li:last-child {
  border-right: none;
}
.c-filter-platform li:hover {
  background: #3B4048;
}
@media (max-width: 992px) {
  .c-filter-platform li:hover {
    background: none;
  }
}
@media (max-width: 992px) {
  .c-filter-platform li span {
    padding: 10px 20px;
    border-radius: 100px;
  }
}
.c-filter-platform li.c-filter-platform__option--active {
  background: #3B4048;
  position: relative;
}
@media (max-width: 992px) {
  .c-filter-platform li.c-filter-platform__option--active {
    background: none;
  }
}
.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 (max-width: 992px) {
  .c-filter-platform li.c-filter-platform__option--active:before {
    display: none;
  }
}
@media (max-width: 992px) {
  .c-filter-platform li.c-filter-platform__option--active span {
    background: #3B4048;
  }
}

/* ==========================================================================
 4. Library - Filters
 ========================================================================== */
.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 (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;
  }
}
.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 (max-width: 992px) {
  .c-library-filters .o-button-tooltip--subscription {
    display: none;
  }
}
.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 (min-width: 992px) {
  .c-library-filters .c-video-player__lessons-section {
    display: none;
  }
}
@media (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section {
    padding: 0 24px 20px;
  }
}
@media (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section--options {
    display: none;
  }
}
@media (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section-search {
    display: block;
  }
}
.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 (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;
  }
}
.c-library-filters .c-video-player__lessons-section--action button .o-button__icon--left {
  margin-right: 6px;
}
@media (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section--action .o-text-button--desktop {
    display: none !important;
  }
}
.c-library-filters .c-video-player__lessons-section--action .o-text-button--mobile {
  display: none;
}
@media (max-width: 992px) {
  .c-library-filters .c-video-player__lessons-section--action .o-text-button--mobile {
    display: flex !important;
  }
}
.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 (max-width: 992px) {
  .c-library-filters .c-library-filters__checkbox-list li {
    width: 25%;
  }
}
@media (max-width: 768px) {
  .c-library-filters .c-library-filters__checkbox-list li {
    width: 33%;
  }
}
@media (max-width: 600px) {
  .c-library-filters .c-library-filters__checkbox-list li {
    width: 100%;
  }
}
.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 (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;
  }
}
.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;
}
.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 {
  background: #3B4048;
  border: 2px solid #73859F;
  color: #ffffff;
  margin-bottom: 0;
}
.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 (max-width: 992px) {
  .c-library-filters .dropdown-menu {
    position: relative;
    width: 100%;
    background: none;
    border-radius: none;
    box-shadow: none;
    margin-left: -10px;
  }
}
.c-library-filters .dropdown-menu li {
  position: relative;
  padding-left: 30px;
}
.c-library-filters .dropdown-menu li:hover {
  background: #F2F6FA;
}
@media (max-width: 992px) {
  .c-library-filters .dropdown-menu li:hover {
    background: none;
  }
}
.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 (max-width: 992px) {
  .c-library-filters .dropdown-menu li a:before {
    background: none;
    border: 2px solid rgba(115, 133, 159, 0.5);
  }
}
.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(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
  background-size: cover;
  border: none;
}

/* ==========================================================================
5. Library - Filters Open
========================================================================== */
.c-library-filters--open .c-library-filters {
  width: 380px;
  overflow-y: auto;
}
@media (max-width: 992px) {
  .c-library-filters--open .c-library-filters {
    position: fixed;
    padding-top: 72px;
    padding-bottom: 54px;
    width: 100%;
    height: 100%;
  }
}
.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 (max-width: 992px) {
  .c-library-filters--open .c-video-player__lessons-section--options {
    display: none;
  }
}

@media (max-width: 992px) {
  .c-library-filters--mobile-open .c-library-filters__key-controls {
    display: flex;
    width: 360px;
  }
}
@media (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 (max-width: 992px) {
  .c-library-filters--mobile-open .c-library-filters .c-video-player__lessons-section--options {
    display: block;
  }
}
@media (max-width: 992px) {
  .c-library-filters--mobile-open .c-library-filters .o-button-apply {
    display: inline-block !important;
  }
}
.c-library-filters--mobile-open .c-library-filters .o-button-apply svg {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  left: -2px;
}

/* ==========================================================================
5. Library - Controls
========================================================================== */
.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;
}

/* ==========================================================================
6. Loading Results
========================================================================== */
.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 (max-width: 768px) {
  .c-search__loading .c-search__loading-static img {
    width: 120px;
  }
}
.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 (max-width: 768px) {
  .c-search__loading .c-search__loading-animate img {
    width: 50px;
  }
}
.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;
}

/* ==========================================================================
7. No Results
========================================================================== */
.c-search__no-results {
  text-align: center;
}
.c-search__no-results h3 {
  font-size: 2.25rem; /* 36/16 */
  margin-top: 24px;
}
@media (max-width: 600px) {
  .c-search__no-results h3 {
    font-size: 1.3125rem !important;
  }
}
.c-search__no-results h4 {
  font-size: 1.3125rem; /* 21/16 */
  margin-top: 32px;
}
@media (max-width: 600px) {
  .c-search__no-results h4 {
    font-size: 1.1875rem !important; /* 19/16 */
  }
}
.c-search__no-results img {
  display: inline-block;
  width: 200px;
  height: auto;
  margin-left: -20px;
  padding-top: 20px;
}
@media (max-width: 600px) {
  .c-search__no-results img {
    width: 150px;
  }
}
.c-search__no-results p {
  font-style: italic;
  font-size: 2.25rem;
}
@media (max-width: 600px) {
  .c-search__no-results p {
    font-size: 1.3125rem;
  }
}
.c-search__no-results .c-search__tags {
  margin-top: 24px;
  text-align: center;
}

/* ==========================================================================
8. Book Search
========================================================================== */
.c-global-search--book {
  background: #ffffff;
}
@media (max-width: 600px) {
  .c-global-search--book {
    padding-top: 24px;
  }
}
.c-global-search--book .o-input {
  margin: 0;
}
@media (max-width: 992px) {
  .c-global-search--book .o-input {
    width: calc(100% - 32px);
  }
}
.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 (max-width: 992px) {
  .c-global-search--book .c-global-search__close {
    right: 0;
  }
}
.c-global-search--book .c-global-search__close svg {
  height: 18px;
}
.c-global-search--book .c-global-search__recommendations {
  margin-top: 20px;
}
@media (max-width: 992px) {
  .c-global-search--book .c-global-search__recommendations {
    padding-left: 0;
    padding-right: 0;
  }
}
.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;
}

/**
 * Authors
 *
 *
 * 1a. Content Author
 *
 * 1b. Content Author (Dark)
 *
 * 2. Card Style Alternative
 *
 * 3. Testimonial modifier
 *
 */
/* ==========================================================================
1a. Content Author
========================================================================== */
.c-content-author {
  display: flex;
}
@media (max-width: 768px) {
  .c-content-author {
    margin-top: 20px;
  }
}
.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;
}

/* ==========================================================================
1b. Content Author (Dark)
========================================================================== */
.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;
}

/* ==========================================================================
2. Content Author (Card Style)
========================================================================== */
.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;
}

/* ==========================================================================
3. Add quote flourish to card
========================================================================== */
.c-content-author--quote {
  position: relative;
}
.c-content-author--quote:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 15px;
  right: 18px;
  top: 18px;
  background-image: url(/assets/svg-icons/punctutation-a2544368f2caec4bc5be734142714d92543038d9cf6bf95e0a06680be8f1629a.png);
  background-size: cover;
}

/**
 * Users
 *
 *
 * 1. Profile grid
 *
 * 2. Profile sidebar
 *
 * 3. Empty
 *
 * 4. Tutorials
 *
 */
/* ==========================================================================
1. Profile grid
========================================================================== */
.c-profile__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  max-width: 1080px;
}
@media (max-width: 1140px) {
  .c-profile__grid {
    padding: 30px 20px 0;
  }
}
@media (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;
  }
}
.c-profile__grid .c-profile__bio-description {
  color: #6E7687;
}
.c-profile__grid .c-profile__bio-description a {
  color: #158443;
}

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

/* ==========================================================================
3. Profile empty
========================================================================== */
.c-profile__empty {
  text-align: center;
}
.c-profile__empty img {
  width: 320px;
}

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

/**
 * Social
 *
 * 1. Forum Comments
 *
 *
 */
/* ==========================================================================
 1. Forum Comments
 ========================================================================== */
.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 (max-width: 768px) {
  .c-forum-comments .c-forum-comments__wrapper .c-forum-comments__comment .c-forum-comment__post {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.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;
}

/**
 * Empty State Components
 *
 *
 * 1. Basic empty state
 *
 * 2. Android
 *
 * 3. File Loader
 *
 * 4. Following
 *
 * 5. Suggestions
 *
 */
/* ==========================================================================
 1. Basic
 ========================================================================== */
.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 (max-width: 600px) {
  .c-empty-state .c-empty-state__artwork {
    width: 90px;
    margin-top: 45px;
  }
}

/* ==========================================================================
 2. Android
 ========================================================================== */
.c-empty-state--android .c-empty-state__image-animate {
  position: absolute;
  width: 120px;
  top: 40px;
  right: 0px;
}

/* ==========================================================================
 3. File Loader
 ========================================================================== */
.c-empty-state--loader .c-search__loading {
  margin-left: -20px;
}
.c-empty-state--loader .c-search__loading-animate {
  margin-top: 40px;
}

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

/* ==========================================================================
 5. Suggestions
 ========================================================================== */
.c-empty-state--suggestions h3 {
  font-size: 1.75rem; /* 32/16 */
}

/* ==========================================================================
 6. Illustration + Messaging
 ========================================================================== */
.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;
}

/**
 * Testimonials
 *
 * 1. Testimonial component to use everywhere
 *
 * 2. Testimonials (Twitter Version)
 *
 */
/* A common wrapper for displaying a grid of testimonials */
.c-testimonial-wrapper {
  columns: 3;
  column-gap: 60px;
}
@media (max-width: 992px) {
  .c-testimonial-wrapper {
    columns: 2;
  }
}
@media (max-width: 768px) {
  .c-testimonial-wrapper {
    columns: 1;
  }
}
.c-testimonial-wrapper .c-testimonial {
  width: 100%;
  display: inline-block;
  margin-bottom: 30px;
}

/* A single testimonial */
.c-testimonial {
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .c-testimonial {
    text-align: left;
  }
}
.c-testimonial:before {
  content: "";
  z-index: 0;
  width: 40px;
  height: 30px;
  background-image: url(/assets/svg-icons/punctutation-a2544368f2caec4bc5be734142714d92543038d9cf6bf95e0a06680be8f1629a.png);
  background-size: cover;
  position: absolute;
  top: -10px;
  left: -10px;
  opacity: 0.25;
  z-index: -1;
}
.c-testimonial p {
  font-size: 1.0625rem; /* 17/16 */
}
@media (max-width: 600px) {
  .c-testimonial p {
    font-size: 0.9375rem;
  }
}
.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);
}

/* ==========================================================================
2. Testimonials (Twitter Version)
========================================================================== */
.c-testimonial-wrapper--twitter {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
@media (max-width: 992px) {
  .c-testimonial-wrapper--twitter {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .c-testimonial-wrapper--twitter {
    grid-template-columns: 1fr;
  }
}
.c-testimonial-wrapper--twitter .c-testimonial--twitter {
  width: 100%;
  display: inline-block;
}

/* A single testimonial */
.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 (max-width: 600px) {
  .c-testimonial--twitter p {
    font-size: 0.9375rem;
  }
}
.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;
}

/**
* 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
========================================================================== */
.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 (max-width: 768px) {
  .c-card-category:first-child {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .c-card-category {
    background: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 0;
    border-bottom: 1px solid #DFE7F0;
  }
}
@media (max-width: 600px) {
  .c-card-category {
    margin-top: 30px;
  }
}
.c-card-category .c-card-category__artwork {
  width: 100%;
  height: 60px;
  position: relative;
  background: #ffffff;
  background-size: cover !important;
}
@media (max-width: 768px) {
  .c-card-category .c-card-category__artwork {
    display: none;
  }
}
.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 (max-width: 768px) {
  .c-card-category .c-card-category__text {
    padding: 0;
    text-align: left;
  }
}
.c-card-category .c-card-category__text .o-badge-video {
  display: inline-flex;
  width: 54px;
  height: 54px;
  margin-top: -27px;
}
@media (max-width: 768px) {
  .c-card-category .c-card-category__text .o-badge-video {
    margin-top: 0;
  }
}
.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 (max-width: 768px) {
  .c-card-category .c-card-category__text .c-card-category__text-title {
    font-size: 1.3125rem; /* 21/16 */
  }
}
.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 (max-width: 768px) {
  .c-card-category .c-card-category__text .c-card-category__text-description {
    padding-bottom: 0;
    margin-bottom: 15px;
  }
}
.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 (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);
  }
}

/* ==========================================================================
2. Skill Level Card
========================================================================== */
.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%);
}

/* ==========================================================================
3. Plan Card
========================================================================== */
.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 (max-width: 1080px) {
  .c-plan .c-plan__benefits li {
    font-size: 0.9375rem; /* 15/16 */
  }
}
.c-plan .c-plan__benefits li:before {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(/assets/svg-icons/checkmark--green-1e096ae45df68feb9ffcc548c7c6510565f7f0d4098690d0121fe6739a2a7e76.png);
  background-size: cover;
}
.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(/assets/svg-icons/checkmark-c892a399ec5e7c73a6cac886b1baac93a78bf5eab341469fd7de45c61c674ec0.png);
}
.c-plan--emphasis .c-plan__benefits .c-plan__benefits--highlight:before {
  background-image: url(/assets/svg-icons/checkmark--blue-18803e2ee06f4c404b6c173497e54fbbb6e251bac81ecc8dfc030657cf775724.png);
}

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

/* ==========================================================================
3. Plan Card (Neon)
========================================================================== */
.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;
}

/* ==========================================================================
4a. Card Platform
========================================================================== */
.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;
}

/* ==========================================================================
4b. Card Platform Variations
========================================================================== */
.c-card-platform--ios a:before, .c-card-platform--ios > div:before {
  background-image: url(/assets/artwork/illustration-ios-platform-ab500adbf99ef7a50eac362ac7dbd2da6c39386765beaf61e26e9e44c6d4223c.svg);
  background-size: 220px;
  background-position: top -44px center;
  background-repeat: no-repeat;
}
.c-card-platform--ios a:hover:before, .c-card-platform--ios > div:hover:before {
  background-size: 230px;
}

.c-card-platform--android a:before, .c-card-platform--android > div:before {
  background-image: url(/assets/artwork/illustration-android-platform-c683dd8685d10d1ffe4eeb8f9a65bea8c2fc5578d7a8f76608cf223babf8a1dc.svg);
  background-size: 230px;
  background-position: top -65px center;
  background-repeat: no-repeat;
}
.c-card-platform--android a:hover:before, .c-card-platform--android > div:hover:before {
  background-size: 240px;
}

.c-card-platform--flutter a:before, .c-card-platform--flutter > div:before {
  background-image: url(/assets/artwork/illustration-flutter-platform-14685d0e2cbeab64008c7ec07d50a10cbbb123c7c45a47eccd8143d287eff61c.svg);
  background-size: 343px;
  background-position: top -30px left -20px;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .c-card-platform--flutter a:before, .c-card-platform--flutter > div:before {
    background-position: top -30px center;
  }
}
.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(/assets/artwork/illustration-server-side-swift-platform-91676fd94c82c9d38412dfc3a9b24735710b500c8f47c0c04fee0cac1a160c27.svg);
  background-size: 207px;
  background-position: top -43px center;
  background-repeat: no-repeat;
}
.c-card-platform--server-side-swift a:hover:before, .c-card-platform--server-side-swift > div:hover:before {
  background-size: 212px;
}

.c-card-platform--unity a:before, .c-card-platform--unity > div:before {
  background-image: url(/assets/artwork/illustration-unity-platform-4459ddc546660de8c658f1f5a61ed4d400b8379ec1fd1348d3a27d2424975a1f.svg);
  background-size: 284px;
  background-position: top -60px right -38px;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .c-card-platform--unity a:before, .c-card-platform--unity > div:before {
    background-position: top -60px center;
  }
}
.c-card-platform--unity a:hover:before, .c-card-platform--unity > div:hover:before {
  background-size: 289px;
}

/* ==========================================================================
5. Option card
========================================================================== */
.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(/assets/artwork/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(/assets/artwork/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(/assets/artwork/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(/assets/artwork/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(/assets/artwork/onboarding-unity-icon-1f53dd0e9ffa147bdddb4f7fe6ccd67903d178a4215855a314fdfb77b57d142b.svg);
  background-position: center calc(50% - 30px);
  background-size: 68px 69px;
  background-repeat: no-repeat;
}

/* ==========================================================================
6. Simple card
========================================================================== */
.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;
}

/* ==========================================================================
7. Path Progress card
========================================================================== */
.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 (max-width: 768px) {
  .c-card-path-progress {
    grid-template-columns: 1fr 90px;
    padding: 20px;
  }
}
.c-card-path-progress .c-card-path-progress__left {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (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;
  }
}
.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 (max-width: 768px) {
  .c-card-path-progress .c-card-path-progress__left img:first-of-type {
    left: 0;
    top: 0;
  }
}
.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;
}

/**
 * <noscript /> components
 *
 * 1. Body insert
 *
 */
/* ==========================================================================
  1. body
  ========================================================================== */
.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;
  }
}
.c-noscript__body p {
  font-family: "Bitter", serif;
  font-size: 1.25rem; /* 20/16 */
  max-width: 720px;
  margin: 40px auto;
}

/**
* FAQ component
*
* Styles for Q & A's
*
* 1. FAQ
*
*/
/* ==========================================================================
   1. FAQ
   ========================================================================== */
.c-faq h2 {
  margin-top: 54px;
}
@media (max-width: 600px) {
  .c-faq h2 {
    font-size: 1.3125rem;
  }
}
.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 (max-width: 600px) {
  .c-faq .c-faq__item h3 {
    font-size: 1.1875rem; /* 19/16 */
  }
}
.c-faq .c-faq__item h3:before {
  content: "";
  position: absolute;
  width: 27px;
  height: 27px;
  background: #73859F;
  background-image: url(/assets/svg-icons/question-30b4ec22034594c5246dad2174ba2e3efef37b7ca31c34a6243e25c59fe3392d.png);
  background-size: cover;
  left: -50px;
  border-radius: 0.5625rem;
}
.c-faq .c-faq__item p {
  position: relative;
  color: #6E7687;
  font-size: 1rem;
  margin-top: 27px;
}
@media (max-width: 600px) {
  .c-faq .c-faq__item p {
    font-size: 0.9375rem;
  }
}
.c-faq .c-faq__item p:first-child:before {
  content: "";
  position: absolute;
  width: 27px;
  height: 27px;
  background-image: url(/assets/svg-icons/loopy-arrow-ed620ece85c7319eebf154f3c1f702066b68d9d73799cce24e35b44adc0ecafd.png);
  background-size: cover;
  top: -4px;
  left: -50px;
}
.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;
}

/**
* 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)
========================================================================== */
.c-review-module--invert .l-border-bottom-grey-mako {
  border-bottom: 1px solid #DBDDE0;
}
.c-review-module--invert .l-color-grey-chateau {
  color: #6E7687;
}
.c-review-module--invert .o-textarea--dark {
  background: #ffffff;
  border: 2px solid #D6E0EF;
  color: #333333;
  width: 100%;
}
.c-review-module--invert .o-textarea--dark:focus {
  background: rgba(29, 131, 209, 0.05);
  border: 2px solid #73859F;
}
.c-review-module--invert .c-review-module__main-header-controls span {
  font-size: 0.9375rem; /* 15/16 */
  color: #6E7687;
  margin-left: 9px;
}
.c-review-module--invert .c-review-module__main-header-controls a {
  color: #158443;
  text-decoration: underline;
}
.c-review-module--invert .c-review-module__main-header-stars .l-button__svg-empty-star {
  fill: #CACED2 !important;
}
.c-review-module--invert .c-user-review {
  background-color: #ffffff;
}
.c-review-module--invert .c-user-review__date {
  color: #6E7687 !important;
}
.c-review-module--invert .c-user-review__bottom .l-button__svg-empty-star {
  opacity: 1 !important;
}
.c-review-module--invert .c-review-module__illustration {
  background-image: url(/assets/artwork/illustration-ratings-ecbd0a20f8ea5b868641eee840861c289d0591e9419c4df98c00866ccbadbb5e.svg);
  background-size: cover;
}
.c-review-module--invert .c-review-module__answers > input[type=checkbox]:hover + label {
  background: rgb(234.8933333333, 241.08, 247.2666666667);
}
.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;
}

/* ==========================================================================
2. Review Module
========================================================================== */
.c-review-module__main-header {
  margin-top: 12px;
  margin-bottom: 24px;
}
.c-review-module__main-header > div {
  position: relative;
}
@media (max-width: 600px) {
  .c-review-module__main-header > div {
    display: block;
  }
}
@media (max-width: 600px) {
  .c-review-module__main-header p {
    position: absolute;
    top: 30px;
    right: 0;
  }
}
.c-review-module__main-header .c-review-module__main-header-stars {
  display: flex;
  position: relative;
  top: -4px;
  margin: 0 5px;
}
@media (max-width: 600px) {
  .c-review-module__main-header .c-review-module__main-header-stars {
    position: absolute;
    top: 6px;
    right: 0;
    margin: 0;
  }
}
.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(/assets/artwork/illustration-ratings-dark-cc5317ff51fd0e2e97cacd02ae7952386f9716f375f4cbd8cc0add529554e1d9.svg);
  background-size: cover;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .c-review-module__illustration {
    width: 200px;
    height: 91px;
  }
}

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

/* ==========================================================================
3. Star Rating
========================================================================== */
.c-rating-count {
  position: relative;
}
@media (max-width: 768px) {
  .c-rating-count {
    padding-bottom: 24px;
  }
}
.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 (max-width: 768px) {
  .c-rating-count a {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
  }
}

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

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

/* ==========================================================================
5. Review Questions
========================================================================== */
.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: rgb(57.82, 62.72, 70.56);
}
.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;
}

/* ==========================================================================
6. Modal
========================================================================== */
.c-modal--ratings {
  z-index: 99999999999;
}
.c-modal--ratings .c-modal__title {
  color: #333333;
}
@media (max-width: 768px) {
  .c-modal--ratings .c-modal__title {
    font-size: 1.5rem !important; /* 24/16 */
  }
}
.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 (max-width: 768px) {
  .c-modal--ratings .c-modal-wrapper > div .c-modal__complete-illustration img {
    width: 200px;
    height: 91px;
  }
}

/**
* Reading Experience Tools
*
* 1a. Notebook & Highlighting
*
* 1b. Highlighter Colors
*
* 2. Reading Experience Widget
*
*/
/* ==========================================================================
   1a. Notebook & Highlighting
   ========================================================================== */
.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 (max-width: 992px) {
  .c-notebook {
    width: 100%;
    top: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.c-notebook .c-notebook__title-actions {
  position: absolute;
  cursor: pointer;
  top: 24px;
}
.c-notebook .c-notebook__erase {
  right: 24px;
}
@media (max-width: 992px) {
  .c-notebook .c-notebook__erase {
    right: 60px;
  }
}
.c-notebook .c-notebook__close {
  width: 16px;
  height: 24px;
  right: 24px;
  display: none;
}
@media (max-width: 992px) {
  .c-notebook .c-notebook__close {
    display: block;
  }
}
.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;
}

/* ==========================================================================
   1b. Highlighter Colors
   ========================================================================== */
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;
}

/* ==========================================================================
   2. Reading Experience Widget
   ========================================================================== */
.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;
  }
  .c-reading-experience-selector::-webkit-scrollbar {
    width: 0 !important;
  }
  .c-reading-experience-selector {
    box-shadow: none;
    border-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .c-reading-experience-selector {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.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 (max-width: 992px) {
  .c-reading-experience-selector .o-alert__close {
    display: block;
  }
}
.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 (max-width: 992px) {
  .c-reading-experience-selector .o-dropdown-menu__icon--night-mode + a label {
    right: auto;
    margin-left: 9px;
  }
}
.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;
}

/* ==========================================================================
  2a. Cross browser range track styles
  ========================================================================== */
.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;
}

/* ==========================================================================
   2b. Cross browser range thumb styles
   ========================================================================== */
.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);
}

/**
 * Books
 *
 *
 * 1. Book List
 *
 *
 */
/* ==========================================================================
 1. Book List
 ========================================================================== */
.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 (max-width: 768px) {
  .c-bookshelf-book .c-bookshelf-book__title {
    font-size: 1.3125rem; /* 21/16 */
  }
}
.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 (max-width: 768px) {
  .c-bookshelf-book .c-bookshelf-book__price {
    font-size: 1rem;
  }
}
.c-bookshelf-book .c-bookshelf-book__description {
  font-size: 0.9375em; /* 15/16 */
  margin-top: 10px;
}

/**
 * Drawer: Off-screen component for filters, controls and anythign else (show/hide with JS)
 *
 * 1. Drawer
 *
 */
/* ==========================================================================
1. Drawer
========================================================================== */
.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;
}

/**
 * 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
  ========================================================================== */
@media (max-width: 600px) {
  .u-hide-mobile {
    display: none;
  }
}

@media (max-width: 600px) {
  .u-hide-mobile--force {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .u-hide-mobile-large {
    display: none;
  }
}

@media (max-width: 768px) {
  .u-hide-mobile-large--force {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .u-hide-tablet {
    display: none;
  }
}

@media (max-width: 992px) {
  .u-hide-tablet--force {
    display: none !important;
  }
}

@media (max-width: 1080px) {
  .u-hide-1080 {
    display: none;
  }
}

.u-show-mobile {
  display: none;
}
@media (max-width: 600px) {
  .u-show-mobile {
    display: block;
  }
}

.u-show-mobile-large {
  display: none;
}
@media (max-width: 768px) {
  .u-show-mobile-large {
    display: block;
  }
}

.u-show-tablet-flex--inline {
  display: none;
}
@media (max-width: 992px) {
  .u-show-tablet-flex--inline {
    display: inline-flex;
  }
}

.u-show-tablet-flex--inline-force {
  display: none !important;
}
@media (max-width: 992px) {
  .u-show-tablet-flex--inline-force {
    display: inline-flex !important;
  }
}

.u-show-1080-flex--inline {
  display: none;
}
@media (max-width: 1080px) {
  .u-show-1080-flex--inline {
    display: inline-flex;
  }
}

.u-show-mobile--inline {
  display: none;
}
@media (max-width: 600px) {
  .u-show-mobile--inline {
    display: inline;
  }
}

.u-show-mobile-flex {
  display: none;
}
@media (max-width: 600px) {
  .u-show-mobile-flex {
    display: flex;
  }
}

.u-show-mobile-large-flex {
  display: none;
}
@media (max-width: 768px) {
  .u-show-mobile-large-flex {
    display: flex;
  }
}

.u-show-tablet-flex {
  display: none !important;
}
@media (max-width: 992px) {
  .u-show-tablet-flex {
    display: flex !important;
  }
}

/* ==========================================================================
  2. Toggle dropdown menu on hover
  ========================================================================== */
.u-toggle-dropdown:hover .o-dropdown-menu, .u-toggle-dropdown:active .o-dropdown-menu, .u-toggle-dropdown:focus .o-dropdown-menu {
  display: block;
}

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

/**
 * 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.
 *
 */
.c-banner-draper-sticky .o-alert__close {
  width: 20px;
}

@media (max-width: 900px) {
  .l-community-care-link {
    display: none;
  }
}
@media (max-width: 600px) {
  .l-community-care-link {
    display: block;
  }
}

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

/* Community Page Double Banner Image */
.l-community-image {
  display: block;
  height: 250px;
}

.l-community-image--right {
  background-image: url(/assets/photos/community-connect-right-fe58d024caa00d2b9c02d522c8146885f5fa75cf97062c09ebc10fbe3efd972a.png);
  background-repeat: no-repeat;
}

/* Add/Remove highlighted transcripts background */
.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;
}

/* ==========================================================================
X. Arrows
========================================================================== */
#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;
}

/* ==========================================================================
X. Night Mode
========================================================================== */
.prefers-color-scheme--dark .c-written-tutorial__content {
  /* ==========================================================================
  X. Labels
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Shapes
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Shapes w/ Inner
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Shapes w/ Patterns
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrows
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (Grey)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (Green)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (Turquoise)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (LightBlue)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (DarkBlue)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (Purple)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (Pink)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (Red)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Arrow (Yellow)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Lines
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Shadows
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Grey)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Green)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Turquoise)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Light Blue)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Dark Blue)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Purple)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Pink)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Red)
  ========================================================================== */
}
.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 {
  /* ==========================================================================
  X. Color Conversion (Yellow)
  ========================================================================== */
}
.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;
}

/**
 * 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 */
.hljs-comment,
.hljs-quote {
  color: #999999;
}

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

/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
  color: #F08D49;
}

/* Yellow */
.hljs-class .hljs-title {
  color: #F8C555;
}

/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #7EC699;
}

/* Aqua */
.hljs-meta {
  color: #18B5AB;
}

/* Blue */
.hljs-function,
.hljs-section,
.hljs-title {
  color: #70A2FF;
}

/* Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #CC99CD;
}

.hljs {
  display: block;
  padding: 0.5em;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/* ==========================================================================
 2. Light Code Blocks add class .light-code to parent
 ========================================================================== */
/* Comment */
.light-code .hljs-comment,
.light-code .hljs-quote {
  color: #918791;
}

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

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

/* Yellow */
.light-code .hljs-class .hljs-title {
  color: #966B19;
}

/* Green */
.light-code .hljs-string,
.light-code .hljs-symbol,
.light-code .hljs-bullet,
.light-code .hljs-addition {
  color: #157857;
}

/* Aqua */
.light-code .hljs-meta {
  color: #1D7EAF;
}

/* Blue */
.light-code .hljs-function,
.light-code .hljs-section,
.light-code .hljs-title {
  color: #2E5FFF;
}

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

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