/**
 * Triple R
 */

/**
 * Reset
 */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
button,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  text-align: left;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

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

/**
 * Traits
 */

.hide-from-all {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.hide-visually {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.hide-visually.focusable:active,
.hide-visually.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Hide text but maintain layout
 */

.hide-text {
  color: transparent;
  display: block;
  font: 0/0 a;
}

/*
 * Colors
 */

.c-white {
  color: var(--color-white);
}

.c-red {
  color: var(--color-red);
}

.bg-grey-light {
  background-color: var(--color-grey-light);
}

.c-grey-light {
  color: var(--color-grey-light);
}

.c-grey {
  color: var(--color-grey);
}

.bg-grey {
  background-color: var(--color-grey);
}

.c-grey-dark {
  color: var(--color-grey-dark);
}

.c-grey-darker {
  color: var(--color-grey-darker);
}

.c-grey-darkest {
  color: var(--color-grey-darkest);
}

.bg-grey-darkest {
  background-color: var(--color-grey-darkest);
}

.g-pink-orange {
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#feb740));
  background-image: linear-gradient(to right, #fa709a, #feb740);
}

.g-pink-purple {
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#d57eeb));
  background-image: linear-gradient(to right, #fa709a, #d57eeb);
}

.g-pink-blue {
  background-image: -webkit-gradient(linear, left top, right top, from(#dd3b94), to(#436d94));
  background-image: linear-gradient(to right, #dd3b94, #436d94);
}

.g-aqua-purple {
  background-image: -webkit-gradient(linear, left top, right top, from(#88d3ce), to(#b845e2));
  background-image: linear-gradient(to right, #88d3ce, #b845e2);
}

.c-orange {
  color: var(--color-orange);
}

.bg-red {
  background-color: var(--color-red);
}

.bg-light-orange {
  background-color: var(--color-light-orange);
}

.bg-lighter-orange {
  background-color: #fff1eb;
}

.bg-light-pink {
  background-color: #fff6f7;
}

.bg-green {
  background-color: #e2e7c3;
}

.bg-light-green {
  background-color: #f3f5e7;
}

.bg-light-blue {
  background-color: #e1f4f9;
}

.bg-blue {
  background-color: #b4e4ef;
}

.bg-purple {
  background-color: #efb4c5;
}

.bg-yellow {
  background-color: #efe2b4;
}

.bg-light-yellow {
  background-color: #f9f3e1;
}

.border-light-orange {
  border-color: var(--color-light-orange);
}

.border-lighter-orange {
  border-color: #fff1eb;
}

.border-light-pink {
  border-color: #fff6f7;
}

.border-green {
  border-color: #e2e7c3;
}

.border-light-green {
  border-color: #f3f5e7;
}

.border-light-blue {
  border-color: #e1f4f9;
}

.border-blue {
  border-color: #b4e4ef;
}

.border-purple {
  border-color: #efb4c5;
}

.border-yellow {
  border-color: #efe2b4;
}

.border-light-yellow {
  border-color: #f9f3e1;
}

:root {
  --spacingXSmall: 1rem;
  --spacingSmall: 2rem;
  --spacingMedium: 3rem;
  --spacingLarge: 4rem;
  --spacingXLarge: 6rem;
}

/*
 * Floats
 */

.fl-left {
  float: left;
}

.fl-right {
  float: right;
}

/*
 * Margin
 */

.flush {
  margin: 0;
  padding: 0;
}

.m-xsmall {
  margin: var(--spacingXSmall);
}

.m-small {
  margin: var(--spacingSmall);
}

.m-medium {
  margin: var(--spacingMedium);
}

.m-large {
  margin: var(--spacingLarge);
}

.breakpoint-tablet .m-large,
.breakpoint-phone .m-large,
.breakpoint-phone-small .m-large {
  margin: var(--spacingMedium);
}

.m-xlarge {
  margin: var(--spacingXLarge);
}

.breakpoint-tablet .m-xlarge,
.breakpoint-phone .m-xlarge,
.breakpoint-phone-small .m-xlarge {
  margin: var(--spacingMedium);
}

.mt-flush {
  margin-top: 0;
}

.mt-xsmall {
  margin-top: var(--spacingXSmall);
}

.mt-small {
  margin-top: var(--spacingSmall);
}

.mt-medium {
  margin-top: var(--spacingMedium);
}

.mt-large {
  margin-top: var(--spacingLarge);
}

.breakpoint-tablet .mt-large,
.breakpoint-phone .mt-large,
.breakpoint-phone-small .mt-large {
  margin-top: var(--spacingMedium);
}

.mt-xlarge {
  margin-top: var(--spacingXLarge);
}

.breakpoint-tablet .mt-xlarge,
.breakpoint-phone .mt-xlarge,
.breakpoint-phone-small .mt-xlarge {
  margin-top: var(--spacingMedium);
}

.mr-flush {
  margin-right: 0;
}

.mr-xsmall {
  margin-right: var(--spacingXSmall);
}

.mr-small {
  margin-right: var(--spacingSmall);
}

.mr-medium {
  margin-right: var(--spacingMedium);
}

.mr-large {
  margin-right: var(--spacingLarge);
}

.breakpoint-tablet .mr-large,
.breakpoint-phone .mr-large,
.breakpoint-phone-small .mr-large {
  margin-right: var(--spacingMedium);
}

.mr-xlarge {
  margin-right: var(--spacingXLarge);
}

.breakpoint-tablet .mr-xlarge,
.breakpoint-phone .mr-xlarge,
.breakpoint-phone-small .mr-xlarge {
  margin-right: var(--spacingMedium);
}

.mb-flush {
  margin-bottom: 0;
}

.mb-xsmall {
  margin-bottom: var(--spacingXSmall);
}

.mb-small {
  margin-bottom: var(--spacingSmall);
}

.mb-medium {
  margin-bottom: var(--spacingMedium);
}

.mb-large {
  margin-bottom: var(--spacingLarge);
}

.breakpoint-tablet .mb-large,
.breakpoint-phone .mb-large,
.breakpoint-phone-small .mb-large {
  margin-bottom: var(--spacingMedium);
}

.mb-xlarge {
  margin-bottom: var(--spacingXLarge);
}

.breakpoint-tablet .mb-xlarge,
.breakpoint-phone .mb-xlarge,
.breakpoint-phone-small .mb-xlarge {
  margin-bottom: var(--spacingMedium);
}

.ml-flush {
  margin-left: 0;
}

.ml-xsmall {
  margin-left: var(--spacingXSmall);
}

.ml-small {
  margin-left: var(--spacingSmall);
}

.ml-medium {
  margin-left: var(--spacingMedium);
}

.ml-large {
  margin-left: var(--spacingLarge);
}

.breakpoint-tablet .ml-large,
.breakpoint-phone .ml-large,
.breakpoint-phone-small .ml-large {
  margin-left: var(--spacingMedium);
}

.ml-xlarge {
  margin-left: var(--spacingXLarge);
}

.breakpoint-tablet .ml-xlarge,
.breakpoint-phone .ml-xlarge,
.breakpoint-phone-small .ml-xlarge {
  margin-left: var(--spacingMedium);
}

.my-flush {
  margin-top: 0;
  margin-bottom: 0;
}

.my-xsmall {
  margin-top: var(--spacingXSmall);
  margin-bottom: var(--spacingXSmall);
}

.my-small {
  margin-top: var(--spacingSmall);
  margin-bottom: var(--spacingSmall);
}

.my-medium {
  margin-top: var(--spacingMedium);
  margin-bottom: var(--spacingMedium);
}

.my-large {
  margin-top: var(--spacingLarge);
  margin-bottom: var(--spacingLarge);
}

.breakpoint-tablet .my-large,
.breakpoint-phone .my-large,
.breakpoint-phone-small .my-large {
  margin-top: var(--spacingMedium);
  margin-bottom: var(--spacingMedium);
}

.my-xlarge {
  margin-top: var(--spacingXLarge);
  margin-bottom: var(--spacingXLarge);
}

.breakpoint-tablet .my-xlarge,
.breakpoint-phone .my-xlarge,
.breakpoint-phone-small .my-xlarge {
  margin-top: var(--spacingMedium);
  margin-bottom: var(--spacingMedium);
}

.mx-xsmall {
  margin-left: var(--spacingXSmall);
  margin-right: var(--spacingXSmall);
}

.mx-flush {
  margin-left: 0;
  margin-right: 0;
}

.mx-small {
  margin-left: var(--spacingSmall);
  margin-right: var(--spacingSmall);
}

.mx-medium {
  margin-left: var(--spacingMedium);
  margin-right: var(--spacingMedium);
}

.mx-large {
  margin-left: var(--spacingLarge);
  margin-right: var(--spacingLarge);
}

.breakpoint-tablet .mx-large,
.breakpoint-phone .mx-large,
.breakpoint-phone-small .mx-large {
  margin-left: var(--spacingMedium);
  margin-right: var(--spacingMedium);
}

.mx-xlarge {
  margin-left: var(--spacingXLarge);
  margin-right: var(--spacingXLarge);
}

.breakpoint-tablet .mx-xlarge,
.breakpoint-phone .mx-xlarge,
.breakpoint-phone-small .mx-xlarge {
  margin-left: var(--spacingMedium);
  margin-right: var(--spacingMedium);
}

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

/*
 * Padding
 */

.p-xsmall {
  padding: var(--spacingXSmall);
}

.p-small {
  padding: var(--spacingSmall);
}

.p-medium {
  padding: var(--spacingMedium);
}

.p-large {
  padding: var(--spacingLarge);
}

.breakpoint-tablet .p-large,
.breakpoint-phone .p-large,
.breakpoint-phone-small .p-large {
  padding: var(--spacingMedium);
}

.p-xlarge {
  padding: var(--spacingXLarge);
}

.breakpoint-tablet .p-xlarge,
.breakpoint-phone .p-xlarge,
.breakpoint-phone-small .p-xlarge {
  padding: var(--spacingMedium);
}

.pt-xsmall {
  padding-top: var(--spacingXSmall);
}

.pt-flush {
  padding-top: 0;
}

.pt-small {
  padding-top: var(--spacingSmall);
}

.pt-medium {
  padding-top: var(--spacingMedium);
}

.pt-large {
  padding-top: var(--spacingLarge);
}

.breakpoint-tablet .pt-large,
.breakpoint-phone .pt-large,
.breakpoint-phone-small .pt-large {
  padding-top: var(--spacingMedium);
}

.pt-xlarge {
  padding-top: var(--spacingXLarge);
}

.breakpoint-tablet .pt-xlarge,
.breakpoint-phone .pt-xlarge,
.breakpoint-phone-small .pt-xlarge {
  padding-top: var(--spacingMedium);
}

.pr-flush {
  padding-right: 0;
}

.pr-xsmall {
  padding-right: var(--spacingXSmall);
}

.pr-small {
  padding-right: var(--spacingSmall);
}

.pr-medium {
  padding-right: var(--spacingMedium);
}

.pr-large {
  padding-right: var(--spacingLarge);
}

.breakpoint-tablet .pr-large,
.breakpoint-phone .pr-large,
.breakpoint-phone-small .pr-large {
  padding-right: var(--spacingMedium);
}

.pr-xlarge {
  padding-right: var(--spacingXLarge);
}

.breakpoint-tablet .pr-xlarge,
.breakpoint-phone .pr-xlarge,
.breakpoint-phone-small .pr-xlarge {
  padding-right: var(--spacingMedium);
}

.pb-flush {
  padding-bottom: 0;
}

.pb-xsmall {
  padding-bottom: var(--spacingXSmall);
}

.pb-small {
  padding-bottom: var(--spacingSmall);
}

.pb-medium {
  padding-bottom: var(--spacingMedium);
}

.pb-large {
  padding-bottom: var(--spacingLarge);
}

.breakpoint-tablet .pb-large,
.breakpoint-phone .pb-large,
.breakpoint-phone-small .pb-large {
  padding-bottom: var(--spacingMedium);
}

.pb-xlarge {
  padding-bottom: var(--spacingXLarge);
}

.breakpoint-tablet .pb-xlarge,
.breakpoint-phone .pb-xlarge,
.breakpoint-phone-small .pb-xlarge {
  padding-bottom: var(--spacingMedium);
}

.pl-flush {
  padding-left: 0;
}

.pl-xsmall {
  padding-left: var(--spacingXSmall);
}

.pl-small {
  padding-left: var(--spacingSmall);
}

.pl-medium {
  padding-left: var(--spacingMedium);
}

.pl-large {
  padding-left: var(--spacingLarge);
}

.breakpoint-tablet .pl-large,
.breakpoint-phone .pl-large,
.breakpoint-phone-small .pl-large {
  padding-left: var(--spacingMedium);
}

.pl-xlarge {
  padding-left: var(--spacingXLarge);
}

.breakpoint-tablet .pl-xlarge,
.breakpoint-phone .pl-xlarge,
.breakpoint-phone-small .pl-xlarge {
  padding-left: var(--spacingMedium);
}

.py-flush {
  padding-top: 0;
  padding-bottom: 0;
}

.py-xsmall {
  padding-top: var(--spacingXSmall);
  padding-bottom: var(--spacingXSmall);
}

.py-small {
  padding-top: var(--spacingSmall);
  padding-bottom: var(--spacingSmall);
}

.py-medium {
  padding-top: var(--spacingMedium);
  padding-bottom: var(--spacingMedium);
}

.py-large {
  padding-top: var(--spacingLarge);
  padding-bottom: var(--spacingLarge);
}

.breakpoint-tablet .py-large,
.breakpoint-phone .py-large,
.breakpoint-phone-small .py-large {
  padding-top: var(--spacingMedium);
  padding-bottom: var(--spacingMedium);
}

.py-xlarge {
  padding-top: var(--spacingXLarge);
  padding-bottom: var(--spacingXLarge);
}

.breakpoint-tablet .py-xlarge,
.breakpoint-phone .py-xlarge,
.breakpoint-phone-small .py-xlarge {
  padding-top: var(--spacingMedium);
  padding-bottom: var(--spacingMedium);
}

.px-flush {
  padding-left: 0;
  padding-right: 0;
}

.px-xsmall {
  padding-left: var(--spacingXSmall);
  padding-right: var(--spacingXSmall);
}

.px-small {
  padding-left: var(--spacingSmall);
  padding-right: var(--spacingSmall);
}

.px-medium {
  padding-left: var(--spacingMedium);
  padding-right: var(--spacingMedium);
}

.px-large {
  padding-left: var(--spacingLarge);
  padding-right: var(--spacingLarge);
}

.breakpoint-tablet .px-large,
.breakpoint-phone .px-large,
.breakpoint-phone-small .px-large {
  padding-left: var(--spacingMedium);
  padding-right: var(--spacingMedium);
}

.px-xlarge {
  padding-left: var(--spacingXLarge);
  padding-right: var(--spacingXLarge);
}

.breakpoint-tablet .px-xlarge,
.breakpoint-phone .px-xlarge,
.breakpoint-phone-small .px-xlarge {
  padding-left: var(--spacingMedium);
  padding-right: var(--spacingMedium);
}

/*
 * Alignment
 */

.d-block {
  display: block;
}

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

.d-inline {
  display: inline;
}

/*
 * Flex alignment
 */

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex-items-h-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex-items-v-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-items-baseline {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.flex-center {
  -ms-flex-item-align: center;
      align-self: center;
}

.flex-left {
  margin-right: auto;
}

.flex-right {
  margin-left: auto;
}

.flex-space {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-space-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.flex-wrap {
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

.flex-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.flex-dir-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/**
 * Clearfix
 */

.clearfix:after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

/*
 * Breakpoint specific visibility
 */

.breakpoint-widescreen .phone-only,
.breakpoint-desktop .phone-only,
.breakpoint-tablet-wide .phone-only,
.breakpoint-tablet .phone-only {
  display: none !important;
}

.breakpoint-widescreen .tablet-only,
.breakpoint-desktop .tablet-only,
.breakpoint-phone .tablet-only,
.breakpoint-phone-small .tablet-only {
  display: none !important;
}

.breakpoint-tablet-wide .desktop-only,
.breakpoint-tablet .desktop-only,
.breakpoint-phone .desktop-only,
.breakpoint-phone-small .desktop-only {
  display: none !important;
}

.breakpoint-phone .desktop-and-tablet-only,
.breakpoint-phone-small .desktop-and-tablet-only {
  display: none !important;
}

.breakpoint-widescreen .tablet-and-phone-only,
.breakpoint-desktop .tablet-and-phone-only {
  display: none !important;
}

/*
 * Clipping paths
 */

.clip-path-shim {
  height: 16rem;
}

.clip-top-right-corner {
  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0% 100%);
}

.clip-bottom-right-corner {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

.clip-bottom-left-corner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
}

.breakpoint-tablet-wide .tb-clip-bottom-right-corner,
.breakpoint-tablet .tb-clip-bottom-right-corner {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

.breakpoint-phone .ph-clip-bottom-right-corner,
.breakpoint-phone-small .ph-clip-bottom-right-corner {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

/*
* Widths
*/

.width-40 {
  width: 40%;
}

.width-60 {
  width: 60%;
}

.width-100 {
  width: 100%;
}

/*
* Borders
*/

.bd-thin-top {
  border-top-width: 1px;
  border-top-style: solid;
}

.bd-medium-top {
  border-top-width: 2px;
  border-top-style: solid;
}

/*
 * Type
 */

/*
 * Misc
 */

.caps-heading {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.small-heading {
  display: block;
  font-weight: bold;
  font-size: 1.4rem;
  text-decoration: none;
}

.medium-heading {
  display: block;
  font-size: 1.8rem;
  text-decoration: none;
}

.breakpoint-phone .medium-heading,
.breakpoint-phone-small .medium-heading {
  font-size: 1.4rem;
}

.large-heading {
  font-size: 2.4rem;
  font-weight: bold;
  text-decoration: none;
}

.breakpoint-tablet-wide .large-heading,
.breakpoint-tablet .large-heading {
  font-size: 1.8rem;
}

.breakpoint-phone .large-heading,
.breakpoint-phone-small .large-heading {
  font-size: 1.5rem;
}

.medium-copy {
  font-size: 2.2rem;
}

/*
 * Alignment
 */

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

.t-center,
.breakpoint-tablet-wide .tb-t-center,
.breakpoint-tablet .tb-t-center,
.breakpoint-phone .ph-t-center,
.breakpoint-phone-small .ph-t-center {
  text-align: center;
}

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

/*
 * Style
 */

.t-bold {
  font-weight: bold;
}

.t-italic {
  font-style: italic;
}

.t-caps {
  text-transform: uppercase;
}

.t-capitalize {
  text-transform: capitalize;
}

.t-tracked-out {
  letter-spacing: 0.05em;
}

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

.t-no-underline {
  text-decoration: none;
}

/*
 * Family
 */

.t-alternate {
  font-family: var(--font-alternate-fallback);
}

.fonts-loaded .t-alternate {
  font-family: var(--font-alternate);
}

/*
 * Size
 */

.t-xxsmall {
  font-size: 1.1rem;
}

.t-xsmall {
  font-size: 1.3rem;
}

.t-small {
  font-size: 1.5rem;
}

.t-medium {
  font-size: 1.8rem;
}

.breakpoint-tablet-wide .t-medium,
.breakpoint-tablet .t-medium,
.breakpoint-phone .t-medium,
.breakpoint-phone-small .t-medium {
  font-size: 1.6rem;
}

.t-large {
  font-size: 2.2rem;
}

.t-xlarge {
  font-size: 5.4rem;
}

.breakpoint-tablet-wide .t-xlarge,
.breakpoint-tablet .t-xlarge {
  font-size: 3.6rem;
}

.breakpoint-phone .t-xlarge,
.breakpoint-phone-small .t-xlarge {
  font-size: 2.8rem;
}

/*
 * Shadow
 */

.t-shadow-dark {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
}

.t-shadow-darker {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.t-shadow-light {
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.3);
}

.f-system {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

/**
 * Base
 */

/**
 * Variables
 */

:root {
  --color-white: #fff;
  --color-grey-lightest: #d4d4d4;
  --color-grey-light: #ccc;
  --color-grey-mid: #999;
  --color-grey: #666;
  --color-grey-dark: #4a4a4a;
  --color-grey-darker: #333;
  --color-grey-darkest: #222;
  --color-red: #ed1c24;
  --color-red-dark: #990505;
  --color-orange: #a85431;
  --color-light-orange: #ffdbcc;
  --font-main: "Averta", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --font-main-fallback: "Trebuchet MS", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --font-alternate: "Chivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-alternate-fallback: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --masthead-player-phone-height: 5.6rem;
}

/**
 * Base
 */

html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}

body {
  background-color: var(--color-white);
  color: var(--color-grey-dark);
  font-family: var(--font-main-fallback);
  font-size: 1.6rem;
  line-height: 1.4;
}

.staging-env body {
  background-image: linear-gradient(rgba(100%,0%,50%,0.25), transparent 120px);
  background-attachment: fixed;
}

.fonts-loaded body {
  font-family: var(--font-main);
}

.breakpoint-widescreen body,
.breakpoint-desktop body,
.with-player body {
  overflow: hidden;
}

a {
  color: var(--color-red);
  text-decoration: underline;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}

a:hover,
a:focus {
  text-decoration: none;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

button:focus,
a:focus {
  outline: 1px currentColor dotted;
}

button:hover,
a:hover,
button:active,
a:active {
  outline: none;
}

.link-with-arrow {
  position: relative;
  padding-right: 1.2rem;
}

.link-with-arrow:after {
  color: var(--color-red);
  content: "\203A";
  font-size: 2.4rem;
  position: absolute;
  top: -8px;
  right: 0;
}

.layout {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.breakpoint-widescreen .layout,
.breakpoint-desktop .layout {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.layout__content {
  padding-top: var(--masthead-player-phone-height);
}

.breakpoint-widescreen .layout__content,
.breakpoint-desktop .layout__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.breakpoint-widescreen .layout__content.overflow-scrollable,
.breakpoint-desktop .layout__content.overflow-scrollable {
  overflow-x: hidden;
  overflow-y: scroll;
}

.breakpoint-widescreen .layout__content,
.breakpoint-desktop .layout__content,
.breakpoint-tablet-wide .layout__content,
.breakpoint-tablet .layout__content {
  padding-top: 0;
}

.breakpoint-widescreen .content,
.breakpoint-desktop .content {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  width: 100%;
}

/* Lazy loading images */

img[data-lazy] {
  opacity: 0;
}

img[data-lazy]:not(.initial) {
  -webkit-transition: opacity 250ms;
  transition: opacity 250ms;
}

img[data-lazy].initial,
img[data-lazy].loaded,
img[data-lazy].error {
  opacity: 1;
}

img[data-lazy]:not([src]) {
  visibility: hidden;
}

/**
 * Components
 */

/**
 * 15 column grid
 *
 * <div class="grid-wrapper clearfix">
 *   <div class="grid-row">
 *     <div class="grid-col grid-col--10">10 columns</div>
 *     <div class="grid-col grid-col--4 grid-col--push-1">4 columns, pushed 1</div>
 *   </div>
 * </div>
 */

:root {
  --container-width: 160rem;
  --gutter-width: 3rem;
}

.grid-wrapper {
  padding-left: var(--gutter-width);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-width);
  width: 100%;
}

/* Flexbox variant for sets of tiles */

.grid-wrapper--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* Nested grid */

.grid-wrapper .grid-wrapper {
  margin-left: calc(var(--gutter-width) * -1);
  max-width: calc(100% + 6rem);
  width: calc(100% + 6rem);
}

.grid-row {
  width: 100%;
}

.grid-wrapper--flex .grid-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.grid-col {
  float: left;
  padding-right: var(--gutter-width);
  margin-bottom: var(--gutter-width);
  width: calc(100% / 12);
}

.grid-wrapper--flex .grid-col {
  float: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.grid-col--bottom-flush,
.breakpoint-tablet-wide .grid-col--bottom-flush,
.breakpoint-tablet .grid-col--bottom-flush,
.breakpoint-phone .grid-col--bottom-flush,
.breakpoint-phone-small .grid-col--bottom-flush {
  margin-bottom: 0;
}

/* Column variations */

.grid-col--1 {
  width: calc(100% / 15);
}

.grid-col--2 {
  width: calc((100% / 15) * 2);
}

.grid-col--3 {
  width: calc((100% / 15) * 3);
}

.grid-col--4 {
  width: calc((100% / 15) * 4);
}

.grid-col--5 {
  width: calc((100% / 15) * 5);
}

.grid-col--6 {
  width: calc((100% / 15) * 6);
}

.grid-col--7 {
  width: calc((100% / 15) * 7);
}

.grid-col--8 {
  width: calc((100% / 15) * 8);
}

.grid-col--9 {
  width: calc((100% / 15) * 9);
}

.grid-col--10 {
  width: calc((100% / 15) * 10);
}

.grid-col--11 {
  width: calc((100% / 15) * 11);
}

.grid-col--12 {
  width: calc((100% / 15) * 12);
}

.grid-col--13 {
  width: calc((100% / 15) * 13);
}

.grid-col--14 {
  width: calc((100% / 15) * 14);
}

.grid-col--15 {
  float: none;
  width: 100%;
}

.grid-col--1-of-2 {
  width: 50%;
}

.grid-col--1-of-3 {
  width: 33.333333%;
}

/* Push columns */

.grid-col--push-1 {
  margin-left: calc(100% / 15);
}

.grid-col--push-2 {
  margin-left: calc((100% / 15) * 2);
}

.grid-col--push-3 {
  margin-left: calc((100% / 15) * 3);
}

.grid-col--push-4 {
  margin-left: calc((100% / 15) * 4);
}

.grid-col--push-5 {
  margin-left: calc((100% / 15) * 5);
}

.grid-col--push-6 {
  margin-left: calc((100% / 15) * 6);
}

.grid-col--push-7 {
  margin-left: calc((100% / 15) * 7);
}

.grid-col--push-8 {
  margin-left: calc((100% / 15) * 8);
}

.grid-col--push-9 {
  margin-left: calc((100% / 15) * 9);
}

.grid-col--push-10 {
  margin-left: calc((100% / 15) * 10);
}

.grid-col--push-11 {
  margin-left: calc((100% / 15) * 11);
}

.grid-col--push-12 {
  margin-left: calc((100% / 15) * 12);
}

.grid-col--push-13 {
  margin-left: calc((100% / 15) * 13);
}

.grid-col--push-14 {
  margin-left: calc((100% / 15) * 14);
}

/* Tablet columns + push */

.breakpoint-desktop.with-player .tb-grid-col--push-0,
.breakpoint-tablet-wide .tb-grid-col--push-0,
.breakpoint-tablet .tb-grid-col--push-0 {
  margin-left: 0;
}

.breakpoint-desktop.with-player .tb-grid-col--1,
.breakpoint-tablet-wide .tb-grid-col--1,
.breakpoint-tablet .tb-grid-col--1 {
  width: calc(100% / 15);
}

.breakpoint-desktop.with-player .tb-grid-col--push-1,
.breakpoint-tablet-wide .tb-grid-col--push-1,
.breakpoint-tablet .tb-grid-col--push-1 {
  margin-left: calc(100% / 15);
}

.breakpoint-desktop.with-player .tb-grid-col--2,
.breakpoint-tablet-wide .tb-grid-col--2,
.breakpoint-tablet .tb-grid-col--2 {
  width: calc((100% / 15) * 2);
}

.breakpoint-desktop.with-player .tb-grid-col--push-2,
.breakpoint-tablet-wide .tb-grid-col--push-2,
.breakpoint-tablet .tb-grid-col--push-2 {
  margin-left: calc((100% / 15) * 2);
}

.breakpoint-desktop.with-player .tb-grid-col--3,
.breakpoint-tablet-wide .tb-grid-col--3,
.breakpoint-tablet .tb-grid-col--3 {
  width: calc((100% / 15) * 3);
}

.breakpoint-desktop.with-player .tb-grid-col--push-3,
.breakpoint-tablet-wide .tb-grid-col--push-3,
.breakpoint-tablet .tb-grid-col--push-3 {
  margin-left: calc((100% / 15) * 3);
}

.breakpoint-desktop.with-player .tb-grid-col--4,
.breakpoint-tablet-wide .tb-grid-col--4,
.breakpoint-tablet .tb-grid-col--4 {
  width: calc((100% / 15) * 4);
}

.breakpoint-desktop.with-player .tb-grid-col--push-4,
.breakpoint-tablet-wide .tb-grid-col--push-4,
.breakpoint-tablet .tb-grid-col--push-4 {
  margin-left: calc((100% / 15) * 4);
}

.breakpoint-desktop.with-player .tb-grid-col--5,
.breakpoint-tablet-wide .tb-grid-col--5,
.breakpoint-tablet .tb-grid-col--5 {
  width: calc((100% / 15) * 5);
}

.breakpoint-desktop.with-player .tb-grid-col--push-5,
.breakpoint-tablet-wide .tb-grid-col--push-5,
.breakpoint-tablet .tb-grid-col--push-5 {
  margin-left: calc((100% / 15) * 5);
}

.breakpoint-desktop.with-player .tb-grid-col--6,
.breakpoint-tablet-wide .tb-grid-col--6,
.breakpoint-tablet .tb-grid-col--6 {
  width: calc((100% / 15) * 6);
}

.breakpoint-desktop.with-player .tb-grid-col--push-6,
.breakpoint-tablet-wide .tb-grid-col--push-6,
.breakpoint-tablet .tb-grid-col--push-6 {
  margin-left: calc((100% / 15) * 6);
}

.breakpoint-desktop.with-player .tb-grid-col--7,
.breakpoint-tablet-wide .tb-grid-col--7,
.breakpoint-tablet .tb-grid-col--7 {
  width: calc((100% / 15) * 7);
}

.breakpoint-desktop.with-player .tb-grid-col--push-7,
.breakpoint-tablet-wide .tb-grid-col--push-7,
.breakpoint-tablet .tb-grid-col--push-7 {
  margin-left: calc((100% / 15) * 7);
}

.breakpoint-desktop.with-player .tb-grid-col--8,
.breakpoint-tablet-wide .tb-grid-col--8,
.breakpoint-tablet .tb-grid-col--8 {
  width: calc((100% / 15) * 8);
}

.breakpoint-desktop.with-player .tb-grid-col--push-8,
.breakpoint-tablet-wide .tb-grid-col--push-8,
.breakpoint-tablet .tb-grid-col--push-8 {
  margin-left: calc((100% / 15) * 8);
}

.breakpoint-desktop.with-player .tb-grid-col--9,
.breakpoint-tablet-wide .tb-grid-col--9,
.breakpoint-tablet .tb-grid-col--9 {
  width: calc((100% / 15) * 9);
}

.breakpoint-desktop.with-player .tb-grid-col--push-9,
.breakpoint-tablet-wide .tb-grid-col--push-9,
.breakpoint-tablet .tb-grid-col--push-9 {
  margin-left: calc((100% / 15) * 9);
}

.breakpoint-desktop.with-player .tb-grid-col--10,
.breakpoint-tablet-wide .tb-grid-col--10,
.breakpoint-tablet .tb-grid-col--10 {
  width: calc((100% / 15) * 10);
}

.breakpoint-desktop.with-player .tb-grid-col--push-10,
.breakpoint-tablet-wide .tb-grid-col--push-10,
.breakpoint-tablet .tb-grid-col--push-10 {
  margin-left: calc((100% / 15) * 10);
}

.breakpoint-desktop.with-player .tb-grid-col--11,
.breakpoint-tablet-wide .tb-grid-col--11,
.breakpoint-tablet .tb-grid-col--11 {
  width: calc((100% / 15) * 11);
}

.breakpoint-desktop.with-player .tb-grid-col--push-11,
.breakpoint-tablet-wide .tb-grid-col--push-11,
.breakpoint-tablet .tb-grid-col--push-11 {
  margin-left: calc((100% / 15) * 11);
}

.breakpoint-desktop.with-player .tb-grid-col--12,
.breakpoint-tablet-wide .tb-grid-col--12,
.breakpoint-tablet .tb-grid-col--12 {
  width: calc((100% / 15) * 12);
}

.breakpoint-desktop.with-player .tb-grid-col--push-12,
.breakpoint-tablet-wide .tb-grid-col--push-12,
.breakpoint-tablet .tb-grid-col--push-12 {
  margin-left: calc((100% / 15) * 12);
}

.breakpoint-desktop.with-player .tb-grid-col--13,
.breakpoint-tablet-wide .tb-grid-col--13,
.breakpoint-tablet .tb-grid-col--13 {
  width: calc((100% / 15) * 13);
}

.breakpoint-desktop.with-player .tb-grid-col--push-13,
.breakpoint-tablet-wide .tb-grid-col--push-13,
.breakpoint-tablet .tb-grid-col--push-13 {
  margin-left: calc((100% / 15) * 13);
}

.breakpoint-desktop.with-player .tb-grid-col--14,
.breakpoint-tablet-wide .tb-grid-col--14,
.breakpoint-tablet .tb-grid-col--14 {
  width: calc((100% / 15) * 14);
}

.breakpoint-desktop.with-player .tb-grid-col--push-14,
.breakpoint-tablet-wide .tb-grid-col--push-14,
.breakpoint-tablet .tb-grid-col--push-14 {
  margin-left: calc((100% / 15) * 14);
}

.breakpoint-desktop.with-player .tb-grid-col--15,
.breakpoint-tablet-wide .tb-grid-col--15,
.breakpoint-tablet .tb-grid-col--15 {
  width: 100%;
}

.breakpoint-desktop.with-player .tb-grid-col--1-of-2,
.breakpoint-tablet-wide .tb-grid-col--1-of-2,
.breakpoint-tablet .tb-grid-col--1-of-2 {
  width: 50%;
}

.breakpoint-desktop.with-player .tb-grid-col--1-of-3,
.breakpoint-tablet-wide .tb-grid-col--1-of-3,
.breakpoint-table .tb-grid-col--1-of-3 {
  width: 33.333333%;
}

/* Mobile columns + push */

.breakpoint-phone .ph-grid-col--push-0,
.breakpoint-phone-small .ph-grid-col--push-0 {
  margin-left: 0;
}

.breakpoint-phone .ph-grid-col--1,
.breakpoint-phone-small .ph-grid-col--1 {
  width: calc(100% / 15);
}

.breakpoint-phone .ph-grid-col--push-1,
.breakpoint-phone-small .ph-grid-col--push-1 {
  margin-left: calc(100% / 15);
}

.breakpoint-phone .ph-grid-col--2,
.breakpoint-phone-small .ph-grid-col--2 {
  width: calc((100% / 15) * 2);
}

.breakpoint-phone .ph-grid-col--push-2,
.breakpoint-phone-small .ph-grid-col--push-2 {
  margin-left: calc((100% / 15) * 2);
}

.breakpoint-phone .ph-grid-col--3,
.breakpoint-phone-small .ph-grid-col--3 {
  width: calc((100% / 15) * 3);
}

.breakpoint-phone .ph-grid-col--push-3,
.breakpoint-phone-small .ph-grid-col--push-3 {
  margin-left: calc((100% / 15) * 3);
}

.breakpoint-phone .ph-grid-col--4,
.breakpoint-phone-small .ph-grid-col--4 {
  width: calc((100% / 15) * 4);
}

.breakpoint-phone .ph-grid-col--push-4,
.breakpoint-phone-small .ph-grid-col--push-4 {
  margin-left: calc((100% / 15) * 4);
}

.breakpoint-phone .ph-grid-col--5,
.breakpoint-phone-small .ph-grid-col--5 {
  width: calc((100% / 15) * 5);
}

.breakpoint-phone .ph-grid-col--push-5,
.breakpoint-phone-small .ph-grid-col--push-5 {
  margin-left: calc((100% / 15) * 5);
}

.breakpoint-phone .ph-grid-col--6,
.breakpoint-phone-small .ph-grid-col--6 {
  width: calc((100% / 15) * 6);
}

.breakpoint-phone .ph-grid-col--push-6,
.breakpoint-phone-small .ph-grid-col--push-6 {
  margin-left: calc((100% / 15) * 6);
}

.breakpoint-phone .ph-grid-col--7,
.breakpoint-phone-small .ph-grid-col--7 {
  width: calc((100% / 15) * 7);
}

.breakpoint-phone .ph-grid-col--push-7,
.breakpoint-phone-small .ph-grid-col--push-7 {
  margin-left: calc((100% / 15) * 7);
}

.breakpoint-phone .ph-grid-col--8,
.breakpoint-tablet .ph-grid-col--8 {
  width: calc((100% / 15) * 8);
}

.breakpoint-phone .ph-grid-col--push-8,
.breakpoint-phone-small .ph-grid-col--push-8 {
  margin-left: calc((100% / 15) * 8);
}

.breakpoint-phone .ph-grid-col--9,
.breakpoint-phone-small .ph-grid-col--9 {
  width: calc((100% / 15) * 9);
}

.breakpoint-phone .ph-grid-col--push-9,
.breakpoint-phone-small .ph-grid-col--push-9 {
  margin-left: calc((100% / 15) * 9);
}

.breakpoint-phone .ph-grid-col--10,
.breakpoint-phone-small .ph-grid-col--10 {
  width: calc((100% / 15) * 10);
}

.breakpoint-phone .ph-grid-col--push-10,
.breakpoint-phone-small .ph-grid-col--push-10 {
  margin-left: calc((100% / 15) * 10);
}

.breakpoint-phone .ph-grid-col--11,
.breakpoint-phone-small .ph-grid-col--11 {
  width: calc((100% / 15) * 11);
}

.breakpoint-phone .ph-grid-col--push-11,
.breakpoint-phone-small .ph-grid-col--push-11 {
  margin-left: calc((100% / 15) * 11);
}

.breakpoint-phone .ph-grid-col--12,
.breakpoint-phone-small .ph-grid-col--12 {
  width: calc((100% / 15) * 12);
}

.breakpoint-phone .ph-grid-col--push-12,
.breakpoint-phone-small .ph-grid-col--push-12 {
  margin-left: calc((100% / 15) * 12);
}

.breakpoint-phone .ph-grid-col--13,
.breakpoint-phone-small .ph-grid-col--13 {
  width: calc((100% / 15) * 13);
}

.breakpoint-phone .ph-grid-col--push-13,
.breakpoint-phone-small .ph-grid-col--push-13 {
  margin-left: calc((100% / 15) * 13);
}

.breakpoint-phone .ph-grid-col--14,
.breakpoint-phone-small .ph-grid-col--14 {
  width: calc((100% / 15) * 14);
}

.breakpoint-phone .ph-grid-col--push-14,
.breakpoint-phone-small .ph-grid-col--push-14 {
  margin-left: calc((100% / 15) * 14);
}

.breakpoint-phone .ph-grid-col--15,
.breakpoint-phone-small .ph-grid-col--15 {
  width: 100%;
}

.breakpoint-phone .ph-grid-col--1-of-2,
.breakpoint-phone-small .ph-grid-col--1-of-2 {
  width: 50%;
}

.breakpoint-phone .ph-grid-col--1-of-3,
.breakpoint-phone-small .ph-grid-col--1-of-3 {
  width: 33.333333%;
}

/**
 * Masthead
 */

.masthead {
}

.breakpoint-phone .masthead {
  overflow: hidden;
}

/* This is the selector combination for handling the awkward player-open sizes */

/* .breakpoint-desktop.breakpoint-w-1440.with-player .masthead {
  outline: 10px #f09 solid;
} */

.breakpoint-widescreen .masthead,
.breakpoint-desktop .masthead,
.breakpoint-tablet-wide .masthead,
.breakpoint-tablet .masthead {
  /* Override inline style */
  padding-top: 0 !important;
}

.breakpoint-tablet-wide .masthead,
.breakpoint-tablet .masthead {
  border-bottom: 1px solid var(--color-grey-lightest);
}

.breakpoint-phone .masthead,
.breakpoint-phone-small .masthead {
  will-change: padding-top;
  padding-bottom: 3rem;
}

.breakpoint-phone .masthead--transition,
.breakpoint-phone-small .masthead--transition {
  -webkit-transition: padding-top 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: padding-top 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
}

.masthead__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-top: 3rem;
  position: relative;
}

.breakpoint-tablet-wide .masthead__inner,
.breakpoint-tablet .masthead__inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.masthead__search {
  margin-right: auto;
  position: relative;
  z-index: 5;
}

.breakpoint-w-1400 .masthead__search {
  width: 22rem;
}

.breakpoint-desktop.breakpoint-w-1440.with-player .masthead__search {
  width: auto;
}

.breakpoint-tablet-wide .masthead__search,
.breakpoint-tablet .masthead__search,
.breakpoint-phone .masthead__search,
.breakpoint-phone-small .masthead__search {
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: 0;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  width: auto;
}

.breakpoint-phone .masthead__search,
.breakpoint-phone-small .masthead__search {
  background-color: var(--color-grey-darker);
  margin-left: 0;
  padding: 3rem 3rem 1rem;
  height: 8.8rem;
}

.masthead__blurb {
  color: var(--color-grey-darker);
}

.breakpoint-w-1400 .masthead__blurb {
  margin-right: -14rem;
}

.breakpoint-desktop.breakpoint-w-1440.with-player .masthead__blurb {
  visibility: hidden;
}

.breakpoint-tablet-wide .masthead__blurb,
.breakpoint-tablet .masthead__blurb,
.breakpoint-phone .masthead__blurb,
.breakpoint-phone-small .masthead__blurb {
  display: none;
}

.masthead__blurb span {
  color: var(--color-red);
}

.masthead__logo {
  position: absolute;
  left: 50%;
  top: 3rem;
  bottom: 0;
  margin-left: -60px;
  width: 121px;
}

.breakpoint-tablet-wide .masthead__logo,
.breakpoint-tablet .masthead__logo,
.breakpoint-phone .masthead__logo,
.breakpoint-phone-small .masthead__logo {
  position: static;
  margin-left: 0;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  width: 110px;
}

.breakpoint-phone .masthead__logo,
.breakpoint-phone-small .masthead__logo {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.masthead__logo-anchor {
  display: block;
  width: 100%;
  height: 45px;
  --rrr-50-scale: 2.3;
  --rrr-50-translate-x: 0;
}

.breakpoint-phone .masthead__logo-anchor,
.breakpoint-phone-small .masthead__logo-anchor {
  -rrr-50-scale: 1.5;
  --rrr-50-translate-x: 1.25rem;
}

.breakpoint-tablet-wide .masthead__logo-anchor,
.breakpoint-tablet .masthead__logo-anchor {
  --rrr-50-translate-x: 2rem;
}

.breakpoint-tablet-wide .masthead__logo-anchor,
.breakpoint-tablet .masthead__logo-anchor,
.breakpoint-phone .masthead__logo-anchor,
.breakpoint-phone-small .masthead__logo-anchor {
  height: 41px;
}

.masthead__logo-anchor svg,
.masthead__logo-anchor img {
  width: 100%;
  height: 100%;
  -webkit-transform: scale(var(--rrr-50-scale)) translateX(var(--rrr-50-translate-x));
      -ms-transform: scale(var(--rrr-50-scale)) translateX(var(--rrr-50-translate-x));
          transform: scale(var(--rrr-50-scale)) translateX(var(--rrr-50-translate-x));
}

.masthead__logo-anchor svg .st0 {
  fill: #231f20;
}

.masthead__logo-anchor svg .st1 {
  fill: #ed1c24;
}

.masthead__logo-anchor svg .st2 {
  fill: #fff;
}

.masthead__player {
  margin-left: auto;
  text-align: right;
  z-index: 7;
}

.breakpoint-tablet-wide .masthead__player,
.breakpoint-tablet .masthead__player {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: right;
}

.breakpoint-phone .masthead__player,
.breakpoint-phone-small .masthead__player {
  height: var(--masthead-player-phone-height);
  background-color: var(--color-grey-darker);
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.breakpoint-tablet-wide .masthead__player-inner,
.breakpoint-tablet .masthead__player-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-right: 26.5rem;
}

.breakpoint-phone .masthead__player-inner,
.breakpoint-phone-small .masthead__player-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.masthead__player-toggle,
.masthead__sign-in-link {
  color: var(--color-grey);
  text-decoration: none;
}

.masthead__player-toggle:hover,
.masthead__player-toggle:focus,
.masthead__sign-in-link:hover,
.masthead__sign-in-link:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.breakpoint-phone .masthead__sign-in-link,
.breakpoint-phone-small .masthead__sign-in-link {
  display: none;
}

.breakpoint-phone .masthead__player-toggle,
.breakpoint-phone-small .masthead__player-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  z-index: 6;
}

.masthead__player-toggle svg {
  display: none;
}

.breakpoint-phone .masthead__player-toggle svg,
.breakpoint-phone-small .masthead__player-toggle svg {
  display: block;
}

.breakpoint-phone .masthead__player-toggle path,
.breakpoint-phone-small .masthead__player-toggle path {
  fill: var(--color-white);
}

.masthead__player-wrapper {
  padding-top: 2rem;
  position: absolute;
  top: 5rem;
  right: 0;
  width: 23.5rem;
  z-index: 5;
}

.breakpoint-desktop.breakpoint-w-1440.with-player .masthead__player-wrapper {
  display: none;
}

.breakpoint-not-phone .masthead__player-wrapper--sticky {
  position: fixed !important;
  top: 5rem;
  right: 3rem;
}

.breakpoint-not-phone .masthead__player-wrapper--sticky .player {
  -webkit-box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.1);
}

.breakpoint-widescreen .masthead__player-wrapper--sticky .player,
.breakpoint-desktop .masthead__player-wrapper--sticky .player {
  margin-top: -5rem;
}

.breakpoint-tablet-wide .masthead__player-wrapper,
.breakpoint-tablet .masthead__player-wrapper {
  padding-top: 3rem;
  margin-left: 3rem;
  right: 4rem;
  top: 0;
}

.breakpoint-phone .masthead__player-wrapper,
.breakpoint-phone-small .masthead__player-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 0;
  position: relative;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  top: 0;
}

.masthead__menu-toggle {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: 2px;
  font-size: 1.6rem;
  position: absolute;
  /*top: 0;*/
  right: 0;
  padding: 0.9rem 1.5rem 0.7rem;
  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1), -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
}

.masthead__menu-toggle:hover,
.masthead__menu-toggle:focus,
.masthead__menu-toggle--active {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.masthead__menu-toggle .menu-icon,
.masthead__menu-toggle .close-icon {
  position: absolute;
  top: 50%;
  margin-top: -10px;
}

.masthead__menu-toggle .close-icon {
  margin-top: -6px;
}

.masthead__menu-toggle .close-icon {
  display: none;
}

.masthead__menu-toggle--active .close-icon {
  display: inline-block;
}

.masthead__menu-toggle--active .menu-icon {
  display: none;
}

.masthead__menu-toggle:hover .menu-icon svg path,
.masthead__menu-toggle:focus .menu-icon svg path {
  fill: var(--color-white);
}

.masthead__menu-toggle em {
  display: inline-block;
  padding-left: 2.2rem;
}

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

/**
 * Search box
 */

.search-box {
  padding-top: 2.6rem;
  margin-left: -1.5rem;
}

.breakpoint-tablet-wide .search-box,
.breakpoint-tablet .search-box,
.breakpoint-phone .search-box,
.breakpoint-phone-small .search-box {
  margin-left: 0;
  padding-top: 0;
}

.search-box__form {
  border: 1px solid var(--color-white);
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 4.8rem;
  overflow: hidden;
  -webkit-transition: border-color 150ms ease, width 150ms ease;
  transition: border-color 150ms ease, width 150ms ease;
  width: 14rem;
}

.breakpoint-w-1400 .search-box__form {
  width: 22rem;
}

.breakpoint-tablet-wide .search-box__form,
.breakpoint-tablet .search-box__form,
.breakpoint-desktop.breakpoint-w-1440.with-player .search-box__form {
  width: 4.8rem;
}

.breakpoint-tablet-wide .search-box__form,
.breakpoint-tablet .search-box__form {
  margin-right: -1.4rem;
}

.breakpoint-tablet-wide .search-box__input,
.breakpoint-tablet .search-box__input,
.breakpoint-desktop.breakpoint-w-1440.with-player .search-box__input {
  display: none;
}

/* On Tablets the search button links to a search page,
   the masthead search form doesn't then need to expand
*/

.breakpoint-tablet-wide .masthead__search .search-box--active form,
.breakpoint-tablet .masthead__search .search-box--active form {
  width: auto;
  border: none;
}

.breakpoint-phone .search-box__form,
.breakpoint-phone .search-box--active .search-box__form,
.breakpoint-phone-small .search-box__form,
.breakpoint-phone-small .search-box--active .search-box__form {
  width: 100%;
}

.search-box--active .search-box__form {
  width: 28rem;
}

.breakpoint-w-1400 .search-box--active .search-box__form {
  width: 22rem;
}

.breakpoint-phone .search-box--active .search-box__form,
.breakpoint-phone-small .search-box--active .search-box__form {
  width: 100%;
}

.search-box--active .search-box__form {
  border-color: var(--color-grey-light);
}

.breakpoint-phone .search-box__form,
.breakpoint-phone-small .search-box__form {
  border: none;
}

.search-box__button {
  height: 100%;
  width: 4.8rem;
  -webkit-transition: background-color 150ms ease;
  transition: background-color 150ms ease;
}

.breakpoint-phone .search-box__button,
.breakpoint-phone-small .search-box__button {
  background-color: var(--color-grey-dark);
}

.breakpoint-phone .search-box--active .search-box__button,
.breakpoint-phone-small .search-box--active .search-box__button {
  background-color: var(--color-white);
}

.search-box__button svg {
  width: 1.8rem;
  height: 1.8rem;
}

.search-box__button svg path {
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.search-box--active .search-box__button svg path,
.search-box__button:hover svg path,
.search-box__button:focus svg path {
  fill: var(--color-red);
}

.breakpoint-phone .search-box__button svg path,
.breakpoint-phone-small .search-box__button svg path {
  fill: var(--color-white);
}

.breakpoint-phone .search-box--active .search-box__button svg path,
.breakpoint-phone-small .search-box--active .search-box__button svg path {
  fill: var(--color-red);
}

.search-box__input {
  background-color: var(--color-white);
  border: none;
  font-family: var(--font-main-fallback);
  font-size: 1.6rem;
  height: 100%;
  padding: 0.6rem;
  outline: none;
  -webkit-transition: background-color 150ms ease, color 150ms ease;
  transition: background-color 150ms ease, color 150ms ease;
  width: calc(100% - 4.8rem);
}

.fonts-loaded .search-box__input {
  font-family: var(--font-main);
}

.breakpoint-phone .search-box__input,
.breakpoint-phone-small .search-box__input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--color-grey-dark);
  color: var(--color-white);
}

.breakpoint-phone .search-box--active .search-box__input,
.breakpoint-phone-small .search-box--active .search-box__input {
  background-color: var(--color-white);
  color: var(--color-grey-darker);
}

.search-box__input::-webkit-input-placeholder {
  color: var(--color-grey-dark);
}

.search-box__input::-moz-placeholder {
  color: var(--color-grey-dark);
}

.search-box__input:-ms-input-placeholder {
  color: var(--color-grey-dark);
}

.search-box__input::-ms-input-placeholder {
  color: var(--color-grey-dark);
}

.search-box__input::placeholder {
  color: var(--color-grey-dark);
}

.breakpoint-phone .search-box__input::-webkit-input-placeholder, .breakpoint-phone-small .search-box__input::-webkit-input-placeholder {
  color: var(--color-white);
}

.breakpoint-phone .search-box__input::-moz-placeholder, .breakpoint-phone-small .search-box__input::-moz-placeholder {
  color: var(--color-white);
}

.breakpoint-phone .search-box__input:-ms-input-placeholder, .breakpoint-phone-small .search-box__input:-ms-input-placeholder {
  color: var(--color-white);
}

.breakpoint-phone .search-box__input::-ms-input-placeholder, .breakpoint-phone-small .search-box__input::-ms-input-placeholder {
  color: var(--color-white);
}

.breakpoint-phone .search-box__input::placeholder,
.breakpoint-phone-small .search-box__input::placeholder {
  color: var(--color-white);
}

.breakpoint-phone .search-box--active .search-box__input::-webkit-input-placeholder, .breakpoint-phone-small .search-box--active .search-box__input::-webkit-input-placeholder {
  color: var(--color-grey-darker);
}

.breakpoint-phone .search-box--active .search-box__input::-moz-placeholder, .breakpoint-phone-small .search-box--active .search-box__input::-moz-placeholder {
  color: var(--color-grey-darker);
}

.breakpoint-phone .search-box--active .search-box__input:-ms-input-placeholder, .breakpoint-phone-small .search-box--active .search-box__input:-ms-input-placeholder {
  color: var(--color-grey-darker);
}

.breakpoint-phone .search-box--active .search-box__input::-ms-input-placeholder, .breakpoint-phone-small .search-box--active .search-box__input::-ms-input-placeholder {
  color: var(--color-grey-darker);
}

.breakpoint-phone .search-box--active .search-box__input::placeholder,
.breakpoint-phone-small .search-box--active .search-box__input::placeholder {
  color: var(--color-grey-darker);
}

/**
 * Navigation
 */

.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -4rem;
  width: 100%;
}

.breakpoint-tablet-wide .nav,
.breakpoint-tablet .nav {
  margin-top: 3rem;
  margin-left: -3rem;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.breakpoint-phone .nav,
.breakpoint-phone-small .nav {
  background-color: var(--color-grey-darker);
  display: block;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: -3rem;
  left: -3rem;
  width: calc(100% + 6rem);
  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1), -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

.nav__items {
}

.nav__item {
  float: left;
  position: relative;
}

.breakpoint-tablet-wide .nav__item {
  padding-left: 0.2rem;
}

.breakpoint-tablet .nav__item {
  padding-left: 1rem;
}

.breakpoint-phone .nav__item,
.breakpoint-phone-small .nav__item {
  float: none;
}

.nav__anchor {
  color: var(--color-grey-darker);
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  padding-left: 3.6rem;
  padding-right: 3.6rem;
  position: relative;
  text-decoration: none;
  text-align: left;
  width: 100%;
}

.breakpoint-w-1300 .nav__anchor {
  padding-left: 3rem;
  padding-right: 3rem;
}

.breakpoint-w-1200 .nav__anchor,
.breakpoint-w-1050 .nav__anchor {
  font-size: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.breakpoint-tablet-wide .nav__anchor {
  font-size: 1.8rem;
  padding-left: 2.6rem;
  padding-right: 2.6rem;
}

.breakpoint-tablet .nav__anchor {
  font-size: 1.6rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.breakpoint-phone .nav__anchor,
.breakpoint-phone-small .nav__anchor {
  border-top: 1px solid var(--color-grey);
  color: var(--color-white);
  font-size: 1.8rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  padding-left: 3rem;
  padding-right: 3rem;
}

.breakpoint-phone .nav__item:first-of-type .nav__anchor,
.breakpoint-phone-small .nav__item:first-of-type .nav__anchor {
  border-top: none;
}

.nav__anchor--toggle,
.breakpoint-phone .nav__anchor,
.breakpoint-phone-small .nav__anchor {
  display: none;
}

.breakpoint-phone .nav__anchor--toggle,
.breakpoint-phone .nav__anchor:only-child,
.breakpoint-phone-small .nav__anchor--toggle,
.breakpoint-phone-small .nav__anchor:only-child {
  display: block;
}

.breakpoint-phone .nav__anchor--toggle:after,
.breakpoint-phone-small .nav__anchor--toggle:after {
  content: "\203A";
  color: var(--color-grey);
  display: block;
  font-size: 2rem;
  font-weight: normal;
  position: absolute;
  right: 2.8rem;
  top: 50%;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 0.6;
  text-align: center;
  margin-top: -0.8rem;
}

.breakpoint-phone .nav__anchor--active:after,
.breakpoint-phone-small .nav__anchor--active:after {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.nav__anchor span {
  border-bottom: 3px solid transparent;
  display: inline-block;
  padding-bottom: 2rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}

.nav__anchor:hover span,
.nav__anchor:focus span {
  border-color: var(--color-red);
}

.nav__item--has-dropdown .nav__anchor:hover span,
.nav__item--has-dropdown .nav__anchor:focus span {
  border-color: transparent;
}

.breakpoint-tablet-wide .nav__anchor span,
.breakpoint-tablet .nav__anchor span {
  padding-bottom: 1.6rem;
  -webkit-transform: translateY(1px);
      -ms-transform: translateY(1px);
          transform: translateY(1px);
}

.breakpoint-phone .nav__anchor span,
.breakpoint-phone-small .nav__anchor span {
  border: none;
  display: block;
  padding: 0;
}

.nav__dropdown {
  background-color: var(--color-white);
  border-left: 1px solid var(--color-grey-lightest);
  border-right: 1px solid var(--color-grey-lightest);
  border-bottom: 1px solid var(--color-grey-lightest);
  border-top: 3px solid var(--color-red);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8rem;
  width: 16rem;
  margin-top: -3px;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  -webkit-transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear 100ms,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear 100ms,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear 100ms;
  transition: transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear 100ms,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  -webkit-transform: translateY(0.6rem);
      -ms-transform: translateY(0.6rem);
          transform: translateY(0.6rem);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.nav__anchor:hover ~ .nav__dropdown,
.nav__anchor:focus ~ .nav__dropdown,
.nav__dropdown:hover,
.nav__dropdown:focus {
  -webkit-transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear;
  transition: transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  -webkit-transform: translateY(0.6rem);
      -ms-transform: translateY(0.6rem);
          transform: translateY(0.6rem);
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  opacity: 1;
  pointer-events: all;
  z-index: 100000;
}

.breakpoint-phone .nav__dropdown,
.breakpoint-phone .nav__anchor:hover + .nav__dropdown,
.breakpoint-phone .nav__anchor:focus + .nav__dropdown,
.breakpoint-phone-small .nav__dropdown,
.breakpoint-phone-small .nav__anchor:hover + .nav__dropdown,
.breakpoint-phone-small .nav__anchor:focus + .nav__dropdown {
  display: none;
}

.breakpoint-phone .nav__anchor--active + .nav__dropdown,
.breakpoint-phone .nav__anchor--active:hover + .nav__dropdown,
.breakpoint-phone .nav__anchor--active:focus + .nav__dropdown,
.breakpoint-phone-small .nav__anchor--active + .nav__dropdown,
.breakpoint-phone-small .nav__anchor--active:hover + .nav__dropdown,
.breakpoint-phone-small .nav__anchor--active:focus + .nav__dropdown {
  display: block;
  position: static;
  background-color: var(--color-grey-darker);
  border: none;
  margin-top: -1.4rem;
  padding-top: 0.6rem;
  padding-bottom: 1rem;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  opacity: 1;
  margin-left: 0;
  width: 100%;
}

.nav__dropdown-item {
}

.nav__dropdown-anchor {
  color: var(--color-grey-darker);
  display: block;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  padding: 1rem 0.6rem;
}

.nav__dropdown-anchor:hover,
.nav__dropdown-anchor:focus {
  color: var(--color-red);
}

.breakpoint-tablet .nav__dropdown-anchor,
.breakpoint-tablet-wide .nav__dropdown-anchor {
  font-size: 1.5rem;
}

.breakpoint-phone .nav__dropdown-anchor,
.breakpoint-phone-small .nav__dropdown-anchor {
  color: var(--color-white);
  font-size: 1.6rem;
  text-align: left;
  padding: 0.6rem 3rem;
}

.breakpoint-phone .nav__dropdown-anchor:hover,
.breakpoint-phone .nav__dropdown-anchor:focus,
.breakpoint-phone-small .nav__dropdown-anchor:hover,
.breakpoint-phone-small .nav__dropdown-anchor:focus {
  color: var(--color-grey-light);
}

/**
 * Footer
 */

.footer {
}

.footer__nav {
  padding-top: 10rem;
  padding-bottom: 3rem;
}

.breakpoint-tablet-wide .footer__nav,
.breakpoint-tablet .footer__nav {
  padding-top: 8rem;
  padding-bottom: 2rem;
}

.breakpoint-phone .footer__nav,
.breakpoint-phone-small .footer__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-top: 5rem;
  padding-bottom: 1rem;
}

.footer__nav-list {
  text-align: center;
  float: left;
  width: 25%;
}

.breakpoint-phone .footer__nav-list,
.breakpoint-phone-small .footer__nav-list {
  text-align: left;
  float: none;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 50%;
}

.breakpoint-phone .footer__nav-list:nth-of-type(1n + 3),
.breakpoint-phone-small .footer__nav-list:nth-of-type(1n + 3) {
  padding-top: 3rem;
}

.footer__nav-item {
  padding-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer__nav-item:first-of-type {
  font-family: var(--font-alternate-fallback);
  padding-bottom: 3rem;
}

.fonts-loaded .footer__nav-item:first-of-type {
  font-family: var(--font-alternate);
}

.footer__nav-item:last-of-type {
  padding-bottom: 0;
}

.breakpoint-tablet-wide .footer__nav-item,
.breakpoint-tablet .footer__nav-item {
  padding-bottom: 1.4rem;
}

.breakpoint-phone .footer__nav-item,
.breakpoint-phone-small .footer__nav-item {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0.6rem;
}

.breakpoint-tablet-wide .footer__nav-item:first-of-type,
.breakpoint-tablet .footer__nav-item:first-of-type {
  padding-bottom: 2.6rem;
}

.breakpoint-phone .footer__nav-item:first-of-type,
.breakpoint-phone-small .footer__nav-item:first-of-type {
  padding-bottom: 1rem;
}

.footer__nav-anchor {
  color: var(--color-grey-darkest);
  font-size: 1.8rem;
  text-decoration: none;
}

.breakpoint-tablet-wide .footer__nav-anchor,
.breakpoint-tablet .footer__nav-anchor,
.breakpoint-phone .footer__nav-anchor,
.breakpoint-phone-small .footer__nav-anchor {
  font-size: 1.5rem;
}

.footer__nav-item:first-of-type .footer__nav-anchor {
  color: var(--color-grey-dark);
  font-size: 1.5rem;
  font-weight: bold;
}

.footer__nav-anchor:hover,
.footer__nav-anchor:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.footer__about {
  background-image: url(/assets/main/assets/public/footer/background-texture.94c4f9cb.gif);
  color: var(--color-white);
  background-color: var(--color-grey-darkest);
  background-repeat: repeat;
  background-size: 10rem;
  padding-top: 6rem;
  padding-bottom: 3rem;
}

.breakpoint-tablet-wide .footer__about,
.breakpoint-tablet .footer__about {
  padding-bottom: 2rem;
}

.breakpoint-phone .footer__about,
.breakpoint-phone-small .footer__about {
  padding-top: 4rem;
  padding-bottom: 1rem;
}

.footer__about-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.footer__section {
  width: 50%;
}

.breakpoint-tablet-wide .footer__section,
.breakpoint-tablet .footer__section,
.breakpoint-phone .footer__section,
.breakpoint-phone-small .footer__section {
  padding: 0;
  text-align: center;
  width: 100%;
}

.footer__section--logo {
  padding-right: 6rem;
  padding-bottom: 6rem;
  position: relative;
}

.footer__logo {
  display: block;
  height: 100px;
  width: 138px;
}

.footer__logo-50years {
  height: unset;
  width: 320px;
}

.breakpoint-w-min-1900 .footer__logo {
  position: absolute;
  top: 0;
  left: calc(-138px - 3rem);
}

.breakpoint-w-min-1900 .footer__logo-50years {
  position: unset;
  top: unset;
  left: unset;
}

.breakpoint-tablet-wide .footer__logo,
.breakpoint-tablet .footer__logo,
.breakpoint-phone .footer__logo,
.breakpoint-phone-small .footer__logo {
  margin-left: auto;
  margin-right: auto;
}

.breakpoint-phone .footer__logo,
.breakpoint-phone-small .footer__logo {
  width: 109px;
  height: 40px;
}

.breakpoint-phone .footer__logo-50years,
.breakpoint-phone-small .footer__logo-50years {
  height: unset;
  width: 75%;
}

.footer__logo-anchor {
  display: block;
}

.footer__logo-anchor svg,
.footer__logo-anchor img {
  width: 100%;
  height: 100%;
}

.footer__logo-anchor svg .st0 {
  fill: #231f20;
}

.footer__logo-anchor svg .st1 {
  fill: #ed1c24;
}

.footer__logo-anchor svg .st2 {
  fill: #fff;
}

.footer__blurb {
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.2;
  padding-top: 3.2rem;
}

.breakpoint-w-min-1900 .footer__blurb {
  padding-top: 0;
}

.breakpoint-tablet-wide .footer__blurb,
.breakpoint-tablet .footer__blurb,
.breakpoint-phone .footer__blurb,
.breakpoint-phone-small .footer__blurb {
  font-size: 2.4rem;
  line-height: 1.3;
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.breakpoint-phone .footer__blurb,
.breakpoint-phone-small .footer__blurb {
  padding-top: 3rem;
}

.footer__blurb span {
  color: var(--color-red);
}

.footer__social-icons {
  padding-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 1;
}

.breakpoint-tablet-wide .footer__social-icons,
.breakpoint-tablet .footer__social-icons,
.breakpoint-phone .footer__social-icons,
.breakpoint-phone-small .footer__social-icons {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 6rem;
}

.breakpoint-phone .footer__social-icons,
.breakpoint-phone-small .footer__social-icons {
  padding-bottom: 5rem;
}

.footer__social-icon {
  padding-right: 5rem;
}

.footer__social-icon:last-of-type {
  padding-right: 0;
}

.footer__social-icon a {
  display: block;
}

.footer__social-icon a svg path {
  -webkit-transition: 150ms fill ease;
  transition: 150ms fill ease;
}

.footer__social-icon a:hover svg path,
.footer__social-icon a:focus svg path {
  fill: var(--color-red);
}

.footer__section--about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 1rem;
  width: 100%;
}

.breakpoint-w-min-1900 .footer__section--about {
  margin-top: -3rem;
  position: relative;
}

.breakpoint-tablet-wide .footer__section--about,
.breakpoint-tablet .footer__section--about {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.breakpoint-phone .footer__section--about,
.breakpoint-phone-small .footer__section--about {
  display: block;
}

.footer__about-links {
  padding-right: 7rem;
}

.footer__about-links:last-of-type {
  padding-right: 0;
}

.breakpoint-tablet-wide .footer__about-links,
.breakpoint-tablet .footer__about-links {
  padding-left: 3rem;
  padding-right: 3rem;
  width: 33.33333%;
}

.breakpoint-phone .footer__about-links,
.breakpoint-phone-small .footer__about-links {
  padding-right: 0;
  padding-bottom: 2.4rem;
  text-align: left;
}

.breakpoint-phone .footer__about-links:last-of-type,
.breakpoint-phone-small .footer__about-links:last-of-type {
  padding-bottom: 0;
}

.footer__about-link {
  padding-bottom: 0.3rem;
}

.breakpoint-tablet-wide .footer__about-link,
.breakpoint-tablet .footer__about-link {
  padding-bottom: 1rem;
}

.breakpoint-phone .footer__about-link,
.breakpoint-phone-small .footer__about-link {
  padding-bottom: 0.8rem;
}

.footer__about-link--heading {
  font-family: var(--font-alternate-fallback);
  padding-bottom: 1.6rem;
}

.fonts-loaded .footer__about-link--heading {
  font-family: var(--font-alternate);
}

.breakpoint-tablet-wide .footer__about-link--heading,
.breakpoint-tablet .footer__about-link--heading {
  padding-bottom: 2rem;
}

.breakpoint-phone .footer__about-link--heading,
.breakpoint-phone-small .footer__about-link--heading {
  padding-bottom: 0.8rem;
}

.footer__about-anchor {
  color: var(--color-white);
  font-size: 1.5rem;
  text-decoration: none;
}

.footer__about-anchor:hover,
.footer__about-anchor:focus {
  color: var(--color-grey-light);
  text-decoration: underline;
}

.footer__about-link--heading .footer__about-anchor {
  font-weight: bold;
}

:root {
  --green-light: #dcf6d7;
  --green: #378129;
  --red-light: #ffdcd9;
  --red: #691d1d;
}

.flash-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1001;
  top: 0;
}

.flash-wrapper .flash-container {
  position: relative;
}

.flash {
  padding-left: 3rem;
  padding-right: 3rem;
  position: relative;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  will-change: transform, opacity;
}

.flash--hidden {
  overflow: hidden;
  -webkit-transform: translate3d(0, -80px, 0);
          transform: translate3d(0, -80px, 0);
  pointer-events: none;
  opacity: 0;
  position: absolute;
  right: 0;
  left: 0;
}

.flash--system,
.flash--alert {
  background-color: var(--red-light);
  color: var(--red);
}

.flash--notice {
  background-color: var(--green-light);
  color: var(--green);
}

.flash p {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.flash__dismiss {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.flash__x {
  padding-left: 0.3rem;
}

/* Fetcher */

[data-fetch-proxy] {
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
  opacity: 0;
}

.fetcher--is-fetching [data-fetch-proxy] {
  -webkit-animation: gradientAnimation 1600ms ease infinite;
          animation: gradientAnimation 1600ms ease infinite;
  background-image: linear-gradient(
    269deg,
    color(var(--color-grey-lightest) tint(85%)),
    color(var(--color-grey-lightest) tint(40%))
  );
  background-size: 400% 400%;
  border-radius: 2px;
  display: inline-block;
  height: 0.4em;
  position: relative;
  opacity: 1;
  width: 100%;
}

@-webkit-keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/**
 * Copy
 */

.copy:after,
.copy-shallow:after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

/**
 * Headings
 */

.copy h1,
.copy-shallow > h1 {
  color: var(--color-grey-darkest);
  font-size: 3rem;
  font-weight: bold;
  padding-bottom: 2rem;
}

.breakpoint-tablet-wide .copy h1,
.breakpoint-tablet-wide .copy-shallow > h1,
.breakpoint-tablet .copy h1,
.breakpoint-tablet .copy-shallow > h1 {
  font-size: 2.6rem;
}

.breakpoint-phone .copy h1,
.breakpoint-phone .copy-shallow > h1,
.breakpoint-phone-small .copy h1,
.breakpoint-phone-small .copy-shallow > h1 {
  font-size: 2rem;
  padding-bottom: 1.6rem;
}

.copy h2,
.copy-shallow > h2 {
  color: var(--color-grey-darkest);
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: 2rem;
}

.breakpoint-tablet-wide .copy h2,
.breakpoint-tablet-wide .copy-shallow > h2,
.breakpoint-tablet .copy h2,
.breakpoint-tablet .copy-shallow > h2 {
  font-size: 2rem;
}

.breakpoint-phone .copy h2,
.breakpoint-phone .copy-shallow > h2,
.breakpoint-phone-small .copy h2,
.breakpoint-phone-small .copy-shallow > h2 {
  font-size: 1.8rem;
  padding-bottom: 1.6rem;
}

.copy p + h1,
.copy p + h2,
.copy p + blockquote,
.copy-shallow > p + h1,
.copy-shallow > p + h2,
.copy-shallow > p + blockquote {
  padding-top: 3rem;
}

.breakpoint-phone .copy p + h1,
.breakpoint-phone .copy p + h2,
.breakpoint-phone .copy p + blockquote,
.breakpoint-phone .copy-shallow > p + h1,
.breakpoint-phone .copy-shallow > p + h2,
.breakpoint-phone .copy-shallow > p + blockquote,
.breakpoint-phone-small .copy p + h1,
.breakpoint-phone-small .copy p + h2,
.breakpoint-phone-small .copy p + blockquote,
.breakpoint-phone-small .copy-shallow > p + h1,
.breakpoint-phone-small .copy-shallow > p + h2,
.breakpoint-phone-small .copy-shallow > p + blockquote {
  padding-top: 2rem;
}

/**
 * Paragraph
 */

.copy p,
.copy-shallow > p {
  color: var(--color-grey-darkest);
  font-size: 2rem;
  padding-bottom: 2.3rem;
  line-height: 1.6;
}

.breakpoint-tablet-wide .copy p,
.breakpoint-tablet .copy p,
.breakpoint-tablet-wide .copy-shallow p,
.breakpoint-tablet .copy-shallow p {
  font-size: 1.8rem;
}

.breakpoint-phone .copy p,
.breakpoint-phone-small .copy p,
.breakpoint-phone .copy-shallow p,
.breakpoint-phone-small .copy-shallow p {
  font-size: 1.6rem;
}

.copy p:last-of-type:not(:first-child),
.copy-shallow p:last-of-type:not(:first-child) {
  padding-bottom: 0;
}

/**
 * Blockquote
 */

.copy blockquote,
.copy-shallow > blockquote {
  color: var(--color-grey);
  clear: right;
  float: right;
  font-style: italic;
  font-size: 3.2rem;
  line-height: 1.4;
  text-align: center;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 3rem;
  margin-right: -30rem;
  width: 42rem;
}

.breakpoint-w-min-1700 .copy blockquote,
.breakpoint-w-min-1700 .copy-shallow > blockquote {
  margin-right: -46rem;
}

.copy.copy--no-overflow-right blockquote,
.copy.copy--no-overflow blockquote {
  margin-right: 0;
  max-width: 50%;
}

.breakpoint-tablet-wide .copy blockquote,
.breakpoint-tablet-wide .copy-shallow > blockquote,
.breakpoint-tablet .copy blockquote,
.breakpoint-tablet .copy-shallow > blockquote {
  font-size: 2.6rem;
  margin-right: 0;
  width: 38rem;
}

.breakpoint-phone .copy blockquote,
.breakpoint-phone .copy-shallow > blockquote,
.breakpoint-phone-small .copy blockquote,
.breakpoint-phone-small .copy-shallow > blockquote {
  float: none;
  font-size: 2.4rem;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  width: 100%;
}

/* Pull quote */

.copy aside,
.copy-shallow > aside {
  color: var(--color-grey);
  clear: both;
  font-style: italic;
  font-size: 3.2rem;
  line-height: 1.4;
  text-align: center;
  padding-bottom: 2rem;
}

/**
 * Formatting
 */

.copy strong,
.copy-shallow > strong {
  font-weight: bold;
}

.copy em,
.copy-shallow > em {
  font-style: italic;
}

/**
 * Lists
 */

.copy ul,
.copy ol,
.copy-shallow > ul,
.copy-shallow > ol {
  padding-left: 1.9rem;
  padding-bottom: 2rem;
}

.copy ul li,
.copy-shallow > ul li,
.copy ol li,
.copy-shallow > ol li {
  list-style: disc;
  color: var(--color-grey-darkest);
  font-size: 2rem;
  line-height: 1.6;
  padding-bottom: 1.4rem;
}

.copy ol li,
.copy-shallow > ol li {
  list-style: decimal;
}

.breakpoint-tablet-wide .copy ul li,
.breakpoint-tablet-wide .copy-shallow > ul li,
.breakpoint-tablet-wide .copy ol li,
.breakpoint-tablet-wide .copy-shallow > ol li,
.breakpoint-tablet .copy ul li,
.breakpoint-tablet .copy-shallow > ul li,
.breakpoint-tablet .copy ol li,
.breakpoint-tablet .copy-shallow > ol li {
  font-size: 1.8rem;
}

.breakpoint-phone .copy ul li,
.breakpoint-phone .copy-shallow > ul li,
.breakpoint-phone .copy ol li,
.breakpoint-phone .copy-shallow > ol li,
.breakpoint-phone-small .copy ul li,
.breakpoint-phone-small .copy-shallow > ul li,
.breakpoint-phone-small .copy ol li,
.breakpoint-phone-small .copy-shallow > ol li {
  padding-bottom: 1rem;
  font-size: 1.6rem;
}

/**
 * Links
 */

.copy a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
      hyphens: auto;
}

/**
 * Images
 */

.copy img,
.copy-shallow > img {
  display: block;
  height: auto;
  max-width: 100%;
}

/**
 * Horizontal rule
 */

.copy hr,
.copy-shallow > hr {
  border: none;
  border-bottom: 1px solid var(--color-grey-lightest);
  clear: both;
  margin-top: 3rem;
  margin-bottom: 5rem;
}

.breakpoint-tablet-wide .copy hr,
.breakpoint-tablet-wide .copy-shallow > hr,
.breakpoint-tablet .copy hr,
.breakpoint-tablet .copy-shallow > hr,
.breakpoint-phone .copy hr,
.breakpoint-phone .copy-shallow > hr,
.breakpoint-phone-small .copy hr,
.breakpoint-phone-small .copy-shallow > hr {
  margin-top: 1rem;
  margin-bottom: 3rem;
}

/**
 * Responsive embed
 */

.responsive-embed {
  background-color: var(--color-light-orange);
  position: relative;
  padding-bottom: calc(56.25% + 5%); /* 16:9 */
  height: 0;
  z-index: 1;
}

.responsive-embed video,
.responsive-embed object,
.responsive-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

[data-view-pause-player-on-click] {
  position: relative;
  cursor: pointer;
}

[data-view-pause-player-on-click]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1;
}

[data-view-pause-player-on-click].clicked:before {
  display: none;
}

/**
 * Subscribe form
 */

.subscribe-form {
}

.subscribe-form__label {
  cursor: pointer;
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  padding-top: 1rem;
  padding-bottom: 2.6rem;
}

.breakpoint-tablet-wide .subscribe-form__label,
.breakpoint-tablet .subscribe-form__label {
  padding-bottom: 2rem;
}

.breakpoint-phone .subscribe-form__label,
.breakpoint-phone-small .subscribe-form__label {
  padding-bottom: 1rem;
}

.subscribe-form__form {
}

.subscribe-form__wrapper {
  background-color: var(--color-white);
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.breakpoint-phone .subscribe-form__wrapper,
.breakpoint-phone-small .subscribe-form__wrapper {
  display: block;
  background-color: transparent;
}

.subscribe-form__input {
  border: none;
  color: var(--color-grey-dark);
  font-family: var(--font-main-fallback);
  font-size: 2.4rem;
  padding: 1.6rem;
  width: calc(100% - 16rem);
}

.fonts-loaded .subscribe-form__input {
  font-family: var(--font-main);
}

.breakpoint-tablet-wide .subscribe-form__input,
.breakpoint-tablet .subscribe-form__input {
  font-size: 2rem;
}

.breakpoint-phone .subscribe-form__input,
.breakpoint-phone-small .subscribe-form__input {
  background-color: var(--color-white);
  border-radius: 2px;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  padding: 1.4rem;
  text-align: center;
  width: 100%;
}

.subscribe-form__input::-webkit-input-placeholder {
  color: var(--color-grey-dark);
}

.subscribe-form__input::-moz-placeholder {
  color: var(--color-grey-dark);
}

.subscribe-form__input:-ms-input-placeholder {
  color: var(--color-grey-dark);
}

.subscribe-form__input::-ms-input-placeholder {
  color: var(--color-grey-dark);
}

.subscribe-form__input::placeholder {
  color: var(--color-grey-dark);
}

.subscribe-form__button {
  background-color: var(--color-red);
  border-radius: 2px;
  color: var(--color-white);
  margin: 1rem;
  padding-top: 0.4rem;
  padding-bottom: 0.1rem;
  width: 15rem;
}

.breakpoint-phone .subscribe-form__button,
.breakpoint-phone-small .subscribe-form__button {
  padding: 1.8rem 1.4rem 1.4rem;
  margin: 0;
  width: 100%;
}

.subscribe-form__button svg {
  width: 14px;
  height: 12px;
  margin-right: 0.4rem;
  -webkit-transform: translateY(1px);
      -ms-transform: translateY(1px);
          transform: translateY(1px);
}

/**
 * Action
 */

.action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  text-align: center;
  width: 3rem;
  height: 3rem;
  -webkit-transition: background-color 150ms ease, border-color 150ms ease;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.action--large {
  width: 4.2rem;
  height: 4.2rem;
}

.breakpoint-phone .action,
.breakpoint-phone-small .action--large {
  width: 3.2rem;
  height: 3.2rem;
}

.action--large + .action--large,
.action--large + add-to-queue-button- > .action--large {
  margin-left: 1rem;
}

.action + .action,
.action + add-to-queue-button- > .action {
  margin-left: 0.5rem;
}

.flex-dir-column .action + .action,
.flex-dir-column .action + add-to-queue-button- > .action {
  margin-left: 0;
  margin-top: 0.5rem;
}

.action--add-to-playlist {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-lightest);
}

.action--add-to-playlist-alt {
  background-color: transparent;
  border-color: var(--color-white);
}

.action--add-to-playlist:hover,
.action--add-to-playlist:focus,
.action--add-to-playlist-active {
  border-color: var(--color-red);
}

.action--add-to-playlist .tick-button,
.action--add-to-playlist-active .plus-button {
  display: none;
}

.action--add-to-playlist-active .tick-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.action--add-to-playlist svg path {
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.action--add-to-playlist-alt svg path {
  fill: var(--color-white);
}

.action--add-to-playlist:hover svg path,
.action--add-to-playlist:focus svg path,
.action--add-to-playlist-active svg path {
  fill: var(--color-red);
}

.action--play {
  background-color: var(--color-red);
  border: 1px solid var(--color-red);
}

.action--play-alt,
.audio-summary__track .action--play {
  background-color: var(--color-white);
  border-color: var(--color-grey-light);
}

.action--play-active.action--play-alt,
.audio-summary__track .action--play-active {
  background-color: var(--color-red);
  border: 1px solid var(--color-red);
}

.play-button,
.pause-button,
.plus-button,
.tick-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.action--play .pause-button,
.action--play-active .play-button {
  display: none;
}

.action--play-active .pause-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.action--play .play-button svg {
  -webkit-transform: translateX(1px) scale(0.9);
      -ms-transform: translateX(1px) scale(0.9);
          transform: translateX(1px) scale(0.9);
}

.breakpoint-phone .action--play .play-button svg,
.breakpoint-phone-small .action--play .play-button svg {
  -webkit-transform: translateX(1px) scale(0.9);
      -ms-transform: translateX(1px) scale(0.9);
          transform: translateX(1px) scale(0.9);
}

.action--play.action--large .play-button svg {
  -webkit-transform: translateX(2px) scale(1.3);
      -ms-transform: translateX(2px) scale(1.3);
          transform: translateX(2px) scale(1.3);
}

.breakpoint-phone .action--play.action--large .play-button svg,
.breakpoint-phone-small .action--play.action--large .play-button svg {
  -webkit-transform: translateX(2px) scale(1.1);
      -ms-transform: translateX(2px) scale(1.1);
          transform: translateX(2px) scale(1.1);
}

.action--play .pause-button svg {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}

.action--play.action--large .pause-button svg {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.action--play svg path {
  fill: var(--color-white);
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.action--play-alt .play-button svg path,
.audio-summary__track .action--play .play-button svg path {
  fill: var(--color-grey);
}

.action--play-alt.action-play--active svg path,
.audio-summary__track .action-play--active svg path {
  fill: var(--color-white);
}

/**
 * Banner
 */

.banner {
  background-color: var(--color-grey-light);
  position: relative;
  max-height: 70rem;
  overflow: hidden;
}

.breakpoint-tablet-wide .banner,
.breakpoint-tablet .banner,
.breakpoint-phone .banner,
.breakpoint-phone-small .banner {
  max-height: 100%;
}

.banner:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 50%;
}

.banner--collapse:before {
  display: none;
}

.breakpoint-tablet-wide .banner:before,
.breakpoint-tablet .banner:before,
.breakpoint-phone .banner:before,
.breakpoint-phone-small .banner:before {
  display: none;
}

.banner--smaller {
  max-height: 56rem;
}

.banner--collapse {
  max-height: none;
}

.breakpoint-widescreen .banner--clip-neighbouring-content + section,
.breakpoint-desktop .banner--clip-neighbouring-content + section {
  margin-top: -18rem;
  padding-top: 0;
}

.banner--clip-neighbouring-content + section {
  padding-top: 4rem;
}

.banner__image-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

[data-view-color-from-image] .banner__image-wrapper {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.color-from-image--dark .banner__image-wrapper,
.color-from-image--light .banner__image-wrapper {
  opacity: 1;
}

.banner__image-gradient {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.breakpoint-tablet-wide .banner__image-gradient--home,
.breakpoint-tablet .banner__image-gradient--home {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.banner__image {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  -webkit-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
          transform: translateY(-10%);
}

.banner__image-attribution {
  position: absolute;
  bottom: 0;
  right: -6rem;
  padding: 2rem 8rem;
  font-size: 1.3rem;
  z-index: 4;
}

.color-from-image--dark .banner__image-attribution {
  background-image: radial-gradient(
    ellipse farthest-side at bottom center,
    rgb(0, 0, 0, 0.7) 0%,
    rgb(0, 0, 0, 0.7) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  color: var(--color-white);
}

.color-from-image--dark .banner__image-attribution a {
  color: var(--color-white);
}

.color-from-image--light .banner__image-attribution {
  background-image: radial-gradient(
    ellipse farthest-side at bottom center,
    rgb(255, 255, 255, 0.8) 0%,
    rgb(255, 255, 255, 0.8) 40%,
    rgba(255, 255, 255, 0) 100%
  );
  color: var(--color-grey-darkest);
}

.color-from-image--light .banner__image-attribution a {
  color: var(--color-grey-darkest);
}

.breakpoint-tablet-wide .banner__image-attribution,
.breakpoint-tablet .banner__image-attribution,
.breakpoint-phone .banner__image-attribution {
  background-image: none;
  right: auto;
  padding-bottom: 5rem;
  max-width: 50%;
  left: -5rem;
}

.banner__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.breakpoint-tablet-wide .banner__inner,
.breakpoint-tablet .banner__inner,
.breakpoint-phone .banner__inner,
.breakpoint-phone-small .banner__inner {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 3rem;
}

.banner--collapse .banner__inner {
  padding-top: 0;
  position: static;
}

.banner__text-content {
  padding-top: 10rem;
  position: relative;
  z-index: 2;
}

.color-from-image--dark .banner__text-content {
  color: var(--color-white);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
}

.banner__text-content .banner__heading a,
.color-from-image--dark .banner__text-content .banner__heading,
.color-from-image--dark .banner__text-content .banner__heading a {
  color: var(--color-white);
}

.color-from-image--light .banner__text-content {
  color: var(--color-grey-darkest);
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.3);
}

.color-from-image--light .banner__text-content .banner__heading,
.color-from-image--light .banner__text-content .banner__heading a {
  color: var(--color-grey-darkest);
}

.breakpoint-widescreen .banner__text-content {
  padding-top: 12rem;
}

.breakpoint-w-1300 .banner__text-content {
  padding-top: 8rem;
}

.breakpoint-w-1200 .banner__text-content {
  padding-top: 6rem;
}

.breakpoint-tablet-wide .banner__text-content,
.breakpoint-tablet .banner__text-content {
  text-align: left;
  padding-top: 0;
}

.banner__heading {
  font-size: 5.4rem;
  font-weight: bold;
  line-height: 1.1;
  padding-bottom: 3.6rem;
}

.banner__heading a {
  text-decoration: none;
}

.banner__heading a:hover,
.banner__heading a:focus {
  text-decoration: underline;
}

.breakpoint-w-1300 .banner__heading {
  font-size: 4.8rem;
}

.breakpoint-w-1200 .banner__heading {
  font-size: 4rem;
  padding-bottom: 2.6rem;
}

.breakpoint-tablet-wide .banner__heading,
.breakpoint-tablet .banner__heading {
  font-size: 3.6rem;
  padding-bottom: 0;
}

.banner__subheading {
  font-size: 2.2rem;
  padding-left: 12rem;
  padding-right: 12rem;
  padding-bottom: 3rem;
}

.breakpoint-w-1300 .banner__subheading {
  font-size: 2rem;
  padding-left: 8rem;
  padding-right: 8rem;
}

.breakpoint-w-1200 .banner__subheading {
  font-size: 1.8rem;
}

/**
 * News card
 */

.news-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.breakpoint-tablet-wide .news-card,
.breakpoint-tablet .news-card {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.breakpoint-phone .news-card,
.breakpoint-phone-small .news-card {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.breakpoint-phone .news-card,
.breakpoint-phone-small .news-card {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.news-card--vertical,
.news-card--hero {
  padding-top: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.news-card:first-of-type {
  padding-top: 0;
}

.news-card:last-of-type {
  padding-bottom: 0;
}

.news-card__image-container {
  overflow: hidden;
  width: 40%;
}

.news-card--hero .news-card__image-container {
  padding-bottom: 3rem;
  width: 100%;
}

.news-card--image-alt .news-card__image-container,
.breakpoint-tablet-wide .news-card__image-container,
.breakpoint-tablet .news-card__image-container {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.news-card--vertical .news-card__image-container,
.breakpoint-phone .news-card__image-container,
.breakpoint-phone-small .news-card__image-container {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  padding-bottom: 1rem;
  width: 100%;
}

.news-card__text {
  padding-left: 3rem;
  padding-right: 0;
  width: 60%;
}

.news-card--image-alt .news-card__text {
  padding-right: 3rem;
  padding-left: 0;
}

.breakpoint-tablet-wide .news-card__text,
.breakpoint-tablet .news-card__text {
  text-align: left;
  padding-left: 2rem;
  padding-right: 0;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.news-card--vertical .news-card__text {
  text-align: center;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.breakpoint-phone .news-card__text,
.breakpoint-phone-small .news-card__text {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  text-align: left;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.breakpoint-tablet-wide .news-card__image-container + .news-card__text,
.breakpoint-tablet .news-card__image-container + .news-card__text {
  padding-left: 2rem;
}

.news-card--vertical .news-card__image-container + .news-card__text,
.breakpoint-phone .news-card__image-container + .news-card__text,
.breakpoint-phone-small .news-card__image-container + .news-card__text {
  padding-left: 0;
}

.news-card__text:only-child {
  width: 100%;
}

.breakpoint-tablet-wide .news-card__text:only-child,
.breakpoint-tablet .news-card__text:only-child,
.breakpoint-phone .news-card__text:only-child,
.breakpoint-phone-small .news-card__text:only-child {
  padding-left: 0;
  padding-right: 0;
}

.news-card__image-container.phone-only + .news-card__text {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.news-card--hero .news-card__text {
  padding-left: 4rem;
  padding-right: 4rem;
  width: 100%;
}

.breakpoint-tablet-wide .news-card--hero .news-card__text,
.breakpoint-tablet .news-card--hero .news-card__text,
.breakpoint-phone .news-card--hero .news-card__text,
.breakpoint-phone-small .news-card--hero .news-card__text {
  padding-left: 0;
  padding-right: 0;
}

.breakpoint-widescreen
  .home__news-cards--after-banner
  .news-card--hero
  .news-card__text:first-child,
.breakpoint-desktop
  .home__news-cards--after-banner
  .news-card--hero
  .news-card__text:first-child {
  padding-top: 12rem;
}

.news-card__title {
  color: var(--color-grey-darkest);
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: 1rem;
}

.breakpoint-phone .news-card__title,
.breakpoint-phone-small .news-card__title {
  font-size: 2rem;
  padding-bottom: 0.8rem;
}

.news-card__body {
  font-size: 1.8rem;
  line-height: 1.5;
}

.breakpoint-phone .news-card__body,
.breakpoint-phone-small .news-card__body {
  font-size: 1.6rem;
}

.news-card__actions {
  padding-top: 1.8rem;
}

.breakpoint-tablet-wide .news-card__actions,
.breakpoint-tablet .news-card__actions,
.breakpoint-phone .news-card__actions,
.breakpoint-phone-small .news-card__actions {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

.breakpoint-phone .news-card__actions,
.breakpoint-phone-small .news-card__actions {
  padding-top: 1.2rem;
}

.news-card__anchor {
  color: currentColor;
  display: block;
  text-decoration: none;
}

.news-card__anchor:hover,
.news-card__anchor:focus {
  color: var(--color-red);
  text-decoration: underline;
}

/**
 * Card
 */

.card {
  padding-bottom: 3rem;
}

body .card-embed .card--highlight,
.card--highlight {
  border-radius: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 3rem 2rem;
  position: relative;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .card--highlight {
    min-height: 30rem;
  }
}

.card__fade {
  max-height: 54rem;
  overflow: hidden;
  position: relative;
}

.breakpoint-phone .card__fade,
.breakpoint-phone-small .card__fade {
  max-height: 100%;
  overflow: visible;
}

.card__fade:after {
  content: "";
  background-image: -webkit-gradient(
    linear,
    left bottom, left top,
    from(rgba(255, 255, 255, 1)),
    to(rgba(255, 255, 255, 0))
  );
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10rem;
}

.breakpoint-phone .card__fade:after,
.breakpoint-phone-small .card__fade:after {
  display: none;
}

.card__image-container {
  padding-bottom: 1.8rem;
}

.breakpoint-phone .card__image-container,
.breakpoint-phone-small .card__image-container {
  float: left;
  padding-right: 2rem;
  width: 40%;
}

.breakpoint-phone .card--mobile-block .card__image-container,
.breakpoint-phone-small .card--mobile-block .card__image-container {
  float: none;
  padding-bottom: 1rem;
  padding-right: 0;
  width: 100%;
}

.card__image-container--background {
  bottom: 0;
  left: 0;
  mix-blend-mode: luminosity;
  opacity: 0.08;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.breakpoint-phone .card__image-container--background,
.breakpoint-phone-small .card__image-container--background {
  float: none;
  padding-right: 0;
  width: 100%;
}

.card__background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.card__heading {
  display: block;
  font-size: 1.5rem;
  font-family: var(--font-alternate-fallback);
  margin-bottom: 0.8rem;
}

.fonts-loaded .card__heading {
  font-family: var(--font-alternate);
}

.breakpoint-phone .card__heading,
.breakpoint-phone-small .card__heading {
  font-size: 1.3rem;
}

.card__label {
  position: absolute;
  top: 1rem;
  right: 1rem;
  pointer-events: none;
  z-index: 2;
}

.breakpoint-phone .card__label,
.breakpoint-phone-small .card__label {
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}

.card--highlight .card__label {
  bottom: 4rem;
  right: 2rem;
  top: auto;
}

.breakpoint-phone .card--highlight .card__label,
.breakpoint-phone-small .card--highlight .card__label {
  bottom: 3.5rem;
}

.card__image-border {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #88d3ce), to(#b845e2));
  background-image: linear-gradient(to bottom, #88d3ce 50%, #b845e2);
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

.card__image-border + .card__anchor {
  top: 0.4rem;
  bottom: 0.4rem;
  right: 0.4rem;
  left: 0.4rem;
  z-index: 1;
}

.card__video-overlay {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.card__video-overlay svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 40px;
  margin-top: -20px;
  margin-left: -17px;
}

.card__video-overlay svg path {
  fill: var(--color-white);
}

.card__text {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  position: relative;
  z-index: 1;
}

.card--highlight .card__text {
  padding-bottom: 6rem;
  width: 100%;
}

.breakpoint-tablet-wide .card--highlight .card__text,
.breakpoint-tablet .card--highlight .card__text,
.breakpoint-phone .card--highlight .card__text,
.breakpoint-phone-small .card--highlight .card__text {
  padding-bottom: 5rem;
}

.breakpoint-phone .card__text,
.breakpoint-phone-small .card__text {
  float: left;
  width: 60%;
}

.breakpoint-phone .card--mobile-block .card__text,
.breakpoint-phone-small .card--mobile-block .card__text {
  float: none;
  width: 100%;
}

.breakpoint-phone .card--highlight .card__text,
.breakpoint-phone-small .card--highlight .card__text {
  float: none;
  width: 100%;
}

.card__title {
  color: var(--color-grey-darkest);
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.3;
  padding-bottom: 1rem;
}

.breakpoint-phone .card__title,
.breakpoint-phone-small .card__title {
  font-size: 1.8rem;
  padding-bottom: 0.4rem;
}

.breakpoint-phone .card__meta + .card__title,
.breakpoint-phone-small .card__meta + .card__title {
  margin-top: -0.6rem;
}

.card--highlight .card__meta + .card__title {
  padding-top: 0.6rem;
}

.breakpoint-phone .card--highlight .card__meta + .card__title,
.breakpoint-phone-small .card--highlight .card__meta + .card__title {
  margin-top: 0;
  padding-top: 0.4rem;
}

.copy .card__body,
.copy .card__body.copy,
.card__body,
.copy .card__body > *,
.copy .card__body.copy > *,
.card__body > * {
  font-size: 1.6rem;
  line-height: 1.45;
}

.breakpoint-phone .card__body,
.breakpoint-phone-small .card__body {
  font-size: 1.4rem;
}

.card__actions {
  padding-top: 1.8rem;
}

.breakpoint-tablet-wide .card__actions,
.breakpoint-tablet .card__actions,
.breakpoint-phone .card__actions,
.breakpoint-phone-small .card__actions {
  padding-top: 1.2rem;
}

.breakpoint-phone .card__actions,
.breakpoint-phone-small .card__actions {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

.card--highlight .card__actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 2rem;
}

.breakpoint-phone .card--highlight .button-with-tooltip,
.breakpoint-phone-small .card--highlight .button-with-tooltip {
  margin-right: 2rem;
}

.card__meta {
  display: block;
  font-size: 1.5rem;
  font-family: var(--font-alternate-fallback);
  padding-bottom: 0.2rem;
}

.fonts-loaded .card__meta {
  font-family: var(--font-alternate);
}

.breakpoint-phone .card__meta,
.breakpoint-phone-small .card__meta {
  font-size: 1.3rem;
}

.card__anchor {
  color: currentColor;
  display: block;
  text-decoration: none;
}

.card__anchor:hover,
.card__anchor:focus {
  color: var(--color-red);
  text-decoration: underline;
}

/**
 * Subscriber giveaway
 */

.subscriber-giveaway {
  padding-top: 3rem;
}

.subscriber-giveaway__copy {
  padding-right: 4rem;
}

.breakpoint-tablet-wide .subscriber-giveaway__copy,
.breakpoint-tablet .subscriber-giveaway__copy {
  padding-right: 3rem;
}

.breakpoint-phone .subscriber-giveaway__copy,
.breakpoint-phone-small .subscriber-giveaway__copy {
  padding-right: 0;
}

.subscriber-giveaway__button {
  display: block;
  float: right;
  padding-top: 1rem;
  padding-left: 3rem;
  padding-bottom: 3rem;
  text-decoration: none;
}

.subscriber-giveaway__button img {
  display: block;
  width: 12rem;
  height: 12rem;
}

.subscriber-giveaway__button-text {
  padding-top: 0.8rem;
  font-size: 1.2rem;
  position: relative;
}

.subscriber-giveaway__button-text span {
  content: "";
  background-color: var(--color-red);
  border-radius: 50%;
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  position: relative;
  margin-right: 0.6rem;
}

.subscriber-giveaway__button-text span svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -4px;
  width: 10px;
  height: 12px;
}

.subscriber-giveaway__button-text span svg path {
  fill: var(--color-white);
}

.subscriber-giveaway__inset {
  margin-top: -28rem;
}

.subscriber-giveaway__inset .summary-inset__action {
  padding-bottom: 4.5rem;
}

.breakpoint-tablet-wide .subscriber-giveaway__inset,
.breakpoint-tablet .subscriber-giveaway__inset {
  margin-top: -2rem;
}

.breakpoint-phone .subscriber-giveaway__inset,
.breakpoint-phone-small .subscriber-giveaway__inset {
  margin-top: 0;
}

.subscriber-giveaway__tags .tags-list {
  text-align: left;
}

.subscriber-giveaway__enter-button--hidden {
  display: none;
}

#enter-now.subscriber-giveaway__enter-button--disabled {
  background-color: var(--color-grey-lightest);
  border-color: var(--color-grey-lightest);
  color: var(--color-grey-darkest);
  cursor: default;
}

.subscriber-giveaway-copy h1,
.subscriber-giveaway-copy p {
  color: var(--color-white);
}

/**
 * Highlight box
 */

.highlight-box {
  background-image: url(/assets/main/assets/public/highlight-box/background-texture.94c4f9cb.gif);
  background-color: var(--color-grey-darkest);
  background-repeat: repeat;
  background-size: 10rem;
  color: var(--color-white);
  padding: 5rem 7rem;
  position: relative;
}

.breakpoint-w-1400.with-player.breakpoint-not-phone:not(.breakpoint-tablet-wide):not(.breakpoint-tablet)
  .highlight-box,
.breakpoint-tablet-wide .highlight-box {
  padding: 4rem 3.4rem 3rem;
}

.breakpoint-tablet .highlight-box {
  padding: 4rem 2.4rem 3rem;
}

.breakpoint-tablet .highlight-box,
.breakpoint-phone .highlight-box,
.breakpoint-phone-small .highlight-box {
  padding: 4rem 3rem 3rem;
}

.highlight-box__heading {
  color: var(--color-white);
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 2rem;
}

.fonts-loaded .highlight-box__heading {
  font-family: var(--font-alternate);
}

.highlight-box__item {
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: relative;
}

.highlight-box__item:before {
  content: "";
  background-color: var(--color-grey);
  height: 1px;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.highlight-box__item a {
  color: var(--color-white);
  text-decoration: none;
}

.highlight-box__item-title {
  font-family: var(--font-alternate-fallback);
  font-size: 1.8rem;
  font-weight: bold;
  padding-bottom: 1rem;
}

.fonts-loaded .highlight-box__item-title {
  font-family: var(--font-alternate);
}

.breakpoint-w-1400.with-player.breakpoint-not-phone:not(.breakpoint-tablet-wide):not(.breakpoint-tablet)
  .highlight-box__item-title,
.breakpoint-tablet-wide .highlight-box__item-title,
.breakpoint-tablet .highlight-box__item-title,
.breakpoint-phone .highlight-box__item-title,
.breakpoint-phone-small .highlight-box__item-title {
  font-size: 1.6rem;
}

.highlight-box__item a:hover .highlight-box__item-title,
.highlight-box__item a:focus .highlight-box__item-title {
  text-decoration: underline;
}

.highlight-box__item-body {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.breakpoint-w-1400.with-player.breakpoint-not-phone:not(.breakpoint-tablet-wide):not(.breakpoint-tablet)
  .highlight-box__item-body,
.breakpoint-tablet-wide .highlight-box__item-body,
.breakpoint-tablet .highlight-box__item-body,
.breakpoint-phone .highlight-box__item-body,
.breakpoint-phone-small .highlight-box__item-body {
  font-size: 1.4rem;
}

.highlight-box__item-meta {
  font-size: 1.6rem;
}

.breakpoint-w-1400.with-player.breakpoint-not-phone:not(.breakpoint-tablet-wide):not(.breakpoint-tablet)
  .highlight-box__item-meta,
.breakpoint-tablet-wide .highlight-box__item-meta,
.breakpoint-tablet .highlight-box__item-meta,
.breakpoint-phone .highlight-box__item-meta,
.breakpoint-phone-small .highlight-box__item-meta {
  font-size: 1.4rem;
}

/**
 * Highlight circle
 */

.highlight-circle {
  color: var(--color-white);
  border-radius: 50%;
  width: 9rem;
  height: 9rem;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1), -webkit-transform 150ms cubic-bezier(0.335, 0.015, 0.25, 1);
  overflow: hidden;
  will-change: transform;
}

.highlight-circle--larger {
  width: 12rem;
  height: 12rem;
}

a.highlight-circle:hover,
a.highlight-circle:focus {
  -webkit-transform: scale(1.1) rotate(2deg);
      -ms-transform: scale(1.1) rotate(2deg);
          transform: scale(1.1) rotate(2deg);
}

.highlight-circle span {
  position: relative;
  z-index: 2;
}

/**
 * Home
 */

.home {
}

.home__feature-section {
  padding-top: 3rem;
}

.home__feature-section--with-banner,
.breakpoint-tablet-wide .home__feature-section,
.breakpoint-tablet .home__feature-section,
.breakpoint-phone .home__feature-section,
.breakpoint-phone-small .home__feature-section {
  padding-top: 0;
}

.home__audio-section {
  padding-bottom: 6rem;
}

.breakpoint-phone .home__audio-section,
.breakpoint-phone-small .home__audio-section {
  padding-bottom: 2rem;
}

.home__video-section {
  padding-top: 1rem;
  padding-bottom: 11rem;
}

.breakpoint-tablet-wide .home__video-section,
.breakpoint-tablet .home__video-section {
  padding-top: 0;
  padding-bottom: 7rem;
}

.breakpoint-phone .home__video-section,
.breakpoint-phone-small .home__video-section {
  padding-top: 0;
  padding-bottom: 3rem;
}

.home__news-cards--after-banner {
  margin-top: -9rem;
}

.breakpoint-widescreen .home__news-cards {
  padding-left: 6rem;
  padding-right: 6rem;
}

.breakpoint-tablet-wide .home__news-cards,
.breakpoint-tablet .home__news-cards,
.breakpoint-phone .home__news-cards,
.breakpoint-phone-small .home__news-cards {
  padding-top: 3rem;
  margin-top: 0;
}

/* Override the width for home features when player is open */

.breakpoint-w-1400.with-player.breakpoint-not-phone:not(.breakpoint-tablet-wide):not(.breakpoint-tablet)
  .home__feature-section
  .grid-col {
  padding-right: 0;
  width: 50%;
}

.home__whats-on-actions {
  padding-top: 6rem;
}

.breakpoint-tablet-wide .home__whats-on-actions,
.breakpoint-tablet .home__whats-on-actions,
.breakpoint-phone .home__whats-on-actions,
.breakpoint-phone-small .home__whats-on-actions {
  padding-top: 2rem;
}

/**
 * Topic list
 */

.topic-list {
  padding-top: 6rem;
  padding-bottom: 3rem;
  text-align: center;
}

.breakpoint-tablet-wide .topic-list,
.breakpoint-tablet .topic-list {
  padding-top: 5rem;
  padding-bottom: 2rem;
}

.breakpoint-phone .topic-list,
.breakpoint-phone-small .topic-list {
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.topic-list__item {
  display: inline-block;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 3rem;
}

.breakpoint-phone .topic-list__item,
.breakpoint-phone-small .topic-list__item {
  padding-bottom: 2.4rem;
}

.topic-list__item a {
  display: inline-block;
  font-size: 3.6rem;
  font-weight: bold;
  text-decoration: none;
}

.breakpoint-tablet-wide .topic-list__item a,
.breakpoint-tablet .topic-list__item a {
  font-size: 2.4rem;
}

.breakpoint-phone .topic-list__item a,
.breakpoint-phone-small .topic-list__item a {
  font-size: 2rem;
}

.topic-list__item a:hover,
.topic-list__item a:focus {
  text-decoration: underline;
}

/**
 * Social icons
 */

.social-icons {
}

.social-icons__list {
}

.social-icons__icon {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.social-icons__icon a {
  display: block;
}

.social-icons__icon a svg path {
  fill: var(--color-grey-darkest);
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.social-icons__icon a:hover svg path,
.social-icons__icon a:focus svg path {
  fill: var(--color-red);
}

/**
 * Scalable image
 */

.scalable-image {
  position: relative;
  overflow: hidden;
}

.scalable-image--block {
  width: 100%;
}

.scalable-image:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 70%;
}

.scalable-image--square:before {
  padding-top: 100%;
}

.scalable-image--shorter:before {
  padding-top: 60%;
}

.scalable-image--custom:before {
  padding-top: var(--padding);
}

.scalable-image--no-image,
.scalable-image__placeholder {
  background-image: url(/assets/main/assets/public/scalable-image/logo.178f0c74.svg);
  background-size: 111px 40px;
  background-position: center;
  background-repeat: no-repeat;
}

.breakpoint-tablet-wide .scalable-image--no-image,
.breakpoint-tablet .scalable-image--no-image,
.breakpoint-tablet-wide .scalable-image__placeholder,
.breakpoint-tablet .scalable-image__placeholder {
  background-size: 87px 32px;
}

.breakpoint-phone .scalable-image--no-image,
.breakpoint-phone-small .scalable-image--no-image,
.breakpoint-phone .scalable-image__placeholder,
.breakpoint-phone-small .scalable-image__placeholder {
  background-size: 42px 15px;
}

.scalable-image__image,
.scalable-image__placeholder,
.scalable-image__image[data-lazy].loaded {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 450ms;
          transition-duration: 450ms;
  -webkit-transition-timing-function: cubic-bezier(0.335, 0.015, 0.25, 1);
          transition-timing-function: cubic-bezier(0.335, 0.015, 0.25, 1);
  width: 100%;
}

.scalable-image a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.scalable-image a:hover .scalable-image__image,
.scalable-image a:focus .scalable-image__image {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

/**
 * On today
 */

.on-today {
  background-color: var(--color-grey-darkest);
  color: var(--color-white);
  padding: 5rem 5rem 3rem 6rem;
  margin-left: 4.5rem;
  margin-top: -34rem;
  position: relative;
}

.breakpoint-widescreen .on-today,
.breakpoint-desktop .on-today {
  min-height: 85rem;
}

.breakpoint-tablet-wide .on-today,
.breakpoint-tablet .on-today {
  margin-top: 0;
  margin-left: -3rem;
  margin-right: -3rem;
  padding: 5rem 3rem 4rem 18rem;
  width: calc(100% + 6rem);
}

.breakpoint-phone .on-today,
.breakpoint-phone-small .on-today {
  padding: 0;
  margin-left: 0;
  margin-top: 0;
}

.on-today__heading {
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 2rem;
}

.fonts-loaded .on-today__heading {
  font-family: var(--font-alternate);
}

.breakpoint-tablet-wide .on-today__heading,
.breakpoint-tablet .on-today__heading {
  padding-bottom: 3rem;
}

.on-today__toggle {
  font-family: var(--font-alternate-fallback);
  font-size: 1.6rem;
  padding: 2rem 3rem;
  margin-left: -3rem;
  margin-right: -3rem;
  position: relative;
  text-align: left;
  width: calc(100% + 6rem);
}

.fonts-loaded .on-today__toggle {
  font-family: var(--font-alternate);
}

.on-today__toggle svg {
  position: absolute;
  right: 3rem;
  top: 50%;
}

.on-today__toggle--active svg {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.on-today__content {
  display: none;
  padding-bottom: 2rem;
  position: relative;
}

.breakpoint-widescreen .on-today__content,
.breakpoint-desktop .on-today__content,
.breakpoint-tablet-wide .on-today__content,
.breakpoint-tablet .on-today__content {
  display: block;
}

.on-today__toggle--active + .on-today__content {
  display: block;
}

.on-today__item {
  padding-top: 2rem;
  padding-bottom: 1rem;
  position: relative;
}

.on-today__item:first-of-type:before {
  content: "";
  background-color: var(--color-grey);
  height: 1px;
  width: 40%;
  position: absolute;
  top: 0;
  left: 0;
}

.breakpoint-tablet-wide .on-today__item,
.breakpoint-tablet .on-today__item {
  float: left;
  padding-left: 2rem;
  width: 50%;
}

.breakpoint-tablet-wide .on-today__item:nth-of-type(odd),
.breakpoint-tablet .on-today__item:nth-of-type(odd) {
  clear: left;
  padding-left: 0;
  padding-right: 2rem;
}

.breakpoint-phone .on-today__item:first-of-type,
.breakpoint-phone-small .on-today__item:first-of-type {
  width: 50%;
}

.breakpoint-phone .on-today__item:first-of-type:before,
.breakpoint-phone-small .on-today__item:first-of-type:before {
  width: 60%;
}

.on-today__item a {
  color: var(--color-white);
  text-decoration: none;
}

.on-today__item-title {
  font-family: var(--font-alternate-fallback);
  font-size: 1.8rem;
  font-weight: bold;
  padding-bottom: 1rem;
}

.fonts-loaded .on-today__item-title {
  font-family: var(--font-alternate);
}

.breakpoint-tablet-wide .on-today__item-title,
.breakpoint-tablet .on-today__item-title,
.breakpoint-phone .on-today__item-title,
.breakpoint-phone-small .on-today__item-title {
  font-size: 1.6rem;
}

.on-today__item a:hover .on-today__item-title,
.on-today__item a:focus .on-today__item-title {
  text-decoration: underline;
}

.on-today__item-body {
  font-size: 1.6rem;
}

.breakpoint-tablet-wide .on-today__item-body,
.breakpoint-tablet .on-today__item-body,
.breakpoint-phone .on-today__item-body,
.breakpoint-phone-small .on-today__item-body {
  font-size: 1.4rem;
}

.on-today__date {
  position: absolute;
  top: -5rem;
  left: -10.5rem;
}

.breakpoint-tablet-wide .on-today__date,
.breakpoint-tablet .on-today__date {
  top: -7rem;
  left: -14rem;
}

.breakpoint-phone .on-today__date,
.breakpoint-phone-small .on-today__date {
  top: 0;
  left: auto;
  right: -1rem;
}

.on-today__no-events {
  text-align: center;
  margin-top: 3rem;
}

/**
 * Latest news
 */

.latest-news {
  margin-left: 5rem;
  margin-right: 3rem;
}

.breakpoint-tablet-wide .latest-news,
.breakpoint-tablet .latest-news {
  margin-left: 0;
  margin-top: 3rem;
  margin-right: -3rem;
}

.breakpoint-phone .latest-news,
.breakpoint-phone-small .latest-news {
  margin-left: -3rem;
  margin-right: -3rem;
}

.breakpoint-tablet-wide .home__feature-section--with-banner .latest-news,
.breakpoint-tablet .home__feature-section--with-banner .latest-news {
  margin-top: -8rem;
}

.latest-news__circle {
  position: absolute;
  width: 9rem;
  height: 9rem;
  top: 10rem;
  left: -4.5rem;
  opacity: 0.85;
}

.breakpoint-w-1400.with-player.breakpoint-not-phone:not(.breakpoint-tablet-wide):not(.breakpoint-tablet)
  .latest-news__circle,
.breakpoint-tablet-wide .latest-news__circle,
.breakpoint-tablet .latest-news__circle {
  left: auto;
  top: -4rem;
  right: 0.8rem;
  -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

.breakpoint-tablet .latest-news__circle {
  top: -5rem;
}

.breakpoint-phone .latest-news__circle,
.breakpoint-phone-small .latest-news__circle {
  top: -1rem;
  right: 1rem;
  left: auto;
  -webkit-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(10deg);
}

/**
 * What’s on
 */

.whats-on {
  padding-bottom: 12rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.breakpoint-tablet-wide .whats-on,
.breakpoint-tablet .whats-on {
  padding-bottom: 4rem;
}

.breakpoint-phone .whats-on,
.breakpoint-phone-small .whats-on {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.whats-on__header {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.breakpoint-tablet-wide .whats-on__header,
.breakpoint-tablet .whats-on__header {
  padding-bottom: 2rem;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.breakpoint-phone .whats-on__header,
.breakpoint-phone-small .whats-on__header {
  padding-bottom: 1.6rem;
}

.whats-on__heading {
}

.whats-on__heading a {
  display: block;
  padding-top: 1rem;
  letter-spacing: 0;
  font-family: var(--font-alternate-fallback);
  font-size: 1.8rem;
  font-weight: normal;
  text-transform: none;
  text-decoration: underline;
}

.fonts-loaded .whats-on__heading a {
  font-family: var(--font-alternate);
}

.whats-on__today {
}

.breakpoint-widescreen .whats-on__today {
  padding-left: 8rem;
}

.breakpoint-tablet-wide .whats-on__today,
.breakpoint-tablet .whats-on__today {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.whats-on__item {
}

.breakpoint-tablet-wide .whats-on__item,
.breakpoint-tablet .whats-on__item {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

/**
 * Advertisement
 */

.advertisement {
}

.breakpoint-tablet-wide .advertisement--desktop-leaderboard,
.breakpoint-tablet .advertisement--desktop-leaderboard,
.breakpoint-phone .advertisement--desktop-leaderboard,
.breakpoint-phone-small .advertisement--desktop-leaderboard {
  padding-top: 0;
}

.advertisement__box {
  width: 100%;
  height: 100%;
}

.advertisement--desktop-banner .advertisement__box {
  max-width: 970px;
  max-height: 90px;
}

.advertisement--desktop-leaderboard .advertisement__box {
  max-width: 1070px;
  max-height: 180px;
}

.advertisement--desktop-square .advertisement__box {
  max-width: 387px;
  max-height: 387px;
}

.advertisement--mobile-banner .advertisement__box {
  max-width: 320px;
  max-height: 50px;
}

.advertisement--mobile-leaderboard .advertisement__box {
  max-width: 320px;
  max-height: 100px;
}

.advertisement--mobile-rectangle .advertisement__box {
  max-width: 300px;
  max-height: 250px;
}

.advertisement__box img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.advertisement--hidden {
  display: none;
}

/**
 * Secondary navigation
 */

.secondary-nav {
}

.secondary-nav__inner {
  border-top: 1px solid var(--color-grey-lightest);
  padding-top: 2.4rem;
  padding-bottom: 1rem;
  text-align: center;
}

.secondary-nav--no-border .secondary-nav__inner {
  border-top: none;
}

.breakpoint-tablet-wide .secondary-nav__inner,
.breakpoint-tablet .secondary-nav__inner {
  border-top: 0;
  padding-top: 2rem;
  text-align: left;
}

.secondary-nav__list {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.secondary-nav__item {
  float: left;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 1.4rem;
}

.breakpoint-phone .secondary-nav__item,
.breakpoint-phone-small .secondary-nav__item {
  width: 50%;
}

.breakpoint-phone .secondary-nav__item:nth-of-type(odd),
.breakpoint-phone-small .secondary-nav__item:nth-of-type(odd) {
  clear: left;
}

.secondary-nav__item:first-of-type {
  padding-left: 0;
}

.breakpoint-phone .secondary-nav__item:first-of-type,
.breakpoint-phone-small .secondary-nav__item:first-of-type {
  padding-left: 3rem;
}

.secondary-nav__item:last-of-type {
  padding-right: 0;
}

.breakpoint-phone .secondary-nav__item:last-of-type,
.breakpoint-phone-small .secondary-nav__item:last-of-type {
  padding-right: 3rem;
}

.secondary-nav__anchor {
  color: var(--color-grey-darkest);
  display: block;
  font-size: 1.6rem;
  text-decoration: none;
}

.secondary-nav__anchor:hover,
.secondary-nav__anchor:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.secondary-nav__anchor--active {
  font-weight: bold;
}

.secondary-nav__anchor--active:hover,
.secondary-nav__anchor--active:focus {
  color: var(--color-grey-darkest);
  text-decoration: none;
}

/**
 * List view
 */

.list-view {
}

.list-view__item {
  border-bottom: 1px solid var(--color-grey-lightest);
  position: relative;
}

.list-view__item--active {
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#d57eeb));
  background-image: linear-gradient(to right, #fa709a, #d57eeb);
  color: #fff;
}

.breakpoint-tablet-wide .list-view__item,
.breakpoint-tablet .list-view__item {
  margin-left: -3rem;
  margin-right: -3rem;
  padding-left: 3rem;
}

.breakpoint-phone .list-view__item,
.breakpoint-phone-small .list-view__item {
  margin-left: -3rem;
  margin-right: -3rem;
  padding-left: 3rem;
  padding-right: 3rem;
}

.breakpoint-tablet-wide .list-view__item:first-of-type,
.breakpoint-tablet .list-view__item:first-of-type,
.breakpoint-phone .list-view__item:first-of-type,
.breakpoint-phone-small .list-view__item:first-of-type {
  border-top: 1px solid var(--color-grey-lightest);
}

.list-view__content {
  padding-top: 3.6rem;
  padding-bottom: 3.6rem;
  padding-right: 3rem;
  width: calc(100% - 20rem);
}

.breakpoint-tablet-wide .list-view__content,
.breakpoint-tablet .list-view__content {
  padding-top: 3rem;
  padding-bottom: 3rem;
  width: calc(100% - 24rem);
}

.breakpoint-phone .list-view__content,
.breakpoint-phone-small .list-view__content {
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-right: 0;
  width: 100%;
}

.list-view__date {
  padding-left: 3rem;
  padding-right: 3rem;
  float: left;
  width: 14%;
}

.breakpoint-tablet-wide .list-view__date,
.breakpoint-tablet .list-view__date {
  padding-left: 0;
  width: 16%;
}

.breakpoint-phone .list-view__date,
.breakpoint-phone-small .list-view__date {
  float: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 2rem;
  width: 100%;
}

.list-view__date-label {
  font-size: 1.5rem;
}

.breakpoint-phone .list-view__date-label,
.breakpoint-phone-small .list-view__date-label {
  font-size: 1.3rem;
}

.list-view__body {
  padding-right: 6rem;
  float: left;
  width: 56%;
}

.breakpoint-tablet-wide .list-view__body,
.breakpoint-tablet .list-view__body {
  padding-right: 0;
  width: 84%;
}

.breakpoint-phone .list-view__body,
.breakpoint-phone-small .list-view__body {
  float: none;
  padding-right: 0;
  width: 100%;
}

.list-view__body:only-child {
  width: 100%;
}

.list-view__actions {
  margin-top: 2rem;
}

.list-view__actions--hidden {
  display: none;
}

.list-view__action {
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
}

.list-view__action:hover,
.list-view__anchor:focus {
  text-decoration: underline;
}

.list-view__anchor {
  display: block;
  color: currentColor;
  text-decoration: none;
}

.list-view__anchor:hover,
.list-view__anchor:focus {
  color: currentColor;
}

.list-view__title {
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: 2rem;
}

.list-view__item--active .list-view__date-label,
.list-view__item--active .list-view__title,
.list-view__item--active .list-view__summary {
  color: #fff;
}

.breakpoint-tablet-wide .list-view__title,
.breakpoint-tablet .list-view__title {
  padding-bottom: 1rem;
}

.breakpoint-phone .list-view__title,
.breakpoint-phone-small .list-view__title {
  font-size: 2rem;
  padding-bottom: 1rem;
}

.list-view__anchor:hover .list-view__title,
.list-view__anchor:focus .list-view__title {
  text-decoration: underline;
}

.list-view__title > span {
  padding-right: 1.2rem;
}

.list-view__flag-label {
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}

.breakpoint-phone .list-view__flag-label,
.breakpoint-phone-small .list-view__flag-label {
  position: absolute;
  top: 2rem;
  right: 3rem;
}

.list-view__summary {
  font-size: 1.8rem;
}

.breakpoint-phone .list-view__summary,
.breakpoint-phone-small .list-view__summary {
  font-size: 1.6rem;
}

.list-view__meta {
  float: left;
  padding-right: 6rem;
  width: 30%;
}

.breakpoint-tablet-wide .list-view__meta,
.breakpoint-tablet .list-view__meta {
  clear: left;
  float: none;
  padding-right: 0;
  padding-left: 16%;
  padding-top: 2rem;
  width: 100%;
}

.breakpoint-phone .list-view__meta,
.breakpoint-phone-small .list-view__meta {
  float: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 2rem;
  width: 100%;
}

.list-view__meta-item {
  display: block;
  font-size: 1.5rem;
}

.breakpoint-tablet-wide .list-view__meta-item,
.breakpoint-tablet .list-view__meta-item {
  padding-bottom: 0;
}

.breakpoint-phone .list-view__meta-item,
.breakpoint-phone-small .list-view__meta-item {
  padding-bottom: 0;
  font-size: 1.3rem;
}

.list-view__image-container {
  position: relative;
  width: 20rem;
}

.breakpoint-tablet-wide .list-view__image-container,
.breakpoint-tablet .list-view__image-container {
  width: 24rem;
}

.breakpoint-phone .list-view__image-container,
.breakpoint-phone-small .list-view__image-container {
  display: none;
}

.list-view__image-container:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}

.list-view__image {
  display: block;
  height: auto;
  max-width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/**
 * Flag label
 */

.flag-label {
  border: 1px solid currentColor;
  border-radius: 2px;
  display: inline-block;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  padding: 0.2rem 0.4rem 0.2rem 0.5rem;
  text-align: center;
}

.flag-label + .flag-label {
  margin-left: 0.6rem;
}

.flag-label--small {
  border-radius: 2px;
  font-size: 1rem;
  padding: 0.4rem 0.5rem;
}

.flag-label--large {
  border-radius: 4px;
  font-size: 1.2rem;
  padding: 0.4rem 0.8rem;
}

.flag-label--larger {
  border-radius: 4px;
  font-size: 1.3rem;
  padding: 0.8rem 1.6rem;
}

.flag-label--basic {
  padding-left: 0;
  padding-right: 0;
}

.flag-label__on-air {
  display: inline-block;
  padding-right: 0.4rem;
}

.flag-label__on-air path {
  fill: currentColor;
}

/**
 * Filter links
 */

.filter-links {
  margin-bottom: 1rem;
}

.filter-link {
}

.filter-link__anchor {
  color: var(--color-grey);
  display: block;
  text-decoration: none;
  font-size: 1.5rem;
  font-family: var(--font-alternate-fallback);
}

.fonts-loaded .fiter-link__anchor {
  font-family: var(--font-alternate);
}

.filter-link span {
  display: inline-block;
  padding: 1rem 2rem;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
}

.filter-link__anchor:hover span,
.filter-link__anchor:focus span {
  color: var(--color-grey-darkest);
  text-decoration: underline;
}

.filter-link__anchor--active span {
  border: 1px solid var(--color-grey-darkest);
  border-radius: 4px;
  color: var(--color-grey-darkest);
  font-weight: bold;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}

.filter-link__anchor--active:hover span,
.filter-link__anchor--active:focus span {
  text-decoration: none;
}

/**
 * Page banner
 */

.page-banner {
  max-height: 50rem;
}

.breakpoint-tablet-wide .page-banner .banner__inner,
.breakpoint-tablet .page-banner .banner__inner,
.breakpoint-phone .page-banner .banner__inner,
.breakpoint-phone-small .page-banner .banner__inner {
  padding-top: 0;
}

.page-banner__copy {
  padding-top: 8rem;
  padding-bottom: 9rem;
  position: relative;
  z-index: 1;
}

[data-view-color-from-image] .page-banner__copy {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transition-delay: 100ms;
          transition-delay: 100ms;
}

.color-from-image--dark .page-banner__copy,
.color-from-image--light .page-banner__copy {
  opacity: 1;
}

.color-from-image--dark .page-banner__copy {
  color: var(--color-white);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
}

.page-banner__copy a,
.color-from-image--dark .page-banner__copy,
.color-from-image--dark .page-banner__copy a {
  color: var(--color-white);
}

.color-from-image--light .page-banner__copy {
  color: var(--color-grey-darkest);
  text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.3);
}

.color-from-image--light .page-banner__copy,
.color-from-image--light .page-banner__copy a {
  color: var(--color-grey-darkest);
}

.color-from-image--light .page-banner__copy path {
  fill: var(--color-grey-darkest);
}

.breakpoint-w-1200 .page-banner__copy {
  padding-top: 6rem;
  padding-bottom: 7rem;
}

.breakpoint-tablet-wide .page-banner__copy,
.breakpoint-tablet .page-banner__copy,
.breakpoint-phone .page-banner__copy,
.breakpoint-phone-small .page-banner__copy {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.breakpoint-tablet-wide .page-banner--episode .page-banner__copy,
.breakpoint-tablet .page-banner--episode .page-banner__copy,
.breakpoint-phone .page-banner--episode .page-banner__copy,
.breakpoint-phone-small .page-banner--episode .page-banner__copy {
  padding-bottom: 8rem;
  padding-bottom: 9rem;
}

.page-banner__meta {
  font-size: 1.5rem;
  padding-bottom: 2.4rem;
}

.page-banner__meta em {
  padding-left: 1rem;
  padding-right: 1rem;
}

.page-banner__meta + .page-banner__meta {
  margin-top: -0.6rem;
}

.page-banner__heading {
  font-size: 5.4rem;
  font-weight: bold;
  line-height: 1.1;
  padding-bottom: 2rem;
}

.breakpoint-desktop .page-banner__heading {
  font-size: 4rem;
}

.breakpoint-tablet-wide .page-banner__heading,
.breakpoint-tablet .page-banner__heading {
  font-size: 3.6rem;
  padding-bottom: 1rem;
}

.breakpoint-phone .page-banner__heading,
.breakpoint-phone-small .page-banner__heading {
  font-size: 2.8rem;
  padding-bottom: 1rem;
}

.page-banner__heading a {
  color: currentColor;
  text-decoration: none;
}

.page-banner__summary {
  font-size: 2.2rem;
}

.breakpoint-desktop .page-banner__summary {
  font-size: 2rem;
}

.breakpoint-tablet-wide .page-banner__summary,
.breakpoint-tablet .page-banner__summary {
  font-size: 1.8rem;
}

.breakpoint-phone .page-banner__summary,
.breakpoint-phone-small .page-banner__summary {
  font-size: 1.6rem;
}

.page-banner__time {
  font-size: 1.8rem;
  padding-top: 2rem;
}

.breakpoint-tablet-wide .page-banner__time,
.breakpoint-tablet .page-banner__time {
  font-size: 1.5rem;
  padding-top: 1rem;
}

.breakpoint-phone .page-banner__time,
.breakpoint-phone-small .page-banner__time {
  font-size: 1.4rem;
  padding-top: 1rem;
}

.page-banner__presenters-anchor {
  margin-right: 0.5rem;
}

.page-banner__presenters-anchor:last-child {
  margin-right: 0rem;
}

.page-banner__share-icons {
  padding-top: 3rem;
}

.breakpoint-tablet-wide .page-banner__share-icons,
.breakpoint-tablet .page-banner__share-icons {
  padding-top: 2rem;
}

.breakpoint-phone .page-banner__share-icons,
.breakpoint-phone-small .page-banner__share-icons {
  padding-top: 2rem;
}

.page-banner__share-icon {
  float: left;
  padding-right: 2rem;
}

.breakpoint-tablet-wide .page-banner__share-icon,
.breakpoint-tablet .page-banner__share-icon,
.breakpoint-phone .page-banner__share-icon,
.breakpoint-phone-small .page-banner__share-icon {
  padding-right: 1rem;
}

.page-banner__share-anchor {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
  will-change: border-color;
}

.page-banner__share-anchor:hover,
.page-banner__share-anchor:focus {
  border-color: var(--color-white);
}

.color-from-image--dark .page-banner__share-anchor {
  border-color: rgba(255, 255, 255, 0.5);
}

.color-from-image--dark .page-banner__share-anchor:hover,
.color-from-image--dark .page-banner__share-anchor:focus {
  border-color: var(--color-white);
}

.color-from-image--light .page-banner__share-anchor {
  border-color: rgba(0, 0, 0, 0.5);
}

.color-from-image--light .page-banner__share-anchor:hover,
.color-from-image--light .page-banner__share-anchor:focus {
  border-color: var(--color-grey-darkest);
}

.breakpoint-tablet-wide .page-banner__share-anchor,
.breakpoint-tablet .page-banner__share-anchor,
.breakpoint-phone .page-banner__share-anchor,
.breakpoint-phone-small .page-banner__share-anchor {
  width: 3rem;
  height: 3rem;
}

.page-banner__share-anchor svg {
  -webkit-transform: scale(0.7);
      -ms-transform: scale(0.7);
          transform: scale(0.7);
  opacity: 0.9;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
  will-change: opacity;
}

.page-banner__share-anchor:hover svg,
.page-banner__share-anchor:focus svg {
  opacity: 1;
}

.breakpoint-tablet-wide .page-banner__share-anchor svg,
.breakpoint-tablet .page-banner__share-anchor svg,
.breakpoint-phone .page-banner__share-anchor svg,
.breakpoint-phone-small .page-banner__share-anchor svg {
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}

/**
 * Program nav
 */

.program-nav {
  padding-top: 3rem;
}

.breakpoint-widescreen .program-nav,
.breakpoint-desktop .program-nav {
  margin-top: -3rem;
  padding-left: 3rem;
  padding-top: 0;
}

.breakpoint-tablet-wide .program-nav,
.breakpoint-tablet .program-nav {
  padding-bottom: 2rem;
}

.breakpoint-phone .program-nav,
.breakpoint-phone-small .program-nav {
  padding-bottom: 1rem;
}

.program-nav__label {
  font-size: 1.2rem;
  display: block;
  padding-bottom: 1rem;
}

.program-nav__item {
  float: left;
  padding-right: 4rem;
}

.breakpoint-tablet-wide .program-nav__item,
.breakpoint-tablet .program-nav__item,
.breakpoint-phone .program-nav__item,
.breakpoint-phone-small .program-nav__item {
  padding-right: 2rem;
}

.program-nav__anchor {
  border-bottom: 4px solid var(--color-white);
  color: var(--color-grey);
  display: block;
  font-size: 2.4rem;
  text-decoration: none;
  font-weight: bold;
  padding-bottom: 0.2rem;
  -webkit-transition: border-color 150ms ease, color 150ms ease;
  transition: border-color 150ms ease, color 150ms ease;
}

.breakpoint-tablet-wide .program-nav__anchor,
.breakpoint-tablet .program-nav__anchor,
.breakpoint-phone .program-nav__anchor,
.breakpoint-phone-small .program-nav__anchor {
  border-bottom-width: 3px;
  font-size: 1.8rem;
}

.program-nav__anchor:hover,
.program-nav__anchor:focus,
.program-nav__anchor--active {
  border-color: var(--color-red);
  color: var(--color-grey-darkest);
}

/**
 * Program episode
 */

.program-episode {
  border-top: 1px solid var(--color-grey-lightest);
  padding-bottom: 6rem;
  padding-top: 6rem;
}

.breakpoint-phone .program-episode,
.breakpoint-phone-small .program-episode {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.program-episode:first-of-type {
  border-top: none;
  padding-top: 0;
}

.program-episode__meta {
  font-size: 1.5rem;
}

.program-episode__meta span {
  display: block;
}

.program-episode__meta--single-line span {
  display: inline-block;
}

.program-episode__meta--single-line span:first-of-type:after {
  content: ".";
  display: inline-block;
  font-weight: normal;
  padding-left: 1rem;
  padding-right: 1rem;
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}

.program-episode__content {
  padding-top: 2rem;
}

.program-episode__image {
  float: left;
  width: 35%;
}

.breakpoint-phone-small .program-episode__image {
  float: none;
  padding-bottom: 1rem;
  width: 100%;
}

.program-episode__details {
  float: left;
  padding-left: 3rem;
  width: 65%;
}

.breakpoint-phone-small .program-episode__details {
  float: none;
  padding-left: 0;
  width: 100%;
}

.program-episode__details:only-child {
  float: none;
  padding-left: calc(35% + 3rem);
  margin-top: -7rem;
  width: 100%;
}

.breakpoint-phone-small .program-episode__details:only-child {
  padding-left: 0;
  margin-top: 0;
}

.program-episode__anchor {
  display: block;
  text-decoration: none;
}

.program-episode__title {
  color: var(--color-grey-darkest);
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: 1.4rem;
}

.breakpoint-tablet-wide .program-episode__title,
.breakpoint-tablet .program-episode__title {
  font-size: 2rem;
  padding-bottom: 1rem;
}

.breakpoint-phone .program-episode__title,
.breakpoint-phone-small .program-episode__title {
  font-size: 1.8rem;
  padding-bottom: 1rem;
}

.program-episode__anchor:hover .program-episode__title,
.program-episode__anchor:focus .program-episode__title {
  color: var(--color-red);
  text-decoration: underline;
}

.program-episode__body {
  color: var(--color-grey-dark);
  font-size: 1.8rem;
}

.breakpoint-phone .program-episode__body,
.breakpoint-phone-small .program-episode__body {
  font-size: 1.6rem;
}

.program-episode__actions {
  padding-top: 2rem;
}

/**
 * Program about
 */

.program-about {
  margin-top: -6rem;
}

.breakpoint-tablet-wide .program-about,
.breakpoint-tablet .program-about,
.breakpoint-phone .program-about,
.breakpoint-phone-small .program-about {
  margin-top: 0;
}

.program-about__tags .tags-list {
  text-align: left;
}

/**
 * Program presenters
 */

.presenter {
}

.breakpoint-widescreen .presenter__program,
.breakpoint-desktop .presenter__program {
  margin-left: -10rem;
}

.breakpoint-widescreen .presenter__program .list-view__content,
.breakpoint-desktop .presenter__program .list-view__content {
  margin-left: 10rem;
}

.presenter__program .list-view__content {
  padding-right: 0;
  width: 100%;
}

.copy .presenter__program-title {
  font-size: 1.5rem;
  padding-bottom: 0;
}

.program-presenters {
}

.breakpoint-tablet-wide .program-presenters,
.breakpoint-tablet .program-presenters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.program-presenter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 2rem;
}

.breakpoint-tablet-wide .program-presenter,
.breakpoint-tablet .program-presenter {
  padding-right: 1rem;
  width: 33.333333%;
}

.breakpoint-phone .program-presenter,
.breakpoint-phone-small .program-presenter {
  padding-bottom: 1.4rem;
}

.program-presenter__image {
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 6rem;
  height: 6rem;
  max-width: 100%;
}

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

.program-presenter__anchor:hover,
.program-presenter__anchor:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.presenter__tags .tags-list {
  text-align: left;
}

/**
 * Program table
 */

.program-table {
  position: relative;
}

.breakpoint-phone .program-table:before,
.breakpoint-phone-small .program-table:before {
  background-image: -webkit-gradient(
    linear,
    right top, left top,
    from(rgba(230, 230, 230, 1)),
    to(rgba(230, 230, 230, 0))
  );
  background-image: linear-gradient(
    to left,
    rgba(230, 230, 230, 1),
    rgba(230, 230, 230, 0)
  );
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3rem;
}

.breakpoint-phone .program-table:after,
.breakpoint-phone-small .program-table:after {
  content: "\2193   Swipe to see more";
  color: var(--color-grey);
  display: block;
  font-size: 1.2rem;
  text-align: center;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  margin-top: -1rem;
  position: absolute;
  top: 50%;
  right: -7.5rem;
  width: 12rem;
}

.breakpoint-phone .program-table__inner,
.breakpoint-phone-small .program-table__inner {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.program-table__table {
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
}

.fonts-loaded .program-table__table {
  font-family: var(--font-alternate);
}

.breakpoint-phone .program-table,
.breakpoint-phone-small .program-table {
  font-size: 1.4rem;
}

.program-table td {
  padding: 2rem;
}

.breakpoint-phone .program-table td,
.breakpoint-phone-small .program-table td {
  padding: 1.4rem;
}

.program-table tr td:first-of-type {
  padding-left: 1rem;
}

.program-table tr td:last-of-type {
  padding-right: 1rem;
}

.program-table__day-row {
  border-top: 2px solid var(--color-grey-lightest);
}

.program-table__day-row:first-of-type {
  border-top: none;
}

.program-table__day-row td,
.breakpoint-phone .program-table__day-row td,
.breakpoint-phone-small .program-table__day-row td {
  padding-bottom: 1rem;
}

.program-table__day-row--single-entry td {
  padding-bottom: 2rem;
}

.breakpoint-phone .program-table__day-row--single-entry td,
.breakpoint-phone-small .program-table__day-row--single-entry td {
  padding-bottom: 1.4rem;
}

.program-table__same-day-row td,
.breakpoint-phone .program-table__same-day-row td,
.breakpoint-phone-small .program-table__same-day-row td {
  padding-top: 0;
}

.program-table__program {
  border-left: 1px solid var(--color-grey-lightest);
}

/**
 * Audio summary
 */

.audio-summary {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: 4px;
  height: 17.2rem;
  max-width: 77rem;
  position: relative;
  z-index: 5;
}

.audio-summary--episode-player {
  z-index: 6;
}

.breakpoint-phone .audio-summary,
.breakpoint-phone-small .audio-summary {
  border-radius: 4px;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.breakpoint-phone .audio-summary--placeholder,
.breakpoint-phone-small .audio-summary--placeholder {
  height: 17.2rem;
}

.audio-summary--no-border {
  border-color: transparent;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.audio-summary--with-image {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.audio-summary--with-tracks {
  height: auto;
}

.audio-summary__album-banner {
  background-color: var(--color-grey-light);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-left: -1px;
  margin-right: -1px;
  margin-top: -1px;
  height: 26rem;
  overflow: hidden;
  position: relative;
}

.audio-summary__album-banner--no-image {
  height: 18rem;
}

.audio-summary__album-banner-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  opacity: 0.1;
  max-width: 100%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

.audio-summary__album-banner-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.audio-summary__album-artwork {
  -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -11rem;
  margin-top: -11rem;
  width: 22rem;
  height: 22rem;
  z-index: 3;
}

.audio-summary__album-artwork--no-image {
  -webkit-box-shadow: none;
          box-shadow: none;
  background-image: url(/assets/main/assets/public/scalable-image/logo.178f0c74.svg);
  background-size: 111px 40px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  margin-left: -7rem;
  margin-top: -7rem;
  width: 14rem;
  height: 14rem;
}

.audio-summary__image-container {
  overflow: hidden;
  float: left;
  width: 17rem;
}

.breakpoint-phone .audio-summary__image-container,
.breakpoint-phone-small .audio-summary__image-container {
  display: none;
}

.audio-summary__image {
  max-width: 100%;
}

.audio-summary__content {
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.audio-summary--with-image .audio-summary__content {
  float: left;
  width: calc(100% - 17rem);
}

.breakpoint-phone .audio-summary__content,
.breakpoint-phone-small .audio-summary__content {
  display: block;
  padding-top: 2rem;
  padding-bottom: 2rem;
  height: auto;
  width: 100%;
}

.audio-summary--with-tracks .audio-summary__content {
  height: auto;
  padding-top: 4rem;
}

.breakpoint-phone .audio-summary--with-tracks .audio-summary__content,
.breakpoint-phone-small .audio-summary--with-tracks .audio-summary__content {
  padding-top: 3rem;
}

.audio-summary__play-progress {
  border-radius: 4px;
  background-color: #f5f5f5;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
}

.audio-summary--with-image .audio-summary__play-progress {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.breakpoint-phone .audio-summary__play-progress,
.breakpoint-phone-small .audio-summary__play-progress {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* Audio summary wrapper */

.audio-summary__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.breakpoint-phone .audio-summary__wrapper,
.breakpoint-phone-small .audio-summary__wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.audio-summary__content-inner {
  width: 100%;
  font-size: 1.8rem;
  padding-right: 3rem;
  padding-left: 3rem;
  position: relative;
}

.audio-summary--with-image .audio-summary__content-inner {
  max-width: 80%;
}

.audio-summary__buttons {
  padding-left: 3rem;
  position: relative;
}

.breakpoint-phone .audio-summary__buttons,
.breakpoint-phone-small .audio-summary__buttons {
  width: 100%;
  margin-bottom: 2rem;
}

.breakpoint-tablet-wide .audio-summary__content-inner,
.breakpoint-tablet .audio-summary__content-inner,
.breakpoint-phone .audio-summary__content-inner,
.breakpoint-phone-small .audio-summary__content-inner {
  padding-right: 3rem;
  font-size: 1.6rem;
}

.breakpoint-tablet .audio-summary--with-image .audio-summary__content-inner {
  max-width: 70%;
}

.breakpoint-phone .audio-summary--with-image .audio-summary__content-inner,
.breakpoint-phone-small
  .audio-summary--with-image
  .audio-summary__content-inner {
  max-width: 100%;
}

.audio-summary__button {
  display: block;
  text-align: left;
}

.breakpoint-phone .audio-summary__button,
.breakpoint-phone-small .audio-summary__button {
  float: left;
  margin-right: 1rem;
}

.audio-summary__play-button {
  margin-bottom: 1rem;
}

.breakpoint-phone .audio-summary__play-button,
.breakpoint-phone-small .audio-summary__play-button {
  left: 2rem;
}

.audio-summary__title {
}

.audio-summary__meta {
  padding-top: 0.4rem;
}

.audio-summary__meta em {
  display: inline-block;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.audio-summary__actions {
  font-size: 1.5rem;
  padding-top: 1rem;
}

.breakpoint-tablet-wide .audio-summary__actions,
.breakpoint-tablet .audio-summary__actions,
.breakpoint-phone .audio-summary__actions,
.breakpoint-phone-small .audio-summary__actions {
  font-size: 1.4rem;
  padding-top: 1.6rem;
}

.audio-summary__action {
  display: block;
  float: left;
  position: relative;
}

.breakpoint-phone .audio-summary__action,
.breakpoint-phone-small .audio-summary__action {
  float: none;
  padding-top: 0.3rem;
}

.audio-summary__action:hover > span,
.audio-summary__action:focus > span,
.audio-summary__action:hover .audio-summary__action-button,
.audio-summary__action:focus .audio-summary__action-button {
  color: var(--color-red);
  text-decoration: underline;
}

.audio-summary__action a {
  color: currentColor;
  text-decoration: none;
}

.audio-summary__actions em {
  display: block;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.breakpoint-phone .audio-summary__actions em,
.breakpoint-phone-small .audio-summary__actions em {
  display: none;
}

.audio-summary__action-button {
  display: block;
  text-align: left;
  position: relative;
}

.audio-summary__dropdown {
  display: none;
}

.audio-summary__action-button--active .audio-summary__dropdown {
  display: block;
  position: absolute;
}

.audio-summary__tracks,
.copy .audio-summary__tracks {
  border-top: 1px solid var(--color-grey-lightest);
  margin-left: 3rem;
  margin-right: 3rem;
  margin-top: 3rem;
  padding-left: 0;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.breakpoint-phone .audio-summary__tracks,
.breakpoint-phone-small .audio-summary__tracks {
  margin-top: 2rem;
  padding-top: 1rem;
}

.audio-summary__track {
  font-size: 1.5rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  position: relative;
}

.breakpoint-phone .audio-summary__track,
.breakpoint-phone-small .audio-summary__track {
  font-size: 1.4rem;
  padding-left: 0;
}

.audio-summary__track:last-of-type {
  padding-bottom: 0;
}

.audio-summary__track > div {
  margin-right: 1rem;
}

.audio-summary__track-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.breakpoint-phone .audio-summary__track-content {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.breakpoint-phone .audio-summary__track [data-view-playable] {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-right: 0;
  margin-left: 1rem;
}

.audio-summary__track-content--no-player {
  margin-left: 7.5rem;
}

.breakpoint-phone .audio-summary__track-content--no-player {
  margin-left: 0;
}

.audio-summary__playlist-embed-track {
  text-align: left;
}

.audio-summary__track
  a.audio-summary__track-title.audio-summary__playlist-embed-track-link {
  color: var(--color-grey-darker);
}

.audio-summary__track-title {
  color: var(--color-grey-darker);
  font-size: 1.5rem;
  padding-right: 1rem;
}

.audio-summary__track-artist {
  color: var(--color-grey);
  font-size: 1.5rem;
  float: right;
  padding-left: 1rem;
  text-align: right;
}

.breakpoint-phone .audio-summary__track-artist {
  float: none;
  text-align: left;
  padding-left: 0;
  display: block;
}

.audio-summary__track--search {
  padding-top: 0;
  padding-bottom: 2rem;
}

.audio-summary__track--footer-search {
  padding-top: 2rem;
}

.audio-summary__search-form {
  border-bottom: 1px solid var(--color-grey-lightest);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 4.1rem;
}

.audio-summary__search-input {
  border: none;
  color: var(--color-grey-darker);
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  height: 4rem;
  padding-left: 1rem;
  width: calc(100% - 4rem);
}

.fonts-loaded .audio-summary__search-input {
  font-family: var(--font-alternate);
}

.breakpoint-phone .audio-summary__search-input,
.breakpoint-phone-small .audio-summary__search-input {
  font-size: 1.4rem;
}

.audio-summary__inline-search-option {
  background-color: var(--color-white);
  border: none;
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  height: 3.8rem;
}

.fonts-loaded .audio-summary__inline-search-option {
  font-family: var(--font-alternate);
}

.audio-summary__search-input::-webkit-input-placeholder {
  color: var(--color-grey);
}

.audio-summary__search-input::-moz-placeholder {
  color: var(--color-grey);
}

.audio-summary__search-input:-ms-input-placeholder {
  color: var(--color-grey);
}

.audio-summary__search-input::-ms-input-placeholder {
  color: var(--color-grey);
}

.audio-summary__search-input::placeholder {
  color: var(--color-grey);
}

.audio-summary__search-button {
  width: 4rem;
  height: 4rem;
}

.audio-summary__search-button:hover svg path {
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.audio-summary__search-button:hover svg path,
.audio-summary__search-button:focus svg path {
  fill: var(--color-red);
}

.audio-summary__subscribe {
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#feb740));
  background-image: linear-gradient(to right, #fa709a, #feb740);
  border-radius: 4px;
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right: -1px;
  z-index: 3;
}

.audio-summary__subscribe-inner {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  text-align: center;
  width: 80%;
}

.breakpoint-tablet-wide .audio-summary__subscribe-inner,
.breakpoint-tablet .audio-summary__subscribe-inner,
.breakpoint-phone .audio-summary__subscribe-inner,
.breakpoint-phone-small .audio-summary__subscribe-inner {
  padding-left: 2rem;
  padding-right: 2rem;
  width: 100%;
}

.audio-summary__subscribe-heading {
  font-size: 2.2rem;
  padding-bottom: 0.6rem;
}

.breakpoint-tablet-wide .audio-summary__subscribe-heading,
.breakpoint-tablet .audio-summary__subscribe-heading {
  font-size: 2rem;
}

.breakpoint-phone .audio-summary__subscribe-heading,
.breakpoint-phone-small .audio-summary__subscribe-heading {
  font-size: 1.6rem;
}

.audio-summary__subscribe-heading .flag-label {
  margin-left: 0.6rem;
  -webkit-transform: translateY(-0.2rem);
      -ms-transform: translateY(-0.2rem);
          transform: translateY(-0.2rem);
}

.audio-summary__subscribe-action {
  font-size: 1.8rem;
}

.breakpoint-tablet-wide .audio-summary__subscribe-action,
.breakpoint-tablet .audio-summary__subscribe-action,
.breakpoint-phone .audio-summary__subscribe-action,
.breakpoint-phone-small .audio-summary__subscribe-action {
  font-size: 1.4rem;
}

.audio-summary__subscribe a {
  color: var(--color-white);
}

.audio-summary__subscribe-mask {
  background-image: linear-gradient(
    65deg,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.8)
  );
  clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: var(--color-white);
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  width: 8rem;
  z-index: 4;
}

.breakpoint-tablet-wide .audio-summary__subscribe-mask,
.breakpoint-tablet .audio-summary__subscribe-mask,
.breakpoint-phone .audio-summary__subscribe-mask,
.breakpoint-phone-small .audio-summary__subscribe-mask {
  display: none;
}

.audio-summary__subscribe-mask > .action {
  -webkit-transform: translateX(-0.6rem);
      -ms-transform: translateX(-0.6rem);
          transform: translateX(-0.6rem);
}

/**
 * Episode detail
 */

.episode-detail {
  margin-top: -8.6rem;
}

/**
 * Page nav
 */

.page-nav {
  font-size: 1.5rem;
}

.breakpoint-phone .page-nav,
.breakpoint-phone-small .page-nav {
  display: block;
}

.page-nav__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
}

.breakpoint-phone .page-nav__item,
.breakpoint-phone-small .page-nav__item {
  padding-bottom: 1rem;
  padding-top: 1rem;
  text-align: center;
}

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

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

.page-nav__anchor:hover,
.page-nav__anchor:focus {
  color: var(--color-red);
}

/**
 * Button
 */

.button {
  border: 1px solid #b4b4b4;
  border-radius: 4px;
  background-color: var(--color-white);
  display: inline-block;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 1.4rem 2.6rem;
  position: relative;
  -webkit-transition: border-color 150ms ease, background-color 150ms ease,
    color 150ms ease;
  transition: border-color 150ms ease, background-color 150ms ease,
    color 150ms ease;
}

.button--with-dropdown-active,
.button:hover,
.button:focus {
  background-color: var(--color-grey-lightest);
  border-color: var(--color-grey-lightest);
  color: var(--color-grey-darkest);
}

.button--highlight,
.button--highlight:hover,
.button--highlight:focus,
.button--highlight.button--with-dropdown-active {
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#feb740));
  background-image: linear-gradient(to right, #fa709a, #feb740);
  border-color: var(--color-white);
  color: var(--color-white);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.button--highlight svg {
  -webkit-filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
          filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}

.button--highlight svg path {
  fill: var(--color-white);
}

.button--smaller {
  font-size: 1.3rem;
  padding: 0.8rem 1.4rem;
}

.button--xsmall {
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
}

.button--pill {
  border-radius: 3rem;
  padding: 1.2rem 2rem;
}

.button--with-dropdown svg {
  display: inline-block;
  margin-left: 0.7rem;
}

.button--with-dropdown-active svg {
  -webkit-transform: rotate(180deg) translateY(2px);
      -ms-transform: rotate(180deg) translateY(2px);
          transform: rotate(180deg) translateY(2px);
}

.button span {
  display: inline-block;
  padding-left: 0.6rem;
}

/**
 * Dropdown
 */

.dropdown {
  display: inline-block;
  position: relative;
}

.breakpoint-phone .dropdown,
.breakpoint-phone-small .dropdown {
  display: block;
  text-align: center;
  width: 100%;
}

.dropdown__content {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-lightest);
  border-radius: 2px;
  -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 8rem;
  width: 30rem;
  opacity: 0;
  z-index: -1;
  -webkit-transform: translateY(-1rem);
      -ms-transform: translateY(-1rem);
          transform: translateY(-1rem);
  -webkit-transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    z-index 1ms linear 100ms,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    z-index 1ms linear 100ms,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    z-index 1ms linear 100ms;
  transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    z-index 1ms linear 100ms,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
}

.dropdown__content--active,
.button--with-dropdown-active + .dropdown__content,
.audio-summary__action-button--active + .dropdown__content,
.summary-inset__action-button--active + .dropdown__content {
  opacity: 1;
  z-index: 3;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    z-index 1ms linear,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    z-index 1ms linear,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
  transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear;
  transition: opacity 100ms cubic-bezier(0.335, 0.015, 0.25, 1),
    transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1), z-index 1ms linear,
    -webkit-transform 100ms cubic-bezier(0.335, 0.015, 0.25, 1);
}

.dropdown__content--audio-summary,
.dropdown__content--summary-inset {
  top: 4rem;
}

.button--smaller + .dropdown__content {
  top: 6rem;
}

.dropdown__content:after,
.dropdown__content:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.dropdown__content:after {
  border-color: transparent;
  border-bottom-color: var(--color-white);
  border-width: 16px;
  margin-left: -16px;
}

.dropdown__content:before {
  border-color: transparent;
  border-bottom-color: var(--color-grey-lightest);
  border-width: 18px;
  margin-left: -18px;
}

.dropdown__item {
  border-bottom: 1px solid var(--color-grey-lightest);
}

.dropdown__item:last-of-type {
  border-bottom: none;
}

.dropdown__item--message {
  background-color: #f8f8f8;
  display: block;
  padding: 1.6rem 2rem;
}

.dropdown__anchor {
  color: var(--color-grey-darker);
  display: block;
  padding: 1.6rem 2rem;
  text-decoration: none;
  width: 100%;
}

.dropdown__anchor:hover,
.dropdown__anchor:focus {
  color: var(--color-red);
}

.dropdown__share {
  padding: 1.8rem 2rem;
}

.breakpoint-phone .dropdown__share,
.breakpoint-phone-small .dropdown__share {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.breakpoint-phone .dropdown__share > span,
.breakpoint-phone-small .dropdown__share > span {
  display: none;
}

.dropdown__copy {
  padding: 0 2rem 1.8rem;
  position: relative;
}

.dropdown__copy--with-divider {
  border-bottom: 1px solid var(--color-grey-lightest);
}

.dropdown__copy-labels span {
  font-size: 1.4rem;
}

.dropdown__copy-trigger {
  font-size: 1.4rem;
  position: relative;
}

.dropdown__copy-trigger:hover,
.dropdown__copy-trigger:focus {
  text-decoration: underline;
}

.dropdown__textarea {
  background-color: #f8f8f8;
  border: 1px solid var(--color-grey-lightest);
  border-radius: 4px;
  color: var(--color-grey);
  width: 100%;
  height: 8rem;
  font-size: 1.5rem;
  padding: 1rem;
  resize: none;
}

.dropdown__textarea--small {
  height: 4rem;
}

.breakpoint-phone .dropdown__textarea,
.breakpoint-phone-small .dropdown__textarea {
  font-size: 1.3rem;
}

.dropdown__copy-button {
  font-size: 1.4rem;
  color: var(--color-red);
  padding-top: 1rem;
  padding-bottom: 0.4rem;
  text-align: left;
  width: 100%;
}

.dropdown__copy-end-at {
  margin-bottom: 2rem;
}

.dropdown__copy-checkbox {
  border: 1px solid var(--color-grey-lightest);
}

.dropdown__copy-start-at label {
  cursor: pointer;
  display: inline-block;
}

.dropdown__copy-start-at-time,
.dropdown__copy-end-at-time {
  background-color: var(--color-white);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--color-grey-lightest);
  color: var(--color-grey-dark);
  font-size: 1.3rem;
  text-align: right;
  width: 8rem;
}

.dropdown__copy-start-at-time[disabled],
.dropdown__copy-end-at-time[disabled] {
  opacity: 0.5;
}

/**
 * Alignment modifications
 */

/**
 * Left
 */

.dropdown__content--left-aligned,
.breakpoint-tablet-wide .dropdown__content--tablet-left-aligned,
.breakpoint-tablet .dropdown__content--tablet-left-aligned,
.breakpoint-phone .dropdown__content--phone-left-aligned,
.breakpoint-phone-small .dropdown__content--phone-left-aligned {
  left: 0;
}

.dropdown__content--left-aligned:before,
.breakpoint-tablet-wide .dropdown__content--tablet-left-aligned:before,
.breakpoint-tablet .dropdown__content--tablet-left-aligned:before,
.breakpoint-phone .dropdown__content--phone-left-aligned:before,
.breakpoint-phone-small .dropdown__content--phone-left-aligned:before {
  left: 30px;
}

.dropdown__content--left-aligned:after,
.breakpoint-tablet-wide .dropdown__content--tablet-left-aligned:after,
.breakpoint-tablet .dropdown__content--tablet-left-aligned:after,
.breakpoint-phone .dropdown__content--phone-left-aligned:after,
.breakpoint-phone-small .dropdown__content--phone-left-aligned:after {
  left: 30px;
}

/**
 * Center
 */

.dropdown__content--center-aligned,
.breakpoint-tablet-wide .dropdown__content--tablet-center-aligned,
.breakpoint-tablet .dropdown__content--tablet-center-aligned,
.breakpoint-phone .dropdown__content--phone-center-aligned,
.breakpoint-phone-small .dropdown__content--phone-center-aligned {
  left: 50%;
  margin-left: -15rem;
}

.dropdown__content--center-aligned:before,
.breakpoint-tablet-wide .dropdown__content--tablet-center-aligned:before,
.breakpoint-tablet .dropdown__content--tablet-center-aligned:before,
.breakpoint-phone .dropdown__content--phone-center-aligned:before,
.breakpoint-phone-small .dropdown__content--phone-center-aligned:before {
  left: 50%;
  margin-left: -22px;
}

.dropdown__content--center-aligned:after,
.breakpoint-tablet-wide .dropdown__content--tablet-center-aligned:after,
.breakpoint-tablet .dropdown__content--tablet-center-aligned:after,
.breakpoint-phone .dropdown__content--phone-center-aligned:after,
.breakpoint-phone-small .dropdown__content--phone-center-aligned:after {
  left: 50%;
  margin-left: -20px;
}

/**
 * Right
 */

.dropdown__content--right-aligned,
.breakpoint-tablet-wide .dropdown__content--tablet-right-aligned,
.breakpoint-tablet .dropdown__content--tablet-right-aligned,
.breakpoint-phone .dropdown__content--phone-right-aligned,
.breakpoint-phone-small .dropdown__content--phone-right-aligned {
  left: auto;
  right: 0;
}

.dropdown__content--right-aligned:before,
.breakpoint-tablet-wide .dropdown__content--tablet-right-aligned:before,
.breakpoint-tablet .dropdown__content--tablet-right-aligned:before,
.breakpoint-phone .dropdown__content--phone-right-aligned:before,
.breakpoint-phone-small .dropdown__content--phone-right-aligned:before {
  left: auto;
  right: 28px;
}

.dropdown__content--right-aligned:after,
.breakpoint-tablet-wide .dropdown__content--tablet-right-aligned:after,
.breakpoint-tablet .dropdown__content--tablet-right-aligned:after,
.breakpoint-phone .dropdown__content--phone-right-aligned:after,
.breakpoint-phone-small .dropdown__content--phone-right-aligned:after {
  left: auto;
  right: 30px;
}

/*
 * Copy to clipboard
 */

.copy-tooltip {
  background-color: var(--color-grey-darkest);
  border-radius: 4px;
  color: var(--color-white);
  display: block;
  font-size: 1.3rem;
  font-weight: bold;
  margin-left: -4rem;
  padding: 0.8rem 0.4rem 0.7rem;
  position: absolute;
  pointer-events: none;
  top: -3.2rem;
  left: 50%;
  opacity: 0;
  -webkit-transform: translateY(0.5rem);
      -ms-transform: translateY(0.5rem);
          transform: translateY(0.5rem);
  text-align: center;
  -webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
  transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
  width: 8rem;
  z-index: 20;
}

.copy-tooltip:after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-grey-darkest);
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  margin-left: -3px;
  width: 0;
  height: 0;
}

.copy-tooltip--active {
  opacity: 0.9;
  -webkit-transform: translate(0);
      -ms-transform: translate(0);
          transform: translate(0);
}

/**
 * Contextual nav
 */

.contextual-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.breakpoint-tablet-wide .contextual-nav,
.breakpoint-tablet .contextual-nav,
.breakpoint-phone-small .contextual-nav,
.breakpoint-phone .contextual-nav {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.contextual-nav__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.breakpoint-tablet-wide .contextual-nav__item,
.breakpoint-tablet .contextual-nav__item,
.breakpoint-phone-small .contextual-nav__item,
.breakpoint-phone .contextual-nav__item {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  padding-bottom: 3rem;
  width: 100%;
}

.breakpoint-tablet-wide .contextual-nav__item:last-of-type,
.breakpoint-tablet .contextual-nav__item:last-of-type,
.breakpoint-phone-small .contextual-nav__item:last-of-type,
.breakpoint-phone .contextual-nav__item:last-of-type {
  padding-bottom: 0;
}

.contextual-nav__tabs {
}

.contextual-nav__tab {
  float: left;
  padding-left: 2rem;
  padding-right: 2rem;
}

.contextual-nav__anchor {
  color: var(--color-grey);
  font-size: 1.5rem;
  text-decoration: none;
}

.contextual-nav__anchor--active,
.contextual-nav__anchor:hover,
.contextual-nav__anchor:focus {
  color: var(--color-grey-darker);
}

/**
 * Inline search
 */

.inline-search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 24rem;
}

.inline-search--full-width {
  width: 100%;
}

.inline-search__input {
  border-top: none;
  border-bottom: 1px solid var(--color-grey-light);
  border-left: none;
  border-right: none;
  background-color: var(--color-white);
  color: var(--color-grey-darker);
  font-size: 1.5rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
  width: 100%;
}

.inline-search__input:focus {
  border-color: var(--color-grey-dark);
}

.inline-search__input::-webkit-input-placeholder {
  color: var(--color-grey-darker);
}

.inline-search__input::-moz-placeholder {
  color: var(--color-grey-darker);
}

.inline-search__input:-ms-input-placeholder {
  color: var(--color-grey-darker);
}

.inline-search__input::-ms-input-placeholder {
  color: var(--color-grey-darker);
}

.inline-search__input::placeholder {
  color: var(--color-grey-darker);
}

.inline-search--larger .inline-search__input {
  font-size: 1.8rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

.inline-search__button {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 4rem;
}

.inline-search--larger .inline-search__button {
  width: 6rem;
}

.inline-search__button svg {
  width: 1.6rem;
  height: 1.6rem;
}

.inline-search--larger .inline-search__button svg {
  width: 2rem;
  height: 2rem;
}

.inline-search__button path {
  fill: var(--color-grey);
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.inline-search__input:focus + .inline-search__button path {
  fill: var(--color-red);
}

/**
 * Pagination
 */

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pagination__item {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.pagination__item--divider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.pagination__anchor {
  border: 1px solid var(--color-white);
  border-radius: 50%;
  color: var(--color-grey-dark);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.5rem;
  width: 5rem;
  height: 5rem;
  text-decoration: none;
}

.breakpoint-phone .pagination__anchor,
.breakpoint-phone-small .pagination__anchor {
  font-size: 1.3rem;
  width: 4rem;
  height: 4rem;
}

.pagination__anchor:hover,
.pagination__anchor:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.pagination__anchor--current,
.pagination__anchor--current:hover,
.pagination__anchor--current:focus {
  border-color: var(--color-grey-lightest);
  font-weight: bold;
  color: var(--color-grey-dark);
  text-decoration: none;
}

/**
 * Page footer
 */

.page-footer {
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding-top: 4rem;
  margin-top: 8rem;
}

.breakpoint-phone .page-footer,
.breakpoint-phone-small .page-footer {
  display: block;
}

.page-footer:before {
  content: "";
  background-color: var(--color-grey-lightest);
  position: absolute;
  top: -4rem;
  left: 50%;
  height: 6rem;
  width: 1px;
}

.page-footer__item {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.page-footer__item:first-of-type {
  text-align: right;
}

.page-footer__item:last-of-type {
  text-align: left;
}

.breakpoint-phone .page-footer__item,
.breakpoint-phone-small .page-footer__item {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.breakpoint-phone .page-footer__item:empty,
.breakpoint-phone-small .page-footer__item:empty {
  display: none;
}

/**
 * Share icons
 */

.share-icons {
}

.breakpoint-phone .share-icons,
.breakpoint-phone-small .share-icons {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.breakpoint-phone .share-icons--no-border,
.breakpoint-phone-small .share-icons--no-border {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.share-icons__icon {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.share-icons--no-border .share-icons__icon:first-of-type {
  padding-left: 0;
}

.share-icons__icon--label {
  display: block;
  text-align: right;
  padding-top: 1.4rem;
  min-width: 9rem;
  width: 100%;
}

.subscriber-giveaway__inset .share-icons__icon--label,
.feature-album__tracks .share-icons__icon--label {
  padding-top: 0;
}

.breakpoint-phone .share-icons__icon--label {
  text-align: center;
  padding-top: 0;
  padding-bottom: 1rem;
}

.share-icons--no-border .share-icons__icon--label {
  text-align: left;
  padding-top: 0;
  min-width: 0;
}

.breakpoint-phone .share-icons--no-border .share-icons__icon--label {
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
}

.share-icons__icon--label span {
  display: block;
  font-size: 1.4rem;
  -webkit-transform: translateY(1px);
      -ms-transform: translateY(1px);
          transform: translateY(1px);
}

.share-icons a {
  border-radius: 50%;
  border: 1px solid var(--color-grey-lightest);
  width: 4.6rem;
  height: 4.6rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}

.share-icons__icon--sm {
  padding-right: 0;
}

.share-icons__icon--sm a {
  width: 3rem;
  height: 3rem;
}

.share-icons a:hover,
.share-icons a:focus {
  border-color: var(--color-red);
}

.share-icons--no-border a {
  border: none;
  width: 2rem;
  height: 2rem;
}

.share-icons a svg path {
  fill: var(--color-grey);
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

/**
 * Page sidebar
 */

.page-sidebar {
}

.page-sidebar__divider {
  background-color: var(--color-grey-lightest);
  display: block;
  margin: 3rem auto;
  width: 1px;
  height: 6rem;
}

/**
 * News item
 */

.news-item {
}

.news-item__header {
}

.breakpoint-phone .news-item__header,
.breakpoint-phone-small .news-item__header {
  padding-bottom: 0;
}

.news-item__title {
  line-height: 1.2;
  padding-bottom: 2.2rem;
}

.news-item__date {
  display: block;
  font-size: 1.4rem;
}

.breakpoint-phone .news-item__date,
.breakpoint-phone-small .news-item__date {
  font-size: 1.3rem;
}

.news-item__divider {
  background-color: var(--color-grey-light);
  display: block;
  height: 1px;
  width: 4rem;
  margin-left: 2rem;
  margin-right: 2rem;
}

.news-item__meta {
}

/**
 * Copy formatting
 */

.copy-formatting p {
  padding-bottom: 2rem;
}

.copy-formatting p:last-of-type {
  padding-bottom: 0;
}

.copy-formatting strong {
  font-weight: bold;
}

.copy-formatting em {
  font-style: italic;
}

/**
 * Figure
 */

.figure {
}

.breakpoint-phone-small .figure {
  margin-left: -3rem;
  margin-right: -3rem;
  width: calc(100% + 6rem);
}

.figure--embed {
  margin-top: 1rem;
  margin-bottom: 3rem;
}

.breakpoint-phone .figure--embed,
.breakpoint-phone-small .figure--embed {
  margin-top: 0;
}

.figure--center-aligned {
  margin-left: -8rem;
  margin-right: -8rem;
}

.breakpoint-tablet-wide .figure--center-aligned,
.breakpoint-tablet .figure--center-aligned,
.breakpoint-phone .figure--center-aligned,
.breakpoint-phone-small .figure--center-aligned {
  margin-left: -3rem;
  margin-right: -3rem;
}

.copy--no-overflow-left .figure--center-aligned,
.copy--no-overflow-right .figure--center-aligned,
.copy--no-overflow .figure--center-aligned {
  margin-left: 0;
  margin-right: 0;
}

.figure--left-aligned {
  float: left;
  margin-left: -32rem;
  margin-right: 4rem;
  margin-bottom: 4rem;
  width: 42rem;
}

.breakpoint-w-min-1700 .figure--left-aligned {
  margin-left: -46rem;
  width: 50rem;
}

.breakpoint-w-min-1900 .figure--left-aligned {
  margin-left: -56rem;
  width: 52rem;
}

.breakpoint-desktop .figure--left-aligned {
  margin-left: -25rem;
  width: 40rem;
}

.breakpoint-tablet-wide .figure--left-aligned,
.breakpoint-tablet .figure--left-aligned {
  margin-left: 0;
  width: 30rem;
}

.copy--no-overflow-left .figure--left-aligned,
.copy--no-overflow .figure--left-aligned {
  margin-left: 0;
  max-width: 50%;
}

.breakpoint-phone .figure--left-aligned {
  margin-left: 0;
  width: 20rem;
}

.breakpoint-phone-small .figure--left-aligned {
  float: none;
  margin-left: -3rem;
  margin-right: -3rem;
  margin-bottom: 3rem;
  width: calc(100% + 6rem);
}

.figure--right-aligned {
  float: right;
  margin-left: 4rem;
  margin-bottom: 4rem;
  margin-right: -32rem;
  width: 42rem;
}

.breakpoint-w-min-1700 .figure--right-aligned {
  margin-right: -46rem;
  width: 50rem;
}

.breakpoint-w-min-1900 .figure--right-aligned {
  margin-right: -56rem;
  width: 52rem;
}

.breakpoint-desktop .figure--right-aligned {
  margin-right: -25rem;
  width: 40rem;
}

.copy--no-overflow-right .figure--right-aligned,
.copy--no-overflow .figure--right-aligned {
  margin-right: 0;
  max-width: 50%;
}

.breakpoint-tablet-wide .figure--right-aligned,
.breakpoint-tablet .figure--right-aligned {
  margin-right: 0;
  width: 30rem;
}

.breakpoint-phone .figure--right-aligned {
  margin-right: 0;
  width: 20rem;
}

.breakpoint-phone-small .figure--right-aligned {
  float: none;
  margin-left: -3rem;
  margin-right: -3rem;
  margin-bottom: 3rem;
  width: calc(100% + 6rem);
}

.figure img {
  display: block;
  max-width: 100%;
  width: 100%;
}

.figure__caption {
  padding-top: 1.4rem;
  font-family: var(--fonts-alternate-fallback);
}

.fonts-loaded .figure__caption {
  font-family: var(--font-alternate);
}

.breakpoint-phone-small .figure__caption {
  padding-left: 3rem;
  padding-right: 3rem;
}

.figure__caption p,
.copy .figure__caption p,
.copy-shallow .figure__caption p {
  color: var(--color-grey);
  font-size: 1.4rem;
  line-height: 1.5;
  padding-bottom: 0.6rem;
}

.breakpoint-phone .figure__caption p,
.breakpoint-phone .copy .figure__caption p,
.breakpoint-phone .copy-shallow .figure__caption p,
.breakpoint-phone-small .figure__caption p,
.breakpoint-phone-small .copy .figure__caption p,
.breakpoint-phone-small .copy-shallow .figure__caption p {
  font-size: 1.3rem;
}

.figure__caption p:last-child,
.copy .figure__caption p:last-child,
.copy-shallow .figure__caption p:last-child {
  margin-bottom: -0.5rem;
}

.figure__attribution {
  padding-top: 1.4rem;
  font-family: var(--font-alternate-fallback);
}

.fonts-loaded .figure__attribution {
  font-family: var(--font-alternate);
}

.breakpoint-phone-small .figure__attribution {
  padding-left: 3rem;
  padding-right: 3rem;
}

.figure__caption + .figure__attribution {
  padding-top: 0.6rem;
}

.figure__attribution p,
.copy .figure__attribution p,
.copy-shallow .figure__attribution p {
  color: var(--color-grey);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  padding-bottom: 0.6rem;
}

.figure__attribution p:last-child,
.copy .figure__attribution p:last-child,
.copy-shallow .figure__attribution p:last-child {
  margin-bottom: -0.5rem;
}

.figure--bandcamp iframe {
  display: block;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * Meta label
 */

.meta-label {
  border-bottom: 2px solid var(--color-red);
  display: inline-block;
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
}

/**
 * Sign in
 */

.sign-in {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.breakpoint-tablet-wide .sign-in,
.breakpoint-tablet .sign-in {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.breakpoint-phone .sign-in,
.breakpoint-phone-small .sign-in {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/**
 * Form card
 */

.form-card {
  background-color: var(--color-white);
  border-radius: 8px;
  -webkit-box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
  padding: 3rem;
}

.form-card--flat {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.form-card--basic {
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: none;
  background-color: transparent;
  padding: 0;
}

.form-card--animate-in {
  -webkit-animation: grow-and-reveal 400ms cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
          animation: grow-and-reveal 400ms cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
}

.breakpoint-phone .form-card--animate-in,
.breakpoint-phone-small .form-card--animate-in {
  -webkit-animation: none;
          animation: none;
  padding: 2.4rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

/**
 * Headings and text
 */

.form-card__heading {
  color: var(--color-grey-darkest);
  font-weight: bold;
  font-size: 3rem;
  text-align: center;
  line-height: 1.1;
  padding-bottom: 3.2rem;
}

.breakpoint-phone .form-card__heading,
.breakpoint-phone-small .form-card__heading {
  font-size: 2.8rem;
}

.form-card__subheading {
  color: var(--color-grey-darkest);
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.1;
  padding-bottom: 3rem;
}

.breakpoint-phone .form-card__subheading,
.breakpoint-phone-small .form-card__subheading {
  font-size: 2.2rem;
}

.form-card__text {
  color: var(--color-grey-darkest);
  font-size: 1.5rem;
  margin-top: -1rem;
  padding-bottom: 3rem;
  line-height: 1.5;
}

/**
 * Divider
 */

.form-card__divider {
  display: block;
  background-color: var(--color-grey-lightest);
  height: 1px;
}

/**
 * Field
 */

.form-card__field {
  padding-bottom: 2.6rem;
}

.form-card__field--tight {
  margin-top: -1rem;
}

.form-card__field--readonly {
  pointer-events: none;
}

.form-card__field--readonly > input {
  background-color: #eee;
}

.form-card__field--readonly > input:focus {
  border: 1px solid #d4d4d4;
}

/**
 * Label
 */

.form-card__label {
  color: var(--color-grey-darkest);
  display: block;
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  padding-bottom: 0.8rem;
}

label.form-card__label {
  cursor: pointer;
}

.fonts-loaded .form-card__label {
  font-family: var(--font-alternate);
}

.form-card__field--errors .form-card__label {
  color: #cf0607;
  font-weight: bold;
}

/**
 * Required
 */

.form-card__required {
  color: #cf0607;
}

/**
 * Text input
 */

.form-card__input-prepend {
  position: relative;
}

.form-card__input-prepend span {
  color: var(--color-grey);
  font-size: 1.5rem;
  position: absolute;
  top: 1.3rem;
  left: 1.6rem;
}

.form-card__input {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-lightest);
  border-radius: 4px;
  color: var(--color-grey);
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  padding: 1.4rem 1.6rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
  width: 100%;
}

.fonts-loaded .form-card__input {
  font-family: var(--font-alternate);
}

.form-card__field--errors .form-card__input {
  border-color: #cf0607;
}

.form-card__input-prepend .form-card__input {
  padding-left: 2.4rem;
}

.form-card__input + .form-card__input {
  margin-top: 0.6rem;
}

.form-card__input::-webkit-input-placeholder {
  color: var(--color-grey-light);
}

.form-card__input::-moz-placeholder {
  color: var(--color-grey-light);
}

.form-card__input:-ms-input-placeholder {
  color: var(--color-grey-light);
}

.form-card__input::-ms-input-placeholder {
  color: var(--color-grey-light);
}

.form-card__input::placeholder {
  color: var(--color-grey-light);
}

.form-card__input:focus {
  border-color: var(--color-grey-dark);
}

.form-card__input:disabled {
  color: var(--color-grey-light);
}

/**
 * Error
 */

.form-card__error {
  color: #cf0607;
  font-size: 1.3rem;
  padding-top: 0.6rem;
}

.form-card__error--highlight {
  background-color: #ffdcd9;
  border-radius: 4px;
  color: #cf0607;
  padding: 2rem;
  font-size: 1.5rem;
}

.form-card #card-error-message p {
  background-color: #ffdcd9;
  border-radius: 4px;
  color: #cf0607;
  padding: 1rem 2rem;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}

/**
 * Hint
 */

.form-card__hint {
  color: var(--color-grey);
  display: block;
  font-size: 1.3rem;
  padding-top: 0.6rem;
}

/**
 * Button
 */

.form-card__button {
  background-color: var(--color-grey-dark);
  border-radius: 4px;
  color: var(--color-white);
  display: block; /* make this work for both `a` and `button` elements */
  font-size: 1.5rem;
  font-family: var(--font-alternate-fallback);
  margin-top: 1rem;
  padding: 1.2rem 6rem 1.2rem 3rem;
  position: relative;
  text-align: left;
  text-decoration: none;
  -webkit-transition: background-color 150ms ease, -webkit-transform 150ms ease;
  transition: background-color 150ms ease, -webkit-transform 150ms ease;
  transition: background-color 150ms ease, transform 150ms ease;
  transition: background-color 150ms ease, transform 150ms ease, -webkit-transform 150ms ease;
  width: 100%;
}

.fonts-loaded .form-card__button {
  font-family: var(--font-alternate);
}

.form-card__button:hover,
.form-card__button:focus {
  background-color: var(--color-grey-darkest);
  -webkit-transform: translateX(-0.2rem);
      -ms-transform: translateX(-0.2rem);
          transform: translateX(-0.2rem);
}

.form-card__button--half-width {
  width: 50%;
}

.breakpoint-phone .form-card__button--half-width,
.breakpoint-phone-small .form-card__button--half-width {
  width: 100%;
}

.form-card__button svg {
  position: absolute;
  top: 50%;
  right: 3rem;
  margin-top: -5px;
}

.form-card__button:hover svg,
.form-card__button:focus svg {
  -webkit-animation: arrow-left-to-right 300ms cubic-bezier(0.71, 0.17, 0.68, 0.29)
    forwards;
          animation: arrow-left-to-right 300ms cubic-bezier(0.71, 0.17, 0.68, 0.29)
    forwards;
}

.form-card__button svg path {
  fill: var(--color-white);
}

/**
 * Checkbox
 */

.form-card__checkbox {
  height: 1.5rem;
  width: 1.5rem;
  -webkit-transform: translateY(-0.1rem);
      -ms-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
}

.form-card__checkbox-label {
  color: var(--color-grey-darkest);
  cursor: pointer;
  font-size: 1.5rem;
  padding-left: 0.4rem;
  width: calc(100% - 2rem);
}

.form-card__checkbox-hint {
  color: var(--color-grey);
  font-size: 1.3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0.6rem;
}

/**
 * Textarea
 */

.form-card__textarea-wrapper {
  position: relative;
  padding-bottom: 3.6rem;
  overflow: hidden;
  z-index: 1;
}

.form-card__textarea-wrapper:before {
  content: "";
  background-color: #ff59c6;
  position: absolute;
  left: 1px;
  bottom: -1px;
  right: 1px;
  height: var(--percentage);
  opacity: 0.08;
  z-index: -1;
}

.form-card__textarea {
  background-color: transparent;
  border-top: 1px solid var(--color-grey-lightest);
  border-left: 1px solid var(--color-grey-lightest);
  border-right: 1px solid var(--color-grey-lightest);
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: var(--color-grey);
  line-height: 1.3;
  height: 15rem;
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  padding: 1.5rem;
  resize: none;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
  width: 100%;
}

.fonts-loaded .form-card__textarea {
  font-family: var(--font-alternate);
}

.form-card__field--errors .form-card__textarea {
  border-color: #cf0607;
}

.form-card__textarea:focus {
  border-color: var(--color-grey-dark);
  outline: none;
}

.form-card__textarea-counter {
  border-left: 1px solid var(--color-grey-lightest);
  border-right: 1px solid var(--color-grey-lightest);
  border-bottom: 1px solid var(--color-grey-lightest);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: var(--color-grey);
  font-size: 1.3rem;
  position: absolute;
  display: block;
  height: 3.6rem;
  bottom: 0;
  right: 0;
  left: 0;
  padding-top: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
  z-index: 2;
}

.form-card__textarea:focus + .form-card__textarea-counter {
  border-color: var(--color-grey-dark);
}

.form-card__textarea--uncounted {
  border-bottom: 1px solid var(--color-grey-lightest);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/**
 * Select
 */

.form-card__select {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-lightest);
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  height: 4.8rem;
  width: 100%;
}

.fonts-loaded .form-card__select {
  font-family: var(--font-alternate);
}

.form-card__field--errors .form-card__textarea {
  border-color: #cf0607;
}

/**
 * Grouped fields
 */

.form-card__group {
  margin-right: -2rem;
}

.breakpoint-phone .form-card__group,
.breakpoint-phone-small .form-card__group {
  margin-right: 0;
}

.form-card__group--2 .form-card__field {
  float: left;
  margin-right: 2rem;
  width: calc(50% - 2rem);
}

.breakpoint-phone .form-card__group--2 .form-card__field,
.breakpoint-phone-small .form-card__group--2 .form-card__field {
  float: none;
  margin-right: 0;
  width: 100%;
}

.breakpoint-phone .form-card__group--2 .form-card__field:not(:first-of-type),
.breakpoint-phone-small
  .form-card__group--2
  .form-card__field:not(:first-of-type) {
  margin-top: -1rem;
}

/**
 * Table
 */

.form-card__table {
  color: var(--color-grey-darkest);
  font-size: 1.5rem;
  width: 100%;
}

.form-card__table td {
  width: 50%;
  padding-bottom: 1.2rem;
}

.breakpoint-phone-small .form-card__table td {
  display: block;
  padding-right: 0;
  padding-bottom: 0;
  width: 100%;
}

.form-card__table td:first-child {
  padding-right: 2rem;
}

.breakpoint-phone-small .form-card__table td:last-child {
  padding-bottom: 2rem;
}

/**
 * Review
 */

.form-card__review {
}

.form-card__review-heading {
  color: var(--color-grey);
  font-weight: bold;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  position: relative;
}

.form-card__review-heading:after {
  content: "";
  background-color: var(--color-grey-lightest);
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

.form-card__review-heading span {
  background-color: var(--color-white);
  display: inline-block;
  position: relative;
  padding-right: 2rem;
  z-index: 2;
}

.form-card__review-row {
  display: block;
  font-size: 1.5rem;
  padding-bottom: 0.8rem;
}

.form-card__review-row--error {
  color: #cf0607;
  font-style: italic;
}

.form-card__review-label {
  width: 15rem;
}

.breakpoint-tablet .form-card__review-label,
.breakpoint-phone .form-card__review-label,
.breakpoint-phone-small .form-card__review-label {
  display: block;
  width: auto;
}

.form-card__review-detail {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.breakpoint-tablet .form-card__review-detail,
.breakpoint-phone .form-card__review-detail,
.breakpoint-phone-small .form-card__review-detail {
  padding-top: 0.2rem;
}

.form-card__review-actions {
  background-color: var(--color-white);
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 2rem;
  z-index: 2;
}

.breakpoint-tablet .form-card__review-actions,
.breakpoint-phone .form-card__review-actions,
.breakpoint-phone-small .form-card__review-actions {
  position: static;
  padding-left: 0;
  padding-top: 2rem;
}

.form-card__review-action {
  color: var(--color-red);
  display: inline-block;
  font-weight: bold;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  margin-right: 1rem;
}

.form-card__review-action:after {
  color: var(--color-grey);
  content: "\2022";
  padding-left: 1rem;
}

.form-card__review-action:last-of-type {
  margin-right: 0;
}

.form-card__review-action:last-of-type:after {
  display: none;
}

/**
 * Card
 */

.form-card__card {
  border: 1px solid var(--color-grey-lightest);
  border-radius: 4px;
  padding: 2rem;
}

/**
 * Calendar
 */

.form-card__calendar {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-lightest);
  border-radius: 2px;
  -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
}

/**
 * Processing
 */

.form-card__processing {
  font-size: 1.6rem;
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.form-card__processing-icons {
  -webkit-animation: bounce 450ms cubic-bezier(0.335, 0.015, 0.25, 1) infinite alternate;
          animation: bounce 450ms cubic-bezier(0.335, 0.015, 0.25, 1) infinite alternate;
  position: relative;
  display: block;
  font-size: 8rem;
}

.form-card__processing-icons em {
  position: relative;
  z-index: 2;
}

.form-card__processing-icons span {
  font-size: 4rem;
  position: absolute;
  top: 0.4rem;
  left: 50%;
  -webkit-transform: rotate(-20deg) translateX(1rem);
      -ms-transform: rotate(-20deg) translateX(1rem);
          transform: rotate(-20deg) translateX(1rem);
  z-index: 1;
}

.form-card__processing-message {
  padding-top: 2rem;
  font-size: 1.6rem;
}

.form-card_auto-donation--hidden {
  display: none;
}

/**
 * Hidden classes for toggles
 */

.form-card_auto-donation--hidden {
  display: none;
}

.form-card__state input {
  display: none;
}

.form-card__state--select-toggle select {
  display: none;
}

.form-card__state--select-toggle input {
  display: block;
}

.form-card__country--hidden {
  display: none;
}

.form-card__status-message {
  color: #cf0607;
  font-size: 1.3rem;
  padding-top: 0.6rem;
}

.form-card__status-invalid .form-card__actions,
.form-card__status-missing .form-card__actions {
  /*border-color: #cf0607;*/
  display: none;
}

/**
 * Animations
 */

@-webkit-keyframes grow-and-reveal {
  from {
    opacity: 0.4;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes grow-and-reveal {
  from {
    opacity: 0.4;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes arrow-left-to-right {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-0.6rem);
            transform: translateX(-0.6rem);
  }
}

@keyframes arrow-left-to-right {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-0.6rem);
            transform: translateX(-0.6rem);
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(0.7rem);
            transform: translateY(0.7rem);
  }
}

@keyframes bounce {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(0.7rem);
            transform: translateY(0.7rem);
  }
}

/**
 * Subscribe
 */

.subscribe {
  background-image: url(/assets/main/assets/public/subscribe/bg-blur.e2ae5d28.png),
    -webkit-gradient(linear, left top, right top, from(#dd3b94), to(#436d94));
  background-image: url(/assets/main/assets/public/subscribe/bg-blur.e2ae5d28.png),
    linear-gradient(to right, #dd3b94, #436d94);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.breakpoint-tablet-wide .subscribe,
.breakpoint-tablet .subscribe {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.breakpoint-phone .subscribe,
.breakpoint-phone-small .subscribe {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.subscribe__form-card {
  margin-top: -5rem;
}

.breakpoint-phone .subscribe__form-card,
.breakpoint-phone-small .subscribe__form-card {
  margin-top: 0;
}

.subscribe__benefits,
.subscribe__types {
  color: var(--color-white);
  font-size: 1.6rem;
}

.subscribe__benefits strong {
  font-weight: bold;
}

.subscribe__benefits em {
  font-style: italic;
}

.breakpoint-phone .subscribe__benefits,
.breakpoint-phone .subscribe__types,
.breakpoint-phone-small .subscribe__benefits,
.breakpoint-phone-small .subscribe__types {
  font-size: 1.5rem;
}

.breakpoint-phone .subscribe__benefits,
.breakpoint-phone-small .subscribe__benefits {
  padding-top: 3rem;
}

.subscribe__types {
  padding-top: 3rem;
}

.subscribe__benefits-list {
  padding-top: 3rem;
}

.subscribe__benefit {
  list-style: disc;
  line-height: 1.5;
  padding-bottom: 1rem;
}

.subscribe__type {
  margin-bottom: 1rem;
  position: relative;
}

.subscribe__benefit:last-of-type,
.subscribe__type:last-of-type {
  padding-bottom: 0;
}

.subscribe__type:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  height: 1px;
  position: absolute;
  top: 50%;
  right: 5rem;
}

.subscribe__type--full:after {
  left: 5rem;
}

.subscribe__type--passionate:after {
  left: 12rem;
}

.subscribe__type--concession:after {
  left: 12rem;
}

.subscribe__type--business:after {
  left: 9rem;
}

.subscribe__type--band:after {
  left: 15rem;
}

.subscribe__type-price {
  float: right;
}

.subscribe__thanks h1 {
  color: var(--color-white);
  font-weight: bold;
  font-size: 5.4rem;
  line-height: 1.2;
  padding-bottom: 4rem;
}

.breakpoint-tablet-wide .subscribe__thanks h1,
.breakpoint-tablet .subscribe__thanks h1 {
  font-size: 4rem;
  padding-bottom: 3rem;
}

.breakpoint-phone .subscribe__thanks h1,
.breakpoint-phone-small .subscribe__thanks h1 {
  font-size: 2rem;
  padding-bottom: 2rem;
}

.subscribe__thanks p {
  color: var(--color-white);
  font-size: 2.2rem;
  padding-bottom: 3rem;
}

.breakpoint-tablet-wide .subscribe__thanks p,
.breakpoint-tablet .subscribe__thanks p {
  font-size: 2rem;
  padding-bottom: 2rem;
}

.breakpoint-phone .subscribe__thanks p,
.breakpoint-phone-small .subscribe__thanks p {
  font-size: 1.6rem;
  padding-bottom: 2rem;
}

.subscribe .form-card__payment-summary td:first-child {
  width: 70%;
}

/**
 * Radio toggle
 */

.radio-toggle__label {
  display: block;
  padding-bottom: 0.8rem;
  position: relative;
}

.radio-toggle__button {
  border: 1px solid var(--color-grey-lightest);
  border-radius: 4px;
  cursor: pointer;
  display: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1.4rem 1.6rem;
  position: relative;
  -webkit-transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.radio-toggle__input:hover + .radio-toggle__button,
.radio-toggle__input:focus + .radio-toggle__button {
  border-color: var(--color-grey-dark);
}

.radio-toggle__input:checked + .radio-toggle__button {
  background-color: #fa709a;
  border-color: transparent;
  color: var(--color-white);
}

.breakpoint-tablet-wide .radio-toggle__input:checked + .radio-toggle__button,
.breakpoint-tablet .radio-toggle__input:checked + .radio-toggle__button,
.breakpoint-phone .radio-toggle__input:checked + .radio-toggle__button,
.breakpoint-phone-small .radio-toggle__input:checked + .radio-toggle__button {
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#feb740));
  background-image: linear-gradient(to right, #fa709a, #feb740);
}

.radio-toggle__input:checked + .radio-toggle__button:before {
  --size: 0;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  background-image: radial-gradient(circle closest-side, #feb740, transparent);
  -webkit-transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
      -ms-transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
          transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  -webkit-transition: width 0.2s ease, height 0.2s ease;
  transition: width 0.2s ease, height 0.2s ease;
  pointer-events: none;
  will-change: transform;
}

.breakpoint-widescreen
  .radio-toggle__input:checked
  + .radio-toggle__button:hover:before,
.breakpoint-desktop
  .radio-toggle__input:checked
  + .radio-toggle__button:hover:before {
  --size: 400px;
}

.radio-toggle__button span {
  position: relative;
}

.radio-toggle__group--thirds {
  margin-right: -0.8rem;
}

.radio-toggle__group--thirds .radio-toggle__label {
  float: left;
  margin-right: 0.8rem;
  width: calc(33.3333333% - 0.8rem);
}

.breakpoint-desktop .radio-toggle__group--thirds .radio-toggle__label span,
.breakpoint-tablet-wide .radio-toggle__group--thirds .radio-toggle__label span,
.breakpoint-tablet .radio-toggle__group--thirds .radio-toggle__label span,
.breakpoint-phone .radio-toggle__group--thirds .radio-toggle__label span,
.breakpoint-phone-small .radio-toggle__group--thirds .radio-toggle__label span {
  float: none;
  display: block;
  text-align: center;
}

.radio-toggle__group--joined .radio-toggle__label {
  float: left;
  width: 50%;
}

.radio-toggle__group--joined .radio-toggle__label:first-of-type span {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.radio-toggle__group--joined .radio-toggle__label:last-of-type span {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.breakpoint-phone .radio-toggle__group--joined .radio-toggle__button,
.breakpoint-phone-small .radio-toggle__group--joined .radio-toggle__button {
  font-size: 1.3rem;
}

/**
 * Transparent button
 */

.transparent-button {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: var(--color-white);
  display: block;
  font-size: 2.2rem;
  max-width: 50rem;
  padding: 1.8rem 6rem 1.8rem 3rem;
  position: relative;
  text-decoration: none;
  -webkit-transition: background-color 150ms ease, border-color 150ms ease;
  transition: background-color 150ms ease, border-color 150ms ease;
  width: 100%;
}

.breakpoint-tablet-wide .transparent-button,
.breakpoint-tablet .transparent-button {
  font-size: 2rem;
}

.breakpoint-phone .transparent-button,
.breakpoint-phone-small .transparent-button {
  font-size: 1.6rem;
}

.transparent-button:hover,
.transparent-button:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}

.transparent-button svg {
  position: absolute;
  top: 50%;
  right: 3rem;
  margin-top: -7px;
}

.transparent-button:hover svg,
.transparent-button:focus svg {
  -webkit-animation: arrow-left-to-right 300ms cubic-bezier(0.71, 0.17, 0.68, 0.29)
    forwards;
          animation: arrow-left-to-right 300ms cubic-bezier(0.71, 0.17, 0.68, 0.29)
    forwards;
}

.transparent-button svg path {
  fill: var(--color-white);
}

/**
 * Page tree
 */

.page-tree {
}

.page-tree__list {
}

.page-tree__list--level-1 {
  margin-bottom: 2rem;
}

.page-tree__list-item {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.page-tree__list-item a {
  font-size: 1.5rem;
  color: var(--color-grey);
  display: block;
  text-decoration: none;
}

.breakpoint-phone .page-tree__list-item a,
.breakpoint-phone-small .page-tree__list-item a {
  font-size: 1.4rem;
}

.page-tree__list-item a:hover,
.page-tree__list-item a:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.page-tree__list .page-tree__list {
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-left: 2px solid var(--color-grey-light);
}

.page-tree__list .page-tree__list .page-tree__list-item {
  padding-top: 0rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
}

.page-tree__list .page-tree__list .page-tree__list-item:first-child {
  padding-top: 0;
}

.page-tree__list .page-tree__list .page-tree__list-item:last-child {
  padding-bottom: 0;
}

.page-tree__item--has-children.page-tree__item--ancestor > a,
.page-tree__item--parent a,
.page-tree__item--active a {
  color: var(--color-grey-darkest);
}

.page-tree__item--has-children.page-tree__item--ancestor > a {
  font-weight: bold;
}

.page-tree__item--active > a {
  color: var(--color-red);
  font-weight: bold;
}

/**
 * Article list embed
 */

.article-list-embed {
  margin: 4rem -3rem 6rem;
}

.breakpoint-tablet-wide .article-list-embed,
.breakpoint-tablet .article-list-embed,
.breakpoint-phone .article-list-embed,
.breakpoint-phone-small .article-list-embed {
  margin: 3rem 0 3rem;
}

.article-list-embed__heading,
.copy .article-list-embed__heading {
  padding-bottom: 3rem;
}

.article-list-embed__item {
  border-bottom: 1px solid var(--color-grey-lightest);
  position: relative;
}

.article-list-embed__item:first-of-type {
  border-top: 1px solid var(--color-grey-lightest);
}

.article-list-embed__content {
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-right: 3rem;
  width: calc(100% - 14rem);
}

.breakpoint-tablet-wide .article-list-embed__content,
.breakpoint-tablet .article-list-embed__content {
  width: calc(100% - 12rem);
}

.breakpoint-phone .article-list-embed__content,
.breakpoint-phone-small .article-list-embed__content {
  padding-right: 0;
  width: 100%;
}

.article-list-embed__body {
  padding-right: 3rem;
  float: left;
}

.breakpoint-phone .article-list-embed__body,
.breakpoint-phone-small .article-list-embed__body {
  float: none;
  padding-right: 0;
}

.article-list-embed__anchor {
  display: block;
  color: currentColor;
  text-decoration: none;
}

.article-list-embed__anchor:hover,
.article-list-embed__anchor:focus {
  color: currentColor;
}

.article-list-embed__title,
.copy .article-list-embed__title {
  color: var(--color-red);
  font-size: 1.8rem;
  font-weight: bold;
  padding-bottom: 0.8rem;
}

.breakpoint-tablet-wide .article-list-embed__title,
.breakpoint-tablet-wide .copy .article-list-embed__title,
.breakpoint-tablet .article-list-embed__title,
.breakpoint-tablet .copy .article-list-embed__title,
.breakpoint-phone .article-list-embed__title,
.breakpoint-phone .copy .article-list-embed__title,
.breakpoint-phone-small .article-list-embed__title,
.breakpoint-phone-small .copy .article-list-embed__title {
  font-size: 1.6rem;
  padding-bottom: 0.8rem;
}

.article-list-embed__anchor:hover .article-list-embed__title,
.article-list-embed__anchor:focus .article-list-embed__title {
  text-decoration: underline;
}

.article-list-embed__summary p,
.copy .article-list-embed__summary p {
  font-size: 1.5rem;
}

.article-list-embed__image-container {
  width: 14rem;
}

.breakpoint-tablet-wide .article-list-embed__image-container,
.breakpoint-tablet .article-list-embed__image-container {
  width: 12rem;
}

.breakpoint-phone .article-list-embed__image-container,
.breakpoint-phone-small .article-list-embed__image-container {
  display: none;
}

.article-list-embed__image {
  display: block;
  max-width: 100%;
}

/**
 * On air banner
 */

.on-air-banner {
  height: 50rem;
}

.breakpoint-tablet-wide .on-air-banner,
.breakpoint-tablet .on-air-banner {
  height: auto;
  padding-bottom: 6rem;
}

.breakpoint-phone .on-air-banner,
.breakpoint-phone-small .on-air-banner {
  height: auto;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
  padding-bottom: 4rem;
}

.breakpoint-tablet-wide .on-air-banner__inner,
.breakpoint-tablet .on-air-banner__inner,
.breakpoint-phone .on-air-banner__inner,
.breakpoint-phone-small .on-air-banner__inner {
  padding-top: 0;
}

.on-air-banner__shadows {
  background-color: rgba(255, 255, 255, 0.16);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 30rem;
  margin-left: -15rem;
  -webkit-transform: skew(-45deg);
      -ms-transform: skew(-45deg);
          transform: skew(-45deg);
  z-index: 1;
}

.on-air-banner__shadows:before,
.on-air-banner__shadows:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30rem;
}

.on-air-banner__shadows:before {
  background-color: rgba(255, 255, 255, 0.1);
  left: -30rem;
}

.on-air-banner__shadows:after {
  background-color: rgba(255, 255, 255, 0.05);
  right: -30rem;
}

.on-air-banner__wave {
  position: absolute;
  top: 14rem;
  left: 50%;
  margin-left: -80rem;
}

.on-air-banner__wave path {
  -webkit-animation: dash 2s linear forwards;
          animation: dash 2s linear forwards;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}

.on-air-banner__heading {
  font-size: 2.4rem;
  padding-top: 8rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.breakpoint-tablet-wide .on-air-banner__heading,
.breakpoint-tablet .on-air-banner__heading,
.breakpoint-phone .on-air-banner__heading,
.breakpoint-phone-small .on-air-banner__heading {
  font-size: 1.8rem;
  padding-top: 4rem;
}

.breakpoint-phone .on-air-banner__heading,
.breakpoint-phone-small .on-air-banner__heading {
  padding-bottom: 3rem;
}

.on-air-banner__grid {
  background-image: url(/assets/main/assets/public/on-air-banner/background-lines.e510f3e5.png);
  background-repeat: repeat-x;
  background-size: 0.1rem 12.5rem;
  background-position: left 3.4rem;
  min-height: 16rem;
  position: relative;
  z-index: 2;
}

.breakpoint-tablet-wide .on-air-banner__grid,
.breakpoint-tablet .on-air-banner__grid {
  background-position: left top;
}

.breakpoint-phone .on-air-banner__grid,
.breakpoint-phone-small .on-air-banner__grid {
  background-image: none;
  min-height: 0;
}

.on-air-banner__timeslots {
}

.on-air-banner__timeslot {
  float: left;
  width: calc(100% / 6);
}

.on-air-banner__programs {
  padding-top: 3rem;
  margin-right: -1rem;
}

.breakpoint-tablet-wide .on-air-banner__programs,
.breakpoint-tablet .on-air-banner__programs {
  padding-top: 2rem;
}

.breakpoint-phone .on-air-banner__programs,
.breakpoint-phone-small .on-air-banner__programs {
  padding-top: 0;
  margin-right: 0;
}

.on-air-banner__program {
  float: left;
  padding-right: 1rem;
  width: 100%;
}

.on-air-banner__program:last-of-type {
  padding-right: 0;
}

.on-air-banner__program--0-25-hours {
  width: calc(100% / 6 * 0.25);
}

.on-air-banner__program--0-5-hours {
  width: calc(100% / 6 * 0.5);
}

.on-air-banner__program--1-hour {
  width: calc(100% / 6);
}

.on-air-banner__program--1-5-hours {
  width: calc(100% / 6 * 1.5);
}

.on-air-banner__program--2-hours {
  width: calc(100% / 6 * 2);
}

.on-air-banner__program--2-5-hours {
  width: calc(100% / 6 * 2.5);
}

.on-air-banner__program--3-hours {
  width: calc(100% / 6 * 3);
}

.on-air-banner__program--3-5-hours {
  width: calc(100% / 6 * 3.5);
}

.on-air-banner__program--4-hours {
  width: calc(100% / 6 * 4);
}

.on-air-banner__program--4-5-hours {
  width: calc(100% / 6 * 4.5);
}

.on-air-banner__program--5-hours {
  width: calc(100% / 6 * 5);
}

.on-air-banner__program--5-5-hours {
  width: calc(100% / 6 * 5.5);
}

.breakpoint-phone .on-air-banner__program,
.breakpoint-phone-small .on-air-banner__program {
  padding-right: 0;
  margin-bottom: 1rem;
  width: 100%;
}

.on-air-banner__program-inner {
  background-color: var(--color-grey-darkest);
  border-radius: 4px;
  color: var(--color-white);
  text-decoration: none;
  padding: 0.8rem 2.6rem;
  min-height: 6.5rem;
  width: 100%;
}

.breakpoint-tablet-wide .on-air-banner__program-inner,
.breakpoint-tablet .on-air-banner__program-inner,
.breakpoint-phone .on-air-banner__program-inner,
.breakpoint-phone-small .on-air-banner__program-inner {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 8rem;
}

.breakpoint-phone .on-air-banner__program-inner,
.breakpoint-phone-small .on-air-banner__program-inner {
  padding: 1.2rem 2rem;
  min-height: 7.5rem;
}

a.on-air-banner__program-inner:hover,
a.on-air-banner__program-inner:focus {
  background-image: -webkit-gradient(linear, left top, right top, from(#dd3b94), to(#436d94));
  background-image: linear-gradient(to right, #dd3b94, #436d94);
}

.breakpoint-phone a.on-air-banner__program-inner:hover,
.breakpoint-phone a.on-air-banner__program-inner:focus,
.breakpoint-phone-small a.on-air-banner__program-inner:hover,
.breakpoint-phone-small a.on-air-banner__program-inner:focus {
  background-image: none;
}

.on-air-banner__program-title {
  line-height: 1.2;
  font-size: 2rem;
  font-weight: bold;
  padding-right: 1rem;
  width: calc(100% - 8.8rem);
}

.breakpoint-tablet-wide .on-air-banner__program-title,
.breakpoint-tablet .on-air-banner__program-title,
.breakpoint-phone .on-air-banner__program-title,
.breakpoint-phone-small .on-air-banner__program-title {
  font-size: 1.6rem;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  padding-right: 0;
  width: 100%;
}

.on-air-banner__program-title--smaller {
  font-size: 1.6rem;
}

.on-air-banner__program-title--smallest {
  font-size: 1.4rem;
}

.on-air-banner__program-time {
  font-size: 1.5rem;
  margin-left: auto;
  text-align: right;
  width: 8.8rem;
}

.breakpoint-tablet-wide .on-air-banner__program-time,
.breakpoint-tablet .on-air-banner__program-time,
.breakpoint-phone .on-air-banner__program-time,
.breakpoint-phone-small .on-air-banner__program-time {
  font-size: 1.4rem;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-left: auto;
  text-align: left;
  padding-bottom: 0.2rem;
  width: 100%;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/**
 * Event
 */

.event {
  padding-bottom: 12rem;
}

.breakpoint-tablet-wide .event,
.breakpoint-tablet .event {
  padding-bottom: 8rem;
}

.breakpoint-phone .event,
.breakpoint-phone-small .event {
  padding-bottom: 6rem;
}

.event__banner {
  min-height: 28rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

.breakpoint-tablet-wide .event__banner,
.breakpoint-tablet .event__banner {
  padding-top: 4rem;
  padding-bottom: 4rem;
  min-height: 16rem;
}

.breakpoint-phone .event__banner,
.breakpoint-phone-small .event__banner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
  min-height: 0;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.event--simple .event__banner {
  min-height: 22rem;
}

.breakpoint-tablet-wide .event--simple .event__banner,
.breakpoint-tablet .event--simple .event__banner {
  min-height: 18rem;
}

.breakpoint-phone .event--simple .event__banner,
.breakpoint-phone-small .event--simple .event__banner {
  min-height: 0;
}

.event__banner-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

.event__banner-background[data-view-color-from-image] {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transition-delay: 0ms;
          transition-delay: 0ms;
}

.color-from-image--dark.event__banner-background,
.color-from-image--light.event__banner-background {
  opacity: 1;
}

.event__banner-background img {
  display: block;
  -webkit-transform: translateY(-15%) scale(1.05);
      -ms-transform: translateY(-15%) scale(1.05);
          transform: translateY(-15%) scale(1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
  opacity: 0.1;
  width: 100%;
}

.event__banner-image-gradient {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.event__banner-content {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 28rem;
  position: relative;
  z-index: 2;
}

.breakpoint-tablet-wide .event__banner-content,
.breakpoint-tablet .event__banner-content {
  min-height: 16rem;
}

.breakpoint-phone .event__banner-content,
.breakpoint-phone-small .event__banner-content {
  min-height: 0;
  display: block;
}

.event--simple .event__banner-content {
  min-height: 22rem;
}

.breakpoint-tablet-wide .event--simple .event__banner-content,
.breakpoint-tablet .event--simple .event__banner-content {
  min-height: 18rem;
}

.breakpoint-phone .event--simple .event__banner-content,
.breakpoint-phone-small .event--simple .event__banner-content {
  min-height: 0;
}

.event__title {
  font-size: 5.4rem;
  font-weight: bold;
  line-height: 1.2;
}

.color-from-image--light + .grid-wrapper .event__title {
  color: var(--color-grey-dark);
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.4);
}

.color-from-image--dark + .grid-wrapper .event__title {
  color: var(--color-white);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.breakpoint-w-1200 .event__title {
  font-size: 4.8rem;
}

.breakpoint-tablet-wide .event__title {
  font-size: 3.6rem;
  width: calc(100% - 26rem);
}

.breakpoint-tablet .event__title {
  font-size: 3.4rem;
  width: calc(100% - 20rem);
}

.breakpoint-phone .event__title,
.breakpoint-phone-small .event__title {
  text-align: center;
  font-size: 2.8rem;
}

.event__sidebar {
  position: relative;
  padding-top: 12rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.breakpoint-w-1200 .event__sidebar {
  padding-left: 0;
  padding-right: 0;
}

.breakpoint-tablet-wide .event__sidebar,
.breakpoint-tablet .event__sidebar {
  padding-top: 6rem;
}

.breakpoint-phone .event__sidebar,
.breakpoint-phone-small .event__sidebar {
  padding-top: 0;
}

.event__sidebar:before {
  background-color: var(--color-grey-lightest);
  content: "";
  width: 1px;
  height: 12rem;
  position: absolute;
  top: -3rem;
  left: 50%;
}

.breakpoint-tablet-wide .event__sidebar:before,
.breakpoint-tablet .event__sidebar:before {
  height: 6rem;
}

.breakpoint-phone .event__sidebar:before,
.breakpoint-phone-small .event__sidebar:before {
  display: none;
}

.event__note {
  font-size: 1.6rem;
  padding-top: 1.6rem;
}

.breakpoint-phone .event__note,
.breakpoint-phone-small .event__note {
  padding-top: 1rem;
}

.event__details-wrapper:first-child {
  margin-top: -3rem;
}

.breakpoint-phone .event__details-wrapper,
.breakpoint-phone-small .event__details-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0;
  padding-top: 2rem;
}

.event__details {
  padding-top: 4rem;
}

.breakpoint-tablet-wide .event__details,
.breakpoint-tablet .event__details {
  padding-top: 3rem;
}

.breakpoint-phone .event__details,
.breakpoint-phone-small .event__details {
  text-align: left;
  float: left;
  padding-top: 0;
  width: 50%;
}

.breakpoint-phone .event__details:first-of-type,
.breakpoint-phone-small .event__details:first-of-type {
  padding-right: 2rem;
}

.breakpoint-phone .event__details:last-of-type,
.breakpoint-phone-small .event__details:last-of-type {
  padding-left: 2rem;
}

.event__venue-address-details {
  padding-bottom: 2rem;
}

.event__details-heading {
  font-size: 2.4rem;
  padding-bottom: 1.6rem;
}

.breakpoint-tablet-wide .event__details-heading,
.breakpoint-tablet .event__details-heading {
  font-size: 2rem;
  padding-bottom: 1rem;
}

.breakpoint-phone .event__details-heading,
.breakpoint-phone-small .event__details-heading {
  font-size: 1.6rem;
  padding-bottom: 1rem;
}

.event__details-copy {
  font-size: 1.8rem;
}

.breakpoint-tablet-wide .event__details-copy,
.breakpoint-tablet .event__details-copy {
  font-size: 1.6rem;
}

.breakpoint-phone .event__details-copy,
.breakpoint-phone-small .event__details-copy {
  font-size: 1.4rem;
}

.event__details-starts,
.event__details-ends {
  padding-bottom: 0.2rem;
}

.event__details-ends {
  padding-top: 1.6rem;
}

.breakpoint-phone .event__details-starts,
.breakpoint-phone .event__details-ends,
.breakpoint-phone-small .event__details-starts,
.breakpoint-phone-small .event__details-ends {
  font-size: 1.2rem;
}

.event__more-details {
  display: block;
  font-size: 1.1rem;
  padding-top: 2rem;
  text-decoration: none;
}

.event__divider {
  background-color: var(--color-grey-lightest);
  display: block;
  width: 1px;
  height: 7rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.breakpoint-tablet-wide .event__divider,
.breakpoint-tablet .event__divider {
  height: 4rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.breakpoint-phone .event__divider,
.breakpoint-phone-small .event__divider {
  display: none;
}

.event__buttons {
}

.breakpoint-phone .event__buttons,
.breakpoint-phone-small .event__buttons {
  padding-top: 3rem;
}

.event__button {
  padding-top: 1rem;
}

.event__button:first-of-type {
  padding-top: 0;
}

.event__button .share-icons {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.event__button .share-icons__icon--label {
  text-align: center;
  padding-bottom: 1rem;
  width: 100%;
}

.event__sponsored {
  padding-top: 6rem;
}

.breakpoint-tablet-wide .event__sponsored,
.breakpoint-tablet .event__sponsored {
  padding-top: 4rem;
}

.breakpoint-phone .event__sponsored,
.breakpoint-phone-small .event__sponsored {
  padding-top: 3rem;
}

.breakpoint-phone .event__sponsored span,
.breakpoint-phone-small .event__sponsored span {
  font-size: 1.4rem;
}

.event__sponsor {
  display: block;
  padding-bottom: 2rem;
}

.event__sponsor:last-child {
  padding-bottom: 0;
}

.event__sponsor img {
  display: block;
  max-width: 100%;
}

.breakpoint-phone .event__sponsor img,
.breakpoint-phone-small .event__sponsor img {
  max-width: 15rem;
}

.event__body {
  padding-top: 6rem;
}

.breakpoint-tablet-wide .event__body,
.breakpoint-tablet .event__body {
  padding-top: 3rem;
  position: relative;
  z-index: 3;
}

.breakpoint-phone .event__body,
.breakpoint-phone-small .event__body {
  padding-top: 3rem;
}

.copy .event__body-image {
  float: right;
  display: block;
  margin-top: -12rem;
  margin-left: 3rem;
  margin-bottom: 3rem;
  width: 100%;
  max-width: 20rem;
}

.breakpoint-tablet .copy .event__body-image {
  max-width: 16rem;
}

.breakpoint-phone .copy .event__body-image {
  margin-top: 0;
  max-width: 18rem;
}

.breakpoint-phone-small .copy .event__body-image {
  float: none;
  margin: 0 -3rem 3rem;
  width: calc(100% + 6rem);
  max-width: calc(100% + 6rem);
}

.event__image {
  -webkit-transform: translateY(-28rem);
      -ms-transform: translateY(-28rem);
          transform: translateY(-28rem);
  position: relative;
  z-index: 2;
}

.event__image img {
  display: block;
  width: 100%;
}

.event__tags .tags-list {
  text-align: left;
}

.event__venue {
  padding-top: 7rem;
}

.breakpoint-tablet-wide .event__venue,
.breakpoint-tablet .event__venue {
  padding-top: 5rem;
}

.breakpoint-phone .event__venue,
.breakpoint-phone-small .event__venue {
  padding-top: 4rem;
}

.event__venue-info-list {
  padding-top: 4rem;
}

.breakpoint-tablet-wide .event__venue-info-list,
.breakpoint-tablet .event__venue-info-list,
.breakpoint-phone .event__venue-info-list,
.breakpoint-phone-small .event__venue-info-list {
  padding-top: 3rem;
}

.event__venue-info {
  color: var(--color-grey-darkest);
  font-size: 2rem;
  padding-bottom: 2rem;
}

.breakpoint-tablet-wide .event__venue-info,
.breakpoint-tablet .event__venue-info {
  font-size: 1.8rem;
}

.breakpoint-phone .event__venue-info,
.breakpoint-phone-small .event__venue-info {
  font-size: 1.6rem;
}

.event__venue-info em {
  display: block;
  float: left;
  width: 6rem;
}

.breakpoint-tablet-wide .event__venue-info em,
.breakpoint-tablet .event__venue-info em,
.breakpoint-phone .event__venue-info em,
.breakpoint-phone-small .event__venue-info em {
  width: 5rem;
}

.event__venue-info span {
  display: block;
  float: left;
  width: calc(100% - 6rem);
}

.breakpoint-tablet-wide .event__venue-info span,
.breakpoint-tablet .event__venue-info span,
.breakpoint-phone .event__venue-info span,
.breakpoint-phone-small .event__venue-info span {
  width: calc(100% - 5rem);
}

.event__map {
  margin-top: 6rem;
}

.breakpoint-phone .event__map,
.breakpoint-phone-small .event__map {
  margin-top: 3rem;
  margin-left: -3rem;
  margin-right: -3rem;
}

/**
 * Action button
 */

.action-button {
  background-color: var(--color-grey-dark);
  border: 1px solid var(--color-grey-dark);
  border-radius: 4px;
  color: var(--color-white);
  display: inline-block;
  font-size: 1.5rem;
  font-family: var(--font-alternate-fallback);
  padding: 1.2rem 5rem 1.2rem 2rem;
  position: relative;
  text-decoration: none;
  text-align: left;
  -webkit-transition: border-color 150ms ease, background-color 150ms ease;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.fonts-loaded .action-button {
  font-family: var(--font-alternate);
}

.action-button:hover,
.action-button:focus {
  background-color: var(--color-grey-darkest);
  border-color: var(--color-grey-darkest);
}

.action-button--full-width {
  width: 100%;
}

.action-button--reversed {
  border-color: var(--color-grey-light);
  background-color: var(--color-white);
  color: var(--color-grey-darker);
}

.action-button--reversed:hover,
.action-button--reversed:focus {
  border-color: var(--color-grey);
  background-color: var(--color-white);
}

.action-button--red {
  border-color: var(--color-red);
  background-color: var(--color-red);
  color: var(--color-white);
}

.action-button--red:hover,
.action-button--red:focus {
  border-color: var(--color-red-dark);
  background-color: var(--color-red-dark);
}

.action-button--basic {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-grey-darker);
}

.action-button--basic:hover,
.action-button--basic:focus {
  border-color: var(--color-grey-light);
  background-color: transparent;
}

.action-button svg {
  position: absolute;
  top: 50%;
  right: 2rem;
  margin-top: -0.5rem;
}

.breakpoint-widescreen .action-button:hover svg,
.breakpoint-widescreen .action-button:focus svg,
.breakpoint-desktop .action-button:hover svg,
.breakpoint-desktop .action-button:focus svg {
  -webkit-animation: arrow-left-to-right 300ms cubic-bezier(0.71, 0.17, 0.68, 0.29)
    forwards;
          animation: arrow-left-to-right 300ms cubic-bezier(0.71, 0.17, 0.68, 0.29)
    forwards;
}

.action-button svg path {
  fill: var(--color-white);
}

.action-button--reversed svg path,
.action-button--basic svg path {
  fill: var(--color-grey-darker);
}

.action-button--red svg path {
  fill: var(--color-white);
}

.action-button--listen-live svg {
  margin-top: -0.8rem;
}

/**
 * Map embed
 */

.map-embed {
  position: relative;
  background-color: #eee;
}

.map-embed:before {
  display: block;
  width: 100%;
  padding-top: 50%;
  content: "";
}

.breakpoint-phone .map-embed:before,
.breakpoint-phone-small .map-embed:before {
  padding-top: 100%;
}

.map-embed__map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.map-embed__title {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.3;
  padding-bottom: 4px;
}

.map-embed__location {
  font-size: 16px;
  line-height: 1.3;
}

/**
 * Manage account
 */

.manage-account {
  background-color: #eee;
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.breakpoint-tablet-wide .manage-account,
.breakpoint-tablet .manage-account {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.breakpoint-phone .manage-account,
.breakpoint-phone-small .manage-account {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.manage-account .form-card__actions .form-card__action--renew {
  background-color: var(--color-red);
  border-radius: 4px;
  color: var(--color-white);
  padding: 1rem;
}

.manage-account .form-card__actions .form-card__action--renew:hover,
.manage-account .form-card__actions .form-card__action--renew:hover {
  background-color: var(--color-red-dark);
}

.manage-account .form-card__actions .form-card__action--archive {
  margin-left: auto;
}

.manage-account .form-card__button {
  margin-right: auto;
  margin-left: auto;
}

/**
 * Events banner
 */

.events-banner {
  height: 20rem;
}

.events-banner--taller {
  height: 35rem;
}

.breakpoint-tablet-wide .events-banner,
.breakpoint-tablet .events-banner {
  height: auto;
}

.breakpoint-phone .events-banner,
.breakpoint-phone-small .events-banner {
  height: auto;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
}

.breakpoint-tablet-wide .events-banner__inner,
.breakpoint-tablet .events-banner__inner,
.breakpoint-phone .events-banner__inner,
.breakpoint-phone-small .events-banner__inner {
  padding-top: 0;
}

.events-banner__shadows {
  background-color: rgba(255, 255, 255, 0.05);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 30rem;
  margin-left: -15rem;
  -webkit-transform: skew(-45deg);
      -ms-transform: skew(-45deg);
          transform: skew(-45deg);
  z-index: 1;
}

.events-banner__shadows:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30rem;
}

.events-banner__shadows:after {
  background-color: rgba(255, 255, 255, 0.1);
  right: -30rem;
}

.events-banner__heading {
  font-size: 2.4rem;
  padding-top: 8rem;
  padding-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.breakpoint-tablet-wide .events-banner__heading,
.breakpoint-tablet .events-banner__heading {
  font-size: 2.4rem;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.breakpoint-phone .events-banner__heading,
.breakpoint-phone-small .events-banner__heading {
  font-size: 1.8rem;
  padding-bottom: 4rem;
  padding-top: 4rem;
}

/**
 * Events index
 */

.events-index {
}

.events-index__heading {
  font-size: 3rem;
  padding-bottom: 2rem;
}

.breakpoint-tablet-wide .events-index__heading,
.breakpoint-tablet .events-index__heading {
  font-size: 2.4rem;
}

.breakpoint-phone .events-index__heading,
.breakpoint-phone-small .events-index__heading {
  font-size: 1.8rem;
}

.events-index__filters {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.breakpoint-w-1200 .events-index__filters {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.breakpoint-tablet-wide .events-index__filters,
.breakpoint-tablet .events-index__filters,
.breakpoint-phone .events-index__filters,
.breakpoint-phone-small .events-index__filters {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.breakpoint-tablet-wide .events-index__filters-left,
.breakpoint-tablet .events-index__filters-left,
.breakpoint-phone .events-index__filters-left,
.breakpoint-phone-small .events-index__filters-left {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.events-index__filter-heading {
  padding-right: 2rem;
}

.events-index__show-filters {
  position: relative;
  margin-left: -0.8rem;
  padding-bottom: 2rem;
}

.events-index__show-filters:after {
  content: "";
  position: absolute;
  top: 0.6rem;
  right: -1.6rem;
  width: 0;
  height: 0;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  border-left: 0.5rem solid var(--color-grey);
}

.events-index__show-filters--active:after {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.events-index__filter {
  margin-right: 2rem;
  position: relative;
}

.breakpoint-tablet-wide .events-index__filter,
.breakpoint-tablet .events-index__filter,
.breakpoint-phone .events-index__filter,
.breakpoint-phone-small .events-index__filter {
  display: none;
  margin-right: 0;
  padding-bottom: 2rem;
}

.events-index__show-filters--active ~ .events-index__filter {
  display: block;
}

.events-index__filter--calendars {
  margin-right: 6rem;
}

.events-index__filter--calendar {
  margin-right: 4rem;
}

.events-index__filter-buttons {
  width: 30rem;
}

.breakpoint-w-1300 .events-index__filter-buttons {
  width: 24rem;
}

.breakpoint-tablet-wide .events-index__filter-buttons,
.breakpoint-tablet .events-index__filter-buttons,
.breakpoint-phone .events-index__filter-buttons,
.breakpoint-phone-small .events-index__filter-buttons {
  text-align: center;
  width: 100%;
}

.events-index__filter-button {
  display: inline-block;
  padding-right: 0.6rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.events-index__filter-label {
  color: var(--color-grey-dark);
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.events-index__filter-checkbox:checked + .events-index__filter-label {
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#feb740));
  background-image: linear-gradient(to right, #fa709a, #feb740);
  border-color: var(--color-white);
  color: var(--color-white);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.events-index__filter-day {
  color: var(--color-grey);
  display: inline-block;
  text-decoration: none;
  font-size: 1.5rem;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
}

.events-index__filter-day--active,
.events-index__filter-day:hover,
.events-index__filter-day:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.events-index__filter--search {
  margin-left: auto;
  margin-right: 0;
  width: 24rem;
}

.breakpoint-w-1300 .events-index__filter--search {
  width: 18rem;
}

.breakpoint-w-1200 .events-index__filter--search {
  width: 30rem;
  margin-left: 0;
  margin-top: 4rem;
}

.breakpoint-tablet .events-index__filter--search,
.breakpoint-tablet-wide .events-index__filter--search {
  display: block;
  margin-top: 1rem;
}

.breakpoint-phone .events-index__filter--search,
.breakpoint-phone-small .events-index__filter--search {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  padding-top: 1rem;
  width: 80%;
}

.events-index__active-filters {
  margin-top: -2rem;
  padding-bottom: 4rem;
  padding-top: 2rem;
  position: relative;
}

.events-index__active-filters:before {
  background-image: -webkit-gradient(linear, left top, right top, from(#88d3ce), to(#b845e2));
  background-image: linear-gradient(to right, #88d3ce, #b845e2);
  content: "";
  width: 14rem;
  height: 0.3rem;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -7rem;
}

.events-index__active-filters span {
  color: var(--color-red);
  font-weight: bold;
}

.events-index__clear {
  background-color: var(--color-red);
  border-radius: 2px;
  color: var(--color-white);
  display: inline-block;
  width: 7rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 0.6rem 0.2rem;
  margin-left: 1rem;
  -webkit-transform: translateY(-0.1rem);
      -ms-transform: translateY(-0.1rem);
          transform: translateY(-0.1rem);
}

.events-index__no-results {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.events-index__no-results:before,
.events-index__no-results:after {
  background-image: -webkit-gradient(linear, left top, right top, from(#88d3ce), to(#b845e2));
  background-image: linear-gradient(to right, #88d3ce, #b845e2);
  content: "";
  width: 14rem;
  height: 0.3rem;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -7rem;
}

.events-index__no-results:after {
  top: auto;
  bottom: 0;
}

.breakpoint-tablet-wide .events-index__no-results,
.breakpoint-tablet .events-index__no-results,
.breakpoint-phone .events-index__no-results,
.breakpoint-phone-small .events-index__no-results {
  margin-top: -1rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.events-index__actions {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.breakpoint-tablet-wide .events-index__actions,
.breakpoint-tablet .events-index__actions,
.breakpoint-phone .events-index__actions,
.breakpoint-phone-small .events-index__actions {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.events-index__divider {
  background-color: var(--color-grey-lightest);
  display: block;
  width: 1px;
  height: 10rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.breakpoint-tablet-wide .events-index__divider,
.breakpoint-tablet .events-index__divider {
  height: 6rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.breakpoint-phone .events-index__divider,
.breakpoint-phone-small .events-index__divider {
  height: 5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/**
 * Search results
 */

.search-results {
}

.grid-row--search-results {
}

.breakpoint-phone .grid-row--search-results,
.breakpoint-phone-small .grid-row--search-results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.breakpoint-phone .grid-col--search-results,
.breakpoint-phone-small .grid-col--search-results {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.search-result {
  border-bottom: 1px solid var(--color-grey-lightest);
}

.search-result__anchor {
  display: block;
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
  text-decoration: none;
}

.search-result__type {
  padding-bottom: 0.8rem;
}

.search-result__title {
  color: var(--color-grey-darkest);
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: 1rem;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}

.search-result:hover .search-result__title,
.search-result:focus .search-result__title {
  color: var(--color-red);
  text-decoration: underline;
}

.breakpoint-phone .search-result__title,
.breakpoint-phone-small .search-result__title {
  font-size: 2rem;
  padding-bottom: 0.8rem;
}

.search-result__body {
  color: var(--color-grey-darkest);
}

.breakpoint-phone .search-result__body,
.breakpoint-phone-small .search-result__body {
  font-size: 1.5rem;
}

.search-result__body span {
  color: var(--color-red);
  font-weight: bold;
}

.search-result__actions-container {
  display: inline-block;
  padding-bottom: 2.8rem;
  margin-top: -1rem;
}

.search-results__pagination {
  padding-top: 6rem;
}

.breakpoint-phone .search-results__pagination,
.breakpoint-phone-small .search-results__pagination {
  padding-top: 4rem;
}

.breakpoint-phone .grid-col--search-filters,
.breakpoint-phone-small .grid-col--search-filters {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-bottom: 0;
}

.search-results__filters {
  padding-top: 2rem;
}

.search-results__filters-list {
}

.search-results__filter-item {
  padding-bottom: 0.2rem;
}

.breakpoint-phone .search-results__filter-item,
.breakpoint-phone-small .search-results__filter-item {
  font-size: 1.5rem;
}

.search-results__filter-item:first-of-type {
  color: var(--color-grey-darkest);
  display: block;
  font-size: 1.5rem;
  padding-bottom: 1rem;
}

.search-results__filters-button {
  color: var(--color-red);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  width: 100%;
  text-align: center;
}

.search-results__filters-button--active {
  margin-bottom: 2rem;
}

.search-results__filters-button-inner {
  display: inline-block;
  position: relative;
  -webkit-transform: translateX(-1.2rem);
      -ms-transform: translateX(-1.2rem);
          transform: translateX(-1.2rem);
}

.search-results__filters-button-inner:after {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--color-red);
  position: absolute;
  top: 0.4rem;
  right: -1.2rem;
}

.search-results__filters-button--active
  .search-results__filters-button-inner:after {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}

.search-results__filters-button span {
  display: none;
}

.search-results__filters-button--active span {
  display: inline-block;
}

.search-results__filters-button em {
  display: inline-block;
}

.search-results__filters-button--active em {
  display: none;
}

.breakpoint-phone .search-results__filters-button ~ .form-card__field,
.breakpoint-phone-small .search-results__filters-button ~ .form-card__field {
  display: none;
}

.breakpoint-phone .search-results__filters-button--active ~ .form-card__field,
.breakpoint-phone-small
  .search-results__filters-button--active
  ~ .form-card__field {
  display: block;
}

.search-result__track-title {
  color: var(--color-grey-darkest);
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: 1rem;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}

.search-result__track-artist {
  color: var(--color-grey-darkest);
  font-size: 1.6rem;
  font-weight: bold;
  padding-bottom: 1rem;
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}

.search-result-track-play-result {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.search-result__meta-links {
  padding-top: 1rem;
}

.search-results__results-title {
  color: var(--color-grey-darkest);
  font-size: 2rem;
  font-weight: bold;
  padding-bottom: 1rem;
}

/**
 * Card embed
 */

.card-embed {
  border: 1px solid var(--color-grey-light);
  border-radius: 4px;
  padding: 1.4rem;
  padding-bottom: 2rem;
}

.card-embed--no-border,
.card-embed--audio {
  border: none;
  padding: 0;
}

.card-embed .card {
  padding-bottom: 0;
}

/**
 * Center aligned
 */

.card-embed--center-aligned {
  margin: 0 auto 4rem;
}

.breakpoint-tablet-wide .card-embed--center-aligned {
  max-width: 80%;
}

.breakpoint-phone .card-embed--center-aligned,
.breakpoint-phone-small .card-embed--center-aligned {
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.card-embed--center-aligned .card__image-container {
  float: left;
  padding-bottom: 0;
  width: 30%;
}

.breakpoint-phone .card-embed--center-aligned .card__image-container,
.breakpoint-phone-small .card-embed--center-aligned .card__image-container {
  width: 40%;
}

.card-embed--center-aligned .card__text--with-image {
  padding-left: 2rem;
  float: left;
  width: 70%;
}

.breakpoint-phone .card-embed--center-aligned .card__text--with-image,
.breakpoint-phone-small .card-embed--center-aligned .card__text--with-image {
  padding-left: 0;
  width: 60%;
}

.card-embed--center-aligned.card-embed--audio {
  margin-left: -6rem;
  margin-right: -6rem;
}

.copy--no-overflow .card-embed--center-aligned.card-embed--audio,
.copy--no-overflow-left .card-embed--center-aligned.card-embed--audio,
.copy--no-overflow-right .card-embed--center-aligned.card-embed--audio,
.breakpoint-tablet-wide .card-embed--center-aligned.card-embed--audio,
.breakpoint-tablet .card-embed--center-aligned.card-embed--audio {
  margin-left: auto;
  margin-right: auto;
}

.breakpoint-phone .card-embed--center-aligned.card-embed--audio,
.breakpoint-phone-small .card-embed--center-aligned.card-embed--audio {
  margin-left: 0;
  margin-right: 0;
}

/**
 * Right aligned
 */

.card-embed--right-aligned {
  float: right;
  margin-left: 4rem;
  margin-bottom: 4rem;
  margin-right: -24rem;
  width: 32rem;
}

.copy--no-overflow .card-embed--right-aligned,
.copy--no-overflow-right .card-embed--right-aligned,
.breakpoint-tablet-wide .card-embed--right-aligned,
.breakpoint-tablet .card-embed--right-aligned {
  margin-right: 0;
  width: 30rem;
}

.breakpoint-phone .card-embed--right-aligned,
.breakpoint-phone-small .card-embed--right-aligned {
  float: none;
  margin-left: 0;
  margin-top: 2rem;
  margin-bottom: 3rem;
  width: 100%;
}

.breakpoint-phone .card-embed--right-aligned .card__image-container,
.breakpoint-phone-small .card-embed--right-aligned .card__image-container {
  padding-bottom: 0;
}

.card-embed--audio.card-embed--right-aligned {
  width: 24rem;
}

.breakpoint-phone .card-embed--audio.card-embed--right-aligned,
.breakpoint-phone-small .card-embed--audio.card-embed--right-aligned {
  width: 100%;
}

.card-embed--audio.card-embed--right-aligned .audio-summary {
  border-radius: 4px;
  height: auto;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--right-aligned
  .audio-summary__image-container {
  float: none;
  width: 100%;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--right-aligned
  .audio-summary__image {
  width: 100%;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--right-aligned
  .audio-summary__content {
  float: none;
  height: auto;
  padding: 1.4rem;
  width: 100%;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--right-aligned
  .audio-summary__content-inner {
  padding: 0;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--right-aligned
  .audio-summary__meta {
  font-size: 1.5rem;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--right-aligned
  .audio-summary__actions
  em {
  display: none;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--right-aligned
  .audio-summary__action {
  display: block;
  float: none;
  padding-bottom: 0.2rem;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--right-aligned
  .audio-summary__play-button {
  position: static;
  margin-bottom: 1rem;
  margin-top: -4rem;
}

/**
 * Left aligned
 */

.card-embed--left-aligned {
  float: left;
  margin-right: 4rem;
  margin-bottom: 4rem;
  margin-left: -24rem;
  width: 32rem;
}

.copy--no-overflow .card-embed--left-aligned,
.copy--no-overflow-left .card-embed--left-aligned,
.breakpoint-tablet-wide .card-embed--left-aligned,
.breakpoint-tablet .card-embed--left-aligned {
  margin-left: 0;
  width: 30rem;
}

.breakpoint-phone .card-embed--left-aligned,
.breakpoint-phone-small .card-embed--left-aligned {
  float: none;
  margin-left: 0;
  margin-top: 2rem;
  margin-bottom: 3rem;
  width: 100%;
}

.breakpoint-phone .card-embed--left-aligned .card__image-container,
.breakpoint-phone-small .card-embed--left-aligned .card__image-container {
  padding-bottom: 0;
}

.card-embed--audio.card-embed--left-aligned {
  width: 24rem;
}

.breakpoint-phone .card-embed--audio.card-embed--left-aligned,
.breakpoint-phone-small .card-embed--audio.card-embed--left-aligned {
  width: 100%;
}

.card-embed--audio.card-embed--left-aligned .audio-summary {
  border-radius: 4px;
  height: auto;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--left-aligned
  .audio-summary__image-container {
  float: none;
  width: 100%;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--left-aligned
  .audio-summary__image {
  width: 100%;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--left-aligned
  .audio-summary__content {
  float: none;
  height: auto;
  padding: 1.4rem;
  width: 100%;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--left-aligned
  .audio-summary__content-inner {
  padding: 0;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--left-aligned
  .audio-summary__meta {
  font-size: 1.5rem;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--left-aligned
  .audio-summary__actions
  em {
  display: none;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--left-aligned
  .audio-summary__action {
  display: block;
  float: none;
  padding-bottom: 0.2rem;
}

.breakpoint-not-phone
  .card-embed--audio.card-embed--left-aligned
  .audio-summary__play-button {
  position: static;
  margin-bottom: 1rem;
  margin-top: -4rem;
}

/**
 * Heading and dropdown
 */

.heading-and-dropdown {
  position: relative;
}

.breakpoint-tablet-wide .heading-and-dropdown,
.breakpoint-tablet .heading-and-dropdown,
.breakpoint-phone .heading-and-dropdown,
.breakpoint-phone-small .heading-and-dropdown {
  text-align: center;
}

.heading-and-dropdown span {
  display: block;
  text-align: center;
}

.heading-and-dropdown .dropdown {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -2.5rem;
}

.breakpoint-tablet-wide .heading-and-dropdown .dropdown,
.breakpoint-tablet .heading-and-dropdown .dropdown,
.breakpoint-phone .heading-and-dropdown .dropdown,
.breakpoint-phone-small .heading-and-dropdown .dropdown {
  position: relative;
  margin-top: 2rem;
}

/**
 * Button with tooltip
 */

.button-with-tooltip {
}

.button-with-tooltip__inner {
  position: relative;
}

.button-with-tooltip__tooltip {
  border-color: var(--color-grey-darker);
  background-color: var(--color-grey-darker);
  color: var(--color-white);
  position: absolute;
  top: 100%;
  right: 0;
  margin-right: -2rem;
  width: 14rem;
  -webkit-transform: translateY(1.6rem);
      -ms-transform: translateY(1.6rem);
          transform: translateY(1.6rem);
  -webkit-transition: opacity ease 150ms, -webkit-transform ease 150ms;
  transition: opacity ease 150ms, -webkit-transform ease 150ms;
  transition: opacity ease 150ms, transform ease 150ms;
  transition: opacity ease 150ms, transform ease 150ms, -webkit-transform ease 150ms;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.button-with-tooltip:hover .button-with-tooltip__tooltip,
.button-with-tooltip:focus .button-with-tooltip__tooltip {
  opacity: 1;
  -webkit-transform: translateY(1.2rem);
      -ms-transform: translateY(1.2rem);
          transform: translateY(1.2rem);
}

.button-with-tooltip__tooltip:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-grey-darker);
  position: absolute;
  top: -6px;
  right: 2.2rem;
  margin-left: -3px;
}

/**
 * Animated squiggle
 */

.animated-squiggle {
  margin-top: -10rem;
  pointer-events: none;
}

.breakpoint-tablet-wide .animated-squiggle,
.breakpoint-tablet .animated-squiggle {
  margin-top: -6rem;
}

.breakpoint-phone .animated-squiggle,
.breakpoint-phone-small .animated-squiggle {
  margin-top: -4rem;
}

.animated-squiggle svg {
  height: 35rem;
  width: 100%;
}

.breakpoint-tablet-wide .animated-squiggle svg,
.breakpoint-tablet .animated-squiggle svg {
  height: 20rem;
}

.breakpoint-phone .animated-squiggle svg,
.breakpoint-phone-small .animated-squiggle svg {
  height: 10rem;
}

.animated-squiggle path {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
}

.breakpoint-phone .animated-squiggle path,
.breakpoint-phone-small .animated-squiggle path {
  stroke-width: 4px;
}

.animated-squiggle--is-visible path {
  -webkit-animation: dash 1.5s linear forwards;
          animation: dash 1.5s linear forwards;
}

.breakpoint-phone .animated-squiggle--is-visible path,
.breakpoint-phone-small .animated-squiggle--is-visible path {
  -webkit-animation: dash 750ms linear forwards;
          animation: dash 750ms linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/**
 * Album banner
 */

.album-banner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
  max-height: 36rem;
}

.breakpoint-tablet-wide .album-banner .banner__inner,
.breakpoint-tablet .album-banner .banner__inner,
.breakpoint-phone .album-banner .banner__inner,
.breakpoint-phone-small .album-banner .banner__inner {
  padding-top: 0;
}

.album-banner__copy {
  padding-top: 6rem;
  position: relative;
  z-index: 1;
}

.breakpoint-w-1200 .album-banner__copy {
  padding-top: 4rem;
}

.breakpoint-tablet-wide .album-banner__copy,
.breakpoint-tablet .album-banner__copy,
.breakpoint-phone .album-banner__copy,
.breakpoint-phone-small .album-banner__copy {
  padding-top: 3rem;
}

.album-banner__date {
  margin-bottom: 1rem;
}

.breakpoint-tablet-wide .album-banner__date,
.breakpoint-tablet .album-banner__date,
.breakpoint-phone .album-banner__date,
.breakpoint-phone-small .album-banner__date {
  margin-bottom: 0.8rem;
}

.album-banner__artist {
  font-size: 2.6rem;
}

.breakpoint-tablet-wide .album-banner__artist,
.breakpoint-tablet .album-banner__artist {
  font-size: 2rem;
  padding-bottom: 0.3rem;
}

.breakpoint-phone .album-banner__artist,
.breakpoint-phone-small .album-banner__artist {
  font-size: 1.8rem;
  padding-bottom: 0.3rem;
}

.album-banner__heading {
  font-size: 5rem;
  font-weight: bold;
  line-height: 1.1;
  padding-bottom: 2rem;
}

.breakpoint-tablet-wide .album-banner__heading,
.breakpoint-tablet .album-banner__heading {
  font-size: 3.6rem;
  padding-bottom: 1rem;
}

.breakpoint-phone .album-banner__heading,
.breakpoint-phone-small .album-banner__heading {
  font-size: 2.8rem;
  padding-bottom: 1rem;
}

.album-banner__label {
  font-size: 2rem;
}

.breakpoint-tablet-wide .album-banner__label,
.breakpoint-tablet .album-banner__label {
  font-size: 1.8rem;
}

.breakpoint-phone .album-banner__label,
.breakpoint-phone-small .album-banner__label {
  font-size: 1.6rem;
}

/**
 * Album of the week
 */

.feature-album {
  padding-top: 3rem;
}

.feature-album__copy {
  padding-right: 4rem;
}

.breakpoint-tablet-wide .feature-album__copy,
.breakpoint-tablet .feature-album__copy {
  padding-right: 3rem;
}

.breakpoint-phone .feature-album__copy,
.breakpoint-phone-small .feature-album__copy {
  padding-right: 0;
}

.feature-album__button {
  display: block;
  float: right;
  padding-top: 1rem;
  padding-left: 3rem;
  padding-bottom: 3rem;
  text-decoration: none;
}

.feature-album__button img {
  display: block;
  width: 12rem;
  height: 12rem;
}

.feature-album__button-text {
  padding-top: 0.8rem;
  font-size: 1.2rem;
  position: relative;
}

.feature-album__button-text span {
  content: "";
  background-color: var(--color-red);
  border-radius: 50%;
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  position: relative;
  margin-right: 0.6rem;
}

.feature-album__button-text span svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -4px;
  width: 10px;
  height: 12px;
}

.feature-album__button-text span svg path {
  fill: var(--color-white);
}

.feature-album__tracks {
  margin-top: -28rem;
}

.feature-album__tracks .audio-summary__actions {
  padding-bottom: 4.5rem;
}

.breakpoint-tablet-wide .feature-album__tracks,
.breakpoint-tablet .feature-album__tracks {
  margin-top: -2rem;
}

.breakpoint-phone .feature-album__tracks,
.breakpoint-phone-small .feature-album__tracks {
  margin-top: 0;
}

.feature-album__tags .tags-list {
  text-align: left;
}

/**
 * Compact banner
 */

.compact-banner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
  max-height: 36rem;
}

.breakpoint-tablet-wide .compact-banner .banner__inner,
.breakpoint-tablet .compact-banner .banner__inner,
.breakpoint-phone .compact-banner .banner__inner,
.breakpoint-phone-small .compact-banner .banner__inner {
  padding-top: 0;
}

.compact-banner__copy {
  padding-top: 6rem;
  position: relative;
  z-index: 1;
}

.breakpoint-w-1200 .compact-banner__copy {
  padding-top: 4rem;
}

.breakpoint-tablet-wide .compact-banner__copy,
.breakpoint-tablet .compact-banner__copy,
.breakpoint-phone .compact-banner__copy,
.breakpoint-phone-small .compact-banner__copy {
  padding-top: 3rem;
}

.compact-banner__date {
  margin-bottom: 1rem;
}

.breakpoint-tablet-wide .compact-banner__date,
.breakpoint-tablet .compact-banner__date,
.breakpoint-phone .compact-banner__date,
.breakpoint-phone-small .compact-banner__date {
  margin-bottom: 0.8rem;
}

.compact-banner__artist {
  font-size: 2.6rem;
}

.breakpoint-tablet-wide .compact-banner__artist,
.breakpoint-tablet .compact-banner__artist {
  font-size: 2rem;
  padding-bottom: 0.3rem;
}

.breakpoint-phone .compact-banner__artist,
.breakpoint-phone-small .compact-banner__artist {
  font-size: 1.8rem;
  padding-bottom: 0.3rem;
}

.compact-banner__heading {
  font-size: 5rem;
  font-weight: bold;
  line-height: 1.1;
  padding-bottom: 2rem;
}

.breakpoint-tablet-wide .compact-banner__heading,
.breakpoint-tablet .compact-banner__heading {
  font-size: 3.6rem;
  padding-bottom: 1rem;
}

.breakpoint-phone .compact-banner__heading,
.breakpoint-phone-small .compact-banner__heading {
  font-size: 2.8rem;
  padding-bottom: 1rem;
}

.compact-banner__label {
  font-size: 2rem;
}

.breakpoint-tablet-wide .compact-banner__label,
.breakpoint-tablet .compact-banner__label {
  font-size: 1.8rem;
}

.breakpoint-phone .compact-banner__label,
.breakpoint-phone-small .compact-banner__label {
  font-size: 1.6rem;
}

/**
 * Summary inset
 */

.summary-inset {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: 4px;
  height: 17.2rem;
  max-width: 77rem;
  position: relative;
  z-index: 5;
}

.breakpoint-phone .summary-inset,
.breakpoint-phone-small .summary-inset {
  border-radius: 4px;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.breakpoint-phone .summary-inset--placeholder,
.breakpoint-phone-small .summary-inset--placeholder {
  height: 17.2rem;
}

.summary-inset--no-border {
  border-color: transparent;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.summary-inset--with-image {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.summary-inset--with-tracks {
  height: auto;
}

.summary-inset__banner {
  background-color: var(--color-grey-light);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-left: -1px;
  margin-right: -1px;
  margin-top: -1px;
  height: 26rem;
  overflow: hidden;
  position: relative;
}

.summary-inset__banner--no-image {
  height: 18rem;
}

.summary-inset__banner-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  opacity: 0.1;
  max-width: 100%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

.summary-inset__banner-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.summary-inset__artwork {
  -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -11rem;
  margin-top: -11rem;
  width: 22rem;
  height: 22rem;
  z-index: 3;
}

.summary-inset__artwork--no-image {
  -webkit-box-shadow: none;
          box-shadow: none;
  background-image: url(/assets/main/assets/public/scalable-image/logo.178f0c74.svg);
  background-size: 111px 40px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  margin-left: -7rem;
  margin-top: -7rem;
  width: 14rem;
  height: 14rem;
}

.summary-inset__image-container {
  overflow: hidden;
  float: left;
  width: 17rem;
}

.breakpoint-phone .summary-inset__image-container,
.breakpoint-phone-small .summary-inset__image-container {
  display: none;
}

.summary-inset__image {
  max-width: 100%;
}

.summary-inset__content {
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.summary-inset--with-image .summary-inset__content {
  float: left;
  width: calc(100% - 17rem);
}

.breakpoint-phone .summary-inset__content,
.breakpoint-phone-small .summary-inset__content {
  display: block;
  padding-top: 2rem;
  padding-bottom: 2rem;
  height: auto;
  width: 100%;
}

.summary-inset--with-tracks .summary-inset__content {
  height: auto;
  padding-top: 4rem;
}

.breakpoint-phone .summary-inset--with-tracks .summary-inset__content,
.breakpoint-phone-small .summary-inset--with-tracks .summary-inset__content {
  padding-top: 3rem;
}

.summary-inset__play-progress {
  border-radius: 4px;
  background-color: #f5f5f5;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
}

.summary-inset--with-image .summary-inset__play-progress {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.breakpoint-phone .summary-inset__play-progress,
.breakpoint-phone-small .summary-inset__play-progress {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.summary-inset__content-inner {
  float: left;
  font-size: 1.8rem;
  padding-right: 3rem;
  padding-left: 3rem;
  position: relative;
}

.summary-inset--with-image .summary-inset__content-inner {
  max-width: 80%;
}

.summary-inset__buttons {
  float: left;
  padding-left: 3rem;
  position: relative;
}

.breakpoint-phone .summary-inset__buttons,
.breakpoint-phone-small .summary-inset__buttons {
  width: 100%;
  margin-bottom: 2rem;
}

.breakpoint-tablet-wide .summary-inset__content-inner,
.breakpoint-tablet .summary-inset__content-inner,
.breakpoint-phone .summary-inset__content-inner,
.breakpoint-phone-small .summary-inset__content-inner {
  padding-right: 3rem;
  font-size: 1.6rem;
}

.breakpoint-tablet .summary-inset--with-image .summary-inset__content-inner {
  max-width: 70%;
}

.breakpoint-phone .summary-inset--with-image .summary-inset__content-inner,
.breakpoint-phone-small
  .summary-inset--with-image
  .summary-inset__content-inner {
  max-width: 100%;
}

.summary-inset__button {
  display: block;
  text-align: left;
}

.breakpoint-phone .summary-inset__button,
.breakpoint-phone-small .summary-inset__button {
  float: left;
  margin-right: 1rem;
}

.summary-inset__play-button {
  margin-bottom: 1rem;
}

.breakpoint-phone .summary-inset__play-button,
.breakpoint-phone-small .summary-inset__play-button {
  left: 2rem;
}

.summary-inset__title {
}

.summary-inset__meta {
  padding-top: 0.4rem;
}

.summary-inset__meta em {
  display: inline-block;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.summary-inset__actions {
  font-size: 1.5rem;
  padding-top: 1rem;
}

.breakpoint-tablet-wide .summary-inset__actions,
.breakpoint-tablet .summary-inset__actions,
.breakpoint-phone .summary-inset__actions,
.breakpoint-phone-small .summary-inset__actions {
  font-size: 1.4rem;
  padding-top: 1.6rem;
}

.summary-inset__action {
  display: block;
  float: left;
  position: relative;
}

.breakpoint-phone .summary-inset__action,
.breakpoint-phone-small .summary-inset__action {
  float: none;
  padding-top: 0.3rem;
}

.summary-inset__action:hover > span,
.summary-inset__action:focus > span,
.summary-inset__action:hover .summary-inset__action-button,
.summary-inset__action:focus .summary-inset__action-button {
  color: var(--color-red);
  text-decoration: underline;
}

.summary-inset__action a {
  color: currentColor;
  text-decoration: none;
}

.summary-inset__actions em {
  display: block;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.breakpoint-phone .summary-inset__actions em,
.breakpoint-phone-small .summary-inset__actions em {
  display: none;
}

.summary-inset__action-button {
  display: block;
  text-align: left;
  position: relative;
}

.summary-inset__dropdown {
  display: none;
}

.summary-inset__action-button--active .summary-inset__dropdown {
  display: block;
  position: absolute;
}

.summary-inset__tracks,
.copy .summary-inset__tracks {
  border-top: 1px solid var(--color-grey-lightest);
  margin-left: 3rem;
  margin-right: 3rem;
  margin-top: 3rem;
  padding-left: 0;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.breakpoint-phone .summary-inset__tracks,
.breakpoint-phone-small .summary-inset__tracks {
  margin-top: 2rem;
  padding-top: 1rem;
}

.summary-inset__track {
  font-size: 1.5rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  position: relative;
}

.breakpoint-phone .summary-inset__track,
.breakpoint-phone-small .summary-inset__track {
  font-size: 1.4rem;
  padding-left: 0;
}

.summary-inset__track:last-of-type {
  padding-bottom: 0;
}

.summary-inset__track > div {
  margin-right: 1rem;
}

.summary-inset__track-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.breakpoint-phone .summary-inset__track-content {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.breakpoint-phone .summary-inset__track [data-view-playable] {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-right: 0;
  margin-left: 1rem;
}

.summary-inset__track-content--no-player {
  margin-left: 7.5rem;
}

.breakpoint-phone .summary-inset__track-content--no-player {
  margin-left: 0;
}

.summary-inset__track-title {
  color: var(--color-grey-darker);
  font-size: 1.5rem;
  padding-right: 1rem;
}

.summary-inset__track-artist {
  color: var(--color-grey);
  font-size: 1.5rem;
  float: right;
  padding-left: 1rem;
  text-align: right;
}

.breakpoint-phone .summary-inset__track-artist {
  float: none;
  text-align: left;
  padding-left: 0;
  display: block;
}

.summary-inset__track--search {
  padding-top: 0;
  padding-bottom: 2rem;
}

.summary-inset__track--footer-search {
  padding-top: 2rem;
}

.summary-inset__search-form {
  border-bottom: 1px solid var(--color-grey-lightest);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 4.1rem;
}

.summary-inset__search-input {
  border: none;
  color: var(--color-grey-darker);
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  height: 4rem;
  padding-left: 1rem;
  width: calc(100% - 4rem);
}

.fonts-loaded .summary-inset__search-input {
  font-family: var(--font-alternate);
}

.breakpoint-phone .summary-inset__search-input,
.breakpoint-phone-small .summary-inset__search-input {
  font-size: 1.4rem;
}

.summary-inset__inline-search-option {
  background-color: var(--color-white);
  border: none;
  font-family: var(--font-alternate-fallback);
  font-size: 1.5rem;
  height: 3.8rem;
}

.fonts-loaded .summary-inset__inline-search-option {
  font-family: var(--font-alternate);
}

.summary-inset__search-input::-webkit-input-placeholder {
  color: var(--color-grey);
}

.summary-inset__search-input::-moz-placeholder {
  color: var(--color-grey);
}

.summary-inset__search-input:-ms-input-placeholder {
  color: var(--color-grey);
}

.summary-inset__search-input::-ms-input-placeholder {
  color: var(--color-grey);
}

.summary-inset__search-input::placeholder {
  color: var(--color-grey);
}

.summary-inset__search-button {
  width: 4rem;
  height: 4rem;
}

.summary-inset__search-button:hover svg path {
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.summary-inset__search-button:hover svg path,
.summary-inset__search-button:focus svg path {
  fill: var(--color-red);
}

.summary-inset__subscribe {
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#feb740));
  background-image: linear-gradient(to right, #fa709a, #feb740);
  border-radius: 4px;
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right: -1px;
  z-index: 3;
}

.summary-inset__subscribe-inner {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  text-align: center;
  width: 80%;
}

.breakpoint-tablet-wide .summary-inset__subscribe-inner,
.breakpoint-tablet .summary-inset__subscribe-inner,
.breakpoint-phone .summary-inset__subscribe-inner,
.breakpoint-phone-small .summary-inset__subscribe-inner {
  padding-left: 2rem;
  padding-right: 2rem;
  width: 100%;
}

.summary-inset__subscribe-heading {
  font-size: 2.2rem;
  padding-bottom: 0.6rem;
}

.breakpoint-tablet-wide .summary-inset__subscribe-heading,
.breakpoint-tablet .summary-inset__subscribe-heading {
  font-size: 2rem;
}

.breakpoint-phone .summary-inset__subscribe-heading,
.breakpoint-phone-small .summary-inset__subscribe-heading {
  font-size: 1.6rem;
}

.summary-inset__subscribe-heading .flag-label {
  margin-left: 0.6rem;
  -webkit-transform: translateY(-0.2rem);
      -ms-transform: translateY(-0.2rem);
          transform: translateY(-0.2rem);
}

.summary-inset__subscribe-action {
  font-size: 1.8rem;
}

.breakpoint-tablet-wide .summary-inset__subscribe-action,
.breakpoint-tablet .summary-inset__subscribe-action,
.breakpoint-phone .summary-inset__subscribe-action,
.breakpoint-phone-small .summary-inset__subscribe-action {
  font-size: 1.4rem;
}

.summary-inset__subscribe a {
  color: var(--color-white);
}

.summary-inset__subscribe-mask {
  background-image: linear-gradient(
    65deg,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.8)
  );
  clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: var(--color-white);
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  width: 8rem;
  z-index: 4;
}

.breakpoint-tablet-wide .summary-inset__subscribe-mask,
.breakpoint-tablet .summary-inset__subscribe-mask,
.breakpoint-phone .summary-inset__subscribe-mask,
.breakpoint-phone-small .summary-inset__subscribe-mask {
  display: none;
}

.summary-inset__subscribe-mask > .action {
  -webkit-transform: translateX(-0.6rem);
      -ms-transform: translateX(-0.6rem);
          transform: translateX(-0.6rem);
}

/**
 * Subscriber discounts
 */

.subscriber-discounters-banner {
  max-height: 45rem;
}

.subscriber-discounters-banner__copy {
  width: 55%;
}

.breakpoint-w-1200 .subscriber-discounters-banner__copy {
  width: 70%;
}

.breakpoint-phone .subscriber-discounters-banner__copy,
.breakpoint-phone-small .subscriber-discounters-banner__copy {
  width: 100%;
}

.subscriber-discounters-banner__emoji {
  font-size: 4rem;
  padding-top: 4rem;
}

.breakpoint-tablet-wide .subscriber-discounters-banner__emoji,
.breakpoint-tablet .subscriber-discounters-banner__emoji {
  font-size: 3rem;
  padding-bottom: 3rem;
}

.breakpoint-phone .subscriber-discounters-banner__emoji,
.breakpoint-phone-small .subscriber-discounters-banner__emoji {
  font-size: 4rem;
  margin-top: -1rem;
  padding-bottom: 3rem;
}

.subscriber-discounters-banner__emoji span {
  display: inline-block;
  padding-left: 1rem;
  padding-right: 1rem;
}

.subscriber-discounters {
  padding-top: 4rem;
}

.breakpoint-phone .subscriber-discounters,
.breakpoint-phone-small .subscriber-discounters {
  padding-top: 3rem;
}

.subscriber-discounters__button {
  width: 100%;
}

.subscriber-discounters__button svg {
  -webkit-transform: rotate(-90deg) translateX(1px);
      -ms-transform: rotate(-90deg) translateX(1px);
          transform: rotate(-90deg) translateX(1px);
}

.subscriber-discounters__button--active svg {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.subscriber-discounters__button em {
  display: none;
}

.subscriber-discounters__button--active span {
  display: none;
}

.subscriber-discounters__button--active em {
  display: inline-block;
}

.breakpoint-phone .subscriber-discounters .page-tree,
.breakpoint-phone-small .subscriber-discounters .page-tree {
  display: none;
  padding-top: 2rem;
}

.breakpoint-phone .subscriber-discounters__button--active + .page-tree,
.breakpoint-phone-small .subscriber-discounters__button--active + .page-tree {
  display: block;
}

.subscriber-discounters__top {
  font-size: 1.5rem;
}

/**
 * Subscriber discount
 */

.subscriber-discount {
  padding-bottom: 10rem;
  overflow: hidden;
}

.breakpoint-tablet-wide .subscriber-discount,
.breakpoint-tablet .subscriber-discount,
.breakpoint-phone .subscriber-discount,
.breakpoint-phone-small .subscriber-discount {
  padding-bottom: 8rem;
}

.subscriber-discount__banner {
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
}

.breakpoint-tablet-wide .subscriber-discount__banner,
.breakpoint-tablet .subscriber-discount__banner {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.breakpoint-phone .subscriber-discount__banner,
.breakpoint-phone-small .subscriber-discount__banner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
  padding-top: 3rem;
  padding-bottom: 4rem;
  margin-bottom: 2rem;
}

.subscriber-discount__banner-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

.subscriber-discount__banner-background img {
  display: block;
  -webkit-transform: translateY(-15%);
      -ms-transform: translateY(-15%);
          transform: translateY(-15%);
  -webkit-filter: grayscale(100%);
  opacity: 0.1;
  width: 100%;
}

.subscriber-discount__banner-content {
  position: relative;
  z-index: 2;
}

.subscriber-discount__title {
  font-size: 4.4rem;
  font-weight: bold;
  line-height: 1.1;
}

.breakpoint-w-1200 .subscriber-discount__title {
  font-size: 4rem;
}

.breakpoint-tablet-wide .subscriber-discount__title {
  font-size: 3.6rem;
}

.breakpoint-tablet .subscriber-discount__title {
  font-size: 3.4rem;
}

.breakpoint-phone .subscriber-discount__title,
.breakpoint-phone-small .subscriber-discount__title {
  font-size: 2.8rem;
}

.subscriber-discount__address {
  font-size: 1.8rem;
  padding-top: 1rem;
}

.breakpoint-tablet-wide .subscriber-discount__address,
.breakpoint-tablet .subscriber-discount__address {
  font-size: 1.6rem;
}

.breakpoint-phone .subscriber-discount__address,
.breakpoint-phone-small .subscriber-discount__address {
  font-size: 1.4rem;
}

.subscriber-discount__phone-and-website {
  font-size: 1.8rem;
  padding-top: 0.8rem;
}

.breakpoint-tablet-wide .subscriber-discount__phone-and-website,
.breakpoint-tablet .subscriber-discount__phone-and-website {
  font-size: 1.6rem;
}

.breakpoint-phone .subscriber-discount__phone-and-website,
.breakpoint-phone-small .subscriber-discount__phone-and-website {
  font-size: 1.4rem;
  padding-top: 1.2rem;
}

.subscriber-discount__phone-and-website a {
  color: var(--color-white);
}

.subscriber-discount__phone-and-website span {
  padding-right: 0.6rem;
}

.subscriber-discount__phone-and-website svg {
  -webkit-transform: scale(0.8) translateY(3px);
      -ms-transform: scale(0.8) translateY(3px);
          transform: scale(0.8) translateY(3px);
}

.breakpoint-phone .subscriber-discount__phone-and-website svg,
.breakpoint-phone-small .subscriber-discount__phone-and-website svg {
  -webkit-transform: scale(0.6) translateY(1px);
      -ms-transform: scale(0.6) translateY(1px);
          transform: scale(0.6) translateY(1px);
}

.subscriber-discount__phone-and-website path {
  fill: var(--color-white);
}

.subscriber-discount__phone {
  float: left;
  padding-right: 2rem;
}

.subscriber-discount__website {
  float: left;
}

.subscriber-discount__sidebar {
  position: relative;
  padding-top: 5rem;
  padding-right: 2rem;
}

.breakpoint-w-1200 .subscriber-discount__sidebar {
  padding-left: 0;
  padding-right: 0;
}

.breakpoint-tablet-wide .subscriber-discount__sidebar,
.breakpoint-tablet .subscriber-discount__sidebar {
  padding-top: 3rem;
}

.breakpoint-phone .subscriber-discount__sidebar,
.breakpoint-phone-small .subscriber-discount__sidebar {
  padding-top: 0;
}

.subscriber-discount__sidebar:before {
  background-color: var(--color-grey-lightest);
  content: "";
  width: 1px;
  height: 6rem;
  position: absolute;
  top: -3rem;
  left: 50%;
}

.breakpoint-tablet-wide .subscriber-discount__sidebar:before,
.breakpoint-tablet .subscriber-discount__sidebar:before,
.breakpoint-phone .subscriber-discount__sidebar:before,
.breakpoint-phone-small .subscriber-discount__sidebar:before {
  display: none;
}

.subscriber-discount__map {
  margin-top: -17rem;
  position: relative;
  z-index: 2;
}

.breakpoint-tablet-wide .subscriber-discount__map,
.breakpoint-tablet .subscriber-discount__map {
  margin-top: -8rem;
}

.breakpoint-phone .subscriber-discount__map,
.breakpoint-phone-small .subscriber-discount__map {
  margin-top: 2rem;
}

.subscriber-discount__map .map-embed:before {
  padding-top: 65%;
}

.breakpoint-tablet-wide .subscriber-discount__map .map-embed:before,
.breakpoint-tablet .subscriber-discount__map .map-embed:before,
.breakpoint-phone .subscriber-discount__map .map-embed:before,
.breakpoint-phone-small .subscriber-discount__map .map-embed:before {
  padding-top: 100%;
}

.subscriber-discount__tags .tags-list {
  text-align: left;
}

.card-payment-block--hidden {
  display: none;
}

/**
 * Player
 */

.player {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-lightest);
  border-radius: 50px;
  position: relative;
  width: 100%;
}

.breakpoint-tablet-wide .masthead__player .player,
.breakpoint-tablet .masthead__player .player {
  padding: 0.5rem;
}

.breakpoint-phone .masthead__player .player,
.breakpoint-phone-small .masthead__player .player {
  background-color: transparent;
  border: none;
  border-radius: 0;
  height: 5.6rem;
}

.player--is-playing,
.breakpoint-phone .masthead__player .player--is-playing,
.breakpoint-phone-small .masthead__player .player--is-playing {
  background-color: var(--color-red);
  border-color: var(--color-red);
}

.player__play-button-wrapper {
  padding: 1rem;
}

.player__play-button {
  background-color: #eee;
  border: 1px solid #eee;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  min-width: 4rem;
  max-height: 4rem;
  -webkit-transition: background-color 150ms ease, border-color 150ms ease;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.player__play-button-wrapper:hover .player__play-button,
.player__play-button-wrapper:focus .player__play-button,
.player--sidebar:hover .player__play-button,
.player--sidebar:focus .player__play-button {
  background-color: var(--color-red);
  border-color: var(--color-red);
}

.player--is-playing .player__play-button,
.player--is-playing .player__play-button-wrapper:hover .player__play-button,
.player--is-playing .player__play-button-wrapper:focus .player__play-button,
.player--is-playing.player--sidebar:hover .player__play-button,
.player--is-playing.player--sidebar:focus .player__play-button {
  background-color: var(--color-white);
  border-color: var(--color-white);
}

.breakpoint-phone .masthead__player .player__play-button,
.breakpoint-phone-small .masthead__player .player__play-button {
  width: 3.6rem;
  height: 3.6rem;
  min-width: 3.6rem;
  max-height: 3.6rem;
}

.player__loading-icon {
  border: 0.3rem solid transparent;
  border-left-color: var(--color-grey-dark);
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  -webkit-animation: spin 0.5s ease-in-out infinite;
          animation: spin 0.5s ease-in-out infinite;
}

.player__play-button-wrapper:hover .player__loading-icon,
.player__play-button-wrapper:focus .player__loading-icon,
.player--sidebar:hover .player__loading-icon,
.player--sidebar:focus .player__loading-icon {
  border-left-color: var(--color-white);
}

.player--is-playing .player__loading-icon,
.player--is-playing .player__play-button-wrapper:hover .player__loading-icon,
.player--is-playing .player__play-button-wrapper:focus .player__loading-icon,
.player--is-playing.player--sidebar:hover .player__loading-icon,
.player--is-playing.player--sidebar:focus .player__loading-icon {
  border-left-color: var(--color-grey-dark);
}

.player__play-icon,
.player__pause-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.player__play-icon {
  -webkit-transform: translateX(2px);
      -ms-transform: translateX(2px);
          transform: translateX(2px);
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.player .player__play-button-wrapper:hover .player__play-icon path,
.player .player__play-button-wrapper:focus .player__play-icon path,
.player.player--sidebar:hover .player__play-icon path,
.player.player--sidebar:focus .player__play-icon path {
  fill: var(--color-white);
}

.player--is-playing .player__pause-icon path,
.player--is-playing .player__play-button-wrapper:hover .player__pause-icon path,
.player--is-playing .player__play-button-wrapper:focus .player__pause-icon path,
.player--is-playing.player--sidebar:hover .player__pause-icon path,
.player--is-playing.player--sidebar:focus .player__pause-icon path {
  fill: var(--color-grey-dark);
}

.player__loading-icon,
.player__pause-icon,
.player--is-playing .player__play-icon {
  display: none;
}

.player--is-playing .player__pause-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.player--is-loading .player__loading-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.player--is-loading .player__play-icon,
.player--is-loading .player__pause-icon {
  display: none;
}

player- {
  display: block;
  min-height: 16rem;
}

.player__details {
  display: block;
  padding: 1rem 1rem 1rem 0.2rem;
  text-align: left;
  width: calc(100% - 7rem - 0.2rem);
}

.player__target {
  margin-top: -1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.player__on-air {
  color: var(--color-red);
  display: block;
  font-size: 1.1rem;
  margin-top: -2px;
}

.player--is-playing .player__on-air {
  color: var(--color-white);
}

.player__title {
  color: var(--color-grey-darkest);
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
}

.breakpoint-phone .masthead__player .player__title,
.breakpoint-phone-small .masthead__player .player__title {
  color: var(--color-white);
}

.player__subtitle {
  color: var(--color-grey-dark);
  display: block;
  font-size: 1.3rem;
}

.breakpoint-phone .masthead__player .player__subtitle,
.breakpoint-phone-small .masthead__player .player__subtitle {
  color: var(--color-grey-lightest);
  color: rgba(255, 255, 255, 0.8);
}

.player__title,
.player__subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  35% {
    -webkit-transform: rotate(2deg) scale(1.05);
            transform: rotate(2deg) scale(1.05);
  }
  45% {
    -webkit-transform: rotate(-2deg) scale(1.05);
            transform: rotate(-2deg) scale(1.05);
  }
  55% {
    -webkit-transform: rotate(-2deg) scale(1.05);
            transform: rotate(-2deg) scale(1.05);
  }
  65% {
    -webkit-transform: rotate(2deg) scale(1.05);
            transform: rotate(2deg) scale(1.05);
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
}

@keyframes wiggle {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  35% {
    -webkit-transform: rotate(2deg) scale(1.05);
            transform: rotate(2deg) scale(1.05);
  }
  45% {
    -webkit-transform: rotate(-2deg) scale(1.05);
            transform: rotate(-2deg) scale(1.05);
  }
  55% {
    -webkit-transform: rotate(-2deg) scale(1.05);
            transform: rotate(-2deg) scale(1.05);
  }
  65% {
    -webkit-transform: rotate(2deg) scale(1.05);
            transform: rotate(2deg) scale(1.05);
  }
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
}

.breakpoint-not-phone .player--wiggle {
  -webkit-animation: wiggle 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.2) infinite;
          animation: wiggle 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.2) infinite;
}

.player--is-playing .player__title,
.player--is-playing .player__subtitle {
  color: var(--color-white);
}

.player__no-duration {
  height: 1.8rem;
}

.player__toggle {
  background: transparent;
  border: 1px solid transparent;
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
}

.player__toggle svg {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 75ms;
  transition: -webkit-transform 75ms;
  transition: transform 75ms;
  transition: transform 75ms, -webkit-transform 75ms;
}

.player__toggle--is-playing path {
  fill: var(--color-white);
}

.player__details:hover .player__toggle svg,
.player__details:focus .player__toggle svg {
  -webkit-transform: translateX(4px);
      -ms-transform: translateX(4px);
          transform: translateX(4px);
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.player-advertisement {
  margin-left: auto;
  margin-right: auto;
  max-height: 65px;
  max-width: 310px;
}

.breakpoint-desktop .player-advertisement,
.breakpoint-widescreen .player-advertisement {
  margin-left: -2rem;
  margin-right: -2rem;
}

.player-advertisement img {
  display: block;
  width: 100%;
}

/* Abstract player */

[data-view-abstract-player] {
  margin-top: -1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/**
 * Player bars
 */

.player-bars {
}

.player-bars .bar {
  height: 8px;
}

.player--is-playing .player-bars .bar {
  fill: var(--color-white);
}

.player-bars #bar-1 {
  -webkit-transform: translate(0, 4px);
      -ms-transform: translate(0, 4px);
          transform: translate(0, 4px);
}

.player--is-playing:not(.player--is-loading) .player-bars #bar-1 {
  -webkit-animation: bar-1 1200ms infinite cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
          animation: bar-1 1200ms infinite cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
}

.player-bars #bar-2 {
  -webkit-transform: translate(3px, 3px);
      -ms-transform: translate(3px, 3px);
          transform: translate(3px, 3px);
}

.player--is-playing:not(.player--is-loading) .player-bars #bar-2 {
  -webkit-animation: bar-2 1200ms infinite cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
          animation: bar-2 1200ms infinite cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
}

.player-bars #bar-3 {
  -webkit-transform: translate(6px, 1px);
      -ms-transform: translate(6px, 1px);
          transform: translate(6px, 1px);
}

.player--is-playing:not(.player--is-loading) .player-bars #bar-3 {
  -webkit-animation: bar-3 1200ms infinite cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
          animation: bar-3 1200ms infinite cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
}

.player-bars #bar-4 {
  -webkit-transform: translate(9px, 0);
      -ms-transform: translate(9px, 0);
          transform: translate(9px, 0);
}

.player--is-playing:not(.player--is-loading) .player-bars #bar-4 {
  -webkit-animation: bar-4 1200ms infinite cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
          animation: bar-4 1200ms infinite cubic-bezier(0.335, 0.015, 0.25, 1) forwards;
}

/**
 * Keyframes
 */

@-webkit-keyframes bar-1 {
  0%,
  100% {
    -webkit-transform: translate(0, 4px);
            transform: translate(0, 4px);
  }
  20% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  40% {
    -webkit-transform: translate(0, 2px);
            transform: translate(0, 2px);
  }
  60% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
  80% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
}

@keyframes bar-1 {
  0%,
  100% {
    -webkit-transform: translate(0, 4px);
            transform: translate(0, 4px);
  }
  20% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  40% {
    -webkit-transform: translate(0, 2px);
            transform: translate(0, 2px);
  }
  60% {
    -webkit-transform: translate(0, 5px);
            transform: translate(0, 5px);
  }
  80% {
    -webkit-transform: translate(0, 3px);
            transform: translate(0, 3px);
  }
}

@-webkit-keyframes bar-2 {
  0%,
  100% {
    -webkit-transform: translate(3px, 3px);
            transform: translate(3px, 3px);
  }
  20% {
    -webkit-transform: translate(3px, 6px);
            transform: translate(3px, 6px);
  }
  40% {
    -webkit-transform: translate(3px, 2px);
            transform: translate(3px, 2px);
  }
  60% {
    -webkit-transform: translate(3px, 0);
            transform: translate(3px, 0);
  }
  80% {
    -webkit-transform: translate(3px, 4px);
            transform: translate(3px, 4px);
  }
}

@keyframes bar-2 {
  0%,
  100% {
    -webkit-transform: translate(3px, 3px);
            transform: translate(3px, 3px);
  }
  20% {
    -webkit-transform: translate(3px, 6px);
            transform: translate(3px, 6px);
  }
  40% {
    -webkit-transform: translate(3px, 2px);
            transform: translate(3px, 2px);
  }
  60% {
    -webkit-transform: translate(3px, 0);
            transform: translate(3px, 0);
  }
  80% {
    -webkit-transform: translate(3px, 4px);
            transform: translate(3px, 4px);
  }
}

@-webkit-keyframes bar-3 {
  0%,
  100% {
    -webkit-transform: translate(6px, 1px);
            transform: translate(6px, 1px);
  }
  20% {
    -webkit-transform: translate(6px, 2px);
            transform: translate(6px, 2px);
  }
  40% {
    -webkit-transform: translate(6px, 5px);
            transform: translate(6px, 5px);
  }
  60% {
    -webkit-transform: translate(6px, 3px);
            transform: translate(6px, 3px);
  }
  80% {
    -webkit-transform: translate(6px, 0);
            transform: translate(6px, 0);
  }
}

@keyframes bar-3 {
  0%,
  100% {
    -webkit-transform: translate(6px, 1px);
            transform: translate(6px, 1px);
  }
  20% {
    -webkit-transform: translate(6px, 2px);
            transform: translate(6px, 2px);
  }
  40% {
    -webkit-transform: translate(6px, 5px);
            transform: translate(6px, 5px);
  }
  60% {
    -webkit-transform: translate(6px, 3px);
            transform: translate(6px, 3px);
  }
  80% {
    -webkit-transform: translate(6px, 0);
            transform: translate(6px, 0);
  }
}

@-webkit-keyframes bar-4 {
  0%,
  100% {
    -webkit-transform: translate(9px, 0);
            transform: translate(9px, 0);
  }
  20% {
    -webkit-transform: translate(9px, 4px);
            transform: translate(9px, 4px);
  }
  40% {
    -webkit-transform: translate(9px, 7px);
            transform: translate(9px, 7px);
  }
  60% {
    -webkit-transform: translate(9px, 0);
            transform: translate(9px, 0);
  }
  80% {
    -webkit-transform: translate(9px, 3px);
            transform: translate(9px, 3px);
  }
}

@keyframes bar-4 {
  0%,
  100% {
    -webkit-transform: translate(9px, 0);
            transform: translate(9px, 0);
  }
  20% {
    -webkit-transform: translate(9px, 4px);
            transform: translate(9px, 4px);
  }
  40% {
    -webkit-transform: translate(9px, 7px);
            transform: translate(9px, 7px);
  }
  60% {
    -webkit-transform: translate(9px, 0);
            transform: translate(9px, 0);
  }
  80% {
    -webkit-transform: translate(9px, 3px);
            transform: translate(9px, 3px);
  }
}

/**
 * Player panel
 */

.player-panel {
  background-color: #222;
  -webkit-overflow-scrolling: touch;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  -webkit-transition: opacity, -webkit-transform;
  transition: opacity, -webkit-transform;
  transition: opacity, transform;
  transition: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 400ms, 250ms;
          transition-duration: 400ms, 250ms;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
          transform: translateY(-50px);
}

.player-panel.overflow-scrollable {
  overflow: hidden;
}

.player-panel--active {
  opacity: 1;
  pointer-events: all;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.player-panel--active.overflow-scrollable {
  overflow-x: hidden;
  overflow-y: scroll;
}

.breakpoint-widescreen .player-panel,
.breakpoint-desktop .player-panel {
  position: static;
  opacity: 1;
  -webkit-transition: none;
  transition: none;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.player-panel__inner {
  background-color: #222;
  color: var(--color-white);
  padding-bottom: 2rem;
  min-height: 100vh;
}

.breakpoint-phone .player-panel__inner {
  padding-bottom: 14rem;
}

.breakpoint-widescreen .player-panel--active,
.breakpoint-desktop .player-panel--active {
  opacity: 1;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.breakpoint-widescreen .player-panel__inner,
.breakpoint-desktop .player-panel__inner {
  margin-right: -31rem;
  -webkit-transition-property: margin-right;
  transition-property: margin-right;
  -webkit-transition-duration: 120ms;
          transition-duration: 120ms;
  width: 31rem;
}

.breakpoint-widescreen .player-panel--active .player-panel__inner,
.breakpoint-desktop .player-panel--active .player-panel__inner {
  margin-right: 0;
  z-index: 3;
}

.player-panel__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 150ms;
  transition: opacity 150ms;
}

.player-panel--active .player-panel__close {
  opacity: 1;
  pointer-events: all;
}

.player-panel__close span {
  display: block;
  margin-top: 2px;
  margin-left: 2px;
  width: 2.2rem;
  height: 2.2rem;
}

.player-panel__close svg {
  width: 100%;
  height: 100%;
}

.player-panel__close path {
  fill: #999;
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.player-panel__close:hover path,
.player-panel__close:focus path {
  fill: var(--color-white);
}

.player-panel__player-shim {
  height: 6rem;
  margin-bottom: 2rem;
}

.player-panel__inner {
  padding-left: 2rem;
  padding-right: 2rem;
}

.player-panel__links {
  padding-left: 4rem;
  padding-right: 4rem;
  padding-bottom: 2rem;
}

.player-panel__link {
  padding-right: 4rem;
}

.player-panel__link a {
  color: var(--color-white);
  font-size: 1.3rem;
  font-family: var(--font-alternate-fallback);
  text-decoration: none;
}

.fonts-loaded .player-panel__link a {
  font-family: var(--font-alternate);
}

.player-panel__link a:hover,
.player-panel__link a:focus {
  color: var(--color-grey-light);
}

.player-panel__tabs {
  padding-top: 2rem;
}

.player-panel__tab-buttons {
  border-bottom: 1px solid var(--color-grey);
  margin-left: -2rem;
  margin-right: -2rem;
}

.player-panel__tab-buttons-inner {
  padding-left: 2rem;
  padding-right: 2rem;
}

.player-panel__tab-button {
  text-align: left;
}

.player-panel__tab-button:first-of-type {
  padding-right: 1.2rem;
  width: 60%;
}

.player-panel__tab-button:last-of-type {
  padding-left: 1.2rem;
  width: 40%;
}

.player-panel__tab-button span {
  border-bottom: 2px solid transparent;
  display: inline-block;
  font-weight: normal;
  padding-bottom: 0.4rem;
  -webkit-transition: border-color 150ms ease;
  transition: border-color 150ms ease;
}

.player-panel__tab-button:hover span,
.player-panel__tab-button:focus span {
  border-color: var(--color-grey);
}

.player-panel__tab-button--active:hover span,
.player-panel__tab-button--active:focus span,
.player-panel__tab-button--active span {
  border-color: var(--color-white);
  font-weight: bold;
}

.player-panel__tab {
  padding-top: 1.4rem;
}

.player-panel__list {
}

.player-panel__list-item {
  border-bottom: 1px solid var(--color-grey);
}

.player-panel__list-button {
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 100%;
}

.player-panel__list-image {
  background-color: var(--color-grey-dark);
  display: block;
  width: 7rem;
  height: 7rem;
}

.player-panel__list-text {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: left;
}

.player-panel__list-meta {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
}

.player-panel__list-title {
  display: block;
  font-size: 1.4rem;
}

.player-panel__list-actions {
  margin-left: auto;
  padding-right: 2rem;
  margin-right: -2rem;
  opacity: 0;
  -webkit-transition: opacity 150ms ease;
  transition: opacity 150ms ease;
}

.player-panel__list-button:hover .player-panel__list-actions,
.player-panel__list-button:focus .player-panel__list-actions {
  opacity: 1;
}

.player-panel__heading {
  padding-top: 4rem;
  padding-bottom: 1rem;
}

/* Tabs */

.player-tabs {
  border-bottom: 1px solid var(--color-grey-dark);
  font-size: 1.4rem;
  text-align: center;
}

.player-tabs__item {
  border-bottom: 3px solid transparent;
  display: inline-block;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.player-tabs__item--selected {
  border-bottom-color: var(--color-white);
  font-weight: bold;
}

.player-tabs__item button {
  padding: 0.5rem 1rem 1rem;
}

/**
 * Player controls
 */

.player-controls {
  padding-top: 0.5rem;
}

.player-controls__icon {
  padding: 2rem 1rem;
}

.player-controls__icon[disabled] {
  opacity: 0.3;
}

.player-controls__icon path {
  -webkit-transition: fill, stroke 150ms ease;
  transition: fill, stroke 150ms ease;
}

.player-controls__icon:hover:not([disabled]) path[fill],
.player-controls__icon:focus:not([disabled]) path[fill] {
  fill: var(--color-white);
}

.player-controls__icon:hover:not([disabled]) path[stroke],
.player-controls__icon:focus:not([disabled]) path[stroke] {
  stroke: var(--color-white);
}

.player-controls__start {
  padding-left: 1rem;
}

.player-controls__volume-icons {
  width: 3.9rem;
}

.player-controls__volume-icon,
.player-controls__volume-icons--is-muted .player-controls__mute-icon {
  display: block;
}

.player-controls__mute-icon,
.player-controls__volume-icons--is-muted .player-controls__volume-icon {
  display: none;
}

.player-controls__mute-icon path {
  fill: var(--color-white);
}

.player-controls__volume {
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-right: 2rem;
  position: relative;
  /* width: 10rem; */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: -9px;
}

.player-controls__volume--hidden {
  visibility: hidden;
}

/* Remove margin in some browsers */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .player-controls__volume-slider {
    margin-top: 9px;
  }
}

@media all and (-ms-high-contrast: none) {
  .player-controls__volume {
    margin-top: 0;
  }
}

@-moz-document url-prefix() {
  .player-controls__volume {
    margin-top: 0;
  }
}

.player-controls__volume-slider {
  background-color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
}

.player-controls__volume-slider:focus {
  outline: none;
}

.player-controls__volume-slider::-moz-range-track {
  width: 100%;
  height: 5px;
  background-color: var(--color-grey-dark);
  cursor: pointer;
  border-radius: 3px;
}

.player-controls__volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background-color: var(--color-grey-dark);
  cursor: pointer;
  border-radius: 3px;
}

.player-controls__volume-slider::-moz-range-thumb {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background-color: var(--color-grey-mid);
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  margin-top: -6px;
}

.player-controls__volume-slider::-webkit-slider-thumb {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background-color: var(--color-grey-mid);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  margin-top: -6px;
}

.player-controls__volume-slider:hover::-moz-range-thumb,
.player-controls__volume-slider:focus::-moz-range-thumb {
  background-color: #fff;
}

.player-controls__volume-slider:hover::-webkit-slider-thumb,
.player-controls__volume-slider:focus::-webkit-slider-thumb {
  background-color: #fff;
}

.player-controls__volume-slider:focus::-webkit-slider-runnable-track {
  background-color: var(--color-grey);
}

.player-controls__volume-slider::-ms-tooltip {
  display: none;
}

.player-controls__volume-slider::-ms-track {
  width: 100%;
  height: 5px;
  /* Remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /* Leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;
  /* Remove default tick marks */
  color: transparent;
}

.player-controls__volume-slider::-ms-fill-lower {
  background-color: var(--color-grey-dark);
  border-radius: 3px;
}

.player-controls__volume-slider::-ms-fill-upper {
  background-color: var(--color-grey-darker);
  border-radius: 3px;
}

.player-controls__volume-slider::-ms-thumb {
  border: none;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background-color: var(--color-grey-mid);
  margin-top: 1px;
}

.player-controls__volume-slider:focus::-ms-fill-lower {
  background: var(--color-grey-dark);
}

.player-controls__volume-slider:focus::-ms-fill-upper {
  background-color: var(--color-grey-darker);
}

/* Time */

.player-controls__time {
}

.player-controls__seek-tooltip,
.player-controls__elapsed,
.player-controls__remaining {
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
}

.player-controls__seek {
  cursor: ew-resize;
  height: 18px;
  position: relative;
  margin-bottom: 0.2rem;
}

.player-controls__seek-fill,
.player-controls__seek-elapsed {
  background-color: var(--color-grey-mid);
  border-radius: 3px;
  height: 5px;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 50%;
  margin-top: -3px;
}

.player-controls__seek-fill {
  right: 0;
  background-color: var(--color-grey-dark);
}

.player-controls__seek-handle {
  background-color: color(var(--color-grey-mid) tint(20%));
  border-radius: 3px;
  bottom: 0;
  cursor: ew-resize;
  position: absolute;
  top: 0;
  margin-left: -3px;
  width: 8px;
}

.player-controls__seek-tooltip {
  position: absolute;
  left: 0;
  bottom: 100%;
  border-radius: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-grey-dark);
  padding: 0.5rem 0.8rem;
  background-color: var(--color-grey-lightest);
  opacity: 0;
  -webkit-transform: translate(-50%, 1rem);
      -ms-transform: translate(-50%, 1rem);
          transform: translate(-50%, 1rem);
  pointer-events: none;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transition-duration: 100ms;
          transition-duration: 100ms;
}

.player-controls__seek-tooltip--visible {
  opacity: 1;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.player-controls__catchup {
  background-color: var(--color-grey-dark);
  border-radius: 1rem;
  -webkit-transition: background-color 100ms;
  transition: background-color 100ms;
}

.player-controls__share-button,
.player-controls__quality {
  background-color: var(--color-grey-dark);
  border-radius: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: background-color 100ms;
  transition: background-color 100ms;
}

.player-controls__share-button:hover,
.player-controls__share-button:focus,
.player-controls__catchup:hover,
.player-controls__catchup:focus,
.player-controls__quality:hover,
.player-controls__quality:focus {
  background-color: var(--color-red);
}

.player-controls__quality:disabled,
.player-controls__quality:disabled {
  background-color: var(--color-grey-dark);
}

.player-controls__share-button,
.player-controls__catchup,
.player-controls__quality-high,
.player-controls__quality-low {
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem 0.6rem;
}

.player-controls__quality-high,
.player-controls__quality-low,
.player-controls__quality:disabled .player-controls__quality-high,
.player-controls__quality:disabled .player-controls__quality-low {
  color: var(--color-grey-mid);
  color: rgba(255, 255, 255, 0.6);
}

.player-controls__quality-high {
  padding-left: 1rem;
}

.player-controls__quality-low {
  padding-right: 1rem;
}

.player-controls__quality--high .player-controls__quality-high {
  color: var(--color-white);
}

.player-controls__quality--low .player-controls__quality-low {
  color: var(--color-white);
}

.player-controls__quality:disabled {
  cursor: disabled;
  opacity: 0.3;
}

.player-controls__skip-backwards,
.player-controls__skip-forwards {
  padding: 0.3rem 0 0;
}

.player-controls__skip-backwards {
  padding-right: 0.5rem;
}

.player-controls__skip-forwards {
  padding-left: 0.5rem;
}

.player-controls__share {
  position: relative;
}

.breakpoint-phone .player-controls__share .dropdown__content {
  margin-bottom: 8rem;
}

.dropdown__content--player-controls-share {
  top: 5rem;
  right: calc(50% - 4.6rem);
}

.player-controls__share-button svg {
  fill: currentColor;
}

.player-controls__share-button svg {
  fill: currentColor;
}

/**
 * Player streams
 */

.player-streams {
  background-color: var(--color-grey-dark);
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 2rem;
}

.player-stream {
  width: 100%;
}

.player-stream__label {
  font-size: 1.4rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  text-align: left;
}

.player-stream__subtitle {
  display: block;
  font-weight: bold;
}

.player-stream:hover .player-stream__label,
.player-stream:focus .player-stream__label {
  text-decoration: underline;
}

.player-stream__flag-label {
  border: none;
}

.player-stream__icon {
  background-color: color(var(--color-grey-dark) tint(50%));
  border-radius: 50%;
  height: 2.1rem;
  width: 2.1rem;
  -webkit-transition: background-color 150ms;
  transition: background-color 150ms;
}

.player-stream__icon path {
  fill: var(--color-grey-dark);
  -webkit-transition: fill 150ms;
  transition: fill 150ms;
}

.player-stream__icon--playing {
  background-color: var(--color-white);
}

.player-stream:hover .player-stream__icon,
.player-stream:focus .player-stream__icon {
  background-color: var(--color-red);
}

.player-stream:hover .player-stream__icon path,
.player-stream:focus .player-stream__icon path {
  fill: var(--color-white);
}

.player-stream__play-icon,
.player-stream__pause-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.player-stream__pause-icon,
.player-stream__icon--playing .player-stream__play-icon {
  display: none;
}

.player-stream__icon--playing .player-stream__pause-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.player-stream__icon .player-stream__play-icon svg {
  margin-left: 2px;
}

/**
 * Player queue
 */

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
}

.gu-transit {
  opacity: 0.3;
}

.player-queue {
}

.player-queue--hidden {
  display: none;
}

.player-queue__clear-all {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: var(--color-white);
  display: block;
  font-size: 1.3rem;
  max-width: 50rem;
  padding: 0.7em 1.2rem;
  position: relative;
  text-decoration: none;
  -webkit-transition: background-color 150ms ease, border-color 150ms ease;
  transition: background-color 150ms ease, border-color 150ms ease;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.breakpoint-tablet-wide .player-queue__clear-all,
.breakpoint-tablet .player-queue__clear-all,
.breakpoint-phone .player-queue__clear-all,
.breakpoint-phone-small .player-queue__clear-all {
  font-size: 1.2rem;
}

.player-queue__clear-all:hover,
.player-queue__clear-all:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}

.player-queue__tracks {
}

/* Queue tracks */

.player-queue-track {
  border-bottom: 1px solid var(--color-grey-dark);
  color: var(--color-white);
  font-size: 1.4rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.gu-mirror .player-queue-track {
  border-color: transparent;
}

.gu-mirror .player-queue-track > * {
  position: relative;
  z-index: 2;
}

.gu-mirror .player-queue-track:after {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
  border-radius: 3px;
  background-color: var(--color-grey-dark);
  bottom: -0.5rem;
  left: -1.4rem;
  position: absolute;
  right: -1.4rem;
  top: -0.5rem;
  z-index: 1;
  opacity: 0.9;
}

[data-index]:last-child > .player-queue-track {
  border: none;
}

.player-queue-track__shared-moment {
  color: var(--color-grey-mid);
  display: inline-block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.player-queue-track__title {
  font-weight: bold;
}

.player-queue-track__details:hover .player-queue-track__title,
.player-queue-track__details:focus .player-queue-track__title {
  text-decoration: underline;
}

.player-queue-track__actions-button {
  border-radius: 3px;
  padding: 1.5rem 1.2rem;
  -webkit-transition: background-color 100ms;
  transition: background-color 100ms;
}

.player-queue-track__actions-button:hover,
.player-queue-track__actions-button:focus {
  background-color: var(--color-grey-dark);
}

.player-queue-track__actions-icon path {
  fill: var(--color-grey-light);
}

.player-queue-track__actions-button:hover
  .player-queue-track__actions-icon
  path,
.player-queue-track__actions-button:focus
  .player-queue-track__actions-icon
  path {
  fill: var(--color-white);
}

.player-queue-track__handle {
  padding-top: 1px;
  position: relative;
}

.player-queue-track__handle-cover {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.player-queue-track__handle path {
  fill: var(--color-grey-light);
}

/* Override dropdown styles */

.player-recommended-item .dropdown,
.player-queue-track .dropdown {
  width: auto;
}

.player-recommended-item .dropdown__content,
.player-queue-track .dropdown__content {
  top: calc(100% + 1.7rem);
  width: 16rem;
}

.player-recommended-item .dropdown__content:before,
.player-queue-track .dropdown__content:before {
  right: 0.4rem;
}

.player-recommended-item .dropdown__content:after,
.player-queue-track .dropdown__content:after {
  right: 0.6rem;
}

.player-recommended-item .dropdown__content:before,
.player-queue-track .dropdown__content:before {
  border-width: 1rem;
}

.player-recommended-item .dropdown__content:after,
.player-queue-track .dropdown__content:after {
  border-width: 0.8rem;
}

.player-recommended-item .dropdown__anchor,
.player-queue-track .dropdown__anchor {
  padding: 1rem 1.4rem;
}

/**
 * Player recommended
 */

.player-recommended-list {
}

.player-recommended-list--hidden {
  display: none;
}

.player-recommended-item {
  border-bottom: 1px solid var(--color-grey-dark);
  color: var(--color-white);
  font-size: 1.4rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.player-recommended-item > button {
  color: var(--color-white);
  text-decoration: none;
}

.player-recommended-item > button:hover,
.player-recommended-item > button:focus {
  text-decoration: underline;
}

.player-recommended-item:last-child {
  border: none;
}

.player-queue-track__image,
.player-queue-track__image-proxy,
.player-recommended-item__image,
.player-recommended-item__image-proxy {
  height: 40px;
  margin-right: 1rem;
  width: 40px;
  min-width: 40px;
}

.player-queue-track__image-proxy,
.player-recommended-item__image-proxy {
  background-image: url(/assets/main/assets/public/scalable-image/logo.178f0c74.svg);
  background-size: 30px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.player-recommended-item__title {
  font-weight: bold;
}

/**
 * Adaptive banner
 */

.adaptive-banner {
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
}

.breakpoint-tablet-wide .adaptive-banner,
.breakpoint-tablet .adaptive-banner {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.breakpoint-phone .adaptive-banner,
.breakpoint-phone-small .adaptive-banner {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.adaptive-banner__copy.c-white a {
  color: var(--color-white);
}

.adaptive-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

.adaptive-banner__image {
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  opacity: 0.15;
}

.adaptive-banner__content {
  position: relative;
  z-index: 2;
}

.adaptive-banner__audio-component {
  padding-top: 3rem;
}

/**
 * Error page
 */

.error-page {
  padding-bottom: 12rem;
  overflow: hidden;
}

.breakpoint-tablet-wide .error-page,
.breakpoint-tablet .error-page {
  padding-bottom: 8rem;
}

.breakpoint-phone .error-page,
.breakpoint-phone-small .error-page {
  padding-bottom: 6rem;
}

.🎙 {
  -webkit-animation: pull-down 3s ease infinite;
          animation: pull-down 3s ease infinite;
  font-size: 10rem;
  position: relative;
  text-align: center;
  width: 12rem;
}

.🎙:before {
  content: "";
  border-radius: 2rem;
  background-color: #000;
  height: 9rem;
  width: 0.4rem;
  position: absolute;
  top: -3rem;
  left: 50%;
  margin-left: -0.2rem;
  -webkit-transform: skew(2deg);
      -ms-transform: skew(2deg);
          transform: skew(2deg);
}

.🎙 span {
  display: inline-block;
  -webkit-transform: rotate(180deg) translateY(-2rem);
      -ms-transform: rotate(180deg) translateY(-2rem);
          transform: rotate(180deg) translateY(-2rem);
}

.error-page__content {
  padding-top: 3rem;
}

.error-page__title {
  font-size: 5.4rem;
  font-weight: bold;
  line-height: 1.1;
  padding-bottom: 3.6rem;
}

.breakpoint-tablet-wide .error-page__title,
.breakpoint-tablet .error-page__title {
  font-size: 3.8rem;
  padding-bottom: 3rem;
}

.breakpoint-phone .error-page__title,
.breakpoint-phone-small .error-page__title {
  font-size: 2.8rem;
  padding-bottom: 3rem;
}

.error-page__copy {
  font-size: 1.8rem;
  width: 75%;
}

.breakpoint-tablet-wide .error-page__copy,
.breakpoint-tablet .error-page__copy {
  font-size: 1.6rem;
}

.breakpoint-phone .error-page__copy,
.breakpoint-phone-small .error-page__copy {
  font-size: 1.6rem;
  width: 100%;
}

.error-page__copy p:first-of-type {
  font-size: 2.6rem;
  padding-bottom: 2rem;
}

.breakpoint-tablet-wide .error-page__copy p:first-of-type,
.breakpoint-tablet .error-page__copy p:first-of-type {
  font-size: 2.2rem;
}

.breakpoint-phone .error-page__copy p:first-of-type,
.breakpoint-phone-small .error-page__copy p:first-of-type {
  font-size: 1.8rem;
}

.error-page__copy a {
  color: var(--color-white);
}

@-webkit-keyframes pull-down {
  0%,
  70%,
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  90% {
    -webkit-transform: translateY(1.6rem);
            transform: translateY(1.6rem);
  }
}

@keyframes pull-down {
  0%,
  70%,
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  90% {
    -webkit-transform: translateY(1.6rem);
            transform: translateY(1.6rem);
  }
}

/**
 * Pikaday calendar
 */

.pika-single {
  z-index: 9999;
  display: block;
  position: relative;
  color: var(--color-grey-darker);
  background: var(--color-white);
  font-family: var(--font-alternate-fallback);
  padding: 1rem;
}

.fonts-loaded .pika-single {
  font-family: var(--font-alternate);
}

.pika-single:before,
.pika-single:after {
  content: " ";
  display: table;
}

.pika-single:after {
  clear: both;
}

.pika-single {
  *zoom: 1;
}

.pika-single.is-hidden {
  display: none;
}

.pika-single.is-bound {
  position: absolute;
}

.pika-lendar {
  width: 100%;
}

.pika-title {
  position: relative;
  text-align: center;
}

.pika-label {
  display: inline-block;
  position: relative;
  z-index: 9999;
  overflow: hidden;
  margin: 0;
  padding: 5px 3px;
  font-size: 1.5rem;
  background-color: var(--color-white);
}

.pika-title select {
  cursor: pointer;
  position: absolute;
  z-index: 9998;
  margin: 0;
  left: 0;
  top: 5px;
  opacity: 0;
}

.pika-prev,
.pika-next {
  display: block;
  cursor: pointer;
  position: relative;
  outline: none;
  border: 0;
  padding: 0;
  width: 20px;
  height: 30px;
  /* hide text using text-indent trick, using width value (it's enough) */
  text-indent: 20px;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 75% 75%;
  opacity: 0.5;
  *position: absolute;
  *top: 0;
}

.pika-prev:hover,
.pika-next:hover {
  opacity: 1;
}

.pika-prev {
  float: left;
  position: relative;
}

.pika-prev:before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0;
  width: 0;
  height: 0;
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-right: 0.6rem solid var(--color-grey-darker);
}

.pika-next {
  float: right;
  position: relative;
}

.pika-next:before {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 0;
  width: 0;
  height: 0;
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left: 0.6rem solid var(--color-grey-darker);
}

.pika-prev.is-disabled,
.pika-next.is-disabled {
  cursor: default;
  opacity: 0.2;
}

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

.pika-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

.pika-table th,
.pika-table td {
  width: calc(100% / 7);
  padding: 0;
}

.pika-table th {
  color: var(--color-grey);
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.pika-table td {
  text-align: center;
}

.pika-button {
  cursor: pointer;
  border-radius: 50%;
  display: block;
  padding: 0.5rem;
  color: var(--color-grey-darker);
  font-size: 1.5rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 150ms ease;
  transition: background-color 150ms ease;
}

.is-today .pika-button,
.pika-button:hover,
.pika-button:focus {
  background-color: var(--color-grey-lightest);
}

.is-selected .pika-button,
.has-event .pika-button {
  background-color: var(--color-red);
  color: var(--color-white);
}

.is-disabled .pika-button,
.is-inrange .pika-button {
  color: var(--color-grey-lightest);
}

.is-disabled .pika-button {
  pointer-events: none;
  cursor: default;
}

.is-selection-disabled {
  pointer-events: none;
  cursor: default;
}

.pika-table abbr {
  border-bottom: none;
  cursor: help;
  text-decoration: none;
}

.history-progress {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

.history-progress__bar {
  background-color: var(--color-red);
  height: 3px;
  -webkit-transition-property: opacity, width;
  transition-property: opacity, width;
  -webkit-transition-duration: 50ms, 200ms;
          transition-duration: 50ms, 200ms;
  -webkit-transition-timing-function: ease-in, ease-out;
          transition-timing-function: ease-in, ease-out;
}

.breakpoint-phone .history-progress__bar,
.breakpoint-phone-small .history-progress__bar {
  background-color: var(--color-white);
}

/**
 * Discount code
 */

.discount-code {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #f8f8f8;
  border: 1px solid var(--color-grey-lightest);
  border-radius: 4px;
  color: var(--color-grey);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 4rem;
  font-size: 1.5rem;
  resize: none;
}

.discount-code__label {
  border-right: 1px solid var(--color-grey-lightest);
  color: var(--color-grey);
  font-size: 1.4rem;
  padding: 1rem;
}

.discount-code__code {
  background-color: var(--color-white);
  border: none;
  color: var(--color-grey);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.3rem;
  font-family: "Monaco", "Courier New", Courier, monospace;
  letter-spacing: 0.1em;
  padding: 1rem;
}

.discount-code__copy-button {
  border-left: 1px solid var(--color-grey-lightest);
  margin-left: auto;
  padding: 1rem;
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
  position: relative;
}

.discount-code__copy-button:hover,
.discount-code__copy-button:focus {
  background-color: var(--color-red);
}

.discount-code__copy-button svg path,
.discount-code__copy-button svg path {
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.discount-code__copy-button:hover svg path,
.discount-code__copy-button:focus svg path {
  fill: var(--color-white);
}

.flag-label__on-air-flag--hidden {
  display: none;
}

/**
 * On demand banner
 */

.on-demand-banner {
  height: 30rem;
}

.breakpoint-tablet-wide .on-demand-banner,
.breakpoint-tablet .on-demand-banner {
  height: auto;
}

.breakpoint-phone .on-demand-banner,
.breakpoint-phone-small .on-demand-banner {
  height: auto;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
}

.breakpoint-tablet-wide .on-demand-banner__inner,
.breakpoint-tablet .on-demand-banner__inner,
.breakpoint-phone .on-demand-banner__inner,
.breakpoint-phone-small .on-demand-banner__inner {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.on-demand-banner__copy {
  width: 55%;
}

.breakpoint-w-1200 .on-demand-banner__copy {
  width: 70%;
}

.breakpoint-phone .on-demand-banner__copy,
.breakpoint-phone-small .on-demand-banner__copy {
  width: 100%;
}

.on-demand-banner__shadows {
  background-color: rgba(255, 255, 255, 0.05);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 30rem;
  margin-left: -15rem;
  -webkit-transform: skew(-45deg);
      -ms-transform: skew(-45deg);
          transform: skew(-45deg);
  z-index: 1;
}

.on-demand-banner__shadows:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30rem;
}

.on-demand-banner__shadows:after {
  background-color: rgba(255, 255, 255, 0.1);
  right: -30rem;
}

/**
 * Tags list
 */

.tags-list {
  /* font-size: 1.6rem; */
  text-align: center;
}

.tags-list__tag {
  display: inline-block;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.tags-list__tag:last-of-type {
  margin-right: 0;
}

/**
 * Special modes
 */

.special-mode {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  height: 90vh;
  min-height: 90vh;
  -webkit-transition: min-height;
  transition: min-height;
  -webkit-transition-duration: 350ms;
          transition-duration: 350ms;
  overflow: hidden;
}

.breakpoint-phone .special-mode {
  padding-top: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 80vh;
  min-height: 80vh;
}

html .special-mode.special-mode--collapsed {
  -webkit-transition-delay: 150ms;
          transition-delay: 150ms;
  height: 10rem;
  min-height: 10rem;
}

html.breakpoint-is-mobile .special-mode.special-mode--collapsed {
  height: 16rem;
  min-height: 16rem;
}

.special-mode__full {
  height: 100%;
  pointer-events: all;
}

.special-mode--collapsed .special-mode__full {
  pointer-events: none;
}

.special-mode__full {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.special-mode__full-header {
  -webkit-box-flex: 1.8;
      -ms-flex: 1.8;
          flex: 1.8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.breakpoint-phone .special-mode__full-header {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.special-mode__full-header,
.special-mode__collapsed-header {
  text-decoration: none;
}

.special-mode__full-header h1 {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 7rem;
  opacity: 1;
  line-height: 1.1;
  text-align: center;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: linear, cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition-timing-function: linear, cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.breakpoint-tablet-wide .special-mode__full-header h1,
.breakpoint-tablet .special-mode__full-header h1 {
  font-size: 5rem;
}

.breakpoint-phone .special-mode__full-header h1,
.breakpoint-phone-small.special-mode__full-header h1 {
  font-size: 3.4rem;
}

.special-mode__full-header h1 img {
  display: block;
  max-width: 60rem;
  width: 100%;
}

.special-mode__full-header h2 {
  font-size: 2.6rem;
  padding-top: 0.6rem;
  text-align: center;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: linear, cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition-timing-function: linear, cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.special-mode--collapsed .special-mode__full-header h1,
.special-mode--collapsed .special-mode__full-header h2,
.special-mode--collapsed .special-mode__close {
  opacity: 0;
  -webkit-transform: translate(0, -100px);
      -ms-transform: translate(0, -100px);
          transform: translate(0, -100px);
  pointer-events: none;
}

.breakpoint-phone .special-mode__full-header h1 {
  margin-left: 3rem;
  margin-right: 3rem;
  width: 100%;
}

.breakpoint-phone .special-mode__full-header h2 {
  margin-top: 1rem;
  font-size: 1.8rem;
}

.special-mode__columns {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 2;
}

.breakpoint-phone .special-mode__columns {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.special-mode__column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 44rem;
  width: 40%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 2rem;
  margin-bottom: 10rem;
  opacity: 1;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: linear, cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition-timing-function: linear, cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.special-mode--collapsed .special-mode__column {
  opacity: 0;
  -webkit-transform: translate(0, 100px);
      -ms-transform: translate(0, 100px);
          transform: translate(0, 100px);
  pointer-events: none;
}

.breakpoint-phone .special-mode__column {
  padding-top: 0;
  margin-bottom: 0;
  width: 80%;
}

.breakpoint-phone .special-mode__column:first-of-type {
  padding-top: 0;
}

.special-mode__column:last-of-type {
  -webkit-transition-delay: 100ms;
          transition-delay: 100ms;
}

.breakpoint-widescreen .special-mode__column:first-of-type {
  margin-right: 4rem;
}

.breakpoint-widescreen .special-mode__column:last-of-type {
  margin-left: 4rem;
}

.special-mode__column p {
  font-size: 2.6rem;
  text-align: center;
}

.breakpoint-tablet-wide .special-mode__column p,
.breakpoint-tablet .special-mode__column p {
  font-size: 2.4rem;
}

.breakpoint-phone .special-mode__column p {
  font-size: 1.8rem;
}

.special-mode__column a {
  display: block;
  position: relative;
  text-decoration: none;
  text-align: center;
  margin-top: 2rem;
}

.special-mode__column a span {
  font-size: 3rem;
}

.breakpoint-tablet-wide .special-mode__column a span,
.breakpoint-tablet .special-mode__column a span {
  font-size: 2rem;
}

.breakpoint-phone .special-mode__column a span,
.breakpoint-phone-small .special-mode__column a span {
  font-size: 1.6rem;
}

.special-mode__button {
  padding: 1rem 2.4rem 1.2rem;
}

/* Collapsed */

.special-mode__collapsed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10rem;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 250ms;
  transition: opacity 250ms;
}

.breakpoint-is-mobile .special-mode__collapsed {
  height: 16rem;
}

.special-mode--collapsed .special-mode__collapsed {
  opacity: 1;
  pointer-events: all;
}

.special-mode__collapsed-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
  max-width: var(--container-width);
  width: 100%;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .special-mode__collapsed-inner {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.breakpoint-is-mobile .special-mode__collapsed-inner {
  display: block;
  text-align: center;
}

.special-mode__collapsed-header {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: left;
  opacity: 0;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-delay: 150ms;
          transition-delay: 150ms;
  -webkit-transition-timing-function: linear, cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition-timing-function: linear, cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.breakpoint-is-mobile .special-mode__collapsed-header {
  text-align: center;
}

.special-mode__collapsed-header h1 {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 2.8rem;
}

.breakpoint-phone .special-mode__collapsed-header h1 {
  font-size: 2rem;
  margin-bottom: 0;
  margin-top: 0;
}

.special-mode__collapsed-header h1 img {
  display: block;
  max-width: 20rem;
  max-height: 5rem;
  width: auto;
}

.breakpoint-is-mobile .special-mode__collapsed-header h1 img {
  margin-left: auto;
  margin-right: auto;
}

.special-mode__collapsed-header h2 {
  margin-top: 0.2rem;
}

.breakpoint-phone .special-mode__collapsed-header h2 {
  font-size: 1.5rem;
}

.special-mode__collapsed-button {
  font-size: 1.8rem;
  margin-right: 1.6rem;
}

.special-mode__collapsed-button:last-of-type {
  margin-right: 0;
}

.breakpoint-is-mobile .special-mode__collapsed-button {
  margin-top: 1.4rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  font-size: 1.4rem;
  padding: 0.8rem 2rem 1rem;
}

.breakpoint-phone .special-mode__collapsed-button:last-of-type {
  margin-right: 0.4rem;
}

.special-mode--collapsed .special-mode__collapsed-header {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

/* Close button */

.special-mode__close {
  bottom: 1rem;
  padding: 1rem;
  position: absolute;
  right: 1rem;
  z-index: 10;
  opacity: 1;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

/* Base theme modifications */

.special-mode {
  background-color: #111;
}

.special-mode__title {
  color: var(--color-white);
  font-weight: bold;
}

.special-mode__subtitle {
  color: var(--color-white);
  font-weight: bold;
}

.special-mode__call-to-action {
  color: var(--color-white);
  font-weight: bold;
}

.special-mode__button {
  border-radius: 4px;
  background-color: #ed1c24;
  display: inline-block;
  color: var(--color-white);
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  position: relative;
  -webkit-transition: background-color 150ms ease, color 150ms ease;
  transition: background-color 150ms ease, color 150ms ease;
}

.special-mode__button:hover,
.special-mode__button:focus {
  background-color: #fff;
  color: #ed1c24;
}

.special-mode__close {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.special-mode__close:hover,
.special-mode__close:focus {
  color: var(--color-white);
}

.edit-content {
  bottom: 2rem;
  left: 2rem;
  position: fixed;
  padding-top: 1rem;
  z-index: 99999;
}

.edit-content__buttons {
  display: none;
  background: var(--color-white);
  -webkit-box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  position: absolute;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  bottom: 100%;
  max-height: 80vh;
  overflow-y: scroll;
}

.edit-content:hover .edit-content__buttons {
  display: block;
}

.edit-content__button {
  background: var(--color-white);
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.1);
  display: block;
  cursor: pointer;
  padding: 1rem 1.4rem;
}

.edit-content__button:hover,
.edit-content__button:focus {
  color: var(--color-red);
}

.edit-content__link {
  font-size: 1.4rem;
  display: block;
  padding: 0.8rem 1.4rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--color-grey-dark);
  max-width: 40rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.edit-content__link:hover,
.edit-content__link:focus {
  color: var(--color-red);
  text-decoration: underline;
}

.edit-content__link:last-child {
  border: none;
}

/**
 * Subscription levels
 */

.subscription-levels {
  background-color: var(--color-white);
  border-radius: 8px;
  -webkit-box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
  margin-top: 3rem;
  overflow: hidden;
}

.breakpoint-phone .subscription-levels,
.breakpoint-phone-small .subscription-levels {
  margin-left: -2rem;
  margin-right: -2rem;
  width: calc(100% + 4rem);
}

.subscription-levels__level {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-grey-light);
  border-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
}

.subscription-levels__level:last-of-type {
  border-bottom: none;
}

.subscription-levels__level span {
  padding: 1rem 1.6rem;
  text-align: left;
  width: calc(100% - 6rem);
}

.breakpoint-w-1200 .subscription-levels__level span {
  font-size: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.breakpoint-phone .subscription-levels__level span,
.breakpoint-phone-small .subscription-levels__level span {
  font-size: 1.4rem;
}

.subscription-levels__level strong {
  display: block;
  padding-right: 2rem;
  position: relative;
}

.subscription-levels__level svg {
  position: absolute;
  top: 0.3rem;
  right: 0;
  width: 1.4rem;
  height: 1.4rem;
}

.subscription-levels__level svg path {
  -webkit-transition: fill 150ms ease;
  transition: fill 150ms ease;
}

.subscription-levels__level:hover svg path,
.subscription-levels__level:focus svg path {
  fill: var(--color-red);
}

.subscription-levels__info {
  font-size: 1.2rem;
  display: none;
  padding-top: 0.4rem;
  width: 100%;
}

.subscription-levels__level--active .subscription-levels__info {
  display: block;
}

.subscription-levels__level em {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 6rem;
  padding: 1rem;
}


/*# sourceMappingURL=/assets/main__public.d791f093.css.map*/