@font-face {
     font-family: Archia;
     src: url(../font/archia-regular-webfont.woff2) format('woff2'), url(../font/archia-regular-webfont.woff) format("woff")
}
 body {
     font-family: Archia;
     background-color: #fff;
     margin: 0;
     overflow-x: hidden
}
 .fixed {
     position: fixed;
     top: 0;
     left: 0
}
 .padding-header {
     height: 100px
}
 #header {
     width: 100%;
     margin: 0 auto;
     margin: 0
}
 #header li {
     display: inline-block;
     margin-right: 25px;
     font-size: 17px;
     color: #fff;
     font-weight: 700;
     cursor: pointer
}
 .sticky-header {
     padding-top: 1%
}
 .logo {
     max-height: 200px;
     padding-bottom: 30px
}
 .align-right {
     text-align: right
}
 .home-content {
     position: absolute;
     top: 50%;
     left: 50%;
     text-align: center;
     transform: translate(-50%, -50%);
     color: white;
     font-size: 100px;
      pointer-events: none;
}
 .slogan {
     color: #fff;
     text-align: center;
     font-size: 32px;
}
 .block{
     display: block;
}
 .clickable {
     display: flex!important;
     justify-content: center;
     align-content: center;
     flex-direction: column;
     text-align: center;
     margin-top: 10vh
}
 .about {
     background-color: #fdd2c8;
     color: #000;
     padding: 10vh;
     margin-bottom: 2vh;
     margin-top: 10vh
}
 .bg {
     background-image: url(../images/backGroundH.jpg);
     height: 50%;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover
}
 .yellow-BG {
     background-color: #cee526;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover
}
 .lila-BG {
     background-color: #f0f0f5;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover
}
 .black-BG {
     background-color: #000;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover
}
 .button {
     cursor: pointer;
     background-color: #fdd2c8;
     border: 5px solid #fdd2c8;
     color: #000;
     padding: 20px;
     text-align: center;
     text-size: 30px;
     display: inline-block;
     font-size: 18px;
     margin-bottom: 4px;
     font-family: Archia;
     font-weight: 700
}
 .button:hover {
     background-color: Transparent;
     border: 5px solid #fdd2c8;
     color: #000;
     padding: 20px;
     text-align: center;
     text-size: 30px;
     display: inline-block;
     font-size: 18px;
     margin-bottom: 4px;
     font-family: Archia;
     font-weight: 700
}
 .lila-white-text {
     text-size: 30px;
     color: #000;
     background-color: #fdd2c8;
     padding: 2vh
}
 .meedoen {
     color: white;
     font-size: 18px;
     text-align: center
}
 .black-text {
     color: #000
}
 .white-text {
     color: white
}
 .icon {
     max-height: 50px
}
 .icon-list {
     position: absolute;
     bottom: 10px
}
 .contact-list{
     padding-top: 2vh;
     display:inline-block;
     vertical-align: top;
     margin-block-start: 0em!important;
     padding-inline-start: 0px!important;
}
 .home-height {
     height: 100vh
}
 ul {
     list-style-type: none
}
 .portret {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 10vh;
     width: 50%
}
 .logo-white-yellow {
     background-image: url(../images/logoWit.png);
     background-color: #cee526;
     background-size: contain;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: bottom right;
     max-height: 100%
}
 .person-text {
     padding: 10vh
}
 .margin-top {
     margin-top: 10vh!important
}
 .padding-top {
     padding-top: 10vh!important
}
 .margin-bottom {
     margin-bottom: 10vh!important
}
 .form {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 100%
}
 .align-center {
     text-align: center!important;
}
 .contact-button {
     background-color: #fff;
     border: #fff;
     color: #000;
     padding: 20px;
     text-align: center;
     text-size: 30px;
     display: inline-block;
     font-size: 18px;
     margin: 4px 2px;
     font-family: Archia;
     font-weight: 700;
     cursor: pointer;
     max-width: 50vh
}
 .logo-white-BG {
     background-image: url(../images/logoWit.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: bottom right;
     max-height: 100%
}
 .logo-orange-BG {
     background-image: url(../images/logoOranje.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: bottom right;
     max-height: 100%
}
 .logo-yellow-BG {
     background-image: url(../images/logoGeel.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: bottom right;
     max-height: 100%
}
 .no-margin-top{
     margin-top: 0px;
}
 .justify {
     text-align:justify;
}
 @media (min-width: 481px){
     .infographic{
         max-height: 80vh;
         max-width: 100vw;
         text-align: center;
         width: auto;
    }
}
 @media screen and (max-width: 481px) {
     .about {
         background-color: #fdd2c8;
         color: #000;
         padding-left: 2vw;
         padding-right: 2vw;
    }
     .infographic{
         max-height: 100vh;
         max-width: 98vw;
         text-align: center;
         width: auto;
    }
     .home-content {
         bottom: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         display: flex;
         position: absolute;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 16vw;
         position: absolute;
         top: 0%;
         left: 0%;
         text-align: center;
         transform: none;
         pointer-events: none;
    }
     .mobile-padding{
         padding-left: 2vw;
         padding-right: 2vw;
    }
     .logo-orange-BG {
         background-image: none;
    }
     .logo-yellow-BG {
         background-image:none;
    }

    .logo-white-yellow {
         background-image: none;
    }
}
/*----------------------------------------------------------------------------------------------*/
/*GRID STYLING*/
 .col {
     display: block;
     float: left;
     margin: 0 0 1% 1.6%
}

.colNM {
    display: block;
    float: left;
    margin: 0 0 0% 1.6%
}
 @media screen and (max-width: 481px) {
    .colNM{
        display: block;
        float: left;
        margin: 0 0 0 0;
    }
 }

 .col:first-child {
     margin-left: 0
}
 .group:after, .group:before {
     content: "";
     display: table
}
 .group:after {
     clear: both
}
 .group {
     zoom: 1
}
 .span_3_of_3 {
     width: 100%
}
 .span_2_of_3 {
     width: 66.13%
}
 .span_1_of_3 {
     width: 32.26%;
}
 .span_2_of_2 {
     width: 100%
}
 .span_1_of_2 {
     width: 49.2%
}
 .span_4_of_4 {
     width: 100%
}
 .span_3_of_4 {
     width: 74.6%
}
 .span_2_of_4 {
     width: 49.2%
}
 .span_1_of_4 {
     width: 23.8%
}
 .span_6_of_6 {
     width: 100%
}
 .span_5_of_6 {
     width: 83.06%
}
 .span_4_of_6 {
     width: 66.13%
}
 .span_3_of_6 {
     width: 49.2%
}
 .span_2_of_6 {
     width: 32.26%
}
 .span_1_of_6 {
     width: 15.33%
}
 @media only screen and (max-width:480px) {
     .col {
         margin: 1% 0 1% 0
    }
     .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 {
         width: 100%
    }
}
 @media only screen and (max-width:480px) {
     .col {
         margin: 1% 0 1% 0
    }
}
 @media only screen and (max-width:480px) {
     .span_1_of_2, .span_2_of_2 {
         width: 100%
    }
}
 @media only screen and (max-width:480px) {
     .col {
         margin: 1% 0 1% 0
    }
     .span_1_of_3, .span_2_of_3, .span_3_of_3 {
         width: 100%
    }
}
 @media only screen and (max-width:480px) {
     .col {
         margin: 1% 0 1% 0
    }
     .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 {
         width: 100%
    }
}
 .no-margin-bottom {
     margin-bottom: 0px;
}

.no-margin-top {
     margin-top: 0px;
}