@font-face {
    font-family: 'stolzlbold';
    src: url('/wp-content/themes/freeword_web/fonts/stolzl-bold-webfont.woff2') format('woff2'),
         url('/wp-content/themes/freeword_web/fonts/stolzl-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: 'stolzlbold-medium';
  src: url('/wp-content/themes/freeword_web/fonts/Stolzl-Medium.10.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
--pink: #ed286b;
--yellow: #e1ea0d;
--cyan: #00d7d7;
--blue: #0030cb;
--grey: #ebebeb;
--dark-grey: #898989;
--black: #000000;
--nav-grey: #a6a6a6;
--font-header: 'stolzlbold', 'Open Sans', sans-serif;
--font-header-medium: 'stolzlbold-medium', 'Open Sans', sans-serif;
--font-body: 'Open Sans', sans-serif, helvetica;
}

html {
  font-size: 10px;
  overflow-x: hidden;
}
html.no-scroll {
  overflow-y:hidden;
}

body {
  font-size: 1.6rem;
  color: #222222;
  background-color: var(--grey);
  line-height: 1.5;
  position: relative;
  caret-color: var(--page-color);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-header);
  font-weight: 900;
}

h1, .h1 {
  font-size: 3.6rem;
}

h2, .h2 {
  font-size: 2.4rem;
}

h3, .h3 {
  font-size: 1.8rem;
}

h5, .h5 {
  font-size: 1.3rem;
}

.header-font { font-family: var(--font-header) !important; font-weight: 700 !important; }

.site-container {
  max-width: 1230px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  margin-top: 12.5px;
    margin-bottom: 12.5px;
}

a, a:visited, a:hover { text-decoration: none; color: black; color: var(--page-color); font-weight: 600;}

.black { color: black; }

.grid { display: grid !important; }
.bold { font-weight: 600; }
.light, a.light { font-weight: 300; }

.stickied { position: sticky; position: -webkit-sticky; top: 0; z-index: 4; }
.remove-overflow-x { max-width: 1200px; /* overflow-x: hidden; */}

select {
  color: var(--nav-grey) !important;
  font-family: var(--font-body);
  font-weight: 800;
    text-transform: uppercase;
    font-size: 1.2rem;
}

#main ul { list-style: none; padding: 0; margin-left: 0; }
#main ul li { margin-top: 8px; }
#main ul li:before {
  content: "";
vertical-align: initial;
height: 7px;
width: 7px;
background-color: var(--page-color);
margin-right: 8px;
display: inline-block;
}

.nav li:before, .booklightbox {
  display: none;
}

body.single-post #content li:before {
background-color: var(--blog-color);
}

.freeword-bullet:before {
  content: "";
vertical-align: middle;
height: 14px;
width: 14px;
background-color: var(--page-color);
margin-right: 6px;
display: inline-block;
}

/* input styles (contact forms and other inputs) */

input[type="text"], select, input[type="email"], input[type="url"], input[type="file"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
  color: var(--dark-brown);
border: 0;
border-bottom: 3px solid var(--black);
border-radius: 0;
padding: 10px 15px;
width: 100%;
outline: 0;
}

input[type="submit"] {
  outline: 0;
  -webkit-appearance: none;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    -moz-appearance: none;
}

.venue-form-section span.wpcf7-list-item input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: initial;
  margin-right: 8px;
}

#content input[type="checkbox"]:before {
  height: 18px;
    width: 18px;
    content: "";
    border: 2px solid black;
    display: block;
    margin-right: 5px;
    font-weight: 900;
    font-size: 20px;
    line-height: 0.8;
}

#content input[type="checkbox"]:checked:before {
content: "✓";
color: var(--page-color);
}

/* Specific contact form styles */

div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
    border: 0px solid var(--page-color);
    margin: 0;
    height: fit-content;
    color: var(--pink);
}


/* Freeword Page Header (image + title) styles */

/* .main-navigation ul li a:after {
  height: 2px;
  width: 100%;
  content: "";
  display: block;
}

.main-navigation ul li.current_page_item a:after {
  background-color: var(--page-color);
} */

.page-header-wrapper {
}

.general-page-header, .home-header-slider_item {
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
flex-direction: column;
width: 100%;
}
/* whats on and media pages have been requested to be 250px by Roma. Bene wants them taller */
body.tax-season .general-page-header, .single-event .general-page-header, .single-post .general-page-header {
  min-height: 500px;
}

.general-page-header-video {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 1;
}

.general-page-header-video video {
    width: 100% !important;
    height: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.general-page-header-color {
  background-color: var(--header-color);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.75;
}

/* body.single-post .general-page-header-color {
  background-color: var(--blog-color);
} */

.general-page-header_text {
    color: white;
    font-weight: 900;
    text-align: center;
    font-size: 6rem;
    text-transform: uppercase;
    max-width: 1230px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 3;
}

.general-page-header_sub {
color: white;
text-align: center;
max-width: 520px;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
text-transform: none;

}

.home-header-slider_item .general-page-header_text {
  font-size: 6rem;
}

.general-page-header_link {
  z-index: 3;
  color: white !important;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.6rem;
  margin-top: 38px;

}

.general-page-subheader {
  color: white;
  z-index: 3;
  max-width: 500px;
  text-align: center;
  margin-top: 30px;
}
.single-event h1.general-page-header_text, .single-post h1.general-page-header_text {
    font-size: 4.5rem;
    max-width: 800px;
}

/* generic page styles */

div#content {
  padding-bottom: 0px;
}



.freeword-gridbox {
  /* margin-bottom: 20px;
  box-shadow: 0 2px 55px rgba(0,0,0,0.19); */
  background: white;
  padding: 22px;
width: 100%;
}
.freeword-gridbox-inner {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
/* .freeword-gridbox > p, .freeword-gridbox > h2, .freeword-gridbox > h3, .freeword-gridbox > h4 {
    max-width: 800px;
} */

}
.freeword-gridbox p a:hover {
    text-decoration: underline !important;
}

.gridbox-title {
  margin-bottom: 1.2rem;
  font-weight: 600;
}

/* NOTE: textbox-wrapper must be accompanied by a child wrapper .textbox to ensure the content inside stays together */

.freeword-gridbox .textbox-wrapper {
  display: grid;
grid-template-columns: 2fr 300px;
grid-gap: 15px;
}

.freeword-black-line {
  width: 100%;
  height: 11px;
  background: black;
  margin: 7.5px 0px 10px;
}

.large-link, #content input[type="submit"], #primary input[type="submit"] {
    color: black !important;
    text-transform: uppercase;
    margin-bottom: 0;
    font-weight: 700;
    font-family: var(--font-header);
    font-size: 1.8rem;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.three-text-columns {
  columns: 3;
}

/* Grid layout used on many pages. Content on right (75%), sidebar-esque content on left (25%) */

/* title used above all grid shortcodes on the site. has to be added manually */

.no-gap { grid-gap: 0 !important; }
.grid-main-title {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 2.2rem;
    width: 100%;
}

.one-three-grid, .four-grid, .full-width-grid, .six-grid, .eight-grid {
  width: 100%;
}

.full-width-grid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr;
  align-items: flex-start;
  margin-top: 8px;
}

.one-three-grid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: minmax(210px, 296px) 1fr;
  align-items: flex-start;
  margin-top: 8px;
}

.one-content {
  display: grid;
  grid-template-rows: 1fr;
  grid-gap: 15px;
}

.three-content {
  display: grid;
  grid-template-rows: 80px 1fr;
  grid-gap: 15px;
}


/* used for the 4-column row that appears just above the footer on many pages on the site */
.four-grid, .section-bios-grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, 285px);
    justify-content: flex-start;
}
.four-grid.grid-slider {
  display: block;
}
.tns-outer {
  display: none;
}
.tns-outer.loaded { max-width: 100%; display: flex; display: -webkit-flex;
    flex-direction: column-reverse; position: relative; }
.freeword-gridbox .four-grid {
  grid-template-columns: repeat(auto-fit, 274px);
}


.section-bios-grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, 277px);
    justify-content: flex-start;
}

.section-bios-grid .grid-loop-item > p {
  font-size: 1.4rem;
}
.section-bios-grid .grid-loop-item_content > p {
  height: 48px;
  display: flex; justify-content: center; align-items: center; margin-bottom: 0;
}

.tax-season .section-bios-grid .grid-loop-item_content  {
background-color: white;
}

.search-results .general-page-header {
  background: #ed286b !important;
	opacity:0.75;
}

.search-results-grid {
  display: grid;
  grid-template-columns: 1fr
  width: 100%;
}
.search-results-grid > article {
    background: white;
    padding: 15px;
    margin-bottom: 5px;
    display: flex;
}
.search article .post-image {
  margin-right: 15px;     max-width: 250px;
}

.six-grid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fit, 187px);
    justify-content: flex-start;
   }

   .eight-grid {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: repeat(auto-fit, 141px);
       justify-content: flex-start;
   }

   .no-gap {
     grid-gap: 0px !important;
   }

   .four-grid a.grid-loop-item_image {
    max-width: 285px;
}


/*
the grid item that is part of the post loop (events, blog) is comprised of a an image with a content on top of it, with the post title and other info underneath.
- .four-grid
  - .grid-loop-item
    -- .grid-loop-item_info (300px height. roughly same as width.)
      - .grid-loop-item_image
      - .grid-loop-item_color (Needs to be seperate as we are using hex color and need opacity for this element )
      - .grid-loop-item_content  (for when on hover)
    -- .grid-loop-item_title
    -- .grid-loop-item_datetime (OPTIONAL) (date + time used for events. date only used for blog. )
*/

.four-grid .grid-loop-item, .four-grid .slick-track .slick-slide {
    width: 285px;
    /*  padding: 0 !important; */
}
.tns-outer .tns-controls {
  display: block;
    justify-content: space-between;
    padding-right: 15px;
    outline: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}
.tns-outer .tns-controls button {
  border: none;
background: transparent;
}
.tns-controls button:first-child, .tns-controls button:last-child {
    top: 0;
    bottom: 0;
    position: absolute;
    width: 50px;
padding: 0;
}
.tns-controls button:first-child { left: -50px;}
.tns-controls button:last-child { right: -35px; }

.slick-prev:before, .grid-slider-prev:before { transform: translateX(-30px) rotate(180deg); }

.tns-outer .tns-controls button:first-child:before {
  width: 50px;
height: 50px;
font-family: "revicons" !important;
font-size: 35px !important;
display: block;
text-align: center;
content: '\e825' !important;
transform: rotate(180deg);
}
.tns-outer .tns-controls button:last-child:before {
  width: 50px;
height: 50px;
font-family: "revicons" !important;
font-size: 35px !important;
display: block;
text-align: center;
content: '\e825' !important;
}

.fluid-row .tns-outer .tns-controls button:first-child:before, .fluid-row .tns-outer .tns-controls button:last-child:before {
  color: var(--page-color);
}

.grid-slider-prev:before {
      left: -40px;
      transform: translateY(50%) rotate(180deg);

}
.grid-slider-next:before {
  right: 40px;
  transform: translateY(50%);
}

 .tns-inner {
  margin-left: 0 !important;
}

@media (max-width: 1300px) {

}

/* @media (max-width: 1246px) {
  .four-grid {
    justify-content: center;
  }
}

@media (max-width: 1080px) {
  .four-grid.grid-slider {
    max-width: 590px;
}
}

@media (max-width: 660px) {
  .four-grid.grid-slider {
    max-width: 100%;
}
} */

.four-grid.grid-slider ul.slick-dots {
    transform: translateY(25px);
    list-style: none;
}
#main .slick-dots li button:before { content: ""; }
#main .slick-dots li:before {
    background: none;
    border: 2px solid var(--page-color);
    margin: 0;
    height: 12px;
    width: 12px;
    border-radius: 50%;
}
#main .slick-dots li.slick-active:before {
  background-color: var(--page-color);
}

button.slick-prev.slick-arrow {
  left: -15px;
}

button.slick-next.slick-arrow {
    right: -15px;
}

.sliderControls {
    display: flex;
    justify-content: space-between;
}

.grid-slider-prev, .grid-slider-next {
  position: relative;
  display: block !important;
}

.slick-prev:before, .slick-next:before, .grid-slider-prev:before, .grid-slider-next:before {
  /*  background: url(/wp-content/uploads/2018/08/chevron_white@0.5x.png) center center/contain no-repeat;
    content: "" !important;
    width: 50px;
    height: 50px;
    display: block; */
    width: 50px;
height: 50px;
font-family: "revicons" !important;
font-size: 35px !important;
display: block;
text-align: center;
content: '\e825' !important;
}



.grid-loop-item {

}

.grid-loop-item.order-zero { order: 0; }
.grid-loop-item.order-one { order: 1; }

.grid-loop-item_info {
  height: 450px;
  position: relative;
  overflow-y: hidden;
}

.grid-loop-item_image, .grid-loop-item_color {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;
}



.grid-loop-item_content:hover {
  top: 0;
  padding: 25px 10px 10px;
}

.grid-loop-item_content:hover .grid-loop-item_content-artists, .grid-loop-item_content:hover .grid-loop-item_content-strapline  {
  margin-top: 5px;
  margin-bottom: 0.5rem;
}

.grid-loop-item_content:hover .grid-loop-item_content-strapline {
    margin-top: 30px;
}

.grid-loop-item_content .grid-loop-item_content-season-link {
  color: var(--event-color);
}

.grid-loop-item_image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 1;
  height: 285px;
}

.grid-loop-item_color {
  background-color: var(--page-color);
  opacity: 0;
  z-index: 2;
}



.grid-loop-item.post .grid-loop-item_color {
  background-color: var(--blog-color);
}

.grid-loop-item.event.free-word .grid-loop-item_color {
  background-color: var(--event-color);
 }

.grid-loop-item.event.associate .grid-loop-item_color {
  background-color: var(--associate-color);
}

/* .grid-loop-item.post .grid-loop-item_color {
  background-color: var(--blog-color);
} */

.grid-loop-item_content {
  z-index: 3;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  display: flex;
  flex-direction: column;
justify-content: flex-start;
  padding: 10px 10px 10px;
  position: absolute;
    height: 100%;
    max-width: 285px;
    width: 100%;
    top: 285px;
    transition: 0.2s all ease;
}

/* tax season bios grid (designers) */

.tax-season .section-bios-grid .grid-loop-item_info {
  height: initial;
}

.tax-season .section-bios-grid .grid-loop-item_content {
  position: relative;
}

.tax-season .section-bios-grid .grid-loop-item_image {
  position: relative;
  height: 285px;
}

/* ---- */

.grid-loop-item_content h3 {
    font-size: 2.1rem;
    text-transform: uppercase;
    margin-bottom: 5px;
        font-weight: 600;
        min-height: 52px;
}
.grid-loop-item_content h3 a {
    height: 52px;
    font-weight: 400;
}

.grid-loop-item_content:hover h3 {
  margin-bottom: 4px;
}

.grid-loop-item_content-excerpt {
  height: 48px;
}

.grid-loop-item_content-posttype {
  font-size: 1.4rem;
}


.grid-loop-item_content-hosts, .grid-loop-item_content-strapline  {
  min-height: 60px;
margin-bottom: 5px;
line-height: 1.3;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
}

.grid-loop-item_content-artists {
  min-height: 60px;
margin-bottom: 5px;
line-height: 1.3;
display: flex;
align-items: center;
justify-content: center;
}

.grid-loop-item_content-datetime {
  text-transform: uppercase;
  font-size: 1.4rem;
}

.grid-loop-item_content-links {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    margin-top: 55px;
}

.grid-loop-item_content-links a {
  color: black; font-weight: 900; font-size: 2rem;
}

.grid-loop-item_content-links a:after, .top-footer .top-footer-header_link .large-link:after {
  content: "";
  height: 2px;
  width: 0;
  background-color: var(--page-color);
  display: block;
  transition: 0.2s all ease;
}

.venue-grid .grid-loop-item_content {
  top: 300px;
}
.venue-grid .grid-loop-item .grid-loop-item_image {
  height: 300px;
}
.venue-grid .grid-loop-item_content:hover {
  top: 0;
}
.venue-grid .grid-loop-item_content p {
    min-height: 48px;
}


.top-footer .top-footer-header_link .large-link:after {
  background-color: white;
}

.grid-loop-item_content-links a:hover:after, .top-footer .top-footer-header_link .large-link:hover:after {
  width: 100%;
}

a.grid-loop-item_event-view, a.grid-loop-item_event-book {
   font-size: 2rem;
}

a.grid-loop-item_event-view {
  color: black;
}

a.grid-loop-item_event-book {
  color: var(--event-color);
  font-weight: 900;
}

a.bookclick { display: none; }
a.bookclick.bookLoaded { display: block; }

.grid-loop-item_content-season {
    margin-top: auto;
    margin-bottom: 0px;
    font-family: var(--font-header);
    font-size: 1.4rem;
    text-transform: uppercase;
}



.grid-loop-item_title {
  margin-bottom: 6px;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
      font-family: var(--font-body);
}

.grid-loop-item_title a { color: var(--black);  }

.grid-loop-item_datetime {
  text-align: center;
}

/* specific grid styles for certain pages */
.section-bios-grid .grid-loop-item_info {
  height: 135px;
  margin-bottom: 15px;
}
.section-bios-grid .grid-loop-item_image {
  height: 07px;
}

.section-bios-grid .grid-loop-item_content:hover  {
  top: 0px;
  padding: 10px;
}
.section-bios-grid .grid-loop-item_content {
    background: #ebebeb;
    top: 0px;
}

#section-season-past-events .grid-loop-item_content-links {
  justify-content: center;
}

/* grid for the reading list of a single blog/article post */

div#section-reading-list {
  width: 100%;
}

.four-grid.reading-list-grid .grid-loop-item_info {
  height: 715px;
}

.four-grid.reading-list-grid .grid-loop-item_image {
  height: 456px;
}

.four-grid.reading-list-grid .grid-loop-item_content {
  top: 456px;
}

.four-grid.reading-list-grid .grid-loop-item_content:hover {
    top: 335px;
}

.four-grid.reading-list-grid .grid-loop-item_content_excerpt {
  height: 120px;
}




/* Testimonial section on about page template */

.freeword-gridbox.testimonial-gridbox {
    position: relative;
    display: flex;
align-items: center;
}
.freeword-gridbox.testimonial-gridbox:before {
  background-color: var(--page-color);
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  content: "";
  display: block;
  opacity: 0.75;
}

.testimonial-gridbox-text {
    z-index: 2;
    color: white;
    position: relative;
    text-align: center;
}

.testimonial-gridbox-text h2 {
  font-family: var(--header-font);
  font-weight: 700;
  font-size: 2.4rem;
  margin-bottom: 15px;
      margin-top: 10px;
          text-transform: uppercase;
}

/* single events and single posts */

ul#freeword_page_nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(147px, 1fr));
    align-items: center;
    margin-bottom: 0;
        background: #ebebeb;
}

ul#freeword_page_nav .page-nav-item {
  text-align: center;
  margin: 0;
}
ul#freeword_page_nav .page-nav-item {
background-color: #D4D4D4;
    height: 38px;
}

ul#freeword_page_nav .page-nav-item.nav-blank {
    background-color: #ebebeb;
}

/* ul#freeword_page_nav .page-nav-item.nav-info {
  background: white;
} */

ul#freeword_page_nav .page-nav-item.nav-booking {
  background: var(--page-color);
      grid-column: 7 / span 2;
}
ul#freeword_page_nav .page-nav-item.nav-booking:hover {
  background-color: black;
}

ul#freeword_page_nav .page-nav-item.nav-booking a {
  color: white;
  font-family: var(--font-header-medium);
    font-weight: 300;
}
/* ul#freeword_page_nav .page-nav-item.nav-booking:hover a {
  color: black;
} */


#freeword_page_nav a.nav-link {
    font-size: 1.8rem;
    font-weight: 900;
    color: black;
    font-family: var(--font-header);
    white-space: nowrap;
    height: 38px; text-transform: uppercase;
}
#freeword_page_nav a.nav-link.in-view {
  background: white;
}
.single-event .full-width-grid, .single-venue .full-width-grid { background: white; }
.single-event .full-width-grid .event-section, .single-venue .full-width-grid .event-section {
  padding: 0 15px;
}

.single-event ul#freeword_page_nav {
  grid-template-columns: repeat(8, minmax(140px, 1fr));
  background: var(--grey);
}

.single-event ul#freeword_page_nav .page-nav-item.nav-booking  {
  grid-column: 7 / span 2;
}

.mobile_pagenav_trigger {
  display: none;
}
.mobile_pagenav_trigger a {
  font-size: 1.8rem;
    font-weight: 900;
    color: black;
    font-family: var(--font-header);
    white-space: nowrap;
    height: 38px;
}




div#section-info {
  display: grid;
  column-gap: calc(20px + 5vw);
  row-gap: 0vw;
  grid-template-columns: minmax(400px, 1fr) 277px;
  padding-top: 30px;
  padding-bottom: 20px;
}

div#section-info.section-info-season {
  column-gap: 0;
  grid-template-columns: 1fr;
  justify-content: center;
}

div#section-info.section-info-season div#section-info-right {
    width: 250px;
    margin-left: auto;
}

div#section-info.section-info-season > #section-info-left {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

div#section-info-right {

}

div#section-info-right .h3 {
    font-family: var(--font-header-medium);
    font-weight: 500;
    font-size: 1.6rem;
}

.section-info-title {
  font-size: 4.8rem;
}

.section-title {
  font-size: 3.6rem;
  text-transform: uppercase;
}

.info-book-button {
    width: 100%;
    display: flex;
        margin-top: auto;
}

.info-book-button a {
    background: var(--page-color);
    color: white;
    width: 150px;
    text-align: center;
    font-family: var(--font-header);
    font-size: 1.8rem;
    padding: .5rem 1rem;
}


.season_partners_grid, .season_grid {
  display: grid;
  grid-template-columns: repeat(4, 285px);
  grid-gap: 20px;
}

.events_partners_grid, .events_sponsors_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 182px));
  grid-gap: 15px;
}

.green_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 135px));
    grid-gap: 10px;
}

.events_partners_grid > div, .events_partners_grid > a, .season_partners_grid > div, .season_partners_grid > a, .events_sponsors_grid > a, .green_grid > a {
  width: 100%;
  height: 160px;
}

.partners_grid-item, .sponsors_grid-item, .green_grid-item {
    padding: 20px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.green_grid-item {
  padding: 15px;
}

.partners_grid-item img, .sponsors_grid-item img, .green_grid-item img {
    max-height: 100%;
max-width: 100%;
}

/* content slider on season page (youtube videos, upload and images) */
.four-grid a.content-slider-item-inner {  height: 285px;  display: block; }
}

.season_grid .grid-loop-item:nth-child(1) { grid-column: 1 / 4; }
.season_grid .grid-loop-item:nth-child(2) { grid-column: 1 / 2; grid-row-start: 2; }
.season_grid .grid-loop-item:nth-child(3) { grid-column: 2 / 5; grid-row-start: 2; }
.season_grid .grid-loop-item:nth-child(4) { grid-column: 3 / 5; grid-row-start: 3; }

.season_grid .grid-loop-item:nth-child(1) .grid-loop-item_image, .season_grid .grid-loop-item:nth-child(3) .grid-loop-item_image, .season_grid .grid-loop-item:nth-child(4) .grid-loop-item_image {
  height: 340px;
}

.season_grid .grid-loop-item:nth-child(1) .grid-loop-item_content, .season_grid .grid-loop-item:nth-child(3) .grid-loop-item_content, .season_grid .grid-loop-item:nth-child(4) .grid-loop-item_content {
right: 0; }

.event-formats, .post-tags {
  font-family: var(--font-header);
  display: flex;
  flex-wrap: wrap;
  text-transform: uppercase;
  margin-top: 15px;
margin-bottom: 23px;

}

.event-formats li, .post-tags li {
  margin-right: 12px;
}

ul#freeword_tabs, .freeword_page_nav {
  align-items: center;
  list-style: none;
}

ul#freeword_tabs li, li.page-nav-item {
margin-right: 16px;
margin-top: 0;
}

ul#freeword_tabs li:before, #freeword_page_nav li.page-nav-item:before {
    display: none !important;
}

/* ul#freeword_nav_tabs { list-style: none; margin: 0; }

ul#freeword_nav_tabs li { margin-top: 0; margin-right: 10px; }

ul#freeword_nav_tabs li:before { display: none; }

ul#freeword_nav_tabs li a {
  font-family: var(--font-header);
background: none;
color: black;
text-transform: uppercase;
border: 2px solid var(--page-color);
border-radius: 0px;
padding: 4px 5px;
min-width: 95px;
text-align: center;
outline: 0;
}

ul#freeword_nav_tabs li a:not(.active) {
  background-color: var(--page-color);
}

.single-post ul#freeword_nav_tabs li a {
    border: 2px solid var(--blog-color);
}
.single-post ul#freeword_nav_tabs li a:not(.active) {
  background-color: var(--blog-color);
} */

.addthis_inline_share_toolbox, #atstbx2 { width: 100%; max-width: 200px; }

.at-share-btn-elements {
  display: flex;
  justify-content: flex-start;
}
.at-style-responsive .at-share-btn { transition: 0.2s background-color ease; margin-right: 10px !important; }
.at-resp-share-element .at-share-btn:focus, .at-resp-share-element .at-share-btn:hover {  background-color: var(--event-color) !important; }

#atstbx, .at-share-btn-elements {  width: 100%; }

/* post stuff */

body.single-post ul#event-tabs_tabs li a {
border: 2px solid var(--blog-color);

}

body.single-post ul#event-tabs_tabs li a:not(.active) {
  background-color: var(--blog-color);
}

.event-formats {
  font-family: var(--font-header);
  display: flex;
  flex-wrap: wrap;
  text-transform: uppercase;
  margin-top: 15px;
margin-bottom: 23px;

}

.event-formats li {
  margin-right: 12px;
}

/* single venue stuff */

.venue_image_item {
  height: 285px;
}

.contact-form-wrapper {
    max-width: 650px;
}
.single-venue .contact-form-wrapper {
  margin-right: auto;
}

.venue-lightbox-image { display: flex; }
  .venue-lightbox-image > a {
    position: relative;
    width: 100%;
min-height: 40vh;
max-height: 300px;
  }
  .venue-lightbox-image > a:after {
    content: "";
    display: block;
    position: absolute;
    background: url(/wp-content/uploads/2018/07/Image-enlarge.svg) center center/contain no-repeat;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
}

.venue-form-section {
      width: 100%;
}
.venue-form-section:nth-child(5) {
  margin-bottom: 20px;
}
.venue-form-section .checkbox-label {
  width: 100%;
  text-transform: uppercase;
  cursor: pointer;
}

.venue-form-section .checkbox-label:after {
  display: inline-block;
  float: right;
  margin-left: 8px;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f107";
}

.venue-form-section input[type="checkbox"]:checked ~ .checkbox-label:after {
  content: "\f106";
}


.venue-form-section > input[type="checkbox"] {
  display: none;
  cursor: pointer;
}
.venue-form-section .inner-toggle-box {
  display: none;
  margin-bottom: 20px;
}

.inner-toggle-box > div > div {
    margin-top: 15px;
}

.venue-form-section input[type="checkbox"]:checked ~ .inner-toggle-box {
  display: block;
}

.venue-form-section span.wpcf7-list-item {
    display: flex;
    margin-top: 13px;
    align-items: center;
    font-weight: 700;
}

.freeword-generic-lightbox {
  display: none;
}

.freeword-generic-lightbox.featherlight-inner {
  background: white;
padding: 30px 25px 25px 25px;
max-width: 680px;
}

html .featherlight .featherlight-content {
  padding: 10px 10px 0;
}

 html .featherlight-iframe .featherlight-content {
  /* position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 10px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll; */
  /* overflow: initial; */
  height: 600px;
  max-height: calc(100vh - 25px);
  top: 0;
} 

.featherlight-iframe .featherlight-content button.featherlight-close-icon.featherlight-close {
  color: black;
}

.featherlight-iframe iframe.featherlight-inner {
    width: 100%;
    height: 100%;
    padding: 20px;
}

@media (max-width: 767px) {
  html .featherlight-iframe .featherlight-content { 
    width: 1px;
    min-width: 100%;
  }
  .featherlight-iframe iframe.featherlight-inner {
    height: 100% !important;
    width: 1px;
    min-width: 100%;
  }
}

.featherlight-loading {
  color: white !important;
  font-size: 2.8rem;
}
.featherlight-loading .featherlight-content:after {
  background: url('https://svn.automattic.com/wordpress/trunk/wp-admin/images/spinner.gif') no-repeat;
background-size: 16px 16px;
display: flex;
justify-content: center;
position: relative;
width: 100%;
height: 16px;
margin: 5px 5px 0;
content: "";
}

.freeword-generic-lightbox.featherlight-inner .generic-lightbox_wrapper {
  display: grid;
  grid-gap: 15px;
}

@media (min-width: 670px) {
  html .featherlight-iframe .featherlight-content { 
    width: 600px; 
    overflow: auto;
  }
  .freeword-generic-lightbox.featherlight-inner .generic-lightbox_wrapper {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr) minmax(300px, 2fr));
  }
}

.featherlight-content {
    padding-top: 0 !important;
    background: transparent !important;
}

iframe.featherlight-inner {
    background: white;
    padding: 0px 15px;
}

.featherlight-iframe button.featherlight-close-icon.featherlight-close {
    color: white;
    top: 5px;
    right: 10px;
}


@media (max-width: 560px) {
  iframe.featherlight-inner {
    width: 320px;
    height: 630px;
  }
}

button.featherlight-close-icon.featherlight-close {
  background: none;
color: black;
font-size: 28px;
width: 40px;
height: 35px;
line-height: 40px;
right: 10px;
}



/* Header */


#masthead {
  background-color: #000000;
  position: relative;
  z-index: 5;
}

.desktop-bar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.site-branding {
    width: 200px;
    max-width: 60%;
}
.site-branding a img {
    max-width: 280px;
}

nav#site-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

ul#primary-menu {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

ul#primary-menu li {
  margin: 5px 0px 0px 30px;
}

ul#primary-menu li a {
  font-family: var(--font-header-medium);
color: white;
transition: 0.2s all ease;
font-weight: 100;
text-transform: uppercase;
font-size: 1.5rem;
line-height: 1.3;
}

/* styling the book now to be whiter */
/* ul#primary-menu li:nth-last-child(2) a {
    color: var(--grey);
} */

/* ul#primary-menu li a:hover {
  color: var(--grey);
} */

ul#primary-menu svg.search-icon {
    fill: white;
    vertical-align: middle;
}

@media (max-width: 990px) {
  ul#primary-menu li {
    margin: 0px 0px 0px 25px;
}
}

@media (max-width: 850px) {
  ul#primary-menu li {
    margin: 0px 0px 0px 20px;
}
}

/* search functionality */
#search-toggle-mobile { width: 0; border-color: black; }
input#search-toggle {
    width: 0;
}

.desktop-search-wrapper {
    display: flex;
    align-items: center;
    height: 25px;
    position: relative;
}

.desktop-search-wrapper > div {
  width: 0;
  opacity: 0;
}

.desktop-search-wrapper input[type=checkbox]:checked ~ div {
  width: initial;
    opacity: 1;
    position: absolute;
    top: 38px;
    background: black;
    padding: 15px 25px;
    right: -15px;
}

.desktop-search-wrapper > label, a.spektrix-basket-login-wrapper, a.spektrix-basket-status-wrapper {
    color: white;
    margin-left: 22px;
    font-size: 16px;
    margin-bottom: 0;
}

.desktop-search-wrapper form {
  display: none;
flex-direction: column;
align-items: flex-end;
}

.desktop-search-wrapper form label {
  margin-left: 10px;
      margin-bottom: 15px;
      display: none;
}
.desktop-search-wrapper input[type=checkbox]:checked ~ div form {
  display: flex;
}
.desktop-search-wrapper input[type=checkbox]:checked ~ div form label {
  display: block;
}

.desktop-search-wrapper .search-field {
  background: none;
  border-bottom: 2px solid white;
  color: white !important;
  padding: 4px;
  width: 200px;
  max-width: 100%;
}

.desktop-search-wrapper input.search-submit {
  border: 0;
font-family: var(--font-header-medium);
color: white;
transition: 0.2s all ease;
font-weight: 300;
text-transform: uppercase;
font-size: 1.5rem;
line-height: 1.3;
background: none;
padding: 0 0 0 5px;
cursor: pointer;
}

/* Search results page */

.search-results-grid .post-thumbnail img {
    margin-bottom: 10px;
}

/* desktop hamburger (added in August) */

.hamburger-wrapper {
  margin-left: 26px;
  position: relative;
}

.desktop-menu-wrapper {
  display: none;
position: absolute;
width: 250px;
background: black;
right: -14px;
padding: 8px 20px 14px;
transform: translateY(17px);
}

ul#menu-desktop-hamburger {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-end;
}

#menu-desktop-hamburger li {
    margin-bottom: 0.2rem;
}

#menu-desktop-hamburger li:after, ul#primary-menu li:after, .main-navigation ul li.current_page_item:after, #menu-desktop-hamburger ul li.current_page_item:after {
  height: 2px;
  background: var(--page-color);
  width: 0;
  transition: 0.2s all ease;
  content: "";
  display: block;
  float: right;
}

#menu-desktop-hamburger li:hover:after, ul#primary-menu li:hover:after, .main-navigation ul li.current_page_item:after, #menu-desktop-hamburger ul li.current_page_item:after {
  width: 100%;
}

#menu-desktop-hamburger a {
    color: white;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-family: var(--font-header-medium);
font-weight: 100;
}


/* more stuff */

.mobile-menu-wrapper, .search-wrapper {
  display: none;
  position: fixed;
  background: #000000;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  touch-action: none;
  -ms-touch-action: none;
}

.hamburger {
  cursor: pointer;
  position: relative;
  width: 21px;
  height: 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hamburger span {
  width: 100%;
  background: white;
  height: 3px;
  display: block;
  border-radius: 3px;
}
.hamburger span:nth-child(2), .hamburger span:nth-child(3) { margin-top: 4px; }

.hamburger.active span:nth-child(2) { opacity: 0;}

.hamburger.active span:first-child {
  transform: rotate(45deg);
transform-origin: 29%;
}

.hamburger.active span:nth-child(2), .hamburger.active span:last-child { margin: 0;}

.hamburger.active span:last-child {
  transform: rotate(-45deg);
transform-origin: 35%;
}

nav#site-navigation-mobile {
    margin-top: 65px;
}

ul#mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}

ul#mobile-menu li {
  margin-top: calc(5px + 1.5vh);
}

ul#mobile-menu li a {
  font-family: var(--font-header-medium);
color: white;
transition: 0.2s all ease;
font-weight: 100;
text-transform: uppercase;
font-size: 1.8rem;
line-height: 1.5;
}

ul#mobile-menu li:last-child a {
  color: white;
}



/* Footer */

footer p, footer a {
  font-size: 1.4rem;
}

.top-footer {
    min-height: 370px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
    margin-bottom: 7.5px;
        padding: 25px 15px;
        margin-top: 10px;
}

.top-footer-header-color {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.75;
}

.top-footer-header_text {
    color: white;
    font-weight: 900;
    text-align: center;
    font-size: 5rem;
    text-transform: uppercase;
    max-width: 900px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 3;
}

.top-footer-header_strapline {
  color: white;
  text-align: center;
  max-width: 600px;
  z-index: 3;
}

.top-footer .top-footer-header_link {
  z-index: 3;
}

.top-footer .top-footer-header_link .large-link {
  color: white !important;
}




.site-footer ul { list-style: none; padding: 0; margin-left: 0; }
.footer-top-row, .footer-top-row a { position: relative; color: white; }
.footer-top-row .footer-section { padding: 35px 30px 19px; }
.footer-top-row .footer-section:first-child { background-color: #636363 }
.footer-top-row .footer-section:nth-child(2) { background-color: #707070 }
.footer-top-row .footer-section:nth-last-child(2) { background-color: #7d7d7d }
.footer-top-row .footer-section:last-child { background-color: #898989 }

/* .footer-top-row:before, .footer-top-row:after {
  content: "";
position: absolute;
top: 0;
height: 100%;
background-color: #959595;
width: -webkit-fill-available;
display: block;
}
.footer-top-row:before {
  left: 100%;
}
.footer-top-row:after {
  right: 100%;
} */

.row.footer-bottom-row {
    padding: 5px 0 0;
    font-size: 1.3rem;
}

.social-icons {
    display: flex;
    justify-content: space-between;
    font-size: 1.8rem;
    max-width: 300px;
}
.social-icon {
    width: 35px;
    height: 35px;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    border-radius: 50%;
    align-items: center;
}
.social-icon a {
    width: 35px;
    text-align: center;
}
.footer-top-row .social-icon a i {
    color: #898989;
}

.cmplz-blocked-content-container { background: none !important}

/* cookie related styles */

.cc-window a {
  color: white;
  text-decoration: underline;
}

.cc-window a.cc-link {
  display: none;
}


/* lets take this to the handheld */

a.mobile-event-book-link {
    color: white;
    background: var(--page-color);
    padding: 8px 20px;
    font-family: var(--font-header-medium);
    font-weight: 300;
    width: 200px;
    text-align: center;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
  .four-grid.grid-slider.desktop-slider-destroy { display: grid; }
}

@media (max-width: 1300px) {
  .tns-outer {
    position: relative;
    margin: 0 auto;
    max-width: 900px;
  }
  .tns-ovh {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
  }
}

@media (max-width: 1246px) {
  .four-grid.grid-slider.desktop-slider-destroy { justify-content: center;}
 }

@media (max-width: 1170px) {
  .single-event ul#freeword_page_nav, .single-venue ul#freeword_page_nav {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .single-event ul#freeword_page_nav .page-nav-item.nav-booking, .single-venue ul#freeword_page_nav .page-nav-item.nav-booking {
    grid-column: auto;
}
.page-template-page-support ul#freeword_page_nav .page-nav-item.nav-booking { grid-column: auto; }
}

@media (max-width: 990px) {
  .single-event div#section-info, .single-venue div#section-info, #section-contact-info, div#section-info {
    grid-template-columns: 100%;
  }
  .single-event div#section-info div#section-info-left {
    grid-row: 1;
}
.single-event div#section-info div#section-info-right-2, .single-venue div#section-info div#section-info-right-2 {
  grid-row: 2;
}
.single-event div#section-info div#section-info-right {
  grid-row: 3;
}


}

@media (max-width: 1020px) {
  .tns-outer { width: 600px;}
.tns-ovh {
max-width: 590px;
}
}


@media (max-width: 900px) {
  .one-three-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* #masthead {
    padding-top: 8px;
    padding-bottom: 8px;
  } */
  .cc-window.cc-banner {
    flex-direction: column;
    padding: 15px;
}
.cc-compliance.cc-highlight {
  margin-top: 8px;
}
  .general-page-header_text {
font-size: 3.5rem;

  }
  .four-grid, .section-bios-grid, .green_grid {
    justify-content: center;
  }
  .footer-top-row {  overflow-x: hidden; }
  .single-event h1.general-page-header_text, .single-post h1.general-page-header_text {
    font-size: 2.5rem;
  }

  .general-page-header, .home-header-slider_item {
    min-height: 150px;
    /* background-size: 200% !important; */
  }
    body.tax-season .general-page-header, .single-event .general-page-header, .single-post .general-page-header {
    min-height: 30vmax;
}
.events_partners_grid, .events_sponsors_grid {
  justify-content: center;
}
}

@media (max-width: 767px) {
  .tns-outer { width: 300px;}
  .tns-ovh {
  max-width: 285px;
  }
  .tns-outer .tns-controls {
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
  }
  .tns-controls button:last-child {
    right: -49px;
}
.single-event .wp-video {
  width: 100% !important;
}
.mejs-container {
  max-width: 100% !important;
  width: 100% !important;
}
/* .four-grid.reading-list-grid .grid-loop-item_content { text-align: left;}
.four-grid.reading-list-grid .grid-loop-item_content_excerpt {
  text-align: left;
} */
}

@media (max-width: 600px) {
ul#freeword_page_nav, .single-event ul#freeword_page_nav {
display: none;
position: fixed;
    width: 100%;
    bottom: 50px;
grid-template-columns: 1fr;
margin-left: -15px;
margin-right: -15px;
max-height: 133px;
overflow-y: scroll;
}

ul#freeword_page_nav .page-nav-item.nav-info { background: #D4D4D4; }
#freeword_page_nav a.nav-link.in-view { background: #D4D4D4; color: #ed286b;  }
ul#freeword_page_nav .page-nav-item.nav-booking a { background: #ed286b;}
ul#freeword_page_nav .page-nav-item.nav-blank { display: none;}

.page-template-page-support ul#freeword_page_nav .page-nav-item { grid-column: 1;}
.page-template-page-support ul#freeword_page_nav .page-nav-item.nav-booking { grid-row: 1; grid-column: auto;}


.mobile_pagenav_trigger {
  position: fixed;
height: 50px;
bottom: 0;
left: 0;
width: 100vw;
display: flex;
background: #d4d4d4;
text-align: center;
justify-content: center;
align-items: center;
cursor: pointer;
}
.mobile_pagenav_trigger.active {
  box-shadow: 0px 3px 0px 0px var(--page-color) inset;
}

.single-event ul#freeword_page_nav .page-nav-item.nav-booking, .single-venue ul#freeword_page_nav .page-nav-item.nav-booking {
  grid-row: 1;
}

.section-info-title, .top-footer-header_text {
font-size: 3rem; }

.grid-main-title {
  text-align: center;
}

.section-bios-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 100%));
}
.section-bios-grid .grid-loop-item_content {
  max-width: 100%;
}

ul#freeword_nav_tabs {
  justify-content: center;
}
ul#freeword_nav_tabs li {
  margin: 0 3px;
  flex: 1 0 auto;
}

ul#freeword_nav_tabs li.booking {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 99999;
  background: var(--page-color) !important;
  margin: 0;
}

ul#freeword_nav_tabs li a {
  min-width: auto;
}

  a#pills-book-tab {
    background: var(--page-color) !important;
      font-size: 2rem;
        line-height: 3;
}
a#pills-book-tab:after {
  content: "\f054";
  display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 0.6em;
}

.row.footer-bottom-row {
    margin-bottom: 50px;
}

}

@media (max-width: 500px) {
ul#freeword_page_nav, .single-event ul#freeword_page_nav, .single-venue ul#freeword_page_nav {
grid-template-columns: 1fr;
}

.tns-outer .tns-controls {
  display: flex;
  display: -webkit-flex;
  position: relative;
  max-width: 300px;
  width: 100%;
    margin-top: 10px;
}
.tns-controls button:first-child, .tns-controls button:last-child {
  position: initial;
}

.tns-outer .tns-controls button:last-child:before {
  margin-top: -3px;
}

.h1 { }
}

@media (max-width: 440px) {
.tns-outer {
  width: 100%;
}
.freeword-gridbox { padding: 10px;}
}

}
@media (max-width: 400px) {
.four-grid, .section-bios-grid { grid-template-columns: repeat(auto-fit, 100%); }
.four-grid .grid-loop-item, .four-grid .slick-track .slick-slide { margin: 0 auto; }
}


@media (max-width: 360px) {
  /* .tns-slider .tns-item {
    padding-left: 15px !important;
  } */

  .freeword-gridbox {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .site-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  /* to get contact form columns to fit on mobile */
  .inner-toggle-box > div > div {
    padding-left: 0;
    padding-right: 0;
}
}


   .tab-pane.shortened {
    max-height: 300px;
    position: relative;
    overflow: hidden;
  }
  .tab-pane.shortened:after {
    content: "READ MORE";
    font-family: var(--font-header);
    color: black;
    margin: 0;
    padding: 120px 0 15px;
    text-align: center;
    width: 100%;
    position: absolute;
    font-size: 1.6rem;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, transparent, white);
  }