@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Colors */
/* Other constants */
.dump {
  font-family: "Quicksand", sans-serif;
  font-family: "Roboto", sans-serif;
  font-family: "Roboto Slab", serif;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
@keyframes bot_float {
  50% {
    margin-bottom: 20px;
  }
  100% {
    margin-bottom: 0;
  }
}
@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.3);
  }
  60% {
    transform: scale(1.15);
  }
}
@keyframes shakeidle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  51% {
    transform: rotate(-3deg);
  }
  52% {
    transform: rotate(3deg);
  }
  53% {
    transform: rotate(-3deg);
  }
  54% {
    transform: rotate(3deg);
  }
  55% {
    transform: rotate(-3deg);
  }
  56% {
    transform: rotate(3deg);
  }
  57% {
    transform: rotate(-3deg);
  }
  58% {
    transform: rotate(3deg);
  }
  59% {
    transform: rotate(-3deg);
  }
  60% {
    transform: rotate(3deg);
  }
  61% {
    transform: rotate(-3deg);
  }
  62% {
    transform: rotate(3deg);
  }
  63% {
    transform: rotate(-3deg);
  }
  64% {
    transform: rotate(3deg);
  }
  65% {
    transform: rotate(-3deg);
  }
  66% {
    transform: rotate(3deg);
  }
  67% {
    transform: rotate(-3deg);
  }
  68% {
    transform: rotate(3deg);
  }
  69% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  71% {
    transform: none;
  }
  100% {
    transform: none;
  }
}
@keyframes shake {
  0% {
    transform: rotate(-3deg);
  }
  10% {
    transform: rotate(3deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(3deg);
  }
  40% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
  60% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  80% {
    transform: rotate(-3deg);
  }
  90% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(-3deg);
  }
}
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                   not supported by any browser */
}

.notransition {
  transition-duration: 1ms !important;
}

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.no-animations * {
  transition: none !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  background: #0b0c10;
  color: #feffff;
  position: relative;
  min-height: 100vh;
}
body:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url(/img/pattern3.webp) repeat center top;
  background-size: 700px;
  opacity: 0;
  filter: grayscale(100%);
}
.no-webp body:before {
  background: url(/img/pattern3.png) repeat center top;
  background-size: 700px;
}

body.admin {
  background: #0b0c10;
}
body.admin:before {
  background: url(/img/pattern3.webp) repeat center top;
  background-size: 700px;
}
.no-webp body.admin:before {
  background: url(/img/pattern3.png) repeat center top;
  background-size: 700px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Slab", sans-serif;
  line-height: normal;
}

h1 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2.6em;
}
h1.shadowed {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 0px 8px rgba(0, 0, 0, 0.24);
}
h1.white {
  color: #fff !important;
}

h2 {
  font-size: 2.4em;
}

h3 {
  font-size: 1.8em;
}

img {
  outline: 1px solid transparent;
}

strong {
  font-weight: 700;
}

u {
  text-decoration: underline;
}

i {
  font-style: italic;
}

a {
  color: #1f2833;
}
a:hover {
  color: #1c242e;
}

a, a:hover, a:active, a:focus {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(193, 193, 193, 0.2);
}

.fa.fa-facebook {
  color: #3b5998;
}

.fa.fa-twitter {
  color: #4099ff;
}

.stick-right {
  float: right;
}

.clear {
  clear: both;
}

.fancybox {
  cursor: pointer;
}

.btn {
  cursor: pointer;
}
.btn.btn-tfk {
  display: block;
  padding: 10px 13px;
  font-family: "Quicksand", sans-serif;
  font-weight: 900 !important;
  font-size: 18px;
  border: 2px solid transparent;
  position: relative;
  z-index: 1;
  text-shadow: none;
  text-decoration: none !important;
}
.btn.btn-tfk span {
  position: relative;
  z-index: 3;
}
.btn.btn-tfk:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.btn.btn-tfk:hover:before, .btn.btn-tfk.active:before {
  opacity: 1;
}
.btn.btn-tfk.btn-primary {
  border-color: #66fcf1;
  color: #0b0c10;
  background-color: #66fcf1;
}
.btn.btn-tfk.btn-primary:before {
  background-color: #85fdf4;
}
.btn.btn-tfk.btn-light {
  border-color: #45a29e;
  color: #0b0c10;
  background-color: #66fcf1;
}
.btn.btn-tfk.btn-light:hover, .btn.btn-tfk.btn-light.active {
  color: #0b0c10;
}
.btn.btn-tfk.btn-light:before {
  background-color: #45a29e;
}
.btn.btn-tfk.btn-transparent {
  border-color: #c5c6c7;
  color: #c5c6c7;
  background: transparent;
}
.btn.btn-tfk.btn-transparent:hover, .btn.btn-tfk.btn-transparent.active {
  color: #0b0c10;
}
.btn.btn-tfk.btn-transparent:before {
  background-color: #c5c6c7;
}
.btn.btn-tfk.btn-primary-transparent {
  border-color: #66fcf1;
  color: #feffff;
  background: transparent;
}
.btn.btn-tfk.btn-primary-transparent:hover, .btn.btn-tfk.btn-primary-transparent.active {
  color: #0b0c10;
}
.btn.btn-tfk.btn-primary-transparent:before {
  background-color: #66fcf1;
}
.btn.btn-tfk.btn-white {
  border-color: #c5c6c7;
  background-color: #c5c6c7;
  color: #0b0c10;
  opacity: 0.75;
}
.btn.btn-tfk.btn-white:before {
  background-color: #c5c6c7;
}
.btn:disabled, .btn:disabled:hover, .btn:disabled.active, .btn:disabled:before {
  cursor: not-allowed !important;
  color: #feffff !important;
  background-color: #7b7b7b !important;
  border-color: #7b7b7b !important;
}

.formItem input:focus, .formItem textarea:focus {
  outline: none;
}
.formItem input:focus::-webkit-input-placeholder, .formItem textarea:focus::-webkit-input-placeholder {
  color: transparent;
}
.formItem input:focus::-moz-placeholder, .formItem textarea:focus::-moz-placeholder {
  color: transparent;
}
.formItem input:focus::-ms-placeholder, .formItem textarea:focus::-ms-placeholder {
  color: transparent;
}
.formItem input:focus::placeholder, .formItem textarea:focus::placeholder {
  color: transparent;
}

.formItem .input-placeholder {
  position: absolute;
  z-index: 10;
  left: -17px;
  top: 5px;
  pointer-events: none;
  background-color: #b1b2b3;
  color: #fff;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 14px;
  opacity: 0;
  transform: translateX(-80%);
  transform-origin: center bottom;
  transition: opacity 0.2s ease, transform 0.5s ease;
}
.formItem .input-placeholder.visible {
  opacity: 1;
  transform: translateX(-100%);
}
.formItem .input-placeholder:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  background-color: #b1b2b3;
  z-index: -1;
  right: -6px;
  top: 5px;
}

.wrapper {
  position: relative;
}
.wrapper:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  z-index: 800;
  transition: opacity 500ms ease;
  opacity: 0;
  pointer-events: none;
}
.wrapper.disabled:before {
  opacity: 0.7;
  pointer-events: all;
}

.container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-size: 900px;
  z-index: 1;
}
.container .inner {
  max-width: 1200px;
  margin: 10px auto;
  padding: 20px;
  z-index: 3;
  position: relative;
}
.container .inner h1.title {
  text-align: center;
  margin-bottom: 60px;
  font-size: 4.2em;
  font-weight: 700;
  text-transform: none;
  color: #66fcf1;
}
.container .inner h2.sub-title {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 60px;
  font-size: 2.1em;
  font-weight: 700;
  text-transform: none;
  color: #feffff;
}
.container .inner .content {
  text-align: left;
}
.container .inner .content.shadowed {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 0px 8px rgba(0, 0, 0, 0.24);
}
.container .inner .content p {
  margin-bottom: 3vh;
}
.container .inner .content p.no-margin {
  margin: 0 !important;
}
.container .inner .content .large-text {
  font-size: 1.6em;
  line-height: 1.6em;
}
.container .inner .content .medium-text {
  font-size: 1.4em;
  line-height: 1.4em;
}
.container .inner .content .small-text {
  font-size: 1.2em;
  line-height: 1.2em;
}
.container .inner .content .white {
  color: #fff;
}
.container .inner .content .left {
  text-align: left;
}
.container .inner .content .center {
  text-align: center;
}
.container .inner .content .right {
  text-align: right;
}
.container .inner .content b, .container .inner .content strong {
  font-weight: 600;
}
.container .inner .content ul, .container .inner .content ol {
  padding: 10px 20px;
}
.container .inner .content ul li, .container .inner .content ol li {
  margin: 5px;
}
.container .inner .content ol {
  list-style-type: decimal;
}
.container .inner .content ul {
  list-style-type: disc;
}
.container .inner .content a {
  text-decoration: underline;
}
.container .inner .content a:hover, .container .inner .content a:active, .container .inner .content a:focus {
  text-decoration: none;
}
.container .dark-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  background-color: black;
  opacity: 0.6;
}
.container .video-background {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
}
.container .image-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 2;
}
.container .intro-down-arrow {
  position: absolute;
  bottom: -10px;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 3em;
  z-index: 4;
}
.container .intro-down-arrow:before {
  content: "SCROLL";
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
  position: absolute;
  font-size: 0.25em;
}
.fp-responsive .container .intro-down-arrow, .container .intro-down-arrow.animated {
  transition: all 500ms ease 1500ms;
  transform: translateX(-50%) translateY(-100%);
  opacity: 1;
  animation: bot_float 4000ms ease infinite;
}
.fp-responsive .container .intro-down-arrow:hover, .container .intro-down-arrow.animated:hover {
  color: #fff;
}

.container .intro-down-arrow span {
  cursor: pointer;
}
.container.dark-background .inner p, .container.dark-background .inner h1.title, .container.dark-background .inner h2.sub-title {
  color: #fff;
}
.container.full-height {
  height: 85vh;
}
.container.full-height .inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.modal {
  width: 700px;
  max-width: 100%;
  display: none;
  line-height: normal;
  font-size: 1.5em;
}
.modal h1 {
  font-size: 3.1em;
  font-weight: 600;
}
.modal audio {
  margin: 20px 0;
}

body.admin .container .inner h1.title {
  text-align: left;
}
body.admin .container .inner .content {
  text-align: left;
  color: #feffff;
}

.top-bar {
  height: 67px;
  width: 100%;
}

.navigation-container {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  z-index: 900;
  background: linear-gradient(45deg, #0b0c10, #1f2833);
  transition: background-color 250ms ease;
  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.16);
}
.navigation-container > .inner {
  height: 67px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 800;
  padding: 0;
}
.navigation-container .logo {
  transition: opacity 350ms ease;
}
.navigation-container .logo a {
  background: transparent url("/img/icons/001-check-mark.png") no-repeat center center;
  filter: brightness(1.7) saturate(11) hue-rotate(275deg);
  background-size: 100%;
  width: 35px;
  height: 35px;
  display: block;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
  outline: 1px solid transparent;
  transform: translateX(-12px);
  padding: 0px;
  transition: transform 500ms ease, background-size 500ms ease;
}
.navigation-container .logo-text {
  transition: opacity 350ms ease;
  margin-left: 20px;
}
.navigation-container .logo-text a {
  display: block;
  position: relative;
  margin: 0 15px 0 0;
  font-family: "Roboto Slab", sans-serif;
  font-weight: 400;
  font-size: 42px;
  text-transform: lowercase;
  color: #feffff;
  transition: color 300ms ease;
}
.navigation-container .logo-text a:hover {
  color: #e5e6e6;
}
.navigation-container .menu-buttons {
  margin: 0 20px 0 auto;
  font-size: 42px;
  position: relative;
  border-radius: 100%;
  color: #0b0c10;
  background-color: #c5c6c7;
  pointer-events: all !important;
  transition: color 100ms ease;
  width: 58px;
  height: 58px;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2));
}
.navigation-container .menu-buttons:before {
  content: "";
  background-color: #c5c6c7;
  transform-origin: center;
  will-change: opacity, transform;
  position: absolute;
  width: 58px;
  height: 58px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  border-radius: 100%;
  opacity: 0;
  transform: scale(1);
  transition: opacity 350ms ease 500ms, transform 500ms cubic-bezier(0.01, 0.83, 0.32, 1);
}
.navigation-container .menu-buttons i {
  cursor: pointer;
  margin: 8px;
  height: 34px;
  width: 34px;
  text-align: center;
  position: relative;
  z-index: 950;
  font-size: 34px;
  padding: 4px;
}
.navigation-container .menu-buttons .menu-button-close {
  display: none;
}
.navigation-container .navigation {
  position: fixed;
  top: 120px;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 250ms ease 50ms;
}
.navigation-container .navigation > .inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 40px;
}
.navigation-container .navigation ul {
  display: inline-block;
  position: relative;
  z-index: 1200;
  margin: 0;
  padding: 0;
  font-size: 0;
}
.navigation-container .navigation ul > li {
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  font-size: 28px;
  display: block;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
  line-height: 1.2em;
  color: #1f2833;
}
.navigation-container .navigation ul > li.big {
  font-family: "Roboto Slab", sans-serif;
  font-size: 52px;
  margin-bottom: 10px;
}
.navigation-container .navigation ul > li.big a {
  color: #0b0c10 !important;
}
.navigation-container .navigation ul > li .logo-outer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.navigation-container .navigation ul > li .nav-logo {
  background: transparent url("/img/icons/001-check-mark.png") no-repeat center center;
  background-size: 100%;
  width: 60px;
  height: 60px;
  display: block;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}
.navigation-container .navigation ul > li.spacer {
  margin-bottom: 30px;
}
.navigation-container .navigation ul > li a {
  display: flex;
  align-items: baseline;
  gap: 15px;
  color: #333;
  position: relative;
  z-index: 10;
}
.navigation-container .navigation ul > li a i {
  width: 30px;
  text-align: center;
}
.navigation-container .navigation ul > li a:hover {
  color: #292929;
}

body.nav-open .navigation-container .navigation {
  opacity: 1;
  pointer-events: all;
  transition: opacity 250ms ease 250ms;
}
body.nav-open .navigation-container .menu-buttons {
  color: #333 !important;
}
body.nav-open .navigation-container .menu-buttons:before {
  opacity: 1 !important;
  transform: scale(200);
  transition: transform 500ms cubic-bezier(0.83, 0.01, 1, 0.32);
}
body.nav-open .navigation-container .menu-buttons .menu-button-open {
  display: none;
}
body.nav-open .navigation-container .menu-buttons .menu-button-close {
  display: block;
}

.wrapper {
  position: relative;
  opacity: 1;
}

body.loaded .wrapper {
  opacity: 1;
}

.preloader {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 1;
  background-color: #1e1e1e;
  transition: opacity 300ms ease;
}
.preloader .preloader-inner {
  position: absolute;
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: url("/img/preloader_inner_white.png") no-repeat center 26px;
  background-size: 171px;
  z-index: 1200;
  top: calc(50% - 100px);
  opacity: 1;
  transition: none;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
}
.preloader .preloader-klaverblad {
  position: absolute;
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: url("/img/preloader_klaverblad.png") no-repeat center -25px;
  background-size: 256px;
  z-index: 1150;
  top: calc(50% - 100px);
  opacity: 0.5;
  transition: none;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
}
.preloader .preloader-outer {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: url("/img/preloader_outer_white.png") no-repeat center center;
  background-size: contain;
  z-index: 1100;
  animation: infinite-spinning 10000ms linear infinite;
  transform: scale(1, 1);
  opacity: 1;
  transition: none;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
}

body.loaded .preloader {
  opacity: 0;
  background-color: transparent;
  transition: background-color 400ms ease 400ms, opacity 500ms ease 1000ms;
}
body.loaded .preloader .preloader-inner {
  top: calc(50% - 100px);
  opacity: 0;
  transform: scale(3, 3);
  transition: transform 800ms ease 200ms, opacity 800ms ease 200ms;
}
body.loaded .preloader .preloader-klaverblad {
  top: calc(50% - 100px);
  opacity: 0;
  transform: scale(0.75, 0.75);
  transition: transform 800ms ease 200ms, opacity 800ms ease 200ms;
}
body.loaded .preloader .preloader-outer {
  opacity: 0;
  transform: scale(2, 2);
  transition: all 600ms ease;
}

.container-content .button-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
  gap: 20px;
}
.container-content .button-list .button {
  display: block;
  text-align: center;
  position: relative;
  width: calc(50% - 10px);
  background: #a1ff66;
  border-radius: 4px;
  overflow: hidden;
  background: #66fcf1;
}
.container-content .button-list .button:nth-child(4n+2), .container-content .button-list .button:nth-child(4n+3) {
  background: #45a29e;
}
.container-content .button-list .button:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
  opacity: 0.1;
  background: no-repeat 170% -110%;
  background-size: 115%;
  filter: brightness(0);
}
.container-content .button-list .button.btn-aanwezigheid:before {
  background-image: url("/img/icons/001-clipboard.png");
}
.container-content .button-list .button.btn-afmelden:before {
  background-image: url("/img/icons/002-speech-bubble.png");
}
.container-content .button-list .button.btn-group:before {
  background-image: url("/img/icons/003-group.png");
}
.container-content .button-list .button.btn-quiz:before {
  background-image: url("/img/icons/001-trivial.png");
}
.container-content .button-list .button.btn-badge:before {
  background-image: url("/img/icons/007-insignia.png");
}
.container-content .button-list .button.btn-overvliegers:before {
  background-image: url("/img/icons/006-birds.png");
}
.container-content .button-list .button span {
  width: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 500;
  font-family: "Roboto Slab", sans-serif;
  color: #0b0c10;
  line-height: 1.2em;
}
.container-content .summary {
  display: block;
  margin: 0 0 20px;
  background: #1f2833;
  padding: 10px 20px 15px;
  border-radius: 4px;
  color: #c5c6c7;
}
.container-content .summary .summary-title {
  font-size: 18px;
  font-weight: 500;
  font-family: "Roboto Slab", sans-serif;
  text-align: center;
  margin-bottom: 6px;
  color: #feffff;
}
.container-content .summary .summary-tiles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.container-content .summary .summary-tiles .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.container-content .summary .summary-tiles .tile .num {
  font-size: 32px;
}
.container-content .summary .summary-tiles .tile .text {
  font-size: 13px;
  margin-top: 2px;
}
.container-content .summary .summary-tiles .tile.aanwezig .num {
  color: #0dda00;
}
.container-content .summary .summary-tiles .tile.afwezig .num {
  color: #de0b3a;
}
.container-content .summary .summary-tiles .tile.afgemeld .num {
  color: #e08800;
}
.container-content .summary .summary-weekly-group {
  text-align: center;
  font-size: 12px;
  margin: 0 0 10px;
  color: #c5c6c7;
}
.container-content .summary .summary-weekly-group .group {
  font-weight: 500;
  color: #feffff;
}
.container-content .birthdays {
  margin: 20px 0;
  background: #def2f1;
  padding: 10px 20px 15px;
  border-radius: 4px;
  display: block;
  overflow: hidden;
}
.container-content .birthdays .birthdays-panel {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.container-content .birthdays .birthdays-panel .birthdays-icon {
  width: 60px;
  height: 60px;
  background: url("/img/icons/001-cake.png") no-repeat center center;
  background-size: 50px;
}
.container-content .birthdays .birthdays-panel .birthdays-title {
  font-size: 18px;
  font-weight: 500;
  font-family: "Roboto Slab", sans-serif;
  text-align: center;
  color: #1f2833;
}
.container-content .split-screen {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
}
.container-content .split-screen .calendar {
  min-width: 33.333%;
  padding: 20px;
  position: relative;
}
.container-content h2.subtitle {
  text-align: left;
  font-size: 1.8em;
  font-weight: 600;
  margin: 0 0 15px;
}
.container-content .sub-section {
  padding: 20px 0;
}
.container-content .sub-section .sub-section-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 3vh;
}
.container-content .sub-section .sub-section-content .sub-section-text p {
  margin: 0;
}
.container-content .sub-section .sub-section-content img {
  max-width: 100%;
  height: auto;
}
.container-content .sub-section.eyecatcher-left-up .sub-section-content, .container-content .sub-section.eyecatcher-right-up .sub-section-content {
  align-items: flex-start;
}
.container-content .sub-section.eyecatcher-left-down .sub-section-content, .container-content .sub-section.eyecatcher-right-down .sub-section-content {
  align-items: flex-end;
}
.container-content .sub-section .content-eyecatcher {
  margin: 0 40px;
}
.container-content .sub-section .content-eyecatcher.position-left {
  float: left;
}
.container-content .sub-section .content-eyecatcher.position-right {
  float: right;
}
.container-content .sub-section .content-eyecatcher.position-left-up, .container-content .sub-section .content-eyecatcher.position-left-down {
  float: left;
  margin: 40px;
}
.container-content .sub-section .content-eyecatcher.position-right-up, .container-content .sub-section .content-eyecatcher.position-right-down {
  float: right;
  margin: 40px;
}
.contentAfbeeldingContainer {
  margin: 50px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.contentAfbeeldingContainer img {
  margin: 10px;
}

.container-aanwezigheid .inner .content {
  text-align: center;
}
.container-aanwezigheid .inner .content .error {
  color: #de0b3a;
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.container-aanwezigheid .inner .content .success {
  color: #0dda00;
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.container-aanwezigheid .inner .content form.dates {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container-aanwezigheid .inner .content form.dates .input-field {
  position: relative;
}
.container-aanwezigheid .inner .content form.dates .input-field .hint {
  color: #0b0c10;
  font-size: 20px;
  right: 5px;
  transform: translate(-50%, -50%);
  top: 50%;
  position: absolute;
}
.container-aanwezigheid .inner .content form.dates input, .container-aanwezigheid .inner .content form.dates select {
  border: 1px solid #feffff;
  color: #1f2833;
  background: #feffff;
  padding: 20px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.3em;
  width: 100%;
  box-sizing: border-box;
}
.container-aanwezigheid .inner .bar-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 250ms ease;
  z-index: 500;
  background: #1f2833;
}
.container-aanwezigheid .inner .bar-bottom.active {
  transform: translateY(0%);
}
.container-aanwezigheid .inner .bar-bottom #unsaved-nr {
  font-weight: bold;
}
.container-aanwezigheid .inner .bar-bottom .save-button {
  font-size: 15px;
  padding: 5px 13px;
}
.container-aanwezigheid .inner .panel {
  display: none;
  margin-bottom: 75px;
}
.container-aanwezigheid .inner .panel.list .list-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  margin: 15px 0;
}
.container-aanwezigheid .inner .panel.list .list-header .title-date {
  color: #c5c6c7;
  font-size: 18px;
  font-weight: 500;
  font-family: "Roboto Slab", sans-serif;
}
.container-aanwezigheid .inner .panel.list .list-header .weekly-scout {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  align-items: center;
}
.container-aanwezigheid .inner .panel.list .list-header .weekly-scout .name {
  color: #c5c6c7;
  font-size: 14px;
  font-family: "Roboto Slab", sans-serif;
}
.container-aanwezigheid .inner .panel.list .list-header .weekly-scout .group select {
  border: 0px;
  color: #66fcf1;
  background: transparent;
  padding: 0 3px 0 3px;
  font-family: "Roboto Slab", sans-serif;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.container-aanwezigheid .inner .panel.list .summary-tiles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 15px 0px;
}
.container-aanwezigheid .inner .panel.list .summary-tiles .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.container-aanwezigheid .inner .panel.list .summary-tiles .tile .num {
  font-size: 32px;
}
.container-aanwezigheid .inner .panel.list .summary-tiles .tile .text {
  font-size: 13px;
  margin-top: 2px;
}
.container-aanwezigheid .inner .panel.list .summary-tiles .tile.aanwezig .num {
  color: #0dda00;
}
.container-aanwezigheid .inner .panel.list .summary-tiles .tile.afwezig .num {
  color: #de0b3a;
}
.container-aanwezigheid .inner .panel.list .summary-tiles .tile.afgemeld .num {
  color: #e08800;
}
.container-aanwezigheid .inner .panel.list .sort-list {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
  color: #66fcf1;
  margin: 0 0 5px 0px;
}
.container-aanwezigheid .inner .panel.list .sort-list > div {
  display: none;
  cursor: pointer;
}
.container-aanwezigheid .inner .panel.list .sort-list.group .sort-name {
  display: block;
}
.container-aanwezigheid .inner .panel.list .sort-list.name .sort-group {
  display: block;
}
.container-aanwezigheid .inner .panel.list .scouts {
  display: flex;
  flex-direction: column;
}
.container-aanwezigheid .inner .panel.list .scouts .scout {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #7b7b7b;
  padding: 5px 0;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .name {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .name .group {
  font-size: 11px;
  color: #7b7b7b;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons {
  display: flex;
  width: 130px;
  justify-content: flex-end;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio] {
  display: none;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons label {
  display: inline-block;
  font-size: 12px;
  border: 2px solid #7b7b7b;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: no-repeat center center;
  background-size: 22px;
  filter: brightness(6);
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons label.aanwezig {
  border-radius: 4px 0 0 4px;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons label.aanwezig:before {
  background-image: url("/img/icons/001-check.png");
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons label.afwezig {
  border-left: 0;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons label.afwezig:before {
  background-image: url("/img/icons/002-close.png");
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons label.afgemeld {
  border-left: 0;
  border-radius: 0 4px 4px 0;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons label.afgemeld:before {
  background-image: url("/img/icons/004-speech-bubble.png");
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio]:checked + label.aanwezig {
  background-color: #0dda00;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio]:checked + label.aanwezig:before {
  filter: brightness(0);
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio]:checked + label.afgemeld {
  background-color: #e08800;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio]:checked + label.afgemeld:before {
  filter: brightness(0);
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio]:checked + label.afwezig {
  background-color: #de0b3a;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio]:checked + label.afwezig:before {
  filter: brightness(0);
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio]:checked + label.onbekend {
  background-color: #c5c6c7;
}
.container-aanwezigheid .inner .panel.list .scouts .scout .status-buttons input[type=radio]:checked + label.onbekend:before {
  filter: brightness(0);
}
.container-aanwezigheid .inner .panel.cards .image-outer {
  display: flex;
  justify-content: center;
}
.container-aanwezigheid .inner .panel.cards .image-outer .image {
  width: 800px;
  max-width: 100%;
  background: no-repeat center center;
  background-color: #b9b9b9;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.container-aanwezigheid .inner .panel.cards .image-outer .image:before {
  content: "";
  display: block;
  padding-top: 80%;
}
.container-aanwezigheid .inner .panel.cards .image-outer .image:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #000;
  opacity: 0.1;
  z-index: 3;
}
.container-aanwezigheid .inner .panel.cards .image-outer .image .fallback {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: no-repeat center bottom;
  background-size: 65%;
  z-index: 2;
}
.container-aanwezigheid .inner .panel.cards .image-outer .image .txt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 10px;
  z-index: 4;
}
.container-aanwezigheid .inner .panel.cards .image-outer .image .txt h1.name {
  text-align: left;
  color: #feffff;
  text-transform: none;
}
.container-aanwezigheid .inner .panel.cards .image-outer .image .txt h2.group {
  text-align: left;
  color: #feffff;
  text-transform: none;
  font-size: 2em;
}
.container-aanwezigheid .inner .panel.cards .gender-m .image .fallback {
  display: block;
  background-image: url("/img/icons/001-man.png");
}
.container-aanwezigheid .inner .panel.cards .gender-v .image .fallback {
  display: block;
  background-image: url("/img/icons/003-woman.png");
}
.container-aanwezigheid .inner .panel.cards .gender-x .image .fallback {
  display: block;
  background-image: url("/img/icons/002-woman-1.png");
}
.container-aanwezigheid .inner .panel.cards .buttons {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status {
  width: 110px;
  height: 110px;
  border-radius: 100%;
  background-color: #feffff;
  position: relative;
  box-sizing: border-box;
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background-color: #c5c6c7;
  transform: translate(-50%, -50%);
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status .icon {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: no-repeat center center;
  background-size: 40px;
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status.active.btn-aanwezig {
  background-color: #52d665;
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status.active.btn-afgemeld {
  background-color: #ffce7d;
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status.active.btn-afwezig {
  background-color: #f38ba2;
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status.btn-aanwezig .icon {
  background-image: url("/img/icons/001-check.png");
  filter: saturate(4) hue-rotate(285deg);
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status.btn-afgemeld {
  width: 70px;
  height: 70px;
  border: 3px solid #c5c6c7;
  margin-top: 70px;
  margin-bottom: 10px;
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status.btn-afgemeld:before {
  width: 90px;
  height: 90px;
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status.btn-afgemeld .icon {
  background-image: url("/img/icons/004-speech-bubble.png");
  background-size: 29px;
  filter: saturate(4) hue-rotate(205deg) brightness(1.6);
}
.container-aanwezigheid .inner .panel.cards .buttons .btn-status.btn-afwezig .icon {
  background-image: url("/img/icons/002-close.png");
  filter: saturate(4) hue-rotate(155deg);
}
.container-aanwezigheid .inner .panel.cards .buttons-outer {
  position: relative;
  padding-top: 60px;
}
.container-aanwezigheid .inner .panel.cards .overlay {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 20px;
}
.container-aanwezigheid .inner .panel.cards .overlay .txt {
  color: #feffff;
  font-size: 17px;
  margin-bottom: 15px;
}
.container-aanwezigheid .inner .panel.cards .overlay .btn {
  margin-top: 0px;
  text-align: center;
  border-radius: 4px;
}
.container-aanwezigheid .inner .panel.cards .overlay .btn.btn-skip {
  padding: 34px 13px;
  font-size: 24px;
}
.container-aanwezigheid .inner .panel.cards .overlay .btn.btn-alter {
  transform: scale(0.7);
  margin-top: 10px;
}
.container-aanwezigheid .inner .panel.cards .has-status .btn-status {
  pointer-events: none;
  filter: blur(5px);
}
.container-aanwezigheid .inner .panel.cards .has-status .overlay {
  display: block;
}
.container-aanwezigheid .inner .nav-arrow-bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-bottom: 20px;
}
.container-aanwezigheid .inner .nav-arrow-bar .mode-toggle {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}
.container-aanwezigheid .inner .nav-arrow-bar .btn {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 2px solid #1f2833;
  background: no-repeat center center;
  background-color: #feffff;
  background-size: 24px;
  cursor: pointer;
}
.container-aanwezigheid .inner .nav-arrow-bar .btn.prev {
  background-image: url("/img/icons/001-left-arrow.png");
  border-radius: 5px;
}
.container-aanwezigheid .inner .nav-arrow-bar .btn.next {
  background-image: url("/img/icons/002-right-arrow.png");
  border-radius: 5px;
}
.container-aanwezigheid .inner .nav-arrow-bar .btn.mode-cards {
  background-image: url("/img/icons/002-framed-portrait.png");
  border-radius: 5px 0 0 5px;
}
.container-aanwezigheid .inner .nav-arrow-bar .btn.mode-list {
  background-image: url("/img/icons/001-menu.png");
  border-radius: 0 5px 5px 0;
  border-left: 0;
}
.container-aanwezigheid .inner .nav-arrow-bar .btn.disabled {
  pointer-events: none;
  opacity: 0;
}
.container-aanwezigheid .inner .aanwezigheid.list .panel.list {
  display: block;
}
.container-aanwezigheid .inner .aanwezigheid.list .btn.mode-list {
  background-color: #66fcf1;
}
.container-aanwezigheid .inner .aanwezigheid.cards .panel.cards {
  display: block;
}
.container-aanwezigheid .inner .aanwezigheid.cards .btn.mode-cards {
  background-color: #66fcf1;
}

.container-afmelden .inner .content .error {
  color: #de0b3a;
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.container-afmelden .inner .content .success {
  color: #0dda00;
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.container-afmelden .inner .content form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container-afmelden .inner .content form .input-field {
  position: relative;
}
.container-afmelden .inner .content form .input-field .hint {
  color: #0b0c10;
  font-size: 20px;
  right: 5px;
  transform: translate(-50%, -50%);
  top: 50%;
  position: absolute;
}
.container-afmelden .inner .content form input, .container-afmelden .inner .content form select {
  border: 1px solid #feffff;
  color: #1f2833;
  background: #feffff;
  padding: 20px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.3em;
  width: 100%;
  box-sizing: border-box;
}

.container-group .inner .name-form input {
  border: 1px solid #feffff;
  color: #0b0c10;
  background: #feffff;
  padding: 10px 20px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.3em;
  width: 100%;
  box-sizing: border-box;
}
.container-group .inner .count {
  color: #7b7b7b;
  text-align: center;
  margin: 10px 0;
  font-size: 14px;
  text-transform: uppercase;
}
.container-group .inner .count .number {
  color: #c5c6c7;
  font-weight: 400;
}
.container-group .inner .groups .group.hidden {
  display: none;
}
.container-group .inner .groups .group .group-name {
  border-bottom: 3px solid #c5c6c7;
  padding: 5px 0 0;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-group .inner .groups .group .group-name .name {
  font-size: 24px;
}
.container-group .inner .groups .group .group-name .number {
  font-size: 14px;
  color: #7b7b7b;
  text-transform: uppercase;
}
.container-group .inner .groups .group .group-scouts .scout {
  border-bottom: 1px solid #7b7b7b;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-group .inner .groups .group .group-scouts .scout.hidden {
  display: none;
}
.container-group .inner .groups .group .group-scouts .scout .name {
  color: #c5c6c7;
  font-size: 18px;
  cursor: pointer;
}
.container-group .inner .groups .group .group-scouts .scout .role {
  color: #7b7b7b;
  font-size: 14px;
}

.container-quiz .quiz {
  display: none;
}
.container-quiz .quiz .progress-bar-outer {
  margin: 0 auto;
  height: 10px;
  background: #feffff;
  width: 800px;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
}
.container-quiz .quiz .progress-bar-outer .progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #00cdff;
  transition: width 350ms linear;
}
.container-quiz .quiz .question-image-outer {
  display: flex;
  justify-content: center;
}
.container-quiz .quiz .question-image-outer .question-image {
  width: 800px;
  max-width: 100%;
  background: no-repeat center center;
  background-color: #b9b9b9;
  background-size: cover;
  position: relative;
}
.container-quiz .quiz .question-image-outer .question-image:before {
  content: "";
  display: block;
  padding-top: 80%;
}
.container-quiz .quiz .answers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0;
}
.container-quiz .quiz .answers .answer {
  width: calc(50% - 5px);
  display: block;
  padding: 10px 13px;
  font-family: "Quicksand", sans-serif;
  font-weight: 900 !important;
  font-size: 18px;
  color: #feffff;
  border: 2px solid #c5c6c7;
  text-align: center;
  cursor: pointer;
}
.container-quiz .quiz .answers .answer.selected.correct {
  background: #0dda00;
  border: 2px solid #0dda00;
  color: #0b0c10;
}
.container-quiz .quiz .answers .answer.selected.incorrect {
  background: #de0b3a;
  border: 2px solid #de0b3a;
  color: #0b0c10;
}
.container-quiz .quiz .answers.reveal .answer.correct {
  background: #0dda00;
  border: 2px solid #0dda00;
  color: #0b0c10;
}
.container-quiz .quiz .feedback {
  font-weight: 900;
  text-align: center;
  font-size: 24px;
  margin: 0 0 20px;
}
.container-quiz .quiz .feedback .pick {
  color: #c5c6c7;
}
.container-quiz .quiz .feedback .correct {
  display: none;
  color: #0dda00;
}
.container-quiz .quiz .feedback .incorrect {
  display: none;
  color: #de0b3a;
}
.container-quiz .quiz .feedback.correct .pick {
  display: none;
}
.container-quiz .quiz .feedback.correct .correct {
  display: block;
}
.container-quiz .quiz .feedback.incorrect .pick {
  display: none;
}
.container-quiz .quiz .feedback.incorrect .incorrect {
  display: block;
}
.container-quiz .quiz .next-button {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
.container-quiz .results {
  display: none;
}
.container-quiz .results .num-correct, .container-quiz .results .num-total {
  font-weight: 900;
}
.container-quiz .results h1 {
  text-align: center;
}
.container-quiz .results .txt {
  text-align: center;
  font-size: 18px;
  margin: 20px 0;
}
.container-quiz .results .txt a.btn {
  text-align: center;
}
.container-quiz .results .btn {
  width: 50%;
  margin: 0 auto;
}
.container-quiz .results .verdict {
  margin: 50px 0;
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  text-align: center;
  line-height: normal;
}
.container-quiz .results .verdict .icon {
  width: 100%;
  height: 80px;
  background: url("/img/icons/001-hat.png") no-repeat center center;
  background-size: 80px;
}
.container-quiz .results .verdict .title {
  font-weight: 700;
  margin-bottom: 5px;
}
.container-quiz .results .verdict .verdict-txt {
  font-style: italic;
  font-weight: 200;
  font-size: 0.9em;
}
.container-quiz .results .verdict .verdict-txt:before {
  content: "“";
}
.container-quiz .results .verdict .verdict-txt:after {
  content: "”";
}
.container-quiz .quiz.active, .container-quiz .results.active {
  display: block;
}

.container-birthdays .medium-text {
  text-align: center;
}
.container-birthdays .birthdays {
  margin: 20px 0;
  background: #c5c6c7;
  color: #0b0c10;
  padding: 10px;
  border-radius: 4px;
}
.container-birthdays .birthdays .birthdays-title {
  font-size: 18px;
  font-weight: 500;
  font-family: "Roboto Slab", sans-serif;
  text-align: center;
  margin-bottom: 7px;
}
.container-birthdays .birthdays .birthdays-panel {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.container-birthdays .birthdays .birthdays-panel .birthdays-icon {
  width: 60px;
  height: 60px;
  background: #66fcf1 url("/img/icons/001-confetti.png") no-repeat center center;
  background-size: 50px;
  border-radius: 50%;
  border: 3px solid #0b0c10;
}
.container-birthdays .birthdays .birthdays-panel .birthdays-list {
  display: flex;
  flex-direction: column;
}
.container-birthdays .birthdays .birthdays-panel .birthdays-list .name {
  font-size: 17px;
}
.container-birthdays .birthdays .birthdays-panel .birthdays-list .name .emphasis {
  font-weight: bold;
  margin-right: 10px;
}

.container-overvliegers .inner .content {
  text-align: center;
}
.container-overvliegers .inner .overvliegers .header-row {
  border-bottom: 3px solid #c5c6c7;
  padding: 5px 0 0;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-overvliegers .inner .overvliegers .header-row .name {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.container-overvliegers .inner .overvliegers .header-row .name .selected-count {
  display: none;
  font-size: 18px;
  color: #66fcf1;
}
.container-overvliegers .inner .overvliegers .header-row .name .selected-count.visible {
  display: inline-block;
}
.container-overvliegers .inner .overvliegers .header-row .name .selected-count:before {
  content: "(";
  color: #feffff;
}
.container-overvliegers .inner .overvliegers .header-row .name .selected-count:after {
  content: ")";
  color: #feffff;
}
.container-overvliegers .inner .overvliegers .header-row .number {
  font-size: 14px;
  color: #7b7b7b;
  text-transform: uppercase;
}
.container-overvliegers .inner .overvliegers .scouts .scout {
  border-bottom: 1px solid #7b7b7b;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-overvliegers .inner .overvliegers .scouts .scout .name {
  color: #c5c6c7;
  font-size: 18px;
  cursor: pointer;
}
.container-overvliegers .inner .overvliegers .scouts .scout .age {
  color: #7b7b7b;
  font-size: 14px;
}
.container-overvliegers .inner .overvliegers .scouts .scout.is-overvlieger {
  background: #1f2833;
}
.container-overvliegers .inner .overvliegers .scouts .scout.is-overvlieger .name {
  color: #66fcf1;
}

.container-badge .inner .content {
  text-align: left;
}
.container-badge .inner .scout-badge-select {
  margin: 0 auto;
  padding: 20px;
  background-color: #c5c6c7;
  border-radius: 5px;
  color: #0b0c10;
  max-width: 400px;
}
.container-badge .inner .scout-badge-select .form {
  display: flex;
  gap: 20px;
}
.container-badge .inner .scout-badge-select .form .input-field {
  position: relative;
  width: 50%;
}
.container-badge .inner .scout-badge-select .form .input-field .hint {
  color: #0b0c10;
  font-size: 20px;
  right: 5px;
  transform: translate(-50%, -50%);
  top: 50%;
  position: absolute;
}
.container-badge .inner .scout-badge-select .form input, .container-badge .inner .scout-badge-select .form select {
  border: 1px solid #feffff;
  color: #1f2833;
  background: #feffff;
  padding: 5px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.3em;
  width: 100%;
  box-sizing: border-box;
}
.container-badge .inner .no-handouts {
  font-size: 18px;
  text-align: center;
  margin: 20px 0;
}
.container-badge .inner .badge-overview {
  margin-top: 20px;
  text-align: left;
}
.container-badge .inner .badge-overview .header-row {
  border-bottom: 3px solid #c5c6c7;
  padding: 5px 0 0;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-badge .inner .badge-overview .header-row .name {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
.container-badge .inner .badge-overview .scout {
  border-bottom: 1px solid #7b7b7b;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-badge .inner .badge-overview .scout .name {
  color: #c5c6c7;
  font-size: 18px;
  cursor: pointer;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.container-badge .inner .badge-overview .scout .checkmarks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 17px;
}
.container-badge .inner .badge-overview .scout .checkmarks .check-yes {
  color: #0dda00;
}
.container-badge .inner .badge-overview .scout .checkmarks .check-no {
  color: #7b7b7b;
}
.container-badge .inner .badge-overview .scout .status {
  text-align: right;
  width: 30px;
}
.container-badge .inner .badge-overview .scout .status.received {
  color: #0dda00;
}
.container-badge .inner .badge-overview .scout .status.completed {
  color: #e08800;
}
.container-badge .inner .badge-overview .scout .status.in-progress {
  color: #7b7b7b;
}
.container-badge .inner a.back {
  color: #c5c6c7;
  text-decoration: none;
  display: block;
  margin: 30px 0 0;
  font-size: 14px;
}
.container-badge .inner .badge-detail {
  margin-top: 20px;
  text-align: left;
}
.container-badge .inner .badge-detail .header-row {
  border-bottom: 3px solid #c5c6c7;
  padding: 5px 0 0;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-badge .inner .badge-detail .header-row .name {
  font-size: 24px;
}
.container-badge .inner .badge-detail .header-row .scout-name {
  font-size: 18px;
}
.container-badge .inner .badge-detail .step {
  border-bottom: 1px solid #7b7b7b;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.container-badge .inner .badge-detail .step .step-nr {
  color: #c5c6c7;
  font-size: 24px;
  min-width: 32px;
}
.container-badge .inner .badge-detail .step .task {
  color: #c5c6c7;
  font-size: 18px;
  cursor: pointer;
}
.container-badge .inner .badge-detail .step .status {
  min-width: 105px;
  text-align: right;
  margin-left: auto;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.container-badge .inner .badge-detail .step .status .date {
  font-size: 14px;
  color: #7b7b7b;
}
.container-badge .inner .badge-detail .step .status .icon-achieved {
  color: #0dda00;
}
.container-badge .inner .badge-detail .step .status .icon-missing {
  color: #7b7b7b;
}
.container-badge .inner .badge-detail .step .status.achieved .icon-missing {
  display: none;
}
.container-badge .inner .badge-detail .step .status.missing .icon-achieved {
  display: none;
}

.container-crud .inner a.back {
  color: #c5c6c7;
}
.container-crud .inner a.back:hover, .container-crud .inner a.back:active, .container-crud .inner a.back:focus {
  color: #7b7b7b;
}
.container-crud .inner .autohide-popup.error {
  color: #de0b3a;
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.container-crud .inner .autohide-popup.success {
  color: #0dda00;
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.container-crud .inner .rotate-button {
  display: none;
  position: absolute;
  z-index: 1;
  right: 20px;
  top: 20px;
  width: 60px;
  height: 60px;
  background-color: #45a29e;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2));
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.2);
  box-sizing: content-box;
  animation: bounce 2000ms ease infinite;
}
.container-crud .inner .rotate-button:before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  background: url("/img/icons/001-rotate-smartphone.png") no-repeat center center;
  background-size: 36px;
  filter: brightness(100);
}
.container-crud .inner h1.title {
  font-size: 3em;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  line-height: normal;
}
.container-crud .inner h1.title.no-content .icon {
  margin-top: 0;
}
.container-crud .inner h1.title .icon {
  display: none;
  position: absolute;
  background: no-repeat center center;
  width: 86px;
  height: 86px;
  background-size: 100%;
  right: 0;
  top: 50%;
  margin-top: 20px;
  transform: translate(0%, -50%);
}
.container-crud .inner h1.title.texts .icon {
  background-image: url("/img/icons/001-content-writing.png");
}
.container-crud .inner h1.title.news .icon {
  background-image: url("/img/icons/002-newspaper.png");
}
.container-crud .inner h1.title.announcements .icon {
  background-image: url("/img/icons/003-megaphone.png");
}
.container-crud .inner h1.title.editions .icon {
  background-image: url("/img/icons/003-pictures.png");
}
.container-crud .inner h1.title.sponsors .icon {
  background-image: url("/img/icons/004-money.png");
}
.container-crud .inner h1.title.redirects .icon {
  background-image: url("/img/icons/005-shuffle.png");
}
.container-crud .inner h1.title.upload .icon {
  background-image: url("/img/icons/001-cloud-computing.png");
}
.container-crud .inner h1.title.speltak .icon {
  background-image: url("/img/icons/002-fans.png");
}
.container-crud .inner h1.title.group .icon {
  background-image: url("/img/icons/001-teamwork.png");
}
.container-crud .inner h1.title.scout .icon {
  background-image: url("/img/icons/003-boy-scout.png");
}
.container-crud .inner h1.title.list .icon {
  background-image: url("/img/icons/004-checklist.png");
}
.container-crud .inner h2.title {
  font-size: 2.7em;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container-crud .inner h2.title .btn.new {
  display: inline-block;
  margin: 0;
  padding: 5px 20px;
  font-size: 20px;
}
.container-crud .inner h2.title .btn.new i {
  position: relative;
  top: 1px;
}
.container-crud .inner .content {
  font-family: "Open Sans", sans-serif;
  font-size: 1.3em;
  line-height: normal;
}
.container-crud .inner .btn.new {
  display: inline-block;
  margin: 20px 0;
  padding: 10px 40px;
}
.container-crud .inner .button-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.container-crud .inner .button-count .buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.container-crud .inner .button-count .btn.new {
  margin: 0;
}
.container-crud .inner .button-count .count {
  font-size: 16px;
}
.container-crud .inner .file-results {
  display: none;
}
.container-crud .inner .file-results .scout-results {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.container-crud .inner .file-results .scout-results .scouts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 70%;
}
.container-crud .inner .file-results .scout-results .scouts .scout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  background-color: #7b7b7b;
  cursor: pointer;
  user-select: none;
  color: #feffff;
}
.container-crud .inner .file-results .scout-results .scouts .scout.selected {
  background-color: #66fcf1;
  color: #0b0c10;
}
.container-crud .inner .file-results .scout-results .scouts .scout.exists-already {
  opacity: 0.3;
  background-color: #888888;
  cursor: not-allowed;
}
.container-crud .inner .file-results .scout-results .scouts .scout.hidden {
  display: none;
}
.container-crud .inner .file-results .scout-results .scouts .scout span.name {
  font-size: 1.3em;
}
.container-crud .inner .file-results .scout-results .scouts .scout span.functie {
  font-size: 1em;
}
.container-crud .inner .file-results .scout-results .functions {
  background: #1f2833;
  padding: 10px;
  width: 30%;
}
.container-crud .inner .file-results .scout-results .functions .function-list {
  margin-top: 10px;
}
.container-crud .inner .file-results .scout-results .functions .function-list .function {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}
.container-crud .inner .file-results .scout-results .functions .function-list .function.mt {
  margin-top: 10px;
}
.container-crud .inner .file-results .scout-results .functions .function-list .function input {
  width: auto;
}
.container-crud .inner .file-results .scout-results .functions .function-list .function label {
  color: #feffff;
  cursor: pointer;
  user-select: none;
}
.container-crud .inner .file-results #select-nr {
  font-weight: bold;
}
.container-crud .inner .uploads {
  margin-top: 50px;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
}
.container-crud .inner .uploads iframe {
  width: 100%;
  min-height: 50vh;
}
.container-crud .inner .child-element-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 60px;
}
.container-crud .inner .child-element-list .child-element {
  width: calc(50% - 20px);
  background: #215056;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
}
.container-crud .inner .child-element-list .child-element:first-child {
  width: 100%;
}
.container-crud .inner .list {
  border: 0;
  width: 100%;
  margin-top: 20px;
  color: #0b0c10;
}
.container-crud .inner .list tr {
  background: #b1b2b3;
}
.container-crud .inner .list tr:nth-child(2n+1) {
  background: #c5c6c7;
}
.container-crud .inner .list tr:first-child .fa-angle-up {
  opacity: 0.2;
  pointer-events: none;
}
.container-crud .inner .list tr:last-child .fa-angle-down {
  opacity: 0.2;
  pointer-events: none;
}
.container-crud .inner .list th {
  padding: 5px 10px;
  line-height: normal;
  text-align: left;
  vertical-align: middle;
  background: #8a8b8b;
  border-bottom: 2px solid #0b0c10;
  font-size: 1.1em;
  font-weight: 900;
}
.container-crud .inner .list th.buttons {
  text-align: right;
  padding: 5px 7px;
}
.container-crud .inner .list td {
  padding: 5px 10px;
  line-height: normal;
  text-align: left;
  vertical-align: middle;
}
.container-crud .inner .list td.max-size {
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.container-crud .inner .list td.review {
  color: #de0b3a;
  font-weight: 900;
}
.container-crud .inner .list td.needs-pic:after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/img/icons/001-no-pictures.png") no-repeat center center;
  background-size: 100%;
  margin-left: 6px;
  margin-top: -1px;
  position: absolute;
}
.container-crud .inner .list td.bold {
  font-weight: 500;
}
.container-crud .inner .list td.presence-0 {
  color: #4c4c4c;
}
.container-crud .inner .list td.presence-1 {
  color: #0aa900;
}
.container-crud .inner .list td.presence-2 {
  color: #de0b3a;
}
.container-crud .inner .list td.presence-3 {
  color: #ffc262;
}
.container-crud .inner .list td.six-months {
  font-weight: 600;
  width: 230px;
}
.container-crud .inner .list td.six-months.green {
  color: #0aa900;
}
.container-crud .inner .list td.six-months.orange {
  color: #ffc262;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
}
.container-crud .inner .list td.six-months.red {
  color: #de0b3a;
}
.container-crud .inner .list td.five-weeks .week {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  margin-right: 6px;
}
.container-crud .inner .list td.five-weeks .week.status-1 {
  background: #0aa900;
}
.container-crud .inner .list td.five-weeks .week.status-3 {
  background: #ffc262;
}
.container-crud .inner .list td.five-weeks .week.status-2 {
  background: #de0b3a;
}
.container-crud .inner .list td.five-weeks .week.status-0 {
  background: #4c4c4c;
}
.container-crud .inner .list td.color {
  width: 150px;
}
.container-crud .inner .list td.buttons {
  font-size: 18px;
  padding: 2px 7px;
  width: 60px;
  text-align: right;
}
.container-crud .inner .list td.buttons.sort-order {
  width: 80px;
}
.container-crud .inner .list td.buttons a {
  color: #0b0c10;
  transition: color 150ms ease;
}
.container-crud .inner .list td.buttons a:hover, .container-crud .inner .list td.buttons a:active, .container-crud .inner .list td.buttons a:focus {
  color: #1f2833;
}
.container-crud .inner .list td span.active {
  color: #0dda00;
  font-weight: 600;
}
.container-crud .inner .form-container {
  width: 100%;
  background: #c5c6c7;
  line-height: normal;
  padding: 20px;
  margin-top: 30px;
  margin-bottom: 60px;
}
.container-crud .inner .form-container .form-row {
  margin-bottom: 30px;
}
.container-crud .inner .form-container .form-row:last-child {
  margin-bottom: 0px;
}
.container-crud .inner .form-container .form-row .field-name {
  color: #0b0c10;
  font-size: 1.3em;
  font-weight: 900;
  margin-bottom: 5px;
}
.container-crud .inner .form-container .form-row.required .field-name:after {
  content: " *";
  color: #de0b3a;
}
.container-crud .inner .form-container .form-row .help-text {
  color: #0b0c10;
  font-size: 1em;
  margin-bottom: 5px;
}
.container-crud .inner .form-container .form-row input, .container-crud .inner .form-container .form-row select {
  border: 1px solid #feffff;
  color: #1f2833;
  background: #feffff;
  padding: 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.3em;
  width: 50%;
  box-sizing: border-box;
}
.container-crud .inner .form-container .form-row input.width-small, .container-crud .inner .form-container .form-row select.width-small {
  width: 100px;
}
.container-crud .inner .form-container .form-row input[type=file], .container-crud .inner .form-container .form-row select[type=file] {
  margin-top: 10px;
}
.container-crud .inner .form-container .form-row a {
  color: #7b7b7b;
}
.container-crud .inner .form-container .form-row a:hover {
  color: #6f6f6f;
}
.container-crud .inner .form-container .form-row .form-errors {
  margin: 20px;
}
.container-crud .inner .form-container .form-row .form-errors li {
  color: #de0b3a;
  font-weight: 900;
}
.container-crud .inner .form-container .form-row .btn {
  padding: 10px 70px;
}
.container-crud .inner .form-container .select-icon, .container-crud .inner .form-container .group-color {
  display: flex;
  align-items: center;
}
.container-crud .inner .form-container .select-icon .change-icon, .container-crud .inner .form-container .select-icon .change-color, .container-crud .inner .form-container .group-color .change-icon, .container-crud .inner .form-container .group-color .change-color {
  margin: -30px 20px;
}
.container-crud .inner .form-container .select-icon .change-icon span, .container-crud .inner .form-container .select-icon .change-color span, .container-crud .inner .form-container .group-color .change-icon span, .container-crud .inner .form-container .group-color .change-color span {
  width: 120px;
  height: 120px;
  background: no-repeat center center;
  background-size: 100%;
  display: block;
}

.container-dashboard .dashboard {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 10px;
}
.container-dashboard .dashboard .panel {
  width: 320px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #c5c6c7;
  border-radius: 5px;
  color: #0b0c10;
}
.container-dashboard .dashboard .panel .icon {
  width: 60px;
  height: 60px;
  background: url("/img/icons/002-idea.png") no-repeat center center;
  background-size: 100%;
  position: absolute;
  top: -36px;
  right: 0px;
}
.container-dashboard .dashboard .panel .panel-body h1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: none;
  font-size: 2.8em;
  margin-bottom: 10px;
  position: relative;
}
.container-dashboard .dashboard .panel .panel-body > span {
  font-size: 1.2em;
  line-height: 1.5em;
}
.container-dashboard .dashboard .panel .btn {
  margin-top: 20px;
  text-align: center;
}
.container-dashboard .dashboard .panel.texts .icon {
  background-image: url("/img/icons/001-content-writing.png");
}
.container-dashboard .dashboard .panel.news .icon {
  background-image: url("/img/icons/002-newspaper.png");
}
.container-dashboard .dashboard .panel.announcements .icon {
  background-image: url("/img/icons/003-megaphone.png");
}
.container-dashboard .dashboard .panel.editions .icon {
  background-image: url("/img/icons/003-pictures.png");
}
.container-dashboard .dashboard .panel.sponsors .icon {
  background-image: url("/img/icons/004-money.png");
}
.container-dashboard .dashboard .panel.redirects .icon {
  background-image: url("/img/icons/005-shuffle.png");
}
.container-dashboard .dashboard .panel.upload .icon {
  background-image: url("/img/icons/001-cloud-computing.png");
}
.container-dashboard .dashboard .panel.texts .icon {
  background-image: url("/img/icons/001-content-writing.png");
}
.container-dashboard .dashboard .panel.speltak .icon {
  background-image: url("/img/icons/002-fans.png");
}
.container-dashboard .dashboard .panel.group .icon {
  background-image: url("/img/icons/001-teamwork.png");
}
.container-dashboard .dashboard .panel.scout .icon {
  background-image: url("/img/icons/003-boy-scout.png");
}
.container-dashboard .dashboard .panel.list .icon {
  background-image: url("/img/icons/004-checklist.png");
}
.container-dashboard .dashboard .panel.badge .icon {
  background-image: url("/img/icons/001-badges.png");
}
.container-dashboard .dashboard .panel.badgestep .icon {
  background-image: url("/img/icons/001-badges.png");
}

.container-login .panel {
  margin: 50px auto 0;
  padding: 40px;
  background-color: #c5c6c7;
  border-radius: 5px;
  color: #0b0c10;
  max-width: 400px;
}
.container-login .panel h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: normal;
  text-transform: none;
  font-size: 1.6em;
  margin-bottom: 30px;
  line-height: normal;
  text-align: center;
}
.container-login .panel .error {
  color: #de0b3a;
  margin-bottom: 20px;
  font-size: 1.2em;
  line-height: normal;
  text-align: justify;
}
.container-login .panel form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container-login .panel form .input-field {
  position: relative;
}
.container-login .panel form .input-field .hint {
  color: #0b0c10;
  font-size: 20px;
  right: 5px;
  transform: translate(-50%, -50%);
  top: 50%;
  position: absolute;
}
.container-login .panel form input, .container-login .panel form select {
  border: 1px solid #feffff;
  color: #1f2833;
  background: #feffff;
  padding: 20px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.3em;
  width: 100%;
  box-sizing: border-box;
}

@media only screen and (min-width: 1240px) {
  .container-content .button-list .button {
    width: calc((100% - 60px) / 4);
    background: #66fcf1;
  }
  .container-content .button-list .button:nth-child(4n+2), .container-content .button-list .button:nth-child(4n+3) {
    background: #66fcf1;
  }
  .container-content .button-list .button:nth-child(8n+2), .container-content .button-list .button:nth-child(8n+4), .container-content .button-list .button:nth-child(8n+5), .container-content .button-list .button:nth-child(8n+7) {
    background: #45a29e;
  }

  .container-quiz .quiz .progress-bar-outer, .container-quiz .quiz .question-image-outer .question-image {
    width: 450px;
  }
}
@media only screen and (max-width: 1240px) {
  html, body {
    font-size: 11px;
  }

  .container .inner {
    margin: 0px auto;
    padding: 20px;
  }
  .container .inner h1.title {
    font-size: 3em;
    margin-bottom: 20px;
  }
  .container .inner .content .large-text {
    font-size: 1.4em;
  }

  .navigation-container .inner {
    margin: 0 auto;
    padding: 0 20px;
  }
}
@media only screen and (max-width: 800px) {
  .navigation-container .logo-text {
    margin: 0;
  }

  .navigation-container .logo-text a {
    font-size: 36px;
  }

  .navigation-container .menu-buttons {
    margin: 0 0 0 auto;
  }

  .navigation-container .navigation {
    top: 60px;
    padding: 20px;
  }
  .navigation-container .navigation > .inner {
    padding: 0;
    justify-content: space-between;
  }
  .navigation-container .navigation ul > li.big {
    font-size: 36px;
  }

  .container-eyecatcher {
    height: 30vh;
  }

  .container-eyecatcher .inner {
    margin: 0 auto;
  }

  .container-eyecatcher .eyecatcher-overlay:before {
    opacity: 0.2;
  }

  .container-eyecatcher .eyecatcher-overlay:after {
    opacity: 0;
  }

  .container-eyecatcher .typewriter {
    font-size: 26px;
  }
  .container-eyecatcher .typewriter span:not(.el4) {
    opacity: 0 !important;
  }
  .container-eyecatcher .typewriter .typewriter-prefix, .container-eyecatcher .typewriter .typewriter-content {
    height: 30px;
  }

  .container-announcement .inner {
    margin: 40px auto 0;
  }

  .container-announcement .inner h1.title i {
    display: none;
  }

  .container-announcement .inner .panel .btns {
    flex-wrap: wrap;
    gap: 20px;
  }
  .container-announcement .inner .panel .btns .btn {
    margin: 0;
  }

  .container-introduction .inner .button-container .button {
    width: 100%;
    margin-bottom: 20px;
  }

  .slide-content h2 .icon {
    display: none;
  }

  .news-slide {
    width: 100%;
    margin-bottom: 20px;
  }

  .container-news .inner .meer-lezen {
    text-align: center;
  }

  .container-news .inner .meer-lezen .btn-more {
    margin: 20px 0 0;
    display: block;
  }

  .container-footer .columnContainer .column {
    width: 100%;
    margin-bottom: 20px;
  }

  .container-footer .copyrightText {
    margin: 0;
    flex-wrap: wrap;
    gap: 20px;
  }

  .container-calendar .inner .content .calendar-container .calendar-widget-container .calendar-widget .calendar-slide {
    width: calc(100vw - 40px);
  }

  .container-archive .inner .timeline .row {
    justify-content: flex-start;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 30px;
  }
  .container-archive .inner .timeline .row .fill {
    display: none;
  }
  .container-archive .inner .timeline .row .year-num {
    order: 1 !important;
  }
  .container-archive .inner .timeline .row .year-title {
    order: 2 !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    width: auto;
  }

  .container-archive .inner .links {
    flex-wrap: wrap;
    gap: 20px;
  }
  .container-archive .inner .links .back {
    order: 1;
    width: 100%;
    text-align: center;
  }
  .container-archive .inner .links .prev {
    order: 2;
    width: 100%;
    text-align: center;
  }
  .container-archive .inner .links .next {
    order: 3;
    width: 100%;
    text-align: center;
  }

  .container-archive .inner .panel.groups .panel-content {
    text-align: center;
  }
  .container-archive .inner .panel.groups .panel-content .icon {
    display: none;
  }

  .container-archive .inner .split-panel {
    flex-wrap: wrap;
  }
  .container-archive .inner .split-panel .panel {
    width: 100%;
  }

  .container-archive .inner .panel h2 {
    font-size: 3em;
  }

  .container-archive .inner .panel.kamplied .kamplied-item, .container-archive .inner .panel.kneutergraaf .kneutergraaf-item {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .container-archive .inner .panel.kamplied .kamplied-item .view, .container-archive .inner .panel.kneutergraaf .kneutergraaf-item .view {
    display: none;
  }

  .container-archive-album .inner .content .album-container .album-widget-container {
    padding-left: 10px;
  }

  .modal h1 {
    font-size: 2.2em;
  }

  .container-sponsors .fancyTitle span:before, .container-sponsors .fancyTitle span:after {
    display: none;
  }

  .container-crud .inner h1.title.texts .icon {
    width: 56px;
    height: 56px;
    margin-top: 0px;
  }

  .container-crud .inner .list td, .container-crud .inner .list th {
    display: none;
    padding: 2px;
  }
  .container-crud .inner .list td:first-child, .container-crud .inner .list td:last-child, .container-crud .inner .list td.show, .container-crud .inner .list th:first-child, .container-crud .inner .list th:last-child, .container-crud .inner .list th.show {
    display: table-cell;
  }

  .container-crud .inner h1.title.group .icon {
    display: none;
  }
}
@media only screen and (max-width: 800px) and (orientation: portrait) {
  .container-crud .inner .rotate-button {
    display: block;
  }
}

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