/*one2 Stylesheet
External Styling
*/

/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: transparent;
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: transparent;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: none;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: #000;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
width: 40px;
    height: 40px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

@media only screen and (max-width: 900px) {
    .flickity-prev-next-button {
width: 40px;
  height: 40px;  
    }
}


.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
      z-index: 2;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
   bottom: -40px;
  transform:translate(-50%,-50%);
  left: 50%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
     height: 6px;
    width: 12px;
    margin: 0;
    border-radius: 0;
  background: #333;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

@media screen and (max-width: 850px) {
  /*      .flickity-page-dots  {
    display: none;
}
*/

    .flickity-page-dots .dot {
     height: 6px;
    width: 20px;
}
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    padding: 20px 0;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-arrow {
    transform: translate(0, -50%);
    position: absolute;
    z-index: 15;
    top: 50%;
    height: 100%;
    width: 50%;
    background: transparent;
    border: none;
    color: transparent;
}

.slick-next {
    right: 0;
 cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNSAzbDMuMDU3LTMgMTEuOTQzIDEyLTExLjk0MyAxMi0zLjA1Ny0zIDktOXoiLz48L3N2Zz4=") 8 14, pointer;
}

.slick-prev {
    left: 0;
   cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNjcgMGwyLjgzIDIuODI5LTkuMzM5IDkuMTc1IDkuMzM5IDkuMTY3LTIuODMgMi44MjktMTIuMTctMTEuOTk2eiIvPjwvc3ZnPg==") 8 14, pointer;
}



/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 0;
    line-height: 1;

    opacity: .75;
    color: transparent;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-display: swap;
  scroll-behavior: smooth;
}

body {
font-family: "neue-haas-grotesk-display", "Helvetica Neue", sans-serif;
letter-spacing: 0.05em;
background-color: #fff;
width: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
user-select: none;
-webkit-user-select: none;
}

:focus {
outline: none;
}

::selection {
    background-color: #017ace;
}

.inv-black {
  background-color: #0B0B0B;
color: #fff;
}

.withscroll {
  min-height: auto;
    height: auto;
    overflow-y: scroll !important;
}

.one2 {
    z-index: 99;
}

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


main {
height: 100%;
width: 100%;
    display: block;
}

.page-container {
  position: relative;
  overflow: hidden;
  padding-top: 55px;
}


.full-story {
    margin-top: 0;
}

@font-face {
  font-family: "Quick Marker";
   src: 
  url("fonts/quick-marker.woff2") format("woff2"), /* chrome、firefox */
  url("fonts/quick-marker.woff") format("woff"), /* chrome、firefox */
  url("fonts/quick-marker-3.ttf?") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("fonts/quick-marker-2.svg") format("svg"); /* iOS 4.1- */
}


@font-face {
  font-family: "Teletext50";
   src: 
  url("fonts/Teletext50.otf") format("truetype"), 
}

/* @media only screen and (min-width: 750px) {
.page-container {
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
}
*/

/* Prevents background-attachment on firefox */

h1 {
font-weight: bold;
  text-transform: uppercase;
  padding-top: 20px;
  font-family: "neue-haas-grotesk-display", "Inter", "Helvetica Neue", sans-serif;
    font-weight: 900;
  font-size: 54px;
  letter-spacing: -0.02em;
}

@media only screen and (max-width: 400px) {
  h1 {
    font-size: 32px;
  }
}

.lighter {
font-weight: 800;
}

h2 {
font-weight: bold;
text-transform: uppercase;
}

@media only screen and (max-width: 320px) {
  h2 {
    font-size: 28px;
  }
}

h4 {
font-weight: 600;
margin: 20px 0;
}

p {
font-size: 12px;
margin: 0 auto;
letter-spacing: 0.01em;
font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: 0.8s;
}



.center {
  text-align: center;
}

.header-middle {
    position: relative;
    margin: auto;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    padding-bottom: 20px;

}

.one2 {
  mix-blend-mode: difference;
}

@media only screen and (max-width: 900px) {
.header-middle {
font-size: 36px;
padding: 0 10px;
}
}

@media only screen and (max-width: 350px) {
.header-middle {
font-size: 28px;
padding: 0 10px;
}
}


.base1 {
  width: 65%;
  display: inline-block;
  /* background-color: #017ace; */
  background-image: url(/img/IMG_6609.jpg);
  background-position: left;
  background-size: cover;
  color: #fff;
  height: 100%;
  float: left;
  transition: 1s ease-in-out;
  transition-delay: 1.2s;
}

.base2 {
  width: 35%;
  display: inline-block;
  background-color: #0B0B0B;
  height: 100%;
  transition: 1s ease-in-out;
  color: #BBBBBB;
  position: relative;
}

@media only screen and (max-width: 700px) {
.base2 {
  display: none;
}

.base1 {
width: 100%;
    background-position: right;
}

nav {
font-size: 26px !important;
}

nav h4 {
  margin: 7.5px 0;
}
}



.base2 p {
  padding: 0 20px;
}

.base-equal-width {
  width: 50%;
  display: inline-block;
  background-color: #fff;
  height: 100%;
  transition: 1s ease-in-out;
  color: #000;
  position: relative;
  float: left;
}

.base-cover {
  flex: 1;
  background-position: center;
  background-size: cover;
}

.text-container {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
font-weight: 600;
color: white;
text-align: right;
width: 50%;
}

.left-column {
    text-align: left;
    left: 10px;
    right: unset;
}


@media screen and (max-width: 900px) {
   .text-container {
    font-size: 8px;
    width: 35%;
    top: 10px;
    bottom: unset;
   }
}

.section-container {
    flex-basis: 50%;
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behaviour: smooth;
}

.section-container li {
    font-size: 1.4rem;
    color: black;
    text-align: center;
    scroll-snap-align: start;
    display: flex;
    flex-flow: row;
    justify-content: center;
    height: 100vh;
    -webkit-overflow-scrolling: touch;

}

.col {
  flex: 1; /* additionally, equal width */
background-color: white;
  padding: 1em;
  position: relative;
  color: black;
}

.col.mobile-col {
    flex: 3;
}

.base1:hover {
  width: 100%;
}

.box-col {
  position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 75%;
       transition: all 1s ease-in-out;
       left: 50%;
}

.box-col a:hover {
    color: #017ace;
    transition: 0.4s;
}

.box-col-mobile {
  position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
       transition: all 1s ease-in-out;
       display: none;
       padding: 0 25px;
       left: 50%;
       color: white;
       text-shadow: 1.6px 1.8px black;
}

.box-col p {
    font-size: 14px;
    font-family: poynter-oldstyle-display, serif;
font-weight: 400;
font-style: normal;
}


@media only screen and (max-width: 900px) {
.section-container li {
    flex-flow: column;
}

.box-col {
    width: 75%;
}

  .box-col h1 {
     font-size: 1.75em;
  }
  
 .box-col h3 {
    font-size: 18px;
} 


.base-cover {
  flex: 3;
}

.col.mobile-col {
    flex: 1;
}

}

.text-container h3 {
    font-size: inherit;
}

.invert {
filter: invert(1);
}


.site-header {
    z-index: 999;
    top: 0;
    height: 90px;
    position: fixed;
    width: 100%;
    transition: 0.5s ease-in;
}


.site-header img {
  width: 160px;
  z-index: 1000;
  position: absolute;
  transform: translate(0, -50%);
  left: 10px;
  top: 50%;
  transition: 0.6s ease-in-out;
}

#one2invert {
    filter: invert(1);
}

#menu-clicker {
width: 20px;
height: 20px;
fill: #222222;
}

@media screen and (max-width: 900px) {
.site-header {
height: 50px;
}

.site-header img {
width: 80px;
}

#menu-clicker {
width: 16px;
height: 16px;
}
}

@media screen and (min-width: 900px) {

.site-header a img:hover{
  width: 180px;
}

}

.logo-center {
  left: 50%;
  filter: invert(1);
      transform: translate(-50%, -50%);
      top: 40px;
}

@media only screen and (max-width: 900px) {
.logo-center {
  left: 10px;
  transform: unset;
  top: 10px;
}
}

footer {
width: 100%;
}

.footer--main--block {
    position: absolute;
    font-size: 18px;
    color: #fefefe;
    height: 400px;
    bottom: 0;
    width: 100%;
    z-index: 99;
}

.footer-link-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 0;
}

.footer-link-block-ul {
    display: flex;
    text-align: center;
    color: #fefefe;
    list-style: none;
    justify-content: space-evenly;
    width: 75%;
}

.footer-link {
    padding: 0 20px;
    font-family: 'aktiv-grotesk-condensed';
    text-transform: uppercase;
    font-weight: 400;
    font-size: 21px;
}

footer p {
font-size: 8px;
}

footer a {
  font-size: 16px;
}


nav a {
  color: #fff;
}

nav p {
  color: #fff;
}

nav h4 {
    margin: 5px 0;
    letter-spacing: -0.04em;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 44px;
}

nav h4 a:hover:before {
 content: '+';
 color: #017ace;
}

nav h4 a:hover:after {
 content: ' /²';
}

.sub-menu a:hover:before {
  content: '+';
 color: #017ace;
}


  @media only screen and (max-width: 1400px) {
     nav h4 {
          font-size: 44px;
     }
 }
 
  @media only screen and (max-width: 900px) {
     nav h4 {
          font-size: 36px;
     }
 }

nav a:hover{
  color: #017ace;
  transition: 0.3s;
  mix-blend-mode: difference;
  opacity: 0.7;
}

.small-nav {
  font-size: 12px;
  transition: 1s linear;
  position: fixed;
z-index: 20;
}

.small-nav a {
  color: #000;
}

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

#letter1 {
    animation: disappear 0.7s infinite alternate ease;
}

#letter2 {
    animation: disappear 1s infinite alternate ease;
}

#letter3 {
    animation: disappear 1.3s infinite alternate ease;
}

#letter4 {
    animation: disappear 1.6s infinite alternate ease;
}

#letter5 {
    animation: disappear 1.9s infinite alternate ease;
}

#letter6 {
    animation: disappear 2.2s infinite alternate ease;
}

#letter7 {
    animation: disappear 2.5s infinite alternate ease;
}

#letter8 {
    animation: disappear 2.8s infinite alternate ease;
}

#letter9 {
    animation: disappear 3.1s infinite alternate ease;
}

#letter10 {
    animation: disappear 3.4s infinite alternate ease;
}

#letter11 {
    animation: disappear 3.7s infinite alternate ease;
}

.cs-span {
    color: #dce0df;
    text-transform: uppercase;
    font-weight: 800;
}


.subscriber-block {
   height: 200px;
   width: 100%;
   background: rgba(0,0,0,1);
   color: white;
   padding: 20px;
   position: fixed;
   bottom: 0;
}

#subscribe-cls {
    color: white;
    right: 15px;
    left: unset;
    position: absolute;
    cursor: pointer;
}

@media screen and (max-width: 800px) {
    
    .cs-span {
        font-size: 12px;
    }
    .subscriber-block {
        display: none;
    }
}
.newsletter .subscription--submission {
     align-items: center;
}

.subscription--submission {
position: absolute;
    background-color: transparent;
    right: 20px;
    padding: 20px 50px;
    font-size: 18px;
    color: white;
    border: 4px solid #fff;
    font-weight: 700;
    right: -40px;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

input#esubscription {
    left: 20px;
    position: absolute;
    background: transparent;
    border: none;
   /* border-bottom: 2px #fff solid; */
    color: white;
    padding: 30px 0;
    width: 80%;
    font-size: 90px;
      font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 900;
  transition: 0.2s;
}

#esubscription::placeholder {
    color: white;
    opacity: 1;
}

.subscription--submission:hover {
    background: white;
    color: black;
    transition: 0.2s;
}


.subscribe-header {
    position: absolute;
      font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 900;
color: white;
font-size: 18px;
    letter-spacing: -0.02em;

}

#email-form::placeholder {
    color: #fff;
     font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 900;
}

input#email-form {
       color: #b4b4b4;
     font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 900;
    background: transparent;
    border-bottom: 2px #fff solid;
}

.home-video {
    min-height: 100%;
    width: 100%;
    object-fit: cover;
}

.full-block {
         height: 100%;
         padding: 100px 30px;
}

.textcol {
  position: absolute;
  top: 50%;
text-align: left;
padding: 0 25px;
}

.imgtext {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-family: "neue-haas-grotesk-display";
    letter-spacing: 0.2em;
    line-height: 2em;
    font-size: 0.9em;
    cursor: default;
  }

 div[class^="sbox"] {
display: inline-block;
position: relative;
padding-top: 54px;
width: 100%;
height: 100%;
  }

   div[class^="sbox"] img {
  width: 100vw;
    }

    @media only screen and (min-width: 900px) {
    .sbox-1 img {
      width: 100% !important;
    }
  }

    @media only screen and (min-width: 900px) {
div[class^="sbox"] img {
width: 650px;
}
    }

    @media only screen and (min-width: 900px) {
    .sbox-2 img {
      margin-left: 500px;
    }
  }

  @media only screen and (min-width: 900px) {
  .sbox-3 img {
    margin-right: 200px;
  }
}

@media only screen and (min-width: 900px) {
.sbox-4 img {
  margin-right: 50px;
}
}

@media only screen and (min-width: 900px) {
.sbox-5 img {
  margin-left: 150px;
}
}

.backto {
position: fixed;
  top: 30px;
  right: 15px;;
  font-size: 14px;
  font-weight: bold;
  z-index: 99;
}

@media only screen and (max-width: 900px) {
  .backto {
    top: 30px;
  }
}
@media only screen and (max-width: 350px) {
.backto {
top: 22px;
font-size:12px;
}
}

.logo-alt {
  filter:invert(1);
}

.block-half {
    position: relative;
        background-position: center;
    background-size: cover;
    width: 50%;
    float: left;
    text-align: left;
    margin-bottom: 50px;
    height: 100%;
}

.block-half::after {
    clear: left;
}

.longer-block {
    width: 55%;
}

.alt-width {
    width: 45%;
}

.box-content-title  {
    width: 75%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}


.mainWrapper .box-content-title {
   width: 100%;
}


.summary-block .box-content-title {
      justify-content: normal;  
}

.sub-box {
    position: relative;
    vertical-align: middle;
    max-width: 75%;
}

.sub-box .credits p {
    color: black;
    text-align: left;
    font-size: 28px;
}

.sub-title {
    color: black;
    font-size: 28px;
    margin-top: 15px;
}

.video-block {
    height: 100vh;
}


@media only screen and (max-width: 900px) {
.block-half {
    width: 100%;
    display: block;
    text-align: center;
    overflow-y: unset;
    height: 50%;
}

.sub-box .credits p {
    text-align: center;
    font-size: 21px;
}

.sub-title {
    font-size: 21px;
}
}

.carousel {
  background: #EEE;
}

.carousel-cell {
    height: 100%;
    width: 50vw;
    min-height: 100vh;
     /*   padding-top: 75px; */
}

.first-cell {
  width: 35vw !important;
}

@media only screen and (max-width: 900px) {
.carousel-cell {
text-align: center;
}

.first-cell {
  width: 100vw !important;
}
}

@media only screen and (min-width: 900px) and (max-width: 1024px) {
    .first-cell {
  width: 50vw !important;
}
}



.landing {
  height: 100vh;    
  background-color: black;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  overflow-y:hidden;
}

.found-him {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 10px;
    bottom: 115px;
    z-index: 20000;
}

.landing-enter {
    font-size: 12px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
     font-family: "neue-haas-grotesk-display", "Inter", "Helvetica Neue", sans-serif;
    font-weight: 600;
        letter-spacing: 0.4em;
        width: 400px;
}

@media only screen and (max-width: 450px) {
.landing-enter {
width:  400px;
}
}

@media only screen and (max-width: 400px) {
.landing-enter {
width:  350px;
}
}


@media only screen and (max-width: 350px) {
.landing-enter {
width:  300px;
}
}

.cover-alt {
  color: #000;
  mix-blend-mode: unset;
}

.date {
    bottom: 30px;
    top: unset;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media only screen and (max-width: 900px) {
.date {
left: 50% !important;
bottom: 25px !important;
}
}

.cover {
  background-color: #fff;
  z-index: 20000000;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.exit {
  position: fixed;
  top: 10px;
  right: 10px;
  color: black;
  font-size: 16px;
}

.exit:hover {
  color: #017ace;
  transition: 0.3s linear;
  cursor: pointer;
}

.date-main {
  position: fixed;
  bottom: 10px;
  left: 0px;
  color: #000;
  width: 200px;
  z-index: 2000000;
}

.post-change {
  position: fixed;
  bottom: 30%;
-webkit-transform: translateY(100%) rotate(90deg);
-ms-transform: translateY(100%) rotate(90deg);
transform: translateY(100%) rotate(90deg);
-webkit-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
z-index: 99;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
}

@media only screen and (min-width: 600px) {
.post-change {
  display: none;
}
}

.next-left {
  left: -115px;
}

.next-left a:hover {
  cursor: w-resize;
}

.next-right {
  right: 10px;
}

.next-right a:hover {
  cursor: e-resize;
}

.c-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  padding: 25px 50px;
}

.c-box {
  padding: 0 25px;
}

.c-box img {
  width: 100%;
}

.box-content {
position: relative;
  padding: 20px 50px;
}

.box-content p {
  max-width: 75%;
  text-align: left;
  font-size: 18px;
}

.box-content a {
 font-weight: inherit;
}

.box-content a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.box-content a:hover {
    background-size: 100% 100%;

}

.carousel p a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.carousel p a:hover {
    background-size: 100% 100%;

}

@media only screen and (max-width: 900px) {
.box-content {
  padding: 5px 15px;
}
.box-content p {
   max-width: 85%;
  font-size: 12px;
}

.c-container {
  padding: 5px 15px;
}

.c-box {
  padding: 5px 12.5px;
}
}

.cls-btn {
  font-size: 16px;
  position: absolute;
  right: 10px;
  top: 5px;
  font-weight: bold;
  z-index: 999999999;
  color: white;
  mix-blend-mode: difference;
  cursor: pointer;
}

#vid-btn {
         color: white;
    mix-blend-mode: difference;
}

.cls-btn:hover {
transform: rotate(360deg);
transition: 0.6s;
}

.caption {
  font-style: italic;
}

p.caption {
  padding: unset;
  text-align: center;
  font-size: 50%;
}

.modal {
  margin-top: unset;
  padding-top: unset;
      margin-bottom: unset;
}

.block {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-size: cover;
    background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

 @media only screen and (max-width: 900px) {
.block {
     background-attachment: unset;
}

.cls-btn {
    top: 8px;
    font-size: 18px;
}
}


.b-first {
 background-image: url(/img/b10.jpg);
 background-position: center;
}

.b-2 {
 background-image: url(/img/b8.jpg);
 background-position: center;
}

.b-3 {
 background-image: url(/img/canary.jpeg);
 background-position: center;
}

.publication {
  background-image: url(/img/publication1.png);
  background-position: center;
}

.block-content {
  position: relative;
  background-color: white;
  height: 50vh;
  width: 100%;
  display: content;
}

.b-tvar {
  color: white;
}

.box-text {
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.headline-block {
  width: unset;
  position: absolute;
} 

.block-longer {
  height: auto;
}

#landing-face {
transition: 1.2s ease-in-out;
}

#landing-face:hover {
transition: 1.6s ease-in-out;
transform: rotate(-450deg);
}

.hammy {
    position: absolute;
    top: 50%;
    z-index: 9;
    transform: translate(0,-50%);
}

@media screen and (max-width: 450px) {
    .hammy {
        right: 10px;
    }
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999999999;
  top: 0;
  left: 0;
  background-color: #000;
  overflow-x: hidden;
  padding-top: 120px;
  text-align: right;
  font-weight: 600;
  background-size: cover;
}

.sidenav::-webkit-scrollbar {
    display:none;
}

.sidenav li a {
  text-decoration: none;
  font-size: 36px;
  color: #dce0df;
  transition: 0.3s;
font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: -0.01em;
}

#icon-link {
     padding: unset;
  font-size: unset;
letter-spacing: unset;
}

#icon-link:hover:before {
 content: unset;
}

#menu-subscribe {
    font-size: 18px;
}

.sidenav a:hover{
  color: #017ace;
}

@media screen and (max-width: 900px) {
    .sidenav {
    text-align: center;
    padding-top: 150px;
    }
    
    .sidenav li {
        margin: 0 auto;
    }

    .sidenav li a {
        font-size: 24px;
    }
    
        .hidden-links li {
    padding: 0; 
}
    
    .hidden-links li a {
    font-size: 14px !important;
}

    #menu-subscribe {
    font-size: 12px;
}

}


@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.menu-text {
  color: white;
  font-family: "Helvetica Neue";
}

p.menu-text { 
    mix-blend-mode: difference;
}


.sidemenu-logo img {
  width: 160px;
z-index: 100000;
position: absolute;
left: 10px;
top: 10px;
transition: 0.6s ease-in-out;
    filter: invert(1);
    mix-blend-mode: difference;
}

@media only screen and (max-width: 900px) {
.sidemenu-logo img {
    width: 80px;
}
}

@media only screen and (min-width: 900px) {
.sidemenu-logo img:hover{
width: 220px;
}
}

.profile-container {
  padding-bottom: 15px;
}

.opensidenav {
    width: 30%;
}

.closesidenav {
    width: 0 !important;
}

@media only screen and (max-width: 900px) {
.opensidenav {
    width: 100%;
}
}

.box-404 {
  color: white;
  font-size: 24px;
  position: fixed;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
  width: 50%;
}

.box-404 h2 {
  font-size: 20px;
}

@media only screen and (max-width: 350px) {
.box-404 {
  width: 90vw;
  font-size: 16px;
}

.box-404 h2 {
  font-size: 12px;
}
}

@media only screen and (min-width: 350px) and (max-width: 900px) {
.box-404 {
  width: 80vw;
  font-size: 20px;
}

.box-404 h2 {
  font-size: 16px;
}
}

.bart {
  background-image: url(/img/bart/bart4.gif);
  background-position: 40% 50%;
}

.img-template {
  width: 70%;
}

@media only screen and (max-width: 900px) {
  .img-template {
    width: 100%;
  }
  .c-container {
    display: block;
  }

}


.find-wally {
  background-image: url(img/wally/wally4.jpg);
}

@media only screen and (max-width: 900px) {
      .find-wally {
          background-position: bottom right;
      }

      .found-him {
    right: 5px;
    bottom: 130px;
}
}

  .final-2 {
        padding-left: 27.5px;
        padding-right: 27.5px;
    }

.side-text {
    transform: rotate(270deg);
    left: 60px;
    position: absolute;
    top: 150px;
}

@media only screen and (max-width: 900px) {
    .side-text {
        left: 10px;
         top: 190px;
    }
}

@media only screen and (min-width: 900px) and (max-width: 900px) {
    .side-text {
        left: 10px;
         top: 200px;
    }
}



.box-content img {
    width: 80vw;
}

.visual-caption {
    position: absolute;
    left: 10px;
    top: 5px;
    color: #fff;
    text-align: left;
    width: 150px;
}

.visual-caption p {
    font-size: 7px;
}

.t-story {
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 3px solid #000;
    padding: 2px 5px;
    letter-spacing: 0.02em;
}

.back-to-top {
  position: fixed;
      bottom: 20px;
      right: 20px;
      text-decoration: none;
      color: #fff;
      background-color: transparent;
      font-size: 24px;
      padding: 0.3em;
      display: none;
      z-index: 20;
      font-weight: bold;
      transition: 1.2s ease-in;
}
.back-to-top i {
  vertical-align: middle;
}
.back-to-top span {
  padding-left: 0.5em;
}
.back-to-top i + span {
  padding-left: 0;
}
.back-to-top svg:hover {
  text-decoration: none;
  fill: #017ace;
  transition: 0.8s;
}

.statement {
    text-align: center;
    font-size: 12px;
    font-style: italic;
  padding: 20px 50px;
}

#citations {
    position: relative;
    bottom: 0;
    color: white;
    width: 100%;
    background: #0f0f0f;

    padding: 50px;
    font-size: 10px;
    display: none;
    text-align: left;
}

#citations p {
    margin: 5px 0;
        font-weight: bold;
    letter-spacing: -0.02em;
}

.footer-logo {
position: absolute;
right: 15px;
bottom: 20px;
width: 50px;
}

.box-hold {
    position: relative;
    height: 100%;
    width: 100%;
}

.back-panel {
  position: fixed;
  bottom: 20px;
  left: 10px;
  z-index: 99;
  mix-blend-mode: difference;
    display: flex;
    flex-direction: column;
  text-align: left;
}

.back-panel p {
  font-size: 14px;
  text-align: left;
  font-weight: bold;
  color: white;
}


@media screen and (max-width: 900px) {
.back-panel {
    position: relative;
    text-align: center;
    left: 0;
    margin-top: 50px;
}

.back-panel p {
  text-align: center;
} 

}

.progress-container {
  width: 100%;
  height: 5px;
  background: #ccc;
  position: fixed;
  top: 0;
  z-index: 999;
}

.progress-bar {
  height: 5px;
  background: #141414;
  width: 0%;
}

.event-det {
    position: absolute;
    font-size: 24px;
    left: 25px;
    top: 120px;
    z-index: 2;
}

.cc-first {
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
        font-size: 22px;
}

.flex-bg {
    display: flex;
    float: left;
}

.flex-section {
    position: relative;
  width: 25%;
  transition: 0.4s ease-in;
  opacity: 0.6;
}

.flex-section:hover {
  transition: 0.4s ease-in;
  opacity: 1;
}

.flex-section p {
  text-transform: none;
  text-align: left;
  font-size: 18px;
}

.flex-section h1 {
  text-align: left;
  font-size: 36px;
  padding-bottom: 20px;
}

.flex-section a:hover {
  mix-blend-mode: difference;
}

.cat-1 {
       background-color: #31A8D6;
 /* background-image: url(/img/tumblr_p2xfxliCWu1sn3ne4o1_1280.jpg); */
  background-position: right;
  background-size: auto;
}

.cat-2 {
        background-color: #39B0D7;
  background-image: url(/img/DSC00006.jpg); 
  background-position: center;
  background-size: cover;
}

.cat-3 {
        background-color: #41B7D8;
 background-image: url(/img/DSC00258.jpg);
  background-position:  center;
  background-size: cover;
}

.cat-4 {
        background-color: #51C7DB;
/*  background-image: url(/img/MJ-FTL.png); */
  background-position: left;
  background-size: cover;
}

.base-section {
  background-image: none;
  background-color: black;
  width: 100%;
height: 100vh;

}

@media screen and (max-width: 900px) {
.flex-section {
  width: 100%;
  display: block;
  height: 100%;
  opacity: 1;
}

.flex-bg {
  display:none !important;
}

}

.story-home {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

  hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1);
        margin: 20px 37.5%;
}

 .inv-black hr {
    border-top: 1px solid rgba(255,255,255,.9);
}

.share-icons {
display: flex;
padding-left: 250px;
}

.share-icons svg {
  margin: 0 20px 0 0;
  transition: 0.6s ease-in;
}

.inv-black .share-icons svg {
    fill: #fff;
}

.share-icons svg:hover {
  fill: #017ace;
  transition: 0.4s ease-in;
}

.related-sc-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 50px 0 0;
    overflow-x: auto;
    z-index: 1;
    position: relative;
    background-color: white;
}

.related-sc-header {
    margin: 0 0 15px 20px;
    position: sticky;
    left: 15px;
}

.header-discover {
    font-size: 18px;
    color: #858585;
}

@media screen and (max-width: 900px) {
 
   .related-sc-header {
        margin: 25px auto 10px;
        width: 100%;
        text-align: center;
        left: 0;
}

.header-discover {
    font-size: 14px;
    max-width: 80%;
    margin: 0 auto;
}

}

.story-section {
    display: flex;
    width: auto;
    flex-wrap: nowrap;
}

.related-sc-block:nth-last-of-type(1) {
  padding: 50px 0 50px;
}

.add-story {
  width: calc(100vw/3);
  height: 450px;
  transition: 0.8s ease-in-out;
  opacity: 0.75;
}


.add-story:hover {
    background-size: 150%;
    background-repeat: no-repeat;
    background-position: top;
   opacity: 1;
  transition: 0.8s ease-in-out;
}

.story-title {
  position: relative;
  display: block;
  left: 10px;
  top: 10px;
  color: white;
  text-align: left;
  width: 80%;
  hyphens: auto;
}

.shows-container .story-title:hover {
    mix-blend-mode: difference;
    transition: 0.4s;
}

.story-title h1 {
  text-align: left;
  font-size: 2em;
  padding-top: 0;
  text-shadow: 5px -5px 3px rgba(206, 204, 192, 0.3);
}

.story-title p {
  text-align: left;
  font-size: 14px;
}

.story-title a:hover {
    color: #fe8531;
    transition: 0.6s;
}



@media only screen and (max-width: 900px) {

.story-section {
    flex-direction: row;
        padding: 0;
        justify-content: flex-start;
        align-items: center;
        overflow-x: scroll;
}

    .add-story {
        width: 65vw;
        height: 300px;
        transition: 0.6s;
    }
    
    .add-story:hover {
     background-size: 75%;   
    }
    
  .add-story .portal-block {
  border: 1px solid white;
  margin: 5px 5px 0 auto;
}
    
    

.story-title {
    width: 65%;
   font-size: 60%; 
}
}

.box-content-wd p {
  max-width: 80%;
  text-align: justify;
  font-size: 20px;
}

@media only screen and (max-width: 900px) {

.box-content-wd p {
  font-size: 16px;
}

}

.slick-slide img {
    width: 100%;
}

.storyslick {
padding: 0 15px 0 0;
}

@media only screen and (max-width: 900px) {
  .storyslick {
    padding: 0 0px;
}
}

.tag-story {
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 3px solid #000;
    padding: 2px 5px;
    position: relative;
    width: fit-content;
    top: 10px;
    letter-spacing: 0.02em;
}

.sub-menu {
     font-size: 18px;
     text-transform: uppercase;
}


#big {
 width: 100%;
 height: 100vh;
position: absolute;
}

#big img {
width: 100%;
position: relative;
}

.logo-hold {
  position: fixed;
  right: 20px;
  bottom: 2.5%;
  width: 80px;
  z-index: 20;
  transition: 0.6s ease-in-out;
}

@media only screen and (max-width: 900px) {
.logo-hold {
    width: 60px;
    right: 10px;
    bottom: 5px;
}

}
.logo-hold:hover {
    width: 100px;
}

.logo-hold img {
  width: 100%;
  height: 100%;
}


.bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
 height: 100%;
  width: 100%;
}

.bg1 {
  background-image: url(/img/Bruegel-Cavalry.jpg);
}

.bg2 {
  background-image: url(/img/Bruegel-sanmartin.jpg);
}

.bg3 {
  background-image: url(/img/Bruegel-CG.webp);
}

.bg4 {
  background-image: url(/img/Bruegel-DutchP.jpg);
}

.bg5 {
  background-image: url(/img/Bruegel-CL.webp);
}

.bg6 {
  background-image: url(/img/ClaudeL.jpg);
}

@keyframes colour{
  0% {
        background-color: #017ace;
  }
  100% {
  background-color: #fe8531;;
  }
}


.slide-s1 {
      background-color: #017ace;
  background-position: center;
  background-size: cover;
  animation: colour 4s infinite alternate;
}


.slide-s2 {
  background-image: url(/img/sc7_1.png);
}

.slide-s3 {
  background-image: url(/img/sc10_2.png);
}

@media only screen and (max-width: 320px) {
    .page-container h1 {
font-size: 1.5em;
}
}


@media screen and (max-width: 900px) {
  #shrouds h1 {
    font-size: 2em;
}

}

@media screen and (max-width: 1023px) {
  #section2 {
    display: none;
  }
}


#citations p {
    font-weight: 400;
}

#citations strong p {
    font-weight: bold;
}

#share {
    font-size: 18px;
}

@media only screen and (max-width: 900px) {
#share {
    font-size: 12px;
}

.share-icons {
   padding-left: 20px;
}
}

#subtitle {
    padding: 0 50px;
}

@media only screen and (min-width: 900px) and (max-width: 900px) {

.page-container h1 {
font-size: 3em;
}

#subtitle {
    padding: 0 50px;
}

.share-icons {
    padding: 0 0 0 50px;
}
}

.title {
    font-size: 4em;
}

.shows .title {
    line-height: 0.9;
    text-transform: capitalize;
    margin-bottom: 25px;
    max-width: 900px;
}

@media only screen and (min-width: 768px) and (max-width: 900px) {
   .title {
    font-size: 4em;
}
}

@media only screen and (min-width: 501px) and  (max-width: 900px) {
   .title {
    font-size: 3em;
}

.shows .title {
    max-width: 75%;
}

 .sub-box .title {
        max-width: 100%;
        text-align: center;
        margin: auto;
    }

}

@media only screen and (min-width: 351px) and (max-width: 500px) {
   .title {
    font-size: 2.5em;
}
.shows .title {
    max-width: 75%;
}

    .sub-box .title {
        max-width: 100%;
        text-align: center;
        margin: auto;
    }


}

@media only screen and (max-width: 350px) {
   .title {
    font-size: 2em;
}

.shows .title {
    max-width: 75%;
}

 .sub-box .title {
        max-width: 100%;
        text-align: center;
        margin: auto;
    }

}

#main h1 a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

#main h1 a:hover {
    background-size: 100% 100%;
}

.directedby::before {
    content: 'Directed by ';
    font-family: garamond-premier-pro-display, serif;
    font-weight: 400;
}

.directedby {
   font-weight: 700 !important;
}

.author::before {
    content: 'Text by ';
    font-family: garamond-premier-pro-display, serif;
    font-weight: 400;
}

.author {
   font-weight: 600 !important;
}

#main h3 {
   font-family:  "neue-haas-grotesk-display", "Helvetica Neue", "Inter", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    max-width: 50%;
    margin: 0 auto;
    letter-spacing: -0.02em;
}


#main h3 a  {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

#main h3 a:hover {
    background-size: 100% 100%;
}

#main .box-desc p {
    font-weight: 400;
    max-width: 50%;
    margin: 5px auto;
}

.discover-no-features {
    font-size: 14px;
    max-width: 50%;
}

.main-caption {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: right;
    z-index: 2;
}

.feature-summary {
    text-align: justify;
    line-height: 1.5;
    font-weight: 500;
}

.feature-date {
        margin: 15px auto;
    text-align: left;
}

@media only screen and (max-width:  900px) {
.main-caption {
  width: 30%;
}

#main .box-desc p {
    max-width: 75%;
}

.discover-no-features {
    font-size: 12px;
    max-width: 75%;
}

#main h3 {
    max-width: 75%;
}


.shows .title {
    margin-bottom: 10px;
}
}

.main-caption p {
    color: #fff;
}

.carousel {
  background: transparent;
}


#main .carousel-cell {
    height: 100%;
    width: 40vw;
    min-height: 100vh;
    overflow-y: scroll;
    padding-bottom: 50px;
   padding-top: 75px;
   text-align: center;
   scrollbar-width: none;
}



.imgbox {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }


#main  ::-webkit-scrollbar {
        display: none;
    }

.ss-list {
  font-size: 22px;
  padding: 12px 0;
}

.scroll-box {
    width: 100%;
    justify-content: center;
    align-content: center;
    display: grid;
    position: relative;
    margin: 20px auto;
    height: auto;
    padding: 0 0 50px;
   }

   .scroll-box .profile, .extra-section p {
  font-weight: 400;
}

   .scroll-box .extra-section p {
  font-weight: 400;
   color: white;
      mix-blend-mode: difference;
}


.scroll-box.profile h3 p {
      color: white;
      mix-blend-mode: difference;
}

  .scroll-box img {
      width: 60%;
      padding-bottom: 25px;
      padding-top: 25px;
      margin: auto;

    }

@media only screen and (max-width: 900px) {

#main .scroll-box img {
  width: 75%;
}

#main .carousel-cell {
width: 100vw;
padding-top: 25px;
}

#main .profile {
    width: 80%;
    height: 425px;
    margin: 20px auto;
}

}

.profile {
          width: 70%;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
  margin: 25px auto;
    height: 100%;
    border: 2px solid;
   }

.captioned {
    padding-bottom: 0 !important;
}

.captioned-caption {
 margin: 5px auto 25px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .profile {
      height: 75%;
          width: 85%;
    }
}

   .extra-section {
       margin: 20px auto;
       height: 70%;
   }


#main-slide {
    padding-top: unset;
}

.read {
    font-style: italic;
}

#side-menu {
  transition: width 0.8s ease-in-out;
  background-position: center;
  background-size: cover;
}

.sidenav li {
    list-style-type: none;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    color: #dce0df;
    mix-blend-mode: difference;
    opacity: 0.8;
}

.mailtolink {
    padding: unset;
    font-size: unset !important;
}

.sidenav li:hover,:active {
    opacity: 1;
}

.sidenav li a:not(.mailtolink):hover:before{
  content: '+';
}

.sub-menu-block {
    margin: 35px 0;
}

.menu-info-block {
    margin-bottom: 25px;
    mix-blend-mode: difference;
}

li a.sub-menu-list {
    font-size: 18px;
    font-weight: 500;
}

.event-det p {
    text-align: left;
}

#contact-box {
    color: black;
}

#contact-box h1 {
    padding-top: unset;
    margin: 0 0 0.67em;
}

#journal-cell {
    width: 40vw;
}

@media only screen and (max-width: 900px) {
    #journal-cell {
      width: 100vw;
}

.sub-menu-block li {
    font-size: 14px;
}

    li a.sub-menu-list {
    font-size: 14px;
}

#letter1 {
   font-size: 14px;
}

#letter2 {
   font-size: 14px;
}

#letter3 {
    font-size: 14px;
}

#letter4 {
   font-size: 14px;
}

#letter5 {
    font-size: 14px;
}

#letter6 {
   font-size: 14px;
}

#letter7 {
    font-size: 14px;
}

#letter8 {
   font-size: 14px;
}

#letter9 {
   font-size: 14px;
}

#letter10 {
    font-size: 14px;
}

#letter11 {
    font-size: 14px;
}

}

#pod {
background-color: #8888557d;
}

.col-half {
  height: 50vh;
  background-color: #5555557d;
  position: relative;
}

.col-two {
  background-color: #6666665e;
}

/*@media only screen and (min-width: 850px) {
   .carousel-cell:hover {
       background-color: #017ace;
       color: white;
       transition: 400ms;
       
}

   .carousel-cell:hover .tag-story {
      border: 2px solid #fff;
       
}

   .carousel-cell:hover .t-story {
      border: 2px solid #fff;
       
}

   .carousel-cell a {
       transition: unset;
       
}

   .carousel-cell a:hover {
       color: black;
}

   .carousel-cell img {
      mix-blend-mode: hard-light;
}
}

*/

@keyframes switch {
  0% {
transform: scale(1);
  }
  100% {
    transform: scale(1.25);
   /* filter: invert(34%) sepia(21%) saturate(7063%) hue-rotate(186deg) brightness(90%) contrast(99%); */
  }
}

#one2-logo img {
    width: 200px;
}

#one2-logo {
  animation: switch 5s alternate infinite;
  width: 200px;
}

.box-404  ul {
    width: 100%;
    margin: 20px auto 0
  }

  .box-404 ul li {
    display: inline-block;
    padding: 0 40px;
    text-transform: uppercase;
  font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 600;
font-style: normal;
letter-spacing: -0.04em;
font-size: 16px;
list-style-type: none;
text-align: center;
  }
  
  .copyright-label {
    font-size: 8px;
    bottom: 5%;
    position: fixed;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    color: white;
  }
  
  @media screen and (max-width: 450px) {
.box-404  ul {
    margin: 10px auto 0
  }

      .box-404 ul li {
          font-size: 12px;
          padding: 0 17.5px;
      }
      
      #one2-logo {
  width: 140px;
}
  }
  
  
.grid {
  height: 100vh;
}

.grid-item {
  height: 350px;
  width: 25vw;
  padding: 25px 0;
}

.shows .grid {
       margin-right: -.75rem;
    margin-left: -.75rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    height: auto;
}

.shows .grid-item {
    padding: 10px 0.75rem;
    width: 25%;
    height: unset;
}

@media screen and (max-width: 900px) {
   .shows .grid-item {
         width: 50%;
    height: auto;
}
}


.grid-item img{
width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 900px) {
  .grid-item {
  width: 50%;
  height: 200px;
  padding: 10px 0;
  }
  
  #audio-section {
       padding-top: 90px;
      padding-bottom: 45px;
  }
  
  .grid {
      overflow-y: scroll;
  }
}

@media screen and (min-width: 900px) and (max-width: 900px) {
  .grid-item {
  width: 50%;
}
}

.audio-title {
  display: none;
  position: absolute;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: white;
  padding: 20px 50px;
 transform: translate(-50%,-50%);
 left: 50%;
 top: 50%;
cursor: pointer;
width: 100%;
text-transform: capitalize;
}

.audio-title p {
    font-size: 13px;
}

.audio-title h2 {
    font-size: 2em;
    max-width: 80%;
    margin: 0 auto;
   
}

#shows .audio-title p {
    font-size: 16px;
}


@media screen and (max-width: 900px) {
    .audio-title {
       padding: unset; 
       max-width: 80%;
    }
    
    .audio-title h2 {
       font-size: 16px;
    }
    
    .audio-title p {
    font-size: 11px;
}

#shows .audio-title p {
    font-size: 13px;
}

#shows .audio-title h2 {
    font-size: 18px;
     hyphens: auto;
     -webkit-hyphens: auto;
}
}

#alt-title {
    color: black;
}

/*.grid-item:hover .audio-title  {
  display: inline-block;
}
*/
     .album-content {
            position: relative;
            width: 100%;
            height: auto;
            z-index: 2;
            overflow-y: scroll;
        }
        
        .album-content::-webkit-scrollbar {
            display: none;
        }
        
        .album-content p {
                padding: 0 0 20px;
        }
        
           .desc-content {
            position: relative;
            width: 100%;
            height: auto;
            padding-bottom: 50px;
        }
        
        .vd-variant {
          height: 100vh;
          padding-bottom: 0px;  
        }
        
        .desc-content:hover > .box-for-video {
            opacity: 0.05;
        }
        
        .vd-variant .information__block:hover > p {
    opacity: 0;
    transition: 1.2s;
}
        
        .album-container-block {
            padding: 0 40px 20px;
            margin-top: 50px;
            height: 100%;
        }
        
        .album-container-block h1 {
            font-size: 5em;
            hyphens: auto;
            -webkit-hyphens: auto;
            line-height: 0.9;
        }
        
         .desc-container-block {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
        }
        
        .desc-container-block > div {
    vertical-align: middle;
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}
        
        .desc-container-block p {
        position: relative;
        font-size: 16px;
        margin-top: 50px;
        max-width: 80%;
        line-height: 1.5;
        }
        
        .album-container-block img {
           position: relative;
           width: 75%;
        padding-top: 15px;
        }
        
        @media screen and (max-width: 900px) {
     .album-content {
            width: 100%;
            height: auto;
            
        }
                   
     .desc-content {
            width: 100%;
            height: auto;
            padding-bottom: 50px;
        }
        
            .desc-container-block {
            margin-top: 0px;
        
        }
        
        .desc-container-block p {
            text-align: center;
            font-size: 12px;
            position: relative;
  top: unset;
  left: unset;
  transform: unset;
  margin: 10px auto 0;
  padding: 0 50px;
  
        }
        
        .album-container-block {
    margin-top: 20px;
}
        
          .album-container-block img {
           width: 95%;
        }
        }
        
        @media only screen and (max-width: 900px) {
.modal-content h1 {
font-size: 36px;
}
}

        
        .genre-container {
                position: relative;
    width: 100%;
    height: 50px;
        }
        
        .genre-label {
    position: relative;
            border: 3px solid #000;
           padding: 1% 3%;
            font-size: 9px;
              font-weight: 900;
            text-transform: uppercase;
            background-color: #000;
            color: #fff;
            margin: 0 5px;
        }
        
        .genre-container .genre-pop {
         color: coral;
        }
        
        .genre-container .genre-psychedelia {
            color: springgreen;
        }
        
         .genre-container .genre-trap {
            color: #00BCD4;
        }
        
        .genre-container .genre-experimental {
                color: yellowgreen;
        }
        
        .genre-container .genre-dream {
            color: powderblue;
        }
        
         .genre-container .genre-grime {
          color: #987ea2;
        }
        
        .genre-container .genre-grime:before {
           content: 'Grime'; 
        }
        
        .genre-container .genre-afroswing {
                color: olive;
        }
        .genre-container .genre-rnb {
                color: violet;
        }
        
         .genre-container .genre-rap {
         color: gold;
        }
        
        .genre-container .genre-rock {
            color: red;
        }
        
      .genre-container .genre-pop:before {
         content: 'Pop';
        }
        
        .genre-container .genre-alternative {
             border: 3px solid #9E9E9E;
    background-color: gray;
        }
        
    .genre-container .genre-alternative:before {
         content: 'Alternative';
        }
        
         .genre-container .genre-hip-hop {
  color: #017ace;
        }
        
        .genre-container .genre-hip-hop:before {
         content: 'Hip Hop';
        }
        
        
         .genre-container .genre-gospel {
             color: brown;
         }
        
        
         .genre-container .genre-gospel:before {
         content: 'Gospel';
        }
        
         .genre-container .genre-electronic {
    color: #ffc107;
        }
        
        .genre-container .genre-indie {
                color: aqua;
        }
        
     .genre-container .genre-electronic:before {
         content: 'Electronica';
        }
        
        span.genre-label.uk-catch {
    display: none;
}
        
           .genre-container .genre-dance {
  color: #9c27b0;
        }
        
       .genre-container .genre-dance:before {
         content: 'Dance';
        }
        
     .genre-container .genre-trap:before {
         content: 'Trap';
        }
        
     .genre-container .genre-drill:before {
         content: 'Drill';
        }
        
       .genre-container .genre-psychedelia:before {
         content: 'Psychedelia';
        }
        
        .genre-container .genre-indie:before {
         content: 'Indie';
        }
        
    .genre-container .genre-rap:before {
         content: 'Rap';
        }
   
    .genre-container .genre-rnb:before {
         content: 'R&B';
        }
        
       .genre-container .genre-experimental:before {
         content: 'Experimental';
        }
        
    .genre-container .genre-afrobeats:before {
         content: 'Afrobeats';
        }
        .genre-container .genre-afroswing:before {
         content: 'Afroswing';
        }
        
        .genre-container .genre-rock:before {
         content: 'Rock';
        }
        
        .genre-container .genre-dream:before {
         content: 'Dream Pop';
        }
        
         .genre-container .genre-jazz:before {
         content: 'Jazz';
        }
        
        .genre-container .genre-soul:before {
         content: 'Soul';
        }
        
        .genre-container .genre-afrobeats {
           color: #009e73;
        }
        
       .genre-container .genre-soul {
    color: skyblue;
       }
        
        .stream-icon-block {
               position: relative;
 
        }
        
      /*  .stream-icon-block::after {
            content: "\A\A Where possible please support your favourite artists by directly purchasing their work via Bandcamp or their webstore.";
              white-space: pre-wrap;
              font-size: 11px;
              font-weight: 400;
        }
        
        */
        
        .vd-variant-block .stream-icon-block::after {
            color: white;
        }
        
        @media screen and (max-width: 900px) {
                .stream-icon-block {
             
        padding-top: 20px;
        }
        }
        
        .button-group {
    height: auto;
    text-align: left;
    max-width: 80%;
    margin: 50px auto 0;
        }
        
        
        .button-group button {
    padding: 10px;
    margin: 5px 5px 5px 0;
    border-radius: 0px;
    background-color: black;
    color: white;
    border: 1px solid #000;
    cursor: pointer;
       transition: 0.5s ease-in;
       font-size: 14px;
}

 .button-group button:hover {
     border: 1px solid #000;
     background: #fff;
     color: #000;
     transition: 0.5s ease-in;
 }
 
  .button-group button:focus {
     color: #fe8531;
     transition: 0.5s ease-in;
 }
 
  .filter-conv {
font-weight: 400;
font-size: 12px;
 }
 
 .filter-conv:focus {
        color: #017ace;
   border-bottom: 1px solid #000;
 }
 
 .box-for-video {
    opacity: 0.75;
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: 0.9s;
    min-height: 100vh;
 }
 
  .vd-variant-block {
     background-color: black;
     padding-bottom: 0px;
 }
 
 @media screen and (max-width: 900px) {
     .box-for-video {
         background-color: #000;
         position: fixed;
    left: 0;
    top: 0;
    opacity: 0.9;
        height: 200%;
        z-index: -1;
     }
       .vd-mobile-var h1 {
         color: white;
     }
     
     .vd-mobile-var h2 {
         color: white;
     }
     
     .vd-mobile-var p {
         color: white;
     }
 
     .vd-variant-block {
     background-color: transparent;
 }
 }
 
     .vd-variant p {
         color: white;
     }
     
     .sharing-block {
             position: relative;
     max-width: 80%;
    margin: 20px auto;
     }
     
       .off-stream-icons.icon-invert {
           fill: #dce0df;
    color: #dce0df; 
       width: 24px;
    height: 24px;
    margin: 0 5px;
     }
     
     svg.off-stream-icons {
             width: 48px;
    height: 48px;
    transition: 0.6s ease-in;
        fill: white;
    mix-blend-mode: difference;
     }
 
.vd-variant-block svg.off-stream-icons {
    fill: white;
    color: white;
}

svg#stream-title:hover {
    fill: grey;
    transition: 0.6s ease-in;
}

#stream-spotify:hover {
   fill: #1db954 !important; 
   transition: 0.6s ease-in;
}

#stream-amazon:hover {
   fill: #f08804 !important; 
   transition: 0.6s ease-in;
}

#stream-google:hover {
    fill: #1A73E8 !important;
    transition: 0.6s ease-in;
}

#stream-apple:hover {
    fill: #d31e1e !important;
    transition: 0.6s ease-in;
}

#stream-mixcloud {
 transform: scale(2.75);
     margin-right: 10px;
}

#stream-mixcloud:hover {
    fill: #5000ff !important;
    transition: 0.6s ease-in;
}

#igicon:hover {
    fill: #8a3ab9 !important;
    transition: 0.6s ease-in;
}

#twittericon:hover {
    fill: #00acee !important;
    transition: 0.6s ease-in;
}


 
 #c-back {
     color: black;
 }
 

 
 .box-for-video:hover {
    opacity: 0.15;
    transition: 0.9s;
}

.cc-notice {
        font-size: 8px;
            width: 50%;
    padding: 5px 0 !important;
        letter-spacing: normal;

}

.album-container-block .cc-notice:before {
    content: 'All Rights Reserved. ';
}

#carousel-option {
    height: 100%;
    width: 100%;
    margin-top: 75px;
}

@media screen and (max-width: 900px) {
  #carousel-option {
    margin-top: 35px;
}

#audio-section {
    padding: 45px 0;
}
}

.filter-conv:hover:before {
    content: '+';
}

.rolling-text {
  color: /* #017ace */ wheat;
  width: 100vw;
  height: 100vh;
}
@keyframes shuffle {
0% {
margin-left: 0
}
100% {
  margin-left: -24000px;
}
}

.rolling-text p {
  font-family: "Inter";
  font-weight: 900;
  font-style: normal;
  font-size: 600px;
  word-wrap: normal;
   white-space: nowrap;
   letter-spacing: 0.08em;
  position: absolute;
  left: 9000px;
  transform: translate(-50%,-50%);
  top: 50%;
 animation: shuffle infinite;
    animation-duration: 50s;
    animation-timing-function: linear;
}

#album-deluxe::after {
    content: '*';
}

.vd-variant p {
    transition: 0.6s;
}
 



   @media screen and (max-width:  900px) {
   .sharing-block {
        margin-right: auto;
    margin-left: auto;
     }
        }

   @media screen and (min-width: 900px) {
        .desc-container-block.vd-variant {
   position: absolute;
   top: 0;
}
        }

.mainsearch {
    padding: 10px 15px;
    border: none;
    border-radius: 0;
    border-bottom: 1px #000 solid;
    width: 100%;
}

.mainsearch:placeholder {
    color: #fff;
}

.off-stream-icons:hover + .box-for-video {
    opacity: 0.15;
}

.menu-close {
    color: #dce0df;
    font-size: 16px;
    text-transform: uppercase;
    position: absolute;
    top: 20px;
    text-align: right;
    right: 30px;
    cursor: pointer;
    transition: 0.6s ease-in;
}

.menu-close:hover {
    color: #017ace;
     transition: 0.6s ease-in-out;
}

@media screen and (max-width: 900px) {
    .menu-close {
         right: 30px;
         top: 20px;
         font-size: 14px;
    }
}

.carousel-cell .box-404 {
    color: black;
}

.selects-line {
    font-size: 18px;
}

  #impressum {
          width: 50%;
          color: white;
      }
    
    #impressum p{
        font-family: 'Times New Roman';
        text-align: justify;
        padding: 10px 0;
    }
  
     #wider-var {
        padding: 0 150px;
    }
    
    #about {
    color: white;
}

#page-about h2 {
    font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 900;
font-style: normal;
font-size: 28px;
text-align: right;
text-transform: none;
}

  
      #impressum h2 {
        text-align: left;
        padding: 75px 0;
    }
    

#page-about .box-content p {
font-weight: 400;
font-style: normal;
    padding: 20px 0;
}

#impressum p {
  padding: 15px 45px;   
}


#about-text  {
   font-family: inherit;
    text-align: center;
    hyphens: auto;
    color: white;
}

#text-n {
    font-family: "Helvetica Neue";
  font-weight: 600;  
}

@media only screen and (max-width: 900px) {
    #page-about {
    margin-top: 0;
}


#about-text  {
   width: unset;
}

#page-about h2 {
   font-size: 20px; 
   padding-bottom: 40px;
}

   #wider-var {
        padding: 0 10px;
    }

 #impressum {
          width: 100%;
      }
    
    #impressum p{
        text-align: center;
    }
    
      #impressum h2 {
        text-align: center;
        padding: 40px 0;
    }
    
    
}


#search {
    border-bottom: 1px #fff solid;
    background-color: transparent;
    color: white;
    text-align: right;
}

@media only screen and (max-width: 900px) {
   #search {
      text-align: center;  
}
}

.nav-module {
    font-family: "HelveticaNeue-CondensedBold";
    font-size: 20px;
     font-weight: 800;
     letter-spacing: -0.03em;
    padding: 10px 12.5px;
    text-transform: uppercase;
    background-color: #017ace;
    color: white;
    border-radius: 7.5px;
    position: fixed;
    right: 20px;
    top: 10px;
    z-index: 99;
    border: 2px solid;
}

a.nav-module:hover {
    color: #FE8531;
}

.sidenav-search {
        position: relative;
    width: 100%;
    bottom: 30px;
    padding: 0 30px 0 50px;
        margin-top: 75px;
}

.cdg-vid {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    object-fit: cover;
}

.headline-vid {
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    object-fit: cover;
}


  .lv21 {
      background-image: url(/img/LVFW21.jpg);
  }
  
.pradaf21 {
      background-image: url(/img/PradaF21.jpg);
  }
  
  .diorfw21 {
    background-image: url("/img/diorfw21.jpg");
}
  
  @keyframes menu-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
  
  #menu-clicker {
      animation: menu-pulse 2s infinite;
      transition: 0.2s ease;
  }
  
    svg#menu-clicker:hover {
   fill: #017ace;
   transition: 0.2s ease;
   animation: none;
  }
  
  
  button#hamburger-on {
    border: none;
    background: transparent;
    cursor: pointer;
}

#main .cc-first {
    width: 100%;
}

#main .mainsearch {
    width: 80%;
}

#search-title {
    text-align: left;
    margin-left: 40px;
}

@media screen and (max-width: 900px) {
    #search-title {
    text-align: center;
    margin-left: unset;
}
}

svg.one2-change {
    fill: white;
}

.credits {
    text-align: right;
    padding: 25px 0;
}

.credits p {
     text-align: right;
     font-weight: 600;
}

.author-credit:before {
    font-family: 'Times New Roman';
    content: 'Text ';
     font-weight: 500;
}

.photo-credit:before {
    font-family: 'Times New Roman';
    content: 'Photography ';
       font-weight: 500;
}

.video-block .photo-credit {
    width: 50%;
    margin: 0 0;
}

.video-credit:before {
    font-family: 'Times New Roman';
    content: 'Video ';
       font-weight: 500;
}

p.video-credit {
    font-size: 18px;
}

.sound-credit:before {
    font-family: 'Times New Roman';
    content: 'Sound ';
       font-weight: 500;
}

.credits p:nth-child(n+1) {
    padding: 7.5px 0;
}

.header-invert {
    filter: invert(1);
    mix-blend-mode: difference;
}


.collectionLink {
    margin-top: 15px;
}

.tag-block {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 50px auto;
    height: auto;
    width: 100%;
}

.tag-block > div {
    position: absolute;
    transform: translate(-50%,0);
    left: 50%;
}


.block-category {
border: 0.5px solid #949494;
    font-size: 14px;
        padding: 15px 30px;
    margin: 0;
     transition: 0.3s ease-in;
}

.block-category:hover {
    background-color: #017ace;
    color: #fefefe;
    border: #017ace solid 1px;
     transition: 0.3s ease-in;
}

@media only screen and (max-width: 900px) {
.block-category { 
    font-size: 9px;
    padding: 7.5px 12.5px;
}

.tag-block {
    margin: 25px auto;
    height: auto;
}

p.video-credit {
    font-size: 14px;
}

}


.share-block {
    position: relative;
    height: 100px;
}

#selectswk {
    background-image: url(../img/guy-ritchie-snatch.jpg);
    transition: 0.6s ease-in;
    height: 100%;
}

@media screen and (min-width: 900px) {
    #selectswk {
    background-position: left;
    }
}


#selects-banner {
    margin: 25px 0;
    text-align: center;
}

#playlist-block {
    position: relative;
    display: block;
    margin: 0 auto;
}

 
 .selects-title {
 position: absolute;
 bottom: 50px;
 left: 20px;
 text-align: left;
 color: white;
 width: 65%;
 }
 
.mainWrapper {
  position: relative;
  z-index: 1;
  height: 100vh;
  max-width: 100vw;
  width: 100vw;
}

.wrapperContainer {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 900px) {
.wrapperContainer {
    flex-direction: column;
}
}

.mainSection {
  position: fixed;
  width: 100%;
    height: 100vh;
}

.subWrapper {
    width: 100vw;
  position: relative;
  z-index: 5;
    background-color: #fff;
    transition: 0.4s ease-in;
}

.titleWrapper {
    height: 50%;
    width: 100%;
}

.format-section-2 {
   margin-top: 40px;
}

@media screen and (max-width: 900px) {
.format-section-2 {
    margin-top: 25px;
}

#selects-banner {
    margin: 25px auto;
    font-size: 16px;
    max-width: 75%;
}

}

@media screen and (max-width: 375px) {
.format-section-2 {
    margin-top: 15px;
}
}

.shows .mainWrapper a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#fe8531 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.shows .mainWrapper a:hover {
    background-size: 100% 100%;
}

.subWrapper a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#fe8531 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.subWrapper a:hover {
    background-size: 100% 100%;
}

a#playlink {
    background: none;
}

.headerWrapper {
    width: 100%;
    padding: 0.5em;
}

.headerWrapper h1 {
    font-size: 84px;
    max-width: 75%;
    margin: 0.2em auto 0;
}

#seriftext {
    font-family: garamond-premier-pro-display, serif;
    font-style: italic;
    font-weight: 200;
}

.box-content {
    color: black;
}

.credit-block {
    text-align: center;
    
}

.credit-block p {
    font-weight: 600;
}

.credit-block li {
    list-style: none;
    font-weight: 600;
    line-height: 1.75;
    text-align: left;
    margin: 10px 0;
}

@media screen and (max-width: 450px) {
    .box-content p {
        max-width: 400px;
}

}

.recommend-block h1 {
    font-size: 3em;
    line-height: 1px;
    letter-spacing: -0.04em;
    text-align: left;
    padding: 0;
}

.first-recommend {
      font-size: 1.5em;
    display: block;
    line-height: 64px;
}

.recommend-alt {
    margin-right: 0;
}

.releaseWrapper {
    padding: 20px 0;
    text-align: center;
}

.releaseWrapper p {
    padding: 15px 0 0;
}

.releaseWrapper img {
    width: 50%;
}
            
.releaseTitle {
padding: 15px 0; 
            }
            
  .releaseTitle h3 {
      font-weight: 400;
    font-family: aktiv-grotesk-condensed;
  }
  
  .selects-title .title {
      font-size: 7em;
  }
  
   .selects-title p {
      font-size: 20px;
  }


@media screen and (max-width: 900px) {
    .block-half {
            margin-bottom: 0;
    }
    
    
    #selectswk {
        height: 50%;
    }
    
    .mainSection {
  position: relative;
}

     .selects-title {
 bottom: unset;
 top: 50%;
 left: 50%;
 text-align: center;
     transform: translate(-50%, -50%);
 }
 
   .selects-title .title {
      font-size: 2em;
  }
  
   .selects-title p {
      font-size: 12px;
  }

.releaseTitle h3 {
          font-size: 14px;
  }
 
 .recommend-block h1 {
   font-size: 24px;
    line-height: 30px;
    text-align: center;
    display: block;
}

.first-recommend {
  font-size: 32px;
    line-height: 36px;
}
 
}

.shows::-webkit-scrollbar {
  width: 15px;
}

.shows::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
.shows::-webkit-scrollbar-thumb {
  background: #222222; 
}

.shows::-webkit-scrollbar-thumb:hover {
  background: #017ace; 
}

.shows::-webkit-scrollbar:horizontal  {
    display: none;
}

.summary-block {
    max-width: 750px;
    padding: 0 45px;
       margin: 45px auto 50px;
}

.mainWrapper .summary-block {
    max-width: unset;
    white-space: initial;
    text-align: left;
    margin: 0 auto 50px;
}

.shows .mainWrapper .summary-block {
    max-width: unset;
    white-space: initial;
    text-align: left;
    margin: 0 auto;
}

.mainWrapper .summary-block h1{
    font-size: 5vw;
    font-weight: 700;
    line-height: 0.875;
    text-transform: initial;
    margin: 0;
    padding-top: 90px;
    max-width: 80%;
}

.mainWrapper .summary-block p {
    font-size: 3vw;
    font-weight: 700;
    line-height: 0.875;
    text-transform: initial;
}

@media screen and (max-width: 900px) {
   .mainWrapper .summary-block h1{
      font-size: 10vw; 
      padding-top: 50px;
   }
   
   .mainWrapper .summary-block p {
       font-size: 5vw;
}

.mainWrapper .summary-block {
    max-width: 90%;
}

.shows .mainWrapper .summary-block {
    max-width: 90%;
}
}


.summary-block p {
    font-size: 28px;
    font-weight: 600;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.opinion-section p {
   text-align-last: left;  
}

.opinion-section li {
        font-size: 28px;
    font-weight: 600;
    text-align: left;
     text-align-last: left; 
    list-style-position: outside;
    list-style-type: square;
}



.page-text-columns {
        max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
   padding: 0 0 50px;
}

.page-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    flex-basis: 0;
    margin: 0 15px;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.page-column p {
     font-size: 20px;
     letter-spacing: 0.05em;
    line-height: 36px;
    font-weight: 400;
}


.slick-padding-mid {
    padding: 25px 0;
}

#slick-before-summary {
    margin-bottom: 40px;
}

.quote-width {
  max-width: 700px;  
      padding-top: 50px;
}

p.headline-quote {
    font-weight: bold;
    font-size: 32px;
    line-height: 44px;
}

    #about-text {
        font-family: inherit !important;
        font-weight: 600 !important;
    }
    
   #about-summary {
    font-family: inherit !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    color: #dbdfde;
    text-align: justify;
    line-height: 1;
    hyphens: auto;
    -webkit-hyphens: auto;
    }
    
    .about-headline {
        font-size: 64px;
    }
    
    .about-inner-desc {
        font-size: 16px;
    }


@media screen and (max-width: 900px) {
    .slick-padding-mid {
    padding: 15px 0;
}
    
    .about-headline {
        font-size: 30px;
    }

    .headerWrapper {
    padding: 0.25em;
}

.headerWrapper h1 {
    font-size: 36px;
    padding: 0 15px;
}

.summary-block {
    max-width: 90vw;
    padding: 0 0;
    margin: 25px auto 5px;
}

   .summary-block p {
        font-size: 22px;
        margin: 15px 5px 0;
    }

.summary-block li {
    font-size: 22px;
}

.credit-block li {
    font-size: 14px;
}

.page-text-columns {
        max-width: 500px;
   padding: 0 0 35px;
   flex-direction: column;
}

.page-text-columns:last-child {
    margin: 0 auto 25px !important;
}

.page-text-columns:nth-last-child(2) {
    margin: 25px auto 0 !important;
}

.page-column {
    margin: 10px 10px 0;
}

.page-column:first-child {
    margin: 15px 10px 0;
}

 .page-text-columns:last-child .page-column {
      margin: 0 10px 0 !important;
}

.page-column p {
     font-size: 14px;
    line-height: 24px;
}

.quote-width {
  max-width: 300px;  
}

p.headline-quote {
    font-size: 20px;
    line-height: 28px;
    text-align: justify;
    text-align-last: center;
    margin-top: 0;
}

#quote-var {
    margin-top: 0px;
}

.slick-slide img {
    padding: 0 10px;
}

.gallery-flex .slick-slide img {
   padding: 0 5px 0 0; 
}

.story-slick {
    padding: 20px 0;
}

p#about-summary {
    font-size: 24px;
    text-align: justify;
}

}

@media screen and (max-width: 550px) {
.page-text-columns {
    max-width: 450px;
}
}


@media screen and (max-width: 450px) {
    .page-text-columns {
        max-width: 400px;
}

.quote-width {
  max-width: 400px;  
}
}


@media screen and (max-width: 350px) {
    .page-text-columns {
        max-width: 300px;
}

.quote-width {
  max-width: 250px;  
}
}

.secondaryBlock {
    position: absolute;
    z-index: -1;
    left: 50%;
    margin: 0 auto;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%);
}

#homesection {
    background-size: 400px;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    animation: fadeIn 1s;
}

@media screen and (max-width: 900px) {
    #homesection {
     background-size: 75%;
    }
}

.show-index-wrapper {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    vertical-align: middle;
    align-items: center;
    height: 100%;
}

.show-index {
    height: fit-content;
    padding: 0 120px;
}

.show-index h1 {
    font-size: 96px;
     opacity: 0.65;
}

h1.index-title {
    font-size: 72px;
    opacity: 1;
}

.show-index h1:hover {
    opacity: 1;
}

.list-wrapper {
    position: relative;
    box-sizing: border-box;
    padding: 15px 10px;
    transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
}

.show-index--list {
    display: flex;
    flex-direction: column;
    transition: 0.5s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.show-index--list.wrapped {
    transition: 0.5s ease-in-out;
    opacity: 1;
    max-height: 35rem;
}

.show-index--list.unwrapped {
    transition: 0.5s ease-in-out;
    opacity: 0;
    max-height: 0;
}

.show-letters {
    font-size: 128px !important;
    padding: 0 25px !important;
}


.show-index--list p {
    font-size: 24px;
    font-family: 'aktiv-grotesk-condensed';
    padding: 4.5px 0;
}

@media screen and (max-width: 900px) {
  .show-index-wrapper {
     flex-direction: column;
         flex-flow: wrap;
             justify-content: center;
             width: 100%;
  }
  
  .show-index {
    height: auto;
}

.show-title--list {
   margin: 50px;
}
  
  .show-index--list p {
    font-size: 21px;
}

.show-index h1 {
    font-size: 24px;
}

h1.index-title {
    font-size: 48px;
}
}

@media screen and (max-width: 900px) {
  .opinion-section p {
   font-size: 18px; 
}  

 .opinion-section li {
     max-width: 100%;
   font-size: 18px; 
   list-style-position: inside;
}  

.hiddenWrapper .summary-block p {
  max-width: 100%;
}

}

@media screen and (min-width:  900px) {
  .show-index-wrapper {
     width: 100%;
  }
}

#play {
    width: 35px;
    text-align: left;
    filter: invert(1);
    cursor: url("https://one2.digital/img/play.png") 16 16, pointer;
}

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

.carousel-status {
    bottom: 20px;
    position: fixed;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
}

.video-credit-block {
  display: none;  
  position: absolute;
  text-align: left;
  color: white;
  left: 10px;
  bottom: 10px;
  mix-blend-mode: difference;
}

.video-block:hover .video-credit-block {
    display: inline;
}

.indexSection nav {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}

nav.main-control {
    opacity: 0.975;
    visibility: visible;
    background-color: black;
    z-index: 99999999999;
    background-image: url(../img/logo/017ace.svg);
    background-size: 350px;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    scroll-snap-type: y mandatory;
    animation: fadeIn 1s;
}

 nav .nav-pane {
    height: 100vh;
    position: relative;
    scroll-snap-align: center;
    z-index: 10;
}

#logo-img {
    z-index: 1;
    position: fixed;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    width: 350px;;
    filter: invert(1);
    opacity: 0.6;
}

@media only screen and (max-width: 900px) {
#logo-img {
     width: 65%;
}

}

.scroll-headline {
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 44px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}

.scroll-headline h1 {
       text-align: center;
}

.scroll-headline p {
    font-family: neue-haas-grotesk-text, sans-serif;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-align: center;
}

.nav-close-btn {
  position: fixed;
  top: 50%;
   z-index: 99999;
  right: 25px;
  fill: white;
cursor: pointer;
}

#menu-close-btn:hover {
  transform: rotate(90deg);
  transition: 0.4s ease-in;
}


@media only screen and (max-width: 900px) {
.scroll-headline {
       font-size: 22px;
  }
  .content-section > div {
    margin-top: 25px;
}

.nav-close-btn {
   right: 10px;  
}

#menu-close-btn {
    height: 16px;
    width: 16px;
}
}


.join--wrapper #ename {
    width: 100%;
    color: white;
    background: transparent;
    border: none;
    border-bottom: 3px #fff solid;
    padding: 15px 0;
    border-radius: 0;
    float: left;
    margin: 10px auto;
    font-weight: 700;
    text-transform: capitalize;
}

.join--wrapper #ename:focus {
   border-bottom: 3px #fe8531 solid; 
}

.join--wrapper #ename::placeholder {
    color: #fff;
}

.join--wrapper #subscription-module {
    width: 100%;
    color: white;
    background: transparent;
    border: none;
    border-bottom: 3px #fff solid;
    padding: 15px 0;
    border-radius: 0;
    margin: 10px auto;
    font-weight: 700;
}

.join--wrapper #subscription-module:focus {
   border-bottom: 3px #fe8531 solid; 
}

.join--wrapper #subscription-module::placeholder {
    color: #fff;
}

.join--wrapper .subscription--submission--button {
    position: relative;
    margin: 20px auto 0;
    background-color: transparent;
    width: 100%;
    padding: 20px 80px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    border: 4px solid #fff;
    cursor: pointer;
    border-radius: 25px;
}

.join--wrapper .subscription--submission--button:hover {
    background: #fff;
    color: #017ace;
    transition: 0.2s;
}

.join--wrapper {
    position: fixed;
    padding: 0.5rem 2rem;
    border: 12px dashed #FFF;
    background: #004d82;
    height: auto;
    width: auto;
    top: 50%;
    left: 55%;
    z-index: 99;
    display: flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-content: center;
    transform: translate(-50%, -50%);
    border-radius: 25px;
}

.join--wrapper:hover {
    background-color: #000;
    transition: 0.5s;
}

.join--wrapper .cls-btn {
    mix-blend-mode: unset;
}

.join-heading {
    font-size: 4.5em;
    text-align: center;
    margin: 0.2em 0;
    text-transform: lowercase;
}

.join-module {
    align-items: flex-end;
    justify-content: center;
    height: auto;
    display: flex;
    width: 100%;
    padding: 1.5em 0;
    text-align: left;
}

.close {
    display: none !important;
}

.open {
    display: block !important;
}

p.show-category-tag {
    font-size: 11px;
    border: 1px solid white;
    border-right: 0;
    border-left: 0;
    padding: 2.5px;
    width: auto;
    display: inline-block;
}

li.endcredits {
    color: white;
    margin-bottom: 10px;
    font-size: 10px;
}

#hoverStudio {
    text-transform: uppercase;
}

#hoverStudio:hover span {
    display:none;
    transition: 0.2s;
}
#hoverStudio:hover:before {
    content:"017ACE*";
    transition: 0.2s;
}

.count-collection {
    font-weight: 500;
    font-size: 14px;
    margin: 20px auto 40px;
}

@media only screen and (max-width: 900px) {
 .count-collection {
       margin: 10px auto 20px;  
 }
 
 .join-heading {
    font-size: 2.5em;
}
 
 .join--wrapper {
    width: 85%;
    left: 50%;
}
}

#column-margin-adjustment {
    padding: 0 0 10px;
}


#play2 {
    width: 35px;
    text-align: left;
    filter: invert(1);
    cursor: url("https://one2.digital/img/read.png") 16 16, pointer;
}


@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.showsicon {
    width: 40px;
}

.image-caption {
    font-size: 8px;
    margin-top: 10px;
    max-width: 90%;
}

.flex-show-box .image-caption {
    mix-blend-mode: difference;
    color: white;
}

.story-slick + .image-caption {
    color: white;
    mix-blend-mode: difference;
}

.rt-text::before {
       content: 'Reading Time ';
    font-family: garamond-premier-pro-display, serif;
    font-weight: 400; 
}

p.rt-text {
    font-size: 2vw !important;
}

@media only screen and (max-width: 900px) {
    .image-caption {
   font-size: 9px;
   max-width: 80%;
}

p.rt-text {
    font-size: 4vw !important;
}
}

.wrapper-bg {
    background-color: transparent;
}

span.header-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    top: -100%;
    transition: 0.5s;
}

.header-title p {
    font-size: 18px;
    font-weight: 600
}

@media only screen and (max-width: 900px) {
.header-title p {
    width: 25%;
    font-size: 8px;
}
}

.flex-story-section {
    display: flex;
    padding: 0 0 50px;
    width: 100%;
    flex-direction: column;
}

.o-block-story {
    position: relative;
    width: 100%;
    height: 450px;
    transition: 0.8s ease-in-out;
    opacity: 0.75;
    display: flex;
    flex-direction: row;
    background-size: calc(100%/3) !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    justify-content: flex-end;
    align-items: center;
    justify-items: flex-end;
    background-color: white;
}

.o-block-story:hover {
    opacity: 1;
}

.o-block-story a {
    background: none;
}

.story-title-section {
    position: relative;
    display: flex;
    color: white;
    text-align: left;
    width: calc(100%/1.6);
    hyphens: auto;
    flex-direction: column;
    align-content: flex-end;
    padding-right: 50px;
    mix-blend-mode: difference;
}

.story-title-section:hover {
    color: #fe8531;
    transition: 0.6s;
}

.story-title-section h1 {
    text-align: left;
    font-size: 3.5em;
    padding-top: 0;
    margin: 0 auto;
}

.story-title-section h2 {
   font-size: 2em; 
}

.story-title-section p {
    text-align: left;
    font-size: 24px;
}

@media only screen and (max-width: 900px) {
    .o-block-story {
    height: 150px;
}

    .story-title-section {
 padding-right: 15px;
}

  .story-title-section h1 {
    font-size: 18px;
}

  .story-title-section h2 {
    font-size: 16px;
}

.story-title-section p {
    font-size: 12px;
}  
}

  .heading-block {
    position: sticky;    
    top: 0;
    height: auto;
    width: 100%;
    background: rgba(0,0,0,1);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
    .heading-header {
        position: relative;
    font-family: neue-haas-grotesk-display, sans-serif;
    color: white;
        padding: 40px 0 20px;
    }
    
    .heading-header p {
    letter-spacing: -0.02em;
        font-weight: 900;
    }
    
    .flexWrapper-textContainer {
     width: 75%;
     color: white;
}

  .video-container-wrapper .flexWrapper-textContainer {
     position: absolute;
     left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.flexWrapper-textContainer h1 {
    font-size: 5em;
    text-align: left;
}

.box-text--large {
    font-size: 5em; 
}

.album--title-text {
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.e3-color {
     color: #e3e3e3;
}

.margin--width {
    max-width: 90%;
}

.image-center-cndx {
    margin: 25px auto;
    width: 450px;
    height: auto;
    object-fit: cover;
}

.flex-container-block {
    list-style: none;
    flex-direction: row;
    display: flex;
    height: auto;
    position: relative;
    transition: 1.2s;
}

.large-bg-block {
      min-height: 80vh;  
}

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
     flex-direction: column-reverse;
}

.flex-container-video {
    min-height: 100%;
    width: 100%;
    object-fit: cover;
    margin: 0 auto;
}

.flexWrapper {
        width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
     display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    background-color: white;
    transition: 0.8s;
}

.flex-modified {
    align-items: center;
    justify-content: center; 
}

.flex-show-box {
    flex-direction: column;
}

.flex-show-box img {
    width: calc(100% / 3);
    margin: 25px auto 0;
}

.wrapper--image {
    width: 50%;
    margin-left: 25px;
}

.album--img {
    width: 50%;
    margin: 25px auto;
}

.flexWrapper--sub {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
}

.story-slick {
    margin-top: 25px;
}

.flexContainer--text {
    height: auto;
    mix-blend-mode: difference;
    color: white;
    padding: 25px 0;
}

.flexContainer--text h1 {
    font-size: 64px;
    max-width: 90%;
    text-align: left;
    margin: 0 auto;
}

.story-category--text {
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'aktiv-grotesk-condensed';
    text-decoration: underline;
    margin: 0 auto;
}

.sound-space-container .story-category--text {
    margin: 0 auto;
}

.container--text {
    text-align: justify;
    font-size: 42px;
    font-weight: 500;
    max-width: 90%;
    margin-top: 20px;
    font-family: garamond-premier-pro-display, serif;
}

.alt--title {
    font-family: 'neue-haas-grotesk-display';
    font-weight: 600;
    letter-spacing: -0.01em;
}


.text-magnified {
   max-width: 75%;
}

.short-width {
    max-width: 75%;
}

.text--original {
    text-transform: initial;
}

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

h1.center-text {
    text-align: center;
}

.bottom--flex {
    top: unset;
    bottom: 0;
}

.info-description {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: 0.8s ease-in;
}

.info-description .author {
    margin-top: 25px;
}

.info-description .author, .date--text {
    font-size: 16px;
    max-width: 90%;
}

.flex-container-block:hover .info-description {
    transition: 1.4s ease-in;
    opacity: 1;
    visibility: visible;
     display: inline;
}

.central-box-mod {
    text-align: center; 
}

.black-color {
    color: black;
}

.text-white {
   color: white;
}


  
 #mainBlock h3 {
    margin: 0 0 5px;
}

.discover--this {
    width: 100%;
    margin: 25px auto 0;
    text-align: center;
    position: relative;
    display: none; 
    opacity: 0;
}

.flex-column .discover--this {
     mix-blend-mode: difference;
}

.discover-text {
    display: inline;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    margin: 5px 0;
}

.discover-arrow {
    height: 16px;
    width: 16px;
    fill: white !important;
}

.column-lg .discover-arrow {
    mix-blend-mode: difference;
}

.flex-container-block:hover .discover--this {
  opacity: 1; 
  transition: 1.4s ease-in;
  display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin: 25px auto 0;
}

.gallery-flex:hover .discover--this {
   justify-content: flex-start;
   text-align: left;
}


#mainBlock a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}
    
#mainBlock a:not(.discover-link):hover {
    background-size: 100% 100%;
}

.black--text {
    color: #e3e3e3;
    font-size: 24px;
    font-weight: 600;
    max-width: 90%;
}

#slickblock {
    padding-bottom: 25px;
}


.title-block {
    min-height: unset;
    height: auto;
    padding: 50px 0;
    justify-content: center;
}

.title-block h1{
    font-size: 10vw;
    font-weight: 700;
    line-height: 0.875;
    text-transform: initial;
    text-align: center;
    margin-bottom: 50px;
}

.title-block p {
    font-size: 24px;
     max-width: 75%;
}

@media screen and (max-width: 900px) {
    
.feature-block .alt--title {
 font-size: 18px;   
}

.conversations-block {
    min-height: auto;
}
    
    svg.totop {
    width: 24px;
    height: 24px;
} 

.tag-section {
    flex-direction: column;
     min-height: 0;
}


    .large-bg-block .tag-section {
        flex-direction: row;
        min-height: 0;
    }
    

 .tag-section .flexWrapper--sub {
    height: 40vh;
    background-position: top;
}

 .tag-section .flexWrapper {
    padding: 0 0 50px;
 }
 
 .large-bg-block .flexWrapper--sub {
  width: 100%;  
}
    
    .sound-space-container {
       flex-direction: column; 
    }
    
    .flexContainer--text {
    text-align: center;
}

.title-block {
   padding: 25px 0;
}

.title-block h1{
    margin-bottom: 25px;
}

.wrapper--image {
    width: 100%;
     margin-left: 0; 
}

.flex-modified {
    align-items: flex-end;
    background-position: center;
}

    .large-bg-block .flexWrapper {
            background-size: 65%;
            background-position: center 15%;
    }
    
    .flex-container-video {
    width: 100%;
    height: 80vh;
}
   
   .flexWrapper-textContainer {
     width: 85%;
}
   
   .flexWrapper-textContainer h1 {
    font-size: 2em;
    text-align: center;
}

.box-text--large {
    font-size: 2em; 
}

.flex-show-box img {
    width: 75%;
}

.image-center-cndx {
    width: 80%;
}

.flexContainer--text h1 {
    font-size: 1.75em;
    max-width: 80%;
}

.container--text {
font-size: 18px;
    max-width: 80%;
    font-weight: 200;
}

.flex-show-box .container--text {
    font-size: 21px;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-align: left;
    font-weight: 400;
}
}

.conversations-block .container--text {
    font-size: 24px;
    max-width: 80%;
}

.text-magnified {
    font-size: 24px;
}

.bottom--flex {
    top: 50%;
    bottom: unset;
}
.info-description .author, .date--text {
    font-size: 14px;
}


.black--text {
    font-size: 14px;
    text-align: center;
}

.story-category--text {
    font-size: 13px;
    margin-top: 25px;
}

.slider-modified-margin {
    margin-top: 0;
}


.subscriber-block {
    height: auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.subscribe-header {
    position: relative;
        text-align: justify;
}

.subscription--submission {
    position: relative;
    right: unset;
    top: unset;
    transform: unset;
    width: 100%;
    margin: 0 auto;
}

input#esubscription {
    left: unset;
    position: relative;
    font-size: 36px;
    width: 100%;
}

.story-slick {
    margin-top: 15px;
    padding: 0;
}
}

.video-container-wrapper {
    justify-content: center;
    align-items: center;
}

#virgil {
    padding-top: 75px;
}

@media screen and (min-width: 900px) {
#luchford .flexContainer--text {
    margin-top: 40px;
}

#virgil {
    padding-top: 45px;
}
}

@media screen and (max-width: 900px) {
#shrouds { 
background-image: none;
}
}

@media screen and (min-width: 900px) {
#shrouds { 
background-attachment: fixed;
}

.imghidden {
    display: none;
}
}


.row {
    display: flex;
    background: white;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 90px 0px 90px 0;
    margin: 0 auto;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: 1.2s;
    flex-direction: row;
}

.flex-container-block .row:nth-child(odd) {
  flex-direction: row;
}

.flex-container-block .row:nth-child(even) {
  flex-direction: row-reverse;
}

.flex-container-block:not(.square-feature-block, .flex-column, .gallery-flex,  .tag-section):nth-of-type(odd) {
  flex-direction: row;
}

.flex-container-block:not(.square-feature-block, .flex-column, .gallery-flex,  .tag-section):nth-of-type(even) {
  flex-direction: row-reverse;
}

.gallery-flex-block:nth-of-type(even) .gallery-flex {
  flex-direction: row;
}

.gallery-flex-block:nth-of-type(odd) .gallery-flex {
  flex-direction: row-reverse;
}

.story-reduced-text {
    max-width: 100%;
    font-size: 18px;
    font-family: 'neue-haas-grotesk-display';
    font-weight: 400;
}

.gallery-flex-block .flex-modified {
    background-attachment: fixed;
}

.repeated-image {
  background-attachment: fixed;
}

@media screen and (min-width: 992px) {
.column-lg {
-webkit-box-flex: 0;
    flex: 0 0 35%;
    max-width: 35%;
    height: 100%;
    padding: 0 25px;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
}

.lg-wider {
    flex: 0 0 50%;
    max-width: 50%; 
}
}

.row-modified {
    text-align: left;
    text-decoration: none;
    margin: 30px 0 0;
    border-bottom: 2px solid;
    width: fit-content;
}

.category-headline {
    text-align: left;
    hyphens: auto;
    word-wrap: break-word;
    text-transform: initial;
    font-weight: 600;
    margin: 5px 0;
}

.category-story-desc {
    font-size: 20px;
    max-width: 100%;
}

.info-description .box-story-mod {
    text-align: left;
    max-width: 100%;
}

@media screen and (min-width: 900px) {
.column-md {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
}

.column-lg img {
    width: 100%;
}

img.lgimg {
    width: 75%;
    margin: 0 auto;
}

.flex-modified img.lgimg {
    width: 40%;
    margin: 0 auto;
}

@media screen and (max-width: 900px) {
.column-lg {
    max-width: 90%;
    margin: 20px auto;
    color: black;
}

.column-lg img {
    width: 75%;
}

img.lgimg {
    width: 100%;
    margin: 0 auto;
}

.flex-modified img.lgimg {
    width: 75%;
    margin: 0 auto;
}


.row-modified {
    text-align: center;
    margin: 0 auto;
}

.row {
     padding: 30px 0;   
}

.category-headline {
    text-align: center;
    font-size: 42px;
}

.info-description .box-story-mod {
    text-align: center;
}

.story-reduced-text {
    font-size: 14px;
    max-width: 90%;
        overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
        text-align: left;
}

}


@media (min-width: 900px) {
.column-md {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
}

 .slick-adj {
        width: 50%;
    }
    
    .new-size {
        font-size: 54px !important;
    }
    
    @media screen and (max-width: 900px) {
      .new-size {
        font-size: 24px !important;
    }  
    }
    
    .gallery-flex {
       align-items: center; 
       justify-content: center
    }
    
   .gallery-flex .story-category--text {
        max-width: 90%;
   }
   
  .gallery-flex .flexContainer--text {
      text-align: left;
  }
  
  .gallery-flex .discover--this {
    width: 90%;
    text-align: left;
  }
  
  @media screen and (max-width: 900px) {
   .gallery-flex .story-category--text {
        max-width: 80%;
   } 
   
   .info-description .author, .date--text {
    max-width: 80%;
}

.gallery-flex .discover--this {
    max-width: 80%;
}

.slick-four-column {
    padding: 25px 0 50px;
    justify-content: center;
}

#slickblock {
    padding-bottom: 0;
}
    }
  
    @media screen and (min-width: 900px) {  
    .slick-four-column .flexContainer--text {
    padding: 25px 0 50px;
}

    .slick-four-column .story-slick {
     margin-top: 0;
}
    }
    
 #home::-webkit-scrollbar {
  width: 15px;
}

#home::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
#home::-webkit-scrollbar-thumb {
  background: #222222; 
}

#home::-webkit-scrollbar-thumb:hover {
  background: #017ace; 
}

#home::-webkit-scrollbar:horizontal  {
    display: none;
}

.block--desc {
    position: absolute;
    width: 5%;
    background: white;
    z-index: 2;
    height: 100%;
    left: 0;
    padding: 25px 0;
}

.block--desc-text {
    position: sticky;
    top: 25px;
        font-family: 'aktiv-grotesk-condensed';
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.block--desc-text p {
     font-size: 22px;   
}

#discover-shows {
    max-width: 50%;
    margin: 0 auto;
}

.summary-text {
    max-width: 50% !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-align: justify;
    margin-top: 25px !important;
}

@media screen and (max-width: 900px) {
    .summary-text {
      max-width: 75% !important;
}
}

.illustration-block img {
    width: auto;
    height: 500px;
}


.illustration-block .Sirv {
     width: auto;
    height: 500px;
}

@media screen and (max-width: 900px) {
.illustration-block img {
    width: auto;
    height: 400px;
}


.illustration-block .Sirv {
     width: auto;
    height: 400px;
}
}

.cookie-message-block {
    background: #080808;
    color: #f1f1f1;
    border: 2px solid;
    position: fixed;
    bottom: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 25px 30px;
    width: auto;
    z-index: 99;
    left: 50%;
    transform: translate(-50%);
}

.cookie-message {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-align: center;
}

.cookie-bold {
    font-weight: 600;
}

.cookie-btn-cls {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.cookie-btn-cls:hover {
    background-size: 100% 100%;
}

.flex-container-block {
    width: 100%;
}

.subscription--confirmation {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40%;
    width: 50%;
    background: rgba(230,230,230,0.90);
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 2px solid #1d1d1d;
}

.subscription--confirmation > div p {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.subscription--confirmation > div {
    color: #1d1d1d;
}

.cookie-message-block .menu-close {
    fill: #1d1d1d;
    width: 16px;
    height: 16px;
    position: relative;
    top: unset;
    right: unset;
}

.feature-block {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
}

.block--desc {
    position: sticky;
    width: 100%;
    background: white;
    z-index: 99;
    height: 100%;
    left: 0;
    bottom: 0;
    padding: 15px 0;
}

.block--desc-text {
    position: sticky;
    top: 25px;
    font-family: 'aktiv-grotesk-condensed';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    align-self: flex-start;
     writing-mode: unset;
}

.block--desc-text h6 {
     font-size: 14px;   
     text-transform: uppercase;
}

.subscriber-block {
    position: relative;
}

.medium-width {
    width: 50%;
}

.cont-video-block .story-category--text {
   max-width: 75%; 
}
.cont-video-block .author {
     max-width: 75%; 
}
.cont-video-block .date--text {
     max-width: 75%; 
}
.cont-video-block .image-caption {
     max-width: 75%; 
}

.cont-video-block .box-text--large {
  max-width: 75%;   
}

.cont-video-block .flexContainer--text {
    padding-bottom: 50px;
}

.slidefl {
    padding: 0 25px;
}

.slick-swipe-instruction {
    display: none;
}

@media screen and (max-width: 900px) {
    .slick-swipe-instruction {
        display: inline-block;
        position: relative;
        margin-top: 10px;
            color: white;
    mix-blend-mode: difference;
    }
    
    .slidefl {
    padding: 0;
}

.flex-container-block {
    width: 100%;
}

    .block--desc {
        width: 100%;
    }
    
    .block--desc-text h6 {
    font-size: 10px;
}

    .cont-video-block {
        flex-direction: column;
    }
    
    .cont-video-block .flexContainer--text {
        text-align: center;
    }
    
  .medium-width  {
  width: 100%;
    height: 100%;
    object-fit: contain;
    padding-top: 25px;  
}

}

.headline-text-title {
    font-weight: 900;
    font-family: 'aktiv-grotesk-condensed';
    text-transform: uppercase;
}

.slidefl p {
display: none;
}

.close {
    display: none;
}

.next-block {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    background: rgba(0,0,0,1);
    color: white;
}

.nextfeature {
    background-color: transparent;
    padding: 40px 50px;
    font-size: 18px;
    color: white;
    border: none;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: 0.6s;
}

.nextfeature:hover {
    background-color: white;
    color: black;
}

.col-lg-4 {
    width: 50%;
}

img.:not([width]):not([height]) {
    width: unset ;
}

.col-lg-4 img {
    width: 50% !important;
}

.col-lg-4 .story-category--text {
    max-width: 80%;
    margin: 30px auto 0;
    width: fit-content;
}

.col-lg-4 .category-headline {
       max-width: 80%; 
}

.col-lg-4 .container--text {
       max-width: 80%; 
}

/* .flex-show-box  {
    width: calc(100% / 3) !important;
} */

@media screen and (max-width: 900px) {
.col-lg-4 {
    padding: 0 0 25px;
    width: 100%;
}

.col-lg-4 img {
    width: 80% !important;
}

/* .flex-show-box  {
    width: 75% !important;
} */

.nextfeature {
    padding: 20px 50px;
}
}

.PRD-AW22 {
    filter: invert(1);
    mix-blend-mode: difference;
}

.loaded {
    display: none;
}

.colours {
    position: fixed;
    bottom: 41.5px; 
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 999;
}

.colours button {
    border: none;
    cursor: pointer;
    padding: 25px;
    color: white;
    background: white;
    transition: 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.colours button:hover {
    background: black;
}

#totop svg {
    fill: black;
}


.colours button:hover #ttp {
    fill: white;
}

@media screen and (max-width: 900px) {
.colours button{
    padding: 15px;
}
}

/* slick mobile adjustments 
@media screen and (max-width: 900px) {
.slick-arrow {
    top: unset;
    transform: unset;
    bottom: 25px;
    background: rgba(255,255,255,0.6);
    width: 30px;
    height: 30px;
    display: none;
}

.slick-prev {
    left: 10px;
    transform: rotate(-90deg);
}

.slick-next {
    left: 45px;
    transform: rotate(90deg);
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    outline: none;
    background: transparent;
}

.slick-prev:before {
    content: '▲';
}

.slick-next:before {
    content: '▲';
}

.slick-prev:before, .slick-next:before {
    font-family: 'neue-haas-grotesk-display';
    opacity: 0.75;
    font-size: 14px;
    color: black;
    font-weight: 900;
}

}
*/

#lgvirgil .column-lg:not(.lg-wider) {
    mix-blend-mode: difference;
        color: white;
}

#lgvirgil .category-headline {
    text-transform: uppercase;
    font-weight: 800;
}

.subtitle-headline {
    font-weight: 600;
    text-align: left;
}

.column-lg .subtitle-headline {
    font-size: 24px;
    font-family: garamond-premier-pro-display, serif;
    font-weight: 400;
}

@media screen and (max-width: 900px) {
    
.subtitle-headline {
    text-align: center;
}

.column-lg .subtitle-headline {
    font-size: 16px;
}
}

.carousel-sounds .flickity-prev-next-button {
    position: absolute;
    filter: invert(1);
    top: 15%;
}

@media screen and (max-width: 900px) {
 .carousel-sounds .flickity-prev-next-button {
    top: 12.5%;
}   
}

.sounds-block { 
    display: flex;
    flex-direction: column;
    padding: 50px 0 25px;
    width: 100%;
    position: relative;
    background: #0c0c0c;
    color: #f1f1f1;
}

.sounds-selection-block {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.sounds-selection-block ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 50%;
}

@media screen and (max-width: 900px) {
.sounds-selection-block ol {
    width: 85%;
}
}

.sounds-block h1 {
    font-weight: 600;
}

.sounds-selection-block ol li {
    padding: 15px 25px;
    font-weight: 400;
}

.sounds-icon {
    display: inline-block;
    height: 100%;
    padding-top: 10px;
}

a#soundslink {
background-image: none;
}

.sounds-icon svg.off-stream-icons {
    width: 36px;
    height: 36px;
}

.seriftext {
    font-family: garamond-premier-pro-display, serif;
    font-style: normal;
    font-weight: 700;
    text-decoration: underline;
}


.shows--announcements-block h1 {
    font-weight: 600;
    text-align: center;
}

.underline {
    text-decoration: underline;
}

.shows-london {
    font-size: 64px;
    font-weight: 800;
}

.shows-pitti {
    font-weight: 300;
    border: black 2px solid;
    padding: 3px 5px;
    margin-right: 5px;
}

.shows-paris {
    font-size: 44px;
    font-family: 'aktiv-grotesk-condensed';
    text-decoration: underline;
}

.shows-ny {
    font-size: 46px;
    font-family: 'aktiv-grotesk';
    font-weight: 300;
}

.shows-milan {
    font-family: garamond-premier-pro-display, serif;
    font-style: normal;
    text-transform: capitalize;
    font-size: 56px;
    border-radius: 80%;
    border: 5px solid;
    padding: 15px 20px;
}

.shows-london {
    font-size: 32px;
}

.shows-ny {
    font-size: 32px;
}

.shows-milan {
    font-size: 32px;
}

.shows-pitti {
    font-size: 32px;
}

.shows-tokyo {
    font-size: 32px;
    font-family: albiona, sans-serif;
font-weight: 300;
font-style: normal;
}

.shows--announcements-block {
    background: white;
    padding: 25px;
    position: relative;
}

.cookie-row {
    display: flex;
    flex-direction: column;
    padding: 0 20px 0 0;
}

.cookie-button-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0 10px;
}

.cookie-btn {
    border: none;
    border-bottom: 2px solid #f1f1f1;
    font-weight: 600;
    text-align: center;
    background: no-repeat;
    color: #f1f1f1;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.cookie-btn:hover {
    transition: 0.6s;
    color: black;
    background: white;
}

@media screen and (max-width: 900px) {
    .sounds-block { 
padding: 20px 0 25px;
}

.sounds-selection-block ol li {
    list-style-position: inside;
    text-align: center;
}


.shows--announcements-block h1 {
font-size: 24px;
}

.shows-london {
    font-size: 24px;
    font-weight: 700;
}
.shows-paris {
    font-size: 36px;
    text-decoration: underline;
}
.shows-ny {
    font-size: 22px;
}
.shows-milan {
  font-size: 22px;
  padding: 10px;
}

.shows-pitti {
    padding: 5px 10px;
    line-height: 2;
}

.cookie-message-block {
 display: none;   
}

}

.heading-line {
    text-decoration: underline; 
    font-weight: 900;
    text-transform: uppercase;
}

.shows-vertical .flex-container-block {
    width: 100%;
      justify-content: center; 
      transition: 0.7s;
}

.column-info-block {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-content: center;
}

.alternate-dir {
 flex-direction: row;   
}

.row-half {
    width: 100%;
    text-align: left;
    color: white;
    mix-blend-mode: difference;
    padding-bottom: 35px;
}

.row-half h1 {
    max-width: 80%;
}

.row-half p {
    margin-top: 15px;
    max-width: 80%;
    line-height: 1.5;
    font-size: 16px;
}

.alternate-dir .row-half {
    text-align: right;
}

.story-category--text {
    max-width: 80%;
}

  .shows-vertical  .flexContainer--text h1 {
    font-size: 36px;
    max-width: 80%;
    margin: 0 auto;
}

.alternate-dir .row-half  .flexContainer--text h1 {
 text-align: right;
}

.container-button-block {
    margin: 90px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
}

button.filter-shows {
    width: calc(100% / 3);
    background-color: #1b1b1b;
    color: white;
    height: 65px;
    border: 0;
        font-size: 18px;
    font-weight: 600;
    border-right: 1px solid;
    cursor: pointer;
}

ul.show-tags-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 80%;
    margin: 15px auto 0;
    mix-blend-mode: difference;
}

ul.shows-end {
    justify-content: flex-end;
}

.show-tags-block li {
       list-style-type: none;
    padding: 7px 10px;
    margin: 5px 10px 5px 0;
    color: white;
    border: 1px solid;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.shows-end.show-tags-block li {
     margin: 5px 0 5px 10px;
}

.show-tags-block li:visited { 
    background: white; 
}
.show-tags-block li:focus { 
    background: white; 
}

.show-tags-block li:hover::before {
    content: '+ ';
}

.show-tags-block li:hover {
    background: white;
    color: black;
}

.slidefl {
    padding: 0 25px;
}

.padding-adj {
    padding-bottom: 0;
}

.padding-adj .flexContainer--text {
    padding: 25px 0 0;
}

.filter-title {
    color: white;
    mix-blend-mode: difference;
}

.shows-vertical .flex-container-block .column-info-block:first-child {
    margin-top: 50px;
}


@media screen and (max-width: 900px) {
    
    .shows-vertical .flex-container-block:first-child {
    padding-top: 30px;
}

    .container-button-block {
    margin: 50px auto 0;
}

    .column-info-block {
    flex-direction: column-reverse;
}

.slidefl {
    padding: 0 10px;
}

  .row-half {
    width: 100%;
    text-align: justify;
    padding: 0;
}  

.flex-column {
    padding-bottom: 35px;
}

.container-button-block {
   flex-direction: column;
}

button.filter-shows {
    width: 100% ;
    height: 50px;
    font-size: 16px;
    border-right: 0;
}

ul.show-tags-block {
    justify-content: center;
}

ul.shows-end {
    justify-content: center;
}

.row-half .flexContainer--text h1 {
    text-align: center;
}

.alternate-dir .row-half .flexContainer--text h1 {
    text-align: center;
}

.show-tags-block li {
font-size: 10px;
}

}

main li a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

main li a:hover {
    background-size: 100% 100%;
}

#www h1 {
    font-size: 21px;
    max-width: 80%;
    margin: 0 auto 25px;
    text-transform: capitalize;
}

#www h3 {
    font-size: 18px;
    max-width: 80%;
    margin: 20px auto;
}


#www ul {
    margin-top: 25px;
}


#www li {
    max-width: 80%;
    margin: 0 auto;
    list-style-type: circle;
    padding: 5px 0;
    font-weight: 500;
}

@media screen and (max-width: 900px) {
    #www li {
    text-align: center;
    list-style-position: inside;
    }
    
    #www {
      text-align: center;  
    }
    
    .flexContainer--text {
     padding: 0 0 25px;
}
}

@media screen and (min-width: 900px) {
    .column-info-block {
    flex-direction: column-reverse;
}

.alternate-dir {
   flex-direction: column; 
}
}

.slidefl p {
    margin: 10px auto 0;
}

.home-subscriber-block {
    height: auto;
    width: 100%;
    background: #014d82;
    color: white;
    padding: 20px;
    position: relative;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.home-subscribe-header {
    position: relative;
    font-family: neue-haas-grotesk-display, sans-serif;
    max-width: 35%;
    font-weight: 600;
    color: white;
    font-size: 18px;
    letter-spacing: 0.02em;
    text-align: left;
}

.home-subscribe-header-large {
    font-size: 64px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.outline-text {
    -webkit-text-stroke: 2px white;
    color: transparent;
}

@media screen and (max-width: 900px) {
.home-subscribe-header {
    max-width: 85%;
        text-align: left;
        margin-left: 10px;
}

.home-subscribe-header-large {
    font-size: 44px;
}

.outline-text {
    -webkit-text-stroke: 1px white;
}

}

.block-holder {
   display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
}

.home-subscription--submission {
    position: relative;
    background-color: #ffffff;
    padding: 30px 50px;
    font-size: 18px;
    color: #004d82;
    border: 4px solid;
    font-weight: 700;
    cursor: pointer;
    width: 30%;
    height: fit-content;
    transition: 0.3s;
    border-radius: 50px;
}

.home-subscription--submission:hover {
    background-color: #004d82;
    color: #ffffff;
}

@media screen and (max-width: 900px) {
    
.block-holder {
     flex-direction: column;
}


.home-subscription--submission {
    padding: 15px 25px;
    width: 100%;
}

}

@media screen and (min-width: 900px) {
    .home-subscribe-header {
           margin: 20px 0;
    background-color: #004d82;
    }
    
    .block-holder {
        padding: 5px 5px 5px 0;
}
}

.marker {
    font-family: "Quick Marker";
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0;
    -moz-osx-font-smoothing: grayscale;
}

.marker-header {
        max-width: 75%;
    margin: 10px auto;
    hyphens: auto;
    -webkit-hyphens: auto;
    letter-spacing: 0.02em;
    font-size: 96px;
    mix-blend-mode: difference;
}

.banner-header {
    font-size: 18px;
    border-bottom: 1px solid;
    display: inline;
    mix-blend-mode: difference;
}

@keyframes slidebg {
  from {
    background-color: #017ace;
  }

  to {
    background-color: #fe8531;
  }
}

.conversations-banner {
    color: white;
    animation: slidebg 5s infinite alternate;
}


@media screen and (max-width: 900px) {
.marker-header {
font-size: 36px;
}

.banner-header {
    font-size: 14px;
}
}

.side-sounds-block {
    display: flex;
    position: fixed;
    right: 0;
    top: 0;
    width: 30%;
    height: 0;
    z-index: 999999;
    background: #0d0d0d;
    color: #f7f7f7;
    flex-direction: column;
    filter: invert(1);
    overflow-y: scroll;
    transition: 1.8s;
}

.unroll-sounds {
    height: 100%;
}

.side-sounds-block h1 {
    font-weight: 500;
}

.carousel-sounds {
    width: 100%;
    height: 100%;
}

.sounds-selection-block ol {
    width: 75%;
}

.sounds-selection-block ol li {
    list-style-type: none;
}

.carousel-sounds .flickity-prev-next-button {
    top: 10%;
}

.open-sounds {
   color: #222222;
    position: absolute;
    right: 65px;
    top: 50%;
    transform: translate(0,-50%);
    z-index: 9;
    font-weight: 600;
    border: 2px solid;
    padding: 5px 10px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    cursor: pointer;
}

.open-sounds-text {
    padding-left: 5px;
    font-weight: 700;
}

.sounds-svg {
    fill: #222;
}

.open-sounds:hover {
    background: #222222;
    color: #f7f7f7;
    border: 2px solid #222222;
    transition: 0.5s;
}

.open-sounds:hover .sounds-svg {
    fill: #f7f7f7;
    transition: 0.5s;
}

.close-sounds {
    color: #f7f7f7;
    padding: 25px 0 0;
    position: relative;
    height: auto;
    display: inline-block;
    cursor: pointer;
}

@media screen and (max-width: 900px) {
    
    .open-sounds {
right: unset;
left: 10px;
}

   .side-sounds-block {
width: 100%;
} 
}

.subscription-confirmation-block {
        position: fixed;
    display: flex;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    background-color: #000000db;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    color: white;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.subscription-header {
    max-width: 25%;
    font-weight: 700;
    padding: 0;
}

.subscription-conf-text {
    max-width: 25%;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.subscription-icon {
    position: relative;
    width: 100%;
    height: auto;
}

.subscription-icon-svg {
    fill: white;
    width: 75px;
    height: 75px;
}

@media screen and (max-width: 900px) {

.subscription-header {
    max-width: 80%;
    font-size: 24px;
}

.subscription-conf-text {
 max-width: 80%;
}

}

.header-7d7s {
    position: fixed;
    height: 35px;
    width: 100%;
    background: black;
    z-index: 9;
    overflow: hidden;
     left: 0;
     transition: 1.2s ease-in-out;
}

.ticker-news {
  width: 7000px;
  padding: 10px 0;
  color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
}

.sounds-ticker {
  display: inline-block;
  animation: news 40s infinite linear;
}

.sounds-ticker {
    padding: 0 25px;
}

.ticker-headline {
position: absolute;
    animation: none;
    left: 75px;
    background-color: black;
    height: 100%;
    z-index: 10;
    padding: 0 10px;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #fff;
    font-size: 12px;
}

@keyframes news {
  0% {transform: translateX(0);}
  100% {transform: translateX(-5500px);}
}

.icon-7d7s {
    position: absolute;
    left: 0;
    height: 100%;
    width: 75px;
    background-color: #eee;
    z-index: 10;
}

.sounds-icon {
    color: #222222;
    position: absolute;
    font-weight: 600;
    padding: 5px 10px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

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


.sounds-svg {
    animation: soundspulse 0.8s infinite ease-in-out alternate;
}

.open-sounds-text {
    animation: soundspulse 0.8s infinite ease-in-out alternate;
}

.sounds-icon:hover .icon-7d7s {
    color: #888888;
     transition: 0.5s;
}

.sounds-icon:hover .sounds-svg {
    fill: red;
     transition: 0.5s;
}

.sounds-icon:hover .open-sounds-text {
    color: red;
     transition: 0.5s;
}

.ticker-news:hover {
   animation-play-state: paused; 
}


.footer--main {
    background-color: #050215;
    background-image: url(../img/logo/one2.svg);
    background-size: 100px;
    background-position: center 90%;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    z-index: -1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.footer-text {
       position: sticky;
    bottom: 10px;
    font-size: 32px;
    text-transform: capitalize;
    margin: 0.3em 0 0.67em;
}

.footer-main--block {
    position: sticky;
    bottom: 10px;
    margin: 0 0 50px;
}

.footer-main--block p {
    width: 50%;
    text-align: justify;
}

p.footer-notice {
        text-align: center;
    margin-top: 15px;
}


.show--container {
    position: absolute;
    z-index: 9;
    background: rgba(0,0,0,0.95);
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    left: 45%;
    width: 30%;
    flex-direction: column;
    display: none;
    cursor: move;
    border: 3px solid;
    border-radius: 5px;
}

#show--container-ny {
    background-color: crimson;
    color: white;
    right: 5%;
    left: unset;
}

#show--container-pu {
background-color: bisque;
color: black;
}

#show--container-par {
   background-color: whitesmoke;  
   color: black;
   right: 65%;
    left: unset;
}

#show--container-ldn {
   background-color: lightseagreen; 
    left: 5%;
    color: black;
    border: 3px solid;
}

#show--container-mil {
  background-color: skyblue;
    color: lightgoldenrodyellow;  
}

#show--container-tky {
    color: wheat;
}

.show--container:active {
    z-index: 20;
}

.show--container h1{
    font-weight: 300;
}

.show--container-cls {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    font-weight: 600;
}

   .show-location-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100vw;
   } 
   
   .show-loc {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 20px;
       width: calc(100% / 6);
       height: 300px;
    background-position: center;
    background-size: contain;
    flex-direction: column;
   }
   
   .show-loc h1 {
       padding-top: 0;
       cursor: pointer;
   }
   
   .show-ldn {
          background-color: lightseagreen;
   }
   
.show-newyork {
    background-color: crimson;
    color: white;
}

.show-mil {
   background-color: skyblue;
    color: lightgoldenrodyellow;
}

.show-mil h1 {
    padding-bottom: 15px;
}

.show-par {
       background-color: whitesmoke; 
}
.show-pitti {
        background-color: bisque;
}

.show-tokyo {
    background-color: #0f0f0f;
    color: wheat;
}



.ss1 {
    font-weight: 500;
}

@media screen and (max-width: 900px) {

.footer-main {
    height: 400px;
}

.footer-text {
    font-size: 54px;
}

   .show-loc {
       width: 50%;
       height: 250px;
   }
   
   .show-pitti {
       width: 50%;
   }
   
   .shows-pitti {
    font-size: 16px;
}
   
   .show--container {
       width: 60%;
    transform: translate(-50%,40%);
    left: 50% !important;
   }
   
   .show--container h1{
    font-size: 21px;
}
}

  .grow {
        height: 100vh;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: 1.2s ease-in-out;
        z-index: 99999;
    }
    
    .block-7d7s {
        display: none;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    
    .block-7d7s-main {
        height: calc(100% - 125px);
        position: relative;
    }
    
    
    .carousel-li .seriftext {
        text-decoration: none;
    }
    
    .carousel-7d7s {
        height: 150px;
        color: white;
        width: 100%;
    }
    
  .carousel-7d7s  .flickity-prev-next-button .flickity-button-icon {
    fill: white;
}

.block-7d7s-close {
    z-index: 1;
    display: none;
}

.carousel-7d7s .flickity-prev-next-button {
    position: absolute;
}

.sounds-big {
    font-weight: 900;
    font-size: 139px;
    color: white;
    margin: 0;
    padding: 0;
}

.sounds-ticker {
    font-weight: 600;
    text-transform: capitalize;
}

.sounds-ticker .seriftext {
    font-weight: 200;
    text-decoration: unset;
    padding-right: 2.5px;
}

.ticker__item .seriftext { 
   font-weight: 200;
    text-decoration: unset;
    padding-right: 2.5px; 
}

@media screen and (max-width: 900px) {
    .sounds-big {
    font-size: 64px;
}

.carousel-li {
font-size: 24px;
 }
 
 .heading-7d7s {
    font-size: 21px; 
 }
}

  @-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

    [data-animation] {
      animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, normal) var(--animfm, none) var(--animps, running);
    }

.ticker-wrap {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
  height: 35px;
  background-color: #080908; 
  padding-left: 100%;
  box-sizing: content-box;
  z-index: 1;
}

  .tickers {
    display: inline-block;
    height: 35px;
    line-height: 35px;  
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    -webkit-animation-iteration-count: infinite; 
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
   -webkit-animation-name: ticker;
           animation-name: ticker;
    -webkit-animation-duration: 27.5s;
            animation-duration: 27.5s;
             animation-direction: normal;
}

.tickers:hover {
     animation-play-state: paused;
}

 .ticker__item {
      display: inline-block;
      padding: 0 5rem;
      font-size: 12px;
      color: white;   
      font-weight: 600;
    }
    
        
.fcw h1 {
    font-weight: 300;
    font-size: 4vw;
    max-width: 75%;
    max-height: 80vh;
    text-align: justify;
    margin: 0 auto;
}

.fcw-title {
   font-weight: 600; 
}

.fcw-subtitle {
    text-decoration: underline;
    text-transform: capitalize;
    text-decoration-thickness: 2px;
}

.fcw p {
    margin-top: 25px;
   cursor: pointer;
   text-decoration: underline;
}
    
    .wrapper-img-heading {
        width: 75%;
    }
    
    .heading-conversations {
        font-size: 10vw;
        margin: 0.2em 0 0;
    }
    
    .main-search-text {
        font-size: 21px;
    }
    
    .wrapper-panel {
    max-width: 75%;
    margin: 0 auto;
    padding-top: 90px;
    }
    
    .wrapper-panel-heading {
        margin: 0 auto;
    }
    
     .wrapper-panel .block-bg  {
     width: calc(100% / 3);  
     }
     
     .tab-header {
    text-align: center;
    margin: 0 auto;
    font-size: 8vw;
    text-transform: none;
    border-bottom: 8px solid;
    display: inline-block;
    width: max-content;
}

.cutoff-section {
    border: 0.5px dashed black;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.cutoff-section .storyslick {
    text-align: left;
}

.cutoff-section .storyslick h4 {
    margin: 20px 0 5px;
}


.cutoff-section .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
}

.cutoff-section .slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    left: 10px;
}

.cutoff-section .slick-arrow {
    top: 0;
    color: black;
}

.cutoff-section .slick-prev:before, .cutoff-section .slick-next:before {
    color: black;
    font-size: 24px;
}

.cutoff-cat {
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 7.5px;
    font-size: 10px;
    margin: 10px 0;
}

.cutoff-section .storyslick:first-child {
    margin-left: 10px;
}

@media screen and (max-width: 900px) {
     .ticker__item {
      padding: 0 2.5rem;
    }
    
    .tab-header {
font-size: 2em;
 border-bottom: 4px solid;
}

.cutoff-section {
    padding-bottom: 10px;
}

.cutoff-section .storyslick h4 {
    margin: 20px 10px 5px;
}

.cutoff-section p {
    margin: 5px 10px;
}

p.cutoff-cat {
    margin: 10px;
}

.ticker-headline {
    font-size: 9px;
    text-wrap: wrap;
    width: 70px;
}

.wrapper-panel {
    padding-top: 50px;
    max-width: 75%;
}
}

p.small-text-credit {
    font-size: 10px;
    margin-top: 25px;
}

@media screen and (min-width: 900px) {

#selects-scroll {
    overflow-y: scroll;
}
}

#selects-scroll h2 {
    max-width: 75%;
    margin: 0 auto;
}

@media screen and (max-width: 900px) {

p.small-text-credit {
    font-size: 8px;
}
}

.selectsWk {
    margin: 0 auto;
    text-align: center;
}

.carousel-cell:not(.is-sounds) .heading-7d7s {
    opacity: 0.75;
}

.cutoff-section .storyslick p {
   text-align: justify; 
}

.cutoff-section .author {
    margin-top: 10px;
}

#main h3.sounds-heading {
   margin: 15px auto; 
}

#main .box-desc p.sounds-li {
    margin: 10px auto;
    font-weight: 700;
}

.multiple-images h3.wrapper-panel-heading {
    margin: 0 auto;
    text-align: center;
}

.blockWrapper p.image-caption {
    font-size: 8px !important;
    margin-top: 10px;
    max-width: 90%;
    font-weight: 600;
    text-align: left !important;
}

.block-bg img {
    max-height: 500px;
    object-fit: contain;
}

.wrapper-block .block-bg img {
    max-height: 500px;
    object-fit: cover;
    height: 500px;
}

.slick-boundary {
        height: 75vh;
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

@media screen and (max-width: 900px) {
    .wrapper-panel .block-bg {
    width: 100%;
}

.slick-boundary {
        height: 60vh;
}

.block-bg img {
    max-height: 250px;
}

.wrapper-block .block-bg img {
    max-height: 300px;
}
}

.inpic-heading-container {
    z-index: 9;
    position: absolute;
    left: 10px;
    top: 10px;  
}

.picture-heading {
    text-transform: unset;
    font-size: 10vw;
    margin: 0.1em 0 0;
}

.inpic-sub {
    text-align: right;
    font-size: 21px;
    margin-top: -25px;
}

.inp-heading {
    font-size: 36px;
    font-weight: 200;
}

.inp-subheading {
    margin: 0 auto;
    font-family: 'aktiv-grotesk';
     font-weight: 200;
}

@media screen and (max-width: 900px) {
  .picture-heading {
     text-align: left;
    font-size: 22vw;
}

.inpic-sub {
    text-align: right;
    font-size: 18px;
    margin-top: -15px;
}  
.inp-heading {
    font-size: 24px;
    max-width: 75%;
}
}

.season-focus-block {
    padding-top: 75px;
}

.shapes-block {
   display: flex;
    mix-blend-mode: difference;
    position: absolute;
    z-index: -1;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
}

.circle-block {
    display: flex;
    mix-blend-mode: difference;
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    left: 0;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.circle-block svg {
    width: 15%;
}

.shapes-block svg {
   width: 50%;
   height: 50%;
   fill: white;
}

.sounds-date {
    font-family: 'neue-haas-grotesk-display';
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    border-bottom: 2px solid;
}

.audio-selected.sounds-key {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 0;
    font-weight: 600;
}

.sounds-key-svg {
    fill: white;
    margin-left: 5px;
}

.sounds-key-block {
    padding: 2rem 4rem;
    z-index: 999999;
    left: 50%;
}

.sounds-key-block h2 { 
    padding: 10px;
    text-decoration: underline;
}

.sounds-key-block p { 
    line-height: 1.5;
}

.sounds-key {
    cursor: pointer;
}

@media screen and (max-width: 900px) {
    .sounds-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.sounds-key-block {
    width: 65%;
}

}

.square-feature-section {
    display: flex;
    flex-wrap: wrap;
        height: 100%;
        background-color: #060606;
        color: white;
}
    .square-feature {
    width: 50%;
    height: 75vh;
    color: white;
    background-position: top;
    transition: 0.5s;
    }
    
    .block--desc {
     height: auto;   
    }
    
    
    .block--desc-text {
     color: black;   
    }
    
    .square-feature-block {
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    padding: 15px;
    height: 100%;
    }
    
       .square-feature-block:nth-of-type(2n) {
       text-align: right;
       text-align-last: right;
    }
    
    .square-feature-block:nth-of-type(2n) .rectangle-body-text {
       text-align: right;
       text-align-last: right;
    }
    
    .text-only-block {
      justify-content: space-evenly;  
    }
    
    .square-heading {
    font-size: 4em;    
    line-height: 0.9;
    text-transform: none; 
    padding: 0;
    margin: 0;
    opacity: 0.75;
    transition: 0.6s;
    }
    
    .square-body-text {
        font-weight: 600;
         opacity: 0.75;
         transition: 0.6s;
         font-size: 24px;
        text-align: justify;
    }
    
    .square-body-text:hover {
      opacity: 1;  
      transition: 0.6s;
    }
    
    .square-heading:hover {
      opacity: 1;   
      transition: 0.6s;
    }
    
     .rectangle-feature {
    width: 100%;
    height: auto;
    color: white;
    background-position: top;
    transition: 0.5s;
    }
    
    .rectangle-feature-block {
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    padding: 15px;
    height: 100%;
}

.conv-square .discover--this .discover-arrow {
    fill: white !important;
}

.conv-square:hover .discover--this .discover-arrow {
    fill: black !important;
    transition: 1.2s;
}

.rectangle-body-text {
        font-weight: 600;
         opacity: 0.75;
         transition: 0.6s;
         font-size: 24px;
         max-width: 60%;
        text-align: left;
    }
  
  p.author.square-body-text {   
    margin: 0 0 10px;
}
  
 p.author.rectangle-body-text {   
    margin: 0 0 10px;
}

.date-text {
    margin: 0;
}

@media screen and (max-width: 900px) {
  .square-feature-section {
      flex-direction: column;
}  

.square-body-text {
    font-size: 18px; 
}

.square-heading {
    font-size: 3em;  
}

 .square-feature {
width: 100%;
height: 60vh;
}

.rectangle-feature-block {
    background-color: #050505;
}

.rectangle-body-text {
 max-width: 100%;
 font-size: 18px; 
    }
}

.rectangle-feature-block {
background-blend-mode: exclusion;
}

.rectangle-feature-block .square-heading {
        font-size: 7em;
}

.rectangle-feature-block .feature-box-content {
        display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.rectangle-feature-block .rectangle-body-text {
    max-width: 100%;
}

.rectangle-feature-block .h1-subtitle {
    font-weight: 500;
}

.feature-block:first-of-type {
    margin-top: 35px;
}

@media screen and (max-width: 900px) {
.rectangle-feature-block .feature-box-content {
    margin: 15px 0;
}

.rectangle-feature-block .square-heading {
    font-size: 2.5em;
    padding: 30px 0 0;
}

.rectangle-feature-block {
        flex-direction: column !important;
}
}

.cookie-sub-content {
    font-size: 12px;
    margin: 5px auto;
    max-width: 75%;
}

.ss-focus-title {
    font-size: 64px;
    -webkit-text-stroke: black 2px;
    color: transparent;
    letter-spacing: 0.01em;
    margin: 0.2em auto;
    width: 75%;
    transition: 0.8s ease-in;
}

.ss-focus-title:hover {
    color: black;
    transition: 0.8s ease-in;
}

.ss-focus-desc {
    text-align: justify;
    width: 25%;
    padding-bottom: 25px;
}

.wrapper-block {
    display: flex;
    flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 50px;
        justify-content: space-evenly;
}

.block-bg {
    width: calc(100% / 4);
    height: auto;
    padding: 0 20px;
}

.block-bg h4 {
    text-align: left;
    font-weight: 500;
    font-size: 24px;
    margin: 20px 0 5px;
    text-transform: uppercase;
    color: black;
}

.block-bg h5 {
    color: gray;
    font-weight: 400;
    text-align: left;
    font-size: 18px;
}

.block-bg .underline {
    font-weight: 300; 
}

.block-bg p {
    font-family: 'neue-haas-grotesk-display';
    line-height: 1.5;
     font-weight: 400;
}

.block-bg img {
    width: 100%;
    padding: 15px 0;
}

.block-bg-span {
    border: 1px solid;
    padding: 2px 7.5px;
    font-size: 12px;
    border-radius: 15px;
}

@media screen and (max-width: 900px) {
    
    .ss-focus-title { 
        font-size: 32px;
        -webkit-text-stroke: black 1px;
        text-align: justify;
    text-align-last: center;
    }
    
    .ss-focus-desc {
    width: 75%;
}
    
    .block-bg {
    width: 50%;
    height: auto;
    padding: 0 5px;
}

.block-bg h4 {
    text-align: center;
    font-size: 21px;
}

.block-bg h5 {
    text-align: center;
    font-size: 14px;
}

.wrapper-block {
        padding-bottom: 25px;
}
    
    .smaller-heading {
    font-size: 44px; 
}
}

.next-block {
    z-index: 9;
}

.home-subscriber-block {
    z-index: 9;
}

.header-7d7s {
    top: 0;
}

.image-holder-block {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

.holder-icons {
    background-size: contain;
    background-repeat: no-repeat;
    height: 200px;
    width: 200px;
    background-position: center;
}

/*
.holder-icon-1 {
        background-image: url(../img/pride.png);
}

.holder-icon-2 {
        background-image: url(../img/sloth.png);
}

.holder-icon-3 {
        background-image: url(../img/wrath.png);
}

.holder-icon-4 {
        background-image: url(../img/greed.png);
}

.holder-icon-5 {
        background-image: url(../img/gluttony.png);
}

.holder-icon-6 {
        background-image: url(../img/lust.png);
}

.holder-icon-7 {
        background-image: url(../img/envy.jpg);
}
*/

.holder-icon-1 {
            background-color: #017ace;
}

.holder-icon-2 {
            background-color: #118AD1;
}

.holder-icon-3 {
            background-color: #2199D3;
}

.holder-icon-4 {
            background-color: #31A8D6;
}

.holder-icon-5 {
            background-color: #39B0D7;
}

.holder-icon-6 {
            background-color: #41B7D8;
}

.holder-icon-7 {
            background-color: #51C7DB;
}

.img--1 {
    border: 30px solid #000000;
    width: 120px;
    height: 120px;
}

.img--2 {
        border: 15px solid #000000;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: transparent;
    outline: #000000 20px solid;
    outline-offset: 5px;
}


.arrow-up {
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 120px solid transparent;
    border-bottom: 120px solid #000000;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid #000000;
    border-right: 60px solid;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}

.drag-tab {
position: absolute;
    right: 0;
    padding: 15px 20px;
    background: #242424;
    margin: -48px auto;
    border-top-left-radius: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    cursor: grab;
    z-index: 5;
    color: white;
}

.drag-tab-text {
    text-align: center;
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
}

.frame-container {
    position: relative;
    /* border: 12.5px solid; */
    outline: 7.5px solid;
    outline-offset: 1px;
    transform-style: preserve-3d;
    background-color: #edeeeeb5;
    transition: 0.8s;
    box-shadow: 8px -4px 14px 2px #979797;
}

.vertical {
      width: 200px;
    height: 250px;  
}

.square {
      width: 250px;
    height: 250px;  
}

.horizontal {
    width: 250px;
    height: 200px;
}

.frame-block {
    background-position: center;
    transition: background-image 0.5s ease; 
     position: relative;
    transform: translateZ(20px);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}


/*.frame-text {
    border: 2.5px solid;
    outline: 4.5px solid;
    outline-offset: 2px;
    padding: 10px 20px;
    line-height: 1.2;
} */

.frame-headline {
    font-size: 48px;
    font-weight: 800;
    line-height: 0.65;
    letter-spacing: -0.03em;
    text-transform: none;
    margin: 0 auto;
    padding: 0;
    max-width: 90%;
}

.opening-body-headline {
   font-size: 54px;
    text-align: justify;
    padding: 15px 20px;
    border-top: 4px solid;
    border-bottom: 4px solid;
    text-transform: none;
    letter-spacing: -0.05em;
    font-weight: 700;
    margin: 0 20px;
    color: #000000;
    line-height: 0.75;
}

.frame-tooltip {
    display: none;
    position: fixed;
    bottom: 40%;
    border: 3px dotted;
    border-radius: 50%;
    padding: 1px 5px;
    font-size: 18px;
    font-weight: 600;
    z-index: 9;
    transition: 0.4s;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.is-selected .frame-tooltip {
    display: flex;
    cursor: pointer;
}

.frame-tooltip:hover {
    transition: 0.4s;
    color: #017ace;
    cursor: pointer;
}

.is-selected .vertical {
    width: 275px;
    height: 350px;
    transition: 0.8s;
}

.is-selected .horizontal {
    height: 275px;
    width: 350px;
}

.is-selected .square {
    height: 350px;
    width: 350px;
}

.frame-headline a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.frame-headline a:hover {
    background-size: 100% 100%;
}

.frame-day {
    margin: 0;
    padding: 0;
    text-transform: none;
    font-size: 36px;
    text-align: center;
}

.quote-block {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    background-color: #000000f5;
    width: 100%;
    height: 100%;
    color: white;
    flex-direction: column;
}

.flexed {
    display: flex;
    z-index: 999999;
}

.quote-block-text {
  text-align: justify;
  max-width: 65%;
  text-transform: none;
  letter-spacing: -0.04em;
  line-height: 0.8;
  font-weight: 700;
  font-size: 24px;

}

.below-carousel {
    width: 100vw;
    position: relative;
    z-index: 5;
    transition: 0.4s ease-in;
    color: #fff;
    margin: 98vh 0 0;
    overflow-y: auto;
    height: auto;
}

.underlay-bg-block {
    z-index: -1;
    position: absolute;
    font-size: 30px;
    line-height: 0.65;
    letter-spacing: -0.03em;
    text-transform: none;
    color: #000000;
    opacity: 0;
    height: 75%;
    top: 0;
    overflow: hidden;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 75%;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.underlay-bg-block.animate-opacity {
    animation: fadeInOut 7s ease-in-out;
    animation-delay: 0.5s; 
}

.h1-subtitle {
    font-weight: 600;
}


#mainBlock {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


    .carousel-ol {
    flex-direction: column;
    display: flex;
    flex-wrap: nowrap;
    height: calc(100% - 125px);
    justify-content: flex-start;
    align-items: center;
    color: white;
    }
    
    .carousel-li {
        width: 50%;
    height: fit-content;
    font-size: 30px;
    padding: 7.5px 0;
    font-weight: 800;
    list-style: none;
    }
    
    .carousel-li .seriftext {
        text-decoration: none;
    }
    
 .heading-7d7s {
        font-weight: 500;
        padding: 0;
    }
    
.sounds-big {
    font-weight: 900;
    font-size: 139px;
    color: white;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 900px) { 
    .carousel-ol {
justify-content: center;
}

.carousel-li {
font-size: 18px;
}

}

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


#quote-block-link:hover {
    border-bottom: dashed 1px;
    cursor: pointer;
}

.frame-block.background-loaded {
    transition: background-image 0.5s ease-in-out; 
}



#home input#esubscription {
    left: unset;
    position: relative;
    margin: 0 10px;
    width: 70%;
    border-radius: 50px;
    background: #ffffff;
    border: 5px #ffffff solid;
    color: #004d82;
    padding: 15px 0 15px 30px;
}

#home input#esubscription::placeholder {
    color: #004d82;
    opacity: 0.9;
}


@media screen and (max-width: 900px) {
#home input#esubscription {
    width: 100%;
    margin: 10px;
        font-size: 24px;
        padding: 10px 0 10px 20px;
}
}

#sqmmm:hover {
    background-color: #1b859cd4;
    background-image: url(https://one2.digital/img/mm-ss90.jpeg);
}

 .inpic-container {
            transition: background 1.2s ease-in-out;
        }

        .inpic-hover {
            background-color: #d8d8d8;
            background-size: cover;
            background-position: center;
            background-blend-mode: soft-light;
        }

        #inpicture .wrapper-block {
            display: none;
        }

        .wrapper-in-pic img {
            max-height: unset;
            height: unset;
            width: 60%;
        }

        .inpic-summary {
            max-width: 50%;
            line-height: 1.25;
            text-align: justify;
            font-weight: 300;
            font-size: 24px;
            text-transform: none;
        }

       
#inpicture .carousel {
    height: 100vh; 
}

#inpicture .flickity-enabled.is-draggable .flickity-viewport {
    height: 100% !important;
}

#inpicture .carousel-cell {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-position: center;
     overflow-y: hidden; 
}

#inpicture .cell-artists {
  overflow-y: scroll; 
  margin-top: 250px;
justify-content: flex-start;
}

#inpicture .carousel-cell-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 75%;
    height: 600px;
    flex-direction: column;
    flex-wrap: wrap;
}



.cell-artists h1 {
    font-size: 4vw;
    text-align: justify;
    padding: 0 25px 50px;
}


#inpicture .carousel-cell img {
    height: 50%;
    margin-bottom: 25px;
}

#inpicture .carousel-cell-container img {
    width: 25%;
    height: unset;
}

#inpicture .wrapper-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 75%;
    padding-top: 0;
    flex-wrap: wrap;
}

.wrapper-panel-multi-image {
    height: auto;
}

#inpicture .block-bg-main {
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}


#inpicture .block-bg-main img {
    min-height: unset;
    min-width: unset;
    height: 100%;
    width: auto;
}


#inpicture .feature-title {
    display: none;
}

.artist-link {
    cursor: pointer;
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.artist-link:hover {
    background-size: 100% 100%;
}

.picture-heading {
    transition: 1.2s;
    text-align: right;
}

.picture-heading a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.picture-heading a:hover {
    background-size: 100% 100%;
    transition: background-size 0.5s ease-out;
}

.inpic-sub {
    font-size: 54px;
    text-decoration: none;
    font-weight: 100;
    font-style: italic;
    transition: 1.2s;
    display: inline-flex;
    margin-left: 0;
    margin-right: 0;
        margin-top: -15px;
}

.small-font {
  font-size: 6vw; 
  transition: 1.2s;
      margin: 0.25em 0 0;
}

.small-font-sub {
   font-size: 36px;
    transition: 1.2s;
}

.multiple-block {
    width: 90%;
}

.wrapper-panel .block-bg {
    width: calc(100% / 3);
    height: auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}


#inpicture .wrapper-block .block-bg img {
    max-height: unset;
    object-fit: cover;
    width: 100%;
    height: 400px;
}

.inpic-summary {
    font-weight: 100;
    text-decoration: none;
    text-transform: none;
    font-style: italic;
    max-width: 50%;
    text-align: justify;
    display: flex;
}

.inpic-heading-container {
     color: black;
    mix-blend-mode: unset;
}

.inpic-mbm {
    color: white;
    mix-blend-mode: difference;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.inpic-summary-link:hover {
    border-bottom: dashed 1px;
}

.inpic-sub:hover {
    border-bottom: dashed 1px;
}

  .portrait {
            height: 100%;
        }

        .landscape {
            height: 80%;
        }
        
        #inpicture .flickity-page-dots {
    position: fixed;
    bottom: 0;
    z-index: 99999;
    height: auto;
    transform: none;
    left: 0;
    line-height: 0;
}

#inpicture .flickity-page-dots .dot {
    height: 10px;
}

#inpicture::-webkit-scrollbar {
  display: none;
}

#inpicture .flickity-button {
    position: absolute;
  }

@media screen and (max-width: 900px) {
.cell-artists {
    margin-top: 125px;
}

#inpicture .carousel-cell:not(.cell-artists) {
    padding-top: 50px;
}

#inpicture .carousel-cell img {
    height: unset;
    width: 65%;
}

.inpic-mbm {
    align-items: center;
    justify-content: center;
    width: 100%;
}

.picture-heading {
    text-align: center;
}

.small-font {
    font-size: 12.5vw;
}

.small-font-sub {
    font-size: 24px;
    text-align: center;
    margin-top: 0;
    max-width: 90%;
}

.cell-artists h1 {
    font-size: 7.5vw;
    padding: 0 10px 50px;
}

.inpic-summary {
    max-width: 80%;
    font-size: 21px;
    line-height: 1.15;
}

.block-bg-main img {
    height: 100%;
    width: 90%;
    object-fit: contain;
}

#inpicture .wrapper-panel {
    flex-direction: column;
    height: 50%;
}

#inpicture .wrapper-panel .block-bg {
    width: 100%;
    height: calc(100% / 3);
        padding: 5px 20px;
            align-items: center;
}

  #inpicture   .wrapper-block .block-bg img {
        object-fit: cover;
        height: 125px;
        width: 100%;
        object-position: center;
    }

}

.conversation-index p {
padding: 10px 25px 0 50px;
}

@media screen and (max-width: 900px) {
   .conversation-index p {
padding: 10px 0px 10px;
} 
} 

#conversations p {
  margin: unset;
}

.conv-grid-item {
    height: auto; 
    width: calc(100% / 4);
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.grid-image {
    width: 100%;
}

.grid-image img {
    width: 100%;
}

.grid-desc {
    width: 100%;
    padding: 5px 15px;
}

@media screen and (max-width: 900px) {
.conv-grid-item {
    width: 100%;
}
}

.grid-desc .author {
    margin: 10px auto;
}

.story-tagline {
    position: relative;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 3px solid #000;
    padding: 2px 5px;
    letter-spacing: 0.02em;
}

.search-block {
    margin: 100px auto 50px;
    position: relative;
    height: 25%;
    left: 0;
    right: 0;
    width: 100%;
}


#coversations main a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#fe8531 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

#coversations main a:hover {
    background-size: 100% 100%;
}

#conversations .box-caption {
  font-size: 16px;
  margin-bottom: 25px;
  text-align: justify;
}

  #conversations  ::-webkit-scrollbar {
        display: none;
    }

 #conversations .mainsearch {
        background-color: transparent;
    font-weight: 600;
    width: 25%;
}


.story--date {
    text-align: center;
    padding-bottom: 10px;
}

@media only screen and (max-width: 900px) {
    .search-block {
         margin: 55px auto 25px;
    display: flex;
    justify-content: center;
    align-content: flex-start;
        flex-direction: column;
    }
    
#conversations .mainsearch {
        width: 80%;
}

.grid-desc h1 {
    font-size: 42px;
}

}

  #shows_index main {
            height: 100vh;
            overflow-y: hidden;
        }

       #shows_index ::-webkit-scrollbar {
          width: 15px;
        }

      #shows_index  ::-webkit-scrollbar-track {
          background: #f1f1f1; 
        }
         
      #shows_index  ::-webkit-scrollbar-thumb {
          background: #222222; 
        }

     #shows_index   ::-webkit-scrollbar-thumb:hover {
          background: #017ace; 
        }

        .show-directory-wrapper {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: row;
            width: 100%;
        }

        .show-directory-block {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
            height: 100vh;
            position: relative;
        }

        .show-directory-flex-wrapper {
            height: 100vh;
            display: block;
            width: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .show-index {
            height: fit-content;
            padding: 0 75px;
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .show-index h1 {
            text-align: center;
            margin: 0 auto;
            padding: 0;
            color: black;
            -webkit-text-stroke: 3px transparent;
            transition: 1.2s;
            opacity: 1;
            letter-spacing: 0.01em;
            line-height: 0.9;
            font-family: garamond-premier-pro-display, serif;
            font-style: italic;
        }

        .show-index h1:hover {
            transition: 1.2s;
            -webkit-text-stroke: 5px black;
            color: transparent;
        }

        .show-title--list h2 {
            text-align: left;
            font-weight: 400;
            text-decoration: underline;
        }

        .scroll-snap {
            scroll-snap-type: y mandatory;
        }

        .show-directory-designer {
            width: -webkit-fill-available;
            scroll-snap-align: center;
            overflow-x: scroll;
        }

        .show-directory-house {
            width: -webkit-fill-available;
            scroll-snap-align: center;
            overflow-x: scroll;
        }

        .show-directory-season {
            width: -webkit-fill-available;
            scroll-snap-align: center;
            overflow-x: scroll;
        }

        .show-directory-location {
            width: -webkit-fill-available;
            scroll-snap-align: center;
            overflow-x: scroll;
        }

       #shows_index .directory-index-block {
            min-width: 35vw;
            border-right: 1px dashed;
            justify-content: center;
        }
        
       #shows_index .list-wrapper {
            padding: 0;
            height: 0;
            display: none;
        }

        #shows_index .list-wrapper-open {
            max-height: 250px;
            overflow-y: auto;
            height: unset;
            margin: 25px 0 0;
            display: block;
        }
        
       #shows_index .show-index--list {
            padding: 10px 25px;
        }

      #shows_index   .show-index--list.wrapped:hover {
            color: #017ace;
        } 
        
       #shows_index #homesection {
            background-size: 0;
            transition: background 0.6s ease;
        }

      .index-pitti {
    font-family: 'aktiv-grotesk';
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 0.75;
    font-weight: 600;
}

.index-milan {
    font-family: 'adobe-garamond-pro';
    font-style: italic;
    -webkit-text-stroke: 3px transparent;
}

.index-milan:hover {
    -webkit-text-stroke: 3px black;
}

.index-london {
    border-bottom: 8px black solid;
    letter-spacing: -0.08em;
    font-weight: 800;
}

.index-paris {
font-family: albiona, sans-serif;
    letter-spacing: 0.05em;
    border: 7.5px solid;
    padding: 10px 5px;
}

.show-directory-location .show-index:nth-child(2) h1 {
    font-family: 'neue-haas-grotesk-pro';
    font-style: normal;
    border-bottom: 8px black solid;
    letter-spacing: -0.06em;
    font-weight: 800;
}

.show-directory-location .show-index:nth-child(3) h1 {
     font-family: 'adobe-garamond-pro';
    font-style: italic;
    -webkit-text-stroke: 3px transparent;
}

.show-directory-location .show-index:nth-child(3) h1:hover {
-webkit-text-stroke: 3px black;
}

.show-directory-location .show-index:nth-child(4) h1 {
    font-family: albiona, sans-serif;
    letter-spacing: 0.05em;
    border: 7.5px solid;
    outline: 7.5px solid;
    outline-offset: 5px;
    padding: 10px 5px;
}

.show-directory-location .show-index:nth-child(5) h1 {
    font-family: 'aktiv-grotesk';
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 0.75;
    font-weight: 600;
}

.show-directory-season h1 {
    font-size: 64px;
    font-family: 'aktiv-grotesk-condensed';
    font-weight: 700;
    -webkit-text-stroke: 2px transparent;
    font-style: normal;
}

.show-directory-season h1:hover {
-webkit-text-stroke: 2px black;
}

#shows_index  .list-disappear {
    opacity: 0;
    transition: 0.6s;
}

.show-index.show-title--list {
    position: sticky;
    left: 0;
    background-color: white;
    height: 100%;
    justify-content: center;
    z-index: 1;
    border-right: 1px dashed;
}

@media screen and (max-width: 900px) {
    
    .secondaryBlock {
        position: fixed;
    }
    
    .show-directory-wrapper {
            flex-direction: column;
    }
    
    .directory-index-block {
    min-width: 0;
    border-right: 0;
    justify-content: center;
    width: 100%;
    height: 200px;
    border-bottom: 1px dashed;
}

.show-directory-flex-wrapper {
    height: calc(100vh - 200px);
}

.show-directory-block:not(.directory-index-block) {
        height: 100%;
    overflow-y: hidden;
    border-bottom: 1px dashed;
}

#shows_index .show-index.show-title--list {
    position: relative;
    padding: 0 25px;
    margin: 0;
}

#shows_index .show-directory-house .show-index, .show-directory-designer .show-index {
    padding: 0 25px;
}

#shows_index .show-letters {
    font-size: 64px !important;
}

.show-index h1:hover {
    -webkit-text-stroke: 2px black;
}

.show-directory-season h1 {
    font-size: 42px;
    -webkit-text-stroke: 1px transparent;
}

.show-index h1 {
   -webkit-text-stroke: 2px transparent;
}

.show-directory-season h1:hover {
    -webkit-text-stroke: 1px black;
}

.show-directory-location h1 {
    font-size: 42px;
}

.show-directory-location .show-index:nth-child(2) h1 {
    border-bottom: 4px black solid;
    -webkit-text-stroke: 1px transparent;
}

.show-directory-location .show-index:nth-child(2) h1:hover {
    border-bottom: 1px black solid;
    -webkit-text-stroke: 1px black;
}

.show-directory-location .show-index:nth-child(3) h1 {
    -webkit-text-stroke: 1px transparent;
}

.show-directory-location .show-index:nth-child(3) h1:hover {
    -webkit-text-stroke: 1px black;
}

.show-directory-location .show-index:nth-child(4) h1 {
    border: 5px solid;
    outline: 5px solid;
}
 
 .show-directory-location .show-index:nth-child(4) h1:hover {
    -webkit-text-stroke: 2px black;
}

 .show-directory-location .show-index:nth-child(5) h1 {
    -webkit-text-stroke: 1px transparent;
}

 .show-directory-location .show-index:nth-child(5) h1:hover {
    -webkit-text-stroke: 1px black;
}
    
}

.vinyl-release-year {
    padding: 5px 10px;
    border: 1px solid;
    display: inline;
    border-radius: 7.5px;
    font-size: 10px;
}



.playing-desc-header {
    text-transform: none;
    line-height: 1.1;
    font-weight: 600;
    font-size: 18px;
    padding: 0;
}

.recommend-hidden {
    font-weight: 500;
    display: inline-block;
    width: 50%;
    font-size: 32px;
    line-height: 1;
}

.playWrapper {
    position: fixed;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background-color: #c9c9c9;
    color: black;
    flex-direction: column;
    top: 0;
}

.seven-days {
    font-weight: 600;
    text-transform: uppercase;
}

.transparent-stroke {
    -webkit-text-stroke: 5px black;
    color: transparent;
    mix-blend-mode: soft-light;
}

.playWrapper--block {
    width: calc(100% / 7);
    height: 100%;
    border-right: 0.1px dashed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-title {
    font-size: 96px;
    text-align: center;
    max-width: 95%;
    text-transform: none;
    line-height: 0.9;
    margin: 0;
    mix-blend-mode: soft-light;
}

.play--week {
    mix-blend-mode: soft-light;
    font-family: 'aktiv-grotesk-condensed';
    text-transform: uppercase;
     font-size: 36px;
     margin: 0;
}

.audio-selected {
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.5px;
}

.play--title-3 {
    font-weight: 300;
}

.play--title-4 {
    font-weight: 600;
    letter-spacing: 10px;
}

.d-artist {
    font-weight: 400;
}

.playWrapper--header {
    writing-mode: vertical-rl;
    font-size: 72px;
}

.play--day {
    writing-mode: vertical-rl;
    font-size: 27px;
    padding: 0 10px;
}

@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}

#vinyl_play .mainWrapper {
        position: fixed;
            top: 0;
}

#vinyl_play .mainSection {
    display: flex;
    justify-content: center;
    align-items: center;
}

#vinyl_play .carousel-cell {
    width: 50vw;
    transition: 1.2s;
}

.vinyl {
border: 8px solid #000000;
border-radius: 50%;
width: 50vh;
height: 50vh;
background: rgb(35, 35, 35);
background: radial-gradient(circle, rgb(35 35 35) 0%, rgba(0, 0, 0, 1) 100%);
animation-name: rotate;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: 0.9s ease;
}



:not(.is-selected).vinyl {
    animation-play-state: paused;
    scale: 0.65;
}

.is-selected .vinyl {
    animation-play-state: unset;
    scale: 1;
}

 #vinyl_play .mainSection {
    position: relative;
}

 .vinyl:hover {
     animation-play-state: paused;
}

.vinyl-outer {
    position: absolute;
    border-radius: 50%;
    width: 35%;
    height: 35%;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background-position: center;
    background-size: contain;
    background-color: #f2f2f2;
    z-index: 1;
    border: 2.5px solid #050505;
    background-repeat: no-repeat;
}

.vinyl-center {
    position: absolute;
    border-radius: 50%;
    width: 2vh;
    height: 2vh;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border: 2px solid #050505;
    background-color: #050505;
    z-index: 2;
}

h1.playing-title {
    margin: 0;
    position: absolute;
    left: 10px;
    top: 5px;
    width: 60%;
    text-align: left;
     mix-blend-mode: difference;
    font-size: 32px;
    z-index: 99;
    /* text-shadow: -2px 9px 17px black; #5d4c78 */
    color: white;
    text-transform: none;
    line-height: 1.1;
    font-weight: 600;
    transition: 1.5s;
}

.is-selected .playing-title {
    font-size: 3.75em;
    transition: 1.2s;
}

.is-selected .playing-title:hover {
    mix-blend-mode: soft-light;
    transition: 1.2s;
}

.playing-desc {
    margin: 0;
    position: absolute;
    left: 10px;
    bottom: 55px;
    width: 60%;
    text-align: left;
     mix-blend-mode: difference;
    font-size: 18px;
    z-index: 99;
    color: white;
    text-transform: none;
    line-height: 1.1;
    font-weight: 600;
    transition: 1.5s;
}

.smaller-desc {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.heavier {
  text-decoration: underline;
}

.mix-blend--difference:hover {
    mix-blend-mode: difference;
    transition: 1.5s;
}

h2.playing-subtitle {
        position: fixed;
    right: 10px;
    bottom: 10px;
    color: white;
    mix-blend-mode: difference;
    text-transform: capitalize;
    text-align: right;
    font-size: 32px;
    z-index: 999999;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.65;
}

#vinyl_play .seriftext {
    font-family: 'adobe-garamond-pro';
    font-style: normal;
    font-weight: 500;
    font-style: italic;
    text-decoration: none;
    line-height: 0.1;
}


#vinyl_play main {
    text-align: center;
}

#vinyl_play .tag-story {
    position: inherit;
}

#vinyl_play .subWrapper {
    background-color: #242424;
    color: #fff;
    margin: 100vh 0 0;
    overflow-y: auto;
    height: auto;
}

#vinyl_play .subWrapper .page-text-columns {
    height: 100%;
    padding: 50px 0;
    margin: unset !important;
}

.recommend-alt {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
        margin: 0 auto !important;
}

@media screen and (max-width:900px) {
  #vinyl_play  .subWrapper {
    height: auto;
}

.transparent-stroke {
    -webkit-text-stroke: 3px black;
}

.recommend-hidden {
    width: 75%;
    font-size: 21px;
}
    
    .play-title {
        font-size: 72px;
    }
    
  #vinyl_play  .carousel-cell {
    width: 100vw;
}

.vinyl {
width: 250px;
height: 250px;
}

.vinyl-outer {
    width: 35%;
    height: 35%;
}

.vinyl-center {
    width: 2vh;
    height: 2vh;
}

h1.playing-title {
    font-size: 26px;
}

.is-selected .playing-title {
    font-size: 48px;
}

h2.playing-subtitle {
    font-size: 24px;
}

.playing-desc {
    bottom: 100px;
}

.playing-desc-header {
    font-size: 24px;
}
    
}

p.releaseWk {
    text-align: center;
    margin: 0 auto 5px;
}

.archive-block {
    font-size: 21px;
    overflow-y: auto;
    text-transform: none;
    list-style-position: inside;
    list-style-type: auto;
    height: 100px;
}

.archive-block-item {
    list-style-type: lower-roman;
    padding: 5px 0;
    cursor: pointer;
}

/* Full-screen overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(22 22 22 / 90%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* Spinner animation */
.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #017ace;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/* Spinner keyframes */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Show overlay */
.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.key-rule-block {
   margin: 0 auto 25px;
}

.key-rule-block p {
    font-size: 14px;
    mix-blend-mode: soft-light;
    margin: 2.5px auto;
}

.login-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(10, 10, 15, 0.97);
    justify-content: center;
    align-items: center;
    display: none;
    z-index: 999;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #e0e0e0;
    height: 100vh;
}


.login--submission {
text-transform: uppercase;
    position: relative;
    padding: 10px 25px;
    cursor: pointer;
    border: none;
    font-weight: 600;
    width: unset;
    height: unset;
    border-radius: 25px;
    color: #e0e0e0;
    font-family: 'neue-haas-grotesk-display';
    background-color: #181818;
    margin: 10px 5px;
    font-size: 12px;
}

.login--submission:hover {
    background-color: #e0e0e0;
    color: #017ace;
     transition: 0.4s;
}


.login-field {
    position: relative;
    border: 3px;
    background-color: #1f1f1f;
    color: #dfdfdf;
    padding: 15px 20px;
    width: 50%;
    font-size: 14px;
    border-radius: 5px;
    margin: 5px 15px;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 500;
    transition: 0.4s;
    text-align: left;
}

.login-field::placeholder {
   color: #dfdfdf; 
}

.login-field:focus {
    border: 3px solid #017ace;
    transition: 0.4s;
}



.form-item-wrapper {
    display: flex;
    width: 75%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-error {
    padding: 20px 0;
    color: #e8340a;
    font-size: 14px;
}

.access-line {
    padding-top: 20px;
    font-size: 14px;
}

.access-link {
    padding-top: 20px;
    cursor: pointer;
}

.login-wrapper .menu-close {
    color: #e0e0e0;
}

.home--body {
        height: 100vh;
        width: 100%;
        background-size: 250px;
        background-position: center;
        background-color: rgb(10 10 20);
        background-repeat: no-repeat;    
}


.opening--title-container {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    bottom: 50px;
    width: 75%;
    color: white;
}

.opening--title {
    color: white;
    font-weight: 600;
    font-size: 16px;
}

  .index-expanded-width {
      width: 100%;
      transform: translate(-50%,0);
  }  
  
  .index-version {
      color: white;
  }
  
  ol.index-ol {
    flex-direction: row;
    flex-wrap: unset;
    width: 75%;
}

.index-ol li {
    font-size: 11px;
}

@media screen and (max-width: 900px) {
    
    .home--body {
        background-position: 50% 50%;
    }
    
    ol.index-ol {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.login--submission {
border: 3px solid;
}
.login-field {
    font-size: 32px;
    width: 80%;
    border: 0;
}

.access-line {
  padding: 20px 0;
  max-width: 80%;
}

}

.windows-ui {
    position: relative;
      background-color: #017ace;
    height: 100vh;
}

.windows-start-bar-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
     font-family: 'px sans nouveaux';
}

    .windows-home-bar {
    position: fixed;
    z-index: 99999;
    padding: 5px 10px;
    box-shadow: -2px 2px 10px 2px #ffffffb0;
    background-color: #c1c1c1;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #4e4e4e;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}


   .windows-start-button {
    background-image: url(../img/windows-icons/start-button.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 20px;
    cursor: pointer;
}

.windows-start-button-wrapper:active {
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0);
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #fdffff;
    border-bottom: 2px solid #fdffff;
}

.windows-start-button-wrapper {
    margin-left: 2px;
    margin-bottom: 2px;
    vertical-align: middle;
    display: inline-block;
    padding: 2px 6px 3px;
    background-color: #c3c3c3;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    box-shadow: inset 1px 1px #dfdfdf, 1px 0 #000, 0 1px #000, 1px 1px #000;
    color: #000;
}

.windows-start-bar-window {
    height: auto;
    padding: 8px 10px;
    margin: 0 15px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-shadow: inset 1px 1px grey;
    vertical-align: middle;
    font-size: 10px;
    background: #c3c3c3;
}

.windows-start-bar-window-alt {
    border-left: 2px solid #fdffff;
    border-top: 2px solid #fdffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    color: #000;
     box-shadow: none;
}

.windows-desktop {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    left: 10px;
    top: 0;
    width: auto;
    z-index: 9;
}

.windows-desktop-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    right: 10px;
    bottom: 45px;
    width: auto;
    z-index: 9;
}

.windows-desktop-icon {
    position: relative;
    text-align: left;
    vertical-align: top;
    width: 100%;
    line-height: 12px;
    margin: 0;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.windows-desktop-icon img {
    width: 50px;
    height: 50px;
}

    @font-face {
    font-family: 'px sans nouveaux';
    font-style: normal;
    font-weight: normal;
    src: local('px sans nouveaux'), url('../css/fonts/px_sans_nouveaux.woff') format('woff');
    }

.windows-desktop-icon-caption {
    font-size: 9px;
    font-family: 'px sans nouveaux';
    text-align: center;
    color: white;
    margin: 5px 0 0;
}

.windows-desktop-icon:active .windows-desktop-icon-caption {
    background: #010081;
    padding: 2px;
}

.windows-desktop-icon:active .windows-desktop-icon img {
    background: #010081;
}

.windows-block {
    position: absolute;
    background-color: #c6c6c6;
    border-top: 2px solid #fdffff;
    border-left: 2px solid #fdffff;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    height: auto;
    display: flex;
    flex-direction: column;
    width: max-content;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
}

.windows-block-header {
    height: auto;
    position: relative;
    text-align: left;
    color: #fff;
    padding: .25em;
    line-height: 1.4;
    border-top: 1px solid #c3c3c3;
    border-left: 1px solid #c3c3c3;
    border-right: 2px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    background: rgb(7,14,134);
background: linear-gradient(90deg, rgba(7,14,134,1) 0%, rgba(15,127,205,1) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.windows-button {
    display: block;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 0;
    border-left: 2px solid #fdffff;
    border-top: 2px solid #fdffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    color: #000;
    background-color: #c3c3c3;
    position: relative;
        margin: 0 0 0 5px;
        cursor: pointer;
}

.windows-button:active {
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0);
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #fdffff;
    border-bottom: 2px solid #fdffff;
}

.windows-button img {
    width: 100%;
    height: 100%;
}

.windows-block {
    display: none;
}

.windows-header-icons {
    display: flex;
}

.windows-login {
    padding: 10px 10px 35px;
}

.windows-login-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    font-family: 'px sans nouveaux';
}

.windows-login-items {
    display: flex;
    flex-direction: column;
    padding-right: 25px;
}

.windows-login-field {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
    font-size: 10px;
    align-items: center;
}

.windows-login-field input {
    padding: 7.5px 0;
    margin: 0 0 0 15px;
    box-shadow: -1px -1.5px 1px 0px #adabab;
}

.windows-login-title {
    padding: 15px 0;
    font-size: 10px;
    text-align: left;
}

.windows-login-buttons {
    display: flex;
    flex-direction: column;
}

.windows-login-button {
    border-left: 2px solid #fdffff;
    border-top: 2px solid #fdffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    color: #000;
    background-color: #c3c3c3;
    -moz-appearance: none;
    appearance: none;
    margin: 5px 0;
    padding: 8px 25px;
    font-size: 12px;
     cursor: pointer;
}

.windows-login-button:active {
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0);
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    border-right: 2px solid #fdffff;
    border-bottom: 2px solid #fdffff;
}

.windows-login-icon {
    width: 20%;
    padding: 10px 20px;
}

.windows-login-icon img {
    width: 100%;
}

.windows-login-error {
    padding: 15px 0;
    font-size: 10px;
    text-align: left;
}

#time {
    margin: 0;
}

.windows-start-bar-window img {
    height: 20px;
    width: 20px;
    margin-right: 10px;
}

.time-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

@media screen and (max-width: 900px) {
    .windows-start-bar-window img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
}

.windows-start-bar-window {
    padding:6px 5px 6px;
    margin: 0 10px;
    font-size: 8px;
}

#time {
    font-size: 8px;
}

.windows-desktop-bottom {
    bottom: 50px;
}

.windows-desktop-icon {
    padding: 10px 0;
}

.windows-desktop-icon-caption {
    font-size: 8px;
}

.windows-desktop-icon img {
    width: 40px;
    height: 40px;
}

.time-wrapper {
    margin: 0;
}

.windows-block {
  width: 90%;  
}

.windows-login-icon {
    width: 30%;
}

.windows-login-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.windows-login-items {
    padding-right: 0;
}

.windows-login-title {
    text-align: center;
}

.windows-login-field {
    justify-content: center;
}

}

.opened {
    display: flex !important;
}

.closed {
    display: none !important;
}

#w98minesweeper {
  width: auto;
  height: auto;
}

.windows-help-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.windows-help-bar-item {
    font-size: 11px;
    margin: 5px 7.5px;
}

.windows-header-icon-block {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.windows-header-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px 0 0;
}

.windows-header-icon-block-text {
    font-size: 10px;
}

.windows-button {
    font-size: 8px;
}

.windows-start-bar-window {
    font-weight: bold;
}

.windows-ui {
font-family: 'px sans nouveaux';
}

.windows-clicked {
    background-color: #e0e0e0;
}

.minesweeper-window {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 5px solid #8b8b8b;
  border-right: 5px solid #8b8b8b;
  border-left: 5px solid #fdffff;
  border-top: 5px solid #fdffff;
}

.minesweeper-score-block {
  height: 15%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin: 5px;
  border-right: 4px solid #fdffff;
  border-bottom: 4px solid #fdffff;
  border-left: 4px solid #8b8b8b;
  border-top: 4px solid #8b8b8b;
}

.minesweeper-main-block {
  display: flex;
  height: 492px;
  width: 492px;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 5px;
  border-right: 6px solid #fdffff;
  border-bottom: 6px solid #fdffff;
  border-left: 6px solid #8b8b8b;
  border-top: 6px solid #8b8b8b;
  justify-content: flex-start;
  align-items: flex-start;
}

.score-window {
  background: #141414;
  padding: 2px;
  color: rgb(251,0,7);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 42px;
}

.minesweeper-score-icon {
  width: 60px;
  height: 60px;
  border-left: 2px solid #fdffff;
  border-top: 2px solid #fdffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  color: #000;
  background-color: #c3c3c3;
  position: relative;
  margin: 0 0 0 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.minesweeper-score-icon img {
   width: 50px;
  height: 50px;
}

.digital-remnant {
  position: absolute;
  opacity: 0.3;
}

.mine-block {
    width: 30px;
    height: 30px;
    background-color: rgb(179,179,179);
    border: 0.5px rgb(126,126,126) solid;
        background-size: cover;
    background-position: center;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
    transition: 0.4s;
}

.mine-block-1 {
    color: rgb(0,0,255);
}

.mine-block-2 {
    color: rgb(2,128,0);
}

.mine-block-3 {
    color: rgb(255,0,0);
}

.mine-block-filled {
border-left: 3px solid #fdffff;
  border-top: 3px solid #fdffff;
  border-right: 4px solid #404040;
  border-bottom: 4px solid #404040;
  cursor: pointer;
}

.mine-block-filled:active {
  -webkit-transform: translate3d(0, 1px, 0);
  transform: translate3d(0, 1px, 0);
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #fdffff;
  border-bottom: 2px solid #fdffff;
}

.mine-block-bombed {
    background-color: rgb(255,0,0);
}

.windows-start-item-block {
  position: relative;
  width: auto;
  height: 100%;
  display: flex;
}

.windows-start-bar-window {
margin: 0.5px 5px 0.5px 10px;
}

.icon_one2 {
    object-fit: contain;
}

.windows-start-bar-window {
    cursor: pointer;
}

.countdown-container {
    background-color: rgb(10, 10, 15);     
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#countdown {
    font-size: 10vw;
    color: #e0e0e0;
    margin: 0 auto;
    padding: 0;
    mix-blend-mode: luminosity;
}
 
 .countdown-copyright {
  color: #e0e0e0;
  font-size: 9px;
  margin-bottom: 20px;
}
 
.countdown-container .access-link {
  color: #e0e0e0;
}

.conversation-title {
    font-size: 40px;
    margin: 0;
}

.conversation-title a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.conversation-title a:hover {
    background-size: 100% 100%;

}

.conversation-subtitle {
    font-weight: 200;
    text-transform: capitalize;
    padding-bottom: 15px;
    font-family: garamond-premier-pro-display;
    font-style: italic;
}

@media screen and (max-width: 900px) {
    .countdown-copyright {
  max-width: 50%;
}

#home_carousel .flickity-prev-next-button {
    width: 25%;
}

}

.discover-link:hover {
  border-bottom: dashed 1px;
}

 .o-block-story .portal-block {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    height: auto;
    border: 1.5px solid black;
    padding: 5px 5px;
    background-color: transparent;
    display: flex;
    width: fit-content;
    margin: 5px 25px 0 auto;
    position: absolute;
    right: 0;
    top: 0;
}

 .o-block-story .portal-icon {
    width: 15px;
    height: 15px;
    fill: black;
    margin: 0 2.5px;
    transition: 0.4s;
    cursor: pointer;
}

.share-block-wrapper {
    display: flex;
    position: fixed;
    z-index: 2;
    right: 60px;
    bottom: 90px;
    border: 1px dotted;
    width: auto;
    display: none;
}

.share-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.share-icon-block {
    display: flex;
    background-color: #fff;
    flex-direction: row;
    padding: 15px 10px;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    border-bottom: 1px dotted;
    width: 150px;
    cursor: pointer;
    transition: 0.4s;
}


.share-icon-block-second { 
    border-bottom: 0;
}





.share-icon-text {
    margin: 0 5px;
    font-size: 12px;
    font-weight: 500;
}

.share-icon-block a {  display: contents; }


.account-content-block {
    display: flex;
    flex-direction: row;
    position: fixed;
    padding: 5px 10px;
    background-color: white;
    z-index: 9;
    bottom: 0;
    width: fit-content;
    border: 1px dotted;
    border-right: 0;
    right: 0;
}

.content-icon-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-icon {
    margin: 10px 0;
    cursor: pointer;
}




@media screen and (max-width: 900px) {
    .share-block-wrapper {
     width: calc(100vw - 40px);
    right: unset;
    bottom: 0;
}

.share-icon-block {
        width: 100%;
}

.content-icon {
    margin: 5px 0;
}

.content-icon .feature-icon {
    width: 20px;
    height: 20px;
}

}




.search-body-text {
padding: 0 20px;
    font-size: 18px;
}

.empty-search-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.search-refine {
      font-size: 14px;
    margin: 10px auto;
}

.search-term {
    text-transform: capitalize;
    text-decoration: underline;
}

.search-hint { 
    width: 100%;
    text-align: left;
    padding-bottom: 25px;
    font-size: 12px;
}

.table--selection {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}

.table--selection select {
    background: transparent;
    height: 50px;
    border: 4px solid #0e0e0e;
    width: 100%;
    -webkit-appearance: none;
    color: black;
    padding: 0 15px;
    text-transform: uppercase;
    font-weight: 700;
}

span.table-select-arrow {
    width: 2%;
    position: absolute;
    right: 4px;
    z-index: -1;
}

.related-search-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.related-search-block > div {
    width: 20%;
    padding: 25px;
    text-align: center;
    margin: 0 auto;
    font-weight: 300;
    font-size: 12px;
}

.related-search-block > div a:hover {
     font-weight: 600;
}

.search-section {
    display: flex;
    padding-top: 90px;
    align-items: center;
    justify-content: center;
    width: 100%;
        flex-direction: column;
}

.search-function-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
}


.rltd-heading {
    width: 100%;
}
.search-section .grid {
    margin: 25px auto 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
    justify-content: flex-start;
    width: 100%;
}


.search-section .grid-item {
    width: calc(20% - 15px);
    height: auto;
    padding: 10px;
    margin: 5px 7.5px;
    display: flex;
    flex-direction: column;
    border: 1px dashed;
}



.searchwrapper {
        display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.search-block {
    height: auto;
    width: 100%;
    color: #0e0e0e;
    padding: 20px;
    position: relative;
    bottom: 0;
}

.search-section input#searchcontainer {
      position: relative;
    background: transparent;
    border: none;
    border-bottom: 4px solid;
    color: #0e0e0e;
    width: 100%;
    font-size: 61px;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 900;
    transition: 0.2s;
    text-overflow: ellipsis;
    text-transform: capitalize;
    border-radius: 0;
}

.search-section input#searchcontainer::placeholder {
    color: #0e0e0e;
}

.search--submission {
    position: relative;
    background-color: transparent;
    font-size: 24px;
    color: #0e0e0e;
    border: 4px solid #0e0e0e;
    font-weight: 700;
    cursor: pointer;
    align-items: center;
    display: flex;
    justify-content: center;
    height: auto;
    width: 25%;
    margin-left: 15px;
    flex-direction: row;
    flex-shrink: 0;
}

.search--submission:hover {
    background-color: #0e0e0e;
    color: #f1f1f1;
}

.search-icon {
    fill: #0e0e0e;
    display: flex;
    width: 20px;
    height: 20px;
}

.search--submission:hover .search-icon {
    fill: #f1f1f1;
}

.search-text {
    margin: 0 10px;
}

.grid-search-title {
    padding: 0 10px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.search-block-info .author {
    font-size: 11px;
    margin: 5px 0 10px;
}

.search-block-info .date--text {
    font-size: 11px;
}

.search-block-info .t-story {
    border-bottom: 3px solid;
        margin-top: 5px;
}

.grid-item .search-block-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.search-image-wrapper {
    position: relative;
    width: 100%;
}

.search-image {
       margin: 10px 0 5px;
       transition: 1.2s;
       object-fit: cover !important;
}

img.search-image {
    width: 15vw;
    height: 40vh;
    object-fit: cover;
}

.search-image:hover {
transition: 1.2s;
transform: scale(1.02);
}

.search-function {
    width: 75%;
    position: relative;
}

    .suggestions {
    position: absolute;    
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    color: black;
    width: 100%;
    margin: 5px 0;
    z-index: 1;
    }
    
 .suggestion-item {
    padding: 10px 5px;
    cursor: pointer;
    background-color: white;
}
    
   .suggestion-item:not(.text-info):hover {
    background-color: #0e0e0e;
    color: #f1f1f1;
}

.text-info {
  background-color: #f5f5f5;  
  color: #0e0e0e;
  cursor: unset;
}

.search-shows-details {
    margin: 10px 0 0;
    font-size: 10px;
}

.search-section h5.directedby {
    font-size: 12px;
    font-weight: 600 !important;
}

.search-shows-london {
    background-color: #151515;
    color: #f3f3f3;
}

.search-result-return {
    width: 100%;
    font-weight: 600;
    padding: 0;
    margin: 0 auto 0.67em;
}

@media screen and (max-width: 900px) {
    
    .search-result-return {
    font-size: 24px;
}
    
    .search-section { 
        padding-top: 50px;
    }
    
    .searchwrapper {
    flex-direction: column;
}

   .search-section .grid {
        margin: 20px auto;
    }
    
      .search-section  .grid-item {
        width: calc(50% - 10px);
        margin: 5px auto;
        padding: 10px 0;
    }


.search-section .grid-item h1 {
    font-size: 18px;
    padding: 5px 0 0;
    max-width: 85%;
}

.search-section h5.directedby {
     max-width: 85%;
}

.feature-summary {
    max-width: 85%;
     display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 5;
        text-align: left;
}

.search-section .grid-item img {
    padding: 0 15px;
}

img.search-image {
    width: 45vw;
}

.grid-item .search-block-info {
  margin-top: 10px;
}

.search-block { 
    height: auto;
}

.search-section input#searchcontainer {
    padding: 10px 0;
    width: 100%;
    font-size: 32px;
}

    .search--submission {
        width: 100%;
        margin: 10px auto;
        padding: 12.5px 0;
    }

span.table-select-arrow {
    width: 7.5%;
}

.search-hint {
    width: 90%;
    text-align: center;
}

.search-function {
   width: 100%; 
}

  .suggestions {
    width: 100%;
    }
    
   .conversations-search .search-block-info .author {
    margin: 10px 0;
    text-align: left;
    max-width: 85%;
    width: 100%;
}
    
   .conversations-search .search-block-info .date--text {
    max-width: 85%;
    width: 100%;
    text-align: left;
    padding-bottom: 15px;
}

.conversations-search h1 {
    text-align: left;
}

}

.search-section .portal-block {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    height: auto;
    border: 2px solid white;
    padding: 5px 5px;
    background-color: transparent;
    position: absolute;
    right: 15px;
    top: 10px;
    display: none;
}

.search-image-wrapper {
    position: relative;
}

.search-section .grid-item:hover .portal-block {
    display: flex;
}

.search-section .portal-icon {
    width: 15px;
    height: 15px;
    fill: white;
    margin: 0 2.5px;
    transition: 0.4s;
    cursor: pointer;
}



.search-function-sub-block {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-label {
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#enable-reading {
    margin: 0 2.5px;
}

.input-logic-message {
    font-size: 9px;
    margin: 10px 0;
    text-align: left;
}

.advanced-search-title {
    font-size: 5vw;
    padding: 0;
    margin: 25px auto;
}

.reading-span {
    color: #141414;
    font-size: 24px;
    font-family: 'neue-haas-grotesk-display';
    text-align: left;
    font-weight: 900;
    text-transform: capitalize;
    letter-spacing: normal;
}

   .advanced-search-container {
       display: none;
        position: fixed;
    justify-content: center;
    align-items: center;
    background-color: rgb(244 244 244 / 96%);
    z-index: 999;
    width: 95%;
    height: 95%;
    color: #141414;
    border: 2px dotted;
    flex-direction: column;
    padding: 25px;
    border-radius: 4px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
        margin: auto;
}
   
   .advanced-search-block {
         display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
   }
   
.advanced-search-block .search-function {
    width: 50%;
    padding: 15px;
    background-color: #f3f3f3;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
    border: 1px dashed;
}

.search-function-items {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 15px 0 0;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.search-function-item {
    background-color: #141414;
    color: #f3f3f3;
    padding: 10px 7.5px;
    margin: 2.5px;
    font-size: 12px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    transition: 0.6s;
    white-space: nowrap;
}

.search-function-item:hover {
    color: #fe8531;
    transition: 0.6s;
    cursor: pointer;
}

.advanced-search-cls {
    color: #141414;
    position: sticky;
    top: 0;
    display: block;
}
    
    .search-container {
       position: relative;
    background: transparent;
    border: none;
    border-bottom: 4px solid;
    width: 100%;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 900;
    transition: 0.2s;
    text-overflow: ellipsis;
    text-transform: capitalize;
    border-radius: 0;
        color: #141414;
            font-size: 24px;
   }
   
   .search-container::placeholder {
        color: #141414;
   }
   
   .advanced-search-text {
       font-size: 18px;
       text-transform: uppercase;
       font-weight: 700;
       margin-top: 15px;
       cursor: pointer;
   }
   
    .advanced-search-block .search--submission {
            width: 50%;
    margin: 20px auto;
        padding: 15px 0;
    }
    
    .rt-slider {
-webkit-appearance: none;
    width: 100%;
    height: 10px;
    background: #e3e3e3;
    outline: none;
    opacity: 0.8;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin: 10px auto 5px;
}

.rt-slider:hover {
  opacity: 1;
}

.rt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #141414;
  cursor: pointer;
}

.rt-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #141414;
  cursor: pointer;
}

.rt-value-span {
    text-align: left;
    margin: 5px 0;
    font-style: italic;
}
  .search-function-item.close { 
      display: none; 
      
  }
  
  

.reference--cell {
   justify-content: center; 
   text-align-last: center;
}
.feature-block:first-of-type {
   margin-top: 0;
}




.feature-block .portal-block {
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    z-index: 99;
    top: 10px;
    left: 10px;
    height: auto;
    border: 2px solid white;
    padding: 5px 5px;
    background-color: #272727;
    right: unset;
}

.feature-block:hover .portal-block {
    display: flex;
}

.container-modal {
    position: fixed;
    z-index: 99;
    background-color: #f3f3f3;
    border: 0.5px dotted #a1a1a1;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    border-radius: 15px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    padding: 25px 100px;
}


.container-modal.modal-content {
       padding: 10px;
    display: flex;
        flex-direction: column;
        width: 100%;
}


  .modal-content h2 {
    font-size: 16px;
    max-width: 80%;
    text-align: center;
    margin: 10px auto;
    text-transform: none;
    font-weight: 600;

}

.open-new-container-block .container-submission-buttons {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 15px 0 0;
    justify-content: center;
    align-items: center;
}

.container-submission-buttons .container-submission {
    margin: 10px 5px;
}

.modal-button {
    border-radius: 25px;
    color: #f3f3f3;
    background-color: #0a0a0a;
    padding: 7.5px 20px;
    font-weight: 600;
    transition: 0.4s;
    cursor: pointer;
    -webkit-appearance: none;
    margin: 10px 5px;
    appearance: none;
  font-size: 14px;
  box-shadow: none;
}

.modal-button:hover {
  background-color: #dad7d7;
  color: #0a0a0a;
  transition: 0.4s;
  box-shadow: none;
  border: none;
}

.form-new-container {
    flex-direction: column;
    max-width: 80%;
    margin: 10px auto;
    width: 100%;
}

.portal-settings {
    display: flex;
    flex-direction: column;
    width: 100%;
        justify-content: center;
    align-items: center;
}

.portal-user-details {
    max-width: 50%;
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: left;
    width: 100%;
}

.portal-user-details.title-subheaders {
    border-bottom: 1px dotted #a1a1a1;
    margin: 5px 0;
    font-size: 16px;
    font-weight: 500;
}

.info-submission {
    width: max-content;
    padding: 10px 15px;
    margin: 20px 0;
    background-color: #0e0e0e;
    color: #f4f4f4;
    font-size: 14px;
    letter-spacing: 0.02em;
    font-weight: 500;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

button.info-submission:hover {
    background-color: #f4f4f4;
    color: #017ace;
    transition: 0.5s;
}

.portal-input {
    padding: 10px 10px;
    border-radius: 5px;
    border: 1px;
    margin: 10px auto;
    width: 100%;
    transition: 0.3s;
    background-color: #f3f3f3;
}

.portal-input:focus {
    border: 2px solid #017ace;
    transition: 0.3s;
}

.container-label {
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px;
}

.add-new {
    border-radius: 25px;
    color: #f3f3f3;
    background-color: #0a0a0a;
    padding: 15px 25px;
    font-weight: 600;
    transition: 0.4s;
    cursor: pointer;
    width: fit-content;
    margin: 10px auto;
    transition: 0.6s;
    list-style: none;
}

.add-new:hover {
   background-color: #dad7d7; 
   color: #0a0a0a;
}

ul.custom-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.custom-list li:not(.add-new) {
    margin: 10px auto;
    font-size: 12px;
    border: 1px solid;
    width: fit-content;
    list-style: none;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.portal-block.carousel-version {
    position: relative;
    top: unset;
    left: unset;
}

.pane { 
    display:none; 
}
    .pane.active { 
        display:flex; 
    flex-direction:column; 
    align-items:center; 
        
    }

.container-submission-buttons {
    display: flex;
    flex-direction: row;
        padding: 25px 0 0;
        width: 100%;
            justify-content: flex-end;
}

.container-submission-buttons .register--submission {
        margin: 25px 5px;
}

#codeInputs {
     display:flex; 
     gap:0.5em;
}


.registration-container {
    background-color: rgb(0 0 0);
}

.registry-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}    

.registry-form {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    justify-content: space-evenly;
    align-items: center;
}

.registration-div-element {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.registration-div-element.registration-login {
    justify-content: flex-end;
    color: white;
}

.registration-login p {
    margin: 0;
}

.registration-form-element {
    border: 3px;
    background-color: #1f1f1f;
    color: #dfdfdf;
    padding: 15px 20px;
    border-radius: 5px;
    margin: 5px 0;
    font-size: 14px;
    width: 100%;
    font-weight: 500;
}

.registration-form-element#first_name {
    margin: 5px 10px 5px 0;
}


.registration-form-element::placeholder {
   color: #dfdfdf; 
   opacity: 0.7;
}

.registration-form-element:focus {
    border: 3px solid #017ace;
    transition: 0.4s;
}


.registration-div-block {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}

.registry-block .home-subscription--submission {
    width: 75%;
    color: #121212;
    border: #121212 4px solid;
    margin: 25px 0;
}

@media screen and (max-width: 900px) {
   .registry-form {
    width: 90%;
} 

.registration-form-element {
    font-size: 14px;
        padding: 15px;
    
}

.item-bio {
  padding: 10px;
}

.register--submission {
    font-size: 14px;
        padding: 7.5px 20px;
       margin: 15px 0; 
}

.preference-block-item {
        margin: 2.5px 5px;
        font-size: 14px;
            padding: 7.5px 10px;
}
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
    overflow: auto;
    right: 0;
    bottom: 0;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: inherit;
    margin: 15px auto;
    width: 80%;
    text-align: center;
    position: relative;
}

.modal-content p {
    font-size: 14px;
    margin: 15px auto;
}

.register--submission {
position: relative;
    padding: 10px 25px;
    cursor: pointer;
    border: none;
    font-weight: 600;
    width: unset;
    height: unset;
    border-radius: 25px;
    color: #e0e0e0;
    font-family: 'neue-haas-grotesk-display';
    background-color: #181818;
       margin: 25px 0 10px;
    align-self: flex-end;
    transition: 0.6s;
    text-transform: uppercase;
    font-size: 12px;
}

.register--submission:hover {
     background-color: #e0e0e0;
     color: #017ace;
     transition: 0.6s;
}

.registration-div-element.registration-checkbox {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

input#newsletter-check {
    width: auto;
    padding: 0;
}

input#privacy {
    width: auto;
    padding: 0;
}

.registration-div-element label {
    color: white;
    font-size: 12px;
    margin: 0 0 0 2.5px;
}

.checkbox-containers {
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-element {
    color: white;
    font-size: 12px;
    text-align: right;
    width: 100%;
    font-weight: 700;
}

.activation-div {
    display: flex;
    text-align: center;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    align-items: center;
    margin: 40px auto;
    height: 100vh;
}

.registered-div {
    display: flex;
    text-align: center;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    align-items: center;
    margin: 40px auto;
    height: 100vh;
}

#activationToken {
    margin: 15px 0;
}

  .tooltip {
    display: none;
    position: absolute;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid;
    padding: 10px 6px;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 5px;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    flex-direction: row;
    left: 1%;
    bottom: -68%;
    letter-spacing: 0em;
    justify-content: center;
    align-items: center;
        flex-direction: row;
  }
  
.tooltip::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
}

  .username-wrapper {
    position: relative;
  }

  
  span.tooltip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.tooltip-icon-error {
    fill: #ff8c01;
    width: 20px;
    height: 20px;
}

span.tooltip-text {
    line-height: 1;
    margin-left: 2.5px;
}

.code-digit {
    text-align: center;
    padding: 35px 20px;
    font-size: 24px;
}

.preference-block {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 0 25px;
    flex-wrap: wrap;
    align-items: center;
}

.preference-block-item {
    color: white;
    font-weight: 600;
    border: 2px solid;
    padding: 10px 15px;
    border-radius: 25px;
        margin: 5px 7.5px 5px 0;
        cursor: pointer;
        background-color: black;
        font-size: 12px;
}
    
   .preference-block-item:hover {
    background-color: white;
    color: black;
}

.preference-block-item.selected {
    color: #017ace;
    background: white;
}

.registered-title {
        color: white;
    margin: 15px;
}

.block-label {
    color: white;
    font-size: 14px;
    text-align: left;
    margin: 10px;
}
.registered-form-elements .registration-div-element {
    flex-direction: column;
}
    
.portal-user-container {
    border-radius: 50%;
    background-color: black;
    border: 5px solid #707070;
    outline: 1px black;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
}

.user-initial {
    color: white;
    font-size: 48px;
    font-weight: 500;
}

#side-menu .portal-user-container.small-ver {
    width: 50px;
    height: 50px;
    margin: 15px 0 0;
    border: 3px solid #707070;
    align-self: flex-end;
}

#side-menu .small-ver .user-initial {
    font-size: 24px;
        color: #a6a8a7;
}

#side-menu .user-profile-container {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    margin: 0 auto;
}

.user-profile-link  {
    position: relative;
    align-self: flex-end;
}

.user-block {
    color: #a6a8a7;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

span.user-register {
    margin: 0 0 0 10px;
    padding: 4.5px 7.5px;
    border: none;
    background-color: #b1b3b3;
    color: #000;
    border-radius: 12.5px;
    font-size: 10px;
}

#logoutKey {
    all: unset;
    cursor: pointer;
    color: #000;
    padding: 4.5px 7.5px;
    border: none;
    background-color: #b1b3b3;
    border-radius: 12.5px;
    transition: 0.6s;
    font-size: 10px;
}

#settingsKey a {
   color: #000;  
}

#settingsKey a:hover {
   color: #017ace;  
}

#logoutKey:hover {
    color: #017ace;
}

  .portal-notification {
    position: fixed;
    z-index: 999999999;
    width: 80%;
    padding: 20px 10px;
    background-color: #f3f3f3;
    border: 2px dotted #a1a1a1;
    bottom: 25px;
    left: 0;
    right: 0;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    font-weight: 500;
    letter-spacing: -0.1px;
    display: none;
}

.visible {
    display: flex;
}

/* Flex CSS Nav Styling */

.sidenav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
        padding-top: 50px;
}

.hidden-links {
        display: none;
    }

    #visual-reveal:hover + .hidden-links {
        display: block;
        animation: fadeIn 1s;
    }
    
     #shows-reveal:hover + .hidden-links {
        display: block;
        animation: fadeIn 1s;
    }
    
    .hidden-links:hover {
        display: block;
        animation: fadeIn 1s;
    }
    
    /*
    #publication-ll:hover::after {
        content: ' / Kerching! £££';
    }
    */
    
    
    #menu-subscribe:hover:before {
    content: unset;
}

.menu-nav-block {
    padding: 0 0 15px;
    width: 100%;
}

.sidenav li {
    list-style-type: none;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    color: #dce0df;
    mix-blend-mode: difference;
    opacity: 0.8;
}

.sharing-block {
    position: relative;
    max-width: 80%;
    margin: 15px auto 25px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

li.endcredits {
    color: white;
    margin-bottom: 10px;
    font-size: 10px;
    width: 100%;
    max-width: 100%;
}

.menu-info-block {
    max-width: 80%;
    margin: 0 auto 25px;
}

.menu-info-block li {
   max-width: 100%; 
}

#stream-spotify {
    margin: 0 0 0 5px;
}    
    
.form-edit-container {
    display: flex;
    flex-direction: column;
    width: 80%;
}


.container-submission {
    border-radius: 25px;
    color: #f3f3f3;
    background-color: #0a0a0a;
    padding: 10px 25px;
    font-weight: 500;
    transition: 0.4s;
    cursor: pointer;
    margin: 5px 0;
    font-size: 14px;
}

.container-submission:hover {
     background-color: #dadada;
         border: #dadada;
    color: #0a0a0a;
    transition: 0.4s;
}

.form-new-container {
    display: flex;
    flex-direction: column;
    width: 80%;
}

.container-label {
    padding: 10px 5px;
    margin: 10px 0;
    border-radius: 5px;
}

.portal-new-container-block {
    position: fixed;
    z-index: 99;
    background-color: #f3f3f3;
    border: 0.5px dotted #a1a1a1;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: fit-content;
        min-width: 45%;
    height: fit-content;
    border-radius: 15px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    padding: 50px 75px;
    display: none;
}

    
       .conversation-title {
        font-size: 24px;
    max-width: 80%;
    margin: 0 auto;
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: break-word;
}

.portal-main-container {
    padding: 15px;
    display: flex;
        flex-direction: column;
        width: 100%;
}

.portal-main-container-block {
   display: flex;
        flex-direction: row;   
        border: 2px solid #a1a1a1;
}

.portal-block-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px 0 0;
}

.portal-plus {
    height: 45px;
    width: 45px;
    margin: 0 7.5px;
    cursor: pointer;
}

.portal-heart {
    height: 55px;
    width: 55px;
    margin: 0 7.5px;
}

.portal-block-header-text {
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}

.portal-block-detail {
    position: absolute;
    z-index: 9;
    margin: 10px;
}

    .portal-banner {
        height: 22.5vh;
        position: sticky;
        top: 0;
        border-bottom: 1px dotted #a1a1a1;
        display: flex;
        flex-direction: row;
        background-color: white;
         z-index: 99;
    }

.portal-main-container-block {
    display: flex;
    flex-direction: row;
    border: 5px solid #a1a1a1;
    padding: 5px;
    margin: 15px 0;
    min-height: 50vh;
    height: auto;
    transition: 0.8s ease;
    justify-content: flex-start;
    align-items: flex-end;
    overflow-x: scroll;
    flex-wrap: nowrap;
    flex-shrink: 0;
    position: relative;
}


.portal-main-container-block:hover {
    border: 5px solid #141414;
    transition: 0.8s ease;
    /*background-color: #616161;*/
}

.portal-block-title {
    text-transform: capitalize;
    font-style: italic;
    color: #fbfbfb;
    mix-blend-mode: difference;
}


.portal-feature-block {
    height: 50vh;
    position: relative;
    width: calc(25% - 10px);
    margin: 5px;
    border: 1px dotted #a1a1a1;
    background-color: #fbfbfb;
    transition: 1.4s ease;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
        background-size: cover;
    background-position: center;
}

.portal-feature-block .shows-title {
    text-align: center;
}

.portal-feature-block .shows-title h2 {
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 24px;
    max-width: 80%;
    margin: 0 auto;
}

.portal-feature-block:hover {
    border: 5px solid #017ace;
    transition: 0.7s ease;
    opacity: 0.85 !important;
}

.portal-banner-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 15px 0 15px 20px;
    border-right: 1px dotted #a1a1a1;
    width: 40%;
}

.portal-banner-user-block  {
width: 45%;
}

.portal-header {
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    line-height: 0.6;
    font-weight: 600;
     max-width: 80%;
     font-size: 21px;
}

.portal-user {
    font-family: garamond-premier-pro-display, serif;
    font-weight: 500;
    font-style: italic;
    color: #525252;
     font-size: 54px;
}

.portal-subheader {
    font-size: 15px;
    text-align: left;
    margin: 5px 0;
    font-weight: 500;
}


    .portal-details {
    border-bottom: 1px dotted #a1a1a1;
    margin: 10px 0px;
    width: 50%;
}


.portal-feature-block .shows-title {
    color: white;
}


.portal-item {
    max-width: 50%;
    margin: 12.5px 0;
        text-align: justify;
}

.portal-item-date {
    padding: 2.5px 5px;
    border: 1px dotted;
}

.portal-item-member {
    padding: 2.5px 5px;
    border: 1px dotted;
}


.portal-user-container {
    border-radius: 50%;
    background-color: black;
    border: 5px solid #707070;
    outline: 1px black;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
}

.user-initial {
    color: white;
    font-size: 48px;
    font-weight: 500;
}

.portal-banner-container-user {
    display: flex;
    justify-content: center;
    width: 15%;
    height: 100%;
    align-items: center;
}

.portal-plus:hover {
    fill: #017ace;
    transition: 0.5s ease;
}

.portal-heart:hover {
    fill: red;
    transition: 0.5s ease;
}

.expand {
    flex-wrap: wrap;
    width: 100%;
    overflow-x: hidden;
}

.open-new-container-block {
    display: flex;
}

.portal-new-container-block .cls-btn {
    cursor: pointer;
}

.empty-container {
    justify-content: center;
    align-items: center;
    background-color: #444444;
    color: #fefefe;
    width: 100%;
    margin: 0;
}

.portal-main-container a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.portal-main-container a:hover {
    background-size: 100% 100%;

}
.play--block {
    height: calc(80% / 7);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    flex-direction: row;
    border-top: 1px dotted #a1a1a1;
    position: relative;
    padding-left: 10px;
}

.play-block-week-title {
    height: 20%;
    font-weight: 900;
    font-size: 2em;
    border-top: none;
    flex-direction: column;
    align-items: flex-start;
        justify-content: center;
}

.play-block-week-title p {
    margin: 0;
}

/* .play-block-week-title:hover {
    background-color: #0a0a0a;
    color: #a1a1a1;
    transition: 0.6s;
    cursor: pointer;
}
*/

.play--block-text {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    color: white;
    mix-blend-mode: difference;
    font-weight: 600;
    font-size: 12px;
    max-width: 80%;
    text-align: left;
}

.play--block-text .seriftext {
    padding: 0 5px;
    text-decoration: none;
    font-style: italic;
    font-weight: 500;
}

.portal-feature-block h2.conversation-subtitle {
    font-weight: 200 !important;
}

.portal-selects-title {
        color: #fe8531;
}

.weekly-title {
    letter-spacing: -0.03em;
    font-weight: 700;
}

.custom-container 
    .portal-block-title {
            color: black;
    }
    
    .portal-user-container.has-avatar .user-initial {
    display: none;
}

.container-icon-block {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 5px;
    top: 5px;
}


   .container-icon {
    width: 20px;
    height: 20px;
    fill: white;
    transition: 0.4s;
    cursor: pointer;
    margin: 0 2.5px;
    mix-blend-mode: difference;
}

.container-icon:hover {
    fill: #017ace;
}





.container-submission-buttons .container-submission {
    margin: 10px 5px;
}

.open-new-container-block p {
    font-size: 16px;
        max-width: 80%;
    text-align: center;
}

.feature-block-actions {
    position: absolute;
    right: 5px;
   top: 5px; 
}

.actions-icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.actions-icon-like {
    width: 20px;
    height: 20px;
    fill: red;
    transition: 0.4s;
}

.date-added-detail {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-weight: 700;
}

.play--block .date-added-detail {
    position: relative;
    bottom: unset;
    left: unset;
}

.remove--icon {
    fill: white;
    mix-blend-mode: exclusion;
}

.remove--icon:hover {
    fill: #017ace;
}

.user-settings-block {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 5px 0;
    line-height: 1;
    flex-direction: row;
    border: 1px dotted;
    padding: 4.5px 7.5px;
    border-radius: 25px;
    background-color: white;
    transition: 0.4s;
}

.user-settings-icon {
    height: 15px;
    width: 15px;
    margin: 0 5px 0 0;
}

.user-settings-block a {
        display: flex;
    justify-content: center;
    align-items: anchor-center;
}

.user-settings-text {
    font-size: 14px;
    font-weight: 500;
}

.user-settings-block:hover {
    filter: invert(1);
}    

.discard-text {
    font-size: 14px;
    text-align: center;
    max-width: 75%;
}

.button-containers {
    margin: 25px 0;
}

.button-containers .container-submission {
    margin: 0 5px;
    
}

.address-wrapper .item-info-block {
    max-width: 100%;
}

.address-row {
    padding: 10px 0 10px 5px;
}

.user-settings-block {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 5px 0;
    line-height: 1;
    flex-direction: row;
    border: 1px dotted;
    padding: 4.5px 7.5px;
    border-radius: 25px;
    background-color: white;
    transition: 0.4s;
}

.item-info-block {
    display: flex;
    flex-direction: column;
  align-items: flex-start;
    max-width: 50%;
    justify-content: center;
    width: 100%;
}

.item-info-block-row {
    flex-direction: row;
    justify-content: flex-start;
        align-items: anchor-center;
    font-size: 12px;
}

.portal-user-details.title-subheaders {
    border-bottom: 1px dotted #a1a1a1;
    margin: 25px 0;
    font-size: 14px;
    font-weight: 500;
    width: 50%;
    padding: 0 0 7.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.info-checkbox {
    margin: 5px 5px 5px 0;
}

.item-info-start {
    align-items: flex-start;
}

.item-label {
    font-size: 12px;
}

.info-end {
    align-items: flex-end;
}

.item-bio {
        width: 100%;
    padding: 15px;
}

.portal-user-details.title-subheaders.info-sub {
        border: none;
    font-size: 14px;
    margin: 15px 0;
}

.address-container {
    display: flex;
    flex-direction: row;
    width: calc(50% - 10px);
    flex-wrap: wrap;
    border: 2px dotted #a1a1a1;
    margin: 0 5px;
    border-radius: 5px;
    padding: 10px 5px;
    background-color: white;
    position: relative;
}

.address-item {
    list-style: none;
    font-size: 14px;
}

.address-details {
    flex-wrap: wrap;
    flex-direction: row;
        justify-content: flex-start;
}

.address-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 50%;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}

.svd-add {
    margin: 10px;
    text-align: left;
    width: 50%;
    padding: 0 5px;
}

.address-container:hover {
    filter: invert(1);
    transition: 0.6s;
}

.address-change-block {
    position: absolute;
    right: 5px;
    bottom: 5px;
        display: flex;
    align-items: center;
}

.address-icon {
    height: 15px;
    width: 15px;
    fill: black;
    transition: 0.8s;
    cursor: pointer;
}

.address-pencil {
 height: 20px;
    width: 20px;
    }

.address-pencil:hover {
    fill: #fe8531;
}

.address-bin:hover {
    fill: #21e5ff;
}


.portal-user-container.small-ver {
    width: 50px;
    height: 50px;
    margin: 0 15px 0 0;
    border: 3px solid #707070;
}

.small-ver .user-initial {
    font-size: 24px;
}

.profile-image {
    padding: 0 0 20px;
        align-items: center;
}

.address-wrapper {
    display: none;
}




  
  .share-icon {
    width: 20px;
    height: 20px;
    fill: black;
       transition: 0.4s;
}

.share-copied {
    color: #00b700;
    fill: #00b700;
}

.share-icon-block:hover {
    color: #fff;
    background-color: #000;
}

.share-icon-block:hover .share-icon {
    fill: #fff;
}
svg.feature-icon {
    width: 30px;
    height: 30px;
    transition: 0.4s;
}

.icon-share:hover {
    fill: #fe8531;
}

.icon-save:hover {
    fill: #017ace;
        rotate: 90deg;
}

.icon-love:hover {
    fill: red;
        scale: 1.25;
}

.filled {
    fill:  red;
}

.icon-love.filled {
    fill:  red !important;
}

.user-block-detail {
    display: flex;
    flex-direction: column;
    margin: 15px 0 0;
    color: #dce0df;
    font-size: 10px;
}

.artist-block {
        margin: 0 50px 50px;
}
    
        .mainWrapper-dual-column {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

.dual-column-block {
    width: calc(100% / 3);
    border-right: 1.5px solid #dadada;
}

.dual-column-block .summary-block p {
    text-align: left;
}

.dual-column {
 width: calc(100% / 3*2);
    text-align: justify !important;
    line-height: 1.5;
        display: flex;
    flex-direction: column;
    justify-content: center;
}

.dual-column-text {
    font-weight: 400;
    max-width: 75%;
}

.sub-dual-column-text {
  font-weight: 400;
    max-width: 75%; 
    font-size: 16px;
}

.dual-column-subtitle {
    font-size: 32px;
}

#notify-form {
    display: flex;
    flex-direction: column;
        align-items: center;
}

.notify-text {
        text-align-last: center;
}

.feature-notification {
    cursor: pointer;
    padding: 15px 30px;
    margin: 10px 0;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    border-radius: 2px;
    transition: 0.4s;
    width: 50%;
}

.feature-notification:hover {
    color: black;
    background-color: white;
}

.notification-options {
    margin: 15px 0;
}

#notify-email {
    position: relative;
    border: 3px;
    color: #1f1f1f;
    background-color: #dfdfdf;
    padding: 15px 20px;
    width: 50%;
    font-size: 18px;
    border-radius: 5px;
    margin: 5px 0;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 500;
    transition: 0.4s;
    text-align: left;
}

.page-text-columns.feature-notif-block {
        padding: 40px 0 10px;
}

#notify-countdown {
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0;
}

.notify-title {
    margin: 0;
}

p.notify-status {
    font-size: 16px;
}

.filter-list-header {
        margin: 0 auto;
}


ul.filter-list {
        margin: 0 auto 3em;
    list-style: none;
    height: fit-content;
    width: 100%;
}

.filter-list li {
    margin: 5px auto;
}

.advanced-search-result-item {
    font-weight: 500;
    text-decoration: underline;
    text-transform: capitalize;
}

.filter-list .search-body-text {
    padding: 5px 20px;
    font-size: 18px;
}

p.access-text {
    max-width: 50%;
    width: 50%;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    margin-top: 10px;
}

@media only screen and (max-width: 900px) {
    
    .form-item-wrapper {
    width: 90%;
}

    .login--submission {
    font-size: 14px;
    }
    
    .countdown-copyright {
    max-width: 100%;
        font-size: 6px;
}

p.access-text {
    max-width: 80%;
    width: 80%;
}

.login-field {
    width: 80%;
}

.time {
    width: 80%;
    font-size: 12px;
}

.feature-block .portal-block {
    background-color: transparent;
}

.feature-block .portal-block svg.portal-icon {
    width: 15px;
    height: 15px;
}

.advanced-search-block .search-function {
    width: 95%;
}

.search-container {
    font-size: 18px;
}

.search-function-item {
    font-size: 9px;
}

.advanced-search-block .search--submission {
    width: 95%;
}

.code-digit {
    padding: 20px 0px;
    width: calc(65vw / 6);
        font-size: 18px;
}

.activation-div {
 width: 90%;
}
.registered-div {
width: 90%;
}

}

@media screen and (max-width: 900px) {

.sub-menu-block {
        margin: 15px 0;
}

.menu-info-block {
    margin: 0 auto 5px;
}

.user-block {
    justify-content: center;
        align-items: baseline;
}

.user-profile-link {
    align-self: center;
}

.sharing-block {
    margin: 10px auto;
    justify-content: center;
}

    .holder-icons {
        height: 100px;
        width: calc(100vw / 5);
    }

.vertical {
    width: 75vw;
    height: 400px;
}

.horizontal {
    width: 80vw;
    height:250px;
}

.square {
    width: 75vw;
    height:75vw;
}

.is-selected .frame-container.vertical {
    width: 75vw;
    height: 400px;
}

.is-selected .frame-container.horizontal {
   width: 80vw;
    height:250px;
}

.is-selected .frame-container.square {
    width: 75vw;
    height:75vw;
}

.frame-headline {
    font-size: 32px;
}

.frame-day {
    font-size: 22px;
}

.underlay-bg-block {
    font-size: 18px;
}

.opening-body-headline {
    font-size: 42px;
}

.quote-block-text {
font-size: 21px;
max-width: 80%;
}

.drag-tab {
    padding: 10px 15px;
    margin: -33px auto;
}

.drag-tab-text {
    font-size: 12px;
}

.search-function-wrapper {
    flex-direction: column;
}

.portal-feature-block {
    width: calc(75% - 10px);
}

.portal-user {
    font-size: 32px;
}

.portal-item {
    max-width: 90%;
        text-align: left;
        margin: 0;
}

.portal-item-date {
    display: inline-flex;
    margin: 2.5px 0;
}

.portal-item-member {
      display: inline-flex;
    margin: 2.5px 0;
}

.portal-banner-container {
        margin: 15px 5px 15px 10px; 
}

.portal-banner-user-block {
    width: 35%;
}

.portal-banner-container-user {
    width: 25%;
}

.portal-user-container {
    border: 3px solid #707070;
    width: 75px;
    height: 75px;
}

.portal-block-header-text {
    font-size: 36px;
}

.portal-heart {
    height: 45px;
    width: 45px;
}

.portal-plus {
    height: 35px;
    width: 35px;
}

.item-info-block {
    max-width: 90%;
}

.portal-user-details {
text-align: center;
}

.portal-user-details.title-subheaders {
  width: 90%;
  max-width: 90%;
  margin: 15px 0;
}

.svd-add {
  width: 90%;
}

.preference-block-item {
  padding: 7.5px 10px;
  margin: 5px 2.5px;
}

.item-info-block-row {
  align-items: center;
}

.item-bio {
  font-size: 12px;
}

.address-wrapper {
  max-width: 90%;
}



.container-submission-buttons .register--submission {
    font-size: 12px;
}

.portal-new-container-block { 
    max-width: 90%;
    padding: 25px;
}

.open-new-container-block {
  width: 90vw;
}

.feature-notification {
    width: 100%;
}

#notify-email {
   width: 100%; 
}

.notification-options {
  font-size: 12px;
}

.dual-column-subtitle {
  width: 90%;
  margin-left: 10px;
  line-height: 1;
  font-size: 24px;
}

.dual-column-text {
  max-width: 90%;
  margin: 15px 10px;
  font-size: 16px;
}

.video-block {
    width: 100%;
}

.artist-block {
  margin: auto;
}

.sub-dual-column-text {

  font-size: 12px;
  margin: 15px;
}

.activation-header {
        max-width: 75%;
}

.activation-header h2 {
        padding: 15px 0;
}
    
}

.collection-addition-block .portal-plus {
    margin: 0;
}

.register-text {
    color: white;
    margin: 25px auto 0;
}

.help-text a {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg,transparent 65%,#017ace 0);
    background-size: 0 100%;
    transition: background-size 0.5s ease-in;
}

.help-text a:hover {
    background-size: 100% 100%;
}


.quick-menu {
    position: fixed;
    display: flex;
    z-index: 99;
        background-color: #fff;
    color: #000;
    bottom: 125px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    padding: 25px;
    right: 0;
}

.quick-menu-container {
     display: none; 
     flex-direction: column;
}

.quick-menu-top {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #f7f7f7;
    padding: 0 0 10px;
        justify-content: flex-end;
}

.quick-menu-bottom {
    width: 100%;
    display: flex;
    padding: 10px 0 0;
}

.quick-link {
    margin: 5px;
    padding: 5px 12.5px;
    border: 1px solid;
    border-radius: 25px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}

.quick-link:hover {
   background-color: #fff;
   color: #000;
}

.quick-menu-logo {
    display: none;
    transform: rotate(90deg);
    height: 25px;
    filter: invert(1);
}

.quick-link-icon {
    cursor: pointer;
}
.quick-link-icon svg {
    width: 25px;
    height: 25px;
}

.open-quick-menu .quick-link-icon svg {
    fill: #d8dcdb;
}

.open-quick-menu {
background: #000;
color: white;
    padding: 15px 0 15px 15px;
    right: 10px;
        border-radius: 15px;
    }

.open-quick-menu .quick-link-icon svg {
     margin: 0 0 0 30px; 
}

.open-quick-menu .quick-menu-container {
     display: flex; 
}

.open-quick-menu .quick-menu-logo {
    display: block;
}

 .amend-controls { flex-direction: row; justify-content: flex-end; }
  .add-controls   { flex-direction: row; justify-content: flex-end; }
  .amend-controls .info-submission,
  .add-controls .info-submission { margin: 20px 5px; }
  .address-wrapper {
    display: flex;
}

  .hidden { display: none; }
  .visible { display: flex; }
  
  #showsPref {
    flex-direction: row;
    justify-content: flex-start;
}

.preference-block-item {
    font-size: 12px;
    font-weight: 500;
}

.preference-block-item.selected {
    color: #017ace;
}

.avatar_upload {
    width: max-content;
    padding: 0;
    margin: 20px 5px 20px 0;
    background-color: #f4f4f4;
    border: none;
    border-radius: 25px;
}

.avatar_upload::-webkit-file-upload-button {
    width: max-content;
    padding: 10px 15px;
    margin: 0 5px 0 0;
    background-color: #0e0e0e;
    color: #f4f4f4;
    font-size: 14px;
    letter-spacing: 0.02em;
    font-weight: 500;
    border: none;
    border-radius: 25px;
  cursor: pointer;
}

.avatar_upload::-moz-file-upload-button {
    width: max-content;
    padding: 10px 15px;
    margin: 0 5px 0 0;
    background-color: #0e0e0e;
    color: #f4f4f4;
    font-size: 14px;
    letter-spacing: 0.02em;
    font-weight: 500;
    border: none;
    border-radius: 25px;
  cursor: pointer;
}

.avatar_upload::-webkit-file-upload-button:hover {
    background-color: #f4f4f4;
    border: 0.5px solid black;
    color: #017ace;
    transition: 0.5s;
}

.avatar_upload::-moz-file-upload-button:hover {
    background-color: #f4f4f4;
    border: 0.5px solid black;
    color: #017ace;
    transition: 0.5s;
}

.remove-avatar-btn {
    font-size: 12px;
}

@media screen and (max-width: 900px) {
    .quick-menu {
    padding: 15px;
    bottom: 100px;
}

.profile-image {
        flex-wrap: wrap;
}

.remove-avatar-btn {
    margin: 2.5px;
        font-size: 10px;
}

.open-quick-menu {
    width: 95%;
}


.quick-menu-bottom {
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.quick-link {
    white-space: nowrap;
    font-size: 8px;
    display: flex;
    padding: 5px 7.5px;
    border-radius: 15px;
}
    
    .quick-link-icon svg {
    width: 24px;
    height: 24px;
}

.open-quick-menu .quick-link-icon svg {
    margin: 0 10px 0 10px;
}


.open-quick-menu .quick-menu-logo {
    display: none;
}

.help-text {
    max-width: 80%;
}

}

.quick-menu {
    position: fixed;
    display: flex;
    z-index: 99;
        background-color: #fff;
    color: #000;
    bottom: 125px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    padding: 25px;
    right: 0;
}

.shows .quick-menu {
    bottom: 180px;
    padding: 12.5px;
    border: 1px dotted;
    border-right: 0;
}

.quick-menu-container {
     display: none; 
     flex-direction: column;
}

.quick-menu-top {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #f7f7f7;
    padding: 0 0 10px;
        justify-content: flex-end;
}

.quick-menu-bottom {
    width: 100%;
    display: flex;
    padding: 10px 0 0;
}

.quick-link {
    margin: 5px;
    padding: 5px 12.5px;
    border: 1px solid;
    border-radius: 25px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}

.quick-link:hover {
   background-color: #fff;
   color: #000;
}

.quick-menu-logo {
    display: none;
    transform: rotate(90deg);
    height: 25px;
    filter: invert(1);
}

.quick-link-icon {
    cursor: pointer;
}
.quick-link-icon svg {
    width: 25px;
    height: 25px;
}

.open-quick-menu .quick-link-icon svg {
    fill: #d8dcdb;
}

.open-quick-menu {
background: #000;
color: white;
    padding: 15px 0 15px 15px;
    right: 10px;
        border-radius: 15px;
    }

.open-quick-menu .quick-link-icon svg {
     margin: 0 0 0 30px; 
}

.open-quick-menu .quick-menu-container {
     display: flex; 
}

.open-quick-menu .quick-menu-logo {
    display: block;
}

.quick-menu:hover {
    background: black;
}

.quick-menu:hover .quick-link-icon svg {
    fill: #d8dcdb;
}

@media screen and (max-width: 900px) {
    .quick-menu {
    padding: 15px;
    bottom: 100px;
}

.shows .quick-menu {
    bottom: 120px;
    padding: 10px;
}

.open-quick-menu {
    width: 95%;
}


.quick-menu-bottom {
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.quick-link {
    white-space: nowrap;
    font-size: 8px;
    display: flex;
    padding: 5px 7.5px;
    border-radius: 15px;
}
    
    .quick-link-icon svg {
    width: 20px;
    height: 20px;
}

.open-quick-menu .quick-link-icon svg {
    margin: 0 10px 0 10px;
}


.open-quick-menu .quick-menu-logo {
    display: none;
}

.padding-adjust {
  padding-top: 20px;
}

}

.addition-block-text {
padding: 0 5px 0 0;
}

.custom-container-header {
  text-transform: capitalize;
  margin: 15px auto 5px;
}

@media screen and (max-width: 900px) {
.gallery-flex-block .portal-block {
    left: unset;
    right: 10px;
}

.artist-block {
    margin: 0 auto 50px;
}

.dual-column-block {
    width: 100%;
    border-right: none;
}

.mainWrapper-dual-column {
    flex-direction: column;
}

.mainWrapper-dual-column .summary-block {
        width: 100%;
}

.dual-column-text {
    max-width: 90%;
}

}