/* BASE STYLING */


/* SET ROOT FONTSIZE FOR EACH MEDIA */
html {
    font-size: 16px;
    line-height: 1;
    width: 100%;
    height: 100%;
}
body {
padding: 0;
margin: 0;
}
@media screen and (min-width: 1980px){
    html {
        font-size: 20px;
    }
    article {
        max-width: 1180px;
    }
}
@media screen and (min-width: 2560px){
    html {
        font-size: 32px;
    }
}

/* FONTSIZE BASED ON ROOT */
h1,h2,h3,h4,h5,h6 {
    margin: 0 0 1rem 0;
    line-height: 1;
}
h1 a:hover,
h2 a:hover {
    text-decoration: none;
    color: #000;
}
p {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.5rem;

      font-weight: normal;
      font-family: Helvetica,'Roboto Sans','Segoe UI',Arial,'Lucida Grande',sans-serif;
}
ul {
   line-height: 1.5rem;
}
@media screen and (min-width: 768px){
    p { 
        font-size: 1.125rem;
        line-height: 1.62rem;
    }
    ul {
        line-height: 1.62rem;
    }
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.14rem;
    margin-top: 8px;
}
h3 {
    font-size: 1.17rem;
    margin-top: 14px;
}
h4 {
    font-size: 1rem;
    margin-top: 16px;
}
h5 {
    font-size: 0.83rem;
    margin-top: 19px;
}
h6 {
    font-size: 0.67rem;
    margin-top: 22px;
}

img {
    max-width: 100%;
    height: auto;
}

:focus {
    outline: 2px solid #0276BA;
}

/* GRID STYLING */
                           
*, ::after, ::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    box-sizing: border-box;
}
/* GRID */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
[class*="col-"] {
    padding-top: 16px;
    padding-bottom: 16px;
}
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
}
.container::after {
    content: "";
    display: table;
    clear: both
}
.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
}
.container-fluid::after {
    content: "";
    display: table;
    clear: both
}
.row {
    margin-left: -16px;
    margin-right: -16px;
}
.row::after {
    content: "";
    display: table;
    clear: both;
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,
.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12 {
    position: relative;
    min-height: 1px;
    padding-left: 16px;
    padding-right: 16px;
}

/* MEDIA */
@media screen and (min-width: 576px){
    .container {
        width: 540px;
        max-width: 100%;
    }
}
@media screen and (min-width: 768px){
    .container {
        width: 720px;
        max-width: 100%;
    }
}
@media screen and (min-width: 992px){
    .container {
        width: 960px;
        max-width: 100%;
    }
}
@media screen and (min-width: 1200px){
    .container {
        width: 1140px;
        max-width: 100%;
    }
}


/* MEDIA XS */
.col-xs-1 {float: left; width: 8.333333%;}
.col-xs-2 {float: left; width: 16.666667%;}
.col-xs-3 {float: left; width: 25%;}
.col-xs-4 {float: left; width: 33.333333%;}
.col-xs-5 {float: left; width: 41.666667%;}
.col-xs-6 {float: left; width: 50%;}
.col-xs-7 {float: left; width: 58.333333%;}
.col-xs-8 {float: left; width: 66.666667%;}
.col-xs-9 {float: left; width: 75%;}
.col-xs-10 {float: left; width: 83.333333%;}
.col-xs-11 {float: left; width: 91.666667%;}
.col-xs-12 {float: left; width: 100%;}
.offset-xs-1 {margin-left:8.333333%;}
.offset-xs-2 {margin-left:16.666667%;}
.offset-xs-3 {margin-left:25%;}
.offset-xs-4 {margin-left:33.333333%;}
.offset-xs-5 {margin-left:41.666667%;}
.offset-xs-6 {margin-left:50%;}
.offset-xs-7 {margin-left:58.333333%;}
.offset-xs-8 {margin-left:66.666667%;}
.offset-xs-9 {margin-left:75%;}
.offset-xs-10 {margin-left:83.333333%;}
.offset-xs-11 {margin-left:91.666667%;}

/* MEDIA SM */
@media screen and  (min-width: 576px){
  .col-sm-1 {float: left; width: 8.333333%;}
  .col-sm-2 {float: left; width: 16.666667%;}
  .col-sm-3 {float: left; width: 25%;}
  .col-sm-4 {float: left; width: 33.333333%;}
  .col-sm-5 {float: left; width: 41.666667%;}
  .col-sm-6 {float: left; width: 50%;}
  .col-sm-7 {float: left; width: 58.333333%;}
  .col-sm-8 {float: left; width: 66.666667%;}
  .col-sm-9 {float: left; width: 75%;}
  .col-sm-10 {float: left; width: 83.333333%;}
  .col-sm-11 {float: left; width: 91.666667%;}
  .col-sm-12 {float: left; width: 100%;}
  .offset-sm-1 {margin-left:8.333333%;}
  .offset-sm-2 {margin-left:16.666667%;}
  .offset-sm-3 {margin-left:25%;}
  .offset-sm-4 {margin-left:33.333333%;}
  .offset-sm-5 {margin-left:41.666667%;}
  .offset-sm-6 {margin-left:50%;}
  .offset-sm-7 {margin-left:58.333333%;}
  .offset-sm-8 {margin-left:66.666667%;}
  .offset-sm-9 {margin-left:75%;}
  .offset-sm-10 {margin-left:83.333333%;}
  .offset-sm-11 {margin-left:91.666667%;}
}

/* MEDIA MD */
@media screen and  (min-width: 768px){
  .col-md-1 {float: left; width: 8.333333%;}
  .col-md-2 {float: left; width: 16.666667%;}
  .col-md-3 {float: left; width: 25%;}
  .col-md-4 {float: left; width: 33.333333%;}
  .col-md-5 {float: left; width: 41.666667%;}
  .col-md-6 {float: left; width: 50%;}
  .col-md-7 {float: left; width: 58.333333%;}
  .col-md-8 {float: left; width: 66.666667%;}
  .col-md-9 {float: left; width: 75%;}
  .col-md-10 {float: left; width: 83.333333%;}
  .col-md-11 {float: left; width: 91.666667%;}
  .col-md-12 {float: left; width: 100%;}
  .offset-md-0 {margin-left:0%;}
  .offset-md-1 {margin-left:8.333333%;}
  .offset-md-2 {margin-left:16.666667%;}
  .offset-md-3 {margin-left:25%;}
  .offset-md-4 {margin-left:33.333333%;}
  .offset-md-5 {margin-left:41.666667%;}
  .offset-md-6 {margin-left:50%;}
  .offset-md-7 {margin-left:58.333333%;}
  .offset-md-8 {margin-left:66.666667%;}
  .offset-md-9 {margin-left:75%;}
  .offset-md-10 {margin-left:83.333333%;}
  .offset-md-11 {margin-left:91.666667%;}
}
/* MEDIA LG */
@media screen and  (min-width: 992px){
  .col-lg-1 {float: left; width: 8.333333%;}
  .col-lg-2 {float: left; width: 16.666667%;}
  .col-lg-3 {float: left; width: 25%;}
  .col-lg-4 {float: left; width: 33.333333%;}
  .col-lg-5 {float: left; width: 41.666667%;}
  .col-lg-6 {float: left; width: 50%;}
  .col-lg-7 {float: left; width: 58.333333%;}
  .col-lg-8 {float: left; width: 66.666667%;}
  .col-lg-9 {float: left; width: 75%;}
  .col-lg-10 {float: left; width: 83.333333%;}
  .col-lg-11 {float: left; width: 91.666667%;}
  .col-lg-12 {float: left; width: 100%;}
  .offset-lg-0 {margin-left:0%;}
  .offset-lg-1 {margin-left:8.333333%;}
  .offset-lg-2 {margin-left:16.666667%;}
  .offset-lg-3 {margin-left:25%;}
  .offset-lg-4 {margin-left:33.333333%;}
  .offset-lg-5 {margin-left:41.666667%;}
  .offset-lg-6 {margin-left:50%;}
  .offset-lg-7 {margin-left:58.333333%;}
  .offset-lg-8 {margin-left:66.666667%;}
  .offset-lg-9 {margin-left:75%;}
  .offset-lg-10 {margin-left:83.333333%;}
  .offset-lg-11 {margin-left:91.666667%;}
}
/* MEDIA XL */
@media screen and  (min-width: 1200px){
  .col-xl-1 {float: left; width: 8.333333%;}
  .col-xl-2 {float: left; width: 16.666667%;}
  .col-xl-3 {float: left; width: 25%;}
  .col-xl-4 {float: left; width: 33.333333%;}
  .col-xl-5 {float: left; width: 41.666667%;}
  .col-xl-6 {float: left; width: 50%;}
  .col-xl-7 {float: left; width: 58.333333%;}
  .col-xl-8 {float: left; width: 66.666667%;}
  .col-xl-9 {float: left; width: 75%;}
  .col-xl-10 {float: left; width: 83.333333%;}
  .col-xl-11 {float: left; width: 91.666667%;}
  .col-xl-12 {float: left; width: 100%;}
  .offset-xl-0 {margin-left:0%;}
  .offset-xl-1 {margin-left:8.333333%;}
  .offset-xl-2 {margin-left:16.666667%;}
  .offset-xl-3 {margin-left:25%;}
  .offset-xl-4 {margin-left:33.333333%;}
  .offset-xl-5 {margin-left:41.666667%;}
  .offset-xl-6 {margin-left:50%;}
  .offset-xl-7 {margin-left:58.333333%;}
  .offset-xl-8 {margin-left:66.666667%;}
  .offset-xl-9 {margin-left:75%;}
  .offset-xl-10 {margin-left:83.333333%;}
  .offset-xl-11 {margin-left:91.666667%;}
}

/* HEADER */
.primary-content .content-header .title {
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
}
@media screen and (min-width: 992px) {
    h1.title,
    h1.pane-title {
        font-size: 3rem;
    }
}
@media screen and (max-width: 1300px) {
    .primary-content .content-header .title {
        text-align: center;
    }
}
@media screen and (min-width: 2280px) {
    .primary-content .content-header .title {
    }
}


header.content-header {
    background:#032d4c;
    padding: 1.4rem 1rem;
}

header.content-header h1 {
        color: #fff;
        margin-bottom: 0;
}


/* PAGE STYLING */

body, p {
    font-family: "Nunito", sans-serif;
}

.primary-content {
    min-height: calc(100vh - 167px);
}

header.content-header {
    background: #032d4c;
    padding: 3rem 1rem;
}

.page-node .primary-content .content-header .title {
    max-width: 1140px;
}

.primary-content .content-header .title {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Nunito", sans-serif;
    text-transform: uppercase;
}

header.content-header h1 {
    color: #fff;
    margin-bottom: 0;
}
header.content-header h2 {
   color: #5fb6ce;
}

.title {
        max-width: 1140px;
}

article {
        max-width: 768px;
        margin: 0 auto;
        padding: 3rem 1rem 4rem 1rem;
}

section.presence {
    background: #F1F1F1;
    overflow: hidden;
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    border: 1px solid #ddd;
}

section.presence .submit {
      font-family: "Nunito", sans-serif;
      font-weight: bold;
      font-size: 1.4em;
      padding: .5em .7em;
      padding-left: 58px;
      border: none;
      cursor: pointer;
      display: block;
      margin: auto;
      background: url('schoenen.png') #fff no-repeat .5em 14px;
      box-shadow: 4px 4px .5em rgba(1,1,1,.3);
}

section.presence .submit:hover {
   background-color: #032d4c;
   color: #fff;
}
section.presence h1 {
   margin: 0;
}
section.presence form  {
 margin-top: .5em;
}

form.submitted .submit {
  display: none;
}

@media screen and (min-width: 720px){
        .banner {
                float: right;
                margin-left: .5rem;
                max-width: 50%;
        }
}

.footer-short {
    text-align: center;
    color: #3ba3bf;
    background: #5fb6ce;
    padding: 6rem 1rem 1rem 1rem;
}

.footer-short p {
    font-size: .8rem;
    margin-bottom: 0;
}

.footer-short a {
    color: #3ba3bf;
}