html {
  -webkit-font-smoothing: antialiased; }

/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */
html,
button,
input,
select,
textarea {
  font-family: sans-serif; }

/**
 * Address margins handled incorrectly in IE 6/7.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */
/*
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}
*/
/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */
b,
strong {
  font-weight: bold; }

blockquote {
  margin: 1em 40px; }

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Address styling not present in IE 6/7/8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address margins set differently in IE 6/7.
 */
p,
pre {
  margin: 1em 0; }

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

/**
 * Address CSS quotes not supported in IE 6/7.
 */
q {
  quotes: none; }

/**
 * Address `quotes` property not supported in Safari 4.
 */
q:before,
q:after {
  content: '';
  content: none; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
   Lists
   ========================================================================== */
/**
 * Address margins set differently in IE 6/7.
 */
dl,
menu,
ol,
ul {
  margin: 0em 0; }

dd {
  margin: 0 0 0 00px; }

/**
 * Address paddings set differently in IE 6/7.
 */
menu,
ol,
ul {
  padding: 0 0 0 00px;
  margin: 0; }

/**
 * Correct list images handled incorrectly in IE 7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */ }

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
  margin: 0; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */ }

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */ }

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */ }

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

.list:after, .list-item:after, header:after, .primary-nav:after, .wrapper:after, .main:after, footer:after, .slab:after, .mpu-wrap:after, .breaking-banner:after, .weather-banner:after, .numbered-list__item:after, ol:after, .banner:after, video-teaser:after, .article__timestamp:after .recommended-stories .teaser:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }

p, ol, ul {
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0; }

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

li {
  list-style-type: none; }

ul {
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em; }

a {
  text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  padding: 0px;
  font-weight: normal;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  margin: 0; }

.ads {
  -webkit-transform: scale(2, 2); }

.fr {
  float: right; }

html {
  -webkit-font-smoothing: antialiased; }

ul {
  list-style-type: disc;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0; }

:root {
  --white:#FFF;
  --off-white:#fbfbf5;
  --off-white: #FFFFFA;
  --black: #000;
  --grey1: #F5F5F5;
  --grey2: #EBEBEB;
  --grey3: #DCDCDC;
  --grey4: #B9B9B9;
  --grey5: #969696;
  --grey6: #737373;
  --grey7: #505050;
  --grey8: #404040;
  --ink: #444444;
  --c05: .05;
  --c10: .1;
  --c20: .2;
  --c30: .3;
  --c100: 100;
  --red: hsl(0 100% 50% / 1);
  --orange: hsl(30 100% 50% / 1);
  --yellow: hsl(60 100% 50% / var(--c100));
  --green1: hsl(90 100% 50% / 1);
  --green2: hsl(120 100% 50% / 1);
  --green3: hsl(150 100% 50% / 1);
  --blue1: hsl(180 100% 50% / 1);
  --blue2: hsl(210 100% 50% / 1);
  --blue3: hsl(240 100% 50% / 1);
  --aqua: hsl(180 50% 90% / 1);
  --off-white: #fffff5;
  --purple: #6d1e9a;
  --bright-purple: #6d54ff;
  --deep-purple: #2b2a38;
  --dark-purple: #05000A;
  --blue-01: rgba(43, 184, 201, 0.05);
  --light-blue: rgba(43, 184, 201, 0.1);
  --light-blue2: rgba(43, 184, 201, 0.5);
  --aqua-05: hsl(180 100% 90% / .05);
  --off-white-0: rgba(251, 251, 245, 0);
  --off-white-5: rgba(251, 251, 245, 0.5);
  --purple-75: hsla(249, 100%, 10%, 0.75);
  --yellow-5: rgba(255, 239, 166, 0.05);
  /*
--dv-1: var(--green);
--dv-2: var(--orange);
--dv-3: var(--red);
*/
  --accent: var(--bright-purple);
  --accent-inverse: var(--white);
  --line1: 1px solid var(--grey1);
  --line2: 1px solid var(--grey2);
  --line3: 1px solid var(--grey3);
  --btn-bg-primary: var(--accent);
  --btn-text-primary: var(--accent-inverse);
  --btn-border-style: solid;
  --btn-border-width: 2px;
  --btn-border-radius: 0;
  --nav-color: var(--off-white);
  --nav-color--hover: var(--aqua);
  --title-color: var(--grey8);
  --intro-title: var(--title-color);
  --article-title: var(--title-color);
  --section-title-color: var(--black);
  --heading-title-color: var(--title-color);
  --page-title-color: var(--title-color);
  --app-bg: var(--white);
  --body-text: var(--grey7);
  --meta-text: var(--off-white-10);
  --cover-bg: var(--aqua-05);
  --header-bg: var(--white);
  --intro-bg: var(--subtle-grad);
  --article-header-bg: var(--deep-purple);
  --page-nav-bg: var(--aqua);
  --int-link--bg: var(--red);
  --quote-bg: var(--black);
  --footer-bg: var(--grey2);
  --int-link--color: var(--off-white);
  --blockquote-color: var(--white);
  --cite-color: var(--yellow);
  --grid-2-col: repeat(2, 1fr);
  --grid-3-col: repeat(3, 1fr);
  --grid-4-col: repeat(4, 1fr);
  --grad-color-1: var(--off-white);
  --grad-color-2: var(--light-blue);
  --grad-hero: linear-gradient(to right, var(--red), #21ffeb);
  --grad-left: linear-gradient(to left, var(--grad-color-2),  transparent);
  --grad-right: linear-gradient(to right, var(--grad-color-2), transparent);
  --grad-down: linear-gradient(to bottom, var(--grad-color-1),  var(--grad-color-2));
  --subtle-grad:linear-gradient(-15deg, var(--light-blue) 40%, transparent 40%);
  --mad-grad:linear-gradient(-15deg, var(--blue1) 40%, transparent 40%), 
			linear-gradient(15deg, var(--yellow) 30%, transparent 30%),
			linear-gradient(240deg, var(--red) 20%, transparent 20%),
			linear-gradient(150deg, var(--green1) 30%, transparent 30%);
  --elevation-1: 0px 5px 70px var(--blue-01), 0px 2px 5px var(--blue-01);
  --card-elevation: var(--elevation-1), inset 00px 0 50px #5fa3de0f, inset 00px 0 1px #0818255e;
  --text-link-color: var(--grey7);
  --text-link-color--hover: var(--grey8);
  --text-link-color--active: var(--int-blue);
  --p-link: var(--blue1);
  --articleheader: hsla(var(--color-action), .5);
  --masthead-height: var(--sp3);
  --body-height:  calc(100vh - var(--masthead-height));
  --scrollbar: var(--grey2);
  --scrollbar-bg: var(--white);
  --workspace-header-bg-color: var(--amb-blue);
  --workspace-bg-color: var(--off-white);
  --scancheck: blur(3px) contrast(1.2);
  --bp1: 640px;
  --bp2: 768px;
  --bp3: 1280px;
  --base-font-size: 1.8rem;
  --base-font-size: 1rem;
  --font-scale: (1.25);
  --fs-1: calc(var(--fs0) / var(--font-scale));
  --fs-2: calc(var(--fs-1) / var(--font-scale));
  --fs-3: calc(var(--fs-2) / var(--font-scale));
  --fs-4: calc(var(--fs-3) / var(--font-scale));
  --fs-5: calc(var(--fs-4) / var(--font-scale));
  --fs-6: calc(var(--fs-5) / var(--font-scale));
  --fs0: var(--base-font-size);
  --fs1: calc(var(--fs0) * var(--font-scale));
  --fs2: calc(var(--fs1) * var(--font-scale));
  --fs3: calc(var(--fs2) * var(--font-scale));
  --fs4: calc(var(--fs3) * var(--font-scale));
  --fs5: calc(var(--fs4) * var(--font-scale));
  --fs6: calc(var(--fs5) * var(--font-scale));
  --fs7: calc(var(--fs6) * var(--font-scale));
  --fs8: calc(var(--fs7) * var(--font-scale));
  --fw-bold: 750;
  --fw-semi: 600;
  --fw-regular: 400;
  --lh: 1;
  --lh-ratio: 1.1;
  --lh1: calc(var(--lh) * var(--lh-ratio));
  --lh2: calc(var(--lh1) * var(--lh-ratio));
  --lh3: calc(var(--lh2) * var(--lh-ratio));
  --lh4: calc(var(--lh3) * var(--lh-ratio));
  --lh5: calc(var(--lh4) * var(--lh-ratio));
  --sp0: 2rem;
  --sp-ratio: 1.25;
  --sp-1: calc(var(--sp0) / var(--sp-ratio));
  --sp-2: calc(var(--sp-1) / var(--sp-ratio));
  --sp-3: calc(var(--sp-2) / var(--sp-ratio));
  --sp-4: calc(var(--sp-3) / var(--sp-ratio));
  --sp-5: calc(var(--sp-4) / var(--sp-ratio));
  --sp-6: calc(var(--sp-5) / var(--sp-ratio));
  --sp-7: calc(var(--sp-6) / var(--sp-ratio));
  --sp-8: calc(var(--sp-7) / var(--sp-ratio));
  --sp1: calc(var(--sp0) * var(--sp-ratio));
  --sp2: calc(var(--sp1) * var(--sp-ratio));
  --sp3: calc(var(--sp2) * var(--sp-ratio));
  --sp4: calc(var(--sp3) * var(--sp-ratio));
  --sp5: calc(var(--sp4) * var(--sp-ratio));
  --sp6: calc(var(--sp5) * var(--sp-ratio));
  --sp7: calc(var(--sp6) * var(--sp-ratio));
  --sp8: calc(var(--sp7) * var(--sp-ratio));
  --sz0: 2rem;
  --sz-ratio: 1.25;
  --sz-1: calc(var(--sz0) / var(--sz-ratio));
  --sz-2: calc(var(--sz-1) / var(--sz-ratio));
  --sz-3: calc(var(--sz-2) / var(--sz-ratio));
  --sz-4: calc(var(--sz-3) / var(--sz-ratio));
  --sz-5: calc(var(--sz-4) / var(--sz-ratio));
  --sz-6: calc(var(--sz-5) / var(--sz-ratio));
  --sz-7: calc(var(--sz-6) / var(--sz-ratio));
  --sz-8: calc(var(--sz-7) / var(--sz-ratio));
  --sz1: calc(var(--sz0) * var(--sz-ratio));
  --sz2: calc(var(--sz1) * var(--sz-ratio));
  --sz3: calc(var(--sz2) * var(--sz-ratio));
  --sz4: calc(var(--sz3) * var(--sz-ratio));
  --sz5: calc(var(--sz4) * var(--sz-ratio));
  --sz6: calc(var(--sz5) * var(--sz-ratio));
  --sz7: calc(var(--sz6) * var(--sz-ratio));
  --sz8: calc(var(--sz7) * var(--sz-ratio));
  --ao-1: 200ms;
  --ao-2: 400ms;
  --ao-3: 600ms;
  --dur0: .2s;
  --dur-ratio: 1.25;
  --dur1: calc(var(--dur0) * var(--dur-ratio));
  --dur2: calc(var(--dur1) * var(--dur-ratio));
  --dur3: calc(var(--dur2) * var(--dur-ratio));
  --dur4: calc(var(--dur3) * var(--dur-ratio));
  --dur5: calc(var(--dur4) * var(--dur-ratio));
  --dur6: calc(var(--dur5) * var(--dur-ratio));
  --dur7: calc(var(--dur6) * var(--dur-ratio));
  --dur8: calc(var(--dur7) * var(--dur-ratio));
  --z-modal: 20;
  --z-panel: 20;
  --z-overlay: 20;
  --z-app-header: 30;
  --z-dropdown: 1; }

/*
ELS GREY
*/
/*
$cta3:
$cta4:
*/
a {
  color: var(--text-link-color); }
  a:hover {
    color: var(--text-link-color--hover); }
  a .active, a:focus {
    color: var(--text-link-color--active); }

/*

font-size 1em = 10px on default browser settings

html {
	font-size: 62.5%;
}
*/
/*
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,600i,900,900i');

@import url('https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:300,400,500,700&display=swap');
*/
/*
$cover1-tf: 'Special Elite', cursive;
$cover2-tf: 'Plaster', cursive;
$cover3-tf: 'Megrim', cursive;
*/
/*
$brand-font: 'BLOKK', regular, sans-serif;
$ui-font: 'NexusSansPro', regular, sans-serif;
$sd-font: 'NexusSansPro', regular, sans-serif;
*/
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("../assets/fonts/Inter-upright.var.woff2") format("woff2"); }

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("../assets/fonts/Inter-italic.var.woff2") format("woff2"); }

body {
  --alt-font-family: "Inter var", Arial, regular, sans-serif;
  --base-font-family: "Inter var", Arial, regular, sans-serif;
  font-family: var(--base-font-family);
  font-weight: normal;
  font-size: var(--base-font-size);
  line-height: var(--lh5);
  font-variant: lining-nums; }

@-webkit-keyframes close-pulse {
  from {
    opacity: 0; }
  80% {
    opacity: 100%; }
  to {
    opacity: 50%; } }

@keyframes close-pulse {
  from {
    opacity: 0; }
  80% {
    opacity: 100%; }
  to {
    opacity: 50%; } }

.chord--form.scroll-ani,
.scroll-ani {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(var(--scroll) * -12s);
          animation-delay: calc(var(--scroll) * -12s); }

@-webkit-keyframes tempo {
  from {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit; } }

@keyframes tempo {
  from {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit; } }

@-webkit-keyframes a-list {
  from {
    -webkit-transform: translate(-10px, -20px);
            transform: translate(-10px, -20px);
    width: 0;
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translate(0px 0px);
            transform: translate(0px 0px);
    opacity: 1;
    border-color: inherit; } }

@keyframes a-list {
  from {
    -webkit-transform: translate(-10px, -20px);
            transform: translate(-10px, -20px);
    width: 0;
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translate(0px 0px);
            transform: translate(0px 0px);
    opacity: 1;
    border-color: inherit; } }

@-webkit-keyframes a-grid {
  from {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit; } }

@keyframes a-grid {
  from {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit; } }

@-webkit-keyframes scale-up {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    border-color: inherit; } }

@keyframes scale-up {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    border-color: inherit; } }

@-webkit-keyframes scale-down {
  from {
    height: 500%;
    width: 500%; }
  to {
    height: 200%;
    width: 200%; } }

@keyframes scale-down {
  from {
    height: 500%;
    width: 500%; }
  to {
    height: 200%;
    width: 200%; } }

@-webkit-keyframes pulse {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes pulse {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/*
@keyframes beats{
	
	0 {
		transform: translate(0);
		opacity: 0;
	
	}
	
	50%{
		opacity: 1;
	}	
	
	100% {
		transform: translate(100%);
		opacity: 0;
	
	}
	
}
*/
@-webkit-keyframes beats {
  from {
    opacity: 1;
    left: 0; }
  to {
    opacity: 1;
    left: 100%; } }
@keyframes beats {
  from {
    opacity: 1;
    left: 0; }
  to {
    opacity: 1;
    left: 100%; } }

@-webkit-keyframes pop {
  from {
    -webkit-transform: scale(0);
            transform: scale(0); }
  to {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    border-radius: 3rem;
    background: var(--green); } }

@keyframes pop {
  from {
    -webkit-transform: scale(0);
            transform: scale(0); }
  to {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    border-radius: 3rem;
    background: var(--green); } }

@keyframes tempo {
  from {
    -webkit-transform: translate(0px);
            transform: translate(0px);
    opacity: 0; }
  to {
    -webkit-transform: translate(400px);
            transform: translate(400px);
    opacity: 1; } }

@-webkit-keyframes rotator {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg); } }

@keyframes rotator {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg); } }

@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes intro1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(13) skew(30deg, 30deg);
            transform: scale(13) skew(30deg, 30deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg, 0deg);
            transform: scale(1) skew(0deg, 0deg); } }

@keyframes intro1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(13) skew(30deg, 30deg);
            transform: scale(13) skew(30deg, 30deg); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg, 0deg);
            transform: scale(1) skew(0deg, 0deg); } }

@-webkit-keyframes fade-scale-up {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); }
  99% {
    opacity: 1;
    -webkit-transform: scale(0.5);
            transform: scale(0.5); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes fade-scale-up {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0); }
  99% {
    opacity: 1;
    -webkit-transform: scale(0.5);
            transform: scale(0.5); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes changer {
  from {
    --deg1: -20deg;
    --col1: var(--aqua);
    --col2: var(--red); }
  to {
    --deg1: 180deg;
    --col1: var(--blue);
    --col2: var(--aqua); } }

@keyframes changer {
  from {
    --deg1: -20deg;
    --col1: var(--aqua);
    --col2: var(--red); }
  to {
    --deg1: 180deg;
    --col1: var(--blue);
    --col2: var(--aqua); } }

.beat {
  --dur: 6s;
  --beats: 8;
  --w: var(--sz1);
  --h: var(--sz1);
  width: var(--w);
  height: var(--h);
  position: absolute;
  background: var(--off-white);
  -webkit-animation: var(--dur) beats steps(var(--beats)) infinite;
          animation: var(--dur) beats steps(var(--beats)) infinite; }
  .beat:nth-child(2) {
    top: var(--h);
    -webkit-animation-duration: calc(var(--dur) / 2);
            animation-duration: calc(var(--dur) / 2); }
  .beat:nth-child(3) {
    top: calc(var(--h) * 2);
    -webkit-animation-duration: calc(var(--dur) / 4);
            animation-duration: calc(var(--dur) / 4); }
  .beat:nth-child(4) {
    top: calc(var(--h) * 3);
    -webkit-animation-duration: calc(var(--dur) / 8);
            animation-duration: calc(var(--dur) / 8); }

.cont {
  --dur: 2s;
  --beats: 8;
  --h: 20px;
  width: 300px;
  border: 1px solid var(--off-white);
  height: 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1rem;
  position: relative;
  background: var(--yellow-05);
  -webkit-animation: var(--dur) wires ease-in;
          animation: var(--dur) wires ease-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0; }
  .cont--1 {
    height: var(--masthead-height); }
  .cont--2 {
    height: calc(100% - var(--masthead-height));
    -webkit-animation-delay: calc(var(--dur) * 2);
            animation-delay: calc(var(--dur) * 2); }
  .cont--3 {
    height: var(--masthead-height);
    -webkit-animation-delay: calc(var(--dur) * 4);
            animation-delay: calc(var(--dur) * 4); }
  .cont .text {
    padding: 16px;
    line-height: 1.2;
    -webkit-animation: var(--dur) wires ease-in;
            animation: var(--dur) wires ease-in;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    opacity: 0; }
    .cont .text:nth-child(odd) {
      -webkit-animation-delay: calc(var(--dur) / 2);
              animation-delay: calc(var(--dur) / 2); }
    .cont .text--head {
      font-size: 20px;
      font-weight: 900; }

@-webkit-keyframes wires {
  from {
    box-shadow: inset 0 0 0 16px transparent; }
  to {
    box-shadow: inset 0 0 0 16px var(--light-blue);
    opacity: 1; } }

@keyframes wires {
  from {
    box-shadow: inset 0 0 0 16px transparent; }
  to {
    box-shadow: inset 0 0 0 16px var(--light-blue);
    opacity: 1; } }

.chord {
  --c: 0;
  --d: 60;
  --e: 120;
  --f: 150;
  --g: 210;
  --a: 270;
  --b: 330;
  --note: var(--c);
  background-color: hsla(var(--note), 100%, 50%, 1);
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  opacity: 1;
  background-blend-mode: color-burn;
  background-size: cover;
  -webkit-transform: rotate(calc(var(--note) * 1deg));
          transform: rotate(calc(var(--note) * 1deg)); }
  .chord:hover {
    --note: 0;
    transition: 1s all;
    -webkit-transform-origin: center;
            transform-origin: center; }
  .chord--form {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: 12s chordformer2 ease-out infinite;
            animation: 12s chordformer2 ease-out infinite; }
  .chord--2 {
    -webkit-animation: 3s animiate-to ease-out infinite;
            animation: 3s animiate-to ease-out infinite; }
  .chord--3 {
    -webkit-animation: 3s sequ ease-out infinite;
            animation: 3s sequ ease-out infinite; }

@-webkit-keyframes animiate-to {
  0 {
    background-color: inherit;
    -webkit-clip-path: inherit;
            clip-path: inherit; }
  0% {
    -webkit-clip-path: var(--majall2);
            clip-path: var(--majall2);
    transition: 1s all; } }

@keyframes animiate-to {
  0 {
    background-color: inherit;
    -webkit-clip-path: inherit;
            clip-path: inherit; }
  0% {
    -webkit-clip-path: var(--majall2);
            clip-path: var(--majall2);
    transition: 1s all; } }

@-webkit-keyframes chordformer {
  0%, 100% {
    --note: var(--c);
    -webkit-clip-path: var(--majall1);
            clip-path: var(--majall1); }
  30% {
    --note: var(--d);
    -webkit-clip-path: var(--majall1);
            clip-path: var(--majall1); }
  70% {
    --note: var(--e);
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj); } }

@keyframes chordformer {
  0%, 100% {
    --note: var(--c);
    -webkit-clip-path: var(--majall1);
            clip-path: var(--majall1); }
  30% {
    --note: var(--d);
    -webkit-clip-path: var(--majall1);
            clip-path: var(--majall1); }
  70% {
    --note: var(--e);
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj); } }

@-webkit-keyframes chordformer2 {
  0% {
    background-color: hsla(var(--c), 100%, 50%, 1);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    -webkit-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform: rotate(calc(var(--c) * 1deg));
            transform: rotate(calc(var(--c) * 1deg)); }
  10% {
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--c), 100%, 50%, 1);
    -webkit-transform: rotate(30);
            transform: rotate(30);
    -webkit-transform: rotate(calc(var(--c) * 1deg));
            transform: rotate(calc(var(--c) * 1deg)); }
  20% {
    -webkit-clip-path: var(--min);
            clip-path: var(--min);
    background-color: hsla(var(--d), 100%, 50%, 1);
    -webkit-transform: rotate(30);
            transform: rotate(30);
    -webkit-transform: rotate(calc(var(--d) * 1deg));
            transform: rotate(calc(var(--d) * 1deg)); }
  30% {
    -webkit-clip-path: var(--min);
            clip-path: var(--min);
    background-color: hsla(var(--e), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--e) * 1deg));
            transform: rotate(calc(var(--e) * 1deg)); }
  40% {
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--f), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--f) * 1deg));
            transform: rotate(calc(var(--f) * 1deg)); }
  50% {
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--g), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--g) * 1deg));
            transform: rotate(calc(var(--g) * 1deg)); }
  60% {
    -webkit-clip-path: var(--min);
            clip-path: var(--min);
    background-color: hsla(var(--a), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--a) * 1deg));
            transform: rotate(calc(var(--a) * 1deg)); }
  80% {
    -webkit-clip-path: var(--dim);
            clip-path: var(--dim);
    background-color: hsla(var(--b), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--b) * 1deg));
            transform: rotate(calc(var(--b) * 1deg)); }
  100% {
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-color: hsla(var(--c), 100%, 50%, 1);
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes chordformer2 {
  0% {
    background-color: hsla(var(--c), 100%, 50%, 1);
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    -webkit-transform: rotate(0);
            transform: rotate(0);
    -webkit-transform: rotate(calc(var(--c) * 1deg));
            transform: rotate(calc(var(--c) * 1deg)); }
  10% {
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--c), 100%, 50%, 1);
    -webkit-transform: rotate(30);
            transform: rotate(30);
    -webkit-transform: rotate(calc(var(--c) * 1deg));
            transform: rotate(calc(var(--c) * 1deg)); }
  20% {
    -webkit-clip-path: var(--min);
            clip-path: var(--min);
    background-color: hsla(var(--d), 100%, 50%, 1);
    -webkit-transform: rotate(30);
            transform: rotate(30);
    -webkit-transform: rotate(calc(var(--d) * 1deg));
            transform: rotate(calc(var(--d) * 1deg)); }
  30% {
    -webkit-clip-path: var(--min);
            clip-path: var(--min);
    background-color: hsla(var(--e), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--e) * 1deg));
            transform: rotate(calc(var(--e) * 1deg)); }
  40% {
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--f), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--f) * 1deg));
            transform: rotate(calc(var(--f) * 1deg)); }
  50% {
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--g), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--g) * 1deg));
            transform: rotate(calc(var(--g) * 1deg)); }
  60% {
    -webkit-clip-path: var(--min);
            clip-path: var(--min);
    background-color: hsla(var(--a), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--a) * 1deg));
            transform: rotate(calc(var(--a) * 1deg)); }
  80% {
    -webkit-clip-path: var(--dim);
            clip-path: var(--dim);
    background-color: hsla(var(--b), 100%, 50%, 1);
    -webkit-transform: rotate(60);
            transform: rotate(60);
    -webkit-transform: rotate(calc(var(--b) * 1deg));
            transform: rotate(calc(var(--b) * 1deg)); }
  100% {
    -webkit-clip-path: var(--maj-all);
            clip-path: var(--maj-all);
    background-color: hsla(var(--c), 100%, 50%, 1);
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.maj {
  -webkit-clip-path: var(--majall1);
          clip-path: var(--majall1); }

.min {
  -webkit-clip-path: var(--min);
          clip-path: var(--min); }

.min6 {
  -webkit-clip-path: var(--min6);
          clip-path: var(--min6); }

.min7 {
  -webkit-clip-path: var(--min7);
          clip-path: var(--min7); }

.min7b5 {
  -webkit-clip-path: var(--min7b5);
          clip-path: var(--min7b5); }

.maj7 {
  -webkit-clip-path: var(--maj7);
          clip-path: var(--maj7); }

.maj9 {
  -webkit-clip-path: var(--maj9);
          clip-path: var(--maj9); }

.maj69 {
  -webkit-clip-path: var(--maj69);
          clip-path: var(--maj69); }

.maj11 {
  -webkit-clip-path: var(--maj11);
          clip-path: var(--maj11); }

.maj13 {
  -webkit-clip-path: var(--maj13);
          clip-path: var(--maj13); }

.min11 {
  -webkit-clip-path: var(--min11);
          clip-path: var(--min11); }

.min13 {
  -webkit-clip-path: var(--min13);
          clip-path: var(--min13); }

.sus2 {
  -webkit-clip-path: var(--sus2);
          clip-path: var(--sus2); }

.sus4 {
  -webkit-clip-path: var(--sus4);
          clip-path: var(--sus4); }

.dom13 {
  -webkit-clip-path: var(--dom13);
          clip-path: var(--dom13); }

.dom11 {
  -webkit-clip-path: var(--dom11);
          clip-path: var(--dom11); }

.dom7 {
  -webkit-clip-path: var(--dom7);
          clip-path: var(--dom7); }

.dom9 {
  -webkit-clip-path: var(--dom9);
          clip-path: var(--dom9); }

.dim {
  -webkit-clip-path: var(--dim);
          clip-path: var(--dim); }

.dim7 {
  -webkit-clip-path: var(--dim7);
          clip-path: var(--dim7); }

.c {
  --note: 0; }

.db {
  --note: 30; }

.d {
  --note: 60; }

.eb {
  --note: 90; }

.e {
  --note: 120; }

.f {
  --note: 150; }

.gb {
  --note: 180; }

.g {
  --note: 210; }

.ab {
  --note: 240; }

.a {
  --note: 270; }

.bb {
  --note: 300; }

.b {
  --note: 330; }

@-webkit-keyframes sequ {
  0% {
    transition: 1s all;
    --note: 210;
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--note), 100%, 50%, 0.5);
    -webkit-transform: rotate(calc(var(--note) * 1deg));
            transform: rotate(calc(var(--note) * 1deg)); }
  100% {
    --note: 150;
    transition: 1s all;
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--note), 100%, 50%, 0.5);
    -webkit-transform: rotate(calc(var(--note) * 1deg));
            transform: rotate(calc(var(--note) * 1deg)); } }

@keyframes sequ {
  0% {
    transition: 1s all;
    --note: 210;
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--note), 100%, 50%, 0.5);
    -webkit-transform: rotate(calc(var(--note) * 1deg));
            transform: rotate(calc(var(--note) * 1deg)); }
  100% {
    --note: 150;
    transition: 1s all;
    -webkit-clip-path: var(--maj);
            clip-path: var(--maj);
    background-color: hsla(var(--note), 100%, 50%, 0.5);
    -webkit-transform: rotate(calc(var(--note) * 1deg));
            transform: rotate(calc(var(--note) * 1deg)); } }

.chord-holder {
  display: -webkit-flex;
  display: flex;
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 100%; }
  .chord-holder img {
    -o-object-fit: contain;
       object-fit: contain; }
  .chord-holder svg {
    width: 400px;
    height: 400px;
    margin: 4rem auto 0;
    padding: 1rem; }
  .chord-holder__title {
    font-size: var(--fs4);
    color: var(--dark-purple);
    -webkit-align-self: center;
            align-self: center;
    -webkit-justify-content: center;
            justify-content: center;
    text-align: center;
    margin: auto;
    z-index: 30;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.75px; }
  .chord-holder--split {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100vw;
    height: auto;
    overflow: auto; }

.chord-loader {
  display: -webkit-flex;
  display: flex;
  width: 60px;
  height: 60px;
  position: relative;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0 auto;
  -webkit-animation: 2s maj-maj9 infinite linear;
          animation: 2s maj-maj9 infinite linear;
  background: var(--red);
  /* justify-items: center; */ }

@-webkit-keyframes bar-blues {
  from { }
  to {
    -webkit-clip-path: var(--full);
            clip-path: var(--full); } }

@keyframes bar-blues {
  from { }
  to {
    -webkit-clip-path: var(--full);
            clip-path: var(--full); } }

@-webkit-keyframes one-four-five {
  0%, 100% {
    -webkit-clip-path: var(--cmaj);
            clip-path: var(--cmaj); }
  33.3% {
    -webkit-clip-path: var(--fmaj);
            clip-path: var(--fmaj); }
  66.6% {
    -webkit-clip-path: var(--gmaj);
            clip-path: var(--gmaj); } }

@keyframes one-four-five {
  0%, 100% {
    -webkit-clip-path: var(--cmaj);
            clip-path: var(--cmaj); }
  33.3% {
    -webkit-clip-path: var(--fmaj);
            clip-path: var(--fmaj); }
  66.6% {
    -webkit-clip-path: var(--gmaj);
            clip-path: var(--gmaj); } }

@-webkit-keyframes maj-maj9 {
  0%, 100% {
    -webkit-clip-path: var(--fmaj7);
            clip-path: var(--fmaj7);
    background: var(--aqua); }
  25% {
    -webkit-clip-path: var(--cmaj9);
            clip-path: var(--cmaj9);
    background: var(--red); }
  50% {
    -webkit-clip-path: var(--bmin7);
            clip-path: var(--bmin7);
    background: var(--purple-75); } }

@keyframes maj-maj9 {
  0%, 100% {
    -webkit-clip-path: var(--fmaj7);
            clip-path: var(--fmaj7);
    background: var(--aqua); }
  25% {
    -webkit-clip-path: var(--cmaj9);
            clip-path: var(--cmaj9);
    background: var(--red); }
  50% {
    -webkit-clip-path: var(--bmin7);
            clip-path: var(--bmin7);
    background: var(--purple-75); } }

.tempo {
  position: fixed;
  top: 0;
  left: -300px;
  right: 0;
  bottom: 0;
  background-color: var(--off-white);
  z-index: 999999;
  display: grid;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  height: 100%; }
  .tempo__track {
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: center;
            align-self: center;
    -webkit-justify-content: center;
            justify-content: center;
    width: 300px;
    margin: auto; }
  .tempo__marker {
    position: relative;
    display: block;
    width: var(--sz1);
    height: var(--sz1);
    -webkit-animation: .8s beats infinite ease-in-out, .4s maj-maj9 infinite ease-in-out;
            animation: .8s beats infinite ease-in-out, .4s maj-maj9 infinite ease-in-out;
    -webkit-clip-path: var(--cmaj9);
            clip-path: var(--cmaj9);
    background: var(--red); }

.loadstar #v {
  -webkit-animation: 2s loadstar infinite;
          animation: 2s loadstar infinite; }

.tooltip {
  background: var(--white);
  font-size: var(--fs-4);
  position: absolute;
  width: 10rem;
  padding: .2em;
  border: 1px solid; }

/* Metaballs! */
/*
.frame{
  position: relative;
  padding: 10vh;
   filter: contrast(5);
   background: white;
  display: flex;
  
  justify-items: center;
  margin: auto;
  flex: 0 0 80%;
 } 
*/
.metaballs {
  width: 2em;
  position: relative;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  padding: 2em;
  -webkit-flex: 0 0 30px;
          flex: 0 0 30px;
  -webkit-filter: contrast(15);
          filter: contrast(15);
  background: white; }

.meta {
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  border-radius: 50%;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: path 0.8s infinite alternate cubic-bezier(0.3, 0.5, 0.7, 0.5);
          animation: path 0.8s infinite alternate cubic-bezier(0.3, 0.5, 0.7, 0.5);
  /* 		transform: scale(.5); */ }
  .meta--1 {
    width: 1em;
    height: 1em;
    -webkit-animation-delay: 0.2666666667s;
            animation-delay: 0.2666666667s;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
    /* 		animation: move2 1.5s infinite alternate linear; */ }
  .meta--2 {
    width: 1em;
    height: 1em;
    -webkit-animation-delay: 0.5333333333s;
            animation-delay: 0.5333333333s;
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s; }
  .meta--3 {
    width: 1em;
    height: 1em;
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
    /* 		animation: move2 3s infinite alternate linear; */ }
  .meta--4 {
    width: 1em;
    height: 1em;
    -webkit-animation-duration: 1.0666666667s;
            animation-duration: 1.0666666667s;
    /* 		animation: move2 3s infinite alternate linear; */ }
  .meta--5 {
    width: 1em;
    height: 1em;
    -webkit-animation-duration: 1.3333333333s;
            animation-duration: 1.3333333333s;
    /* 		animation: move2 3s infinite alternate linear; */ }

@-webkit-keyframes path {
  from {
    left: 0; }
  to {
    left: 80%; } }

@keyframes path {
  from {
    left: 0; }
  to {
    left: 80%; } }

/*
.load {

  display: flex;
  flex-direction: row;
  position: relative;


  flex-wrap: wrap;
}
*/
@-webkit-keyframes circle2 {
  from {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    opacity: .5;
    -webkit-transform: scale(0.2);
            transform: scale(0.2); }
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; } }
@keyframes circle2 {
  from {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    opacity: .5;
    -webkit-transform: scale(0.2);
            transform: scale(0.2); }
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; } }

.circle-2 {
  opacity: 0;
  top: 50%;
  left: 50%;
  position: absolute;
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 0 0 54px;
          flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: auto;
  -webkit-transform-origin: left;
          transform-origin: left;
  background: #E81C2D; }
  .circle-2.one {
    background: #E81C2D;
    -webkit-animation: circle2 2s infinite ease-in-out .4s;
            animation: circle2 2s infinite ease-in-out .4s; }
  .circle-2.two {
    background: #3e1365;
    -webkit-animation: circle2 2s infinite ease-in-out .2s;
            animation: circle2 2s infinite ease-in-out .2s; }
  .circle-2.three {
    background: #45D0B2;
    -webkit-animation: circle2 2s infinite ease-in-out .8s;
            animation: circle2 2s infinite ease-in-out .8s; }
  .circle-2.four {
    background: #3F6ECC;
    -webkit-animation: circle2 2s infinite ease-in-out 1s;
            animation: circle2 2s infinite ease-in-out 1s; }
  .circle-2.five {
    -webkit-animation: circle2 2s infinite ease-in-out .6s;
            animation: circle2 2s infinite ease-in-out .6s; }

.one {
  margin-left: -16px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: circle 2s infinite ease-in-out .1s;
          animation: circle 2s infinite ease-in-out .1s; }

.two {
  margin-top: -16px;
  margin-left: -8px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: circle 2s infinite ease-in-out .2s;
          animation: circle 2s infinite ease-in-out .2s; }

.three {
  margin-top: -16px;
  margin-left: 8px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: circle 2s infinite ease-in-out .3s;
          animation: circle 2s infinite ease-in-out .3s; }

.four {
  margin-left: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: circle 2s infinite ease-in-out .4s;
          animation: circle 2s infinite ease-in-out .4s; }

.five {
  margin-left: 16px;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: circle 2s infinite ease-in-out .5s;
          animation: circle 2s infinite ease-in-out .5s; }

.rocknroll .l-app__body {
  height: calc(100vh - var(--masthead-heioght)); }

.l-ex--app {
  width: 600px;
  -webkit-animation: .5s scale-up linear;
          animation: .5s scale-up linear; }

.l-ex > * {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: 1s list infinite linear;
          animation: 1s list infinite linear;
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }
  .l-ex > *:nth-child(1) {
    -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important; }
  .l-ex > *:nth-child(2) {
    -webkit-animation-delay: 0.05s !important;
            animation-delay: 0.05s !important; }
  .l-ex > *:nth-child(3) {
    -webkit-animation-delay: 0.1s !important;
            animation-delay: 0.1s !important; }
  .l-ex > *:nth-child(4) {
    -webkit-animation-delay: 0.15s !important;
            animation-delay: 0.15s !important; }
  .l-ex > *:nth-child(5) {
    -webkit-animation-delay: 0.2s !important;
            animation-delay: 0.2s !important; }

.l-ex--workspace {
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }
  .l-ex--workspace > * {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation: 1s tempo linear;
            animation: 1s tempo linear;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; }
    .l-ex--workspace > *:nth-child(1) {
      -webkit-animation-delay: 0s !important;
              animation-delay: 0s !important; }
    .l-ex--workspace > *:nth-child(2) {
      -webkit-animation-delay: 0.2s !important;
              animation-delay: 0.2s !important; }
    .l-ex--workspace > *:nth-child(3) {
      -webkit-animation-delay: 0.4s !important;
              animation-delay: 0.4s !important; }
    .l-ex--workspace > *:nth-child(4) {
      -webkit-animation-delay: 0.6s !important;
              animation-delay: 0.6s !important; }
    .l-ex--workspace > *:nth-child(5) {
      -webkit-animation-delay: 0.8s !important;
              animation-delay: 0.8s !important; }

.l-ex--list {
  width: 100%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s; }
  .l-ex--list > * {
    opacity: 1;
    width: 100%;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation: 1s a-list ease-out;
            animation: 1s a-list ease-out;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; }
    .l-ex--list > *:nth-child(1) {
      -webkit-animation-delay: 0s !important;
              animation-delay: 0s !important; }
    .l-ex--list > *:nth-child(2) {
      -webkit-animation-delay: 0.2s !important;
              animation-delay: 0.2s !important; }
    .l-ex--list > *:nth-child(3) {
      -webkit-animation-delay: 0.4s !important;
              animation-delay: 0.4s !important; }
    .l-ex--list > *:nth-child(4) {
      -webkit-animation-delay: 0.6s !important;
              animation-delay: 0.6s !important; }
    .l-ex--list > *:nth-child(5) {
      -webkit-animation-delay: 0.8s !important;
              animation-delay: 0.8s !important; }
    .l-ex--list > *:nth-child(6) {
      -webkit-animation-delay: 1s !important;
              animation-delay: 1s !important; }
    .l-ex--list > *:nth-child(7) {
      -webkit-animation-delay: 1.2s !important;
              animation-delay: 1.2s !important; }
    .l-ex--list > *:nth-child(8) {
      -webkit-animation-delay: 1.4s !important;
              animation-delay: 1.4s !important; }
    .l-ex--list > *:nth-child(9) {
      -webkit-animation-delay: 1.6s !important;
              animation-delay: 1.6s !important; }
    .l-ex--list > *:nth-child(10) {
      -webkit-animation-delay: 1.8s !important;
              animation-delay: 1.8s !important; }
    .l-ex--list > *:nth-child(11) {
      -webkit-animation-delay: 2s !important;
              animation-delay: 2s !important; }
    .l-ex--list > *:nth-child(12) {
      -webkit-animation-delay: 2.2s !important;
              animation-delay: 2.2s !important; }
    .l-ex--list > *:nth-child(13) {
      -webkit-animation-delay: 2.4s !important;
              animation-delay: 2.4s !important; }
    .l-ex--list > *:nth-child(14) {
      -webkit-animation-delay: 2.6s !important;
              animation-delay: 2.6s !important; }
    .l-ex--list > *:nth-child(15) {
      -webkit-animation-delay: 2.8s !important;
              animation-delay: 2.8s !important; }
    .l-ex--list > *:nth-child(16) {
      -webkit-animation-delay: 3s !important;
              animation-delay: 3s !important; }
    .l-ex--list > *:nth-child(17) {
      -webkit-animation-delay: 3.2s !important;
              animation-delay: 3.2s !important; }
    .l-ex--list > *:nth-child(18) {
      -webkit-animation-delay: 3.4s !important;
              animation-delay: 3.4s !important; }
    .l-ex--list > *:nth-child(19) {
      -webkit-animation-delay: 3.6s !important;
              animation-delay: 3.6s !important; }
    .l-ex--list > *:nth-child(20) {
      -webkit-animation-delay: 3.8s !important;
              animation-delay: 3.8s !important; }

.l-ex--grid > * {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: 1s a-grid ease-out;
          animation: 1s a-grid ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }
  .l-ex--grid > *:nth-child(1) {
    -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important; }
  .l-ex--grid > *:nth-child(2) {
    -webkit-animation-delay: 0.2s !important;
            animation-delay: 0.2s !important; }
  .l-ex--grid > *:nth-child(3) {
    -webkit-animation-delay: 0.4s !important;
            animation-delay: 0.4s !important; }
  .l-ex--grid > *:nth-child(4) {
    -webkit-animation-delay: 0.6s !important;
            animation-delay: 0.6s !important; }
  .l-ex--grid > *:nth-child(5) {
    -webkit-animation-delay: 0.8s !important;
            animation-delay: 0.8s !important; }
  .l-ex--grid > *:nth-child(6) {
    -webkit-animation-delay: 1s !important;
            animation-delay: 1s !important; }
  .l-ex--grid > *:nth-child(7) {
    -webkit-animation-delay: 1.2s !important;
            animation-delay: 1.2s !important; }
  .l-ex--grid > *:nth-child(8) {
    -webkit-animation-delay: 1.4s !important;
            animation-delay: 1.4s !important; }
  .l-ex--grid > *:nth-child(9) {
    -webkit-animation-delay: 1.6s !important;
            animation-delay: 1.6s !important; }
  .l-ex--grid > *:nth-child(10) {
    -webkit-animation-delay: 1.8s !important;
            animation-delay: 1.8s !important; }
  .l-ex--grid > *:nth-child(11) {
    -webkit-animation-delay: 2s !important;
            animation-delay: 2s !important; }
  .l-ex--grid > *:nth-child(12) {
    -webkit-animation-delay: 2.2s !important;
            animation-delay: 2.2s !important; }
  .l-ex--grid > *:nth-child(13) {
    -webkit-animation-delay: 2.4s !important;
            animation-delay: 2.4s !important; }
  .l-ex--grid > *:nth-child(14) {
    -webkit-animation-delay: 2.6s !important;
            animation-delay: 2.6s !important; }
  .l-ex--grid > *:nth-child(15) {
    -webkit-animation-delay: 2.8s !important;
            animation-delay: 2.8s !important; }
  .l-ex--grid > *:nth-child(16) {
    -webkit-animation-delay: 3s !important;
            animation-delay: 3s !important; }
  .l-ex--grid > *:nth-child(17) {
    -webkit-animation-delay: 3.2s !important;
            animation-delay: 3.2s !important; }
  .l-ex--grid > *:nth-child(18) {
    -webkit-animation-delay: 3.4s !important;
            animation-delay: 3.4s !important; }
  .l-ex--grid > *:nth-child(19) {
    -webkit-animation-delay: 3.6s !important;
            animation-delay: 3.6s !important; }
  .l-ex--grid > *:nth-child(20) {
    -webkit-animation-delay: 3.8s !important;
            animation-delay: 3.8s !important; }

.spinner-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--off-white);
  z-index: 999999; }

.circle--1 {
  width: 2.4em;
  height: 2.4em;
  opacity: .05;
  background: #ffd500;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s; }

.circle--2 {
  width: 4.8em;
  height: 4.8em;
  opacity: .05;
  background: #55ff00;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s; }

.circle--3 {
  width: 7.2em;
  height: 7.2em;
  opacity: .05;
  background: #00ff80;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s; }

.circle--4 {
  width: 9.6em;
  height: 9.6em;
  opacity: .05;
  background: #00aaff;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s; }

.circle--5 {
  width: 12em;
  height: 12em;
  opacity: .05;
  background: #2b00ff;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s; }

.circle--6 {
  width: 14.4em;
  height: 14.4em;
  opacity: .05;
  background: magenta;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s; }

.circle--7 {
  width: 16.8em;
  height: 16.8em;
  opacity: .05;
  background: #ff002b;
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
  -webkit-animation-duration: 2.1s;
          animation-duration: 2.1s; }

.circle--8 {
  width: 19.2em;
  height: 19.2em;
  opacity: .05;
  background: #ffaa00;
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
  -webkit-animation-duration: 2.4s;
          animation-duration: 2.4s; }

.circle--9 {
  width: 21.6em;
  height: 21.6em;
  opacity: .05;
  background: #80ff00;
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s; }

.circle--10 {
  width: 24em;
  height: 24em;
  opacity: .05;
  background: #00ff55;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s; }

.circle--11 {
  width: 26.4em;
  height: 26.4em;
  opacity: .05;
  background: #00d5ff;
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s; }

.circle--12 {
  width: 28.8em;
  height: 28.8em;
  opacity: .05;
  background: blue;
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
  -webkit-animation-duration: 3.6s;
          animation-duration: 3.6s; }

.circle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-20, -20, 0);
          transform: translate3d(-20, -20, 0);
  content: ''; }

.tl {
  /*
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	
*/
  /*
	display: flex;
	flex: 1 0 100%;
*/
  --year: calc(100% / 20);
  --month: calc(var(--year) / 12);
  /*
	.year {
	display: inline-flex;
    position: relative;
    border-right: 1px solid #ccc;
    height: 100%;
    width: calc(100% / 20 - 10px);
    }
	
*/ }
  .tl__track {
    height: 30px;
    position: relative;
    width: 100%;
    border-bottom: 1px solid;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-areas: "2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020", "2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020", "2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020";
    grid-template-rows: repeat(3, 1fr);
    height: 200px;
    background: #ccc;
    grid-gap: 1px solid; }
  .tl .event {
    font-size: var(--fs-2);
    line-height: 1.1;
    background: var(--white);
    padding: .5em;
    width: 100%;
    position: absolute;
    border: 1px solid var(--grey4);
    top: -50px;
    border-radius: .2em; }
    .tl .event:hover {
      box-shadow: 10px 10px var(--light-blue), -10px 10px var(--aqua-05), -10px -10px var(--light-blue), 10px -10px var(--aqua-05);
      z-index: 3; }
    .tl .event[data-event="spotify"] {
      grid-column: 6 / span 3; }
    .tl .event[data-event="razorcuts"] {
      grid-column: 1 / span 3; }
    .tl .event[data-event="readers-digest"] {
      grid-column: 2 / span 3; }
    .tl .event[data-event="itunes"] {
      grid-column: 3 / span 3; }

body {
  background: var(--body-bg);
  color: var(--body-text); }

.img-bg {
  background-size: cover;
  height: 100%;
  width: 100%; }

.article__heading, .l-intro__title, .l-app--mods .l-top__title {
  font-family: var(--base-font-family);
  color: var(--content-title);
  line-height: var(--lh3);
  font-weight: var(--fw-semi); }

.panel__title, .panel__label {
  /*
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	color: hsla(228, 22%, 35%, 1);
*/
  line-height: var(--lh1); }

label {
  color: #505050; }

/*
%inline-list{
	
    display: grid;
    grid-template-columns: repeat(10, auto);
    justify-content: start;
    grid-gap: .5em;
} 
*/
/*
%tab-styles{
	
a
	{
	color: $nav-link__text;
	@extend %core-link-animation;
	
	
	&.active{
		
		color: $link--active;
		box-shadow: inset 0 -6px 0 $nav-link__border;
		
	}
	
	&:hover{
		
		color: $link--hover;
		box-shadow: inset 0 -6px 0 rgba($nav-link__border, .5);
	}
	
	}
}
*/
/*
%filter-styles{
	
	.filter {
		
	&__title {
		font-weight: 600;
		color: var(--filter-label-color);
	}
	
	&__subnav{
	
		a {
		color: var(--filter-link-color);
		@extend %core-link-animation;
		
			&.active{
				
				color: var(--filter-link-color--hover);
				box-shadow: inset 4px 0 var(--filter-link-border-color);
				background: var(--filter-bg--hover);
				
			}
			
			&:hover{
				
				color: var(--filter-link-color--hover);
				box-shadow: inset 4px 0 var(--filter-link-border-color);
				background: var(--filter-bg--hover);
			}
		
		}
	}
	}
}
*/
.panel .dd__menu {
  box-shadow: 0px 3px 3px 0px rgba(34, 34, 34, 0.2);
  z-index: 9; }

.panel--left, .panel--right {
  box-shadow: 0 0 20px #0000002b; }

.panel--modal {
  box-shadow: 0 0 20px #0000002b;
  z-index: 11; }

/*
:root{

--button-border: 2px solid var(--color-action);
--button-border--hover: 2px solid var(--color-action--hover);
}
*/
.btn--primary {
  background: var(--color-action);
  color: var(--color-action-text);
  border-color: var(--color-action-border); }

.btn--primary:hover, .btn--primary:focus {
  background: var(--color-action--hover);
  color: var(--color-action-text--hover);
  border-color: var(--color-action-border--hover); }

.btn--secondary {
  background: var(--color-action-2);
  color: var(--color-action-text-2);
  border-color: var(--color-action-border-2); }

.btn--secondary:hover, .btn--secondary:focus {
  background: var(--color-action--hover-2);
  color: var(--color-action-text--hover-2);
  border-color: var(--color-action-border--hover-2); }

.btn--tertiary {
  background: var(--color-action--hover);
  color: var(--color-action-text--hover);
  border-color: var(--color-action-border--hover); }
  .btn--tertiary:hover, .btn--tertiary:focus {
    background: var(--color-action--hover);
    color: var(--color-action-text--hover);
    border-color: var(--color-action-border--hover); }

.example-block {
  border: var(--line1);
  background: rgba(232, 28, 45, 0.1);
  display: -webkit-flex;
  display: flex;
  -webkit-flex: 100%;
          flex: 100%;
  height: var(--sp1); }

.logo {
  background: transparent;
  border: 2px solid var(--line1);
  /*     position: absolute; */
  display: block;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: auto 0;
  width: var(--sp2);
  height: var(--sp2);
  justify-items: center; }
  .logo svg {
    -webkit-align-self: center;
            align-self: center;
    overflow: hidden;
    display: -webkit-flex;
    display: flex; }
  .logo .img-bg {
    background-size: cover;
    width: var(--sz-1);
    height: var(--sz-1);
    background-image: url(../assets/img/nonsolus.svg); }

.l-app__header .main-nav__item a, a.l-splitscreen h2, p a {
  /* 		font-weight: 750; */
  transition: .1s ease-in;
  box-shadow: inset 0 -0.2em var(--yellow); }
  .l-app__header .main-nav__item a:hover, a.l-splitscreen h2:hover, p a:hover {
    box-shadow: inset 0 -0.4em var(--light-blue); }
  .l-app__header .main-nav__item a.active, a.l-splitscreen h2.active, p a.active {
    box-shadow: inset 0 -0.4em var(--light-blue); }

.l-slab--desc p span, .l-intro__text p span,
.blocking span {
  display: inline;
  background-color: var(--blocking);
  color: var(--blocking-inverse);
  margin-left: .2em;
  line-height: 1;
  padding: 0 .1em .1em .1em;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: 0.2em 0 0 var(--blocking), -0.2em 0 0 var(--blocking); }

.logo:focus,
.btn:focus {
  outline: none;
  background: none; }

.card:focus {
  outline: none;
  background: none;
  /*     box-shadow: 0px 0px 10px var(--blue); */ }

a:focus {
  box-shadow: var(--card-border);
  outline: none; }

a {
  color: var(--text-link-color); }
  a.brand__img {
    box-shadow: none; }
  a.l-splitscreen {
    box-shadow: none; }
  a:hover {
    color: var(--text-link-color--hover); }
  a.active, a:focus {
    color: var(--text-link-color--hover); }

.h-promo--in {
  /* 	    margin-top: var(--sp1); */
  background: var(--deep-purple) var(--hero-grad); }
  .h-promo--in + .in-view {
    -webkit-animation: .5s fade ease-in;
            animation: .5s fade ease-in; }

.rocknoroll {
  background: var(--ink); }

.chord-loader {
  display: -webkit-flex;
  display: flex;
  width: 60px;
  height: 60px;
  position: relative;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0 auto;
  -webkit-animation: 2s maj-maj9 infinite linear;
          animation: 2s maj-maj9 infinite linear;
  background: var(--red);
  /* justify-items: center; */ }

@keyframes bar-blues {
  from { }
  to {
    -webkit-clip-path: var(--full);
            clip-path: var(--full); } }

@keyframes one-four-five {
  0%, 100% {
    -webkit-clip-path: var(--cmaj);
            clip-path: var(--cmaj); }
  33.3% {
    -webkit-clip-path: var(--fmaj);
            clip-path: var(--fmaj); }
  66.6% {
    -webkit-clip-path: var(--gmaj);
            clip-path: var(--gmaj); } }

@keyframes maj-maj9 {
  0%, 100% {
    -webkit-clip-path: var(--fmaj7);
            clip-path: var(--fmaj7);
    background: var(--aqua); }
  25% {
    -webkit-clip-path: var(--cmaj9);
            clip-path: var(--cmaj9);
    background: var(--red); }
  50% {
    -webkit-clip-path: var(--bmin7);
            clip-path: var(--bmin7);
    background: var(--purple-75); } }

/* VISUAL ELEMENTS */
figure {
  position: relative;
  display: grid; }
  @media (min-width: 600px) {
    figure {
      width: auto;
      left: 0rem;
      width: 100%; } }
  figure img {
    width: 100%;
    border: 1px solid var(--grey2); }
  figure figcaption {
    font-size: var(--fs-1);
    bottom: 0;
    padding: .5em 0 .5em .5em;
    color: var(--grey6); }
    .major-scale figure figcaption {
      text-transform: uppercase;
      color: var(--grey5);
      font-size: var(--fs-1); }

.blockquote {
  position: relative;
  max-width: 50ch;
  font-size: var(--fs3);
  margin: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  /* 	font-style: italic; */
  margin-top: 1em;
  padding-left: 0;
  padding-right: 0;
  color: var(--blockquote-color);
  font-weight: var(--fw-bold);
  -webkit-align-self: center;
          align-self: center; }
  .blockquote > * + * {
    margin-top: 2em; }
  .blockquote:before {
    position: absolute;
    width: var(--sp4);
    height: 8px;
    content: "";
    background: var(--red);
    top: -1em; }
  .blockquote__link {
    font-size: var(--fs-1);
    justify-self: flex-end;
    display: -webkit-flex;
    display: flex;
    font-size: var(--fs0);
    justify-self: flex-end;
    display: flex;
    /* padding: var(--full-pad); */
    font-weight: var(--fw-regular);
    color: var(--red);
    margin-top: 1em; }
    .blockquote__link:after {
      display: block;
      position: relative;
      content: "\2b08";
      margin-left: 1em; }
  .blockquote__label {
    -webkit-order: -1;
            order: -1;
    font-size: var(--fs-1);
    justify-self: flex-end;
    display: -webkit-flex;
    display: flex;
    margin-bottom: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--full-pad); }
  .blockquote__cite {
    /* 	    margin-bottom: var(--sp-2); */
    font-size: var(--fs1);
    justify-self: flex-end;
    color: var(--cite-color);
    font-style: normal;
    font-weight: var(--fw-regular);
    /* display: flex; */
    /* 	    margin-top: var(--sp-2);  */
    /* 	    padding: var(--full-pad); */ }

/* ALBUM COVER IDEA */
.album-cover {
  --cover-bg: var(--off-white);
  --cover-grad: linear-gradient(170deg, var(--off-white) 40%, var(--off-white-0) 40%);
  --cover-title-color: var(--purple-75);
  overflow: hidden;
  display: grid;
  position: relative;
  background-color: var(--cover-bg);
  padding-bottom: 100%;
  border: var(--sp-6) solid var(--cover-bg); }
  .album-cover__text-block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    z-index: 1;
    -webkit-align-content: start;
            align-content: start;
    grid-gap: var(--sp-8);
    /* 		padding: var(--sp-3) var(--sp-1); */
    background: var(--cover-grad); }
  .album-cover__title {
    font-weight: 600;
    font-size: var(--fs1);
    line-height: var(--lh1);
    color: var(--cover-title-color); }
  .album-cover__artist {
    line-height: var(--lh2);
    font-size: var(--fs-1); }
  .album-cover__img {
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-align-self: end;
            align-self: end;
    -o-object-fit: contain;
       object-fit: contain;
    position: absolute;
    height: auto;
    width: 100%;
    -o-object-position: bottom center;
       object-position: bottom center;
    /*
		
		opacity: .8;
	
		background-color: var(--blue);
		background-blend-mode: screen;
*/ }
  .album-cover-1 .cover__text-block {
    -webkit-align-content: space-between;
            align-content: space-between;
    border: var(--sp-2) solid var(--white); }
  .album-cover-1 .cover__title {
    color: var(--blue);
    text-transform: uppercase;
    background: var(--white);
    line-height: 1;
    font-size: var(--fs-1); }
  .album-cover-1 .cover__artist {
    color: var(--blue);
    text-transform: uppercase;
    background: var(--white);
    line-height: 1;
    font-size: var(--fs-1); }
  .album-cover-1 .cover__img {
    opacity: .8;
    /*
				    background-color: var(--off-white);
    background-blend-mode: luminosity;
*/ }
  .album-cover-2 {
    --text-pad: var(--sp0); }
    .album-cover-2 .cover__text-block {
      -webkit-align-content: center;
              align-content: center;
      -webkit-transform: rotate(-10deg);
              transform: rotate(-10deg);
      font-style: italic;
      margin-left: calc(var(--text-pad) * -1);
      width: calc(100% + (2 * var(--text-pad))); }
    .album-cover-2 .cover__title {
      color: var(--white);
      text-transform: uppercase;
      line-height: 1;
      padding: 0 var(--text-pad); }
    .album-cover-2 .cover__artist {
      color: var(--white);
      text-transform: uppercase;
      background: var(--red);
      line-height: 1;
      padding: 0 var(--text-pad); }
    .album-cover-2 .cover__img {
      opacity: .5;
      background-color: var(--aqua);
      background-blend-mode: hard-light; }
  .album-cover-3 {
    --text-pad: var(--sp0);
    background-color: var(--black); }
    .album-cover-3 .cover__text-block {
      -webkit-align-content: flex-end;
              align-content: flex-end;
      line-height: 1;
      text-align: center;
      opacity: 1; }
    .album-cover-3 .cover__title {
      font-size: var(--fs-2);
      color: var(--white);
      text-transform: uppercase;
      line-height: 1;
      padding: 0 var(--text-pad); }
    .album-cover-3 .cover__artist {
      font-size: var(--fs-4);
      color: var(--white);
      text-transform: uppercase;
      /* 			background: var(--red); */
      line-height: 1;
      padding: 0 var(--text-pad); }
    .album-cover-3 .cover__img {
      /* 				border: var(--sp-2) solid; */
      opacity: 1;
      background-color: var(--red);
      background-blend-mode: hard-light;
      border-radius: 50%; }

.tooltip {
  background: var(--white);
  font-size: var(--fs-2);
  position: absolute;
  width: 10rem;
  padding: .2em;
  border: 1px solid; }

/* Promos*/
.promo a {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center; }

.promo__logo {
  height: var(--sp-2);
  margin: var(--sp-4) auto;
  -webkit-align-self: center;
          align-self: center;
  text-align: center;
  box-shadow: none;
  opacity: 1; }
  .promo__logo:hover {
    opacity: .7; }

.rocknroll .l-app__body {
  height: calc(100vh - var(--masthead-heioght)); }

.album {
  --title-fw: 900;
  --title-fs: var(--fs2);
  --title-color: var(--white);
  --title-lh: var(--lh1);
  --light-source: linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  --album-bg: url(../assets/img/mods-2.svg) no-repeat center 50% var(--bright-purple);
  --blend: overlay;
  --shelf-bg: linear-gradient(0deg, #ffffff42 2%, transparent 2%), linear-gradient(0deg, #ffffff42 2%, transparent 2%), linear-gradient(0deg, #00000042 10%, transparent 20%), linear-gradient(180deg, #000000ad 80%, transparent 90%), linear-gradient(180deg, #000000ad 30%, transparent 60%);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 1em;
  /* border-radius: 1em; */
  position: relative;
  background: var(--album-bg);
  background-blend-mode: var(--blend);
  border: var(--card-elevation);
  -webkit-justify-content: space-between;
          justify-content: space-between; }
  .album:hover {
    -webkit-filter: saturate(1.5);
            filter: saturate(1.5); }
    .album:hover h5 {
      opacity: 1;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      visibility: visible;
      transition: var(--dur0) all ease-in; }
    .album:hover button {
      opacity: 1;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      visibility: visible;
      transition: var(--dur0) all ease-in;
      border-radius: 2em; }
  .album h4 {
    position: relative;
    font-size: var(--title-fs);
    font-weight: var(--title-fw);
    color: var(--title-color);
    line-height: var(--title-lh);
    /* 		text-shadow: 0 0 30px var(--red); */
    -webkit-align-self: var(--titte-position-x);
            align-self: var(--titte-position-x);
    justify-self: var(--titte-position-y); }
  .album h5 {
    opacity: 0;
    -webkit-transform: 0;
            transform: 0;
    visibility: hidden;
    transition: var(--dur0) all ease-in; }
  .album button {
    opacity: 0;
    -webkit-transform: 0;
            transform: 0;
    visibility: hidden;
    height: var(--sp2);
    transition: var(--dur0) all ease-in;
    transition-delay: calc(var(--dur0) / 2); }

.vis {
  --album-bg: url(../assets/img/bulb.svg) no-repeat center 50% var(--bright-purple);
  --blend: overlay;
  --titte-position-y: center;
  --titte-position-x: center; }
  .vis h4 {
    position: relative;
    font-size: var(--title-fs);
    font-weight: var(--title-fw);
    color: var(--title-color);
    line-height: var(--title-lh);
    text-shadow: 0 0 30px var(--red);
    -webkit-align-self: var(--titte-position-x);
            align-self: var(--titte-position-x);
    justify-self: var(--titte-position-y); }

.cruz {
  /* Custom */
  --blend: multiply;
  --title-fw: 900;
  --title-fs: var(--fs2);
  --title-color: var(--white);
  --titte-position-y: center;
  --titte-position-x: center;
  --album-bg: 
		repeating-linear-gradient(90deg, #1B64D8, #F50000, 3rem, transparent 3rem, transparent 6rem), 	
		linear-gradient(10deg, #fff, #ccc), 
		linear-gradient(-20deg, rgb(100, 179, 255), #ccc), 
		linear-gradient(-20deg, #222, #ccc), 
		linear-gradient(-32deg, #000, rgba(228, 66, 66, 0.33)), 
		repeating-linear-gradient(-45deg, #222, #222, 2rem, transparent 2rem, transparent 3rem),
		radial-gradient(circle at center center, #000, #fff), 
		repeating-radial-gradient(circle at center center, #222, #222, 2rem, transparent 2rem, transparent 3rem),
		repeating-radial-gradient(circle at center center, #222, #222, 2rem, transparent 2rem, transparent 3rem); }
  .cruz h4 {
    position: relative;
    font-size: var(--title-fs);
    font-weight: var(--title-fw);
    color: var(--title-color);
    line-height: var(--title-lh);
    text-shadow: 0 0 30px var(--red); }

.blues {
  --blend: overlay;
  --album-bg: var(--blue);
  --title-fw: 100;
  --title-fs: var(--fs2);
  --title-color: var(--white);
  --title-lh: var(--lh1);
  --album-bg: linear-gradient(45deg, #bf3636, #ff7373e6); }
  .blues h4 {
    text-transform: uppercase;
    position: relative;
    font-size: var(--title-fs);
    font-weight: var(--title-fw);
    color: var(--title-color);
    line-height: var(--title-lh);
    text-shadow: 0 0 30px var(--red), 0 0 60px var(--black);
    -webkit-align-self: flex-end;
            align-self: flex-end;
    padding: 1rem; }

.jazz {
  background: var(--black);
  --title-fw: 100;
  --title-fs: var(--fs2);
  --title-color: var(--white);
  --title-lh: var(--lh1); }
  .jazz h4 {
    position: relative;
    font-size: var(--title-fs);
    font-weight: var(--title-fw);
    color: var(--title-color);
    line-height: var(--title-lh);
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    /* 	text-shadow: 0 0 30px var(--red), 0 0 60px var(--black); */
    margin: auto;
    padding: 1rem; }

.cruz-2 {
  display: -webkit-flex;
  display: flex;
  justify-items: center;
  -webkit-align-items: center;
          align-items: center;
  height: 100vh;
  width: 100%;
  position: relative;
  background: repeating-linear-gradient(90deg, var(--red), var(--light-blue), 3rem, transparent 3rem, transparent 6rem), linear-gradient(10deg, var(--off-white), var(--grey6)), linear-gradient(-20deg, var(--aqua), var(--grey4)), linear-gradient(-20deg, var(--ink), var(--grey4)), linear-gradient(-32deg, var(--black), var(--off-white)), repeating-linear-gradient(-45deg, var(--black), var(--black), 2rem, transparent 2rem, transparent 3rem), radial-gradient(circle at center center, var(--black), var(--off-white)), repeating-radial-gradient(circle at center center, var(--black), var(--black), 2rem, transparent 2rem, transparent 3rem), repeating-radial-gradient(circle at center center, var(--black), var(--black), 2rem, transparent 2rem, transparent 3rem);
  background-blend-mode: overlay; }
  .cruz-2 h4 {
    text-transform: uppercase;
    position: relative;
    margin: auto;
    display: -webkit-flex;
    display: flex;
    font-size: var(--fs4);
    font-weight: 900;
    color: var(--white);
    text-shadow: 0 0 30px var(--red);
    -webkit-align-self: center;
            align-self: center;
    height: auto;
    justify-self: center;
    /* top: 50%; */
    text-align: center;
    line-height: var(--lh1); }

@keyframes changer {
  from {
    --deg1: -20deg;
    --col1: var(--aqua);
    --col2: var(--red); }
  to {
    --deg1: 180deg;
    --col1: var(--blue);
    --col2: var(--aqua); } }

.cruz-v {
  --deg1: -20deg;
  --col1: var(--aqua-05);
  --col2: var(--blue-05);
  display: -webkit-flex;
  display: flex;
  justify-items: center;
  -webkit-align-items: center;
          align-items: center;
  height: 100vh;
  width: 100%;
  position: relative;
  background: repeating-linear-gradient(90deg, var(--col1), var(--col2), 3rem, transparent 3rem, transparent 6rem), repeating-radial-gradient(circle at center center, var(--col1), var(--col2), 2rem, transparent 2rem, transparent 3rem), linear-gradient(var(--deg1), var(--col1), var(--col2));
  /*
linear-gradient(-20deg, var(--ink), var(--grey4)), 
		linear-gradient(-32deg, var(--black), var(--off-white)), 
		
		repeating-linear-gradient(-45deg, var(--black), var(--black), 2rem, transparent 2rem, transparent 3rem),
		
		radial-gradient(circle at center center, var(--black), var(--off-white)), 
		repeating-radial-gradient(circle at center center, var(--black), var(--black), 2rem, transparent 2rem, transparent 3rem),
		repeating-radial-gradient(circle at center center, var(--black), var(--black), 2rem, transparent 2rem, transparent 3rem);
*/
  background-blend-mode: overlay; }
  .cruz-v h4 {
    text-transform: uppercase;
    position: relative;
    margin: auto;
    display: -webkit-flex;
    display: flex;
    font-size: var(--fs4);
    font-weight: 900;
    color: var(--white);
    text-shadow: 0 0 30px var(--red);
    -webkit-align-self: center;
            align-self: center;
    height: auto;
    justify-self: center;
    /* top: 50%; */
    text-align: center;
    line-height: var(--lh1); }

@keyframes tempo {
  from {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit; } }

@keyframes a-list {
  from {
    -webkit-transform: translate(-10px, -20px);
            transform: translate(-10px, -20px);
    width: 0;
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translate(0px 0px);
            transform: translate(0px 0px);
    opacity: 1;
    border-color: inherit; } }

@keyframes a-grid {
  from {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
    border-color: inherit; } }

@keyframes scale-up {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    border-color: inherit; } }

@-webkit-keyframes scale-in {
  from {
    -webkit-transform: scale(12);
            transform: scale(12);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    border-color: inherit; } }

@keyframes scale-in {
  from {
    -webkit-transform: scale(12);
            transform: scale(12);
    opacity: 0;
    border-color: transparent; }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    border-color: inherit; } }

.animated .l-ex--app {
  width: 600px;
  -webkit-animation: 2s scale-in ease-out;
          animation: 2s scale-in ease-out; }

.animated .l-ex > * {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: 1s list infinite linear;
          animation: 1s list infinite linear;
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }
  .animated .l-ex > *:nth-child(1) {
    -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important; }
  .animated .l-ex > *:nth-child(2) {
    -webkit-animation-delay: 0.05s !important;
            animation-delay: 0.05s !important; }
  .animated .l-ex > *:nth-child(3) {
    -webkit-animation-delay: 0.1s !important;
            animation-delay: 0.1s !important; }
  .animated .l-ex > *:nth-child(4) {
    -webkit-animation-delay: 0.15s !important;
            animation-delay: 0.15s !important; }
  .animated .l-ex > *:nth-child(5) {
    -webkit-animation-delay: 0.2s !important;
            animation-delay: 0.2s !important; }

.animated .l-ex--workspace {
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }
  .animated .l-ex--workspace > * {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation: 1s tempo linear;
            animation: 1s tempo linear;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; }
    .animated .l-ex--workspace > *:nth-child(1) {
      -webkit-animation-delay: 0s !important;
              animation-delay: 0s !important; }
    .animated .l-ex--workspace > *:nth-child(2) {
      -webkit-animation-delay: 0.2s !important;
              animation-delay: 0.2s !important; }
    .animated .l-ex--workspace > *:nth-child(3) {
      -webkit-animation-delay: 0.4s !important;
              animation-delay: 0.4s !important; }
    .animated .l-ex--workspace > *:nth-child(4) {
      -webkit-animation-delay: 0.6s !important;
              animation-delay: 0.6s !important; }
    .animated .l-ex--workspace > *:nth-child(5) {
      -webkit-animation-delay: 0.8s !important;
              animation-delay: 0.8s !important; }

.animated .l-ex--list {
  width: 100%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s; }
  .animated .l-ex--list > * {
    opacity: 1;
    width: 100%;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation: 1s a-list ease-out;
            animation: 1s a-list ease-out;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; }
    .animated .l-ex--list > *:nth-child(1) {
      -webkit-animation-delay: 0s !important;
              animation-delay: 0s !important; }
    .animated .l-ex--list > *:nth-child(2) {
      -webkit-animation-delay: 0.2s !important;
              animation-delay: 0.2s !important; }
    .animated .l-ex--list > *:nth-child(3) {
      -webkit-animation-delay: 0.4s !important;
              animation-delay: 0.4s !important; }
    .animated .l-ex--list > *:nth-child(4) {
      -webkit-animation-delay: 0.6s !important;
              animation-delay: 0.6s !important; }
    .animated .l-ex--list > *:nth-child(5) {
      -webkit-animation-delay: 0.8s !important;
              animation-delay: 0.8s !important; }
    .animated .l-ex--list > *:nth-child(6) {
      -webkit-animation-delay: 1s !important;
              animation-delay: 1s !important; }
    .animated .l-ex--list > *:nth-child(7) {
      -webkit-animation-delay: 1.2s !important;
              animation-delay: 1.2s !important; }
    .animated .l-ex--list > *:nth-child(8) {
      -webkit-animation-delay: 1.4s !important;
              animation-delay: 1.4s !important; }
    .animated .l-ex--list > *:nth-child(9) {
      -webkit-animation-delay: 1.6s !important;
              animation-delay: 1.6s !important; }
    .animated .l-ex--list > *:nth-child(10) {
      -webkit-animation-delay: 1.8s !important;
              animation-delay: 1.8s !important; }
    .animated .l-ex--list > *:nth-child(11) {
      -webkit-animation-delay: 2s !important;
              animation-delay: 2s !important; }
    .animated .l-ex--list > *:nth-child(12) {
      -webkit-animation-delay: 2.2s !important;
              animation-delay: 2.2s !important; }
    .animated .l-ex--list > *:nth-child(13) {
      -webkit-animation-delay: 2.4s !important;
              animation-delay: 2.4s !important; }
    .animated .l-ex--list > *:nth-child(14) {
      -webkit-animation-delay: 2.6s !important;
              animation-delay: 2.6s !important; }
    .animated .l-ex--list > *:nth-child(15) {
      -webkit-animation-delay: 2.8s !important;
              animation-delay: 2.8s !important; }
    .animated .l-ex--list > *:nth-child(16) {
      -webkit-animation-delay: 3s !important;
              animation-delay: 3s !important; }
    .animated .l-ex--list > *:nth-child(17) {
      -webkit-animation-delay: 3.2s !important;
              animation-delay: 3.2s !important; }
    .animated .l-ex--list > *:nth-child(18) {
      -webkit-animation-delay: 3.4s !important;
              animation-delay: 3.4s !important; }
    .animated .l-ex--list > *:nth-child(19) {
      -webkit-animation-delay: 3.6s !important;
              animation-delay: 3.6s !important; }
    .animated .l-ex--list > *:nth-child(20) {
      -webkit-animation-delay: 3.8s !important;
              animation-delay: 3.8s !important; }

.animated .l-ex--grid > * {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: 1s a-grid ease-out;
          animation: 1s a-grid ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }
  .animated .l-ex--grid > *:nth-child(1) {
    -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important; }
  .animated .l-ex--grid > *:nth-child(2) {
    -webkit-animation-delay: 0.2s !important;
            animation-delay: 0.2s !important; }
  .animated .l-ex--grid > *:nth-child(3) {
    -webkit-animation-delay: 0.4s !important;
            animation-delay: 0.4s !important; }
  .animated .l-ex--grid > *:nth-child(4) {
    -webkit-animation-delay: 0.6s !important;
            animation-delay: 0.6s !important; }
  .animated .l-ex--grid > *:nth-child(5) {
    -webkit-animation-delay: 0.8s !important;
            animation-delay: 0.8s !important; }
  .animated .l-ex--grid > *:nth-child(6) {
    -webkit-animation-delay: 1s !important;
            animation-delay: 1s !important; }
  .animated .l-ex--grid > *:nth-child(7) {
    -webkit-animation-delay: 1.2s !important;
            animation-delay: 1.2s !important; }
  .animated .l-ex--grid > *:nth-child(8) {
    -webkit-animation-delay: 1.4s !important;
            animation-delay: 1.4s !important; }
  .animated .l-ex--grid > *:nth-child(9) {
    -webkit-animation-delay: 1.6s !important;
            animation-delay: 1.6s !important; }
  .animated .l-ex--grid > *:nth-child(10) {
    -webkit-animation-delay: 1.8s !important;
            animation-delay: 1.8s !important; }
  .animated .l-ex--grid > *:nth-child(11) {
    -webkit-animation-delay: 2s !important;
            animation-delay: 2s !important; }
  .animated .l-ex--grid > *:nth-child(12) {
    -webkit-animation-delay: 2.2s !important;
            animation-delay: 2.2s !important; }
  .animated .l-ex--grid > *:nth-child(13) {
    -webkit-animation-delay: 2.4s !important;
            animation-delay: 2.4s !important; }
  .animated .l-ex--grid > *:nth-child(14) {
    -webkit-animation-delay: 2.6s !important;
            animation-delay: 2.6s !important; }
  .animated .l-ex--grid > *:nth-child(15) {
    -webkit-animation-delay: 2.8s !important;
            animation-delay: 2.8s !important; }
  .animated .l-ex--grid > *:nth-child(16) {
    -webkit-animation-delay: 3s !important;
            animation-delay: 3s !important; }
  .animated .l-ex--grid > *:nth-child(17) {
    -webkit-animation-delay: 3.2s !important;
            animation-delay: 3.2s !important; }
  .animated .l-ex--grid > *:nth-child(18) {
    -webkit-animation-delay: 3.4s !important;
            animation-delay: 3.4s !important; }
  .animated .l-ex--grid > *:nth-child(19) {
    -webkit-animation-delay: 3.6s !important;
            animation-delay: 3.6s !important; }
  .animated .l-ex--grid > *:nth-child(20) {
    -webkit-animation-delay: 3.8s !important;
            animation-delay: 3.8s !important; }

.spinner-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--off-white);
  z-index: 999999; }

.circle--1 {
  width: 2.4em;
  height: 2.4em;
  opacity: .05;
  background: #ffd500;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s; }

.circle--2 {
  width: 4.8em;
  height: 4.8em;
  opacity: .05;
  background: #55ff00;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s; }

.circle--3 {
  width: 7.2em;
  height: 7.2em;
  opacity: .05;
  background: #00ff80;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  -webkit-animation-duration: 0.9s;
          animation-duration: 0.9s; }

.circle--4 {
  width: 9.6em;
  height: 9.6em;
  opacity: .05;
  background: #00aaff;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s; }

.circle--5 {
  width: 12em;
  height: 12em;
  opacity: .05;
  background: #2b00ff;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s; }

.circle--6 {
  width: 14.4em;
  height: 14.4em;
  opacity: .05;
  background: magenta;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s; }

.circle--7 {
  width: 16.8em;
  height: 16.8em;
  opacity: .05;
  background: #ff002b;
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
  -webkit-animation-duration: 2.1s;
          animation-duration: 2.1s; }

.circle--8 {
  width: 19.2em;
  height: 19.2em;
  opacity: .05;
  background: #ffaa00;
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
  -webkit-animation-duration: 2.4s;
          animation-duration: 2.4s; }

.circle--9 {
  width: 21.6em;
  height: 21.6em;
  opacity: .05;
  background: #80ff00;
  -webkit-animation-delay: 2.7s;
          animation-delay: 2.7s;
  -webkit-animation-duration: 2.7s;
          animation-duration: 2.7s; }

.circle--10 {
  width: 24em;
  height: 24em;
  opacity: .05;
  background: #00ff55;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s; }

.circle--11 {
  width: 26.4em;
  height: 26.4em;
  opacity: .05;
  background: #00d5ff;
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
  -webkit-animation-duration: 3.3s;
          animation-duration: 3.3s; }

.circle--12 {
  width: 28.8em;
  height: 28.8em;
  opacity: .05;
  background: blue;
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
  -webkit-animation-duration: 3.6s;
          animation-duration: 3.6s; }

.circle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-20, -20, 0);
          transform: translate3d(-20, -20, 0);
  content: ''; }

.tl {
  /*
	display: grid;
	grid-template-columns: repeat(20, 1fr);
	
*/
  /*
	display: flex;
	flex: 1 0 100%;
*/
  --year: calc(100% / 20);
  --month: calc(var(--year) / 12);
  /*
	.year {
	display: inline-flex;
    position: relative;
    border-right: 1px solid #ccc;
    height: 100%;
    width: calc(100% / 20 - 10px);
    }
	
*/ }
  .tl__track {
    height: 30px;
    position: relative;
    width: 100%;
    border-bottom: 1px solid;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-areas: "2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020", "2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020", "2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020";
    grid-template-rows: repeat(3, 1fr);
    height: 200px;
    background: linear-gradient(90deg, var(--off-white) 99%, var(--grey4) 1%);
    background-repeat: repeat;
    background-size: 5% 100%; }
  .tl .event {
    font-size: var(--fs-2);
    line-height: 1.1;
    background: var(--white);
    padding: .5em;
    width: 100%;
    position: absolute;
    border: 1px solid var(--grey4);
    top: -50px;
    border-radius: .2em; }
    .tl .event:hover {
      box-shadow: 10px 10px var(--light-blue), -10px 10px var(--aqua-05), -10px -10px var(--light-blue), 10px -10px var(--aqua-05);
      z-index: 3; }
    .tl .event[data-event="spotify"] {
      grid-column: 6 / span 3; }
    .tl .event[data-event="razorcuts"] {
      grid-column: 1 / span 3; }
    .tl .event[data-event="readers-digest"] {
      grid-column: 2 / span 3; }
    .tl .event[data-event="itunes"] {
      grid-column: 3 / span 3; }

#chords .c {
  --note: 0; }

#chords .db {
  --note: 30; }

#chords .d {
  --note: 60; }

#chords .eb {
  --note: 90; }

#chords .e {
  --note: 120; }

#chords .f {
  --note: 150; }

#chords .gb {
  --note: 180; }

#chords .g {
  --note: 210; }

#chords .ab {
  --note: 240; }

#chords .a {
  --note: 270; }

#chords .bb {
  --note: 300; }

#chords .b {
  --note: 330; }

#chords path {
  stroke-dasharray: 900px;
  stroke-dashoffset: 900px;
  stroke-width: 1;
  -webkit-animation: draw 2s linear infinite;
          animation: draw 2s linear infinite;
  stroke: hsla(var(--note), 100%, 50%, 0.5); }
  #chords path:nth-child(2) {
    -webkit-animation-delay: .5s;
            animation-delay: .5s; }
  #chords path:nth-child(3) {
    -webkit-animation-delay: 1s;
            animation-delay: 1s; }

.base {
  fill: var(--yellow-5);
  stroke: var(--off-white-5);
  stroke-width: 2px;
  /* Stroke-dasharray property */
  /*
    stroke-dasharray: 50; 
    stroke-dashoffset: 50;
*/
  stroke-dasharray: 100px;
  stroke-dashoffset: 100px;
  /*    animation: move 2s linear infinite;      */
  -webkit-animation: bulb 2s linear infinite;
          animation: bulb 2s linear infinite;
  -webkit-animation-direction: both;
          animation-direction: both; }

.head {
  fill: var(--light-blue);
  stroke: var(--blue);
  stroke-width: 2px;
  /* Stroke-dasharray property */
  /*
    stroke-dasharray: 50; 
    stroke-dashoffset: 50;
*/
  stroke-dasharray: 10px;
  stroke-dashoffset: 10px;
  /*    animation: move 2s linear infinite;      */
  -webkit-animation: draw 1s linear infinite;
          animation: draw 1s linear infinite;
  stroke: rgba(255, 255, 255, 0.63);
  stroke-width: 2px;
  stroke-dasharray: 500px;
  stroke-dashoffset: 1000px; }
  .head-2 {
    -webkit-animation-delay: .5s;
            animation-delay: .5s; }

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0; } }

@keyframes draw {
  100% {
    stroke-dashoffset: 0; } }

@-webkit-keyframes bulb {
  0%, 100% {
    fill: var(--yellow-5); }
  50% {
    fill: var(--yellow); } }

@keyframes bulb {
  0%, 100% {
    fill: var(--yellow-5); }
  50% {
    fill: var(--yellow); } }

.typescale > * {
  opacity: 0;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: 1s a-grid ease-out;
          animation: 1s a-grid ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }
  .typescale > *:nth-child(1) {
    -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important; }
  .typescale > *:nth-child(2) {
    -webkit-animation-delay: 0.2s !important;
            animation-delay: 0.2s !important; }
  .typescale > *:nth-child(3) {
    -webkit-animation-delay: 0.4s !important;
            animation-delay: 0.4s !important; }
  .typescale > *:nth-child(4) {
    -webkit-animation-delay: 0.6s !important;
            animation-delay: 0.6s !important; }
  .typescale > *:nth-child(5) {
    -webkit-animation-delay: 0.8s !important;
            animation-delay: 0.8s !important; }
  .typescale > *:nth-child(6) {
    -webkit-animation-delay: 1s !important;
            animation-delay: 1s !important; }
  .typescale > *:nth-child(7) {
    -webkit-animation-delay: 1.2s !important;
            animation-delay: 1.2s !important; }
  .typescale > *:nth-child(8) {
    -webkit-animation-delay: 1.4s !important;
            animation-delay: 1.4s !important; }
  .typescale > *:nth-child(9) {
    -webkit-animation-delay: 1.6s !important;
            animation-delay: 1.6s !important; }
  .typescale > *:nth-child(10) {
    -webkit-animation-delay: 1.8s !important;
            animation-delay: 1.8s !important; }
  .typescale > *:nth-child(11) {
    -webkit-animation-delay: 2s !important;
            animation-delay: 2s !important; }
  .typescale > *:nth-child(12) {
    -webkit-animation-delay: 2.2s !important;
            animation-delay: 2.2s !important; }
  .typescale > *:nth-child(13) {
    -webkit-animation-delay: 2.4s !important;
            animation-delay: 2.4s !important; }
  .typescale > *:nth-child(14) {
    -webkit-animation-delay: 2.6s !important;
            animation-delay: 2.6s !important; }
  .typescale > *:nth-child(15) {
    -webkit-animation-delay: 2.8s !important;
            animation-delay: 2.8s !important; }
  .typescale > *:nth-child(16) {
    -webkit-animation-delay: 3s !important;
            animation-delay: 3s !important; }
  .typescale > *:nth-child(17) {
    -webkit-animation-delay: 3.2s !important;
            animation-delay: 3.2s !important; }
  .typescale > *:nth-child(18) {
    -webkit-animation-delay: 3.4s !important;
            animation-delay: 3.4s !important; }
  .typescale > *:nth-child(19) {
    -webkit-animation-delay: 3.6s !important;
            animation-delay: 3.6s !important; }
  .typescale > *:nth-child(20) {
    -webkit-animation-delay: 3.8s !important;
            animation-delay: 3.8s !important; }

.typescale p {
  display: inline;
  font-weight: 600; }

.typescale .fs-1 {
  font-size: var(--fs5); }

.typescale .fs-2 {
  font-size: var(--fs4); }

.typescale .fs-3 {
  font-size: var(--fs3); }

.typescale .fs-4 {
  font-size: var(--fs2); }

.typescale .fs-5 {
  font-size: var(--fs1); }

.typescale .fs-6 {
  font-size: var(--fs0); }

.spacescale {
  display: grid;
  /* clear: both; */
  grid-template-columns: repeat(6, -webkit-min-content);
  grid-template-columns: repeat(6, min-content); }
  .spacescale p {
    background: var(--red);
    margin-right: 1.18em; }
  .spacescale .fs-1 {
    height: var(--fs5);
    width: var(--fs5); }
  .spacescale .fs-2 {
    height: var(--fs4);
    width: var(--fs4); }
  .spacescale .fs-3 {
    height: var(--fs3);
    width: var(--fs3); }
  .spacescale .fs-4 {
    height: var(--fs2);
    width: var(--fs2); }
  .spacescale .fs-5 {
    height: var(--fs1);
    width: var(--fs1); }
  .spacescale .fs-6 {
    height: var(--fs0);
    width: var(--fs0); }

.preload {
  /*
	height: 100vh;
    width: 100vw;
    position: relative;
	background: #CCC;		
	
	
			&:after {
			    z-index: 2;
			    position: absolute;
			    margin: auto;
			    top: 0;
			    bottom: 0;
			    left: 0;
			    right: 0;
			    width: 100px;
			    height: 100px;
			    content: "";
			    background: #c00;
			    clip-path: var(--cmin);
			}
*/
  /*
		.preload & {
		
			z-index: 10;
			opacity: 1;
			transform: translate(0,0);
			
		}
*/ }

.wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  padding: 0; }
  @media (min-width: 989px) {
    .wrapper {
      /* 						max-width: 1440px; */ } }
html {
  scroll-behavior: smooth; }

a:target:before {
  content: "";
  display: block;
  height: calc(var(--masthead-height) * 2); }

.l-app {
  -webkit-overflow-scrolling: touch;
  /* 		RESPONSIVE PADDINGS */
  --section-pad: var(--sp0) var(--sp-2);
  --pad1: var(--sp2) var(--sp0);
  --pad: var(--sp-2);
  --slim-pad: var(--sp-2) var(--sp-2);
  --slab-pad: var(--sp2) var(--sp-2);
  --slab-pad--slim: var(--sp-4) var(--sp-2);
  --full-pad:	var(--sp0) var(--sp-2);
  /*
		@include bp(mid-min){
				
			--slim-pad: var(--sp-2) calc(var(--pad) + var(--sz0));
			
		}		
*/
  /*
		@include bp(mid-min){
				
					--full-pad: var(--sp0) calc(var(--pad) + var(--sz0));
					}
		
		@include bp(lrg-min){
				
				--section-pad: var(--sp0) calc(var(--pad) + var(--sz0));
				
				}
*/
  display: grid;
  position: relative;
  background: var(--app-bg); }
  @media (min-width: 600px) {
    .l-app {
      --slab-pad: var(--sp2) calc(var(--pad) + var(--sz1) - 5px);
      --slab-pad--slim: var(--sp-4) calc(var(--pad) + var(--sz1) - 5px);
      --slab-pad--slim: var(--sp-4) calc(var(--pad) + var(--sz1) - 5px); } }
  @media (min-width: 600px) {
    .l-app {
      --pad: var(--sp0); } }
  .l-app__nav {
    height: var(--masthead-height);
    z-index: var(--z-app-header);
    position: fixed;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    background: var(--header-bg);
    padding: var(--slab-pad--slim); }
  .l-app__header {
    opacity: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 6000;
    width: 100%;
    height: var(--masthead-height);
    padding: 0 var(--sp-2);
    -webkit-animation: 1s fade ease-out;
            animation: 1s fade ease-out;
    -webkit-animation-delay: .5s;
            animation-delay: .5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
            align-items: stretch;
    padding: 0 var(--sp-2);
    z-index: 10;
    background: var(--masthead-bg);
    -webkit-justify-content: space-between;
            justify-content: space-between; }
    .l-app__header .logo {
      display: -webkit-flex;
      display: flex;
      -webkit-flex: 0 0 auto;
              flex: 0 0 auto;
      margin: auto 0;
      margin-right: var(--sp0); }
      .l-app__header .logo .img-bg {
        background-size: cover;
        width: var(--sz0);
        height: var(--sz0); }
    .l-app__header .wrapper {
      display: -webkit-flex;
      display: flex; }
  .l-app__body {
    opacity: 0;
    display: grid;
    position: relative;
    -webkit-animation: 1s fade ease-out;
            animation: 1s fade ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    padding-top: var(--masthead-height);
    /* 			grid-gap: var(--sp0); */ }
  .l-app__workspace {
    opacity: 0;
    display: grid;
    position: relative;
    -webkit-animation: 1s fade ease-out;
            animation: 1s fade ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; }
  .l-app.blocker {
    height: 100vh;
    opacity: .1;
    overflow: hidden; }
  .l-app .l-more {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }
    .l-app .l-more__title {
      -webkit-flex: 1 0 100%;
              flex: 1 0 100%;
      padding: var(--sp-4) var(--sp-2); }
    .l-app .l-more__back {
      display: -webkit-flex;
      display: flex;
      -webkit-flex: 0 0 50%;
              flex: 0 0 50%; }
    .l-app .l-more__forward {
      display: -webkit-flex;
      display: flex;
      -webkit-flex: 0 0 50%;
              flex: 0 0 50%; }
    .l-app .l-more .more {
      padding: var(--sp-2);
      color: var(--body-bg); }
  .l-app--mods .l-more {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap; }
    .l-app--mods .l-more__title {
      -webkit-flex: 1 0 100%;
              flex: 1 0 100%;
      padding: var(--sp-4) var(--sp-2); }
    .l-app--mods .l-more__back {
      display: -webkit-flex;
      display: flex;
      -webkit-flex: 0 0 50%;
              flex: 0 0 50%; }
    .l-app--mods .l-more__forward {
      display: -webkit-flex;
      display: flex;
      -webkit-flex: 0 0 50%;
              flex: 0 0 50%; }
    .l-app--mods .l-more .more {
      padding: var(--sp-2);
      color: var(--body-bg); }
  .l-app--mods .l-top {
    display: grid;
    grid-template-columns: minmax(var(--sp-2), 1fr) minmax(auto, 57ch) minmax(auto, 57ch) minmax(var(--sp-2), 1fr);
    background: var(--intro-bg);
    height: auto;
    min-height: 50vh; }
    .l-app--mods .l-top__title {
      font-size: var(--fs6);
      line-height: 1; }
    .l-app--mods .l-top__text {
      display: grid;
      -webkit-align-items: center;
              align-items: center;
      -webkit-justify-content: center;
              justify-content: center;
      grid-column: 2; }
    .l-app--mods .l-top__visual {
      display: grid;
      -webkit-align-items: center;
              align-items: center;
      -webkit-justify-content: center;
              justify-content: center;
      grid-column: 3; }
  .l-app--mods .l-mods {
    display: grid;
    grid-template-columns: minmax(var(--sp-2), 1fr) minmax(auto, 57ch) minmax(var(--sp-2), 1fr);
    grid-gap: 2em 0;
    padding: var(--sp2) 0;
    /*
 &__body {
				    display: grid;
				    grid-column: 2 / span 1;
				    padding: var(--full-pad);
				}
*/ }
    .l-app--mods .l-mods img, .l-app--mods .l-mods blockquote, .l-app--mods .l-mods .article__intro {
      grid-column: 1 / 4;
      max-width: 100%;
      justify-self: center; }
    .l-app--mods .l-mods .article__intro {
      font-weight: var(--fw-semi); }
      .l-app--mods .l-mods .article__intro > * + * {
        margin-top: 2em; }
    .l-app--mods .l-mods p, .l-app--mods .l-mods ul {
      grid-column: 2 / span 1; }
    .l-app--mods .l-mods .blockquote {
      background-image: url(../assets/img/miles.png);
      background-color: var(--light-blue);
      background-blend-mode: overlay;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right;
      padding: 1em; }
  .l-app--mods .l-intro {
    display: grid;
    grid-template-columns: minmax(var(--sp-2), 1fr) minmax(auto, 1440px) minmax(var(--sp-2), 1fr);
    background: var(--intro-bg);
    grid-template-areas: ".text . " ". visual ."; }
    @media (min-width: 989px) {
      .l-app--mods .l-intro {
        grid-template-columns: minmax(var(--sp-2), 1fr) minmax(auto, 1440px) minmax(auto, 1440px) minmax(var(--sp-2), 1fr);
        grid-template-areas: ". text visual ."; } }
    .l-app--mods .l-intro .wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column: 2;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
              flex-direction: row;
      -webkit-flex-wrap: wrap;
              flex-wrap: wrap; }
    .l-app--mods .l-intro__text {
      display: -webkit-flex;
      display: flex;
      grid-area: text;
      -webkit-flex: 1 0 30%;
              flex: 1 0 30%;
      -webkit-flex-direction: column;
              flex-direction: column;
      -webkit-align-items: flex-start;
              align-items: flex-start;
      -webkit-justify-content: center;
              justify-content: center; }
    .l-app--mods .l-intro__visual {
      padding: var(--slab-pad);
      -webkit-flex: 1 0 auto;
              flex: 1 0 auto;
      display: -webkit-flex;
      display: flex;
      grid-area: visual; }
      .l-app--mods .l-intro__visual svg {
        height: auto;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: flex-start;
                align-items: flex-start;
        max-width: 100%;
        width: 100%; }

.app {
  --pad: var(--sp2);
  --gap: var(--sp-2);
  --slab-pad: var(--sp2) var(--sp-2);
  --full-pad: 
			var(--sp0) var(--sp-2);
  display: grid;
  position: relative;
  background: var(--app-bg); }
  @media (min-width: 600px) {
    .app {
      --slab-pad: 
				
				var(--sp2) calc(var(--pad) + var(--sz0)); } }
  @media (min-width: 600px) {
    .app {
      --full-pad: 
				
					var(--sp0) calc(var(--pad) + var(--sz0)); } }
  .app__header {
    opacity: 0;
    position: fixed;
    z-index: 6000;
    grid-area: header;
    background: VAR(--header-bg);
    width: 100%;
    -webkit-animation: 1s fade ease-out;
            animation: 1s fade ease-out;
    -webkit-animation-delay: .5s;
            animation-delay: .5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards; }
    .app__header .wrapper {
      display: -webkit-flex;
      display: flex; }
  .app__body {
    opacity: 0;
    display: grid;
    position: relative;
    margin-top: var(--masthead-height);
    -webkit-animation: 1s fade ease-out;
            animation: 1s fade ease-out;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; }

.workspace {
  display: grid;
  /*
&.article {
	padding-top: var(--masthead-height);
}	
*/
  /*
.l-mods {
			    display: grid;
			    grid-template-columns: 
			  
				    minmax(var(--sp-2), 1fr)
				    minmax(auto, 57ch)
				    minmax(var(--sp-2), 1fr);
				    
				grid-gap: 2em 0;
				padding: var(--sp2) 0;

			    img, blockquote, .article__intro, .article__body {
				  grid-column: 1 / 4;
				  max-width: 100%;
				  justify-self: center;
				}
				


				p, ul  {
					grid-column: 2 / span 1;
			
				}
				
				.blockquote {
				    background-image: url(../assets/img/miles.png);
				    background-color: var(--light-blue);
				    background-blend-mode: overlay;
				    background-size: contain;
				    background-repeat: no-repeat;
				    background-position: right;
				    padding: 1em;
			
				}



			}
*/ }
  .workspace .article {
    display: grid;
    /*
&__intro  {
		
				display: grid;
			    grid-template-columns: 
			  
				    minmax(var(--sp-2), 1fr)
				    minmax(auto, 37em)
				    minmax(var(--sp-2), 1fr);
				    
				grid-gap: 2em 0;
				padding: var(--sp2) 0;
				
				background: var(--blue-01);
				
				grid-column: 1 / span 4;

				font-weight: var(--fw-semi);
				
				
				& > * + * {
					    margin-top: 2em;
					}
					
					p, ul  {
						grid-column: 2 / span 1;
			
					}

					}
*/ }
    .workspace .article__header {
      grid-column: 1 / span 4; }

.active {
  --pad1: var(--sp-2); }
  .active .l-app__header {
    padding: 0 var(--sp-2);
    height: var(--masthead-height);
    background: var(--white); }
  .active .l-app__body {
    height: calc(100vh - var(--masthead-height));
    margin-top: var(--masthead-height); }

/*
@import "layouts/_news";
@import "layouts/_pres";
*/
.panel {
  --panel-padding: var(--sp-2);
  --panel-background: var(--white);
  --panel-int-shadow:  0 0 60px var(--grey2);
  --panel-header-height: var(--sp3);
  --panel-height: 100%;
  font-size: var(--fs0);
  display: grid;
  -webkit-flex-direction: column;
          flex-direction: column;
  background: var(--panel-background);
  position: relative;
  overflow: hidden; }
  .panel .close__trigger {
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: center;
            align-self: center;
    opacity: 0;
    transition: 0.5s cubic-bezier(0.38, 0.01, 0.24, 0.99);
    stroke: var(--grey5); }
    .panel .close__trigger:hover {
      stroke: var(--grey8); }
  .panel .dd__trigger {
    position: relative; }
  .panel .dd__menu {
    position: absolute;
    display: none;
    opacity: 0; }
  .panel .dd:hover .dd__menu {
    width: 10rem;
    display: -webkit-flex;
    display: flex;
    opacity: 1;
    top: 24px;
    right: -8px;
    background: #fff;
    display: flex;
    opacity: 1;
    -webkit-flex-direction: column;
            flex-direction: column;
    font-size: var(--fs-1); }
  .panel__interaction {
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: center;
            align-self: center;
    position: relative;
    -webkit-flex: 0 0 16px;
            flex: 0 0 16px;
    height: 16px;
    opacity: 1; }
    .panel__interaction svg {
      stroke: var(--grey4); }
      .panel__interaction svg:hover {
        stroke: var(--grey8);
        cursor: pointer; }
  .panel__header {
    display: -webkit-flex;
    display: flex;
    border-bottom: var(--line1);
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-align-items: center;
            align-items: center;
    height: var(--panel-header-height);
    box-shadow: var(--panel-int-shadow);
    padding: 0 var(--panel-padding); }
    @media (min-width: 600px) {
      .panel__header {
        padding: 0 var(--panel-padding); } }
  .panel__content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    /* 	overflow-y: scroll; */
    padding: var(--panel-padding); }
    @media (min-width: 600px) {
      .panel__content {
        padding: var(--panel-padding); } }
    .panel__content:empty {
      background: #ccc; }
  .panel__label {
    font-size: var(--fs0); }
  .panel__title {
    font-size: var(--fs0); }
  .panel__cta {
    display: -webkit-flex;
    display: flex;
    font-size: var(--fs-3); }
  .panel__footer {
    display: -webkit-flex;
    display: flex;
    padding: var(--panel-padding);
    box-shadow: var(--panel-int-shadow); }
    @media (min-width: 600px) {
      .panel__footer {
        padding: var(--panel-padding); } }
  .panel--right {
    --right-panel-width: 48rem;
    display: grid;
    grid-template-rows: var(--panel-header-height) auto -webkit-max-content;
    grid-template-rows: var(--panel-header-height) auto max-content;
    height: var(--panel-height);
    width: var(--right-panel-width);
    max-width: 100%;
    position: fixed;
    right: 0;
    top: var(--masthead-height);
    -webkit-transform: translateX(var(--right-panel-width));
            transform: translateX(var(--right-panel-width));
    transition: .5s ease-in-out; }
    .panel--right.open {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
      transition: 0.5s cubic-bezier(0.38, 0.01, 0.24, 0.99);
      opacity: 1;
      visibility: visible; }
      .panel--right.open .close__trigger {
        transition-delay: 1s;
        opacity: 1; }
  .panel--left {
    --left-panel-width: 26rem;
    display: grid;
    grid-template-rows: var(--section-header-height) auto -webkit-max-content;
    grid-template-rows: var(--section-header-height) auto max-content;
    height: var(--panel-height);
    width: var(--left-panel-width);
    max-width: 100%;
    position: fixed;
    left: 0;
    top: var(--masthead-height);
    -webkit-transform: translateX(calc(0% - var(--left-panel-width)));
            transform: translateX(calc(0% - var(--left-panel-width)));
    transition: .5s ease-in-out; }
    .panel--left.open {
      -webkit-transform: translateX(0px);
              transform: translateX(0px);
      transition: 0.5s cubic-bezier(0.38, 0.01, 0.24, 0.99);
      opacity: 1;
      visibility: visible; }
      .panel--left.open .close__trigger {
        transition-delay: 1s;
        opacity: 1; }
  .panel--modal {
    --modal-panel-width: 34rem;
    position: absolute;
    margin: auto;
    width: var(--modal-panel-width);
    max-width: 100%;
    height: 100vh;
    /* Initial State */
    opacity: 0;
    z-index: -90000;
    grid-template-rows: var(--section-header-height) auto -webkit-max-content;
    grid-template-rows: var(--section-header-height) auto max-content;
    /* Positioning */
    right: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(50%);
            transform: translateY(-50%) translateX(50%);
    transition: 0.3s cubic-bezier(0.38, 0.01, 0.24, 0.99); }
    @media (min-width: 600px) {
      .panel--modal {
        height: auto;
        min-height: 50vh;
        max-width: 40rem; } }
    .panel--modal.open {
      z-index: 90000;
      transition: 0.5s cubic-bezier(0.38, 0.01, 0.24, 0.99);
      opacity: 1;
      visibility: visible; }
      .panel--modal.open .close__trigger {
        transition-delay: 1s;
        opacity: 1; }
    .panel--modal .close__trigger {
      display: -webkit-flex;
      display: flex;
      -webkit-align-self: center;
              align-self: center;
      opacity: 0;
      transition: 0.5s cubic-bezier(0.38, 0.01, 0.24, 0.99); }
  .panel--collapsable {
    position: relative; }
    .panel--collapsable .panel__interaction {
      position: absolute;
      width: 100%;
      height: 100%; }
    .panel--collapsable .close__trigger {
      opacity: 1;
      fill: none;
      stroke: var(--grey5);
      stroke-width: 1.4;
      -webkit-transform: rotateX(180deg);
              transform: rotateX(180deg);
      transition: 0.3s cubic-bezier(0.38, 0.01, 0.24, 0.99); }
    .panel--collapsable.closed .close__trigger {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg); }
    .panel--collapsable.closed .panel__content {
      display: none;
      height: 0; }
    .panel--collapsable.closed .panel__footer {
      display: none;
      height: 0; }

.l-intro--page .l-intro__content {
  -webkit-flex-direction: column;
          flex-direction: column; }
  .l-intro--page .l-intro__content > * + * {
    margin-top: 2rem; }
  @media (min-width: 989px) {
    .l-intro--page .l-intro__content {
      -webkit-flex-direction: row;
              flex-direction: row; }
      .l-intro--page .l-intro__content > * + * {
        margin-top: initial;
        margin-left: 2rem; } }
.fixed {
  position: fixed;
  top: 0;
  left: 50%; }

.update {
  position: relative;
  justify-self: end;
  max-width: 700px;
  /* background: var(--light-blue); */
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  font-size: var(--fs-3); }
  @media (min-width: 600px) {
    .update {
      font-size: var(--fs-2); } }
  .update__title {
    line-height: 1;
    border: 0;
    box-shadow: none;
    padding: 1rem;
    text-transform: uppercase; }
  .update__cta {
    background: var(--red);
    padding: 1rem;
    color: white;
    line-height: 1;
    border: 0;
    box-shadow: none; }
    .update__cta:hover {
      background: var(--yellow);
      color: var(--ink); }

.fw figcaption {
  background: var(--red);
  position: absolute;
  bottom: 0;
  padding: .5em 1em; }

.fw img {
  height: auto; }

@media (min-width: 600px) {
  .img-group {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: var(--sp-2); }
    .img-group figure {
      -webkit-align-items: start;
              align-items: start;
      height: -webkit-max-content;
      height: -moz-max-content;
      height: max-content; }
      .img-group figure img {
        height: auto; } }

.l-intro {
  position: relative;
  display: grid;
  height: calc(65vh - var(--masthead-height)); }
  .l-intro__text {
    display: grid;
    grid-gap: var(--sp-1);
    padding: var(--full-pad);
    padding-top: var(--masthead-height);
    z-index: 1;
    -webkit-align-items: center;
            align-items: center;
    font-size: var(--fs1);
    line-height: var(--lh5); }
    .l-intro__text + .in-view {
      -webkit-animation: .5s fade ease-in;
              animation: .5s fade ease-in; }
    .l-intro__text p {
      max-width: 50ch; }
      .l-intro__text p:first-of-type {
        font-weight: var(--fw-bold); }
  .l-intro__title {
    color: var(--intro-title);
    font-size: var(--fs4);
    line-height: .9em; }
    @media (min-width: 600px) {
      .l-intro__title {
        font-size: var(--fs5); } }
  .l-intro__strap {
    font-size: var(--fs0);
    position: relative; }
  .l-intro__img {
    position: absolute;
    bottom: 0;
    width: 50%;
    right: 0; }
  .l-intro--new {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 3fr;
    overflow: hidden; }
    @media (min-width: 989px) {
      .l-intro--new {
        grid-template-rows: 1fr;
        grid-template-columns: 2fr 3fr; } }
    .l-intro--new .l-intro__text {
      opacity: 0;
      -webkit-animation: 2s fade linear;
              animation: 2s fade linear;
      -webkit-animation-delay: 1.5s;
              animation-delay: 1.5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
      display: grid;
      grid-gap: var(--sp-1);
      padding: var(--full-pad);
      z-index: 1;
      -webkit-align-items: center;
              align-items: center; }
      @media (min-width: 989px) {
        .l-intro--new .l-intro__text {
          -webkit-align-self: center;
                  align-self: center; } }
    .l-intro--new .l-intro__visual {
      display: grid;
      grid-column: 1 / span 2;
      opacity: 0;
      /* animation: 2s fade linear; */
      -webkit-animation: 2s intro-1 linear;
              animation: 2s intro-1 linear;
      -webkit-animation-delay: 1s;
              animation-delay: 1s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
      justify-items: end;
      -webkit-align-items: end;
              align-items: end; }
      @media (min-width: 989px) {
        .l-intro--new .l-intro__visual {
          height: 100%;
          grid-column: 2 / span 1; } }
      .l-intro--new .l-intro__visual img {
        height: 70%; }
        @media (min-width: 989px) {
          .l-intro--new .l-intro__visual img {
            grid-column: 2 / span 1; } }
  .l-intro--home {
    -webkit-align-content: center;
            align-content: center; }
    .l-intro--home:before {
      background-repeat: no-repeat;
      background-blend-mode: normal;
      background-size: 70%;
      background-image: url(../assets/img/dsui.jpg);
      background-position: bottom right;
      position: absolute;
      content: " ";
      height: 100%;
      width: 100%; }
    .l-intro--home .l-intro__text {
      margin-left: initial;
      max-width: 10rem; }
    .l-intro--home .l-intro__title {
      font-size: 10vh;
      color: var(--intro-title);
      line-height: .9;
      text-transform: uppercase;
      letter-spacing: -.01em;
      font-weight: 750;
      /*
		&:before{		    
				    content: 'Stories of';
				    position: absolute;
				    font-size: .3em;
				    top: -1em;
				    text-transform: initial;
				    font-weight: 400;
				
				}
*/ }
  .l-intro--coming {
    -webkit-align-content: center;
            align-content: center; }
    .l-intro--coming:before {
      background-image: url(../assets/img/dan-home.jpg); }
    .l-intro--coming__text {
      margin-left: initial;
      max-width: 10rem; }
    .l-intro--coming__title {
      font-size: 10vh;
      color: var(--intro-title);
      /* 			    text-shadow: 0 0 30px var(--off-white); */
      line-height: .9;
      text-transform: uppercase;
      letter-spacing: -.01em;
      font-weight: 750; }
  .l-intro--sml {
    height: auto;
    background: var(--intro-bg);
    overflow: hidden; }
    .l-intro--sml .l-intro__text {
      padding: var(--slab-pad);
      grid-template-columns: 1fr auto; }
    .l-intro--sml .l-intro__title {
      font-size: var(--fs2);
      color: var(--intro-title); }
  .l-intro--page {
    height: calc(100vh - var(--masthead-height));
    overflow: hidden; }
    .l-intro--page .l-intro__content {
      display: -webkit-flex;
      display: flex;
      z-index: 1;
      padding: var(--full-pad);
      /*   flex-direction: column; */
      /* 	    justify-content: flex-end; */
      margin-bottom: 1em;
      -webkit-align-content: center;
              align-content: center; }
    .l-intro--page .wrapper {
      display: grid;
      grid-template-rows: auto 1fr; }
  .l-intro--hero {
    grid-template-columns: 1fr;
    overflow: hidden;
    background: var(--intro-bg);
    height: auto;
    /* min-height: var(--body-height); */
    background: var(--intro-bg); }
    .l-intro--hero .wrapper {
      display: grid; }
    .l-intro--hero .l-intro__title {
      max-width: 9ch; }
    .l-intro--hero .l-intro__text {
      padding: var(--slab-pad);
      padding-top: var(--masthead-height); }
      .l-intro--hero .l-intro__text > * + * {
        margin-top: 1rem; }
    .l-intro--hero .l-intro__visual {
      display: grid;
      opacity: 0;
      justify-items: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-animation: 2s fade ease-out;
              animation: 2s fade ease-out;
      -webkit-animation-delay: .6s;
              animation-delay: .6s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
      .l-intro--hero .l-intro__visual--end {
        justify-items: end;
        -webkit-align-items: end;
                align-items: end;
        /* position: relative; */ }
      .l-intro--hero .l-intro__visual img, .l-intro--hero .l-intro__visual .ill {
        width: 50%;
        height: auto; }
      @media (min-width: 600px) {
        .l-intro--hero .l-intro__visual {
          height: 100%;
          /* grid-column: 2 / span 1; */ }
          .l-intro--hero .l-intro__visual img {
            width: auto;
            max-height: 75%;
            min-width: 50%; } }
.grad-block {
  position: absolute;
  content: "";
  display: block;
  height: 200%;
  width: 200%;
  background: var(--light-yellow);
  z-index: -1;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg); }
  .grad-block:nth-child(odd) {
    background: var(--light-blue);
    -webkit-transform: rotate(150deg);
            transform: rotate(150deg); }

.l-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 60vh;
  /*
	&--hero-full {
		padding-top: 0;
		height: 100vh;
	
	 @include bp(lrg-min) {	grid-template-columns: minmax(500px, 1.5fr) 2fr;}
		
	}
*/ }
  @media (min-width: 989px) {
    .l-split {
      grid-template-columns: minmax(500px, 3fr) 2fr; }
      .l-split:nth-child(even) {
        grid-template-columns: 2fr minmax(500px, 3fr);
        background: transparent; }
        .l-split:nth-child(even) .l-split__text {
          -webkit-order: 3;
                  order: 3; } }
  .l-split__img {
    -webkit-order: 2;
            order: 2;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
            justify-content: center;
    width: 100%;
    height: auto;
    position: relative;
    -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
    margin: auto;
    overflow: hidden;
    overflow: hidden;
    height: 0;
    padding-top: 62.25%;
    /* 16:9 - Min 7th */ }
    .l-split__img img {
      -o-object-fit: cover;
         object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .l-split__img svg {
      height: 100%;
      width: auto;
      padding: 10vh; }
    .l-split__img--framed {
      height: auto;
      padding-top: 0;
      padding: var(--slab-pad); }
  .l-split__text {
    -webkit-align-items: flex-start;
            align-items: flex-start;
    padding: var(--slab-pad);
    display: -webkit-flex;
    display: flex;
    text-align: left;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-flex-direction: column;
            flex-direction: column; }
    .l-split__text > * + * {
      margin-top: 2rem; }
    .l-split__text h1 {
      font-weight: var(--fw-bold);
      font-size: var(--fs3);
      color: var(--section-title-color);
      line-height: var(--lh3);
      max-width: 18ch;
      margin-bottom: var(--sp-6);
      font-weight: var(--fw-bold); }
      @media (min-width: 989px) {
        .l-split__text h1 {
          font-size: var(--fs5); } }
    .l-split__text h2 {
      font-size: var(--fs1);
      font-weight: var(--fw-bold);
      line-height: 1.25;
      color: var(--section-title-color); }
      @media (min-width: 989px) {
        .l-split__text h2 {
          font-size: var(--fs3); } }
    .l-split__text p {
      max-width: 40ch;
      font-size: var(--fs0); }
      @media (min-width: 989px) {
        .l-split__text p {
          font-size: var(--fs1); } }
  .l-split--hero {
    padding-top: var(--masthead-height);
    min-height: 80vh;
    background: var(--intro-bg); }
    @media only screen and (orientation: landscape) {
      .l-split--hero {
        grid-template-columns: minmax(300px, 3fr) 2fr; } }
    @media (min-width: 989px) {
      .l-split--hero {
        grid-template-columns: 2fr minmax(500px, 3fr); } }
  .l-split--hero {
    padding-top: 0;
    height: 80vh;
    /* 		background-image: url(../assets/img/shelves3.jpg); */
    background-size: cover;
    background-position: bottom center; }
    .l-split--hero .l-split__img {
      -webkit-order: -1;
              order: -1;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
              flex-direction: column;
      -webkit-justify-content: center;
              justify-content: center;
      width: 100%;
      height: auto;
      position: relative;
      -webkit-flex: 0 0 auto;
              flex: 0 0 auto;
      margin: 2em auto;
      overflow: hidden;
      padding: 20%; }
    @media only screen and (orientation: landscape) {
      .l-split--hero .l-split__text {
        grid-template-columns: minmax(200px, 3fr) 6fr; } }
    @media (min-width: 989px) {
      .l-split--hero .l-split__text {
        grid-template-columns: minmax(500px, 1.5fr) 2fr; } }
.block {
  padding: var(--sp0) 0;
  /* 		  	clip-path: polygon(0 32px, 0 100%, calc(100% - 32px) 100%, 100% calc(100% - 32px), 100% 0, 32px 0); */
  border-top: 1px solid var(--grey7);
  /*
  	 @include bp(lrg-min) {	
				 padding: 0;
		
			 }
*/ }
  .block p {
    font-size: var(--fs0);
    /*     font-weight: var(--fw-semi); */
    color: var(--grey7);
    margin-bottom: 1em; }
  .block--social {
    /* 	  	background: var(--aqua); */
    color: var(--dark-purple);
    font-size: var(--fs1); }
  .block--copyright {
    /* 	  	background: var(--aqua); */
    color: var(--deep-purple);
    background: transparent;
    border: 0; }
    .block--copyright p {
      font-weight: var(--regular);
      font-size: var(--fs0);
      margin: 0;
      color: var(--grey4); }

.l-trio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: var(--sp-2); }

.l-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--sp0);
  grid-gap: var(--sp-6); }
  .l-grid__title {
    color: var(--section-title-color);
    font-size: var(--fs1);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    grid-column: span 2;
    grid-row: span 4;
    line-height: var(--lh3); }
    @media (min-width: 600px) {
      .l-grid__title {
        grid-column: span 1;
        font-size: var(--fs1); } }
    @media (min-width: 989px) {
      .l-grid__title {
        grid-column: span 1;
        font-size: var(--fs2); } }
  .l-grid--padded {
    padding: var(--slab-pad); }
  @media (min-width: 600px) {
    .l-grid {
      /* 	   grid-template-columns: repeat(2, 1fr)  */ } }
  @media (min-width: 989px) {
    .l-grid {
      grid-template-columns: repeat(3, 1fr); } }
  .l-grid.cos {
    text-align: center;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2em; }
    .l-grid.cos a {
      display: grid; }
  .l-grid--2 {
    grid-gap: var(--sp2); }
    @media (min-width: 600px) {
      .l-grid--2 {
        grid-template-columns: repeat(1, 1fr); } }
    @media (min-width: 989px) {
      .l-grid--2 {
        grid-template-columns: repeat(2, 1fr); } }
  .l-grid--4 {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: var(--sp-2); }
    .l-grid--4 .l-grid__title {
      grid-column: span 1;
      grid-row: span 4;
      line-height: var(--lh3); }
      @media (min-width: 600px) {
        .l-grid--4 .l-grid__title {
          grid-column: span 2;
          font-size: var(--fs1); } }
      @media (min-width: 989px) {
        .l-grid--4 .l-grid__title {
          grid-column: span 1;
          font-size: var(--fs2); } }
    @media (min-width: 600px) {
      .l-grid--4 {
        grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 989px) {
      .l-grid--4 {
        grid-template-columns: repeat(4, 1fr); } }
  .l-grid--6 {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--sp-2); }
    @media (min-width: 600px) {
      .l-grid--6 {
        grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 989px) {
      .l-grid--6 {
        grid-template-columns: repeat(6, 1fr); } }
  .l-grid--tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr));
    grid-auto-rows: 1fr; }
    .l-grid--tiles::before {
      content: '';
      width: 0;
      padding-bottom: 100%;
      grid-row: 1 / 1;
      grid-column: 1 / 1; }
    .l-grid--tiles .album {
      width: 100%;
      height: 100%; }
    .l-grid--tiles > *:first-child {
      grid-row: 1 / 1;
      grid-column: 1 / 1; }

.l-slab {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  /*
	&--pad-full {
		
		padding: var(--full-pad)
	}
*/ }
  .l-slab--padded {
    padding: var(--slab-pad); }
  .l-slab--page-nav {
    position: -webkit-sticky;
    position: sticky;
    top: var(--masthead-height);
    background: var(--page-nav-bg);
    z-index: var(--z-modal); }
    .l-slab--page-nav:after {
      position: absolute;
      height: 100%;
      width: 100px;
      background: linear-gradient(-90deg, var(--page-nav-bg), transparent);
      z-index: 3000;
      display: block;
      content: '';
      right: 0; }
  .l-slab--footer {
    display: grid;
    min-height: initial;
    background: var(--footer-bg);
    grid-template-columns: 1fr;
    padding: var(--slab-pad); }
    @media (min-width: 989px) {
      .l-slab--footer {
        grid-gap: 3em;
        grid-template-columns: 1fr 1fr; } }
  .l-slab--desc {
    font-size: var(--fs1);
    line-height: var(--lh5); }
    .l-slab--desc + .in-view {
      -webkit-animation: .5s fade ease-in;
              animation: .5s fade ease-in; }
    .l-slab--desc p {
      max-width: 50ch; }
      .l-slab--desc p:first-of-type {
        font-weight: var(--fw-bold); }
    .l-slab--desc * + * {
      margin-top: 1rem; }
  .l-slab--article {
    background: linear-gradient(60deg, var(--deep-purple), transparent);
    display: grid;
    grid-template-areas: '. body .';
    grid-template-columns: 1fr minmax(300px, 70ch) 1fr;
    padding-top: calc(var(--masthead-height)*2); }
  .l-slab__title {
    text-transform: uppercase;
    font-size: var(--fs1);
    padding: var(--slab-pad--slim);
    font-weight: var(--fw-bold);
    color: var(--accent);
    letter-spacing: .2em; }
  .l-slab--cos {
    background: var(--off-white);
    border-top: 8px solid;
    border-bottom: 8px solid;
    border-color: var(--light-blue);
    box-shadow: var(--card-elevation); }
  .l-slab--studies {
    background: var(--deep-purple); }

.l-art {
  grid-template-columns: 1fr;
  display: grid; }
  @media (min-width: 989px) {
    .l-art {
      grid-template-columns: 400px 2fr; } }
  .l-art__head {
    padding: var(--section-pad); }
  .l-art__main {
    overflow-y: scroll;
    padding: var(--section-pad);
    display: grid; }

.l-art-2 {
  display: grid; }
  .l-art-2 .l-art__head {
    border-bottom: 1px solid var(--grey4); }
  @media (min-width: 989px) {
    .l-art-2 {
      grid-template-rows: 1fr auto;
      grid-template-columns: 2fr 5fr;
      grid-gap: var(--sp0); }
      .l-art-2 .l-art__head {
        padding: var(--slab-pad);
        border-bottom: 0px solid var(--grey4); } }
  .l-art-2 .l-art__head {
    padding: var(--section-pad);
    border-bottom: 0px solid var(--grey4); }
  .l-art-2 .l-art__main {
    overflow-y: scroll;
    padding: var(--section-pad);
    display: grid; }
    @media (min-width: 989px) {
      .l-art-2 .l-art__main {
        padding-top: var(--sp3); } }
.l-about {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  padding: var(--slab-pad);
  font-size: var(--fs0);
  display: grid;
  grid-gap: var(--sp0);
  /* 	background: var(--dark-purple); */ }
  @media (min-width: 600px) {
    .l-about {
      grid-template-columns: 1fr 1fr; } }
  .l-about__body {
    z-index: 2;
    max-width: 60ch;
    display: grid;
    grid-gap: var(--sp-1);
    padding-bottom: var(--sp6);
    -webkit-align-content: flex-start;
            align-content: flex-start; }
  .l-about__image {
    position: relative;
    max-width: 100%;
    padding: var(--slab-pad);
    /*
	align-self: end;
		justify-self: end;
*/
    /* 		order: -1; */
    /*
		 @include bp(lrg-min){
		
		position: fixed;
		z-index: 1;
	    bottom: 0;
	    align-self: end;
	    width: 30%;
	
	}
*/ }
    .l-about__image .chord-holder {
      position: -webkit-sticky;
      position: sticky;
      top: var(--masthead-height); }
    .l-about__image div#scroll-image {
      position: fixed;
      top: calc(var(--masthead-height) *2);
      bottom: 0;
      left: 60%;
      width: 25%; }
      .l-about__image div#scroll-image .test {
        position: fixed; }

/*

.card,
%card{
		
position: relative;
display: grid;
grid-template-columns: 1fr;
overflow: hidden;

		.img-bg{
			position: absolute;
			z-index: -1;
			
			&:hover{
				filter: saturate(1) contrast(120%);
				background-blend-mode: multiply;
				animation: pop 2s ease-in-out;
				animation-direction: forwards;
				}
				 
		}
	
	
	
	&__img {
		
	    width: 100%;
	    height: 100%;
	    display: block;
	    float: left;
	    position: absolute;
	    
	
	}
	

	
	&__key-info{
		
		padding: var(--sp0);
	    position: relative;
	    z-index: 1;
			
			}
	
	&__type {

		display: table;
		font-size: var(--fs-1);

	}

	&__title {
	
		font-size: var(--fs1);

	}
	}
*/
.l-slide {
  height: 80vh;
  position: relative;
  display: grid;
  /* grid-template-columns: 2fr 1fr 1fr; */
  gap: 2em;
  padding: 2em; }

.slide {
  height: 100vh;
  -webkit-align-items: center;
          align-items: center;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  display: grid;
  /*     grid-template-columns: repeat(12, 1fr); */
  gap: 1em;
  /*    grid-template-rows: repeat(12, 1fr); */
  /*     display: flex; */
  width: 100vw;
  height: 100vh;
  /*     position: absolute; */
  z-index: 3; }
  .slide.active {
    z-index: 4; }
  .slide .img-bg {
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover; }
  .slide .slide__title {
    font-size: var(--fs4);
    font-weight: var(--fw-semi);
    line-height: var(--lh2);
    color: var(--white); }
  .slide__desc {
    line-height: var(--lh5);
    max-width: 65ch;
    color: var(--white); }
  .slide__key-info {
    color: #585858;
    display: grid;
    z-index: 1;
    align-self: flex-end;
    padding: 4em;
    gap: 2em;
    background: rgba(78, 78, 78, 0.76); }

.timeline {
  display: grid;
  grid-gap: var(--sp4);
  margin-bottom: var(--sp6); }
  .timeline__record {
    padding-top: var(--sp1);
    position: relative;
    font-size: var(--fs0);
    display: grid;
    grid-gap: var(--sp0);
    grid-template-columns: 1fr;
    grid-template-areas: "date" "logo" "meta" "desc"; }
    @media (min-width: 989px) {
      .timeline__record {
        grid-template-columns: 2fr 5fr;
        grid-template-rows: auto var(--sp-2) auto;
        grid-template-areas: "date ." "logo desc" "meta desc"; } }
    .timeline__record + * {
      border-top: 10px solid var(--blue-01); }
  .timeline__meta {
    position: relative;
    display: grid;
    overflow: visible;
    grid-area: meta;
    grid-gap: var(--sp-2);
    line-height: var(--lh2);
    -webkit-align-content: start;
            align-content: start; }
  .timeline__logo {
    height: var(--sz-2);
    grid-area: logo;
    max-width: 100%; }
  .timeline__case {
    position: relative;
    line-height: var(--lh2);
    grid-gap: var(--sp-6);
    display: grid;
    font-size: var(--fs-1);
    -webkit-align-content: start;
            align-content: start;
    display: none; }
    .timeline__case .list__item {
      list-style-type: none;
      margin-right: var(--sp-8);
      line-height: 1;
      margin-bottom: var(--sp-8); }
  .timeline__things {
    position: relative;
    line-height: var(--lh2);
    grid-gap: var(--sp-6);
    display: grid;
    font-size: var(--fs0);
    -webkit-align-content: start;
            align-content: start;
    font-style: italic;
    display: inline; }
    .timeline__things .list__item {
      display: inline-grid;
      list-style-type: none;
      margin-right: var(--sp-8);
      line-height: var(--lh2);
      margin-bottom: var(--sp-8); }
  .timeline__role {
    font-size: var(--fs1);
    line-height: var(--lh2);
    font-weight: 600;
    color: var(--purple-75); }
  .timeline__co {
    font-size: var(--fs-1);
    line-height: var(--lh2);
    display: none; }
  .timeline__date {
    align-self: start;
    grid-area: date;
    line-height: var(--lh1);
    /*
		position: absolute;
		top: -.75em;
		font-size: var(--fs-3);
	    line-height: var(--lh1);
// 		font-style: italic;
		background: linear-gradient(70deg, #ffd2007a 90%, transparent 90%);
    padding: 0 1rem 0 .15em;
*/ }
  .timeline__desc {
    position: relative;
    font-size: var(--fs0);
    grid-gap: var(--fs2);
    display: grid;
    -webkit-align-content: start;
            align-content: start;
    max-width: 60ch;
    grid-area: desc;
    align-self: start;
    padding-bottom: 5em; }
    .timeline__desc h4 {
      font-weight: 600;
      font-size: var(--fs1);
      line-height: var(--lh1);
      margin-bottom: .5em;
      color: var(--labels); }
    .timeline__desc p:first-of-type {
      font-weight: var(--fw-semi); }
    .timeline__desc p span {
      font-weight: var(--fw-semi); }
    .timeline__desc p + h4 {
      margin-top: 1em; }

/*
.words {    
	position: absolute;
    font-weight: 600;
    color: var(--light-blue);
    font-size: 26vh;
    text-align: right;
    right: 0;
    line-height: .75em;
    display: none;
}
*/
.ex-app {
  display: grid;
  HEIGHT: 200px;
  BACKGROUND: var(--white);
  width: 300px;
  ALIGN-SELF: top;
  JUSTIFY-SELF: center;
  grid-template-columns: 1fr 3fr;
  border: 1px solid var(--grey3); }

.mods {
  /*
.l-app {
	
	--masthead-height: var(--sp2);
    --body-height: calc(100% - var(--masthead-height));
	
	position: relative;
	height: 100vh;
	
    display: grid;
    
    grid-template-columns: 1fr;
    align-self: start;
    
    grid-template-rows: var(--masthead-height) auto;
    grid-template-areas: "masthead" "workspace";
     
        > * + * {

		    overflow: hidden;		
		}
		
		
    
    &__header {
	    
	    position: relative;
	    display: flex;
	    grid-area: masthead;
	    align-items: center;
	    z-index: 10;
	    padding: 0 var(--gap);
	   
	    
	    background: var(--bg);
    }
    
    
    &__workspace {
	    grid-area: workspace;
	    background: var(--bg);
	    position: relative;
    }
    
}
*/ }
  .mods .l-app {
    --gap: var(--sp-2);
    --color1: var(--light-blue);
    --color2: var(--dark-purple);
    --color3: var(--off-white-5);
    --bg-grad: linear-gradient(-15deg, var(--color3) 40%, transparent 40%);
    --ui-grad: linear-gradient(-15deg, var(--color1) 0%, transparent 40%);
    --bg: var(--color1) var(--bg-grad);
    --bg: var(--blue-01);
    --bg2: var(--color2) var(--ui-grad);
    --bg-chrome: var(--purple) var(--bg-grad);
    --bg-chrome: var(--blue-01);
    font-size: 1em; }
    .mods .l-app .l-list {
      display: grid;
      -webkit-align-items: start;
              align-items: start;
      grid-gap: var(--gap);
      grid-auto-rows: -webkit-max-content;
      grid-auto-rows: max-content; }
      .mods .l-app .l-list__item {
        position: relative;
        padding: .25em;
        background: var(--bg2);
        border-radius: 1em; }
        .mods .l-app .l-list__item:nth-child(2n+1) {
          width: calc(100% - 1.25em); }
        .mods .l-app .l-list__item:nth-child(3n+2) {
          width: calc(100% - 1.75em); }
        .mods .l-app .l-list__item:nth-child(5n+3) {
          width: calc(100% - .5em); }
        .mods .l-app .l-list__item:nth-child(7n+5) {
          width: calc(100% - 1.5em); }
      .mods .l-app .l-list--bullet {
        --bullet-sz: var(--sz-6); }
        .mods .l-app .l-list--bullet .l-list__item {
          padding: var(--bullet-sz); }
          .mods .l-app .l-list--bullet .l-list__item:before {
            display: block;
            content: '';
            position: absolute;
            width: var(--bullet-sz);
            height: var(--bullet-sz);
            left: calc(var(--bullet-sz)/2);
            top: calc(var(--bullet-sz)/2);
            border-radius: 3em;
            background: var(--color3); }
      .mods .l-app .l-list--inline {
        display: -webkit-inline-flex;
        display: inline-flex; }
        .mods .l-app .l-list--inline > * + * {
          margin-left: 1em; }
      .mods .l-app .l-list--grid {
        display: grid;
        grid-template-columns: .25fr .25fr .25fr .25fr;
        grid-gap: var(--gap);
        grid-template-rows: auto;
        height: auto;
        grid-template-rows: repeat(3, minmax(100px, 1fr)); }
        .mods .l-app .l-list--grid .l-list__item {
          height: 2em;
          background: var(--bg2);
          border-radius: .2em;
          width: 100%;
          height: 100%; }
          .mods .l-app .l-list--grid .l-list__item img {
            height: 100%;
            width: 100%; }
    .mods .l-app .l-vis {
      padding: var(--gap);
      background: var(--bg2); }
      .mods .l-app .l-vis .l-list__item {
        background: var(--bg);
        padding: .1em;
        height: var(--sp-6); }
        .mods .l-app .l-vis .l-list__item:nth-child(1) {
          background: var(--dv-1); }
        .mods .l-app .l-vis .l-list__item:nth-child(2) {
          background: var(--dv-2); }
        .mods .l-app .l-vis .l-list__item:nth-child(3) {
          background: var(--dv-3); }
    .mods .l-app .rhythm {
      position: relative;
      display: block;
      width: var(--sz-6);
      height: var(--sz-6);
      -webkit-animation: 2s beats steps(16) infinite, 0.5s steps(16) pop infinite;
              animation: 2s beats steps(16) infinite, 0.5s steps(16) pop infinite;
      background: var(--red); }
      .mods .l-app .rhythm--1 {
        /* 			animation: 2s beats steps(16) infinite; */
        background: var(--red); }
      .mods .l-app .rhythm--2 {
        -webkit-animation: 2s beats steps(8) infinite;
                animation: 2s beats steps(8) infinite;
        background: var(--off-white-5); }
      .mods .l-app .rhythm--3 {
        -webkit-animation: 2s beats steps(4) infinite;
                animation: 2s beats steps(4) infinite;
        background: var(--green); }
  .mods .l-workspace {
    display: grid;
    position: relative;
    grid-template-columns: 20% 1fr 30%;
    grid-template-rows: var(--masthead-height) auto;
    height: 100%;
    grid-template-areas: "left-nav header header "  "left-nav body panel";
    background: var(--bg); }
    .mods .l-workspace > * + * {
      /*     border: 1px solid var(--purple-75); */
      overflow: hidden; }
    .mods .l-workspace__left-nav {
      position: absolute;
      display: grid;
      grid-area: left-nav;
      -webkit-align-content: start;
              align-content: start;
      position: relative;
      background: var(--bg);
      padding: var(--gap); }
    .mods .l-workspace__header {
      grid-area: header;
      -webkit-align-items: center;
              align-items: center;
      overflow-y: scroll;
      background: var(--bg-chrome);
      padding: 0 var(--gap); }
    .mods .l-workspace__body {
      display: grid;
      grid-area: body;
      position: relative;
      background: var(--bg); }
    .mods .l-workspace__right-panel {
      grid-area: panel;
      z-index: 1;
      right: 0;
      background: var(--bg);
      opacity: .9;
      height: 100%;
      padding: var(--gap); }
    .mods .l-workspace--cards {
      grid-template-areas: " header header header " ". body .";
      grid-template-columns: minmax(var(--sp0), 1fr) minmax(300px, 600px) minmax(var(--sp0), 1fr); }
      .mods .l-workspace--cards .l-workspace__body {
        -webkit-align-items: center;
                align-items: center; }

.clients {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  background: var(--off-white); }
  .clients__logo {
    margin: 2em;
    height: var(--sp-2);
    width: auto; }

.scroll-snap {
  --ss-width: 400px;
  --ss-height: 20vh;
  --ss-cont-height: calc(var(--ss-height) + var(--sp5));
  --ss-cont-width: calc(var(--ss-width) + var(--sp5));
  --ss-cont-height: calc(var(--ss-height) * 2);
  --ss-cont-width: calc(var(--ss-width) * 2);
  overflow: hidden; }
  .scroll-snap__parent {
    overflow: scroll;
    height: var(--ss-cont-height);
    -ms-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
    -ms-scroll-snap-type: y mandatory;
        scroll-snap-type: y mandatory; }
  .scroll-snap section {
    height: var(--ss-height);
    scroll-snap-align: center;
    position: relative; }
  .scroll-snap--h .scroll-snap__parent {
    display: -webkit-flex;
    display: flex;
    width: var(---ss-cont-width);
    overflow: scroll;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory; }
  .scroll-snap--h section {
    -webkit-flex-direction: row;
            flex-direction: row;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 0 var(--ss-width);
            flex: 0 0 var(--ss-width); }

.l-mo {
  --mo-svg-fill: var(--off-white);
  --mo-color: var(--black);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
          align-items: center;
  height: 100%; }
  .l-mo__text {
    display: -webkit-flex;
    display: flex;
    padding: .75em; }
  .l-mo__title {
    display: -webkit-flex;
    display: flex;
    font-size: var(--fs1);
    font-weight: var(--fw-bold);
    color: var(--mo-color);
    -webkit-align-self: center;
            align-self: center; }
  .l-mo__img {
    fill: var(--mo-svg-fill);
    max-height: var(--sz0);
    height: 100%;
    width: auto; }
  .l-mo--profile .l-mo__title {
    font-size: var(--fs-1);
    font-weight: var(--fw-regular); }
  .l-mo--profile .l-mo__img {
    fill: var(--mo-svg-fill);
    max-height: var(--sz0);
    height: var(--sz0);
    width: var(--sz0);
    border-radius: 3em;
    background-color: var(--orange);
    -webkit-order: 3;
            order: 3;
    -o-object-fit: cover;
       object-fit: cover; }

.l-hero {
  --hero-pad: 0 var(--sp-2);
  display: grid;
  background: var(--hero-bg);
  height: calc(100vh - var(--masthead-height));
  position: relative; }
  .l-hero__title {
    font-size: var(--fs3);
    font-weight: var(--fw-bold);
    padding: var(--hero-pad);
    -webkit-align-self: center;
            align-self: center; }
  .l-hero__img {
    position: absolute;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    right: 0; }

.msg {
  position: relative;
  display: BLOCK;
  margin-top: 2em;
  clear: both;
  width: 100%;
  padding: 1em;
  /* border-radius: .25em; */
  bottom: 0;
  left: 0; }
  .msg__title {
    text-transform: uppercase;
    font-size: var(--fs0);
    color: var(--white); }

.quote {
  background: var(--quote-bg);
  height: 100%;
  padding: var(--slab-pad);
  -webkit-clip-path: polygon(0 32px, 0 100%, calc(100% - 32px) 100%, 100% calc(100% - 32px), 100% 0, 32px 0);
          clip-path: polygon(0 32px, 0 100%, calc(100% - 32px) 100%, 100% calc(100% - 32px), 100% 0, 32px 0);
  /*
	blockquote{
		display: flex;
		flex-direction: column;
	    font-weight: var(--fw-semi);
	    color: var(--app-bg);
	    font-size: var(--fs2);
	    padding: var(--slab-pad);
	    max-width: 40ch;
	    margin: 0;

		cite {
			margin-top: 1em;
			 font-size: var(--fs1);
			 color: var(--red);
			 font-weight: var(--fw-regular);
			
		}
	}
*/ }

.int-link {
  background: var(--int-link--bg);
  color: var(--int-link--colour); }

/*
.new-flag:after {
    position: absolute;
    top: -.5em;
    content: "new";
    display: block;
    background: var(--green);
    font-size: var(--fs-2);
    border-radius: 3em;
    padding: 0 .25em;
    right: -.75em;
    line-height: 1.5;
}
*/
.frame {
  position: relative;
  width: 100%;
  padding-bottom: 82.5%;
  background: linear-gradient(45deg, black 30%, rgba(0, 0, 0, 0.8) 40%);
  box-shadow: -3px 7px 4px -5px rgba(0, 0, 0, 0.1); }

.mat {
  position: absolute;
  background: white;
  top: 3.0303%;
  bottom: 3.0303%;
  left: 2.5%;
  right: 2.5%;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset; }

.art {
  position: absolute;
  top: 16.129%;
  bottom: 16.129%;
  left: 13.158%;
  right: 13.158%; }

.art img {
  width: 100%; }

.art:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5) inset;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1) inset, -1px 1px 2px 0px rgba(0, 0, 0, 0.1) inset; }

.blocking {
  --blocking: var(--red);
  --blocking-text: var(--white); }
  .blocking span {
    display: inline;
    background-color: var(--blocking);
    color: var(--blocking-text);
    margin-left: 0;
    line-height: 1;
    padding: 0 .2em .2em .2em;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: 0.2em 0 0 var(--blocking), -0.2em 0 0 var(--blocking);
    -webkit-clip-path: polygon(0 0.2em, 0 100%, calc(100% - .2em) 100%, 100% calc(100% - .2em), 100% 0, 0.2em 0);
            clip-path: polygon(0 0.2em, 0 100%, calc(100% - .2em) 100%, 100% calc(100% - .2em), 100% 0, 0.2em 0); }

.new {
  --h1-size: clamp(2rem, -0.875rem + 8.333333vw, 3.5rem);
  --p-size: clamp(2rem, -1.6rem + 8.333333vw, 1.5rem);
  height: 70vh;
  max-width: 100%;
  position: relative;
  display: -webkit-flex;
  display: flex; }
  .new__text {
    color: var(--white);
    z-index: 1;
    position: absolute;
    top: 0;
    padding: 2rem; }
  .new__title {
    font-weight: var(--fw-bold);
    font-size: var(--h1-size); }
  .new__desc {
    font-size: var(--p-size); }
  .new__img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center left;
       object-position: center left;
    position: relative;
    width: 100%;
    height: 100%; }

.cover {
  --cover-bg: var(--off-white);
  --cover-title-color: var(--body-text);
  --cover-meta-color: var(--meta-text);
  --visual-clip: polygon(0% 0%, 100% 0%, 100% 100%, 0% 70%);
  overflow: hidden;
  display: grid;
  position: relative;
  background-color: var(--cover-bg);
  box-shadow: var(--card-elevation);
  transition: all .2s ease-out;
  padding-bottom: 100%; }
  @media (min-width: 600px) {
    .cover {
      padding-bottom: 80%;
      min-height: 18rem; } }
  .cover__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    z-index: 1;
    -webkit-align-content: start;
            align-content: start;
    grid-gap: var(--sp-8);
    padding: var(--sp-3); }
  .cover__date {
    font-weight: 400;
    font-size: var(--fs-1);
    line-height: var(--lh1);
    color: var(--cover-meta-color); }
  .cover__title {
    font-weight: var(--fw-bold);
    font-size: var(--fs1);
    line-height: var(--lh1);
    color: var(--cover-title-color); }
  .cover__desc {
    line-height: var(--lh4);
    font-size: var(--fs0);
    color: var(--cover-meta-color); }
  .cover__visual {
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    width: 100%;
    -webkit-align-self: start;
            align-self: start;
    -o-object-position: center;
       object-position: center;
    -webkit-clip-path: var(--visual-clip);
            clip-path: var(--visual-clip); }
    .cover__visual--selfridges {
      background: #ffe205;
      height: 70%;
      -o-object-fit: contain;
         object-fit: contain;
      padding: var(--sz4); }
  .cover:hover {
    transition: all .2s ease-in;
    box-shadow: var(--card-border);
    --cover-bg: var(--light-blue); }
  .cover + .in-view {
    -webkit-animation: .5s fade ease-in;
            animation: .5s fade ease-in; }
  .cover__alert {
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    background: var(--purple-75);
    -webkit-align-items: center;
            align-items: center;
    justify-items: center;
    font-size: var(--fs2);
    text-align: center;
    font-weight: var(--fw-semi);
    padding: var(--sp-2);
    color: var(--off-white); }

.l-workspace {
  position: relative;
  display: grid;
  /*
		&__body {
		    display: grid;
		    grid-area: body;
			align-items: start;
			grid-template-rows: auto 1fr;
			
			@include bp(lrg-min){	
				overflow-y: scroll;    
			}
		}
*/
  /*
		&__header {
			display: flex;
		  	grid-area: header;
		    align-items: center;
		    justify-content: space-between;
		    
		    padding: 0 var(--sp-6);
		    overflow-y: scroll;
		    background: var(--workspace-header-bg-color);
		    height: var(--section-header-height);
	
		    padding: var(--sp-6);
		
					
		}
*/
  /*
		&__breadcrumb {
			font-size: var(--fs-3);
		}
*/
  /*
		&__left-nav {
			
				position: absolute;
			    background: var(--left-panel-bg);
			    display: grid;
			    grid-area: left-nav;
			    align-content: start;
			    opacity: 1;
			    width: 100%;
			    z-index: 1;
				visibility: hidden;
				    overflow: scroll;
				
				    .btn {
					    align-self: center;
					    margin-left: var(--sp-3);
					}

				@include bp(lrg-min){
					visibility: visible;
					position: relative;

				    }
				}
*/
  /*
		&__right-panel {
				z-index: 1;
			    position: absolute;
			    right: 0;
			    bottom: 0;
			    width: 30%;
			    height: 100%;
			    background: #fff;
				}
*/ }
  .l-workspace--slabs {
    display: grid;
    -webkit-align-items: start;
            align-items: start;
    grid-template-rows: 1fr;
    grid-template-columns: none; }
    @media (min-width: 600px) {
      .l-workspace--slabs {
        background: var(--grey1); } }
  .l-workspace--feed {
    --workspace-header-bg-color: var(--white);
    grid-template-columns: 200px 1fr;
    grid-template-areas: "left-nav header" "left-nav body"; }
    .l-workspace--feed .l-workspace {
      grid-template-rows: calc(100vh - (var(--masthead-height) - var(--section-header-height))); }
      .l-workspace--feed .l-workspace__header {
        padding: 0 var(--sp-2); }
      .l-workspace--feed .l-workspace__left-nav {
        grid-template-rows: var(--section-header-height) auto;
        padding: 0; }
        .l-workspace--feed .l-workspace__left-nav .filter {
          font-size: var(--fs-4); }
      .l-workspace--feed .l-workspace__body {
        grid-template-columns: 1fr; }
        @media (min-width: 600px) {
          .l-workspace--feed .l-workspace__body {
            grid-template-columns: 1fr 2fr;
            overflow: hidden;
            padding: var(--sp-2);
            grid-gap: var(--sp2); } }
        .l-workspace--feed .l-workspace__body .slot--feed {
          --slot-pad: var(--sp-3); }
          @media (min-width: 600px) {
            .l-workspace--feed .l-workspace__body .slot--feed {
              --slot-pad: 0; } }
          .l-workspace--feed .l-workspace__body .slot--feed .slot__header {
            padding: 0 var(--slot-pad); }
          .l-workspace--feed .l-workspace__body .slot--feed .slot__content {
            padding: 0 var(--slot-pad); }
          .l-workspace--feed .l-workspace__body .slot--feed .slot__footer {
            padding: 0 var(--slot-pad); }
        .l-workspace--feed .l-workspace__body .slot--preview {
          --slot-pad: var(--sp-3); }
          @media (min-width: 600px) {
            .l-workspace--feed .l-workspace__body .slot--preview {
              --slot-pad: var(--sp4); } }
          .l-workspace--feed .l-workspace__body .slot--preview .slot__content {
            /* 							padding: 0 var(--slot-pad); */ }
  .l-workspace--sd {
    --workspace-header-bg-color: var(--white);
    grid-template-rows: auto;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: var(--sp2);
    grid-template-areas: "left-nav body right"; }
    .l-workspace--sd .l-workspace {
      grid-template-rows: calc(100vh - (var(--masthead-height) - var(--section-header-height))); }
      .l-workspace--sd .l-workspace__header {
        padding: 0 var(--sp-2); }
      .l-workspace--sd .l-workspace__left-nav {
        grid-template-rows: auto;
        padding: var(--sp-2) 0; }
        .l-workspace--sd .l-workspace__left-nav .filter {
          font-size: var(--fs-4); }
      .l-workspace--sd .l-workspace__right {
        grid-template-rows: var(--section-header-height) auto;
        padding: 0;
        grid-area: right; }
      .l-workspace--sd .l-workspace__body {
        grid-template-columns: 1fr; }
        @media (min-width: 600px) {
          .l-workspace--sd .l-workspace__body {
            grid-template-columns: 1fr;
            overflow: hidden;
            padding: var(--sp-2);
            grid-gap: var(--sp2); } }
        .l-workspace--sd .l-workspace__body .slot--feed {
          --slot-pad: var(--sp-3); }
          @media (min-width: 600px) {
            .l-workspace--sd .l-workspace__body .slot--feed {
              --slot-pad: 0; } }
          .l-workspace--sd .l-workspace__body .slot--feed .slot__header {
            padding: 0 var(--slot-pad); }
          .l-workspace--sd .l-workspace__body .slot--feed .slot__content {
            padding: 0 var(--slot-pad); }
          .l-workspace--sd .l-workspace__body .slot--feed .slot__footer {
            padding: 0 var(--slot-pad); }
        .l-workspace--sd .l-workspace__body .slot--preview {
          --slot-pad: var(--sp-3); }
          @media (min-width: 600px) {
            .l-workspace--sd .l-workspace__body .slot--preview {
              --slot-pad: var(--sp4); } }
          .l-workspace--sd .l-workspace__body .slot--preview .slot__content {
            /* 							padding: 0 var(--slot-pad); */ }
          .l-workspace--sd .l-workspace__body .slot--preview .slot__header {
            display: grid;
            grid-template-columns: repeat(3, auto);
            -webkit-justify-content: start;
                    justify-content: start;
            grid-gap: var(--sp-6); }
          .l-workspace--sd .l-workspace__body .slot--preview .slot__footer {
            display: grid;
            grid-template-columns: repeat(3, auto);
            -webkit-justify-content: start;
                    justify-content: start;
            grid-gap: var(--sp-6); }
  .l-workspace--edna {
    grid-template-rows: auto;
    grid-template-areas: "left-nav body";
    height: 100%; }
    .l-workspace--edna .l-workspace__left-nav {
      padding: var(--sp-2) 0; }
      .l-workspace--edna .l-workspace__left-nav .filter {
        /* @extend %filter-styles--dark; */ }
        .l-workspace--edna .l-workspace__left-nav .filter__title {
          /* color: $white; */ }
  .l-workspace--library {
    grid-template-columns: var(--masthead-height) auto; }
    @media (min-width: 989px) {
      .l-workspace--library {
        display: grid;
        grid-template-rows: var(--sz2) auto;
        height: 100%;
        /* 	background: var(--workspace-bg-color); */
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto;
        grid-template-areas: "left-nav header" "left-nav body"; } }
    .l-workspace--library .l-workspace__header {
      display: -webkit-flex;
      display: flex;
      padding: 0 var(--table-density);
      -webkit-justify-content: space-between;
              justify-content: space-between; }
    .l-workspace--library .l-workspace__left-nav {
      grid-template-rows: var(--section-header-height) auto;
      padding: 0; }
      .l-workspace--library .l-workspace__left-nav .filter {
        font-size: var(--fs-4); }
  .l-workspace--empty {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "body";
    -webkit-align-content: center;
            align-content: center; }
  .l-workspace--left-header {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    grid-template-areas: "left-header body"; }
    .l-workspace--left-header .l-workspace__body {
      grid-template-columns: 1fr; }
      @media (min-width: 600px) {
        .l-workspace--left-header .l-workspace__body {
          grid-gap: var(--sp-2);
          /*    grid-template-rows: 100vh; */
          overflow-y: scroll;
          /* 		grid-template-columns: 1fr 2fr 1fr; */
          /* 			overflow: hidden; */
          grid-gap: var(--sp-2);
          padding: var(--sp0); } }
  .l-workspace--showcase {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "body"; }
    .l-workspace--showcase .l-workspace__body {
      grid-template-columns: 1fr; }
      @media (min-width: 600px) {
        .l-workspace--showcase .l-workspace__body {
          grid-gap: var(--sp-2);
          grid-template-rows: 100vh;
          overflow-y: scroll;
          grid-template-columns: 1fr 2fr 1fr;
          overflow: hidden;
          grid-gap: var(--sp-2); } }
  .l-workspace--impact {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "body"; }
    .l-workspace--impact .l-workspace__body {
      grid-template-columns: 1fr; }
      @media (min-width: 600px) {
        .l-workspace--impact .l-workspace__body {
          grid-gap: var(--sp-2);
          grid-template-rows: 100vh;
          overflow-y: scroll;
          grid-template-columns: 1fr 2fr 2fr;
          overflow: hidden;
          grid-gap: var(--sp-2); } }
  .l-workspace--home {
    display: grid;
    grid-template-rows: minmax(70vh, auto) minmax(30vh, auto); }
  .l-workspace--active {
    --pad1: var(--sp-2);
    grid-template-rows: var(--masthead-height) 100%;
    grid-template-areas: "filter filter" "body body";
    height: 100%;
    grid-template-columns: 300px 1fr;
    background: var(--white); }
    .l-workspace--active .filters {
      padding: var(--pad1);
      grid-area: filter;
      background: var(--grey1); }
    .l-workspace--active .main {
      padding: var(--pad1);
      grid-area: body;
      /*   background: #ebebeb; */
      /* 	mobile card view */ }
      .l-workspace--active .main .table {
        /* border: 1px solid var(--grey4); */
        background: var(--white);
        width: 100%;
        color: var(--grey7); }
      .l-workspace--active .main thead td {
        font-size: var(--fs-1);
        color: var(--grey6); }
      .l-workspace--active .main td {
        padding: var(--table-density-1);
        font-size: var(--fs0);
        line-height: var(--lh1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      .l-workspace--active .main .table__filters {
        padding: var(--pad1);
        background: var(--grey1); }
      .l-workspace--active .main .table__row {
        padding: var(--pad1);
        border-bottom: 1px solid var(--grey2);
        color: var(--body-text);
        background: var(--table-row-bg);
        border-bottom: var(--line1); }
      .l-workspace--active .main tr.property.quote {
        /*
			    display: flex;
			    flex-flow: column;
			    border: 1px solid;
			    margin-bottom: var(--sp-2);
*/
        /*
   td{
				    padding: var(--sp-6);
			    }
*/ }
        .l-workspace--active .main tr.property.quote .quote__status {
          color: var(--red); }

.nav {
  --pad: var(--sp0);
  position: absolute;
  -webkit-align-content: space-between;
          align-content: space-between;
  z-index: 10;
  transition: .3s all;
  display: grid;
  height: 00;
  width: 100vw;
  padding: 0; }
  .nav .main-nav {
    visibility: hidden;
    opacity: 0;
    padding-top: var(--sp4); }
  .nav .l-ctas {
    visibility: hidden;
    opacity: 0; }
  .nav.open {
    padding: var(--pad);
    width: 4.8rem;
    height: 100vh;
    width: 100vw;
    background: var(--off-white); }
    .nav.open .menu-trigger {
      transition-delay: 1s;
      opacity: 1;
      visibility: visible; }
    .nav.open .l-ctas {
      visibility: visible;
      opacity: 1; }
    .nav.open .main-nav {
      visibility: visible;
      opacity: 1; }

.l-app__header {
  display: -webkit-flex;
  display: flex; }
  .l-app__header .profile {
    width: auto;
    margin-right: var(--sp-2); }
  .l-app__header .main-nav {
    display: -webkit-flex;
    display: flex;
    -webkit-align-self: center;
            align-self: center; }
    .l-app__header .main-nav__item {
      font-size: var(--fs1);
      margin-right: var(--sp-2); }

.l-ctas {
  /*
	   	visibility: hidden;
			    opacity: 0;
*/
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  grid-gap: var(--sp-2);
  text-align: center; }
  .l-ctas svg {
    width: 100%;
    height: 100%; }

/*
		.core-nav {
	
	
	position: absolute;
    display: grid;
    grid-area: left-nav;

    align-content: start;
    opacity: 1;
    width: 100%;
    z-index: 1;
	visibility: hidden;

	
	@include bp(lrg-min){
		
		visibility: visible;
		position: relative;
	    display: flex;
	    flex-direction: row;
	    flex: 1;
// 	    height: 100%;
   
	}
	
	&__item {

		display: flex;
	    margin-right: var(--sp0);
	    font-size: var(--fs-3);
		align-items: center;
		
		&:last-child {
			margin-right: 0;
		}
		
	&:not(:nth-child(1)) {
// 	    display: none;
	}
		
	}
	
	@extend %tab-styles;
	
}

.tab-nav {
		
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: row;
	height: 100%;
				
		&__item {
		
			display: flex;
		    margin-right: var(--sp0);
		    font-size: var(--fs-3);
			align-items: center;

		
		} 	
		
	@extend %tab-styles;
	
	}

.sub-nav {
		
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: row;
	height: 100%;
				
		&__item {
		
			display: flex;
		    margin-right: var(--sp0);
		    font-size: var(--fs-3);
			align-items: center;

		
		} 	
		
	@extend %tab-styles;
	
	}
*/
/*
.hygiene-nav {
	
	display: flex;
    flex-direction: row;
    flex: 0;
    
    
	&__item {
		
		display: flex;
	    margin-right: var(--sp-4);
	    font-size: var(--fs-3);
		align-items: center;
		
		&:last-child {
			margin-right: 0;
		}
		

	}
}
*/
/*
.dropdown {
			
			display: flex;
		    flex-direction: column;
		    position: absolute;
// 			padding: .5em 0;
			
		   	border-radius: 1px;
		    width: 20rem;
		    font-size: var(--fs-4);
		    
		    background: $white;
		    border: var(--line1);
		    flex: 1 0 20em;
		    top: var(--sp-2);

		    
		    
			right: 0;
			display: none; 
			opacity: 0;
		   
			@extend %layer-2;
			
			
			
			
			.list__item {
				
				a {
					color: $blue;
				    padding: var(--sp-5);
				    display: flex;
				    line-height: 1;
				    
				    &:hover {
					    background: rgba($blue, .05);
					    color: $blue;
				    }
				}
				
			}


		    }
*/
/*
.product-switch {
   	position: relative;

    display: flex;
    padding: var(--sp-4);
	    align-self: center;
	border-radius: 5em;

    &:hover {
	    
	    	background: var(--grey7);
	        align-self: center;
	    .dropdown {
		    font-size: var(--fs-3);
		  
	    	display: flex;
	    	opacity: 1;
    	    position: absolute;
			top: var(--sp2);
			right: 0;
	 	}   
    }
}

.profile-menu {
   
    align-items: center;
    justify-content: center;
    display: flex;
    
    &:hover {
	    
// 	    background: #ccc;
	    
	    .dropdown {
		    font-size: var(--fs-4);
		    padding: 1em;
	    	display: flex;
	    	opacity: 1;
	    	top: var(--sp2);
	    	    position: absolute;
	 	}   
    }
}


		.filter{
				display: grid;
			    grid-gap: var(--sp-4);
		        font-size: var(--fs-3);
			    line-height: var(--lh2);
			 	align-content: start;
			    
			     @extend %filter-styles;
			    
			    &__title {
				    	display: flex;
				        font-size: var(--fs-3);
						padding: 0 var(--sp-3);
						margin-bottom: var(--sp-6);
						
			    }
			
				
				&__subnav {
					font-size: var(--fs-4);
					background: var(--filter-subnav-bg);
					
				    .list__item {
					
					   
					    
						a { display: flex;
							padding: var(--sp-6) var(--sp-3);
							align-items: center;

						}
						
							.link-icon{				    
											    
								height: var(--sp-3);
							    width: var(--sp-3);
							    margin-right: var(--sp-6);
							    
						    }
					    
				    }
				    
				    .filter__subnav {
					    
					    .list__item {
					
					   
					    
						a { display: flex;
							padding: var(--sp-6) var(--sp-3);
							align-items: center;
							margin-left: var(-sp-2);

						}
						
							.link-icon{				    
											    
								height: var(--sp-3);
							    width: var(--sp-3);
							    margin-right: var(--sp-6);
							    
						    }
					    
				    }
				    
				    }
				}
			}
*/
.tab-nav {
  position: relative;
  -webkit-flex: 1 0 auto;
          flex: 1 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  height: 100%;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  overflow-y: scroll;
  font-size: var(--fs1);
  padding: var(--slab-pad--slim);
  margin-right: 6ch;
  /* 	@extend %tab-styles; */ }
  .tab-nav__item {
    display: -webkit-flex;
    display: flex;
    margin-right: var(--sp0);
    font-size: var(--fs0);
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex: 0 0 auto;
            flex: 0 0 auto; }

/*
a:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}
*/
nav .main {
  display: -webkit-flex;
  display: flex;
  height: 100%;
  top: 0;
  color: var(--nav-color); }
  nav .main__item {
    margin: auto 0;
    padding: 0 1rem; }
    nav .main__item a.active {
      box-shadow: 0 1px 0 var(--red); }
    nav .main__item:first-child {
      padding-left: 0; }
      @media (min-width: 600px) {
        nav .main__item:first-child {
          margin-left: -2em; } }
.btn {
  display: -webkit-flex;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-family: var(--base-font-family);
  line-height: 1;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  position: relative;
  text-align: center;
  cursor: pointer;
  -webkit-align-items: center;
          align-items: center;
  transition: 0.1s cubic-bezier(0.38, 0.01, 0.24, 0.99);
  background: var(--btn-bg-primary);
  color: var(--btn-text-primary);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-radius: var(--btn-border-radius);
  border-width: 0;
  font-size: var(--fs0);
  padding: 0 var(--sp-6);
  padding: .75em 1em; }
  .btn .link-icon {
    stroke-width: 1px;
    height: 1em;
    width: 1em;
    stroke: currentColor;
    margin-right: .5em;
    fill: none;
    transition: 0.1s cubic-bezier(0.38, 0.01, 0.24, 0.99); }
    .btn .link-icon:hover {
      -webkit-transform-origin: center;
              transform-origin: center;
      stroke-width: 1;
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
      transition: 0.1s cubic-bezier(0.38, 0.01, 0.24, 0.99);
      --btn-bg-primary: var(--blue); }
  .btn__copy {
    line-height: 1; }
  .btn--sml {
    font-size: var(--fs-1); }
  .btn--mid {
    font-size: var(--fs0); }
  .btn--big {
    font-size: var(--fs1); }
  .btn--text {
    border-color: transparent;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent; }

/*
.btn-group {
    display: flex;
    flex-direction: row;
    grid-gap: 1rem;
    
    .btn {    
	    margin-right: var(--sp-2);
	}
}
*/
.btn-group {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  grid-gap: var(--sp-4);
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap; }

/*
 .document__actions{
	  
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10px, min-content));
    grid-gap: var(--sp-6);

  }
*/
/*
.multi-btn {
		  
	justify-items: flex-start;
    position: relative;
    display: flex;
    flex: 0 1 100%;
    height: var(--sp0);
    
		  .btn + .list {
			    display: none;
			}
			
		  &:hover{
			  
			 .btn:first-child {
				@extend %ss-cta-1--hover;
			 }
			
			.btn + .list {
				margin-left: var(--sp-6);			  
			    display: grid;
				grid-gap: var(--sp-6);

				grid-template-columns: repeat(3, min-content);
			}
			
		}	
		  
		  
			
	
	  }
	  
	  .link-icon--flag{
			fill: var(--accent);
		    height: var(--sp-4);
		    width: var(--sp-4);
    
		}
*/
label + input {
  margin-bottom: var(--sp0); }

form {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column; }

label {
  font-size: var(--fs-1); }

input {
  font-family: var(--base-font-family);
  line-height: var(--lh1);
  background: var(--white);
  border-radius: 0px;
  border-style: solid;
  border-color: #B9B9B9;
  border-width: 0px;
  font-size: var(--fs0);
  padding: .5em 1em;
  max-width: 60ch; }
  input::-webkit-input-placeholder {
    color: #969696; }
  input::-moz-placeholder {
    color: #969696; }
  input:-ms-input-placeholder {
    color: #969696; }
  input::placeholder {
    color: #969696; }
  input:hover {
    border-color: #737373; }
  input:focus {
    box-shadow: 0 0px 6px #3F6ECC;
    outline: none; }
  input:active, input.active {
    border-color: #3F6ECC; }
  input.error {
    border-color: #e81c2d;
    color: #e81c2d; }
  input.disabled {
    background: #EBEBEB;
    color: #969696; }
  input[type=search] {
    padding: .5em .5em .5em 1em;
    border-radius: 5rem;
    -webkit-align-self: center;
            align-self: center; }
  input[type=submit] {
    padding: .5em 1em .5em 1em;
    -webkit-align-self: center;
            align-self: center;
    color: var(--white);
    background: var(--red);
    border: none; }

.checkbox input[type="checkbox"] {
  text-indent: -9999px;
  opacity: 0;
  height: 0;
  width: 0; }

.checkbox label::before {
  content: "";
  display: inline-block;
  height: 16px;
  width: 16px;
  border: var(--line1); }

.checkbox label::after {
  content: "";
  display: inline-block;
  height: 6px;
  width: 9px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg); }

.checkbox label {
  position: relative; }

.checkbox label::before,
.checkbox label::after {
  position: absolute; }

/*Outer-box*/
/*Checkmark*/
.checkbox label::after {
  left: 4px;
  top: 4px; }

/*Hide the checkmark by default*/
.checkbox input[type="checkbox"] + label::after {
  content: none; }

/*Unhide the checkmark on the checked state*/
.checkbox input[type="checkbox"]:checked + label::after {
  content: ""; }

/*Adding focus styles on the outer-box of the fake checkbox*/
.checkbox input[type="checkbox"]:focus + label::before {
  outline: #3b99fc auto 5px; }

#mc_embed_signup {
  display: -webkit-flex;
  display: flex;
  /*  border-top: 1px solid var(--grey7); */
  /*  padding: 1em; */
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 100%;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  /*
    p { 
	    
	    font-size: var(--fs1);
	    font-weight: var(--fw-semi);
	    color: var(--bright-purple);
	    margin-bottom: 1em;
    }
*/
  /*
    > * + * {
	    
	    margin-top: 1em;
    }
*/ }
  #mc_embed_signup input#mc-embedded-subscribe {
    /* 	background: var(--bright-purple); */ }

/*
#mc-embedded-subscribe {
	margin-top: 1em;
}
*/
.brand {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  width: 100%; }
  .brand__key-info {
    -webkit-justify-content: center;
            justify-content: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
            flex-direction: column; }
  .brand__img {
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
    width: var(--sz-1);
    height: var(--sz-1);
    overflow: hidden;
    margin: 0;
    padding: 0; }
    .brand__img svg {
      height: 100%;
      width: 100%; }
  .brand__name {
    font-size: var(--fs1);
    line-height: var(--lh1);
    font-weight: var(--fw-bold);
    margin-left: .5em;
    color: var(--grey8); }
    @media (min-width: 600px) {
      .brand__name {
        display: -webkit-flex;
        display: flex; } }
  .brand--home .brand__name {
    display: none; }
    @media (min-width: 600px) {
      .brand--home .brand__name {
        display: -webkit-flex;
        display: flex; } }
.article__body > * + *, .l-split__img > * + *, .l-about__body > * + * {
  margin-top: 2em; }

.article__body h2, .l-split__img h2, .l-about__body h2 {
  font-size: var(--fs1);
  margin-top: 1em; }

.article__body h3, .l-split__img h3, .l-about__body h3 {
  font-size: var(--fs1);
  margin-top: 1em; }

.article__body .blockquote, .l-split__img .blockquote, .l-about__body .blockquote {
  font-size: var(--fs2);
  font-weight: var(--fw-bold); }
  .article__body .blockquote:before, .l-split__img .blockquote:before, .l-about__body .blockquote:before {
    top: 0rem; }
  .article__body .blockquote__cite, .l-split__img .blockquote__cite, .l-about__body .blockquote__cite {
    font-size: var(--fs-1);
    font-style: normal;
    font-weight: var(--fw-regular);
    padding: 0; }

.article__body dl, .l-split__img dl, .l-about__body dl {
  font-size: var(--fs0); }
  .article__body dl dt, .l-split__img dl dt, .l-about__body dl dt {
    font-weight: var(--fw-bold); }
  .article__body dl dd, .l-split__img dl dd, .l-about__body dl dd {
    font-style: italic;
    margin-bottom: 1em; }

.article__body ol, .l-split__img ol, .l-about__body ol {
  list-style: none;
  counter-reset: standard; }
  .article__body ol li, .l-split__img ol li, .l-about__body ol li {
    counter-increment: standard;
    position: relative;
    margin-bottom: 1em;
    font-style: italic;
    list-style-position: outside;
    margin-left: 1.5em;
    color: var(--so-text);
    line-height: var(--lh3);
    max-width: 65ch;
    font-weight: var(--fw-bold); }
    .article__body ol li:before, .l-split__img ol li:before, .l-about__body ol li:before {
      content: counter(standard);
      color: red;
      position: absolute;
      margin-left: -1.5em;
      /* font-weight: bold; */ }

.article__body ul, .l-split__img ul, .l-about__body ul {
  margin-bottom: 1em; }
  .article__body ul > * + *, .l-split__img ul > * + *, .l-about__body ul > * + * {
    margin-top: 1em; }
  .article__body ul li, .l-split__img ul li, .l-about__body ul li {
    line-height: var(--lh3);
    position: relative;
    margin-left: 1em;
    font-style: italic;
    color: var(--so-text);
    max-width: 65ch; }
    .article__body ul li:before, .l-split__img ul li:before, .l-about__body ul li:before {
      content: '';
      height: .25em;
      width: .25em;
      background: var(--red);
      position: absolute;
      top: .5em;
      left: -1em;
      font-weight: var(--fw-bold);
      /*    border-radius: 2em; */ }
  .article__body ul.questions li, .l-split__img ul.questions li, .l-about__body ul.questions li {
    padding: 0 0 0 1em; }
    .article__body ul.questions li:before, .l-split__img ul.questions li:before, .l-about__body ul.questions li:before {
      height: 1em;
      width: 1em;
      content: "Q";
      background: none;
      top: 0;
      font-weight: 400;
      color: var(--accent);
      /* left: -1.5em; */
      font-style: normal; }
  .article__body ul.quotes li, .l-split__img ul.quotes li, .l-about__body ul.quotes li {
    background: var(--light-blue);
    padding: .5em;
    margin-left: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: var(--fs0); }
    .article__body ul.quotes li:before, .l-split__img ul.quotes li:before, .l-about__body ul.quotes li:before {
      content: none;
      display: none; }
    .article__body ul.quotes li:after, .l-split__img ul.quotes li:after, .l-about__body ul.quotes li:after {
      content: '';
      width: 0px;
      height: 0px;
      border-top: 0px solid transparent;
      border-bottom: 1em solid transparent;
      border-left: 1em solid var(--light-blue);
      position: absolute;
      left: 1em;
      bottom: -1em; }
    .article__body ul.quotes li:nth-child(even):after, .l-split__img ul.quotes li:nth-child(even):after, .l-about__body ul.quotes li:nth-child(even):after {
      right: 1em;
      left: auto;
      border-right: 1em solid var(--light-blue);
      border-left: 0 solid transparent; }

.article__body pre, .l-split__img pre, .l-about__body pre {
  font-size: var(--fs-1);
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 1em;
  background: var(--black);
  color: var(--off-white); }

.article__body p, .l-split__img p, .l-about__body p {
  max-width: 60ch;
  line-height: var(--lh5); }
  .article__body p a, .l-split__img p a, .l-about__body p a {
    box-shadow: 0 1px 0 var(--p-link); }
  .article__body p:first-child, .l-split__img p:first-child, .l-about__body p:first-child {
    font-size: var(--fs1);
    font-weight: var(--fw-semi); }

.article__body figure, .l-split__img figure, .l-about__body figure {
  position: relative;
  display: grid;
  margin-bottom: var(--sp0); }
  @media (min-width: 600px) {
    .article__body figure, .l-split__img figure, .l-about__body figure {
      width: auto;
      left: 0rem; } }
  .article__body figure img, .l-split__img figure img, .l-about__body figure img {
    box-shadow: var(--elevation-1); }
  .article__body figure figcaption, .l-split__img figure figcaption, .l-about__body figure figcaption {
    color: var(--grey6);
    font-size: var(--fs-1);
    padding: .5em 0; }

.article__body img, .l-split__img img, .l-about__body img {
  width: 100%;
  /* max-width: max-content; */ }

.article__body p + .article__heading, .l-split__img p + .article__heading, .l-about__body p + .article__heading,
.article__body p + .article__subheading,
.l-split__img p + .article__subheading,
.l-about__body p + .article__subheading,
.article__body p + figure,
.l-split__img p + figure,
.l-about__body p + figure,
.article__body p + ol,
.l-split__img p + ol,
.l-about__body p + ol,
.article__body p + ul,
.l-split__img p + ul,
.l-about__body p + ul,
.article__body p + dl,
.l-split__img p + dl,
.l-about__body p + dl {
  margin-top: 3em; }

.hotspot {
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 9000; }
  .hotspot button {
    opacity: 0; }
  .hotspot:hover {
    z-index: 9000;
    padding: 1em; }
    .hotspot:hover button {
      opacity: 1; }

.btn + .tooltip {
  position: relative;
  display: none; }

.btn:hover {
  background: red; }
  .btn:hover .tooltip {
    display: block; }

.article .gallery {
  grid-column: 1 / span 3; }

.article.on p, .article.on .article__heading {
  opacity: 0;
  display: none; }

.article.on.l-art-2 {
  grid-template-columns: 1fr;
  font-size: var(--fs1); }

.article.on .img-group {
  grid-template-columns: 1fr; }

.article.on .l-art__head {
  display: grid;
  background: var(--light-blue); }
  .article.on .l-art__head .article__key-info {
    grid-template-columns: 4fr 3fr;
    grid-gap: var(--sp8); }
    .article.on .l-art__head .article__key-info--core {
      -webkit-align-items: end;
              align-items: end;
      display: grid; }

.article__intro {
  display: grid;
  grid-template-columns: minmax(var(--sp-2), 1fr) minmax(auto, 37em) minmax(var(--sp-2), 1fr);
  padding: var(--sp2) 0;
  background: var(--blue-01);
  grid-column: 1 / span 4;
  /* 	font-weight: var(--fw-semi); */ }
  .article__intro > * + * {
    margin-top: 2em; }
  .article__intro p, .article__intro ul {
    grid-column: 2 / span 1; }

.article__body {
  position: relative;
  margin-bottom: var(--sp2);
  -webkit-animation: fade var(--ao-2) ease-in;
          animation: fade var(--ao-2) ease-in;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-delay: var(--ao-2);
          animation-delay: var(--ao-2);
  font-family: var(--reading-font);
  font-size: var(--fs0);
  color: var(--body-text);
  -webkit-align-content: start;
          align-content: start;
  display: grid;
  grid-template-columns: minmax(var(--sp-2), 1fr) minmax(auto, 37em) minmax(var(--sp-2), 1fr);
  padding: var(--sp2) 0;
  grid-column: 1 / span 4; }
  .article__body > * + * {
    margin-top: 2em; }
  .article__body p, .article__body ul, .article__body blockquote, .article__body .article__heading {
    grid-column: 2 / span 1; }
  .article__body img {
    display: -webkit-flex;
    display: flex;
    grid-column: 1 / span 4;
    max-width: 100%; }

.article__title {
  color: var(--title);
  line-height: var(--lh3);
  font-size: var(--fs2);
  font-weight: 750; }
  @media (min-width: 989px) {
    .article__title {
      font-size: var(--fs2); } }
  .article__title span {
    font-size: .5em;
    font-weight: var(--fw-regular);
    display: inherit; }

.article__comment {
  color: var(--meta-text);
  font-size: var(--fs-1);
  line-height: var(--lh3);
  margin-top: var(--sp-4); }

.article__description {
  line-height: var(--lh3);
  font-size: var(--fs1); }

.article__header {
  color: var(--article-title);
  padding: var(--slab-pad); }

.article__heading {
  position: relative;
  font-family: var(--ui-font);
  padding: var(--sp-6) 0 0;
  font-weight: var(--fw-semi);
  font-size: var(--fs1);
  line-height: var(--lh3);
  color: var(--heading-title-color); }
  .article__heading:before {
    content: "";
    position: absolute;
    background: var(--grad-right);
    width: 100%;
    height: .8em;
    margin-top: 0.2em;
    z-index: -1; }

.article__subheading {
  font-family: var(--ui-font);
  text-transform: uppercase;
  padding: var(--sp-6) 0 0;
  font-weight: 400;
  font-size: var(--fs1);
  line-height: 1; }

:root {
  --bpm: 6s;
  --p-center: 50% 50%;
  --p1: 50% 0%;
  --p2: 75% 6.7%;
  --p3: 93.3% 25%;
  --p4: 100% 50%;
  --p5: 93.3% 75%;
  --p6: 75% 93.3%;
  --p7: 50% 100%;
  --p8: 25% 93.3%;
  --p9: 6.7% 75%;
  --p10: 0% 50%;
  --p11: 6.7% 25%;
  --p12: 25% 6.7%;
  --maj-all: polygon(
			
			
				var(--p1), 
				
				var(--p1), 
				var(--p3), 
				var(--p3), 
				
				var(--p5), 
				
				var(--p6), 
				var(--p6), 
				
				var(--p8),  
				var(--p8),
				  
				var(--p10),  
				var(--p10),
				
				var(--p12)

				);
  --center: polygon(
				
			var(--p-center), 
			var(--p-center), 
			var(--p-center),
			var(--p-center),  
			var(--p-center),
			var(--p-center),
			var(--p-center), 
			var(--p-center),
			var(--p-center),  
			var(--p-center),
			var(--p-center),
			var(--p-center)
		
					
		);
  --maj: polygon(
				
			var(--p1), 
			var(--p1), 
			var(--p1), 
			var(--p1), 
			var(--p1), 
			
			var(--p5),
			var(--p5),
			var(--p5),  
			
			var(--p8),
			var(--p8),
			var(--p8),
			var(--p8)
			
		);
  --min: polygon(
		
			var(--p1), 
			var(--p1), 
			var(--p1), 
			var(--p1), 
			var(--p1), 
			
			var(--p4),
			var(--p4),
			var(--p4),  
			
			var(--p8),
			var(--p8),
			var(--p8),
			var(--p8)
			
		);
  --min7: polygon(
		
			var(--p1), 
			var(--p1), 
			var(--p1), 
			var(--p1),
			
			var(--p4),
			var(--p4),
			var(--p4), 
			
			var(--p8), 
			var(--p8), 
			
			var(--p10), 
			var(--p10),
			var(--p10)
			
		);
  --maj7: polygon(
			
				var(--p1), 
				var(--p1), 
				var(--p1), 
				var(--p1),
				
				var(--p5),
				var(--p5),
				var(--p5), 
				
				var(--p8), 
				var(--p8), 
				
				var(--p12), 
				var(--p12),
				var(--p12)
				
			);
  --maj6: polygon(
			
				var(--p1), 
				var(--p5), 
				var(--p8), 
				var(--p10) 
				
			);
  --maj9: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p5), 
				var(--p8), 
				var(--p12) 
				
			);
  --maj11: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p5), 
				var(--p6), 
				var(--p8), 
				var(--p12) 
				
			);
  --maj13: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p5), 
				var(--p6), 
				var(--p8), 
				var(--p10), 
				var(--p12) 
				
			);
  /*

			--min: polygon(
			
				var(--p1), 
				var(--p4), 
				var(--p8), 
				var(--p8) 
				
			);
*/
  --min6: polygon(
				
					var(--p1), 
					var(--p4), 
					var(--p8), 
					var(--p10) 
					
				);
  /*
			--min7: polygon(
				
					var(--p1), 
					var(--p4), 
					var(--p8), 
					var(--p11) 
					
				);
*/
  --min7b5: polygon(
				
					var(--p1), 
					var(--p4), 
					var(--p7), 
					var(--p11) 
					
				);
  --min9: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p4), 
				var(--p8), 
				var(--p11) 
				
			);
  --min11: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p4),
				var(--p6), 
				var(--p8), 
				var(--p11) 
				
			);
  --min13: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p4),
				var(--p6), 
				var(--p8), 
				var(--p8),
				var(--p9),
				var(--p11) 
				
			);
  --dom7: polygon(
			
				var(--p1),
				var(--p5), 
				var(--p8), 
				var(--p11)
			
				
			);
  --dom9: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p5), 
				var(--p8), 
				var(--p11) 
				
			);
  --dom69: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p5), 
				var(--p8), 
				var(--p10) 
				
			);
  --dom11: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p5), 
				var(--p6), 
				var(--p8), 
				var(--p11) 
				
			);
  --dom13: polygon(
			
				var(--p1),
				var(--p3), 
				var(--p5), 
				var(--p6), 
				var(--p8), 
				var(--p10), 
				var(--p11) 
				
			);
  --sus2: polygon(
			
				var(--p1),
				var(--p3),
				var(--p5), 
				var(--p8)

			);
  --sus4: polygon(
			
				var(--p1),
				var(--p5),
				var(--p6), 
				var(--p8)

			);
  --dim: polygon(
			
				var(--p1),
				var(--p1),
				var(--p1),
				
				var(--p4),
				var(--p4),
				var(--p4),
				
				var(--p7),
				var(--p7),
				var(--p7),
				var(--p7),
				var(--p7),
				var(--p7)
	
			);
  --dim7: polygon(
			
				var(--p1),
				var(--p4),
				var(--p7),
				var(--p10)
	
			);
  --fmaj: polygon( 
				
					var(--fourth), 
					var(--sixth), 
					var(--first), 
					var(--first)
				);
  --cmaj: polygon( 
				
					var(--first), 
					var(--third), 
					var(--fifth), 
					var(--fifth)
				);
  --cmaj9: polygon( 
				
					var(--first), 
					var(--second),
					var(--third), 
					var(--fifth), 
					var(--seventh)
				);
  --bmin7: polygon( 
				
					 
					var(--second),
					var(--third), 
					var(--fifth), 
					var(--sixth), 
					var(--seventh)
				);
  --fmaj7: polygon( 
					var(--second),
					var(--fourth), 
					var(--sixth), 
					var(--first), 
					var(--second)
					
				);
  --cmaj: polygon( 
				
					var(--first), 
					var(--first),
					var(--third), 
					var(--fifth), 
					var(--fifth)
				);
  --gmaj: polygon( 
				
					var(--fifth), 
					var(--seventh), 
					var(--second), 
					var(--second)
				);
  --cmin: polygon(
				
				var(--first), 
				var(--minthird), 
				var(--fifth), 
				var(--fifth)
				);
  --dmin7: polygon(var(--second), 
				var(--fifth), 
				var(--sixth), 
				var(--seventh)
				);
  --full: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%); }

.campaign__desc {
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5); }

.campaign .ds-hero__strap {
  -webkit-filter: drop-shadow(0px 0px 10px, #1d2029);
          filter: drop-shadow(0px 0px 10px, #1d2029); }

.ds-hero .btn {
  color: #FFF;
  background: #E81C2D;
  border-color: #E81C2D;
  font-weight: normal; }
  .ds-hero .btn:hover {
    background: #3679E0;
    border-color: #3679E0; }

@-webkit-keyframes hero-switch {
  95% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes hero-switch-2 {
  95% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes move {
  00% {
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-transform: scale(1);
            transform: scale(1); }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); } }

@-webkit-keyframes text-fade {
  0% {
    opacity: 0; }
  30% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes text-fade-2 {
  0% {
    opacity: 0; }
  30%,
  90% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@-webkit-keyframes move-out {
  99.5% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); } }

.ds-hero {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  position: relative;
  width: 100%;
  min-height: 80vh;
  overflow: hidden;
  -webkit-align-items: center;
          align-items: center;
  position: absolute; }
  @media (min-width: 600px) {
    .ds-hero {
      min-height: 80vh;
      -webkit-flex-direction: row;
              flex-direction: row; } }
  .ds-hero .btn {
    position: absolute;
    margin: var(--sp2) auto;
    z-index: 5;
    bottom: 0; }
    @media (min-width: 600px) {
      .ds-hero .btn {
        margin: var(--sp2); } }
.campaign {
  position: absolute;
  display: -webkit-flex;
  display: flex;
  height: 100%;
  width: 100%;
  padding: var(--sp2); }
  .campaign:before {
    z-index: -2;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  .campaign__text {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-flex: 100%;
            flex: 100%;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
    -webkit-align-items: center;
            align-items: center;
    text-align: center;
    opacity: 0;
    font-size: var(--fs-2);
    margin-bottom: var(--sp4); }
    @media (min-width: 600px) {
      .campaign__text {
        -webkit-align-items: flex-start;
                align-items: flex-start;
        font-size: var(--fs-1);
        text-align: left; } }
    .campaign__text > * + * {
      margin-top: var(--sp0); }
  .campaign__desc {
    color: #FFF; }
  .campaign__strap {
    position: relative;
    max-width: 100%;
    max-height: var(--sp1); }
    .campaign__strap:before {
      position: absolute;
      background: var(--blue); }
  .campaign__desc {
    max-width: 40ch; }
  .campaign-1 {
    z-index: 2;
    -webkit-animation: hero-switch 7s, move-out 7s linear;
            animation: hero-switch 7s, move-out 7s linear;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: -.5s;
            animation-delay: -.5s; }
    .campaign-1:before {
      background-blend-mode: overlay;
      background-color: var(--accent);
      background-image: url(../assets/img/bulb.svg);
      background-position: center;
      background-size: cover;
      -webkit-animation: move 7s ease;
              animation: move 7s ease;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .campaign-1 .campaign__text {
      -webkit-animation: text-fade 7s ease-out;
              animation: text-fade 7s ease-out;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
  .campaign-2 {
    z-index: 1;
    -webkit-animation: hero-switch 7s, move-out 7s linear;
            animation: hero-switch 7s, move-out 7s linear;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 7s;
            animation-delay: 7s; }
    .campaign-2:before {
      background-color: var(--deep-purple);
      background-image: url(../assets/img/ui-framework/cover-2.jpg);
      background-position: bottom center;
      background-size: cover;
      -webkit-animation: move 7s ease-out;
              animation: move 7s ease-out;
      -webkit-animation-delay: 5.5s;
              animation-delay: 5.5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    .campaign-2 .campaign__text {
      -webkit-animation: text-fade 7s ease-out;
              animation: text-fade 7s ease-out;
      -webkit-animation-delay: 7s;
              animation-delay: 7s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
  .campaign-3 {
    -webkit-animation: hero-switch 7s linear;
            animation: hero-switch 7s linear;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 14s;
            animation-delay: 14s; }
    .campaign-3:before {
      background-color: var(--yellow);
      background-image: url(../assets/img/jpdna/cover.jpg);
      -webkit-animation: move 7s ease-out;
              animation: move 7s ease-out;
      -webkit-animation-delay: 13.5s;
              animation-delay: 13.5s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
      background-size: cover;
      background-position: center; }
    .campaign-3 .campaign__text {
      -webkit-animation: text-fade-2 7s ease-out;
              animation: text-fade-2 7s ease-out;
      -webkit-animation-delay: 14s;
              animation-delay: 14s;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }

/*	
	
	




@import "layouts/_sections";
// @import "_lists";

@import "interface/_inputs";
@import "interface/_table";

@import "interface/_btns";

@import "layouts/_home";
@import "layouts/_console";
@import "layouts/_tiles";
@import "layouts/_lists";


// Content
@import "content/_profile";
@import "content/_document";
@import "content/_article";
@import "content/_stats";
@import "content/_post";
@import "content/_data-vis";
@import "content/_heroes";
@import "content/_recommendation";
@import "content/_edna";
@import "content/_fo";

// Features

@import "features/_manual-entry-form";
*/
/*# sourceMappingURL=_core.css.map */