/* Blocks */
.headerOff {
    text-align: center;
    padding: var(--row-gap) 0 0;
    align-content: center;
    justify-items: center;
    margin-bottom: 10vh
}
.headerOff .logo {
        width: 500px;
        max-width: 40vw;
        margin-top: 3vh;
    }
.headerOff-title {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.headerOff-subtitle {
    font: var(--font-normal-bold);
    max-width: 25em;
    margin-bottom: auto
}
@media (min-width: 900px) {
.headerOff-subtitle {
      margin-top: -65px
}
    }
@media (min-width: 1100px) {
.headerOff-subtitle {
      margin-top: -75px
}
    }
.headerOff-video {
    background: var(--color-white);
}
.section {
    padding: var(--row-gap) 0
}
.section.is-center {
      text-align: center;
    }
.section-header h2 {
        font: var(--font-big-bold);
        letter-spacing: var(--font-spacing-big);
    }
.section-header,
.section-text,
.section-intro {
    max-width: 30em;
    margin: auto;
}
.section-text h3 {
        margin: 2em 0 .5em;
        font: var(--font-medium-bold);
    }
.participate {
  background: var(--color-primary-light);
  padding: var(--column-gap);
  border-radius: 12px;
}
.participate-title {
    font: var(--font-big-bold);
    letter-spacing: var(--font-spacing-big);
    text-align: center;
}
.participate-intro {
    width: 100%;
    max-width: 41em;
    margin: auto;
}
.participate-footer {
    text-align: center;
    margin: 2em 0;
}
.participate-text {
    -moz-column-count: 2;
         column-count: 2;
    grid-column-gap: calc(var(--column-gap) * 2);
    -moz-column-gap: calc(var(--column-gap) * 2);
         column-gap: calc(var(--column-gap) * 2);
    -moz-column-rule: solid 1px var(--color-primary);
         column-rule: solid 1px var(--color-primary);
    max-width: 41em;
    margin: var(--row-gap) auto
}
.participate-text h3 {
        font: var(--font-medium-bold);
        letter-spacing: var(--font-spacing-medium);
        page-break-inside: avoid;
        -moz-column-break-inside: avoid;
             break-inside: avoid;
        margin-top: 0;
        text-align: center;
    }
.participate-text p {
        page-break-inside: avoid;
        -moz-column-break-inside: avoid;
             break-inside: avoid;
    }
@media (max-width: 800px) {
.participate-text {
        -moz-column-count: 1;
             column-count: 1;
        max-width: 24em
}

        .participate-text h3 {
            text-align: left;
            margin-top: 2em;
        }
    }
.sessions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 400px));
    grid-column-gap: var(--column-gap);
    grid-row-gap: calc(var(--row-gap) * 2);
    padding: var(--row-gap) var(--column-gap);
    justify-content: center
}
@media (min-width: 750px) {
.sessions {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
    }
.session {
  display: grid;
  grid-template-areas: 'video' 'header' 'footer'
}
.session[hidden] {
    display: none;
  }
.session-header {
  grid-area: header;
}
.session-footer {
  grid-area: footer;
  margin-top: 10px
}
.session-footer .button {
    display: block;
    text-align: center;
  }
.session-title {
  font: var(--font-normal-bold);
  line-height: 1.3;
  margin-bottom: 10px;
}
.session-tags {
  font: var(--font-small);
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline
}
.session-tags > li {
    display: inline-block;
    padding: .2em .5em;
    margin: 0 .5em .5em 0;
    background: var(--color-sky);
    border-radius: var(--radius);
  }
.session-stars {
  font: var(--font-normal-bold);
  display: inline-block;
  vertical-align: middle;
  color: var(--color-primary-dark);
}
.session-video {
  grid-area: video
}
.session-video iframe {
    max-width: 100%;
    display: block;
  }
.filter {
  padding: var(--row-gap) var(--column-gap);
  max-width: 36em;
  margin: auto;
}
.filter-label {
  font: var(--font-normal-bold);
  display: block;
  margin: .2em 0;
}
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: .5em
}
.filter-tags label {
    cursor: pointer;
    margin: 0 .5em .5em 0;
    font: var(--font-small-bold);
    position: relative;
  }
.filter-tags input {
    position: absolute;
    top: 50%;
    left: .5em;
    transform: translateY(-50%);
    cursor: pointer;
  }
.filter-tags input + span {
    padding: .2em .5em .2em 2em;
    border: solid 1px var(--color-primary);
    border-radius: var(--radius);
    color: var(--color-primary-dark);
  }
.filter-tags input:checked + span {
    background: var(--color-primary);
    color: black;
  }
.filter-tags input:focus {
    outline: 0;
    box-shadow: none;
  }
.filter-tags input:focus + span,
  .filter-tags input:hover + span {
    box-shadow: 0 0 1px 2px var(--color-primary-light);
  }
.filter-title input {
    border: solid 1px var(--color-primary);
    border-radius: var(--radius);
    font: var(--font-normal);
    padding: .5em;
    width: 100%
  }
.filter-title input:focus {
      outline: 0;
      box-shadow: 0 0 1px 2px var(--color-primary-light);
    }
.filter-title input::-moz-placeholder {
      color: var(--color-smoke);
    }
.filter-title input:-ms-input-placeholder {
      color: var(--color-smoke);
    }
.filter-title input::-ms-input-placeholder {
      color: var(--color-smoke);
    }
.filter-title input::placeholder {
      color: var(--color-smoke);
    }
.filter-submit {
  opacity: 0;
}
:root {
    --color-primary: #a697ce; /*hsl(256, 36%, 70%);*/
    --color-primary-light: hsl(256, 36%, 90%);
    --color-primary-dark: hsl(256, 36%, 35%);
}
html {
    background-color: var(--color-white);
}
body {
    color: var(--color-dark);
}
/* Overrides */
.navbar {
    background: var(--color-white);
    box-shadow: 0 2px 10px rgba(166,151,206,0.26667);
}
@media (min-width: 950px) {
.navbar-menu a {
        color: var(--color-dark)
}
    }
.faq,
.footer {
    background-color: var(--color-primary-dark);
    color: var(--color-primary-light);
}
.button {
    background: var(--color-primary-dark);
    color: var(--color-white)
}
.button:hover {
        background: var(--color-dark);
    }
.button.is-secondary {
    color: var(--color-dark);
    background: var(--color-primary-light);
    box-shadow: 0 1px 1px var(--color-primary)
}
.button.is-secondary:hover:not(:disabled) {
        background-color: var(--color-primary);
        box-shadow: 0 1px 1px var(--color-primary-dark) !important;
    }
.button.is-secondary:hover:not(:disabled),
.button:hover:not(:disabled) {
    box-shadow: 0 1px 3px var(--color-primary);
}