@charset "UTF-8";
/*
Theme Name: de*beweging
Author: de*beweging website team
Version: 1.8
Requires at least: 6.2
Tested up to: 6.2
Requires PHP: 8.0
Description: custom theme voor de*beweging
*/
@font-face {
  font-family: "Noway";
  font-style: normal;
  font-weight: normal;
  src: url(assets/fonts/noway-regular-webfont.woff2) format("woff2"), url(assets/fonts/noway-regular-webfont.woff) format("woff");
}
@font-face {
  font-family: "Noway";
  font-style: italic;
  font-weight: normal;
  src: url(assets/fonts/noway-regular_italic-webfont.woff2) format("woff2"), url(assets/fonts/noway-regular_italic-webfont.woff) format("woff");
}
@font-face {
  font-family: "Noway";
  font-style: normal;
  font-weight: bold;
  src: url(assets/fonts/noway-bold-webfont.woff2) format("woff2"), url(assets/fonts/noway-bold-webfont.woff) format("woff");
}
html {
  font-family: "Noway", sans-serif;
}

h1, h2, h3, h4 {
  font-family: "Noway", sans-serif;
  font-weight: 900;
}

nav {
  font-weight: 900;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

:root {
  font-size: clamp(1rem, 2.3vw, 1.5rem);
  --font-size-inputs: 0.85rem;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

h1 {
  margin: 0.67em 0;
}

input,
select,
textarea {
  font-size: var(--font-size-inputs, 0.85rem);
}

label {
  --font-size-label: calc(var(--font-size-inputs, 0.85rem) - 0.15rem);
  font-size: var(--font-size-label);
}

html {
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
}

caption, figcaption, label, legend {
  line-height: 1.375;
}

pre {
  white-space: pre-wrap;
}

html {
  overflow-wrap: break-word;
}

:root:lang(en), :not(:lang(en)) > :lang(en) {
  quotes: "“" "”" "‘" "’";
} /* “ ” ‘ ’ */
html {
  font-optical-sizing: auto;
}

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

[hidden] {
  display: none;
}

source {
  display: none;
}

img, svg {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

picture {
  display: contents;
}

img, svg {
  height: auto;
}

:root {
  --padding-x: 1rem;
  --columns: 100%;
  --column-padding: 10vw;
}
@media (min-width: 1200px) {
  :root {
    --columns: var(--column-padding) 1fr var(--column-padding);
  }
}

body {
  margin: 0;
}

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header" "main" "footer";
  grid-template-columns: 100%;
}

main {
  grid-area: main;
}

header, footer {
  padding: 0;
}

.no-bullets {
  padding-inline-start: 0;
  list-style-type: none;
}
.no-bullets > li:before {
  content: "​";
  position: absolute;
}

textarea {
  overflow: auto;
  width: 100%;
  resize: vertical;
  height: var(--height-text-area, 8em);
}

input, textarea {
  padding: 0.2em 5px;
}

form {
  --form-item-spacing: 1rem;
}
form > ul {
  padding-inline-start: 0;
  list-style-type: none;
}
form > ul > li:before {
  content: "​";
  position: absolute;
}
form > ul > li > * {
  display: block;
}
form > ul > li + li > label {
  padding-top: var(--form-item-spacing);
}
form button {
  margin-top: var(--form-item-spacing);
}

.page-wrapper {
  flex-direction: column;
  display: flex;
}
.page-wrapper main {
  background: var(--background-color);
  flex-grow: 1;
}

.page-container {
  display: flow-root;
  padding: 0 var(--padding-x, 1rem);
  grid-template-columns: var(--columns, 100%);
  color: var(--text-color);
}
@media (min-width: 1200px) {
  .page-container {
    display: grid;
  }
}

.page-content {
  grid-column: 2;
  max-width: 70ch;
}

.full-width .page-content {
  max-width: 100%;
}

h1 {
  margin-top: 0;
}

.symmetrical {
  --columns: var(--column-padding) 1fr var(--column-padding);
}

.front-page {
  font-size: 1.5rem;
  grid-column: 2;
  text-align: center;
}

@media (min-width: 900px) {
  .front-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .front-page--title {
    grid-row: 1;
    grid-column: 1/-1;
  }
  .front-page--logo {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: center;
  }
  .front-page--content {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
}
.front-page--logo {
  width: min(100%, 400px);
  height: auto;
  margin: auto;
}

.front-page--title > h1 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: calc(7vw + 0rem);
  margin: 0 0 0.25em;
  line-height: 1;
  text-align: center;
}
.front-page--title > img {
  width: 100%;
}

.front-icon-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
  margin-bottom: 1em;
}
.front-icon-wrapper a:hover {
  color: white;
}

@media (min-width: 350px) {
  .front-icon-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 560px) {
  .front-icon-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.front-icon {
  aspect-ratio: 1;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.front-icon h3 {
  position: absolute;
  bottom: 0;
  left: 1em;
}

.front-icon-green {
  background-image: url("/assets/images/icon-green.png");
}

.front-icon-yellow {
  background-image: url("/assets/images/icon-yellow.png");
}

.front-icon-blue {
  background-image: url("/assets/images/icon-blue.png");
}

.timetable {
  background: var(--background-color);
  color: var(--text-color);
  --border-color: var(--accent-color);
  display: grid;
  --col-min-width: 20ch;
  overflow-x: scroll;
  grid-template-columns: repeat(var(--n-cols), minmax(var(--col-min-width), 1fr));
  --padding-x: 0.8rem;
  scroll-snap-type: x mandatory;
}
@media (min-width: 900px) {
  .timetable {
    scroll-snap-type: none;
  }
}
.timetable .day {
  text-align: center;
  --inner-border-width: 2px;
  --border-style: dashed;
  --border-width: 5px;
  scroll-snap-align: center;
  border-right: var(--inner-border-width) var(--border-style) var(--border-color);
}
@media (min-width: 1200px) {
  .timetable .day {
    --border-width: 10px;
  }
}
.timetable .day:first-child {
  border-left: var(--border-width) solid white;
}
.timetable .day:last-child {
  border-right: var(--border-width) solid white;
}
.timetable .day:last-child {
  border-right: 0;
}
.timetable .date {
  background-color: var(--accent-color, black);
  display: inline-block;
  color: white;
  padding: 0.3em;
  transform: rotate(-2deg);
  font-weight: bold;
  margin: var(--padding-x);
  text-align: center;
}
.timetable .date .date--monthday {
  font-size: 0.5em;
  display: block;
}
.timetable .events {
  text-align: left;
  padding-inline-start: 0;
  list-style-type: none;
  margin: 0;
}
.timetable .events > li:before {
  content: "​";
  position: absolute;
}
.timetable .event {
  font-size: 0.8rem;
  margin: 0;
  padding: var(--padding-x) var(--padding-x) 0;
  border-width: var(--inner-border-width) 0 0 0;
  border-style: var(--border-style);
  border-color: var(--border-color);
}
.timetable .event:last-child {
  border-bottom-width: var(--inner-border-width);
}
.timetable .event .time {
  background-color: var(--accent-color, black);
  display: inline-block;
  color: white;
  padding: 0.3em;
  transform: rotate(-2deg);
  font-weight: bold;
  margin: 0;
}
.timetable .event .title {
  font-size: 1.7em;
  margin: 0.4em 0 0.2em;
}

.timetable--single-event {
  background-color: var(--orange);
  --accent-color: var(--orange);
  --text-color: white;
  background-color: var(--accent-color, black);
}
.timetable--single-event .day {
  background-color: white;
  color: black;
  border-radius: var(--border-radius);
  margin: var(--border-width);
  margin-left: 0;
  border-right: 0;
}
.timetable--single-event .day:first-child {
  margin-left: var(--border-width);
  border-left: 0;
}
.timetable--single-event .day:last-child {
  border-right: 0;
}
.timetable--single-event .event {
  padding: 0;
  border-width: 0;
}
.timetable--single-event .event:last-child {
  border-bottom-width: 0;
}
.timetable--single-event .event h3, .timetable--single-event .event p {
  padding: 0 var(--padding-x);
}
.timetable--single-event .event .title {
  text-align: center;
  margin: 0.4em 0;
}
.timetable--single-event img {
  max-height: 375px;
  object-fit: cover;
  width: 100%;
}

:root {
  --pink: #EF5BA1;
  --yellow: #FFCB05;
  --green: #A6CE39;
  --blue: #00A0D5;
  --brown: #360000;
}

.text-blend-background {
  color: var(--background-color);
  filter: brightness(50%);
}

.white-on-orange {
  background-color: var(--accent-color, black);
  display: inline-block;
  color: white;
  padding: 0.3em;
  transform: rotate(-2deg);
  font-weight: bold;
  margin: 0.2em 0;
}

.theme-pink {
  --background-color: var(--pink);
  --accent-color: var(--yellow);
  --text-color: var(--brown);
  --accent-text-color: var(--brown);
}

.theme-yellow {
  --background-color: var(--yellow);
  --accent-color: var(--blue);
  --text-color: var(--brown);
  --accent-text-color: white;
}

.theme-green {
  --background-color: var(--green);
  --accent-color: var(--pink);
  --text-color: var(--brown);
  --accent-text-color: var(--brown);
}

.theme-blue {
  --background-color: var(--blue);
  --accent-color: var(--yellow);
  --text-color: var(--brown);
  --accent-text-color: var(--brown);
}

:root {
  --background-color: white;
  --text-color: black;
  --accent-color: var(--orange);
  --accent-text-color: black;
  --border-color: var(--accent-color);
  --border-radius: 6px;
}

body {
  background: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--text-color, black);
  text-decoration-thickness: 0.1em;
}
a:hover, a:focus {
  color: var(--accent-color);
}

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

button {
  font-weight: bold;
  padding: 0.5em 1em;
  background: var(--background-color);
  color: var(--text-color);
  border-color: var(--accent-color);
  border-width: var(--border-width, 0.3em);
}

.icon-svg {
  display: inline-block;
  background-color: black;
  background-color: var(--icon-color, var(--text-color, black));
  --icon-size: 1em;
  width: var(--icon-size);
  height: var(--icon-size);
  -webkit-mask-image: var(--svg-icon-url, url(""));
  mask-image: var(--svg-icon-url, url(""));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.icon-wrap:is(:hover, :focus, :active) > .icon-svg {
  background-color: var(--accent-color);
}

header {
  z-index: 1;
}

@media (min-width: 1200px) {
  header {
    min-height: 155px;
  }
}

header {
  border-bottom: var(--border-width) solid var(--accent-color);
}

header {
  background: var(--background-color);
  display: grid;
  grid-template-columns: auto 1fr;
}
@media (min-width: 1200px) {
  header {
    grid-template-columns: var(--columns);
  }
}
header .header-container {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  padding: 0 var(--padding-x, 1rem);
  justify-content: space-between;
}
header .header-container a {
  color: white;
  align-self: center;
}
header .header-container a.logo-link {
  display: flex;
  height: 2em;
  align-items: center;
  font-size: 1.8em;
  font-weight: bold;
  text-decoration: none;
}
header .header-container a.logo-link div {
  line-height: 1em;
  display: inline-block;
  border-bottom: 0.1em solid white;
}
header .header-container > nav, header .header-container > .header-links {
  align-self: center;
  justify-content: end;
}
header .header-container > nav ul a, header .header-container > .header-links ul a {
  text-decoration: none;
  padding: 6px 0.5em 0;
}
header .header-container > nav ul a:hover, header .header-container > .header-links ul a:hover {
  background: var(--accent-color);
  color: var(--accent-text-color);
}
header .header-container > nav ul li:last-child a, header .header-container > .header-links ul li:last-child a {
  background: var(--accent-color);
  color: var(--accent-text-color);
}
header .header-container > nav ul li:last-child a:hover, header .header-container > .header-links ul li:last-child a:hover {
  background: var(--brown);
  color: var(--accent-color);
}

footer {
  background: var(--brown);
  --text-color: var(--background-color);
  display: grid;
  grid-template-columns: auto 1fr;
}
@media (min-width: 1200px) {
  footer {
    grid-template-columns: var(--columns);
  }
}
footer > .footer-container {
  grid-column: 2;
  padding: 0 var(--padding-x, 1rem);
  align-items: flex-start;
  display: flex;
  flex-flow: wrap;
}
footer .footer-submenu {
  padding: 5px 5px;
  line-height: 1.2;
  width: 50%;
}
@media (min-width: 600px) {
  footer .footer-submenu {
    padding: 20px 20px;
    width: 20%;
  }
}
footer .footer-submenu li {
  display: block;
  margin-bottom: 0.5em;
}
footer .footer-submenu .social-media-links li {
  display: inline-block;
}
footer .footer-submenu a {
  text-decoration: none;
  font-size: 0.8em;
}
footer .footer-submenu h3 {
  color: var(--text-color);
}

nav > ul {
  padding-inline-start: 0;
  list-style-type: none;
}
nav > ul > li:before {
  content: "​";
  position: absolute;
}
nav > ul > li {
  line-height: 1;
  display: inline-block;
}
nav > ul > li:not(:last-child) {
  margin-right: 1em;
}

.header-links {
  display: flex;
  align-items: start;
}

.button, .button--orange {
  border-radius: var(--border-radius);
  padding: 0.5rem 0;
  text-align: center;
  width: 100%;
  display: inline-block;
  text-decoration: none;
  --button-color: black;
  background: var(--button-color);
  border: 1px solid var(--button-color);
}
.button:hover, .button--orange:hover, .button:focus, .button--orange:focus {
  color: var(--text-color);
  border: 1px solid var(--text-color);
}
.button--orange {
  --button-color: var(--orange);
}

.ally-wrapper {
  display: flex;
  flex-flow: wrap;
}

.ally-item {
  padding: 10px;
  text-align: center;
  flex: 0 0 calc(25% - 20px);
}
.ally-item .ally-icon {
  aspect-ratio: 1/1;
  background: white;
  position: relative;
}
.ally-item .ally-icon img {
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 900px) {
  .ally-item {
    flex: 0 0 calc(50% - 20px);
  }
}
/* Action Network Form */
.action-network-wrapper {
  display: flex;
  flex-direction: column;
}
@media (min-width: 600px) {
  .action-network-wrapper {
    flex-direction: row;
  }
}

.action-network-content {
  padding-right: 2em;
}

#can_embed_form {
  background: var(--brown);
  color: white;
  padding: 1em;
  margin-bottom: 2em;
  /*
  * Code section that styles form components
  *
  * Unfortunately the html that comes out of actionnetwork is not
  * customizable at all. Hence a lot of css customization here! :(
  */
  /*
  * Code section for the thank you content that shows when a user submits the form
  * The content of this text is configured from Action Network
  */
}
#can_embed_form #logo_wrap {
  display: none;
}
#can_embed_form #can_embed_form_inner > h2,
#can_embed_form #can_embed_form_inner > h4 {
  display: none;
}
#can_embed_form #action_info {
  display: none;
}
#can_embed_form .country_drop_wrap, #can_embed_form .international_link-wrap {
  display: none !important;
}
#can_embed_form form #d_sharing {
  display: none;
}
#can_embed_form form {
  /*
  * Code section for generic styles
  */
  width: auto !important;
  /*
  * Code section for custom styling of form elements
  */
}
#can_embed_form form #form_col1,
#can_embed_form form #form_col2 {
  float: none !important;
  width: auto !important;
}
#can_embed_form form ul {
  padding: 0;
  margin: 0;
}
#can_embed_form form li {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
}
#can_embed_form form input,
#can_embed_form form select,
#can_embed_form form textarea {
  font-size: 18px;
  margin-bottom: 0.5rem;
  width: 100%;
}
#can_embed_form form input.error_input:focus,
#can_embed_form form select.error_input:focus,
#can_embed_form form textarea.error_input:focus {
  box-shadow: none;
}
#can_embed_form form .floatlabel-wrapper {
  margin-bottom: 0.5rem;
}
#can_embed_form form label.control-label, #can_embed_form form label.floatlabel-label {
  display: block;
  font-size: 1rem;
  text-transform: none;
  margin-bottom: 0.5rem;
  letter-spacing: 0px;
}
#can_embed_form form #d_sharing li label,
#can_embed_form form .controls.check_radio_field label {
  font-size: 0.8em;
}
#can_embed_form form #d_sharing li label input,
#can_embed_form form .controls.check_radio_field label input {
  width: 15px;
  height: 15px;
}
#can_embed_form form .checkbox {
  text-wrap: nowrap;
  cursor: pointer;
}
#can_embed_form form select {
  font-size: 1rem;
}
#can_embed_form form .select2-container {
  margin-bottom: 0.5rem;
}
#can_embed_form form .select2-chosen {
  font-size: 1rem;
}
#can_embed_form form input[type=submit] {
  display: block;
  width: 100%;
  background: var(--accent-color);
  border: none;
  color: var(--accent-text-color);
  padding: 1em 1em 0.5em;
  text-transform: lowercase;
  font-weight: bold;
  cursor: pointer;
  margin-top: 1em;
}
#can_embed_form form input[type=submit]:hover {
  background: var(--background-color);
  color: white;
}
#can_embed_form > #can_thank_you h1 {
  font-size: 1.2em;
  margin: 0;
}
#can_embed_form > #can_thank_you #action_thank_you_text > p {
  font-size: 1em;
}
#can_embed_form .ajax-loading {
  display: none;
}

.faq-items {
  list-style: none;
  padding-left: 0;
}
.faq-items .faq-question h3 {
  background: var(--brown);
  cursor: pointer;
  color: white;
  padding: 1em 1em 0.5em;
  margin: 0.3em;
}
.faq-items .faq-question h3 .icon-svg {
  --icon-color: white;
  float: right;
}
.faq-items .faq-question h3 .chevron-down {
  --svg-icon-url: url("/assets/images/icon-chevron-down.svg") ;
}
.faq-items .faq-question h3 .chevron-up {
  display: none;
  --svg-icon-url: url("/assets/images/icon-chevron-up.svg") ;
}
.faq-items .faq-question .faq-answer {
  overflow: hidden;
  padding: 0 1em;
  transition: height 0.2s;
}
.faq-items .faq-question .faq-answer div {
  padding-top: 1em;
  padding-bottom: 1em;
}
.faq-items .faq-question .faq-answer div p:first-child {
  margin-top: 0;
}
.faq-items .faq-question .faq-answer div p:last-child {
  margin-bottom: 0;
}
.faq-items .faq-question[aria-expanded=true] .chevron-down {
  display: none;
}
.faq-items .faq-question[aria-expanded=true] .chevron-up {
  display: block;
}

/*# sourceMappingURL=style.css.map */