@charset "UTF-8";
@font-face {
  font-family: "Analogue";
  src: url("../fonts/AnalogueRegular.eot");
  src: url("../fonts/AnalogueRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/AnalogueRegular.woff2") format("woff2"), url("../fonts/AnalogueRegular.woff") format("woff"), url("../fonts/AnalogueRegular.ttf") format("truetype"), url("../fonts/AnalogueRegular.svg#AnalogueRegular") format("svg");
  font-weight: normal;
  font-style: normal;
  /*font-display: swap;*/
}
@font-face {
  font-family: "Avenir";
  src: url("../fonts/AvenirLTStd-Black.eot");
  src: url("../fonts/AvenirLTStd-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirLTStd-Black.woff2") format("woff2"), url("../fonts/AvenirLTStd-Black.woff") format("woff"), url("../fonts/AvenirLTStd-Black.ttf") format("truetype"), url("../fonts/AvenirLTStd-Black.svg#AvenirLTStd-Black") format("svg");
  font-weight: 900;
  font-style: normal;
  /*font-display: swap;*/
}
@font-face {
  font-family: "Avenir";
  src: url("../fonts/AvenirLTStd-Roman.eot");
  src: url("../fonts/AvenirLTStd-Roman.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirLTStd-Roman.woff2") format("woff2"), url("../fonts/AvenirLTStd-Roman.woff") format("woff"), url("../fonts/AvenirLTStd-Roman.ttf") format("truetype"), url("../fonts/AvenirLTStd-Roman.svg#AvenirLTStd-Roman") format("svg");
  font-weight: normal;
  font-style: normal;
  /*font-display: swap;*/
}
@font-face {
  font-family: "Avenir";
  src: url("../fonts/AvenirLTStd-Book.eot");
  src: url("../fonts/AvenirLTStd-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/AvenirLTStd-Book.woff2") format("woff2"), url("../fonts/AvenirLTStd-Book.woff") format("woff"), url("../fonts/AvenirLTStd-Book.ttf") format("truetype"), url("../fonts/AvenirLTStd-Book.svg#AvenirLTStd-Book") format("svg");
  font-weight: normal;
  font-style: normal;
  /*font-display: swap;*/
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
  color: var(--color-text);
  background-color: var(--color-background);
  font-family: "Avenir", sans-serif;
  padding: 90px 0 0;
  margin: 0;
  /*overflow-x: hidden;*/
  cursor: default;
}

body > main {
  /*padding-top: 90px;*/
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.mob-only {
  display: none;
}

.logo.stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.logo.stacked .title {
  color: var(--color-primary);
  font-family: "Analogue", sans-serif;
  font-size: 42px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transform: translateX(0.12em);
}
.logo.stacked .icon {
  height: 100px;
  width: 42px;
  background-color: var(--color-primary);
  -webkit-mask-image: url("/assets/img/logo.svg");
  mask-image: url("/assets/img/logo.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 42px 61px;
  mask-size: 42px 61px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

div.image {
  background-image: var(--backdrop-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

div.cols {
  display: flex;
  gap: var(--column-gap);
  justify-content: space-between;
}

:root {
  /* widths */
  --full-width: 100%;
  --outer-width: 1920px;
  --inter-width: 90vw;
  --inner-width: 1300px;
  --popup-width: 1340px;
  --progress-width: 1088px;
  --library-width: 1704px;
  --blog-post-width: 920px;
  --blog-post-max-width: 90vw;
  --author-box-width: 1076px;
  --blog-comment-width: 1390px;
  --blog-archive-width: 1609px;
  --teachers-width: 1286px;
  --teacher-width: 1058px;
  --food-width: 1100px;
  --foodgrid-width: 1430px;
  --recipe-width: 644px;
  --legal-width: 920px;
  --contact-width: 920px;
  --causes-width: 1240px;
  --stats-width: 1240px;
  --profile-width: 1240px;
  --player-width: MIN(1390px, 95vw);
  --help-center-width: 1088px;
  /* hack: SASS is case sensitive, CSS is not */
  --twofold-content-width: MIN(637px, calc(50% - 122px));
  --person-card-width: 398px;
  /* latest post has an image to the right */
  --post-latest-dir: row-reverse;
  --shadow-default: 0 7px 10px 0 rgba(0, 0, 0, 0.16);
  --shadow-dropdown: 0 11px 10px 0 rgba(0, 0, 0, 0.16);
  --column-count-3: 3;
  --column-count-4: 4;
  --column-count-5: 5;
  --column-gap: 50px;
  --gap-thin: 30px;
  --gap-normal: 40px;
  --gap-wide: 50px;
  --regular-h1-size: 64px;
  --regular-h2-size: 32px;
  --regular-h3-size: 24px;
  --regular-h4-size: 20px;
  --regular-p-size: 16px;
  --heading-h1-size: 128px;
  --heading-h2-size: 64px;
  --heading-h3-size: 32px;
  --heading-h4-size: 24px;
  --heading-p-size: 20px;
  /* colors */
  --color: #525252;
  --color-white: #FFFFFF;
  --color-dark: #525252;
  --color-overlay: #c8d3d1;
  --color-overlay-bd: rgba(200, 211, 209, 0.35);
  --color-accent: #6eb3a5;
  --color-background: #fbf9f4;
  --color-background-h: 43;
  --color-background-s: 47%;
  --color-background-l: 97%;
  --color-primary: #a84d2b;
  --color-primary-h: 16;
  --color-primary-s: 59%;
  --color-primary-l: 41%;
  --color-subheading: #5b5b5b;
  --color-subheading-h: 0;
  --color-subheading-s: 0%;
  --color-subheading-l: 36%;
  --color-text: #603d39;
  --color-text-h: 6;
  --color-text-s: 25%;
  --color-text-l: 30%;
  --color-light-gray: #dbdada;
  --color-light-gray-h: 0;
  --color-light-gray-s: 1%;
  --color-light-gray-l: 86%;
  --color-tan: #d5b268;
  --color-tan-h: 41;
  --color-tan-s: 56%;
  --color-tan-l: 62%;
  --color-teal: #83b2ab;
  --color-teal-h: 168;
  --color-teal-s: 31%;
  --color-teal-l: 57%;
  --color-neptune: #87c0b5;
  --color-neptune-h: 168;
  --color-neptune-s: 31%;
  --color-neptune-l: 64%;
  --color-silver: #afafaf;
  --color-silver-h: 0;
  --color-silver-s: 0%;
  --color-silver-l: 69%;
  --color-dove: #707070;
  --color-dove-h: 0;
  --color-dove-s: 0%;
  --color-dove-l: 44%;
  --color-secondary: #3b9386;
  --color-secondary-h: 171;
  --color-secondary-s: 43%;
  --color-secondary-l: 40%;
  /* transitions */
  --transition-duration: 350ms;
  /* accordions */
  --transition-open: max-height var(--transition-duration) ease-out var(--transition-duration);
  --transition-close: max-height var(--transition-duration) ease-in;
  /* toggles */
  --transition-toggle-open: max-height var(--transition-duration) ease-out;
  --transition-toggle-close: max-height var(--transition-duration) ease-in;
  /* pull-quote */
  --pullquote-circle: 475px;
}

/*! normalize.css v8.0.1 | 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 iOS.
 */
html {
  color: var(--color-text);
  font-size: 1em;
  line-height: 1.4; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  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
   ========================================================================== */
/**
 * 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
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 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 */
}

/**
 * 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 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
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 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;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
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 in Chrome and Safari on macOS.
 */
[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 Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

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

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

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

h1, h2, h3 {
  color: var(--color-primary);
  font-family: "Analogue", sans-serif;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  margin: 0.18em auto 0;
  transform: translateX(0.12em);
}
h1::after, h2::after, h3::after {
  content: "";
  /*margin-left: -.2em;*/
}

h1 {
  font-size: 64px;
}
h1 small {
  display: block;
  font-size: 50%;
  letter-spacing: 0.2em;
  transform: translateX(0.12em);
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 20px;
}

h4 {
  color: var(--color-secondary);
  font-family: "Avenir Medium", sans-serif;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.45em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(0.27em);
}

p {
  color: var(--color-text);
}

a {
  color: var(--color-primary);
}

.heading h1 {
  font-size: var(--heading-h1-size);
}
.heading h2 {
  font-size: var(--heading-h2-size);
}
.heading h3 {
  font-size: var(--heading-h3-size);
}
.heading h4 {
  font-size: var(--heading-h4-size);
}
.heading p {
  font-size: var(--heading-p-size);
}

blockquote.pull-qoute {
  --pq-font: 50px;
  --pq-height: calc(var(--pq-font) * 10);
  --pq-width: calc(var(--pq-font) * 16);
  --pq-circle: calc(var(--pq-font) * 9);
  --pq-margin: calc(var(--pq-font) * -2) auto calc(var(--pq-font) * 4);
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  width: min(var(--pq-font) * 16, 90vw);
  height: calc(var(--pq-font) * 10);
  margin: calc(var(--pq-font) * -2) auto calc(var(--pq-font) * 4);
  font-family: "Analogue", sans-serif;
  font-size: var(--pq-font);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: normal;
  text-align: center;
  color: var(--color-primary);
  clear: both;
}
blockquote.pull-qoute::before {
  content: "";
  display: block;
  height: calc(var(--pq-font) * 9);
  width: calc(var(--pq-font) * 9);
  background-color: var(--color-overlay);
  opacity: 0.17;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  top: calc(var(--pq-font) * 9 / 3);
}
blockquote.pull-qoute::after {
  content: open-quote;
  font-size: calc(var(--pq-font) * 5);
  font-family: "Analogue", sans-serif;
  line-height: 1;
  position: absolute;
  top: calc(var(--pq-font) * 3);
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  padding: 0.5em 2.5em;
  font-size: 14px;
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
  text-decoration: none;
  border-radius: 3em;
  border: 1px solid;
  color: var(--color-white);
  background-color: var(--el-color);
  border-color: var(--el-color);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.button.outline {
  color: var(--el-color);
  border-color: var(--el-color);
  background-color: transparent;
}
.button.outline:hover {
  color: var(--color-white);
  border-color: var(--el-color);
  background-color: var(--el-color);
}
.button.large {
  height: 57px;
  font-size: 17px;
  font-weight: 500;
}
.button.small {
  height: 35px;
  font-size: 14px;
}
.button.mono {
  width: 220px;
  padding: 0;
  font-family: "Andale Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.button.show-more {
  grid-column: 1/-1;
  min-width: 193.3px;
  height: 43px;
  margin: 0 auto 3em;
  color: #6EB3A5;
  font-family: "Avenir Medium", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  background-color: var(--color-white);
  border: 2px solid #6eb3a5;
  border-radius: 3em;
}

.draggable {
  position: relative;
  width: var(--full-width);
  overflow-x: hidden;
  cursor: grab;
}
.draggable .slide-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  font-size: 20px;
  width: 100%;
  padding: 0;
  position: absolute;
  top: 1em;
}
.draggable .slide-nav .arrow {
  display: block;
  height: 20px;
  width: 20px;
  padding: 15px 20px;
  background-color: var(--color-primary);
  -webkit-mask-image: url("/assets/img/scroll.svg");
  mask-image: url("/assets/img/scroll.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px;
  mask-size: 20px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}
.draggable .slide-nav .arrow:hover {
  background-color: var(--color-text);
}
.draggable .slide-nav .arrow:active {
  background-color: var(--color-secondary);
}
.draggable .slide-nav .arrow.prev {
  transform: rotate(180deg);
}
.draggable::after {
  content: "Træk her";
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 134px;
  width: 134px;
  color: var(--color-primary);
  background-color: var(--color-white);
  background-image: url("/assets/img/hand.svg");
  background-position: center 4.2em;
  background-repeat: no-repeat;
  font-family: "Avenir Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 5;
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.06);
  transition: opacity 0.3s ease-in;
  opacity: 1;
  z-index: 2;
}
.draggable:hover::after {
  opacity: 0;
}

.roll-track {
  display: flex;
  width: auto;
}

.swiper-horizontal > .slider-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: var(--color-primary);
  opacity: 0.05;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--color-primary);
  opacity: 0.75;
  border-radius: 10px;
  left: 0;
  top: 0;
}

.pitch-box {
  display: flex;
  width: var(--progress-width);
  max-width: var(--progress-width);
  margin: auto;
  background-color: var(--color-white);
  border-bottom: 4px solid var(--color-primary);
}
.pitch-box:first-child {
  margin-top: 2em;
}
.pitch-box .image {
  width: 383px;
  min-width: 383px;
  background-image: var(--backdrop-image);
  background-position: center bottom;
  background-repeat: no-repeat;
}
.pitch-box .pitch {
  padding: 1rem 4rem;
}
.pitch-box .pitch h4 {
  text-align: left;
  letter-spacing: 0.19em;
  transform: none;
}
.pitch-box p {
  margin: 0 0 3em;
  color: var(--color-text);
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
}
.pitch-box.offer-box {
  border: none;
  margin: 2em auto;
}
.pitch-box.offer-box .image {
  min-width: 218px;
  max-width: 218px;
  background-image: var(--backdrop-image);
  background-position: center bottom;
  background-repeat: no-repeat;
}
.pitch-box.offer-box .offer {
  padding: 40px;
}
.pitch-box.offer-box .offer h3 {
  margin: 0 0 50px 80px;
  color: var(--color-text);
  text-align: left;
  font-family: "Analogue", serif;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 0.2em;
}
.pitch-box.offer-box .offer ol {
  margin: 0;
  padding: 0 0 0 80px;
  list-style: none;
  counter-reset: offer-counter;
}
.pitch-box.offer-box .offer ol li {
  position: relative;
  counter-increment: offer-counter;
}
.pitch-box.offer-box .offer ol li::before {
  --size: 49px;
  content: counter(offer-counter);
  position: absolute;
  left: calc(-1 * var(--size) - 36px);
  width: var(--size);
  height: var(--size);
  color: var(--color-tan);
  text-align: center;
  font-family: "Analogue", serif;
  font-size: 27px;
  line-height: var(--size);
  border: 1px solid var(--color-overlay);
  border-radius: 50%;
}
.pitch-box.offer-box .offer ol li h5 {
  margin: 50px 0 0;
  color: var(--color-primary);
  font-family: "Avenir", sans-serif;
  font-size: 17px;
  font-weight: normal;
  text-transform: uppercase;
}
.pitch-box.offer-box .offer ol li p {
  margin: 0;
}
.pitch-box.rev {
  flex-direction: row-reverse;
}

section.advice-box {
  width: var(--progress-width);
  max-width: var(--progress-width);
  margin: 5rem auto;
  padding: 25px 60px;
  background-color: var(--color-white);
}
section.advice-box h3 {
  margin: 25px 0 50px;
  color: var(--color-text);
  text-align: left;
  font-family: "Analogue", serif;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 0.2em;
}
section.advice-box ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: advice-counter;
}
section.advice-box ol li {
  position: relative;
  counter-increment: advice-counter;
  margin: 0;
  padding: 2em 0 2em 75px;
  font-size: 17px;
}
section.advice-box ol li:not(:last-child) {
  border-bottom: 1px solid rgba(168, 77, 43, 0.19);
}
section.advice-box ol li::before {
  --size: 30px;
  content: "#" counter(advice-counter);
  position: absolute;
  left: calc(-1 * var(--size) + 30px);
  width: var(--size);
  height: var(--size);
  color: var(--color-primary);
  text-align: center;
  font-family: "Analogue", serif;
  font-size: 35px;
  line-height: var(--size);
}

.video {
  position: relative;
  width: 327px;
  min-width: 327px;
  height: 295px;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.video .title {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  height: 55px;
  min-height: 55px;
  padding: 10px;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.1;
}
.video .thumb {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background-image: var(--video-preview);
  background-size: cover;
}
.video .thumb::after {
  content: attr(data-duration);
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: block;
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 1em;
  font-size: 16px;
  padding: 0.125em 0.5em;
}
.video .thumb .play {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.video .thumb .play img {
  transition: all 0.3s ease;
}
.video .thumb:hover .play img {
  transform: scale(1.1);
}
.video .info {
  padding: 10px;
  display: grid;
  grid-template-areas: "teacher heart" "topic heart";
  grid-auto-flow: column;
}
.video .info .teacher {
  grid-area: teacher;
  color: #2b2b2b;
  font-size: 16px;
}
.video .info .topic {
  grid-area: topic;
  color: var(--color-primary);
  font-size: 12px;
  text-transform: uppercase;
}
.video .info .heart {
  grid-area: heart;
  display: block;
  width: 30px;
  height: 30px;
  justify-self: self-end;
  align-self: center;
  background-color: #afafaf;
  -webkit-mask-image: url("/assets/img/icon-heart.svg");
  mask-image: url("/assets/img/icon-heart.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: all 0.15s ease-in-out;
}
.video .info .heart:hover, .video .info .heart:active, .video .info .heart.active {
  background-color: var(--color-primary);
}
.video.daily {
  width: 100%;
  min-height: 656px;
  border: 1px solid var(--color-light-gray);
  box-shadow: none;
}
.video.daily .title {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 18px;
  align-items: center;
}
.video.daily .thumb {
  height: 518px;
}
.video.daily .thumb::after {
  bottom: unset;
  top: -40px;
}
.video.daily .thumb .play img {
  width: 79px;
}
.accordion {
  width: var(--inter-width);
  max-width: var(--max-width);
  margin: auto;
}
.accordion .tab {
  min-height: var(--tab-min-height);
  margin-bottom: 1rem;
  padding: var(--tab-padding);
  background-color: var(--color-white);
  border-bottom: var(--tab-border-width) solid var(--tab-border-color);
}
.accordion .tab label {
  position: relative;
  display: block;
  font-size: 1.4rem;
  cursor: pointer;
}
.accordion .tab label::before {
  content: "";
  position: absolute;
  top: var(--opener-top);
  right: var(--opener-right);
  display: block;
  width: var(--opener-width);
  height: var(--opener-height);
  background-color: var(--opener-color);
  transition: all 0.4s;
}
.accordion .tab label::after {
  content: "";
  position: absolute;
  top: var(--opener-top);
  right: var(--opener-right);
  display: block;
  width: var(--opener-width);
  height: var(--opener-height);
  background-color: var(--opener-color);
  transition: transform 0.4s ease-in, opacity 0.1s 0.1s ease;
  transform: rotate(-90deg);
  opacity: 1;
  border-radius: 2px;
}
.accordion .tab label h4 {
  margin: 0;
  text-align: left;
  transform: none;
}
.accordion .tab p {
  margin-right: 90px;
  font-family: "Avenir Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}
.accordion .tab input {
  display: none;
}
.accordion .tab input:checked + label::after {
  transition: transform 0.4s ease, opacity 0.7s 0.2s ease, right 0.1s 0.1s ease;
  transform: rotate(0deg);
  opacity: 0;
}
.accordion .tab input:checked ~ .tab-content {
  max-height: 100vh;
  padding-bottom: 42px;
  transition: max-height 0.4s ease-out;
}
.accordion .tab input:checked ~ .tab-content input ~ .tab-content {
  transition: max-height 0.3s ease-in;
}
.accordion .tab input:checked ~ .tab-content input:checked ~ .tab-content {
  transition: max-height 0.3s ease-out 0.13s;
}
.accordion .tab input:disabled ~ label {
  cursor: default;
}
.accordion .tab input:disabled ~ label h4,
.accordion .tab input:disabled ~ label p, .accordion .tab input:disabled ~ label::before, .accordion .tab input:disabled ~ label::after {
  opacity: 0.5;
}
.accordion .tab-content {
  overflow: hidden;
  will-change: max-height;
  transition: max-height 0.4s ease-in;
  max-height: 0;
}
/*.tab input[type="checkbox"]:checked + label::after,
.tab input[type="radio"]:checked + label*/
.dish-card {
  position: relative;
  min-width: 252px;
  min-height: 340px;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dish-card .title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 60px;
  min-height: 60px;
  padding: 10px;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.1;
}
.dish-card .title p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: var(--line-count);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dish-card .thumb {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.dish-card .thumb a {
  display: block;
  height: 100%;
  width: 100%;
  background-image: var(--dish-image);
  background-size: cover;
  transition: transform 200ms ease-in;
}
.dish-card .thumb:hover a {
  transform: scale(1.05);
}
.dish-card .info {
  height: 50px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dish-card .info .expert {
  grid-area: expert;
  color: var(--color-primary);
  font-size: 16px;
  text-transform: uppercase;
}

.dishes-grid {
  width: fit-content;
  max-width: var(--foodgrid-width);
  margin: 5rem auto;
  display: grid;
  grid-template-columns: repeat(var(--column-count-5), 1fr);
  grid-gap: 33px 32px;
}
.dishes-grid > * {
  -webkit-animation: scale 0.25s ease-in-out;
  -moz-animation: scale 0.25s ease-in-out;
  animation: scale 0.25s ease-in-out;
}
.dishes-grid .dish-card {
  --line-count: 2;
  width: 252px;
  height: 340px;
}
.dishes-grid.favorites {
  margin: 0 auto 5rem;
  grid-gap: 30px 46px;
  grid-auto-rows: minmax(340px, 340px);
  grid-auto-flow: column dense;
}
.dishes-grid .dish-card.full {
  width: 529px;
  height: unset;
  grid-column-end: span 2;
  grid-row-end: span 2;
}
.dishes-grid .dish-card.small {
  width: 252px;
  height: 340px;
}

/* see all food experts roll */
.all-experts {
  background-color: var(--color-overlay);
  padding: 40px 0 0;
}
.all-experts h2 {
  color: var(--color-text);
}

.experts-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: auto;
  column-gap: 2em;
  padding: 40px 0;
}

.related-recipes {
  padding: 3rem 0 0;
  background-color: var(--color-overlay);
}
.related-recipes h2 {
  color: var(--color-text);
  font-size: 49px;
}
.related-recipes .dish-track {
  display: flex;
  width: auto;
  padding: 40px 0;
  column-gap: 40px;
}
.related-recipes .dish-card .info {
  justify-content: center;
}

.fav {
  position: relative;
  justify-self: self-end;
  align-self: center;
  grid-row: 1/-1;
}
.fav .heart {
  position: relative;
  grid-area: heart;
  display: block;
  width: 30px;
  height: 30px;
  justify-self: self-end;
  align-self: center;
  background-color: #afafaf;
  -webkit-mask-image: url("/assets/img/icon-heart.svg");
  mask-image: url("/assets/img/icon-heart.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.fav .heart:hover, .fav .heart:active, .fav .heart.active {
  background-color: var(--color-primary);
}
.fav .heart:active {
  transform: scale(1.05);
  transform-origin: right center;
}
.fav input {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  overflow-clip: 0, 0, 0, 0;
  opacity: 0;
}
.fav input:checked + .heart {
  background-color: var(--color-primary);
  -webkit-mask-image: url("/assets/img/icon-heart-full.svg");
  mask-image: url("/assets/img/icon-heart-full.svg");
}

.shop-card {
  width: 503px;
  background-color: var(--color-white);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
}
.shop-card .featured-img {
  position: relative;
  width: 503px;
  height: 193px;
  display: block;
  background-image: var(--shop-image);
  background-size: cover;
}
.shop-card .featured-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(200px, 35%);
  background-image: var(--shop-logo);
  display: block;
  height: min(100px, 35%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}
.shop-card .info {
  padding: 50px 25px;
  color: #242424;
}
.shop-card .info h3 {
  color: #242424;
  font-family: "Avenir Medium", sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: initial;
}
.shop-card .info .summary {
  color: #242424;
  font-family: "Avenir Medium", sans-serif;
  font-size: 18px;
  font-weight: 500;
}
.shop-card a {
  color: inherit;
  text-decoration: none;
}
.shop-card a.button {
  color: var(--color-white);
  text-transform: uppercase;
  margin: 45px auto 12px;
}

/* tips */
/* tips section */
.tips h2 {
  margin: 1em auto;
  color: var(--color-text);
  font-size: 48px;
  text-transform: uppercase;
}
.tips .tips-track {
  padding: 0 13px;
  column-gap: 26px;
  counter-reset: tip-counter;
}
.tips .tips-track .tip {
  position: relative;
  display: block;
  min-width: 509px;
  height: 313px;
  margin: 0;
  padding: 50px 25px 25px 115px;
  background-color: var(--color-white);
}
.tips .tips-track .tip h3 {
  min-height: 3em;
  font-family: "Avenir", sans-serif;
  font-size: 17px;
  text-align: left;
  line-height: 1.5;
  letter-spacing: normal;
  transform: translateX(0);
  counter-increment: tip-counter;
}
.tips .tips-track .tip h3::before {
  --size: 49px;
  content: counter(tip-counter);
  position: absolute;
  left: calc(-1 * var(--size) - 36px);
  width: var(--size);
  height: var(--size);
  color: var(--color-tan);
  text-align: center;
  font-family: "Analogue", serif;
  font-size: 27px;
  line-height: var(--size);
  border: 1px solid var(--color-overlay);
  border-radius: 50%;
}

.video-filter {
  --box-radius: 30px;
  --label-radius: 1.5em;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: min(984px, 95vw);
  height: 60px;
  border-radius: var(--box-radius);
  border: solid 0.5px #d8d8d8;
  background-color: rgba(255, 255, 255, 0.31);
}
.video-filter > div {
  display: flex;
  padding-right: 5px;
}
.video-filter > div #video-search {
  width: 175px;
  height: 44px;
  margin: 0;
  padding: 11px 13px 11px 15px;
  color: var(--color-overlay);
  border: 1px solid var(--color-overlay);
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.76);
  transition: width 0.4s ease-in-out;
  z-index: 5;
}
.video-filter > div #video-search:focus {
  border-color: var(--color-teal);
  outline: none;
}
.video-filter > div #video-search::placeholder {
  color: var(--color-overlay);
}
.video-filter > div #video-search-label {
  display: inline-block;
  height: 44px;
  width: 45px;
  background-image: url("/assets/img/icon-search.svg");
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -42px;
  z-index: 5;
}
.video-filter > ul {
  display: inline-flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.video-filter > ul > li:first-child span {
  border-radius: var(--box-radius) 0 0 0;
}
.video-filter > ul > li > div {
  position: absolute;
  left: -1px;
  display: block;
  width: calc(100% + 2px);
  max-height: 0;
  overflow: hidden;
  margin-top: unset;
  padding: 0 1.5em 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-overlay);
  border-radius: var(--box-radius);
  opacity: 0;
  z-index: 3;
  transition: max-height 0.4s ease-in-out, opacity 0.15s ease-out;
}
.video-filter > ul > li > div > ul {
  border-bottom: 1px solid var(--color-overlay);
}
.video-filter > ul > li > div > ul li {
  border-radius: 1.5em;
}
.video-filter > ul > li > div > ul li > label {
  padding: 0.5em 1.5em;
  height: 3em;
  display: inline-flex;
  justify-content: start;
  align-items: center;
  font-size: 14px;
  line-height: 1.1;
  border-radius: 1.5em;
}
.video-filter > ul > li > div > ul li > label:hover {
  background-color: var(--color-overlay-bd);
  cursor: pointer;
}
.video-filter > ul > li > div > ul li input[type=checkbox] {
  position: absolute;
  height: 0;
  width: 0;
  border: none;
  outline: none;
  overflow: hidden;
  opacity: 0;
  display: none;
}
.video-filter > ul > li > div > ul li input:checked + label {
  color: var(--color-white);
  background-color: var(--color-overlay);
}
.video-filter > ul > li > div > ul li > div {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: unset;
  padding: 0 1.5em 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: 0 0 var(--box-radius) var(--box-radius);
  transition: max-height 0.4s ease-in-out, opacity 0.15s ease-out;
}
.video-filter > ul > li > div > ul li > div > ul {
  margin-top: -57px;
  padding: 60px 1.5em 1em;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--column-count-5), 1fr);
  gap: 0.5em;
}
.video-filter > ul > li > div > ul li > ul {
  position: absolute;
  left: 1em;
  right: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0;
  display: grid;
  border-radius: 0 0 var(--box-radius) var(--box-radius);
}
.video-filter > ul > li > div > ul li.open > span {
  background-color: var(--color-overlay-bd);
  border-bottom: 2px solid var(--color-primary);
}
.video-filter > ul > li > div > ul li.open > div {
  opacity: 1;
  max-height: 100vh;
  margin-top: -58px;
  padding: 63px 1.5em 1em;
  overflow: visible;
  box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.16);
}
.video-filter > ul > li > div > ul li.open ul {
  max-height: 100vh;
}
.video-filter > ul > li > div > ul.multi {
  margin: -63px -1.5em;
  padding: 59px 0 0px;
  grid-template-columns: repeat(var(--column-count-4), 1fr);
  background-color: var(--color-white);
  border-radius: var(--box-radius);
}
.video-filter > ul > li > div > ul.multi > li > span {
  justify-content: center;
}
.video-filter > ul > li ul {
  display: grid;
  grid-template-columns: repeat(var(--column-count-5), 1fr);
  list-style: none;
  padding: 0 1em 0.4em;
  margin: 0 -1em 1em;
  grid-gap: 0.5em;
}
.video-filter > ul > li .selected {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  min-height: 3em;
  margin: 0 -1em 1em;
  padding: 0 0 1ch;
  border-bottom: 1px solid var(--color-overlay);
}
.video-filter > ul > li .selected .label {
  margin: auto 1ch;
  border-bottom: 1px solid var(--color-overlay-bd);
}
.video-filter > ul > li .selected .params {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: auto 1em;
  font-family: "Avenir Medium", sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.video-filter > ul > li .selected .params .param {
  color: var(--color-text);
  position: relative;
  margin: auto 0 auto 3em;
  cursor: pointer;
  justify-self: left;
}
.video-filter > ul > li .selected .params .param::before {
  content: "";
  position: absolute;
  left: -2em;
  top: -0.1em;
  height: 1.5em;
  width: 1.5em;
  background-color: var(--color-text);
  background-image: url("/assets/img/switch-off.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8em;
  border-radius: 50%;
}
.video-filter > ul > li .selected .params .param:hover::before {
  background-color: var(--color-primary);
}
.video-filter span {
  position: relative;
  height: 55px;
  display: flex;
  align-items: center;
  padding: 0 2em 0 2em;
  color: var(--color-primary);
  text-decoration: none;
  line-height: 1.1;
  cursor: pointer;
  z-index: 5;
  transform: translateY(-1px);
  --pseudo-opacity: 0;
}
.video-filter span::after,
.video-filter span + sup {
  position: absolute;
  top: 10px;
  right: 15px;
  content: attr(data-counter);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.2em;
  width: 1.2em;
  padding: 2px;
  font-size: 60%;
  color: var(--color-white);
  background-color: var(--color-teal);
  border-radius: 50%;
  opacity: var(--pseudo-opacity);
}
.video-filter > ul > li > div {
  position: absolute;
  opacity: 0;
  max-height: 0;
  margin-top: unset;
  padding: 0 1.5em 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, opacity 0.15s ease-out;
}
.video-filter > ul > li > div > ul {
  margin-top: -57px;
  padding: 60px 1.5em 1em;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--column-count-5), 1fr);
  gap: 0.5em;
}
.video-filter > ul > li.open > span {
  background-color: var(--color-overlay-bd);
  border-bottom: 2px solid var(--color-primary);
}
.video-filter > ul > li.open > div {
  opacity: 1;
  max-height: 100vh;
  margin-top: -58px;
  padding: 63px 1.5em 1em;
  overflow: visible;
  box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.16);
}
.video-filter > ul > li.open > div::after {
  content: "";
  position: absolute;
  top: 56px;
  display: block;
  height: 0;
  width: 100%;
  border-top: 1px solid var(--color-overlay);
  left: 0;
}
.playlist {
  position: relative;
  width: 330px;
  height: 295px;
  background-color: var(--color-white);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  z-index: 3;
}
.playlist::before, .playlist::after {
  content: "";
  position: absolute;
  display: block;
  background-color: var(--color-background);
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
}
.playlist::before {
  top: -10px;
  left: 5%;
  width: 90%;
  height: 20%;
}
.playlist::after {
  top: -20px;
  left: 10%;
  width: 80%;
  height: 20%;
  z-index: -1;
}
.playlist .title {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--color-text);
  background-color: var(--color-white);
  z-index: 4;
}
.playlist .image {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.playlist .image::after {
  content: attr(data-count) " videos";
  position: absolute;
  bottom: 60px;
  right: 10px;
  padding: 0.25em 0.67em;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 15px;
}
.playlist .info {
  height: 50px;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.playlist .info p {
  margin: 0;
}
.playlist .info p.views {
  color: var(--color-primary);
  font-size: 12px;
  text-transform: uppercase;
}

header label {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  width: 38px;
  margin: 10px 0;
  padding: 0 36px;
  box-sizing: content-box;
  cursor: pointer;
}
header label span {
  display: block;
  height: 2px;
  width: 38px;
  background-color: var(--color-primary);
}
header label::before, header label::after {
  content: "";
  position: absolute;
  display: block;
  height: 2px;
  width: 38px;
  background-color: var(--color-primary);
}
header label::before {
  bottom: 0;
}
header label::after {
  top: 0;
}
header.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  height: 90px;
  transition: all 0.35s ease-in-out, background-color 0.1s ease-out;
}
header.site-header .logo {
  display: flex;
  align-items: center;
  transition: all 0.35s ease-in-out;
  text-decoration: none;
}
header.site-header .logo .icon {
  height: 90px;
  background-color: var(--color-primary);
  -webkit-mask-image: url("/assets/img/logo.svg");
  mask-image: url("/assets/img/logo.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 34.5px 49.8px;
  mask-size: 34.5px 49.8px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 115px;
}
header.site-header .logo .title {
  color: var(--color-primary);
  font-family: "Analogue", sans-serif;
  font-size: 43px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transform: translateX(-0.1em) translateY(-0.1em);
}
header.site-header.active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: var(--full-width);
  height: 70px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(251, 249, 244, 0.9);
  box-shadow: 0 7px 40px 0 rgba(0, 0, 0, 0.16);
  transition: all 0.35s ease-in-out;
  z-index: 50;
}
header.site-header.active .logo {
  transform: scale(0.7);
  transform-origin: 3em;
}
header .static {
  display: flex;
  align-items: center;
  margin-right: 0;
}
header .static ul {
  display: inline-flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav a {
  position: relative;
  display: inline-flex;
  padding: 0.5em 1em;
  color: var(--color-primary);
  text-decoration: none;
}
nav.static li a:not(.button)::after {
  left: 50%;
  right: 50%;
}
nav.static li a.button {
  height: 35px;
}
nav li {
  font-family: Avenir, sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.05em;
}
nav li a:not(.button)::after {
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  left: 0.8em;
  right: calc(100% - 0.8em);
  bottom: 0.43em;
  background-color: var(--color-primary);
  transition: all 0.35s ease-out;
}
nav li a:not(.button):hover::after {
  left: 0.8em;
  right: 0.8em;
}
nav .button {
  font-size: 16px;
  margin-left: 1em;
}
nav.oc-nav {
  min-width: 300px;
}
nav.oc-nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
nav.oc-nav ul:first-child {
  transform: translateX(-15px);
}
nav.oc-nav ul ul {
  max-height: 0;
  overflow: hidden;
  margin-left: 2em;
  margin-top: 0;
  transition: max-height 0.3s ease-out;
}
nav.oc-nav ul ul > li:last-child {
  margin-bottom: 0;
}
nav.oc-nav ul ul a {
  color: var(--color-text);
}
nav.oc-nav a.button {
  display: inline-flex;
  margin: 0.25em 0;
}
nav.oc-nav li {
  position: relative;
}
nav.oc-nav li a:not(.button)::after {
  bottom: 0.25em;
}
nav.oc-nav li label {
  --opener-top: 1.15em;
  --opener-right: 1em;
  --opener-width: 30px;
  --opener-height: 1px;
  --opener-color: var(--color-primary);
  position: relative;
  display: flex;
  padding: 0.5em 1em;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}
nav.oc-nav li label::before {
  content: "";
  position: absolute;
  top: var(--opener-top);
  right: var(--opener-right);
  display: block;
  width: var(--opener-width);
  height: var(--opener-height);
  background-color: var(--opener-color);
  transition: all 0.4s;
}
nav.oc-nav li label::after {
  content: "";
  position: absolute;
  top: var(--opener-top);
  right: var(--opener-right);
  display: block;
  width: var(--opener-width);
  height: var(--opener-height);
  background-color: var(--opener-color);
  transition: transform 0.4s ease-in, opacity 0.1s 0.1s ease;
  transform: rotate(-90deg);
  opacity: 1;
  border-radius: 2px;
}
nav.oc-nav input[type=checkbox] {
  position: absolute;
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}
nav.oc-nav input[type=checkbox]:checked ~ ul {
  max-height: 30vh;
  transition: max-height 0.3s ease-out;
}
nav.oc-nav input[type=checkbox]:checked + label::after {
  transition: transform 0.4s ease, opacity 0.7s 0.2s ease, right 0.1s 0.1s ease;
  transform: rotate(0deg);
  opacity: 0;
}

footer {
  display: flex;
  flex-direction: column;
  height: 990px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 0.9px;
  color: var(--color-primary);
}
footer .container {
  width: var(--inner-width);
  margin: auto;
}
footer .footer-cols {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
footer .footer-cols > div {
  width: 200px;
  text-align: left;
}
footer h4 {
  font-family: "Avenir Heavy", sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  color: inherit;
  transform: translateX(0);
}
footer p {
  color: var(--color-primary);
}
footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Avenir", sans-serif;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.44;
  letter-spacing: normal;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer .social a {
  display: inline-block;
  margin: 25px 15px 0 0;
  height: 34px;
  width: 34px;
}
footer .tagline {
  font-family: "Andale Mono", monospace;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.94;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wide-boxed + footer .container:first-child {
  margin-top: 0;
}

/* heading on all pages */
.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* section full 1920px, no padding */
section.wide-clean {
  width: var(--full-width);
  max-width: var(--outer-width);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
section.wide-clean > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wide-full {
  width: var(--full-width);
  max-width: var(--outer-width);
  margin: 0 auto;
  padding: 0;
}

/* section full 1920px, with padding */
.wide-boxed {
  width: var(--full-width);
  max-width: var(--outer-width);
  margin: 0 auto;
  padding: 80px 61px;
}
.wide-boxed > h1 {
  margin: 0 auto 60px;
}
.wide-boxed > div {
  box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.wide-boxed > div > div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

/* section two fold, with padding */
.two-fold {
  /* case sensitivity hack */
}
.two-fold > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.two-fold > div > div {
  min-height: 626px;
}
.two-fold > div > div h2 {
  font-size: 60px;
  color: var(--color-teal);
}
.two-fold > div > div:first-child {
  width: var(--twofold-content-width);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}
.two-fold > div > div:last-child {
  width: calc(100% - var(--twofold-content-width));
}
.two-fold p {
  width: min(400px, 55%);
  font-size: 20px;
}

/* section three fold, with padding */
.three-fold > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.three-fold .button {
  text-transform: uppercase;
}

/* video gallery (forlob 1) */
.preview-gallery {
  position: relative;
  width: var(--progress-width);
  max-width: var(--progress-width);
  margin: 0 auto 5rem;
  padding-top: 1px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px 26px;
}
.preview-gallery > * {
  -webkit-animation: scale 0.25s ease-in-out;
  -moz-animation: scale 0.25s ease-in-out;
  animation: scale 0.25s ease-in-out;
}

.quote-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 83px;
  color: var(--color-quote);
  background-color: var(--color-quote-bg);
  font-family: "Andale Mono", monospace;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
.quote-bar > * {
  margin: 0;
  padding: 0 1em;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
}
.quote-bar h3 {
  color: inherit;
  font-family: Analogue, sans-serif;
  font-size: 40px;
  letter-spacing: 0.2em;
}
.quote-bar p {
  color: inherit;
  font-family: "Andale Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.quote-bar.primary {
  --color-quote: var(--color-white);
  --color-quote-bg: var(--color-primary);
}
.quote-bar.tan {
  --color-quote: var(--color-white);
  --color-quote-bg: var(--color-tan);
}
.quote-bar.teal {
  --color-quote: var(--color-white);
  --color-quote-bg: var(--color-teal);
}
.quote-bar.gray {
  --color-quote: var(--color-primary);
  --color-quote-bg: var(--color-light-gray);
}

/* blog post */
body.blog-post::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  display: block;
  height: 567px;
  background-color: var(--color-white);
}
body.blog-post blockquote.excerpt, body.blog-post blockquote.excerpt * {
  margin: 50px 0 70px;
  padding: 0;
  font-family: "Avenir", sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.63;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--color-primary);
}
body.blog-post blockquote.pull-qoute {
  /*			display: flex;
  			flex-direction: column-reverse;
  			align-items: center;
  			width: 600px;
  			margin: -100px auto 200px;
  			font-family: 'Analogue', sans-serif;
  			font-size: 49px;
  			font-weight: normal;
  			text-transform: uppercase;
  			letter-spacing: normal;
  			text-align: center;
  			color: var(--color-tan);
  			position: relative;
  			clear: both;
  			height: 500px;*/
}
body.blog-post blockquote.pull-qoute::before {
  /*				content: "";
  				display: block;
  				height: 475px;
  				width: 475px;
  				background-color: var(--color-white);
  				border-radius: 50%;
  				position: absolute;
  				z-index: -1;
  				top: 150px;*/
}
body.blog-post blockquote.pull-qoute::after {
  /*				content: open-quote;
  				font-size: 250px;
  				font-family: 'Analogue', sans-serif;
  				line-height: 1;
  				position: absolute;
  				top: 150px;*/
}
body.blog-post article {
  position: relative;
  width: var(--blog-post-width);
  max-width: var(--blog-post-max-width);
  margin: auto;
  padding-top: 1px;
}
body.blog-post article .back-to-blog {
  color: var(--color-overlay);
  font-size: 14px;
  text-decoration: none;
  margin: 80px 0 53px;
  display: inline-block;
}
body.blog-post article .back-to-blog span {
  line-height: 2;
  display: inline-block;
  transform: translate(0.5em, 0.2em);
}
body.blog-post article h1 {
  font-family: "Avenir Medium", sans-serif;
  font-size: 30px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: var(--color-text);
  transform: translateX(0);
}
body.blog-post article figure {
  margin: 0;
  padding: 0;
}
body.blog-post article figure img {
  width: 100%;
  margin: auto 0;
}
body.blog-post article h2,
body.blog-post article h3,
body.blog-post article h4 {
  margin: 2.5em 0 1.5em;
  font-family: "Avenir", sans-serif;
  font-weight: normal;
  line-height: 1.2;
  text-align: left;
  color: var(--color-primary);
  transform: translateX(0);
}
body.blog-post article h2 {
  font-size: 18px;
}
body.blog-post article h3 {
  font-size: 17px;
}
body.blog-post article h4 {
  font-size: 16px;
}
body.blog-post .author-box {
  width: var(--author-box-width);
  min-height: 315px;
  margin: 100px auto;
  background-color: var(--color-white);
  display: grid;
  grid-template-columns: 335px auto;
  grid-template-areas: "avatar name" "avatar info";
}
body.blog-post .author-box .author-pic {
  grid-area: avatar;
}
body.blog-post .author-box .author-pic img {
  width: 100%;
}
body.blog-post .author-box .author-name {
  grid-area: name;
}
body.blog-post .author-box .author-info {
  grid-area: info;
  padding: 20px 46px;
}
body.blog-post .author-box p {
  margin: 0 0 0.3em;
}
body.blog-post .author-box p.author-name {
  padding: 25px 46px 20px;
  font-family: "Analogue", sans-serif;
  font-size: 32px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
body.blog-post .author-box strong {
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
}
body.blog-post .comment-section {
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 2px;
  padding-bottom: 90px;
}

/* popups */
.popup {
  display: flex;
  width: var(--popup-width);
  height: 796px;
  margin: auto;
  padding: 0;
  box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.16);
  background-color: var(--color-background);
}
.popup .image {
  position: relative;
  width: 514px;
  height: 100%;
  background-image: var(--backdrop-image);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}
.popup .image.login, .popup .image.lostpass {
  background-image: url("/assets/img/popup-bg.jpg");
}
.popup .image.login::after, .popup .image.lostpass::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("/assets/img/overlay-mark.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 199px;
}
.popup .form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 826px;
  box-sizing: border-box;
  padding: 125px;
}
.popup .form form {
  display: block;
  width: 100%;
}
.popup .form .submit {
  display: flex;
  justify-content: center;
  margin: 100px auto 0;
}
.popup .form .submit a {
  margin: 0 1em;
  padding: 0.45em 2.2em;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.05em;
  text-align: center;
}
.popup .form.login .notice {
  display: none;
}
.popup .form.login .notice.error {
  display: block;
  color: var(--color-white);
  background-color: #9c3147;
  padding: 0.3em 1.3em;
}
.popup .form.prefs {
  padding: 70px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.popup .form.prefs h3 {
  font-size: 64px;
}
.popup .form.prefs h5 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0;
}
.popup .form.prefs fieldset {
  position: relative;
  width: 100%;
  padding: 0.35em 0 0.625em;
  margin: 3rem 0 1rem;
  text-align: left;
}
.popup .form.prefs fieldset p {
  margin: 0;
}
.popup .form.prefs legend {
  display: block;
  color: var(--color-primary);
  text-transform: uppercase;
}
.popup .form.prefs label {
  position: relative;
  display: inline-block;
  margin: 0.3em 0 0.3em 0;
  padding: 0.4em 1em 0.4em 2.1em;
  color: var(--color-dark);
  font-size: 14px;
  border: 1px solid var(--color-silver);
  border-radius: 2em;
  cursor: pointer;
}
.popup .form.prefs input[type=checkbox] {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  display: none;
}
.popup .form.prefs input[type=checkbox] + label::before {
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.45em;
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-silver);
  border-radius: 50%;
  opacity: 0.6;
  -webkit-transition: all 0.12s, border-color 0.08s;
  transition: all 0.12s, border-color 0.08s;
}
.popup .form.prefs input[type=checkbox] + label:hover::before {
  background-color: rgba(135, 192, 181, 0.5);
  border-color: var(--color-secondary);
}
.popup .form.prefs input[type=checkbox]:checked + label::before {
  width: 7px;
  top: 0.2em;
  left: 0.8em;
  border-radius: 0;
  opacity: 1;
  border-color: var(--color-secondary);
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  height: 17px;
}
.popup .form.prefs input[type=checkbox]:checked + label:hover::before {
  background-color: transparent;
}
.popup .form.prefs .step {
  margin-top: auto;
  color: var(--color-primary);
  font-family: "Analogue", serif;
  font-size: 2rem;
  letter-spacing: 0.2em;
}
.popup .form.prefs .step sup {
  color: var(--color-silver);
  font-size: 1.2rem;
}
.popup .form.prefs .submit {
  margin-top: 10px;
  text-transform: uppercase;
}
.popup h3 {
  font-size: 44px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.2em;
  word-break: keep-all;
}

/* floating labels */
.floating-label {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  margin-top: 30px;
}
.floating-label > * {
  display: block;
  width: 100%;
  color: var(--color-primary);
  font-size: 16px;
  text-transform: uppercase;
}
.floating-label .text {
  height: 50px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-primary);
  padding: 0;
  margin: 0 auto;
}
.floating-label input:focus-visible {
  outline: none;
}
.floating-label input::placeholder {
  color: var(--color-primary);
}
.floating-label input:required + label:after, .floating-label input:required + label::after {
  content: " *";
}
.floating-label input ~ label,
.floating-label input + label,
.floating-label select + label,
.floating-label textarea + label {
  position: absolute;
  top: 0.85em;
  left: 0;
  transition: all 0.3s ease;
  opacity: 0;
}
.floating-label input:not(:placeholder-shown) ~ label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:not(:placeholder-shown) + label {
  font-size: 80%;
  transform: translate3d(0em, -2em, 0);
  opacity: 1;
}
.floating-label textarea.text {
  height: 6em;
  padding-top: 1em;
}

/* form options */
.form-opts {
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
  text-transform: uppercase;
  color: var(--color-primary);
}
.form-opts label {
  cursor: pointer;
}
.form-opts a {
  color: var(--color-primary);
  text-decoration: none;
}

/* animated checkbox */
.fancy-check {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.fancy-check + label {
  display: block;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fancy-check + label svg {
  pointer-events: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  margin: 0;
  padding: 0;
  transform: translateY(-4px);
}
.fancy-check + label svg path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 101;
  transition: all 350ms cubic-bezier(1, 0, 0.37, 0.91);
}
.fancy-check:checked + label svg path {
  stroke-dashoffset: 0;
}
.oc-menu {
  position: fixed;
  top: 0;
  right: 0;
  max-width: 450px;
  width: 100vw;
  height: 100vh;
  padding: 160px 0 5vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-background);
  box-shadow: -7px 0 40px rgba(0, 0, 0, 0.16);
  transition: all 0.4s ease-in-out;
}
.oc-menu button.mfp-close {
  position: absolute;
  top: 21px;
  right: 34px;
}

.comment,
.comments {
  width: var(--inter-width);
  max-width: var(--blog-comment-width);
  margin: 50px auto 92px;
  color: var(--color-primary);
  font-family: "Avenir Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.comment-label,
.comments-label {
  color: var(--color-primary);
  font-weight: 600;
}

.comments-label {
  transform: translateX(-1em);
  border-bottom: 1px solid var(--color-primary);
}

.comment-thread {
  transform: translateX(1em);
  margin-bottom: 41px;
}

.comment-box {
  display: flex;
  width: var(--inter-width);
  max-width: var(--blog-comment-width);
  min-height: 106px;
  height: auto;
  margin: 8px auto;
  background-color: var(--color-white);
}
.comment-box:first-of-type {
  box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.1);
}
.comment-box .user-avatar {
  width: 116px;
  height: 106px;
  background-image: var(--data-avatar);
}
.comment-box .user-data {
  display: grid;
  grid-template-areas: "name . date" "comment comment command";
  width: 100%;
  padding: 11px 22px 12px 29px;
}
.comment-box .user-name {
  grid-area: name;
  text-transform: uppercase;
}
.comment-box .datetime {
  grid-area: date;
  justify-self: end;
  color: var(--color-text);
  text-align: right;
  max-width: 5.5em;
}
.comment-box .command {
  grid-area: command;
  justify-self: end;
  align-self: end;
}
.comment-box .commented {
  grid-area: comment;
  align-self: end;
}

*.add-playlist {
  color: var(--color-primary);
  padding-right: 0.5em;
  transition: all 0.15s ease-out 0.525s;
}
*.add-playlist::after {
  content: "";
  position: absolute;
  left: 0.5em;
  width: 3em;
  height: 2em;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 center;
  mask-position: 0 center;
  top: 0;
  transform: scale(0.8);
  background-color: var(--color-primary);
  -webkit-mask-image: url("/assets/img/icon-playlist.svg");
  mask-image: url("/assets/img/icon-playlist.svg");
}
*.add-playlist + div *:not(label),
*.add-playlist > div *:not(label) {
  opacity: 0;
  transition: opacity 0.2s ease-in-out 0.325s;
}
*.add-playlist + div h5,
*.add-playlist > div h5 {
  margin-bottom: 0;
  color: var(--color-primary);
  align-self: baseline;
  font-size: 17px;
  font-weight: 500;
  font-family: "Avenir Medium", sans-serif;
  z-index: 10;
}
*.add-playlist + div .floating-label,
*.add-playlist > div .floating-label {
  margin-top: 0;
}
*.add-playlist + div a,
*.add-playlist > div a {
  margin: 2em auto 0;
  width: 12em;
}
*.add-playlist.open + div *:not(label),
*.add-playlist.open > div *:not(label) {
  opacity: 1;
  transition: opacity 0.2s ease-in-out 0.325s;
}

.playlist-selector {
  position: relative;
  width: var(--inter-width);
  max-width: 1430px;
  margin: 5rem auto;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-overlay);
  /* playlist selector segment */
  /* playlist commands segment */
}
.playlist-selector > label {
  position: relative;
  display: inline-block;
  color: var(--color-primary);
  margin-right: 4em;
  font-stretch: normal;
  line-height: 2;
  height: 2em;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.35s ease-in-out, border-color 0.25s ease-out;
}
.playlist-selector > label::after {
  content: attr(data-count);
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-white);
  background-color: var(--color-primary);
  transform: translate(0, -10px);
  transition: all 0.35s ease-in-out;
}
.playlist-selector > label:hover {
  color: var(--color-teal);
}
.playlist-selector > label:hover::after {
  background-color: var(--color-teal);
}
.playlist-selector input[type=checkbox],
.playlist-selector input[type=radio] {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
.playlist-selector input[type=checkbox]:checked + label,
.playlist-selector input[type=radio]:checked + label {
  color: var(--color-teal);
  height: 2em;
  border-bottom: 2px solid;
}
.playlist-selector input[type=checkbox]:checked + label::after,
.playlist-selector input[type=radio]:checked + label::after {
  background-color: var(--color-teal);
}
.playlist-selector ul {
  margin: 0 0 0 auto;
  display: flex;
  line-height: 2;
  padding: 0;
  list-style: none;
}
.playlist-selector ul li {
  position: relative;
  padding-left: 3.5em;
  cursor: pointer;
}
.playlist-selector ul li.add-playlist + div,
.playlist-selector ul li.add-playlist > div {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 0;
  overflow: hidden;
  z-index: 9;
  color: initial;
  background-color: var(--color-white);
  right: 0;
  padding: 0 20px 0;
  min-width: 300px;
  box-shadow: var(--shadow-dropdown);
  justify-content: space-evenly;
  transition: max-height 0.325s ease-in 0.2s, padding 0.3s ease-out 0.2s;
  /*					* {
  						&:not(label) {
  							opacity: 0;
  							transition: opacity .2s ease-in-out .325s;
  						}
  					}
  					h5 {
  						color: var(--color-primary);
  						z-index: 10;
  						align-self: baseline;
  						font-size: 17px;
  						font-weight: 500;
  						font-family: 'Avenir Medium', sans-serif;
  					}
  					.floating-label {
  						margin-top: 0;
  					}
  					a {
  						margin: 2em auto 0;
  						width: 12em;
  					}
  					p {
  						line-height: 1.35;
  						text-align: center;
  					}*/
}
.playlist-selector ul li.add-playlist.open + div,
.playlist-selector ul li.add-playlist.open > div {
  max-height: 30vh;
  padding: 10px 20px;
  transition: max-height 0.325s ease-in 0.2s, padding 0.3s ease-out 0.1s;
}
.playlist-selector ul li.add-playlist.open + div *:not(label),
.playlist-selector ul li.add-playlist.open > div *:not(label) {
  opacity: 1;
  transition: opacity 0.2s ease-in-out 0.325s;
}
.playlist-selector ul li.open {
  background: var(--color-white);
  box-shadow: var(--shadow-default);
  transition: all 0.15s ease-out 0s;
}
.playlist-selector ul li::after {
  content: "";
  position: absolute;
  left: 0.5em;
  width: 3em;
  height: 2em;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 center;
  mask-position: 0 center;
  top: 0;
  transform: scale(0.8);
}
.playlist-selector ul li.how-to {
  color: var(--color-tan);
  padding-left: 0;
}
.playlist-selector ul li.how-to a {
  padding-left: 3.5em;
}
.playlist-selector ul li.how-to::after {
  left: 1.5em;
  background-color: var(--color-tan);
  -webkit-mask-image: url("/assets/img/icon-info.svg");
  mask-image: url("/assets/img/icon-info.svg");
  z-index: -1;
}
.playlist-selector ul li > a {
  color: inherit;
  text-decoration: inherit;
}

.commands .add-playlist {
  width: 3em;
  position: relative;
  cursor: pointer;
  /*		+ div {
  			right: -40px;
  			top: 55px;
  		}*/
}
.commands .add-playlist::after {
  background-color: #afafaf;
  transform: scale(1);
  transition: all 0.25s ease-in-out;
}
.commands .add-playlist:hover::after {
  background-color: var(--color-primary);
}
.commands .add-playlist.open::after {
  background-color: var(--color-primary);
}

.current-video {
  position: relative;
  overflow-x: hidden;
}
.current-video .commands {
  position: unset;
  display: flex;
  justify-content: end;
}
.current-video .commands > span {
  position: relative;
  top: -55px;
  right: 40px;
  margin-left: 20px;
}
.current-video .commands .add-playlist + div {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  max-width: 0;
  overflow: hidden;
  z-index: 9;
  color: initial;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 0;
  min-width: 400px;
  height: 100%;
  width: 400px;
  transition: all 0.3s ease-out 0.2s;
  transform: translateX(400px);
}
.current-video .commands .add-playlist + div .button {
  width: 15em;
  padding: 0.5em 1.5em;
}
.current-video .commands .add-playlist + div .button + .button {
  margin-top: 0.5rem;
}
.current-video .commands .add-playlist + div > div {
  width: 90%;
  display: flex;
  flex-direction: column;
}
.current-video .commands .add-playlist + div select {
  color: var(--color-primary);
  text-transform: uppercase;
}
.current-video .commands .add-playlist + div .floating-label input:not(:placeholder-shown) ~ label {
  font-size: 70%;
  transform: translate3d(0em, -0.7em, 0);
}
.current-video .commands .add-playlist + div p {
  font-size: 14px;
}
.current-video .commands .add-playlist.open + div {
  right: 0;
  top: 0;
  bottom: 0;
  max-height: 100vh;
  box-shadow: none;
  transform: translateX(0);
}

.playlist-grid {
  width: fit-content;
  max-width: 1430px;
  margin: 2rem auto;
  display: grid;
  grid-template-columns: repeat(var(--column-count-4), 1fr);
  grid-gap: 36px;
}
.playlist-grid > * {
  -webkit-animation: scale 0.25s ease-in-out;
  -moz-animation: scale 0.25s ease-in-out;
  animation: scale 0.25s ease-in-out;
}

@keyframes scale {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  50% {
    transform: scale(1.01);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.slide-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  font-size: 20px;
  width: 100%;
  padding: 0 61px;
}
.slide-nav .arrow {
  display: block;
  height: 20px;
  width: 20px;
  padding: 15px 20px;
  background-color: var(--color-primary);
  -webkit-mask-image: url("/assets/img/scroll.svg");
  mask-image: url("/assets/img/scroll.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px;
  mask-size: 20px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}
.slide-nav .arrow:hover {
  background-color: var(--color-text);
}
.slide-nav .arrow:active {
  background-color: var(--color-secondary);
}
.slide-nav .arrow.prev {
  transform: rotate(180deg);
}

.trustpilot {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #603d39;
  width: var(--full-width);
  overflow: hidden;
}
.trustpilot > img {
  margin-top: 36px;
}
.trustpilot h2 {
  font-size: 69px;
  margin-top: 45px;
  margin-bottom: 45px;
  padding: 0;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 13.8px;
  text-align: center;
  color: var(--color-text);
}
.trustpilot .testimonials {
  background-color: var(--color-white);
  width: 100%;
  display: flex;
  margin-top: 40px;
}
.trustpilot .testimonial {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 430px;
  margin: 80px 40px;
  text-align: center;
}
.trustpilot .testimonial .date {
  font-size: 20px;
}
.trustpilot .testimonial .title {
  margin-top: 15px;
  margin-bottom: 25px;
  font-size: 24px;
  color: #3B9386;
  text-transform: uppercase;
}
.trustpilot .testimonial .teaser {
  font-size: 20px;
  color: var(--color-text);
  margin-bottom: 1em;
  min-height: 4em;
}
.trustpilot .testimonial .name {
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 16px;
}
.trustpilot-track {
  display: flex;
}

.selected-topic {
  margin-top: -8px;
  padding: 60px 0;
  --color: var(--color-teal);
  border-top: 6px solid rgba(0, 0, 0, 0.02);
}
.selected-topic .selected {
  color: var(--color);
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
}
.selected-topic h2 {
  margin-bottom: 1em;
  color: var(--color);
  font-size: 60px;
}
.selected-topic .videolibs-item {
  min-width: 536px;
  max-width: 536px;
  height: 607px;
  display: grid;
  grid-template-areas: "title" "preview" "summary" "cta";
  --padding: 40px;
  padding: 0 calc(var(--padding) / 2) var(--padding);
}
.selected-topic .videolibs-item .image {
  height: 297px;
  margin: 0 calc(var(--padding) / 2 * -1);
}
.selected-topic .videolibs-item .title {
  display: flex;
  align-items: center;
  height: 75px;
  margin: 0;
  padding: calc(var(--padding) / 3) 0;
  font-size: 17px;
}
.selected-topic .videolibs-item .summary {
  height: 90px;
}
.selected-topic .videolibs-item .cta {
  height: 85px;
}

.topic-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 50px;
  width: var(--library-width);
  max-width: var(--library-width);
  margin: auto;
}

/* related posts */
.related-posts {
  background-color: var(--color-overlay);
  margin: 0;
  padding: 60px 0 0;
}
.related-posts h3 {
  color: var(--color-text);
}
.related-posts .blog-roll {
  width: 100%;
  overflow-x: hidden;
  padding: 60px 0;
}
.related-posts .blog-roll::after {
  top: 50%;
}
.related-posts .blog-roll-track {
  display: flex;
  width: auto;
  column-gap: 2em;
}
.related-posts .blog-roll-track .post-excerpt {
  max-width: 503px;
  min-width: 503px;
}

/* find video section */
.find-video h2 {
  font-size: 128px;
}
.find-video .find {
  justify-content: space-evenly;
  background-color: #f5f4f2;
}
.find-video .find div {
  text-align: left;
  width: max(78%, 400px);
}
.find-video .find div.title {
  width: 100%;
}
.find-video .find div.submit {
  text-align: center;
}
.find-video .find p {
  font-family: "Avenir Medium", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.find-video .find p.subheading {
  color: var(--color-primary);
  text-align: center;
  font-size: 20px;
}
.find-video .find ul {
  color: var(--color-primary);
  font-size: 18px;
}
.find-video .find li {
  margin-left: 1em;
  line-height: 1.67;
  padding-left: 0.5em;
}

.hp-heading {
  width: var(--full-width);
  max-width: var(--outer-width);
  height: 906px;
  margin: 0 auto;
  align-items: stretch;
  background-image: url("/assets/img/hp-heading-bg.png");
  background-repeat: no-repeat;
  background-position: center bottom;
}
.hp-heading h1 {
  font-size: 200px;
  transform: translateX(0.12em);
}
.hp-heading .button {
  font-size: 24px;
}
.hp-heading .tagline {
  margin: 0 auto;
  text-align: center;
  color: var(--color-primary);
  font-family: Avenir, sans-serif;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}
.hp-heading .call2action {
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  height: 510px;
  padding-top: 160px;
}
.hp-heading .call2action > div {
  width: 350px;
  text-align: center;
}
.hp-heading .call2action > div h3 {
  font-size: 48px;
}
.hp-heading .call2action > div hr {
  width: 227px;
  border-top: 1px solid var(--color-primary);
  background-color: transparent;
  height: 0;
  margin: 30px auto;
}
.hp-heading .call2action > div p {
  color: var(--color-primary);
  font-family: "Avenir", sans-serif;
  font-size: 16px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  max-width: 13em;
  margin: 1em auto;
}

/* homepage carousel section */
section.slider {
  display: flex;
  margin: 0 0 -2px;
}
section.slider .slide-track {
  display: flex;
}
section.slider figure {
  display: inline-flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 550px;
  margin: 50px 15px;
  text-align: center;
  font-size: 20px;
}
section.slider figure img {
  box-shadow: var(--shadow-default);
  width: 100%;
}
section.slider .slider-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(168, 77, 43, 0.5);
}

/* try us section */
.try-us > div.prov {
  padding: 0 0;
  text-align: left;
}
.try-us > div.prov h2 {
  text-align: left;
  font-size: 128px;
}
.try-us > div.prov p {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  transform: translateX(1em);
}
.try-us > div.prov ul {
  list-style: disc;
  margin: 5em 0;
}
.try-us > div.prov li {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.63;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.88em;
  padding-left: 1.88em;
}
.try-us > div.prov .submit {
  text-align: center;
  margin-bottom: 2rem;
}
.try-us > div.prov .button {
  width: auto;
  padding: 0.5em 2.5em;
}
.try-us > div.namaste {
  min-height: 905px;
}
.try-us > div.namaste p {
  margin-top: 165px;
}
.try-us > div:last-child p {
  font-size: 24px;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.45em;
  text-align: center;
}
.try-us > div:last-child p::before, .try-us > div:last-child p::after {
  content: "·";
  display: inline-block;
  padding: 0 0.3em;
  font-size: 2.5em;
  line-height: 0;
  transform: translateY(0.175em);
}

/* online universe section */
.online-univers {
  border-top: 6px solid var(--color-tan);
  border-bottom: 6px solid var(--color-tan);
  margin: 0 auto 43px;
}
.online-univers > div:first-child {
  height: 870px;
  margin: 0;
}
.online-univers > div:last-child {
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.online-univers > div:last-child h2 {
  font-family: "Analogue", sans-serif;
  font-size: 86px;
  font-weight: normal;
  letter-spacing: 0.2em;
}
.online-univers > div:last-child h2 span {
  font-family: "Avenir", sans-serif;
  font-size: 28%;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.45em;
}
.online-univers > div:last-child h2 + div {
  color: #afafaf;
  font-family: "Avenir", sans-serif;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
}
.online-univers > div:last-child p {
  margin: 82px auto 97px;
  font-family: "Avenir Medium", sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
}
.online-univers .commands {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.online-univers .button {
  width: 224px;
  text-transform: uppercase;
}

/* join in section */
.vaer-med.two-fold > div > div {
  height: 626px;
  justify-content: center;
}
.vaer-med.two-fold > div > div:first-child h2 {
  font-size: 86px;
  color: var(--color-secondary);
}
.vaer-med.two-fold > div > div:first-child p {
  margin: 50px auto;
  color: var(--color-text);
  font-size: 20px;
}
/* the team section (middle box) */
.dit-team {
  padding: 100px 124px;
}
.dit-team p {
  font-size: 20px;
}

/* news section */
.nyhed > div {
  height: 822px;
}
.nyhed > div:first-child {
  margin: 0;
}
.nyhed > div:last-child {
  padding: 100px 139px;
  justify-content: space-between;
}
.nyhed > div:last-child h2 {
  color: var(--color-text);
  font-size: 128px;
  font-weight: normal;
  letter-spacing: 0.2em;
}
.nyhed > div:last-child p {
  font-size: 20px;
  color: var(--color-text);
}

.blog-heading {
  padding-top: 75px;
}
.blog-heading h1 {
  font-size: 128px;
  margin-bottom: 143px;
}

.blog-archive {
  width: var(--inter-width);
  max-width: var(--blog-archive-width);
  margin: auto;
  /*padding-top: 143px;*/
  display: grid;
  gap: 50px 40px;
  grid-template-columns: repeat(var(--column-count-3), 1fr);
}

.post-excerpt {
  display: flex;
  flex-direction: column;
  /*width: 503px;*/
  /*margin-bottom: 59px;*/
  background-color: var(--color-white);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.16);
}
.post-excerpt .featured-img {
  display: block;
  background-image: var(--featured-img);
  height: 276px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.post-excerpt .teaser {
  padding: 30px 35px 25px;
  display: grid;
  grid-template-areas: "title title title" "excerpt excerpt excerpt" "author author published";
  grid-template-rows: auto;
  text-align: left;
}
.post-excerpt .teaser h2.title {
  grid-area: title;
  width: 100%;
  color: var(--color-text);
  font-family: "Avenir Medium", sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  min-height: 3em;
  transform: translateX(0);
}
.post-excerpt .teaser h2.title a {
  color: inherit;
  text-decoration: inherit;
}
.post-excerpt .teaser p.excerpt {
  grid-area: excerpt;
  color: var(--color-text);
  min-height: 6em;
  font-size: 18px;
  line-height: 1.44;
}
.post-excerpt .teaser p.excerpt a {
  color: inherit;
  text-decoration: inherit;
}
.post-excerpt .teaser p.author {
  grid-area: author;
}
.post-excerpt .teaser p.published {
  grid-area: published;
  justify-self: end;
}
.post-excerpt .teaser p.author a, .post-excerpt .teaser p.published a {
  font-size: 12px;
  text-transform: uppercase;
}
.post-excerpt .teaser a {
  color: var(--color-primary);
  text-decoration: none;
}

.post-latest {
  width: 100%;
  flex-direction: var(--post-latest-dir);
  /*height: 569px;*/
  grid-column: 1/-1;
}
.post-latest > * {
  width: 50%;
}
.post-latest .featured-img {
  width: 50%;
  height: 100%;
}
.post-latest .teaser {
  padding: 45px 55px 55px 65px;
  display: grid;
  grid-template-areas: "latest latest latest" "title title title" "excerpt excerpt excerpt" "author author published";
  grid-template-rows: auto;
}
.post-latest .teaser .latest-article {
  grid-area: latest;
  font-family: "Avenir Roman", sans-serif;
  font-size: 16px;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 1.63;
  letter-spacing: normal;
  text-align: left;
  color: var(--color-tan);
  margin-bottom: 4em;
}
.post-latest .teaser h2.title {
  padding-right: 50px;
  min-height: 5em;
  font-size: 30px;
}
.post-latest .teaser p.excerpt {
  min-height: 9em;
  color: var(--color-dove);
  font-size: 16px;
}

.trial-heading {
  width: var(--full-width);
  max-width: var(--outer-width);
  height: 1119px;
  margin: 0 auto;
}
.trial-heading > div:first-child p {
  color: var(--color-text);
  font-family: "Avenir Medium", sans-serif;
}
.trial-heading > div:first-child form {
  margin: 100px auto 0;
  text-align: left;
}
.trial-heading > div:first-child form .submit {
  text-align: center;
  margin-top: 50px;
}
.trial-heading > div:first-child form .button {
  font-family: "Avenir Heavy", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}
.trial-heading > div:last-child.forener {
  position: relative;
}
.trial-heading > div:last-child.forener::after {
  content: "";
  position: absolute;
  display: flex;
  height: 200px;
  width: 200px;
  background-image: url("/assets/img/overlay-mark.png");
  background-position: center;
  background-size: 100%;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
}
.trial-heading > div:last-child.forener h1 {
  margin-top: 67px;
  color: var(--color-text);
}
.trial-heading > div:last-child.forener p {
  margin-top: 5px;
}

.courses .intro {
  display: flex;
  align-items: center;
  width: 848px;
  min-height: 5.7em;
  margin: 0 auto 1rem;
  text-align: center;
}
.courses .selector {
  display: flex;
  justify-content: space-evenly;
  width: 500px;
  margin: 30px auto;
}
.courses .selector a.button {
  text-transform: uppercase;
}
.courses .selector a.button.active {
  color: var(--color-white);
  background-color: var(--el-color);
}
.courses h4 {
  margin: 66px auto 25px;
}

.courses-roll {
  padding: 8px 8px 52px;
}

.courses-track {
  width: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  grid-gap: 30px 45px;
  grid-auto-rows: minmax(289px, 289px);
  grid-auto-flow: column dense;
}
.courses-track a.preview {
  display: block;
  position: relative;
}
.courses-track a.preview:hover .title {
  color: var(--color-white);
  background-color: var(--color-teal);
}
.courses-track a.preview img {
  width: 100%;
  height: 100%;
}
.courses-track a.preview.full {
  width: 529px;
  grid-column-end: span 2;
  grid-row-end: span 2;
}
.courses-track a.preview.full:hover .title {
  background-color: var(--color-primary);
}
.courses-track a.preview.small {
  width: 252px;
  height: 289px;
}
.courses-track a.preview .title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 66px;
  line-height: 1;
  background-color: var(--color-white);
  color: var(--color-primary);
  text-transform: uppercase;
  text-align: center;
  padding: 0 0.5em;
}

.video-libraries {
  background-color: var(--color-overlay);
  margin: 0;
  padding: 60px 0 0;
}
.video-libraries h3 {
  color: var(--color-text);
  font-size: 49px;
}
.video-libraries .videolibs-roll {
  width: 100%;
  overflow-x: hidden;
  padding: 60px 0 115px;
}
.video-libraries .videolibs-roll::after {
  top: unset;
  bottom: -40px;
}
.video-libraries .videolibs-track {
  display: flex;
  width: auto;
  column-gap: 2em;
}

.videolibs-item {
  display: grid;
  background-color: var(--color-white);
}
.videolibs-item .image {
  grid-area: preview;
  background-image: var(--featured-img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.videolibs-item .title {
  grid-area: title;
  color: var(--color-primary);
  font-family: "Avenir", sans-serif;
  font-size: 20px;
  font-weight: normal;
  text-transform: uppercase;
}
.videolibs-item .summary {
  grid-area: summary;
}
.videolibs-item .cta {
  grid-area: cta;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
}
.videolibs-item .count,
.videolibs-item .duration {
  color: var(--color-teal);
  font-family: "Analogue", serif;
  font-size: 80px;
  line-height: 0.7;
}
.videolibs-item .count::after,
.videolibs-item .duration::after {
  content: attr(data-what);
  display: inline-block;
  font-family: "Avenir", sans-serif;
  font-size: 16px;
  vertical-align: text-top;
  transform: translateY(15px);
}
.videolibs-item .content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.video-libraries .videolibs-item {
  grid-template-areas: "preview title" "preview summary" "preview cta";
  min-width: 812px;
  max-width: 812px;
  height: 412px;
}
.video-libraries .videolibs-item .image {
  min-width: 260px;
  max-width: 260px;
}
.video-libraries .videolibs-item .title {
  padding: 0 40px;
}
.video-libraries .videolibs-item .summary {
  padding: 40px 40px 0;
}
.video-libraries .videolibs-item .cta {
  padding: 0 40px 40px;
}

.course-single {
  /*	background-image: url("/assets/img/course-bd.jpg");
  	background-position: center top;
  	background-repeat: no-repeat;
  	background-size: 100% auto;*/
  padding-top: 150px;
}
.course-single > article,
.course-single > div {
  position: relative;
  width: var(--progress-width);
  max-width: var(--progress-width);
  margin: 0 auto 1rem;
  padding-top: 1px;
}
.course-single > article.standout,
.course-single > div.standout {
  margin: 3rem auto 4rem;
}
.course-single > article h2,
.course-single > div h2 {
  margin: 2.5em 0 1.5em;
  font-family: "Avenir", sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.2;
  text-align: left;
  color: var(--color-primary);
  transform: translateX(0);
}
.course-single > article h3,
.course-single > div h3 {
  margin: 2em 0 1em;
  font-family: "Avenir", sans-serif;
  font-size: 17px;
  font-weight: normal;
  line-height: 1.2;
  text-align: left;
  color: var(--color-primary);
  transform: translateX(0);
}
.course-single > article p,
.course-single > div p {
  color: var(--color-text);
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
}
.course-single > article p.notice,
.course-single > div p.notice {
  margin: 2em 0;
  color: var(--color-dove);
  font-size: 14px;
}
.course-single section.advice-box, .course-single section.pitch-box {
  width: var(--progress-width);
  max-width: var(--progress-width);
}
.course-single h1 {
  font-size: 64px;
}
.course-single h2 {
  font-size: 32px;
}
.course-single .details h3 {
  margin: 2.5em 0 0.2em;
  font-family: "Avenir", sans-serif;
  font-size: 17px;
  font-weight: normal;
  line-height: 1.2;
  text-align: left;
  color: var(--color-primary);
  transform: translateX(0);
}
.course-single .intro {
  flex-direction: column;
  width: var(--progress-width);
  margin: 20px auto 2rem;
  text-align: left;
  border-bottom: 1px solid var(--color-primary);
}
.course-single figure {
  width: var(--progress-width);
  margin: 0 auto;
}

.details {
  width: 100%;
  margin: 32px auto;
}
.details p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.details .label {
  font-size: 18px;
  color: var(--color-primary);
}
.details .label::after {
  content: ":";
}

/* daily progress accordion */
#daily-progress {
  --max-width: var(--progress-width);
  --tab-min-height: 127px;
  --tab-padding: 16px 42px 0;
  --tab-border-width: 1px;
  --tab-border-color: var(--color-primary);
  --opener-width: 21px;
  --opener-height: 3px;
  --opener-right: 10px;
  --opener-top: 46px;
  --opener-color: var(--color-teal);
  --opener-transition: transform 0.4s ease-in, opacity 0.1s 0.1s ease;
  --content-transition: transform 0.4s ease-in, opacity 0.1s 0.1s ease;
}

/* teachers */
.teachers h1 {
  font-size: 128px;
}
.teachers .heading p {
  width: min(606px, 90vw);
  margin: 4rem auto;
  text-align: center;
}

.person-card {
  --line-count: 2;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.16);
  text-decoration: none;
  color: var(--color-text);
  --transition: all .25s ease-in;
  transition: var(--transition);
  width: var(--person-card-width);
}
.person-card * {
  transition: var(--transition);
}
.person-card .image {
  width: var(--person-card-width);
  height: 373px;
}
.person-card .info {
  padding: 27px 14px 5px;
}
.person-card .info .name {
  margin: 0;
  font-family: "Analogue", sans-serif;
  font-size: 30px;
  font-weight: normal;
  text-transform: uppercase;
}
.person-card .info p {
  display: -webkit-box;
  -webkit-line-clamp: var(--line-count);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.person-card:hover {
  background-color: #6EB3A5;
  transition: var(--transition);
}
.person-card:hover * {
  color: var(--color-white);
  transition: var(--transition);
}
.person-card:hover .image {
  background-color: #6EB3A5;
  opacity: 0.5;
}

/* teacher dedicated page */
.teacher .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 70px 0;
  color: var(--color-text);
}
.teacher .heading > * {
  width: var(--inter-width);
  max-width: var(--teacher-width);
  text-align: center;
}
.teacher .heading * {
  color: var(--color-text);
}
.teacher .heading h1 {
  font-size: 64px;
}
.teacher .heading .avatar {
  width: 210px;
  height: 210px;
  margin: 30px auto;
  background-position: center;
  background-size: auto 100%;
  border-radius: 50%;
}
.teacher .heading a {
  font-size: 20px;
  text-decoration: none;
}
.teacher .heading .video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.teacher .heading .summary * {
  text-align: left;
  margin: 50px 0 30px;
  padding: 0;
  color: var(--color-primary);
  font-size: 24px;
  text-transform: uppercase;
}
.teacher .heading .bio {
  text-align: left;
}

/* teachers grid */
.teachers-grid {
  width: fit-content;
  max-width: var(--teachers-width);
  margin: 5rem auto;
  display: grid;
  grid-template-columns: repeat(var(--column-count-3), 1fr);
  grid-gap: 43px 46px;
}
.teachers-grid .person-card {
  --line-count: 2;
}

/* more videos from the same teacher roll */
.more-videos h4 {
  margin-bottom: 23px;
  font-family: "Analogue", serif;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.more-videos .videos-roll {
  margin-bottom: 55px;
}
.more-videos .videos-roll .video {
  min-width: 724px;
  height: 631px;
}
.more-videos .videos-roll .title {
  align-items: center;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--color-primary);
}
.more-videos .videos-roll .info {
  display: initial;
  padding: 5px 15px 20px;
  text-align: center;
}
.more-videos .videos-roll .info p {
  text-align: initial;
}

.videos-track {
  padding: 32px 0 55px;
  column-gap: 32px;
}

/* more teachers roll */
.more-teachers {
  background-color: var(--color-overlay);
  padding: 40px 0 0;
}
.more-teachers h2 {
  color: var(--color-text);
}

.teachers-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: auto;
  column-gap: 2em;
  padding: 40px 0;
}

.page-food {
  --color: var(--color-teal);
}
.page-food .heading h1 {
  color: var(--color);
}
.page-food .heading h1 span {
  display: block;
  font-size: 25%;
  letter-spacing: 0.2em;
}
.page-food .heading p {
  width: var(--inter-width);
  max-width: 1100px;
  margin: 1rem auto 4rem;
  font-size: 20px;
  text-align: center;
}
.page-food .dishes {
  position: relative;
  width: var(--inter-width);
  max-width: var(--foodgrid-width);
  margin: 1rem auto;
}
.page-food .dishes::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 31px;
  background-color: var(--color-overlay-bd);
}
.page-food .dishes h3 {
  color: var(--color);
  font-size: 32px;
  margin: 5rem auto;
}
.page-food .dishes .slide-nav {
  display: flex;
  justify-content: space-between;
  margin: 0 0 -50px;
  padding: 0;
}
.page-food .dishes .arrow {
  width: 20px;
  display: block;
  height: 20px;
  z-index: 10;
  cursor: pointer;
}

.favorite-food h2 {
  margin: 1em auto;
  font-size: 48px;
}

.category-roll {
  margin: 0 40px;
  overflow-x: hidden;
}
.category-roll::after {
  content: none;
}

.category-track {
  width: auto;
  display: flex;
  padding: 0;
  color: var(--color-primary);
  list-style: none;
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
}
.category-track li {
  display: inline-flex;
  white-space: nowrap;
  padding: 0.5em 1em;
}
.category-track li label {
  cursor: pointer;
}
.category-track li input[type=radio] {
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}
.category-track li input[type=radio]:checked + label {
  color: var(--color-teal);
  border-bottom: 1px solid;
}

/* section dish of the week */
.dotw > div {
  flex-direction: row;
  background-color: var(--color-white);
  box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.1);
}
.dotw > div p.strapline {
  text-transform: uppercase;
  margin: 4em 0 0;
  font-size: 18px;
}
.dotw > div .recipe-info {
  display: flex;
  margin: 0 0 1rem;
  flex-direction: row;
  justify-content: space-evenly;
}
.dotw > div .picto {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  color: var(--color-overlay);
}

/* page chef/food expert */
.food-expert .heading {
  --color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.food-expert .heading h1 {
  color: var(--color-text);
  font-size: 64px;
}
.food-expert .heading .social {
  margin: 25px auto;
}
.food-expert .heading .social a {
  color: var(--color);
  text-decoration: none;
  display: inline-flex;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.food-expert .heading .social a:hover {
  background-color: var(--color-text);
}
.food-expert .heading .website {
  margin: 0 auto;
}
.food-expert .heading .website a {
  color: var(--color);
  font-size: 20px;
  text-decoration: none;
}
.food-expert .heading .chef-info {
  width: var(--inter-width);
  max-width: var(--progress-width);
  display: flex;
  flex-direction: row;
  background-color: var(--color-white);
}
.food-expert .heading .chef-info .image {
  width: 335px;
}
.food-expert .heading .chef-info .image img {
  width: 335px;
}
.food-expert .heading .chef-info .bio {
  padding: 28px 35px;
  text-align: left;
  line-height: 1.7;
}
.food-expert .dishes-grid {
  max-width: var(--progress-width);
  grid-template-columns: repeat(var(--column-count-3), 1fr);
  margin: auto;
}
.food-expert .dishes-grid .dish-card {
  width: 337px;
  height: 436px;
}

/* recipe page */
.page-recipe {
  background-image: url("/assets/img/recipe-bd.svg");
  background-repeat: repeat-x;
  background-position: left 55vh;
  background-size: 105%;
}
.page-recipe h1 {
  color: var(--color-teal);
  width: var(--full-width);
  max-width: 880px;
  margin: 10rem auto 0;
}

.recipe {
  width: var(--inter-width);
  max-width: var(--recipe-width);
  margin: 2rem auto;
}
.recipe .recipe-card.full {
  position: relative;
  width: var(--inter-width);
  max-width: var(--recipe-width);
  margin: 2rem auto;
  background-color: var(--color-white);
}
.recipe .recipe-card.full .chef-card {
  position: absolute;
  right: 0;
  top: 1.5rem;
  width: 166px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 35px;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.16);
  transform: translateX(50%);
}
.recipe .recipe-card.full .chef-card > a > img,
.recipe .recipe-card.full .chef-card > img {
  width: 100%;
  height: auto;
}
.recipe .recipe-card.full .chef-card h3 {
  margin: 3rem auto 1.5rem;
  color: var(--color-text);
  font-size: 30px;
  letter-spacing: normal;
}
.recipe .recipe-card.full .chef-card h3 a {
  color: inherit;
  text-decoration: inherit;
}
.recipe .recipe-card.full .chef-card h3 a:hover {
  color: var(--color-teal);
}
.recipe .recipe-card.full .chef-card .social {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0;
  margin: 0 0 1rem;
}
.recipe .recipe-card.full .chef-card .social a {
  display: block;
  margin: 5px;
}
.recipe .recipe-card.full .chef-card .website {
  display: block;
  color: var(--color);
  text-align: center;
  font-family: "Avenir Medium", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
.recipe .recipe-card.full .chef-card .website:hover {
  color: var(--color-teal);
}
.recipe .recipe-card.full .chef-card a {
  transition: color 0.25s ease-in-out;
}
.recipe .recipe-card.full .recipe-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.recipe .recipe-card.full .recipe-info .picto {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  margin: 0 1rem 0 0;
  color: var(--color-overlay);
}
.recipe .recipe-card.full .recipe-summary {
  padding: 0 2rem 2rem;
  margin: 0;
  font-size: 1.25rem;
}
.recipe .recipe-card.full .recipe-summary p {
  margin: 0;
}
.recipe .recipe-card.full .heart {
  width: 46px;
  height: 46px;
  background-color: var(--color-overlay);
}
.recipe .preparation {
  padding: 0 0 30px 75px;
  border-bottom: 1px solid var(--color-tan);
  text-align: left;
}
.recipe .preparation h3 {
  margin: 2em auto 1em;
  color: var(--color-text);
  font-size: 30px;
  text-align: left;
}
.recipe .preparation h3::before {
  content: "";
  position: absolute;
  left: -75px;
  top: -15px;
  display: block;
  width: 70px;
  height: 60px;
  background-position: left;
  background-repeat: no-repeat;
}
.recipe .preparation ul {
  padding: 0;
  list-style: none;
}
.recipe .preparation ol {
  padding: 0;
  list-style-position: inside;
}
.recipe .preparation li {
  margin-bottom: 1em;
}
.recipe .ingredients h3::before {
  background-image: url("/assets/img/icon-recipe-ingredients.svg");
}
.recipe .instructions h3::before {
  background-image: url("/assets/img/icon-recipe-instructions.svg");
}
.recipe .tip h3 {
  font-family: "Avenir", sans-serif;
  text-align: left;
  letter-spacing: normal;
  transform: none;
  margin: 3em 0 0;
  font-size: 17px;
}
.recipe .tip h3::after {
  content: ":";
}

.recipe-card.full div:nth-child(3) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 32px;
}

.help-center h1 {
  font-size: 64px;
  margin-top: 170px;
}

/* faq drill-down accordion */
#help-faq {
  --max-width: var(--help-center-width);
  --tab-min-height: 65px;
  --tab-padding: 16px 42px 0;
  --tab-border-width: 4px;
  --tab-border-color: var(--color-primary);
  --opener-width: 21px;
  --opener-height: 3px;
  --opener-right: 10px;
  --opener-top: 14px;
  --opener-color: var(--color-teal);
  --opener-transition:
  				transform 0.4s ease-in,
  				opacity 0.1s 0.1s ease;
  --content-transition:
  				transform 0.4s ease-in,
  				opacity 0.1s 0.1s ease;
  margin: 250px auto 100px;
}
#help-faq > .tab > label {
  font-size: 1.5rem;
}
#help-faq > .tab > .tab-content > .tab {
  background-color: #f7f7f7;
  border-bottom: none;
}
#help-faq > .tab > .tab-content > .tab > label {
  color: var(--color-text);
  font-family: "Avenir Medium", sans-serif;
  font-size: 18px;
}
#help-faq > .tab > .tab-content > .tab > label::before, #help-faq > .tab > .tab-content > .tab > label::after {
  background-color: var(--color-text);
}
#help-faq > .tab > .tab-content > .tab .tab-content {
  color: var(--color-subheading);
  font-size: 16px;
}
#help-faq > .tab > .tab-content > .tab .tab-content p {
  color: var(--color-subheading);
  font-size: 16px;
}
#help-faq > .tab input:checked ~ .tab-content {
  padding: 20px 0;
}

.page-discounts .heading {
  padding-top: 40px;
  text-align: center;
}
.page-discounts .heading h1 {
  font-size: var(--regular-h1-size);
}
.page-discounts .heading p {
  margin: 3em auto 6em;
  font-size: var(--heading-p-size);
}

.shops-grid {
  width: fit-content;
  max-width: var(--blog-archive-width);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(var(--column-count-3), 1fr);
  grid-gap: 50px;
}

.discount-shops {
  padding: 1px 0;
  background-color: var(--color-overlay);
}
.discount-shops h2 {
  margin: 1em auto;
  color: var(--color-text);
  font-size: 49px;
}

.shops-track {
  padding: 0 0 40px;
  column-gap: 40px;
}

.page-discount-shop h1 {
  font-size: 64px;
}
.page-discount-shop .heading {
  width: var(--inter-width);
  max-width: var(--blog-post-width);
  margin: 0 auto;
  text-align: center;
}
.page-discount-shop .heading p {
  color: var(--color-subheading);
  font-size: 20px;
}
.page-discount-shop article {
  width: var(--inter-width);
  max-width: var(--blog-post-width);
  margin: 0 auto;
}
.page-discount-shop article figure {
  margin: 2rem 0;
}
.page-discount-shop article figure img {
  width: 100%;
}
.page-discount-shop article h3 {
  margin: 2em 0 1em;
  font-family: "Avenir", sans-serif;
  text-align: left;
  letter-spacing: normal;
  transform: none;
}
.page-discount-shop article p {
  font-size: 16px;
}
.page-discount-shop article p.discount-code {
  text-align: center;
  margin: 5em auto 2.5em;
}
.page-discount-shop article p.website {
  text-align: center;
  margin: 2em auto 5em;
}

/* invite page */
.page-invite h1 {
  font-size: 64px;
}
.page-invite .heading {
  text-align: center;
}
.page-invite .heading p {
  width: min(776px, 90vw);
  margin: 1em auto;
  color: var(--color-dark);
  font-size: 20px;
  text-align: center;
}

.free-month {
  padding: 50px 0;
}
.free-month h4 {
  letter-spacing: normal;
}
.free-month p {
  width: min(414px, 90vw);
  font-size: 18px;
}

/* we support page*/
.page-support .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 2rem auto;
}
.page-support .heading h4 {
  letter-spacing: 0.2em;
}
.page-support .heading p {
  width: min(896px, 90vw);
  color: var(--color-subheading);
  font-size: 20px;
}
.page-support .cause {
  display: flex;
  flex-direction: row;
  width: var(--inter-width);
  max-width: var(--causes-width);
  margin: 50px auto;
  background-color: var(--color-white);
  box-shadow: var(--shadow-default);
}
.page-support .cause .image {
  width: 492px;
}
.page-support .cause .info {
  padding: 50px 65px 25px 75px;
}
.page-support .cause.rev {
  flex-direction: row-reverse;
}
.page-support .cause.rev .info {
  padding: 50px 75px 25px 65px;
}
.page-support .cause h3 {
  width: 16em;
  margin: 0;
  text-align: left;
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  transform: none;
}
.page-support .cause p {
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
  line-height: 1.63;
}

/* logged out page */
.page-logged-out h1 {
  color: var(--color-dark);
  font-size: 64px;
}
.page-logged-out .heading {
  height: calc(100vh - 90px);
  max-height: 938px;
  padding: 40px 0 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-image: url("/assets/img/logged-out-bd.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
}
.page-logged-out .heading h4 {
  margin: 6em auto 10em;
  width: min(20em, 90vw);
  color: var(--color-text);
}

.video-comments {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 57px 5vw 0;
}

.video-comments .video-comment {
  display: flex;
  flex-direction: row;
  box-shadow: var(--shadow-default);
  margin: 0 1em;
  background-color: var(--color-white);
}
.video-comments .video-comment .image {
  width: 327px;
  height: 265px;
  background-image: var(--video-preview);
  background-size: cover;
}
.video-comments .video-comment .comment {
  max-width: 450px;
  margin: 0;
  padding: 23px 23px 23px 61px;
  display: grid;
  grid-template-areas: "eyebrow eyebrow" "title title" "comment comment" "author link";
}
.video-comments .video-comment .eyebrow {
  grid-area: eyebrow;
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--color-overlay);
}
.video-comments .video-comment h3 {
  grid-area: title;
  justify-self: start;
  text-align: left;
  transform: none;
  letter-spacing: normal;
  font-family: "Avenir", sans-serif;
  font-size: 17px;
  font-style: italic;
  width: 100%;
}
.video-comments .video-comment p {
  grid-area: comment;
}
.video-comments .video-comment .author {
  grid-area: author;
  color: var(--color-tan);
  font-style: italic;
  font-family: "Avenir", sans-serif;
  font-weight: normal;
  align-self: end;
}
.video-comments .video-comment .button {
  grid-area: link;
  justify-self: right;
  align-self: end;
}

/* page get started */
.page-get-started h1 {
  font-size: 64px;
}
.page-get-started .heading {
  width: var(--inter-width);
  max-width: 760px;
  margin: 5rem auto 0;
}
.page-get-started .heading p {
  font-size: 20px;
  line-height: 1.3;
}

.wide-boxed.two-fold.tour > div {
  flex-direction: row-reverse;
}
.wide-boxed.two-fold.tour > div h2 {
  font-size: 86px;
  color: var(--color-secondary);
}
.wide-boxed.two-fold.tour > div p {
  width: min(450px, 70%);
  font-size: 20px;
}

.follow-course {
  background-color: var(--color-overlay);
  padding: 40px 0;
  text-align: center;
}
.follow-course > h2 {
  color: var(--color-text);
  font-size: 64px;
}
.follow-course > p {
  color: #242424;
  font-size: 20px;
  width: min(748px, 90vw);
  margin: auto;
}
.follow-course .course-track {
  padding: 40px 0;
  column-gap: 40px;
}

/* popular videos section */
.popular-videos {
  background-color: #ededed;
  padding: 1rem 0;
  overflow-x: hidden;
}
.popular-videos h2 {
  margin: 1em auto;
  color: var(--color-text);
  font-size: 48px;
  text-transform: uppercase;
}
.popular-videos .video {
  margin: 12px;
}

/* Firmayoga */
.page-firmayoga h1 small,
.page-firmayoga h1 span {
  display: block;
  font-size: 64px;
}
.page-firmayoga .heading {
  width: var(--full-width);
  max-width: var(--progress-width);
  margin: 5rem auto;
  text-align: center;
}
.page-firmayoga .heading p {
  width: min(676px, 90vw);
  margin: 1em auto;
  font-size: 20px;
}
.page-firmayoga .pitch-box {
  margin-bottom: 70px;
}
.page-firmayoga .antistress {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background-color: var(--color-overlay-bd);
}
.page-firmayoga .antistress h2 {
  margin: 70px auto;
  color: var(--color-text);
  font-size: 48px;
}
.page-firmayoga .antistress > p {
  margin: 70px auto;
}
.page-firmayoga .antistress > div {
  width: var(--inter-width);
  max-width: var(--stats-width);
  margin: auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 55px;
}

.wide-boxed.three-fold .additional {
  padding: 1rem;
}
.wide-boxed.three-fold .additional p {
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
}

/* stat cards appear in antistress section */
.stat-card {
  height: 444px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-default);
  padding: 20px 35px;
}
.stat-card h3 {
  margin: 0 0 1em;
  text-align: left;
  font-size: 80px;
  transform: translateX(0);
}
.stat-card p {
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

.advantages h2 {
  width: min(900px, 90vw);
  margin: 65px auto;
  color: var(--color-text);
  font-size: 40px;
  letter-spacing: 0.2em;
}
.advantages > div {
  width: var(--inter-width);
  max-width: var(--stats-width);
  height: 589px;
  margin: 0 auto 70px;
  display: flex;
  flex-direction: row;
  background-color: var(--color-white);
}
.advantages > div.rev {
  flex-direction: row-reverse;
  text-align: right;
}
.advantages > div > * {
  width: 50%;
}
.advantages ul {
  list-style: none;
  margin: 0;
  padding: 75px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.advantages ul li {
  color: var(--color-primary);
  font-size: 24px;
  text-transform: uppercase;
}
.advantages ul li strong,
.advantages ul li span {
  display: block;
  font-family: "Avenir Medium", sans-serif;
  font-size: 48px;
  font-weight: 500;
}

/* business contact form */
.contact {
  padding: 5rem 0;
}
.contact h2 {
  color: var(--color-text);
  font-size: 40px;
  width: min(1130px, 90vw);
  margin: auto;
}
.contact .contact-form {
  width: var(--inter-width);
  max-width: var(--contact-width);
  margin: auto;
}
.contact .contact-form .note {
  color: var(--color-primary);
}
.contact .contact-form .button {
  padding: 0 5em;
  font-size: 14px;
  text-transform: uppercase;
}

.clients {
  --color-accent: #6eb3a5;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.clients h2 {
  width: min(1024px, 90vw);
  color: var(--color-accent);
  font-size: 40px;
  letter-spacing: 0.15em;
  margin: 80px auto;
}
.clients .logos {
  display: flex;
  flex-direction: row;
}
.clients .statement {
  width: var(--inter-width);
  max-width: 707px;
  margin-bottom: 6em;
}
.clients .research {
  width: var(--inter-width);
  max-width: var(--blog-post-width);
}
.clients .research h3 {
  color: var(--color-primary);
  text-align: left;
  font-family: "Avenir", sans-serif;
  font-size: 17px;
}
.clients .research h5 {
  font-size: 16px;
  margin-bottom: 0;
}
.clients .research h5 + p {
  margin-top: 0;
}
.clients .research a {
  color: var(--color-accent);
  display: block;
}
.clients .ted-talk {
  width: var(--inter-width);
  max-width: var(--blog-post-width);
  margin: 50px 0 100px;
}
.clients .ted-talk p {
  color: var(--color-primary);
  font-size: 17px;
  text-transform: uppercase;
}
.clients .ted-talk img {
  width: 100%;
}

.page-yogavivo {
  padding-top: 75px;
  text-align: center;
}
.page-yogavivo h3 {
  font-size: 40px;
  margin: 1em auto;
}
.page-yogavivo .live-yoga,
.page-yogavivo .portal,
.page-yogavivo .courses,
.page-yogavivo .values {
  width: var(--inter-width);
  max-width: var(--progress-width);
  margin: 70px auto;
  background-color: var(--color-white);
  padding: 35px 118px;
}
.page-yogavivo .live-yoga p,
.page-yogavivo .portal p,
.page-yogavivo .courses p,
.page-yogavivo .values p {
  font-family: "Avenir Medium", sans-serif;
  font-weight: 500;
}
.page-yogavivo .live-yoga h3 {
  color: var(--color-text);
}
.page-yogavivo .live-yoga p {
  text-align: left;
}
.page-yogavivo .portal {
  display: flex;
  flex-direction: row;
  padding: 40px 80px;
}
.page-yogavivo .portal > div:not(.image) {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: start;
  margin-left: 6rem;
  text-align: left;
}
.page-yogavivo .portal h3 {
  text-align: left;
}
.page-yogavivo .courses h3 {
  color: var(--color-text);
}
.page-yogavivo .values {
  padding: 125px 190px 100px;
}
.page-yogavivo .values h3 {
  color: var(--color-accent);
}
.page-yogavivo .values p {
  max-width: 707px;
  margin: 0 auto 65px;
}
.page-yogavivo .values .button {
  height: 58px;
  border-width: 1px;
}
.page-yogavivo .idea {
  max-width: var(--progress-width);
  margin: 3em auto;
  color: var(--color-primary);
  font-family: "Analogue", serif;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* account pages */
.page-account .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-account .heading h4 {
  color: var(--color-primary);
}
.page-account .heading h4::before, .page-account .heading h4::after {
  content: "·";
  display: inline-block;
  padding: 0 0.3em;
  font-size: 2.5em;
  line-height: 0;
  transform: translate(0.2em, 0.175em);
}
.page-account .heading h4::after {
  transform: translate(-0.2em, 0.175em);
  margin-inside: 0;
}
.page-account .heading p {
  width: min(38em, 90vw);
  color: var(--color-dark);
  font-size: var(--heading-p-size);
  text-align: center;
}
.page-account .preview-gallery {
  width: fit-content;
  max-width: var(--player-width);
  grid-template-columns: repeat(var(--column-count-4), 1fr);
}
.page-account .preview-gallery > p,
.page-account .preview-gallery > a {
  grid-column: 1/-1;
  width: auto;
  text-align: center;
}
.page-account .preview-gallery > p.button,
.page-account .preview-gallery > a.button {
  width: 150px;
  text-align: center;
}

.heading .selector {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 30px auto;
}
.heading .selector a {
  margin: auto 1rem;
}

.explore {
  width: fit-content;
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(var(--column-count-3), 1fr);
  grid-gap: 40px;
  margin: 3.2rem auto;
}
.explore .cta-box {
  aspect-ratio: 20/17;
  width: min(400px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.16);
}
.explore .cta-box h3 {
  font-size: 35px;
}
.explore .cta-box .button {
  min-width: 50%;
}
.explore .cta-box .image {
  width: 100%;
  height: 50%;
}
.explore .cta-box.train {
  background-image: var(--backdrop-image);
}
.explore .cta-box.learn-balance {
  background-image: var(--backdrop-image);
}
.explore .cta-box.cta-h-p {
  padding: 1rem;
  justify-content: flex-start;
}
.explore .cta-box.cta-h-p-b {
  padding: 1rem;
  justify-content: flex-start;
}
.explore .cta-box.cta-h-p-b .button {
  margin-top: auto;
}
.explore .cta-box.cta-i-h-p-b {
  background-color: var(--color-white);
}
.explore .cta-box.cta-i-h-p-b .content {
  width: 100%;
  height: 50%;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.explore .cta-box.cta-i-h-p-b h3 {
  color: var(--color-teal);
  font-size: 25px;
}
.explore .cta-box.cta-i-h-p-b p {
  color: var(--color-primary);
  font-size: 14px;
}

section[class^=chosen-videos] {
  position: relative;
  padding: 80px;
}
section[class^=chosen-videos] h2 {
  color: var(--color-text);
  margin: 1em auto;
}
section[class^=chosen-videos] .preview-track {
  padding: 50px 0;
  column-gap: 2rem;
}

.chosen-videos-1 {
  background-color: #e2e5e4;
}

.chosen-videos-2 {
  background-color: var(--color-background);
}

.chosen-videos-3 {
  background-color: #fdfcfa;
}

/* legal pages: Terms & Conditions / Privacy Policy */
.legal {
  padding-top: 215px;
}
.legal article {
  width: var(--inter-width);
  max-width: var(--legal-width);
  margin: auto;
}
.legal article ul {
  list-style: none;
  padding: 0;
}
.legal article ul li::before {
  content: "– ";
}
.legal h1 {
  font-size: 64px;
}
.legal h2 {
  font-family: "Avenir", sans-serif;
  text-align: left;
  font-size: 17px;
  font-weight: normal;
  color: var(--color-primary);
  margin: 2.5em 0 1.5em;
  line-height: 1.2;
  transform: translateX(0);
}
.legal h3 {
  color: var(--color-text);
  font-family: "Avenir Medium", sans-serif;
  font-size: 16px;
  text-align: left;
  text-transform: initial;
  letter-spacing: normal;
  font-weight: bold;
  transform: translateX(0);
}
.legal h3 + p {
  margin-top: 0;
}

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