@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

@font-face {
  font-family: 'Karrik';
  src: url('fonts/Karrik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karrik';
  src: url('fonts/Karrik-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #f0f0e6;
  --fg: #000000;
  --svg-fill: var(--fg);
  --fg-hover: #353535;
  --font-heading: 'Bricolage Grotesque', sans-serif;
  --font-secondary: 'Karrik', sans-serif;
  --weight-bold: 800;
}

.block-nosto {
  --bg: #f0f0e6;
}

.block-collapser {
  --fg: #000000;
  --splitter: var(--fg);
  --c1: var(--fg);
}

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

a {
  color: var(--fg);
}

a:hover,
a:focus {
  color: var(--fg-hover);
}

.page-title-wrapper>h1 {
  color: var(--fg);
}

blockquote {
  border-left-color: var(--fg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.ingress,
.page-title-size,
.greater,
.block-hero02>.txt>.content>.intro,
.block-collapser .collapser-items>li>.opener>.title,
body.page-kannatusjasenyys .block-content strong,
.block-slider .slider>.slide>.slide-contents>.play,
.events-list-grid>li>.wrap>a>.title,
.events-list .events-list-item .content .title,
#navigation-mobile .menu a {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
}

.esittely-blocks li .content .date,
.article-blocks>li>a>.excerpt,
.block-nosto-pysty>.page-wrapper>h1,
.block-nosto-event .meta,
.block-collapser .collapser-items>li>.opener>.text2,
.block-single-event .begin-mobile,
.block-single-event>.txt>.contents>.details>.begin,
.block-single-event>.txt>.contents>.details h2,
.events-list-grid>li>.wrap>a>.date,
.events-list .events-list-item .content .date,
.block-events-nosto03>.txt>.details>h1,
.article-listing .date,
.article-listing .tag {
  font-family: var(--font-secondary);
}

/*
* Buttons
*/
.block-newsletter>.txt form button,
#sub-navigation a,
#navigation-top a,
.scrolled #go-top {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.block-newsletter>.txt form button:hover,
.block-newsletter>.txt form button:focus,
#sub-navigation a:hover,
#navigation-top a:hover,
#sub-navigation a:focus,
#navigation-top a:focus,
.scrolled #go-top:hover,
.scrolled #go-top:focus {
  color: var(--bg);
  background: var(--fg-hover);
  border-color: var(--fg-hover);
}

.block-nosto .tickets a:hover,
.block-nosto .tickets a:focus {
  color: var(--bg) !important;
}

/*
* SVGs and images
*/
#sites>.menu>li>a>svg,
.socmed-follow li>a>svg,
#more-mobile path,
#more-sites>svg {
  fill: var(--svg-fill);
}

#sites>.menu>li>a>svg {
  fill: var(--svg-fill) !important;
}

#footer .logo svg,
.block-image-links .images>.image-link svg {
  fill: var(--fg);
}

/* .block-image-links .images>.image-link img {
  filter: grayscale(100%) brightness(0);
} */

/*
* Header
*/
#more-mobile>svg {
  color: var(--fg);
}

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

  #header-title>a>svg,
  #sites-mobile>a>svg {
    fill: var(--svg-fill) !important;
  }

  #sites-mobile,
  #navigation-mobile {
    background: var(--bg);
  }

  #navigation-mobile .menu a {
    color: var(--fg);
  }
}

.transparent-header #header {
  --svg-fill: var(--bg);
}

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

  .transparent-header.show-mobile-menu #header,
  .transparent-header.show-mobile-sites #header {
    --svg-fill: var(--fg);
  }
}

/* .transparent-header.show-mobile-menu #more-mobile,
.transparent-header.show-mobile-menu #more-sites,
.transparent-header.show-mobile-sites #more-mobile,
.transparent-header.show-mobile-sites #more-sites,
.transparent-header #sites-mobile {
  --svg-fill: var(--fg);
} */

.transparent-header #header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.transparent-header #navigation-top {
  position: absolute;
  left: 0;
  right: 0;
}

.transparent-header #navigation-mobile {
  top: 0 !important;
  padding-top: 120px;
}

.transparent-header #sites-mobile {
  top: 0;
}

/* .transparent-header #navigation-mobile {
  top: 0 !important;
} */
.transparent-header .menu a,
.transparent-header .menu-lang a {
  color: var(--svg-fill);
}

.transparent-header .menu-lang a:hover,
.transparent-header .menu-lang a:focus,
.transparent-header .menu a:hover,
.transparent-header .menu a:focus {
  color: var(--svg-fill);
  opacity: .75;
}

.transparent-header #sub-navigation a,
.transparent-header #navigation-top a {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--bg);
}

.transparent-header #sub-navigation a:hover,
.transparent-header #navigation-top a:hover,
.transparent-header #sub-navigation a:focus,
.transparent-header #navigation-top a:focus {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/*
* Footer
*/
#footer a,
a {
  color: var(--fg);
}

#footer a:hover,
#footer a:focus,
a:hover,
a:focus {
  color: var(--fg-hover);
}

/*
* Forms
*/
.block-newsletter>.txt form input.first-name,
.block-newsletter>.txt form input.last-name,
.block-newsletter>.txt form input[type="email"] {
  color: var(--fg);
  border-color: var(--fg);
}

.block-newsletter input::placeholder {
  color: var(--fg) !important;
}

/*
* Posts
*/
.next-prev-nav .title {
  color: currentColor !important;
}

.next-prev-nav a,
.article-list a {
  color: var(--fg);
}

.next-prev-nav a:hover,
.next-prev-nav a:focus,
.article-list a:hover,
.article-list a:focus {
  color: var(--fg-hover);
}

#pagenav>.page-numbers,
.more-link {
  color: var(--fg);
  border-color: var(--fg);
}

.more-link:hover,
.more-link:focus,
#pagenav>a.page-numbers:hover,
#pagenav>a.page-numbers:focus {
  color: var(--fg-hover);
  border-color: var(--fg-hover);
  background: none;
}

#pagenav:last-child {
  padding-bottom: 4rem !important;
}

.socmed-share li>a>span {
  color: var(--fg)
}

.article-listing a {
  color: var(--fg) !important;
}

.article-listing a:hover,
.article-listing a:focus {
  color: var(--fg-hover) !important;
}

/*
* Modals
*/
.dialog-container .dialog-content {
  background: var(--bg);
  color: var(--fg);
}

/*
* Accordion
*/
/* .block-collapser .collapser-items>li.show>.opener {
  color: var(--fg);
}

.block-collapser .collapser-items>li {
  border-top-color: var(--fg);
} */

/*
* Events
*/
.events-list-past>li>a {
  color: var(--fg);
}

.events-list-past>li>a:hover,
.events-list-past>li>a:focus {
  color: var(--fg-hover);
}

/*
* Hero 04
*/
.block-hero04 {
  --fg: var(--bg);
  box-sizing: border-box;
  min-height: 100vh;
  color: var(--bg);
  text-align: left;
  display: flex;
  align-items: flex-end;
  padding-bottom: 4rem;
  margin-bottom: 4rem;
}

.block-hero04 a:hover,
.block-hero04 a:focus {
  color: var(--bg);
  opacity: .75;
}

.block-hero04 .image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--fg);
  pointer-events: none;
}

.block-hero04 .image img {
  display: block;
  width: 100% !important;
  height: 100%;
  object-fit: cover;
}

.block-hero04 .image .mobile {
  display: none;
}

.block-hero04 .content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  width: 100%;
  max-width: 80rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.block-hero04 .column>*:first-child {
  margin-top: 0;
  padding-top: 0;
}

.block-hero04 .column>*:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.block-hero04 .column-left {
  max-width: 30rem;
}

.block-hero04 .column-right {
  max-width: 18rem;
}

.block-hero04 h1 {
  font-size: 4rem !important;
}

@media screen and (max-width: 992px) {
  .block-hero04 .image .desktop {
    display: none;
  }

  .block-hero04 .image .mobile {
    display: block;
  }

  .block-hero04 .content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .block-hero04 .column-left,
  .block-hero04 .column-right {
    max-width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .block-hero04 .content {
    font-size: 1.75rem;
  }

  .block-hero04 h1 {
    font-size: 3rem !important;
  }
}

/*
* Site 1
*/
/* body.site-1 #sites>.menu>li>a.site-1>svg {
  fill: var(--fg);
} */