/* Responsive CSS */

/*:: RESPONSIVE TABLES */
.stacktable {
    width: 100%;
}

.stacktable th,
.stacktable td {
    border: none;
}

.st-head-row {
    background-color: var(--zonniggroen);
    border-top: 1px solid var(--white) !important;
}

.st-head-row a {
    color: var(--white);
}

.st-head-row.st-head-row-main {
    font-size: 1.1em;
}

.st-key {
    width: 49%;
    text-align: left;
    padding-right: 1%;
}

.st-val {
    width: 49%;
    padding-left: 1%;
}

/* RESPONSIVE EXAMPLE */
/* .stacktable.large-only { display: table; table-layout: fixed} */
.stacktable.large-only {
    display: table;
}

.stacktable.small-only,
header .button {
    display: none;
}

/* :: SMALLER DESKTOPS ///////////////////////////////////////////////////////////////////*/
@media all and (max-width:1142px) {

    .container {
        width: 100%;
    }

    .container.default {
        padding: 32px;
    }

    header:after {
        height: 100px;
    }

    header .container {
        height: 150px;
    }

    header .logo {
        height: 100px;
        width: 185px;
        background-size: 140px 65px;
        background-position: center center;
        z-index: 20;
    }

    header .logo:after {
        border-width: 50px 0 50px 50px;
        right: -50px;
    }

    header .header-top {
        height: 50px;
    }

    .home .subhead {
        padding-left: 20px;
        padding-right: 40px;
    }

    .home .page .row .container {
        padding-right: 28px !important;
        padding-left: 28px !important;
    }

    .home .row.special .row.grid .col {
        margin: 0 16px 0 0;
        width: calc(33.3333% - 16px);
        overflow: hidden;
    }

    footer .row.first,
    footer .row.first .col-md-4,
    footer .row.first:before,
    footer .row.first .col-md-8 {
        height: 80px;
    }

    footer .row.first:after {
        height: 40px;
    }

    footer .row.first .col-md-4:before {
        border-width: 40px 0 40px 40px;
        right: -40px;
    }

    footer .row.first .contact.head span {
        font-size: 24px;
        line-height: 24px;
        max-width: 270px;
        padding-left: 30px;
    }

    footer .row.first .col-md-8 {
        height: 80px;
    }

    footer .row.second,
    footer .row.last {
        padding: 50px 28px;
    }

    footer .row.first .contact.address {
        line-height: 40px;
        text-indent: 30px;
    }

    footer a.niaz {
        display: none
    }

    footer .social {
        right: 70px;
    }


    header .nav-main:before {
        border-width: 50px 50px 50px 0;
        left: -50px;
    }

    .nav-main {
        width: calc(100% - 235px)
    }

    .nav-main,
    .nav-main li a {
        height: 100px;
    }

    .nav-main li a {
        display: block;
        padding: 10px;
        overflow: hidden;
    }

    .nav-main li a span {
        display: block;
        font-size: 14px;
        margin-top: 10px;
    }

    .nav-meta a,
    .search input,
    .login {
        height: 33px;
        line-height: 33px;
    }

    form .triangle,
    header .login:after {
        border-width: 16px 0 16px 16px;
        margin-right: 4px;
    }

}

/* :: TABLETS ///////////////////////////////////////////////////////////////////*/
@media all and (max-width:980px) {

    /*Hidden items*/
    .nav-meta,
    .search,
    .login,
    .functions {
        display: none;
    }

    h1 {
        font-size: 24px;
        line-height: 24px
    }

    /* :: Layout */
    header:after {
        display: none;
    }

    header .container {
        background: var(--lichtgrijs);
    }

    header .logo,
    header .container,
    header:before,
    .subhead:before {
        height: 100px;
    }

    body.fixed header .logo {
        position: fixed;
        z-index: 20;
    }

    header .header-top {
        background: var(--zonniggroen);
        height: 50px;
        width: calc(100% - 235px);
        right: 0;
        position: fixed;
    }

    header .header-top:before {
        content: "";
        display: block;
        left: -50px;
        top: 0;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 50px 50px 0;
        border-color: transparent var(--zonniggroen) transparent transparent;
    }

    .home .row .container {
        padding: 0 0 32px 0;
    }

    .home .subhead {
        height: 396px;
    }

    .home .subhead:before {
        height: 446px;
        top: -50px;
    }

    .home .subhead .content h2 {
        font-size: 50px;
        line-height: 50px;
    }

    .home .subhead .content p {
        display: none;
    }

    .home .subhead .content p:last-of-type {
        display: block;
    }

    .home .subhead .content a.cta {
        font-size: 18px;
        margin: 0;
    }

    .row.first .col:first-of-type {
        top: -62px;
    }

    .home .row.first .col,
    .home .row.last .col {
        float: left;
        width: 50%;
    }

    .home .row.first .col:first-of-type,
    .home .row.last .col:first-of-type {
        width: 50%;
    }

    .home .row.last .col:last-of-type {
        clear: both;
    }

    .home .row.special .row.grid .col {
        float: left;
        margin: 0 16px 0 0;
        width: calc(50% - 16px);
        overflow: hidden;
    }

    .home .page .row .container h2 {
        height: 62px;
        line-height: 62px;
        font-size: 24px;
    }

    .row.first .col:last-of-type,
    .row.first .col:last-of-type h2 {
        line-height: inherit;
    }

    .home .page .row .container,
    .no-padding {
        padding-right: 32px !important;
        padding-left: 32px !important;
    }

    .no-padding .no-padding {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .row.odd:before,
    .row.even:before {
        height: 62px;
        width: 32px;
        z-index: 99;
    }

    section.portal.container {
        padding: 40px;
    }

    section.portal .col {
        float: none;
        max-width: 560px;
    }

    body.vacatures .intro,
    body.vacatures .intro .container {
        height: auto;
    }

    body.vacatures.home section.intro {
        background: var(--white)
    }

    body.vacatures .intro .container {
        padding: 0 30px 45px 30px;
    }

    body.vacatures.home section.intro .col-01,
    body.vacatures .intro .col-01,
    body.vacatures.single .intro .col-01 {
        top: 0;
        left: -30px;
        width: calc(100% + 60px);
        padding: 30px 30px 45px 30px;
        max-width: inherit;
    }

    body.vacatures .intro .col-01,
    body.vacatures.single .intro .col-01 {
        padding-bottom: 90px;
    }

    body.vacatures.home section.content {
        top: 80px;
        margin-bottom: 80px;
    }

    body.vacatures.home section.content .container {
        display: table;
    }

    body.vacatures.home section.content .col-md-4 {
        display: table-footer-group;
        width: 100%;
    }

    body.vacatures.home .intro .col-02 .csc-default,
    body.vacatures .intro .col-02 .csc-default {
        width: 275px;
        height: 90px;
        right: -30px;
        bottom: -90px;
    }

    body.vacatures.home .intro .col-02::before,
    body.vacatures .intro .col-02::before {
        border-width: 45px 45px 45px 0;
        bottom: -90px;
        left: auto;
        right: 245px;
    }

    body.vacatures .intro .col-02::before,
    body.vacatures .intro .col-02 .csc-default {
        bottom: -45px;
    }


    body.vacatures.home .intro::before,
    body.vacatures .intro::before,
    body.vacatures .intro .col-01::after {
        display: none;
    }

    body.vacatures .container.split {
        margin-top: 0;
    }

    body.vacatures .container.split .col-01 {
        padding: 0;
    }

    body.vacatures .portal-sitemap {
        max-width: 360px;
    }

    body.vacatures.sub .intro {
        margin-bottom: 45px;
    }

    body.vacatures.sub.single .intro {
        margin-bottom: 90px;
    }

    body.vacatures section.bottom .container {
        padding: 30px
    }

    .quote,
    .vac-nav-item {
        float: none;
        margin: 0 auto 40px auto !important;
    }

    .bottom .quote {
        position: inherit;
        right: auto;
        top: auto;
    }

    body.vacatures.single .content .col-md-5,
    body.vacatures.single .content .col-md-4.pull-right {
        padding-top: 0;
        width: 100%;
    }

    .tx-pn-listfeusers {
        margin: 0 -20px;
    }

    .tx-pn-listfeusers .user {
        margin: 0 20px 20px 20px;
        width: calc(50% - 40px);
    }

    #tx_jobfair-show-actionlist {
        margin: 40px -30px;
    }

    #tx_jobfair-show-actionlist .row,
    #tx_jobfair-show-actionlist .col-02 .row {
        height: auto;
    }

    #tx_jobfair-show-actionlist .col-01,
    #tx_jobfair-show-actionlist .col-02 {
        background: var(--donkergrijs);
        margin: 0;
        width: 100%;
    }

    #tx_jobfair-show-actionlist .col-01 .table-cell,
    #tx_jobfair-show-actionlist .col-02 .table-cell {
        padding: 20px 30px;
    }

    #tx_jobfair-show-actionlist .aqua::after,
    #tx_jobfair-show-actionlist .wit::after,
    #tx_jobfair-show-actionlist .donkergrijs::before,
    #tx_jobfair-show-actionlist .donkergrijs::after,
    #tx_jobfair-show-actionlist .wit::before {
        display: none;
    }

    .tx_jobfair.single .intro .col-02 {
        right: 0;
    }

    /* :: Navigation ////////////*/
    /* Buttons */
    header a,
    header a:hover,
    header a:active {
        text-decoration: none !important;
    }

    header .button-menu,
    header .button-search {
        background: url('../img/hamburger.svg') no-repeat right center;
        color: var(--white);
        display: block;
        line-height: 42px;
        height: 40px;
        width: 70px;
        right: 25px;
        top: 0px;
        position: absolute;
        text-transform: uppercase;
    }

    header .button-menu.open {
        background-image: url('../img/close.svg');
    }

    header .button-search {
        background-image: url('../img/icon-search-white.svg');
        right: 120px;
    }

    body.fixed .search,
    body.fixed .nav-meta,
    body.fixed .login {
        display: block;
        position: absolute;
    }

    body.fixed .search {
        top: 70px;
        right: 30px;
        width: calc(100% - 100px)
    }

    body.fixed .search input[type="text"] {
        background: var(--white)
    }

    body.fixed .nav-meta,
    body.fixed .login {
        top: auto;
        bottom: -280px;
    }

    body.fixed .nav-meta {
        left: -180px
    }

    body.fixed .login {
        right: 40px;
    }

    footer .row.first .col-md-8:before {
        left: 290px;
    }

    footer .row.second .col-md-6 {
        float: left;
        width: 50%;
    }

    footer .row.second .col-md-6 .col-md-6 {
        width: 100%;
    }

    footer .row.second .col-md-6 .col-md-6:last-of-type {
        display: none
    }

    footer .row.first .col-md-8 {
        height: 10px;
    }

    footer .contact.address {
        font-family: var(--font-bold);
        margin: 0 0 32px 0;
    }

    footer .contact.address a,
    footer .contact.address span {
        display: block;
    }

    footer .row.second,
    footer .row.last {
        padding: 32px 0;
    }

    .social li a {
        font-size: 20px;
    }

    .nav-main {
        background: var(--lichtgrijs);
        display: none;
        height: auto;
        padding: 100px 0 0;
        position: fixed;
        z-index: 11;
    }

    .nav-main.open {
        display: block;
        top: 50px;
        height: 300px;
        width: 100%;
    }

    .nav-main.open ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .nav-main.open ul li {
        max-width: 100%;
    }

    .nav-sub {
        margin: 0 0 32px 0;
    }

    .nav-sub h2.show-on-phones {
        margin-bottom: 20px;
    }

    .nav-sub h2.leveltitle {
        background: var(--donkergrijs);
        display: block;
        cursor: pointer;
        margin: 0;
        padding: 10px;
        position: relative;
    }

    .nav-sub.open {
        background: var(--lichtgrijs);
    }

    .nav-sub h2.leveltitle:after,
    .nav-footer h2:after {
        content: "\f107";
        font-size: 34px;
        right: 10px;
        top: 4px;
        position: absolute;
    }

    .nav-sub.open h2.leveltitle:after,
    .nav-footer h2.open:after {
        content: "\f106";
    }

    .nav-sub li {
        padding: 2px 10px;
    }

    .nav-footer {
        width: 50%;
    }

    .nav-footer h2:after {
        font-size: 24px;
        top: 0;
        right: 0;
    }

    .nav-footer .csc-default {
        width: 100%;
    }

    /* :: Extensions ///////////*/
    .news-latest-item {
        max-width: calc(50% - 32px);
        padding-bottom: 32px;
    }

    h2.special {
        margin: 0 0 10px 0;
    }

    .tx-listfeusers-pi1 {
        margin: 0 -32px 32px 0;
    }

    .tx-listfeusers-pi1 .user {
        margin: 0 32px 32px 0;
        width: calc(50% - 32px);
    }

    footer .powermail_fieldwrap {
        display: block;
        margin: 0 0 10px 0;
        width: 100%;
    }

    footer .powermail_fieldwrap.powermail_fieldwrap_type_submit {
        bottom: 10px;
    }

    form .triangle {
        border-color: transparent transparent transparent var(--white)
    }

}

/* :: MOBILES ///////////////////////////////////////////////////////////////////*/
@media all and (max-width:580px) {

    body.fixed {
        overflow: hidden;
    }

    .frame.frame-layout-1 a {
        display: block;
    }

    /* :: Layout */
    body.home header .button-search,
    body.home .subhead .content p,
    body.home .subhead .content p:last-of-type {
        display: none;
    }

    body.home .subhead .search {
        display: block;
        top: 45px;
    }

    body.home .subhead .search input[type="text"] {
        background: var(--white);
    }

    header,
    header .logo,
    header .container,
    header:before,
    header:after,
    .subhead:before {
        height: 80px;
    }

    header .logo:after {
        border-width: 40px 0 40px 40px;
        right: -40px;
    }

    header .logo {
        background-size: 112px 51px;
        width: 155px;
    }

    header .header-top {
        height: 40px;
        width: calc(100% - 195px);
    }

    header .header-top:before {
        border-width: 0 40px 40px 0;
        left: -40px;
    }

    header .button-menu {
        right: 15px;
    }

    .container.default {
        padding: 60px 20px;
    }

    .row.special .row.grid .col {
        overflow: hidden;
        width: calc(100% - 20px)
    }

    .row.first .container .col,
    .row.first .col:first-of-type {
        padding-top: 0;
        top: 0;
    }

    .row.first .col:first-of-type .cta {
        font-size: 18px;
    }

    .home .subhead .container,
    .home .subhead .content {
        padding: 0 !important;
    }

    .home .row.special .row.grid .col {
        width: calc(100% - 16px)
    }

    .home .row.first .col,
    .home .row.last .col,
    .home .row.first .col:first-of-type,
    .home .row.last .col:first-of-type,
    .frame-abc li,
    .portal-sitemap ul li.level1,
    footer .row.second .col-md-6 {
        width: 100%;
    }

    .row.odd:before,
    .row.even:before {
        display: none;
    }

    /* Homepage */
    .home ul li a.cta {
        width: 100%;
    }

    .home .subhead,
    body.portal .subhead {
        height: 190px;
        padding-top: 20px;
    }

    .home .subhead:before {
        height: 330px;
        top: -75px;
    }

    .home .subhead .content h2 {
        font-size: 26px;
        line-height: 26px;
    }

    .home .subhead .content a.cta {
        font-size: 14px;
    }

    .home .page .row.special .container h2,
    .home .page .row.news .container h2,
    .home .page .row .container .col:first-of-type h2 {
        line-height: 1.1em;
        text-indent: 0;
    }

    .home .page .row.first .container .threecols .col:first-child h2 {
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .home .page .row .container,
    .no-padding {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .no-padding .no-padding .no-padding {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    body.home.fixed .subhead:before {
        background: var(--lichtgrijs)
    }

    body.vacatures.home .subhead h1 {
        font-size: 26px;
        line-height: 26px;
        max-width: 100%;
    }

    body.vacatures.home .intro p {
        font-size: 18px;
        line-height: 22px;
    }

    body.vacatures .intro .container {
        padding: 0 30px;
    }

    body.vacatures .intro h2,
    .tx_jobfair.single .intro .col-02 h2 {
        font-size: 24px;
        line-height: 26px;
    }

    body.vacatures .intro .col-02 .csc-default h2 {
        padding-right: 30px;
    }

    body.home .page .row.no-gutters .container h2 {
        text-indent: 0;
    }

    body.vacatures.home section.content {
        top: 40px;
    }

    .tx_jobfair.single h1 {
        margin: auto;
    }

    #tx_jobfair-show-actionlist {
        display: block;
    }

    .tx-pn-listfeusers {
        flex-direction: row;
        margin: 0;
    }

    .tx-pn-listfeusers .user {
        margin: 0 0 20px 0;
        width: 100%;
    }

    /* Footer */
    footer .row.first {
        height: auto;
    }

    footer .row.first .col-md-4 {
        height: 84px;
        width: calc(100% - 52px)
    }

    footer .row.first .col-md-4:before {
        border-width: 42px 0 42px 42px;
        right: -42px;
    }

    footer .row.first .col-md-4:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 42px 42px;
        border-color: transparent transparent var(--grasgroen) transparent;
        right: -42px;
        bottom: 0;
        position: absolute;
    }

    footer .row.first .col-md-8 {
        background: var(--grasgroen);
        height: auto;
    }

    footer .row.first .contact.head span {
        font-size: 24px;
        margin: 0 20px;
    }

    footer .row.first .contact.address {
        line-height: 22px;
        text-indent: 0;
        padding: 20px;
    }

    footer .row.first .contact.address span {
        display: inline-block;
    }

    footer .row.first .contact.address a {
        display: block;
    }

    footer .row.first .contact.address:before {
        display: none;
    }

    footer .row.second {
        margin: 0;
    }

    footer .row.second,
    footer .row.last {
        padding: 30px 0;
    }

    footer form legend {
        display: block;
        color: var(--white);
    }

    footer form li input[type="text"] {
        margin: 0 0 10px 0;
        max-width: 100%
    }

    footer form li input[type="submit"] {
        bottom: 10px;
        max-width: 120px
    }

    footer form .triangle {
        bottom: 10px;
        top: auto;
        right: 101px;
    }

    footer form a {
        display: none;
    }

    footer .icons ul {
        margin: 0;
    }

    footer .icons li {
        height: 125px;
    }

    footer .icons li a {
        font-size: 12px;
        padding: 5px 15px;
    }

    footer .social {
        height: 130px;
        margin: auto;
        position: relative;
        right: auto;
        bottom: auto;
        top: auto;
    }

    /* :: Forms */
    .powermail_radio_outer,
    .powermail_captcha_outer,
    .powermail_check_outer,
    .powermail_captchaimage {
        width: 100%;
    }

    .formError .formErrorContent {
        margin-left: -111px;
    }

    /* :: Tables */
    .stacktable.large-only {
        display: none;
    }

    .stacktable.small-only {
        display: table;
    }

    /* :: Navigation */
    body.fixed .nav-meta,
    body.fixed .login,
    body.fixed .search {
        display: block;
        right: 0;
        top: 80px;
        position: fixed;
        z-index: 20;
        width: 100%;
    }

    body.fixed .nav-meta {
        left: -10px;
        top: 540px;
        bottom: auto;
    }

    body.fixed .nav-meta ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    body.fixed .nav-meta ul li {
        -webkit-box-flex: 1;
        -ms-flex: auto;
        flex: auto;
        text-align: center;
    }

    body.fixed .nav-meta {
        top: auto;
        bottom: 10px;
    }

    body.fixed .login {
        display: table;
        line-height: 16px;
        max-width: 50%;
        right: 0;

        background: var(--white);
        color: var(--aqua);
        font-family: var(--font-bold);
        font-size: 16px;
        height: 120px;
        margin: 0;
        max-width: 33.333%;
        top: 410px;
        right: 33.333%;
        text-align: center;
        text-indent: 0;

        display: none !important;
    }

    body.fixed .login span {
        display: table-cell;
        padding: 0 20px;
        vertical-align: middle;
    }

    header .login:after {
        border-width: 60px 0 60px 60px;
        border-color: transparent transparent transparent var(--white);
        right: -60px;
    }

    header .login svg,
    header .login .fa {
        display: none;
    }

    body.fixed .search {
        top: 100px;
        right: 20px;
        width: calc(100% - 40px)
    }

    .nav-main.open {
        position: fixed;
        top: 40px;
        padding: 130px 0 0;
        height: 100%;
    }

    .nav-main.open ul {
        display: block
    }

    .nav-main.open ul li {
        max-width: 50%;
    }

    .nav-main.open ul li a {
        display: table;
        height: 120px;
        padding: 20px 10px;
    }

    .nav-main.open ul li a {
        height: 76px;
    }

    .nav-main.open a.mijn-ijsseland {
        background: var(--white);
        color: var(--aqua);
        font-family: var(--font-bold);
    }

    .nav-main li a span {
        display: table-cell;
        margin-top: 0;
        vertical-align: middle;
    }

    .nav-main li a::before {
        display: none;
    }

    .nav-sub,
    .nav-sub h2.show-on-phones {
        margin-bottom: 34px;
    }

    .nav-sub .index {
        display: block;
    }

    .nav-sub h2.leveltitle {
        padding: 8px 30px 8px 8px;
    }

    .nav-sub li {
        padding: 2px 10px;
    }

    .nav-sub li a {
        padding: 3px 0 3px 15px
    }

    .nav-footer {
        margin: 0 0 40px 0;
        overflow: auto;
        width: 100%;
    }

    .nav-footer .csc-default {
        width: 100%;
    }

    .nav-footer li {
        margin: 5px 0;
    }

    .nav-footert li a {
        font-size: 14px;
    }

    .nav-sub h2.open:after,
    .nav-footer h2.open:after {
        content: "\f106"
    }

    section.bottom nav {
        display: block;
    }

    /* :: Extensions */
    .news-latest-container,
    .news-list-container {
        margin: 0 5px;
    }

    .news-latest-item,
    .news-list-item {
        float: none;
        margin: 0 0 20px 0;
        max-width: 100%;
    }

    .news-single-img {
        float: none;
        margin: 0 0 1em 0;
    }

    .news-single-img img {
        height: auto;
        width: 100%;
    }

    p.news-single-imgcaption {
        width: auto !important;
        margin-bottom: 1.5em;
    }

    .tx-listfeusers-pi1 {
        margin: 0;
    }

    .tx-listfeusers-pi1 .user {
        margin: 0 0 20px 0;
        width: 100%;
    }

    ul.events-list.all li {
        width: calc(100% - 12px);
    }

    .tx_jobfair.table {
        margin: 0 -30px;
        /* width: calc(100% + 50px); */
        max-width: inherit
    }

    .tx_jobfair.table tr th,
    .tx_jobfair.table tr td {
        display: none;
    }

    .tx_jobfair.table tr td:first-of-type {
        display: table-cell;
        padding: 10px
    }

    body.vacatures .row.vacatures h2 {
        text-indent: 10px;
    }

    body.vacatures.home .tx_jobfair.table tr td:first-of-type {
        padding-left: 40px
    }

    body.vacatures.sub .tx_jobfair form legend {
        display: none;
    }

    body.vacatures.sub .tx_jobfair.table {
        margin: auto
    }

    .tx_jobfair form.filterForm {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .tx_jobfair form .control-label,
    .tx_jobfair-filter-content {
        width: 100%;
    }

    .tx_jobfair form .control-label label {
        text-indent: 20px
    }

    .tx_jobfair.table a {
        display: block
    }

    #tx_jobfair-latest-actionlist {
        left: -20px;
        position: relative;
    }

    .feedback {
        top: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow: inherit;
    }

    .feedback.open {
        bottom: 0;
    }

    .feedback h2 {
        transform: rotate(0deg);
        top: -30px;
        right: 0;
        width: 100%;
    }

    .feedback .ce-textpic {
        display: none;
    }

    .feedback.open .ce-textpic {
        display: block;
    }

    .frame-type-table .header-wrap h2,
    .frame-type-table .header-wrap h3 {
        flex: 0 0 51.5%;
    }

    .frame-type-table h2 a,
    .frame-type-table h3 {
        font-size: 18px;
    }

    .frame-type-table .header-wrap:before {
        border-color: transparent var(--white) transparent transparent
    }


    /* Mobile tables */
    /* force DL layout on really small screens like portrait iPhone */
    table.ce-table thead,
    table.ce-table tbody,
    table.ce-table th,
    table.ce-table td,
    table.ce-table tr {
        background: var(--white);
        display: block;
    }

    .ce-table tfoot th,
    .ce-table tfoot td {
        background-color: transparent;
        display: block;
    }

    .ce-table th {
        padding-left: 1em;
        background-color: var(--zonniggroen);
        font-weight: bold;
    }

    .ce-table th[title],
    .ce-table th[data-title] {
        color: #212121;
        font-size: 1rem;
        border-bottom: 2px solid #dadada;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .ce-table td {
        border: none !important;
        position: relative;
        margin-left: 50%;
        padding: 0 0.25em;
        width: 50%;
        hyphens: auto;
    }

    .ce-table td:empty {
        display: none;
    }

    .ce-table thead + tbody tr {
        float: left;
        padding: 0.5em 0;
        width: 100%;
    }

    .ce-table thead + tbody tr:nth-of-type(2n) {
        background: var(--lichtgrijs);
    }

    .ce-table th[title]:before,
    .ce-table td[title]:before,
    .ce-table th[data-title]:before,
    .ce-table td[data-title]:before {
        padding-top: 3px !important;
        padding-bottom: 0 !important;
        content: attr(data-title);
        margin-left: -100%;
        width: 100%;
        display: inline-block;
        white-space: normal;
        border-bottom: none !important;
    }

    .ce-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .ce-table {
        display: table;
        margin-bottom: 2em;
    }

    /* :: Mobile view end */
}

@media all and (max-width:320px) {

    section.portal.container {
        padding: 40px 20px;
    }

    .nav-main.open ul li {
        max-width: 50%;
    }

    .nav-main.open ul li a {
        height: 65px;
        padding: 15px 10px;
    }

    .csc-textpic-imagewrap {
        float: none !important;
    }

    .csc-textpic-text {
        margin: 0 !important;
    }

    body.fixed .login {
        height: 80px;
        top: 410px;
    }
}

/* :: Mobile Visibility Affordances
---------------------------------------------------*/
.show-on-phones {
    display: none !important;
}

.show-on-tablets {
    display: none !important;
}

.show-on-desktops {
    display: block !important;
}

.hide-on-phones {
    display: block !important;
}

.hide-on-tablets {
    display: block !important;
}

.hide-on-desktops {
    display: none !important;
}


@media all and (max-width:956px) {
    .hide-on-desktops {
        display: block !important;
    }

    .show-on-tablets {
        display: block !important;
    }

    .show-on-desktops {
        display: none !important;
    }
}


@media all and (max-width:580px) {
    .hide-on-phones {
        display: none !important;
    }

    .show-on-phones {
        display: block !important;
    }
}