@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,500&subset=latin-ext);
.ui-mobile-viewport {
  background-color: #A8D6FF; }

body,
input,
select,
textarea,
button,
.ui-btn {
  font-size: 1em;
  line-height: 1.5;
  font-weight: 300;
  font-family: 'Fira Sans', Helvetica, Arial, sans-serif; }

body,
h1,
h2,
h3 {
  font-weight: 300;
  line-height: 1.6em; }

h1, h2 {
  margin-top: 0; }

.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
  font-weight: 400; }

blockquote {
  font-style: italic;
  margin: 1em 0; }

.ui-header[data-role='header'] {
  background-color: rgba(255, 255, 255, 0.9);
  border-width: 0; }
  @media (max-width: 900px) {
    .ui-header[data-role='header'] {
      padding-bottom: 3px; } }
  .ui-header[data-role='header'] #logo,
  .ui-header[data-role='header'] #icon-menu {
    display: none; }
    @media (max-width: 900px) {
      .ui-header[data-role='header'] #logo,
      .ui-header[data-role='header'] #icon-menu {
        display: block; } }
  .ui-header[data-role='header'] #logo {
    display: none; }
    @media (max-width: 900px) {
      .ui-header[data-role='header'] #logo {
        display: block; } }
  .ui-header[data-role='header'] #symbool {
    height: 80px;
    width: 80px; }
  .ui-header[data-role='header'] #jeugdwerk {
    left: 50%;
    width: 100px;
    margin-left: -200px;
    top: 37px;
    font-size: 30px; }
    @media (max-width: 900px) {
      .ui-header[data-role='header'] #jeugdwerk {
        width: auto;
        margin: 2px 0 0 0;
        height: 25px;
        line-height: 25px;
        font-size: 20px; } }
  .ui-header[data-role='header'] #lectorium,
  .ui-header[data-role='header'] #school {
    left: 50%;
    width: 100px; }
  .ui-header[data-role='header'] #lectorium {
    margin-left: 57px;
    top: 27px;
    font-size: 15px; }
    @media (max-width: 900px) {
      .ui-header[data-role='header'] #lectorium {
        height: 15px;
        line-height: 15px;
        font-size: 11px;
        margin: 0;
        width: auto; } }
  .ui-header[data-role='header'] #school {
    margin-left: 57px;
    top: 45px;
    font-size: 10.1px; }
  @media (max-width: 900px) {
    .ui-header[data-role='header'] #symbool,
    .ui-header[data-role='header'] #school {
      display: none; } }
  @media (max-width: 900px) {
    .ui-header[data-role='header'] {
      background-color: #00AFED;
      z-index: 2000; } }
  .ui-header[data-role='header'] a img {
    width: 40px; }

#title {
  padding: 2px 40px;
  margin: 0px 45px; }

h1 a {
  text-decoration: none; }
  h1 a span {
    display: block;
    color: #00AFED;
    position: absolute;
    text-shadow: none; }
    @media (max-width: 900px) {
      h1 a span {
        color: white;
        position: static; } }

@media (max-width: 900px) {
  h2 {
    height: 45px;
    margin: 0;
    margin-left: -15px;
    margin-right: -15px;
    line-height: 45px;
    text-align: center;
    color: white; } }

.ui-page-theme-a a.prev, .ui-page-theme-a a.next {
  display: none; }
  @media (max-width: 900px) {
    .ui-page-theme-a a.prev, .ui-page-theme-a a.next {
      display: block;
      width: 45px;
      height: 40px;
      line-height: 45px;
      font-size: 24px;
      position: absolute;
      top: 0;
      color: white;
      text-decoration: none;
      text-align: center;
      font-weight: 300;
      background: none; } }

.ui-page-theme-a a.next {
  right: 0; }

.ui-page-theme-a a.prev {
  left: 0; }

.ui-mobile .page {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0; }
  .ui-mobile .page > .wrapper {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    top: 0;
    bottom: 0;
    height: 100%; }
  @media (max-width: 900px) {
    .ui-mobile .page {
      left: 0;
      margin-left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      padding: 0; } }

.page__container {
  box-sizing: border-box;
  padding: 0 20px;
  z-index: 1000;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.85);
  left: 35px;
  right: 35px;
  bottom: 35px;
  overflow: auto;
  text-shadow: none;
  border-top: 20px solid rgba(255, 255, 255, 0.85);
  border-bottom: 20px solid rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  pointer-events: auto;
  columns: 3;
  opacity: 1;
  transition: opacity 1s;
  transition-delay: 750ms; }
  .page__container blockquote {
    margin: 0;
    padding-bottom: 1em;
    break-inside: avoid;
    break-before: avoid-column; }
  .page__container p {
    margin: 0;
    padding: 0 0 1em 0; }
  .ui-mobile-viewport-transitioning .page__container {
    visibility: hidden !important;
    opacity: 0; }
  .page__container h2 {
    position: relative;
    top: -0.3em;
    margin-bottom: 0; }
  @media (max-width: 900px) {
    .page__container {
      position: relative;
      top: 0;
      padding: 0 15px 15px 15px;
      width: 100%;
      bottom: 0;
      left: 0;
      margin: -45px 0 0 0;
      font-size: 90%;
      border-width: 0;
      line-height: 1.3;
      background: none;
      max-width: none;
      columns: auto;
      transition-delay: 0ms; }
      .page__container h2 {
        margin-bottom: 15px;
        top: 0; } }
  #page-home .page__container {
    color: white;
    background: rgba(0, 0, 0, 0.2);
    border-color: transparent; }
    @media (max-width: 900px) {
      #page-home .page__container {
        background: none;
        color: black; }
        #page-home .page__container h2 {
          background-color: rgba(0, 0, 0, 0.5); } }

.page__background-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 900;
  transition: opacity 1000ms; }
  .ui-mobile-viewport-transitioning .page__background-image {
    background-image: none;
    opacity: 0; }
  @media (max-width: 900px) {
    .page__background-image {
      position: relative;
      padding: 0;
      height: 55vw;
      max-height: 200px;
      width: 100%;
      bottom: auto; } }

#footer {
  position: absolute;
  bottom: 0;
  margin: 0;
  border-width: 0;
  padding: 0; }
  @media (max-width: 900px) {
    #footer {
      display: none; } }
  #footer .active {
    position: relative; }
    #footer .active::before {
      position: absolute;
      top: -15px;
      left: 0px;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 15px solid black;
      content: ' ';
      overflow: hidden; }

.ui-footer .ui-navbar .ui-btn {
  font-weight: 300;
  color: white;
  text-shadow: none;
  text-align: left;
  font-size: 18px;
  border: none; }

#footer-item-0 {
  background-color: #D4AAA0; }
  #footer-item-0.active {
    position: relative; }
    #footer-item-0.active::before {
      border-bottom-color: #D4AAA0; }

#footer-item-1 {
  background-color: #73C0EA; }
  #footer-item-1.active {
    position: relative; }
    #footer-item-1.active::before {
      border-bottom-color: #73C0EA; }

#footer-item-2 {
  background-color: #9291D4; }
  #footer-item-2.active {
    position: relative; }
    #footer-item-2.active::before {
      border-bottom-color: #9291D4; }

#footer-item-3 {
  background-color: #73BEBC; }
  #footer-item-3.active {
    position: relative; }
    #footer-item-3.active::before {
      border-bottom-color: #73BEBC; }

#footer-item-4 {
  background-color: #C07FBC; }
  #footer-item-4.active {
    position: relative; }
    #footer-item-4.active::before {
      border-bottom-color: #C07FBC; }

@media (max-width: 900px) {
  #page-0 h2 {
    background-color: rgba(212, 170, 160, 0.8); }

  #page-1 h2 {
    background-color: rgba(115, 192, 234, 0.8); }

  #page-2 h2 {
    background-color: rgba(146, 145, 212, 0.8); }

  #page-3 h2 {
    background-color: rgba(115, 190, 188, 0.8); }

  #page-4 h2 {
    background-color: rgba(192, 127, 188, 0.8); } }
.hide {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

#menu {
  top: 74px;
  min-height: 100px;
  background-color: rgba(0, 175, 237, 0.9);
  text-shadow: none; }
  #menu a {
    color: white;
    font-weight: 300; }
  #menu .ui-btn {
    border: none; }

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