/*
 Theme Name:   Zakra Child
 Description:  Zakra Child Theme customized for Buffer Fringe Performing Arts Festival
 Author:       Fanis Mahmalat
 Author URI:   https://fanismahmalat.com
 Template:     zakra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/
@charset "UTF-8";
/* MAIN STYLES FILE */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');
body {
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
  color: #0b031b;
}

a {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  color: inherit;
}

@media (max-width: 1200px) {
  body {
    font-size: 14px;
  }
}

header.main-header {
  position: relative;
  background-color: #98d1cb;
  z-index: 1;
}

header.main-header .elementor-container {
  max-width: 90% !important;
  width: 1200px !important;
}

header.main-header .elementor-container .custom-header-nav-links nav .sub-menu li a {
  padding: 12px 15px;
}

header.main-header .elementor-container .custom-header-nav-links nav .sub-menu li a span {
  color: #0b031b !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

header.main-header .elementor-container .custom-header-nav-links nav .sub-menu li a span:hover {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

header.main-header .elementor-container .custom-header-nav-links nav .sub-menu li a span::before {
  display: none;
}

header.main-header .elementor-container .custom-header-nav-links nav ul li a span {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

header.main-header .elementor-container .custom-header-nav-links nav ul li a:hover span {
  color: #ef6839;
}

header.main-header .elementor-container .custom-header-nav-links nav ul li a .nav-arrow::before {
  font-weight: 900 !important;
}

header.main-header
  .elementor-container
  .custom-header-nav-links
  nav
  ul
  li.current-menu-item
  a
  span {
  color: #0b031b;
}

header.main-header .elementor-container .custom-header-nav-links nav ul li:last-of-type a {
  padding-right: 0 !important;
}

header.main-header .elementor-container .custom-header-nav-links nav ul li:last-of-type a span {
  background-color: white;
  padding: 10px 15px;
  color: #0b031b;
  border-radius: 2px;
  position: relative;
  height: 100%;
  border: 1px solid #0eb0a1;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background: -webkit-gradient(linear, left top, right top, from(white), to(white));
  background: linear-gradient(to right, white, white);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

header.main-header
  .elementor-container
  .custom-header-nav-links
  nav
  ul
  li:last-of-type
  a
  span:hover {
  color: white;
  background-size: 0% 100%;
  -webkit-box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.35);
}

header.main-header .elementor-container #site-navigation-wrap {
  display: none;
}

.breadcrumb {
  background-color: #98d1cb;
}

.breadcrumb * {
  color: #0b031b;
}

.breadcrumb .oceanwp-breadcrumb {
  width: 1200px;
  max-width: 90%;
  margin: auto;
  padding: 10px 0;
  z-index: 1;
  display: block;
}

.breadcrumb .page-header-title {
  font-size: 15px;
}

.cta-section {
  height: 320px;
  background-image: url('https://bufferfringe.org/wp-content/uploads/2022/07/banner-2022-01.jpg');
  background-position: 0 46%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 70px;
}

.cta-section::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 3, 27, 0.5);
}

.cta-section .inner {
  position: relative;
  text-align: center;
  padding: 0 30px;
  color: #fecd32;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cta-section .inner span {
  font-size: 1.2em;
  margin-bottom: -5px;
  color: #ef6839;
}

.cta-section .inner h4 {
  color: white;
  font-size: 1.8em;
  font-weight: normal;
  margin-bottom: 25px;
  line-height: 1.2;
}

.cta-section .inner .cta-button {
  background-color: #ef6839;
  padding: 8px 20px;
  font-size: 0.9em;
  margin-top: 30px;
  color: white;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}

.cta-section .inner .cta-button:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 7px 10px -2px rgba(11, 3, 27, 0.2);
  box-shadow: 0 7px 10px -2px rgba(11, 3, 27, 0.2);
  text-decoration: none;
}

@media (max-width: 1200px) {
  .cta {
    height: 320px;
  }
}

@media (max-width: 500px) {
  .cta {
    height: 300px;
  }
}

.cta-button {
  display: block;
  text-align: center;
  margin-top: 70px;
}

.cta-button a {
  border-radius: 2px;
  background-color: white;
  border: 1px solid #98d1cb;
  color: #ef6839;
  padding: 8px 16px;
  display: inline-block;
  background: -webkit-gradient(linear, left top, right top, from(#ef6839), to(#ef6839));
  background: linear-gradient(to right, #ef6839, #ef6839);
  background-repeat: no-repeat;
  background-size: 0 100%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.cta-button a:hover {
  color: white;
  background-size: 100% 100%;
  -webkit-box-shadow: 0px 4px 14px -4px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 4px 14px -4px rgba(0, 0, 0, 0.3);
}

.filters-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.filters-wrapper .filters-toggle {
  display: none;
  background-color: white;
}

.filters-wrapper #filters-form {
  background-color: white;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.filters-wrapper #filters-form .date-filter {
  margin-top: 20px;
}

.filters-wrapper #filters-form .date-filter .switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 20px;
  top: 3px;
  margin-left: 5px;
  /* Rounded sliders */
}

.filters-wrapper #filters-form .date-filter .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.filters-wrapper #filters-form .date-filter .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.filters-wrapper #filters-form .date-filter .switch .slider::before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.filters-wrapper #filters-form .date-filter .switch input:checked + .slider {
  background-color: #98d1cb;
}

.filters-wrapper #filters-form .date-filter .switch input:focus + .slider {
  -webkit-box-shadow: 0 0 1px #98d1cb;
  box-shadow: 0 0 1px #98d1cb;
}

.filters-wrapper #filters-form .date-filter .switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  transform: translateX(14px);
}

.filters-wrapper #filters-form .date-filter .switch .slider.round {
  border-radius: 34px;
}

.filters-wrapper #filters-form .date-filter .switch .slider.round:before {
  border-radius: 50%;
}

.filters-wrapper #filters-form .date-filter .date-inputs {
  display: none;
}

.filters-wrapper #filters-form .date-filter .date-inputs input {
  margin-bottom: 10px;
}

.filters-wrapper #filters-form .date-filter .date-inputs input:last-of-type {
  margin-bottom: 0;
}

.filters-wrapper #filters-form .date-filter .date-inputs-show {
  display: block;
}

.filters-wrapper #filters-form .inputs {
  margin-top: 25px;
}

.filters-wrapper #filters-form .inputs input[type='submit'] {
  margin-right: 10px;
  color: #665e75;
}

.filters-wrapper #filters-form .inputs input[type='submit']:hover {
  color: white;
}

.filters-wrapper #filters-form .inputs a {
  color: #665e75;
}

.filters-wrapper #filters-form .inputs a:hover {
  color: #98d1cb;
}

.filters-wrapper .filters-open {
  -webkit-transform: translateY(0) !important;
  transform: translateY(0) !important;
}

@media (max-width: 950px) {
  .filters-wrapper {
    top: 93px;
  }
  .filters-wrapper #filters-form {
    padding-bottom: 25px;
    -webkit-box-shadow: 0 15px 10px -13px rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 10px -13px rgba(0, 0, 0, 0.2);
  }
  .filters-wrapper .filters-toggle {
    padding-top: 25px;
    padding-bottom: 25px;
    display: block;
  }
}

.pagination-wrapper .nav-links * {
  background-color: #f1f9fb;
  color: #665e75;
  min-width: 32px;
  padding: 2px 0;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

.pagination-wrapper .nav-links *:last-child {
  margin-right: 0;
}

.pagination-wrapper .nav-links *:hover {
  background-color: #fecd32;
}

.pagination-wrapper .nav-links *.prev,
.pagination-wrapper .nav-links *.next {
  padding: 2px 12px;
}

.pagination-wrapper .nav-links .current {
  background-color: #98d1cb;
  color: white;
}

.pagination-wrapper .nav-links .dots {
  background-color: transparent;
}

.pagination-wrapper .nav-links .dots:hover {
  background-color: transparent;
}

@media (max-width: 950px) {
  .pagination-wrapper .nav-links {
    text-align: center;
  }
}

#scroll-top {
  border-radius: 50px;
  background-color: rgba(200, 214, 216, 0.8);
}

#scroll-top span {
  color: #819b9e;
}

#scroll-top:hover {
  background-color: #c8d6d8;
}

figure {
  margin: 15px 0;
}

figure figcaption {
  text-align: center;
  margin-top: 10px;
  font-style: italic;
  font-size: 14px;
}

.page-description {
  width: 1200px;
  max-width: 90%;
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
}

.page-description * {
  color: #0b031b;
}

.page-description h1 {
  color: #0b031b;
  width: 92%;
  min-height: 20px;
}

.page-description > span {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}

.page-description > span i {
  color: #0b031b;
  font-size: 1.3em;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.page-description > span i:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

footer {
  font-size: 16px;
  color: rgba(11, 3, 27, 0.64);
}

footer a {
  color: rgba(11, 3, 27, 0.64);
}

footer a:hover span {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: #ef6839 !important;
}

footer .elementor-social-icon {
  background-color: transparent !important;
}

footer .custom-footer-contact .elementor-column-wrap {
  padding: 5px !important;
}

footer .custom-footer-nav-links .elementor-column-wrap {
  padding: 5px !important;
}

footer .custom-footer-nav-links ul {
  margin-left: 0;
  margin-top: 0;
}

footer .custom-footer-nav-links ul li {
  list-style: none;
}

footer section.elementor-section {
  font-size: 14px !important;
}

@media (max-width: 500px) {
  footer .custom-footer-nav-links .elementor-column-wrap {
    margin-top: 50px !important;
  }
}

/* VENUES ARCHIVE */

body.post-type-archive-venues .zak-content .zak-container .zak-row {
  display: block;
}

/* Style the container for the venue cards */
body.post-type-archive-venues .bf-container .venues-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* Style each venue card */
body.post-type-archive-venues .venue-box {
  width: calc(33.33% - 20px); /* Three columns with some spacing in between */
  height: 400px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Clipping mask to display details and buttons on hover */
body.post-type-archive-venues .clipping-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* Style the venue title */
body.post-type-archive-venues .venue-box .clipping-mask .details .text h3.venue {
  margin: 0;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Adjustments for responsiveness */
@media screen and (max-width: 978px) {
  body.post-type-archive-venues .venue-box {
    width: calc(50% - 20px); /* Two columns on smaller screens */
  }
}

@media screen and (max-width: 700px) {
  body.post-type-archive-venues .venue-box {
    width: 100%; /* Full width on mobile screens */
  }
}

/* SINGLE VENUE */
body.single-venues .zak-content .zak-container .zak-row {
  padding-top: 0;
}

/* Style the container for the venue details */
body.single-venues .bf-container {
  display: flex;
  flex-direction: column; /* Stack title and details vertically */
  align-items: center; /* Center align title */
}

/* Style the title to be full width */
body.single-venues .bf-container .text.project-title {
  width: 100%;
  padding: 20px;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Style the details as a grid */
body.single-venues .bf-container .details {
  display: grid;
  grid-template-columns: 3fr 1fr; /* Main content on the left, sidebar on the right */
  gap: 15px; /* Add spacing between main content and sidebar */
}

/* Style the main content area */
body.single-venues .bf-container .main-content {
  padding: 20px; /* Add some spacing around the main content */
}

body.single-venues .bf-container .main-content img {
  margin-bottom: 20px;
}

/* Style the container for the venue cards */
body.single-venues .bf-container .events-wrapper {
  width: 100%;
  margin-top: 30px;
}

body.single-venues .bf-container .events {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* Style each venue card */
body.single-venues .event-box {
  width: calc(50% - 20px); /* Three columns with some spacing in between */
  height: 400px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

body.single-venues .event-box .image {
  height: 100%;
  object-fit: contain;
  background-position: center;
}

/* Clipping mask to display details and buttons on hover */
body.single-venues .clipping-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* Style the event title */
body.single-venues .event-box .clipping-mask .details .text h4 {
  margin: 0;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Adjustments for responsiveness */
@media screen and (max-width: 978px) {
  body.single-venues .event-box {
    width: calc(33.33% - 20px); /* Two columns on smaller screens */
  }
}

@media screen and (max-width: 700px) {
  body.single-venues .event-box {
    width: 100%; /* Full width on mobile screens */
  }
}

/* Style the right sidebar */
body.single-venues .bf-container .right-sidebar {
  background-color: #f2f2f2; /* Example background color for the sidebar */
  padding: 20px; /* Add padding to the sidebar content */
  margin-top: 20px;
  margin-bottom: 20px;
  height: fit-content;
}

/* Adjustments for responsiveness */
@media screen and (max-width: 768px) {
  body.single-venues .bf-container .details {
    grid-template-columns: 1fr; /* Stack main content and sidebar on top of each other */
  }

  body.single-venues .bf-container .right-sidebar {
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%; /* Make the sidebar full width on small screens */
  }
}

/* EVENTS ARCHIVE */

body.post-type-archive-events .zak-content .zak-container .zak-row {
  display: block;
}

/* Style the container for the venue cards */
body.post-type-archive-events .bf-container .events-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* Style each venue card */
body.post-type-archive-events .event-box {
  width: calc(33.33% - 20px); /* Three columns with some spacing in between */
  height: 400px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Clipping mask to display details and buttons on hover */
body.post-type-archive-events .clipping-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* Style the event title */
body.post-type-archive-events .event-box .clipping-mask .details .text h3.event {
  margin: 0;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Adjustments for responsiveness */
@media screen and (max-width: 978px) {
  body.post-type-archive-events .event-box {
    width: calc(50% - 20px); /* Two columns on smaller screens */
  }
}

@media screen and (max-width: 700px) {
  body.post-type-archive-events .event-box {
    width: 100%; /* Full width on mobile screens */
  }
}

/* SINGLE EVENT */

body.single-events .zak-content .zak-container .zak-row {
  padding-top: 0;
}

/* Style the container for the event details */
body.single-events .bf-container {
  display: flex;
  flex-direction: column; /* Stack title and details vertically */
  align-items: center; /* Center align title */
}

/* Style the title to be full width */
body.single-events .bf-container .text.project-title {
  width: 100%;
  padding: 20px;
  padding-bottom: 0;
  margin-bottom: 0;
}

body.single-events .bf-container .datetime {
  align-self: start;
  font-weight: 500;
  font-size: 20px;
  padding-left: 20px;
}

/* Style the details as a grid */
body.single-events .bf-container .details {
  display: grid;
  grid-template-columns: 3fr 1fr; /* Main content on the left, sidebar on the right */
  gap: 15px; /* Add spacing between main content and sidebar */
}

/* Style the main content area */
body.single-events .bf-container .main-content {
  padding: 20px; /* Add some spacing around the main content */
}

body.single-events .bf-container .main-content img {
  margin-bottom: 20px;
}

/* Style the container for the venue cards */
body.single-events .bf-container .venues-wrapper {
  width: 100%;
  margin-top: 30px;
}

body.single-events .bf-container .venues {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* Style each venue card */
body.single-events .venue-box {
  width: calc(50% - 20px); /* Three columns with some spacing in between */
  height: 400px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

body.single-events .venue-box .image {
  height: 100%;
  object-fit: contain;
  background-position: center;
}

/* Clipping mask to display details and buttons on hover */
body.single-events .clipping-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* Style the venue title */
body.single-events .venue-box .clipping-mask .details .text h4 {
  margin: 0;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Adjustments for responsiveness */
@media screen and (max-width: 978px) {
  body.single-events .venue-box {
    width: calc(33.33% - 20px); /* Two columns on smaller screens */
  }
}

@media screen and (max-width: 700px) {
  body.single-events .venue-box {
    width: 100%; /* Full width on mobile screens */
  }
}

/* Style the right sidebar */
body.single-events .bf-container .right-sidebar {
  background-color: #f2f2f2; /* Example background color for the sidebar */
  padding: 20px; /* Add padding to the sidebar content */
  margin-top: 20px;
  margin-bottom: 20px;
  height: fit-content;
}

/* Adjustments for responsiveness */
@media screen and (max-width: 768px) {
  body.single-events .bf-container .details {
    grid-template-columns: 1fr; /* Stack main content and sidebar on top of each other */
  }

  body.single-events .bf-container .right-sidebar {
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100%; /* Make the sidebar full width on small screens */
  }
}

/* NEWS ARCHIVE */

body.post-type-archive-news .zak-content .zak-container .zak-row {
  display: block;
  padding-top: 0;
}

body.post-type-archive-news .bf-container {
  padding-top: 50px;
  padding-bottom: 30px;
}

body.post-type-archive-news .bf-container .page-description {
  padding-top: 0;
  padding-bottom: 0;
}

/* Style the container for the venue cards */
body.post-type-archive-news .bf-container .news-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 30px;
}

/* Style each venue card */
body.post-type-archive-news .post {
  width: calc(33.33% - 20px); /* Three columns with some spacing in between */
  min-height: 450px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
}

/* Clipping mask to display details and buttons on hover */
body.post-type-archive-news .post-flex {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f1f9fb;
  color: grey;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  height: 100%;
}

body.post-type-archive-news .post .post-flex .post-thumbnail {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

body.post-type-archive-news .post .post-flex .post-details .title {
  margin: 0;
  margin-top: 15px;
  font-size: 18px;
  color: #3b7f90;
  text-decoration: none;
  font-weight: bold;
}

body.post-type-archive-news .post .post-flex .post-details .excerpt {
  margin: 0;
  margin-top: 10px;
  font-size: 14px;
  color: rgb(95, 95, 95);
  text-decoration: none;
}

body.post-type-archive-news .post .post-flex .post-details .read-more {
  margin: 0;
  margin-top: 10px;
  font-size: 14px;
  color: #3b7f90;
  text-decoration: none;
}

/* Adjustments for responsiveness */
@media screen and (max-width: 978px) {
  body.post-type-archive-news .post {
    width: calc(50% - 20px); /* Two columns on smaller screens */
  }
}

@media screen and (max-width: 700px) {
  body.post-type-archive-news .post {
    width: 100%; /* Full width on mobile screens */
  }
}

/* SINGLE NEWS */

body.single-news .zak-content .zak-container .zak-row {
  display: block;
  padding-top: 0;
}

body.single-news .bf-container .wrapper {
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.4fr;
  grid-template-columns: 1fr 0.4fr;
  gap: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
}

body.single-news .bf-container .wrapper .other-posts {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

body.single-news .bf-container .wrapper .other-posts .heading {
  font-weight: normal;
  font-size: 0.85em;
  margin-bottom: 10px;
  margin-top: 4px;
}

body.single-news .bf-container .wrapper .other-posts .other-post {
  background-color: #f1f9fb;
  display: block;
  padding: 16px;
  margin-bottom: 14px;
}

body.single-news .bf-container .wrapper .other-posts .other-post:hover {
  -webkit-box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
}

body.single-news .bf-container .wrapper .other-posts .other-post:hover .title {
  color: #0a0a0a;
}

body.single-news .bf-container .wrapper .other-posts .other-post .date {
  font-size: 11px;
  margin-bottom: 5px;
  display: block;
  color: #665e75;
}

body.single-news .bf-container .wrapper .other-posts .other-post .title {
  font-weight: normal;
  font-size: 15px;
  color: #0b031b;
  margin-bottom: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

body.single-news .bf-container .wrapper .post-content {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
  min-height: 50vh;
}

body.single-news .bf-container .wrapper .post-content a {
  color: #0eb0a1;
}

body.single-news .bf-container .wrapper .post-content img,
body.single-news .bf-container .wrapper .post-content figure {
  width: 100% !important;
}

body.single-news .bf-container .wrapper .post-content .meta {
  margin-bottom: 25px;
  font-size: 0.85em;
}

body.single-news .bf-container .wrapper .post-content .meta p {
  margin: 0;
}

body.single-news .bf-container .wrapper .post-content .meta .date {
  display: inline-block;
  width: 20%;
}

body.single-news .bf-container .wrapper .post-content .title {
  color: #3b7f90;
  font-size: 1.8em;
  font-weight: 500;
  margin-bottom: 10px;
}

body.single-news
  .bf-container
  .wrapper
  .post-content
  .the_champ_sharing_container
  .the_champ_linkedin_share {
  margin-left: 4px !important;
  position: relative;
}

@media (max-width: 950px) {
  body.single-news .bf-container .wrapper {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  body.single-news .bf-container .wrapper .other-posts .heading {
    font-size: 14px;
  }
}

@media (max-width: 500px) {
  body.single-news .bf-container .wrapper .post-content {
    min-height: 20vh;
  }
  body.single-news .bf-container .wrapper .post-content .meta .date {
    width: 100%;
  }
}

/* PAGINATION */

.pagination-wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
}

.pagination-wrapper .nav-links * {
  background-color: #f1f9fb;
  color: #665e75;
  min-width: 32px;
  padding: 2px 0;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

.pagination-wrapper .nav-links *:last-child {
  margin-right: 0;
}

.pagination-wrapper .nav-links *:hover {
  background-color: #fecd32;
}

.pagination-wrapper .nav-links *.prev,
.pagination-wrapper .nav-links *.next {
  padding: 2px 12px;
}

.pagination-wrapper .nav-links .current {
  background-color: #98d1cb;
  color: white;
}

.pagination-wrapper .nav-links .dots {
  background-color: transparent;
}

.pagination-wrapper .nav-links .dots:hover {
  background-color: transparent;
}

@media (max-width: 950px) {
  .pagination-wrapper .nav-links {
    text-align: center;
  }
}

/* BUFFER FRINGE TEMPLATE */

body.page-template-buffer-fringe .zak-content .zak-container .zak-row {
  display: block;
}

body.page-template-buffer-fringe .bf-container .page-title {
  padding-top: 30px;
}

body.page-template-buffer-fringe .bf-container .page-image {
  width: 100%;
  object-fit: cover;
}

body.page-template-buffer-fringe .bf-container .page-description {
  max-width: 100%;
}

/* Style the container for the venue cards */
body.page-template-buffer-fringe .bf-container .events-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

/* Style each venue card */
body.page-template-buffer-fringe .event-box {
  width: calc(33.33% - 20px); /* Three columns with some spacing in between */
  height: 400px;
  margin-bottom: 20px;
  position: relative;
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Clipping mask to display details and buttons on hover */
body.page-template-buffer-fringe .clipping-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* Style the event title */
body.page-template-buffer-fringe .event-box .clipping-mask .details .text h3.event {
  margin: 0;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Adjustments for responsiveness */
@media screen and (max-width: 978px) {
  body.page-template-buffer-fringe .bf-container .page-title {
    padding-top: 0;
  }

  body.page-template-buffer-fringe .event-box {
    width: calc(50% - 20px); /* Two columns on smaller screens */
  }
}

@media screen and (max-width: 700px) {
  body.page-template-buffer-fringe .event-box {
    width: 100%; /* Full width on mobile screens */
  }
}