/*
Colours
#EFF9FF - Background White
#0082C8 - Blue (NCS)
#009B9B - Viridian Green
*/

html, body {
    background-color: #EFF9FF;
}

h1 {
  font-size: 300%;
  font-weight: 600;
}

h2 {
  font-size: 200%;
  font-weight: 600;
}

h3 {
  font-size: 150%;
  font-weight: 600;
}

h4 {
  font-size: 120%;
  font-weight: 600;
}

h5 {
  font-size: 100%;
  font-weight: 600;
}

h6 {
  font-size: 100%;
  font-weight: 400;
}


.offline {
    filter: grayscale(100%);
}

    .offline .onlyOnline {
        display: none;
    }

    .offline .buttonsOnlyOnline .button {
        display: none;
    }

.onlyOffline {
    display: none;
}

.offline .onlyOffline {
    display: initial;
}

.pointer, .archivebutton {
    cursor: pointer;
}

.opacity50 {
    opacity: 0.5;
}

.fader {
    transition: opacity 0.15s ease-in-out;
    -moz-transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
}

.fade {
    opacity: 0;
}

.unfade {
    opacity: 1;
}

.steps-content a {
    color: #4a4a4a;
}

p {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*
Typography
*/

@font-face {
    font-family: "Px Grotesk Bold";
    src: url("https://db.onlinewebfonts.com/t/175bb37214e59d8e24ee6ea635b2eeff.eot");
    src: url("https://db.onlinewebfonts.com/t/175bb37214e59d8e24ee6ea635b2eeff.eot?#iefix")format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/175bb37214e59d8e24ee6ea635b2eeff.woff2")format("woff2"), url("https://db.onlinewebfonts.com/t/175bb37214e59d8e24ee6ea635b2eeff.woff")format("woff"), url("https://db.onlinewebfonts.com/t/175bb37214e59d8e24ee6ea635b2eeff.ttf")format("truetype"), url("https://db.onlinewebfonts.com/t/175bb37214e59d8e24ee6ea635b2eeff.svg#Px Grotesk Bold")format("svg");
}


h1,
h2,
h3 {
    font-family: 'Px Grotesk Bold', Arial;
    margin-bottom: 10px;
}

h3.logo {
    margin-bottom: 0;
    margin-top: 3px;
}

body {
    font-family: Bliss2, Helvetica, Arial, sans-serif;
}

label.label {
    margin-top: 6px;
}

@media screen and (min-width: 769px) {
    .field-label {
        flex-grow: 2;
    }
}

@media(max-width: 767px) {
    p {
        max-width: 90%;
        margin: 0 auto;
    }
}



/*
Links
*/
.a-menu {
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: opacity 1s ease;
    opacity: 0.8;
}

    .a-menu:hover {
        opacity: 1;
        color: #009B9B !important;
        text-decoration: none;
    }

/*
Wrapper
*/
.section .container,
.hero .hero-body,
.hero .hero-head {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

/*
Some aesthetic improvements
*/
nav {
    padding-top: 20px;
    max-height: 50px;
}

.paragraph, .feature p {
    max-width: 600px;
    line-height: 1.5em;
}

.feature p {
    color: #009B9B;
}

.burger {
    position: absolute;
    top: 0;
    right: 0;
}


/*
Button
*/
.btn {
    margin-top: 20px;
    border-radius: 50px;
    border: none;
    padding: 10px 30px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(253, 186, 52, 1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(253, 186, 52, 1);
    box-shadow: 0px 0px 15px 0px rgba(253, 186, 52, 1);
    transition: opacity 1s ease;
    opacity: 1;
    cursor: pointer;
}

    .btn:hover {
        opacity: 0.8;
    }

/*
Info Feed
*/
#info-feed .columns {
    margin: 0px;
}

#info-feed .box {
    padding-top: 30px;
    padding-bottom: 30px;
}

/*
Features
*/
.feature-img {
    max-width: 60%;
    margin: 0 auto;
}

#features .column {
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-self: center;
}

@media(max-width: 1024px) {
    .reverse-row-order {
        flex-direction: column-reverse;
        display: flex;
    }
}

/*
Start
*/
#start {
    text-align: center;
}

    #start p {
        width: 600px;
        margin: 0 auto;
    }

.social-link {
    padding: 15px;
    color: #FFFFFF !important;
}

.newsletter-input {
    border: none;
    border-bottom: 2px solid #009B9B;
    border-radius: 0% !important;
    box-shadow: none;
    text-align: center;
}

#start .field {
    width: 400px;
    max-width: 80%;
    padding: 20px;
    margin: 0 auto;
}

/*
Footer
*/
#footer p {
    padding: 20px;
}

#footer a {
    color: #FFFFFF !important;
}

.navbar .navbar-brand a, .navbar .navbar-brand a:hover {
    background-color: #EFF9FF;
}

.nav-active {
    font-weight: bold;
}

/* navbar-cb - het menu incoontje linksboven */
#navbar-cb {
    position: absolute;
    left: -9999px;
}

    .touchMenu .navbar-menu,
    #navbar-cb:checked ~ * .navbar-menu {
        display: block;
    }

    .touchMenu .navbar-burger span,
    #navbar-cb:checked ~ * .navbar-burger span {
        background: #000;
    }

@media only screen and (min-width: 769px) {
    .touchMenu .navbar-burger span,
    #navbar-cb:checked ~ * .navbar-burger span {
        background: #fff;
    }
}

.touchMenu .navbar-burger span:nth-child(1),
#navbar-cb:checked ~ * .navbar-burger span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.touchMenu .navbar-burger span:nth-child(2),
#navbar-cb:checked ~ * .navbar-burger span:nth-child(2) {
    opacity: 0;
}

.touchMenu .navbar-burger span:nth-child(3),
#navbar-cb:checked ~ * .navbar-burger span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

.touchMenu .navbar-burger,
#navbar-cb:checked ~ * .navbar-burger {
    z-index: 100;
}

/* New breakpoint menu - tablet size instead of big size */
@media screen and (min-width: 600px) {
    .navbar, .navbar-end, .navbar-menu, .navbar-start {
        align-items: stretch;
        display: flex;
    }

    .navbar-burger {
        display: none;
    }

    .navbar-menu {
        background-color: #EFF9FF;
        box-shadow: none;
        padding: 0;
    }

    .navbar > .container {
        display: flex;
    }

        .container > .navbar .navbar-menu, .navbar > .container .navbar-menu {
            margin-right: -.75rem;
        }

    .navbar-menu {
        flex-grow: 1;
        flex-shrink: 0;
    }

    .navbar-end {
        justify-content: flex-end;
        margin-left: auto;
    }

    .navbar-item, .navbar-link {
        align-items: center;
        display: flex;
    }

    .navbar .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .navbar-dropdown {
        background-color: #EFF9FF;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border-top: 2px solid #dbdbdb;
        box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
        display: none;
        font-size: 0.875rem;
        left: 0;
        min-width: 100%;
        position: absolute;
        top: 100%;
        z-index: 20;
    }

        .navbar-dropdown a.navbar-item {
            padding-right: 3rem;
        }

        .navbar-dropdown .navbar-item {
            padding: 0.375rem 1rem;
            white-space: nowrap;
        }

        .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed {
            border-radius: 6px;
            border-top: none;
            box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
            display: block;
            opacity: 0;
            pointer-events: none;
            top: calc(100% + (-4px));
            transform: translateY(-5px);
            transition-duration: 86ms;
            transition-property: opacity, transform;
        }

    .navbar-item.has-dropdown {
        align-items: stretch;
    }

    .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
        display: block;
    }

        .navbar-dropdown.is-boxed.open,
        .navbar.is-spaced .navbar-item.is-active .navbar-dropdown, .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
}

label.showhide, label.read-more {
    font-weight: bold;
    cursor: pointer;
}

#showhide-1, #showhide-2 {
    position: absolute;
    left: -9999px;
}

.only-show {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 1s ease, opacity 1s ease;
    opacity: 0;
}

#showhide-1:checked ~ .only-show,
#showhide-2:checked ~ .only-show {
    max-height: 300px;
    opacity: 1;
}

#showhide-1:checked ~ * .read-more,
#showhide-2:checked ~ * .read-more {
    display: none;
}



/* loginbox */
.loginbox .hero.is-success {
    background: #F2F6FA;
}

    .loginbox .hero .nav, .loginbox .hero.is-success .nav {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.loginbox .box {
    margin-top: 5rem;
}

.loginbox .avatar {
    margin-top: -70px;
    padding-bottom: 20px;
}

.loginbox input {
    font-weight: 300;
}

.loginbox p {
    font-weight: 700;
}

.loginbox .field {
    padding-bottom: 10px;
}

.loginbox .fa {
    margin-left: 5px;
}

#EditSection {
    position: absolute;
    top: 80px;
    right: 0px;
    width: 40px;
    background-color: #AAA;
    overflow-x: hidden;
    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

    #EditSection:hover {
        width: 250px;
        background-color: #EEE;
    }

    #EditSection > aside {
        width: 250px;
        opacity: 0;
    }

    #EditSection:hover > aside {
        opacity: 1;
    }

/* voor de berichten */
@media only screen and (max-width: 769px) {
    .unbox-mobile {
        box-shadow: none;
        padding: 0;
    }

    .px-0-mobile {
        padding-left: 0;
        padding-right: 0;
    }
}

.msgarchived {
    background: #FAFAFA;
}

    .msgarchived .archivebutton {
        display: none;
    }

.togmail2 {
    border: solid 1px black;
}

.togmail .gmailbutton {
    display: none;
}

.loginfo {
    display: none;
}

.showloginfo .loginfo {
    display: block;
}

.showloginfo .msgshowloginfo {
    display: none;
}

.msgshowloginfo {
    font-size: 32px;
    cursor: pointer;
}

/* nieuw voor de berichten */
li.mess {
    cursor: pointer;
}

    li.mess:not(:last-child) {
        margin-bottom: 0;
        border-bottom: 1px solid #CCC;
    }

    li.mess:hover {
        background-color: #EEE;
    }

    li.mess p {
        color: black;
        margin-bottom: 0;
    }

    li.mess small {
        float: right;
    }

    li.mess .badge {
        float: right;
    }

    li.mess .content p:first-child {
        margin: 0;
    }

.badge {
    padding: 8px 12px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    color: white;
    background-color: hsl(141, 71%, 48%);
    font-size: 10px;
    font-weight: bold;
}

.with-badge {
    padding-top: 8px;
    padding-bottom: 8px;
}

.dont-break-out {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.msglist .content p {
    color: #000;
}

.msglist .name {
    font-weight: bolder;
}

.msglist .left {
    position: relative;
    margin-left: 10px;
    margin-right: 100px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #EEE;
    text-align: left;
    border: 1px solid #AAA;
    border-radius: 10px;
}

.msglist .right {
    position: relative;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 100px;
    padding: 10px;
    background-color: #ECEFE6;
    text-align: left;
    border: 1px solid #A5D65A;
    border-radius: 10px;
}

@media only screen and (max-width: 550px) {
    .msglist .left {
        margin-right: 10%;
        margin-left: 0;
    }

    .msglist .right {
        margin-left: 10%;
        margin-right: 0;
    }
}


.msglist .content {
    padding: 0;
    margin: 0;
}

.msglist .right .timestamp {
    position: absolute;
    font-size: .85em;
    font-weight: 300;
    bottom: 5px;
    right: 9px;
    font-size: 11px;
}

.msglist .left .timestamp {
    position: absolute;
    font-size: .85em;
    font-weight: 300;
    bottom: 5px;
    right: 9px;
    font-size: 11px;
}

.msglist .left:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 15px solid #EEE;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    top: 0;
    left: -15px;
}

.msglist .left:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 17px solid #AAA;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    top: -1px;
    left: -17px;
}

.msglist .right:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 15px solid #ECEFE6;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    bottom: 0;
    right: -15px;
}

.msglist .right:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 17px solid #A5D65A;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    bottom: -1px;
    right: -17px;
}

.msglist .level {
    margin: 10px;
}

    .msglist .level a {
        color: #000;
    }

.msglist li.new-date {
    position: relative;
    margin-bottom: 10px;
    text-align: center;
}

    .msglist li.new-date > div {
        display: inline-block;
        padding: 5px;
        background-color: #4ABDEF;
        border: 1px solid #009CE6;
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
        font-size: 11px;
    }

.fade-end {
    max-height: 120px;
    position: relative;
    overflow: hidden;
}

    .fade-end .read-more {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 30px 0;
        /* "transparent" only works here because == rgba(0,0,0,0) */
        background-image: linear-gradient(to bottom, transparent, white);
    }

li.mess:hover .fade-end .read-more {
    background-image: linear-gradient(to bottom, transparent, #EEE);
}

.fright {
    float: right;
}

.fleft {
    float: left;
}

.absolute {
    position: absolute;
}

.bold {
    font-weight: bold;
}

.match {
    border: 1px solid #48c774;
}

    .match .notification.is-warning {
        border: 1px solid #946C00;
    }

    .match .notification.is-link {
        border: 1px solid #485fc7;
    }

h3 a {
    color: rgb(74, 74, 74);
}

.navbar .breadcrumb li + li::before {
    font-size: 28px;
    margin-top: -12px;
}

.button {
    white-space: initial;
    height: auto;
    min-height: 2.5em;
}

app-ll {
    display: inline;
    font-weight: bold;
}

.actie-box-links a {
    margin-top: 1em;
    margin-bottom: 1em;
}

.breadcrumb h3 {
    font-size: 1.2rem;
    margin-top: 10px;
}

@media screen and (min-width: 1024px) {
    .breadcrumb h3 {
        font-size: 1.5rem;
        margin-top: 0;
    }
}

@media screen and (max-width: 600px) {
    .lang-navbar {
        min-height: 50px;
    }

        .lang-navbar a {
            float: left;
        }

        .lang-navbar .navbar-dropdown {
            padding-top: 0;
        }

            .lang-navbar .navbar-dropdown .navbar-item {
                padding-left: 0;
                padding-right: 0;
            }
}
/* style die niet in de app zit */

.image.is-256x256 {
    height: 256px;
    width: 256px;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.promobox {
    max-width:280px;
}

.promopage a,
.promobox a {
    color: #4a4a4a;
}


/* style die niet in de app zit */

.image.is-256x256 {
    height: 256px;
    width: 256px;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.promobox {
    max-width:280px;
}

.promopage a,
.promobox a {
    color: #4a4a4a;
}

.one-third {
    margin-left: 33%;
    margin-right: 33%;
}


.actietitel {
    margin-right: 50px;
    margin-bottom: 20px;
}

input.short {
    width: 60px;
}
.short-label {
    flex-grow: 0.8;
}

.field:last-child {
  margin-bottom: 0.75rem;
}

.loadingbox {
  padding-left: 40%;
  padding-right: 40%;
}

.modal-background-light {
  background-color: rgba(10, 10, 10, 0.25);
}
li {
  margin-left: 20px;
}

.progress:indeterminate {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}

.cboth {
  clear: both;
}
 .hasi {
  position: relative;
 }
 .hasi > div {
  cursor: pointer;
  position: absolute;
  right: -23px;
  top: 11px;
 }