@import url('https://fonts.dilemmamanager.nl/NunitoSans/stylesheet.css');

body {
	font-family: 'NunitoSans';
	line-height: 1.5rem;
    color: #3C3C3C;
}

@media screen and (max-width: 1024px){
    .sz-navbar-hamburger:before { 
        content:' ';
        width: 1.5rem;
        height: 1.5rem;
        display: block;
        background-image: url('../images/Menu.svg');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .navbar #sz-navbar-check:checked ~ .sz-navbar-hamburger::before {
        content: ' ';
        background-image: url('../images/Sluiten.svg')
    }
}


#cookie-notification {
    position: fixed;
    bottom: 0;
    width: calc(100% - 2rem);
    padding: 0.5rem 1rem;
    background-color: #FFFFFF;
    box-shadow: 0px 0.0625rem 3px rgba(23,33,43,25%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-notification-text {
    margin-right: 0.5rem;
}

@media screen and (max-width: 1024px) {
    #cookie-notification {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .cookie-notification-text {
        flex-grow: 1;
    }
}

.combobox,
.textfield,
.datefield {
    font-family: 'NunitoSans';
    color: #3C3C3C;
	box-sizing: border-box;
}

button {
    font-family: 'NunitoSans';
    font-weight: 700;
    font-size: 1rem;
    height: 2.875rem;
    padding: 0.75rem 1rem;
    border-radius: 0.250rem;
}

h1 {
    color: #1D153E;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 2.5rem;
}

textarea {
    resize: none;
}

input {
    width: 1rem;
    height: 1rem;
}

.button-cancel,
.button-back {
    background-color: #F4F7FC;
    color: #1D153E;
}

.button-cancel:hover,
.button-back:hover {
    background-color: #e4e7ec;
}

.button-send,
.button-forward,
.button-shoppingcart-make-payment,
.button-confirm-submit,
.button-send-invite,
.button-send-reminder,
.button-send-resume,
.button-download-invoice,
.button-download-report,
.button-ask-permission {
    background-color: #342570;
    color: #FFFFFF;
}

.button-send:hover,
.button-forward:hover,
.button-shoppingcart-make-payment:hover,
.button-confirm-submit:hover,
.button-send-invite:hover,
.button-send-reminder:hover,
.button-send-resume:hover,
.button-download-invoice:hover,
.button-download-report:hover,
.button-ask-permission:hover {
    background-color: #1D153E;
}

.button-shoppingcart-delete-product,
.button-cancel-purchase {
    font-size: 1rem;
    font-weight: 700;
    color: #CC2E17;
    border: none;
    background: transparent;
    text-decoration: underline;
    text-decoration-color:  #CC2E17;
}

.button-shoppingcart-delete-product:hover,
.button-cancel-purchase:hover {
    background: transparent;
}

.button-cancel-purchase {
    display: none;
}

.button-confirm-purchase {
    background-color: #F4F7FC;;
    color: #1D153E;
    border: 0.0625rem solid #1D163D;
}

.button-confirm-purchase:hover {
    background-color: #e4e7ec;
}

.button-shoppingcart-continue-shopping,
.button-cancel-payment,
.button-back-to-cart,
.button-expired-back {
    background-color: #F4F7FC;
    color: #1D153E;
}

.button-shoppingcart-continue-shopping:hover,
.button-cancel-payment:hover,
.button-back-to-cart:hover,
.button-expired-back:hover  {
    background-color: #e4e7ec;
}

.button-add-to-cart,
.button-paycredits,
.button-paylater,
.button-payment-success {
    color: #FFFFFF;
    background-color: #FF9D1B;
}

.button-add-to-cart:hover,
.button-paycredits:hover,
.button-paylater:hover,
.button-payment-success:hover {
    background-color: #FC910D;
}

.headerbar .shoppingcart {
    background-image: url("../images/shopping-cart.svg");
    background-size: cover;
    height: 1.5rem;
    width: 1.5rem;
    background-color: transparent;
    color: #FF9D1B;
    position: relative;
    padding: 0;
}

.footer-content {
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
}

.module-login,
.module-error,
.login-error {
    max-width: 77rem;
    margin-left: auto;
    margin-right: auto;
}

.module-error,
.login-error {
    display: flex;
    flex-direction: row;
    padding: 1rem 0;
    background-color: #FFFFFF50;
    margin-top: 1rem;
    border-radius: 0.250rem;
}

.module-login.login-error br {
    display: block;
}

.module-error span,
.login-error span {
    display: inline-block;
    margin-left: 1rem;
    color: #cc2e17 !important;
}

.article-default {
    padding-top: 4rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 4rem;
}

@media screen and (max-width: 1024px) {
    .article-default {
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }  
}


.homepage.article-default {
    padding: 0;
}

/* login thing loaded through the confirm webshop page looks a bit squished, this should fix it. */
.content-webshop-confirm .module-login {
    max-width: unset;
    margin-left: unset;
    margin-right: unset;
}

.content-webshop-confirm .module-login .page-title-login {
    display: none;
}
.headerbar {
    background-color: white;
    transition:background-color 0.5s ease;
}

.headerbar a {
    color: #1D153E;
}

.menu a {
    font-weight: 700;
}

.login-name {
	font-weight: 700;
}

#loginstatus {
    color: #1D153E;
}

#loginstatus > span {
    margin-left: 3rem;
}

#loginstatus .credits .credits-amount {
    margin-left: 0.1rem;
}

ul.submenu {
    white-space: nowrap;
}

ul.submenu li.selected,
ul.submenu li:hover {
    background-color: #f4f7fc;
}

.footer-block-title {
    color: #1d153e ;
}

.footer-block,
.footer-block a {
    color: #3C3C3C;
}

#existinguser a.forgotpassword {
	position:relative;
	left: 6rem;
	top: -3.2rem;
}

.responsive-my-account a {
    color: #FF9D1B;
}

.topbar {
    background-color: #F4F7FC;
    transition:background-color 0.5s ease;
}

#existinguser,
#newuser {
	border-radius: 0.250rem;
	font-weight: 700;
    color: #1D153E;
}

#existinguser > form, 
#newuser > form {
    padding: 0.5rem 0rem;
}

.titleexistinguser, 
.titlenewuser {
    padding: 1.5rem 0rem 0.5rem 0rem;
}

@media screen and (max-width: 1024px){
    .titleexistinguser, .titlenewuser, .page-content, #existinguser > form, #newuser > form {
        padding: 0.5rem;
    }
}

/* fix to remove the space above the checkbox */
#newuser > form:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(21) {
    display: none;
}

/* fix to add whitespace above 'Code' input field */
#newuser > form:nth-child(2) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(19) {
  margin-top: 2.5rem;
}

#existinguser a,
#newuser a,
.td-newuser-termsconditions {
    font-weight: 400;
}

#newuser > form tr:first-child {
	display: none;
}

.td-newuser-header b {
    font-size: 1.125rem;
}

/* this piece of css puts the tr with the register button at the very end of the container */
#newuser form table tbody {
    display: flex;
    flex-direction: column;
}

#newuser > form > table > tbody > tr:nth-child(20){
    order: 1;
}
/* end of hacky css */

.module-login,
.module-login a {
	color: #3C3C3C;
}

.module-login button {
	border-radius: 0.250rem;
	background-color: #1D153E;
	font-size: 1rem;
	font-weight: 700;
	color: #FFFFFF;
}

.module-login.content-article h1 {
    color: #FFFFFF;
    font-size: 2.125rem;
    margin: 1.5rem 0;
}

.td-existinguser-label {
	width: auto !important;
}

.dark-grey-border {
    border-right: 0.0625rem #3C3C3C30 solid;
}

.red-background {
    background-color: #CC2E17;
}

.orange-background {
    background-color: #FF9D1B;
}

.orange-background:hover {
    background-color: #FC910D;
}

.border-radius {
    border-radius: 0.250rem;
}

button {
    border: none;
}

/* ensure some padding is created so the fixed headerbar doesnt hide content */
.container {
    padding-top: 8.5rem;
}

@media screen and (max-width: 1024px){
    .container {
        padding-top: 4rem;
    }

    .module-login.content-article h1 {
        color: #1D153E;
    }

    h1.page-title-login {
        display: none;
    }
}

/* homepage css */
body.menuitem-1 .container {
    background-image: url('../images/ruled-background.png');
    background-size: 20% auto;
    position: relative;
    padding-bottom: 5rem;
    padding-top: 0;
}

#article {
    position: relative;
    z-index: 1;
}


body.menuitem-1 .container:after {
    position: absolute;
    content: "";
    height: 65%;
    width: 100%;
    top: 0;
    left: 0;
    background: white;
}

    body.menuitem-1 .container:before {
    position: absolute;
    content: "";
    height: 35%;
    width: 100%;
    bottom: 0;
    left: 0;
    background: white;
    opacity: 85%;
}

.homepage-cover {
    height: calc(100vh);
    position: relative;
}

.homepage-slideshow-container {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.homepage-slideshow,
.homepage-slideshow > figure,
.homepage-slideshow > figure > img {
    height: 100%;
    width: 100%;
}

.homepage-slideshow > figure > img {
    object-fit: cover;
}

.homepage-slideshow.bss-slides figcaption {
    background-color: transparent;
    text-align: unset;
    height: 100%;
    padding: 0;
}

.homepage-slideshow .bss-prev,
.homepage-slideshow .bss-next {
    display: none;
}

.homepage-text-container {
    color: #1D153E;
    position: relative;
    z-index: 1;
}

.homepage-title {
    line-height: 4.5rem;
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.homepage-intro {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    line-height: 2rem;
    min-height: 12rem;
}

.over-ons-button {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.875rem 1.5rem;
}

.homepage-slideshow.bss-slides figure figcaption {
    transition: unset;
}

.responsive-homepage-text-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
}

@media (min-width: 1024px) { 
    .homepage-text-container {
        padding: 14rem 5rem 5rem 5rem;
        width: 44rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 0 5rem;
        max-width: 45%;
    }

    .homepage-title {
        line-height: 4.5vw;
        font-size: 4vw;
    }
    
    .homepage-intro {
        font-size: 1.25vw;
        line-height: 2vw;
        min-height: 12vw;
    }

    .homepage-cover > .homepage-text-container,
    .homepage-cover > .responsive-homepage-text-image {
        display: none;
    }
    
    .responsive-shopping-cart {
        display: none;
    }
}

@media (max-width: 1024px){
    .homepage-title {
        font-size: 2rem;
        color: #FFFFFF;
        line-height: 2rem;
    }

    .homepage-intro {
        font-size: 1rem;
        color: #FFFFFF;
    }

    .homepage-text-container {
        background-color: #1D153E;
        padding: 1rem 1rem 1.5rem 1rem;
        opacity: 85%;
        height: 100%;
    }

    .homepage-cover {
        margin-top: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 30rem;
    }

    .homepage-slideshow.bss-slides figcaption {
        width: 100%;
    }

    .homepage-slideshow-container {
        display: none;
    }
}

/* main elements homepage spacing */
.kernwaarden {
    padding-top: 5rem;
    padding-bottom: 2rem;
}
@media screen and (min-width: 1024px){
    .helpen-bij {
        margin-top: 3rem;
    }    
}

.helpen-bij,
.themas {
    max-width: 77rem;
    padding: 0 1rem;
    margin-left: auto;
    margin-right: auto;
}

.themas {
    margin-top: 5rem;
}

.helpen-bij {
    margin-bottom: 5rem;
}

@media screen and (max-width: 1024px){
    .themas {
        margin-top: 2rem;
    }
    
    .helpen-bij {
        margin-bottom: 2rem;
    }
}

/* kernwaarden css */
.kernwaarden {
    display: flex;
    flex-direction: row;
    background-color: #F4F7FC;
}

.kernwaarden-cover {
    width:50%;
    padding: 6rem 3rem;
    
    background-image: url('../images/quote-background.jpg');
    background-repeat: no-repeat; 
    background-position-x: center;
    background-position-y: top;
    background-size: cover;
}

.slideshow-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.kernwaarden-container {
    width: 50%;
    background-color: #F4F7FC;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.kernwaarden-slideshow {
    max-width: 40rem;
}

.kernwaarden-slideshow figure {
    width: 100%;
    height: 100%;
}

.kernwaarden-slideshow figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kernwaarden-quote-container {
    border: 0.0625rem solid #FFFFFF;
    height: 100%;
    width: 100%;
    color: #FFFFFF;
    position: relative;
    border-radius: 0.250rem;
}

.kernwaarden-quote-container p {
    font-size: 2.125rem;
    line-height: 2.5rem;
    font-style: italic;
    font-weight: 700;
    text-align: center;
    text-shadow: .0625rem .0625rem 0.25rem #3c3c3c88;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    width: 90%
}

.kernwaarden-list {
    max-width: 34rem;
    color: #1D153E;
    background-color: #F4F7FC;
    padding: 3rem;
    height: 100%;
}

.kernwaarden-list-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

.kernwaarden-text-item {
    padding-left: 1rem;
}

.kernwaarden-title {
    font-size: 1.5rem;
	padding-top: 0.4rem;
    padding-bottom: 1rem;
    font-weight: 700;
}

.kernwaarden-text {
    font-size: 1.125rem;
    padding-bottom: 1rem;
}

/* make sure the last kernwaarden text item loses it's bottom padding */
.kernwaarden-list-container .kernwaarden-list-item:last-of-type .kernwaarden-text {
    padding-bottom: 0;
}

.kernwaarden-text {
    color: #3C3C3C;
}

.kernwaarden-number {
    align-items: center;
}

.number-rectangle {
    width: 2rem;
    height: 2rem;
    color: #FFFFFF;
    font-size: 1.5rem;
    background-color: #CC2E17;
    position: relative;
}

.number-rectangle p {
    position: absolute;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translate(-51%, -43%);
}

.line-element {
    width: 0;
}

.headerbar {
    z-index: 2;
    width: 100%;
    position: fixed;
    top: 0;
    box-shadow: 0px 0.0625rem 3px rgba(23,33,43,25%);
    min-height: 8.5rem;
}


.content-webshop-confirm h1.page-title-login + div.page-content p {
	width: 100%;
	color: #3C3C3C;
	margin-top:16px;
}


/* this media query should help prevent the slideshow not appearing nicely on small
 but not small enough for responsive view screens. */
@media screen and (max-width: 1280px) {
    .kernwaarden {
        flex-direction: column;
        align-items: center;
        background-color: unset;
    }


}

@media (max-width: 1024px) { 
    .slideshow-container {
        width: 100%;
    }

    .kernwaarden-slideshow {
        width: 100%;
    }

    .kernwaarden-container {
        width: 100%;
    }

    .kernwaarden-cover {
        display: none;
    }

    .kernwaarden-list {
        width: calc(100% - 2rem);
        padding: 2rem 1rem;
    }

    .headerbar {
        min-height: unset;
    }
}

@media (min-width: 1024px) {
    ul.menu > li.selected > a,
    ul.menu > li:hover > a {
        border-bottom: 3px #CC2E17 solid;
    }

    ul.menu > li > a {
        padding: 0.5rem;
    }

    .titleexistinguser,
    .titlenewuser {
        border-top-right-radius: 0.250rem;
        border-top-left-radius: 0.250rem;
    }
    
    .module-login.content-article p {
        width: 50%;
    }
    
    .module-login.content-article {
        color: #FFFFFF;
        line-height: 1.625rem;
        font-size: 1.125rem;
    }
    
    body:not(.logged-in).content-webshop-confirm .container,
    .page-login .container,
    .page-register .container {
        background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, #F4F7FC 50%, #F4F7FC 100%);
    }

    .page-login .page-content,
    .page-register .page-content {
        display: none;
    }

    @media (min-height: 880px){
        html[data-scroll='0'] .headerbar {
            box-shadow: unset;
            background-color: transparent;
            transition:background-color 0.5s ease;
        }
    
        html[data-scroll='0'] .headerbar > .topbar {
            background-color: transparent;
            transition:background-color 0.5s ease;
        }
    }
}

@media (max-width: 1024px) {
    ul.menu li.selected,
    ul.menu li:hover {
        background-color: #f4f7fc;
    }

    ul.submenu a {
		font-weight: 400;
	}
    
	#newuser {
		background-color: #f4f7fc;
        border-radius: 0;
	}

    .topbar {
        display: none;
    }
}

/* waar bij helpen styling */
.helpen-bij-tile-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.helpen-bij-tile {
    width: 24rem;
    padding: 2rem;
    border-radius: 0.250rem;
    box-shadow: 5px 5px 15px #17212B26;
    background-color: #F4F7FC;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}
/*
.helpen-bij-eassessments {
    background-color: #1D153E;
}
*/
.helpen-bij-tile-title {
    font-weight: 700;
    color: #272D38;
    font-size: 1.5rem;
    padding-bottom: 1.5rem;
}

.tile-content {
    color: #3C3C3C;
}
/*
.helpen-bij-eassessments .helpen-bij-tile-title {
    color: #FFFFFF;
}

.helpen-bij-eassessments .tile-content {
    color: #FFFFFF;
}
*/
.tile-button button {
    padding: 0.875rem 1.5rem;
    color: #1D153E;
    background-color: #F4F7FC;
    border: 0.0625rem #1D153E solid;
    border-radius: 0.250rem;
    margin-top: 1rem;
    font-size: 1rem;
}

.tile-button button:hover {
    background-color: #e4e7ec;
}
/*
.helpen-bij-eassessments .tile-button button {
    color: #FFFFFF;
    background-color: #FD9D27;
    border: 0.0625rem #FD9D27 solid;
    border-radius: 0.250rem;
}

.helpen-bij-eassessments .tile-button button:hover {
    border-color: #FC910D;
    background-color: #FC910D;
}
*/
.helpen-bij-spacer {
    width: 3rem;
}

@media (max-width: 1024px) { 
    .themas {
        padding: 0 1rem;
    }

    .helpen-bij-tile {
        width: unset;
    }
    .helpen-bij-spacer {
        height: 3rem;
    }

    .helpen-bij-tile-container {
        flex-direction: column;
    }
}

@media (min-width: 1024px) {    
    .helpen-bij-tile:hover {
        background-color: #1D153E;
    }

    .helpen-bij-tile:hover .helpen-bij-tile-title,
    .helpen-bij-tile:hover .tile-content {
        color: #FFFFFF;
    }

    .helpen-bij-tile:hover .tile-button button {
        color: #FFFFFF;
        background-color: #FD9D27;
        border: 0.0625rem #FD9D27 solid;
        border-radius: 0.250rem;
    }
    
    .helpen-bij-tile:hover .tile-button button:hover {
        border-color: #FC910D;
        background-color: #FC910D;
    }
}

/* themas styling */
#themas-tabs {
    box-shadow: 5px 5px 15px #17212B26;
}

.themas-title,
.helpen-bij-title {
    color: #1D153E;
    font-size: 2rem;
    text-align: center;
    font-weight: 700;
    margin-bottom: 3rem;
    line-height: 2rem;
}

/* tab < > accordion responsive style */
.r-tabs .r-tabs-accordion-title {
    display: none;
}

.r-tabs .r-tabs-panel.r-tabs-state-active {
    display: block;
}

.r-tabs .r-tabs-nav {
    margin: 0;
    padding: 0;
}

.r-tabs-nav .r-tabs-tab:first-of-type {
    border-top-left-radius: 0.250rem;
}

.r-tabs-nav .r-tabs-tab:last-of-type {
    border-bottom-left-radius: 0.250rem;
}

.r-tabs .r-tabs-tab {
    display: inline-block;
    margin: 0;
    list-style: none;
}

.r-tabs .r-tabs-panel {
    display: none;
}

#themas-tabs {
    display: flex;
}

.r-tabs-nav {
    display: flex;
    flex-direction: column;
    width: 35%;
    font-size: 1.125rem;
    font-weight: 700;
}

.r-tabs-anchor {
    text-decoration: none;
    color: #1D153E;
    width: calc(100% -2rem);
    padding: 1.5rem 1rem;
    display: inline-block;
    width: calc(100% - 2rem);
}

.r-tabs-tab {
    background-color: #F4F7FC;
    position: relative;
}

.r-tabs-accordion-title:hover,
.r-tabs-tab:hover {
    background-color: #e4e7ec;
}

.r-tabs-accordion-title.r-tabs-state-active,
.r-tabs-tab.r-tabs-state-active {
    background-color: #cc2e17;
}

.r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor,
.r-tabs-tab.r-tabs-state-active .r-tabs-anchor {
    color: #FFFFFF;
}

.r-tabs-panel {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    line-height: 1.5rem;
}

.tab-title {
    font-size: 1.5rem;
    color: #272D38;
    font-weight: 700;
    margin: 1rem 0;
}

.tab-image {
    position: relative;
    height: 4rem;
}

.tab-image img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
}

.tab-text {
    font-size: 1.125rem;
    color: #3C3C3C;
}

.tab-meer-info {
    padding: 1rem 0;
}

.tab-meer-info a {
    text-decoration: none;
    color: #FD9D27;
    cursor: pointer;
    font-weight: 700;
    position: relative;
}

.tab-meer-info a:after {
    content: url('../images/Icon\ feather-arrow-right.svg');
    position: absolute;
    top: 50%;
    transform: translate(0.5rem, -0.8rem);
    font-size: 1rem;
}

@media only screen and (min-width: 1024px) {
    .r-tabs-panel {
        width: 65%;
        padding: 2rem 5rem;
        border-top-right-radius: 0.250rem;
        border-bottom-right-radius: 0.250rem;
    }
}

/* Accordion responsive breakpoint */
@media only screen and (max-width: 1024px) {
    .r-tabs .r-tabs-nav {
        display: none;
    }

    .r-tabs .r-tabs-accordion-title {
        display: block;
    }

    #themas-tabs {
        flex-direction: column;
        border-top-left-radius: 0.250rem;
        border-top-right-radius: 0.250rem;
    }

    .r-tabs-accordion-title {
        background-color: #F4F7FC;
    }

    #themas-tabs > .r-tabs-accordion-title {

        margin-top: 0.125rem;
    }

    #themas-tabs > .r-tabs-accordion-title:first-of-type {
        border-top-left-radius: 0.250rem;
        border-top-right-radius: 0.250rem;
        margin-top: unset;
    }

    .r-tabs-anchor {
        padding: 1rem;
        width: calc(100% - 2rem);
    }

    .r-tabs-panel {
        padding: 0.75rem;
    }
}

/* basic styling products page */
.page-products #article {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.assessment-category {
	display: flex;
	flex-direction: column;
	align-items: center;
    width: calc(100% - 3rem);
    max-width: 80rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.products {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.product-block {
	display: flex;
	flex-direction: column;
	height: 18rem;
}

.product-image {
	flex-grow: 1;
}

.product-action {
	display: flex;
	flex-direction: row;
}

.product-add-to-cart,
.product-read-more {
	width: 50%;
}

.product-read-more span:after {
    content: url("../images/chevron_right_black_24dp.svg");
    position: absolute;
    right: 1rem;
}

.product-read-more span {
    display: flex;
    justify-content: center;
    position: relative;
}

span.product-price {
    float: right;
    font-weight: 400;
}

.product-add-to-cart {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.product-add-to-cart .shoppingcart {
    display: inline-block;
    display: flex;
    width: 100%;
    justify-content: space-around;
    font-weight: 700;
    color: #FFFFFF;
}

.product-add-to-cart .shoppingcart:before {
    content: '';
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("../images/Icon\ material-add-shopping-cart.svg");
}

.product-add-to-cart .shoppingcart:after {
    content: 'Bestellen'
}

span.plus {
    display: none;
}

/* product page styling */
.products {
    width: 100%;
    justify-content: flex-start;
}

.product-block {
    position: relative;
    box-shadow: 5px 5px 15px rgba(23,33,43,0.15);
    border-radius: 0.250rem;
}

.product-name {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.product-title {
    font-size: 1.125rem;
    line-height: 1.625rem;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.product-block .product-info {
    height: calc(100% - 5.25rem);
}

.product-info {
    position: absolute;
    color: #FFFFFF;

    top: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    text-align: center;

    display: flex;
    flex-direction: column;

    padding: 1.25rem 0 1rem 0;
}

.product-info:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    border-top-left-radius: 0.250rem;
    border-top-right-radius: 0.250rem;
}

/* color gradients for specific themes can be defined here */
.product-info:before {
    background: linear-gradient(0deg, #34286E50, #34286E);
}

.category-icon-block {
    background-color: #342570;
}

.selectie .category-icon-block {
    background-color: #CC2E17;
}

.selectie .product-info:before {
    background: linear-gradient(0deg, #CA302280, #CA3022);
}

.inzetbaarheid .category-icon-block {
    background-color: #342570;
}

.inzetbaarheid .product-info:before {
    background: linear-gradient(0deg, #34286E50, #34286E);
}



/* end of color gradients */

.product-title {
    margin-top: auto;
    margin-bottom: auto;
}

.product-name {
    margin: 0;
}

@media screen and (min-width: 1024px) {
    .product-info {
        clip: rect(auto, auto, 3.75rem, auto);
        transition-property: clip;
        transition-duration: 0.5s;
    }

    .product-title {
        display: none;
    }

    .product-block:hover .product-info {
        clip: rect(auto, auto, 20rem, auto);

        transition-property: clip;
        transition-duration: 0.5s;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .product-block:hover .product-title {
        display: block;
    }
}

.product-action {
    flex-direction: row-reverse;
}

.product-action > div {
    padding: 0.75rem;
    text-align: center;
}

.product-action > div:first-child {
    border-bottom-right-radius: 0.250rem;
}

.product-action > div:last-child {
    border-bottom-left-radius: 0.250rem;
}

.product-add-to-cart {
    width: 35%;
    background-color: #FF9D1B;
}

.product-add-to-cart:hover {
    background-color: #FC910D;
}

.product-read-more {
    width: 65%;
    background-color: #F4F7FC;
    cursor: pointer;
    color: #1D153E;
    font-weight: 700;
}

.product-read-more:hover {
    background-color: #E4E7EC;
}

.product-image,
.product-image img {
    border-top-right-radius: 0.250rem;
    border-top-left-radius: 0.250rem;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.product-image {
    position: relative;
}

.product-list {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #1D153E;
    background-color: #F4F7FC;
    width: 100%;
    display: none;
    z-index: 1;
}

@media screen and (max-width: 1024px){
    .product-list {
        display: block;
    }
}

.product-list li {
    padding: 0.8rem;
    cursor: pointer;
    font-weight: 700;
    border-top: 0.0625rem solid #F4F7FC;
    background-color: #FFFFFF;
}

.product-list li:first-of-type {
    border-top: none;
}

.product-list li:hover {
    background-color: #E4E7EC;
}

.assessment-category .category-title {
    color: #1D153E;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    cursor: pointer;
}

.assessment-category-icon-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.category-icon-line {
    height: 0;
    flex-grow: 1;
    border-top: 0.0625rem #3C3C3C30 solid;
}

.category-icon-block {
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 0.250rem;
    padding: 0.5rem;
}

.category-icon-block img {
    height: 100%;
    width: 100%;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1143%) hue-rotate(52deg) brightness(111%) contrast(101%);
}

@media only screen and (min-width: 1024px) {
    .assessment-category-icon-container {
        margin-top: 4rem;
        margin-bottom: 1rem;
    }

    .assessment-category {
        margin-bottom: 4rem;
    }

    .products {
        margin: -1.5rem;
    }

    .product-block {
        margin: 1.5rem;
        flex-basis: calc(33% - 3rem);
    }
}

@media only screen and (max-width: 1024px) {
    .products {
        align-items: center;
        flex-direction: column;
    }

    .product-block {
        margin-bottom: 3rem;
        width: 100%;
    }

    .page-products #article {
        padding-top: 0.5rem;
    }

    .assessment-category-icon-container {
        margin-bottom: 1rem;
    }
}

/* Contactwidget styling */
.contact-widget {
    position: fixed;
    width: 20rem;
    box-shadow: 5px 5px 15px #17212B26;
    padding: 1.25rem;
    background-color: #FFFFFF;
    color: #1D153E;

    z-index: 1;

    right: -22.5rem;
    top: 12rem;

    transition: all 0.5s;
}

.contact-widget p {
    color: #3C3C3C;
}

.contact-widget.contact-widget-expand {
    right: 0rem;
}

.contact-widget .contact-widget-label {
    color: white;
    content: url('../images/Icon\ material-message.svg');
    background-color: #FF9D1B;
    position: absolute;
    top: 0;
    left: -3.5rem;
    height: 2rem;
    width: 2rem;
    padding: 0.75rem;
    border-top-left-radius: 0.250rem;
    border-bottom-left-radius: 0.250rem;
    cursor: pointer;
    box-shadow: 5px 5px 15px rgba(23,33,43,0.15);
}

.contact-widget.contact-widget-expand .contact-widget-label {
    box-shadow: unset;
}

.contact-widget .contact-widget-label:hover {
    background-color: #FC910D;
}

.contact-widget form {
    margin-top: 0.5rem;
}

.contact-widget .contact-widget-close {
    content:  url('../images/Sluiten.svg');
    color: #1D153E;
    position: absolute;
    right: 0rem;
    top: 0rem;
    padding: 1.5rem;
    cursor: pointer;
}

.contact-fields .contact-property {
    display: flex;
    flex-direction: column;
}

.contact-fields .contact-property.contact-checkbox {
    flex-direction: row;
}

.contact-fields .contact-property {
    margin-bottom: 1rem;
}

.contact-widget h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.contact-widget .button-send-contact-form {
    background-color: #FD9D27;
    font-size: 1rem;
    border-radius: 0.250rem;
    font-weight: 700;
    color: #FFFFFF;
}

.contact-widget .button-send-contact-form:hover {
    background-color: #FC910D;
}

.contact-widget input#confirmcontact,
input#confirm {
    width: 1rem;
    height: 1rem;
}

@media screen and (min-width: 1024px){
    .contact-widget {
        top: unset;
        bottom: 0rem;
        max-height: calc(100% - 15rem);
    }

    .contact-widget.contact-widget-expand {
        overflow-y: auto;
    }
}

@media screen and (max-width: 1024px){
    .contact-widget {
        top: 4.5rem;
        height: calc(100vh - 4.5rem - 2.5rem);
    }

    .contact-widget .contact-widget-label {
        top: 2rem;
    }
    
    .contact-widget.contact-widget-expand {
        width: calc(100% - 2.5rem);
        overflow-y: scroll;
    }
}

/* category product page styling */
.category-container {
    display: flex;
    flex-direction: row;
    margin-bottom: 4rem;
}

.category-container img.category-image {
    width: 50vw;
    object-fit: cover;
}

.category-container .category-image-container {
    min-height: calc(100vh - 8.5rem);
}

.category-container .category-image-container img.category-image {
    height: 100%;
}

.category-container .category-image-container {
    position: relative;    
}

.category-container .category-title-image {
    position: absolute;
    font-size: 3.5rem;
    line-height: 3.5rem;
    z-index: 1;
    top: 50%;
    left: 50%;
    color: #FFFFFF;
    transform: translate(-50%, -50%);
    text-align: center;
}

.category-container .category-description {
    padding: 4rem;
    background-color: #F4F7FC;
}

.category-image-container img.category-icon {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1143%) hue-rotate(52deg) brightness(111%) contrast(101%);
    opacity: 10%;
}

@media screen and (max-width: 1024px) {
    .category-container {
        flex-direction: column;
    }

    .category-container img.category-image {
        width: 100%;
    }

    .category-container .category-description {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }

    .category-container .category-image-container {
        min-height: unset;
    }
}

/* assessment detail page styling */
.page-assessments .page-content {
    color: #1D153E;
    background-color: #F4F7FC;
}

.page-assessments .assessment-image-container {
    display: none;
}

.page-assessments .assessment-name {
    font-size: 2rem;
}

.page-assessments .assessment-banner-image .bannerimage {
    width: 50vw;
    object-fit: cover;
}


.page-assessments .assessment-banner-image {
    width: 50%;
}

.page-assessments .footer {
    z-index: 1;
}

.page-assessments .footer:before {
    content: '';
    display: block;
    height: 4rem;
    width: 100%;
    background-color: white;
}

.page-assessments .assessment-banner-image,
.page-assessments .assessment-banner-image .bannerimage {
    height: calc(100vh - 8.5rem);
}

.page-assessments .page-content {
    display: flex;
    flex-direction: row;
}

.page-assessments .assessment-details {
    display: flex;
    flex-direction: column;
}

.page-assessments .button-back {
    font-size: 1rem;
    font-weight: 700;
    border: 0.0625rem solid #1D153E;
    border-radius: 0.250rem;
}

.products-table .header {
    display: none;
}

.products-table tr td:first-child {
    display: none;
}

.products-table tbody {
    display: flex;
    flex-direction: column;
}

.products-table tbody tr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: unset !important;
    margin-bottom: 0.5rem;
}

.products-table .td-product-credits:after {
    content: 'Credits';
    margin-left: 0.5rem;
}

.assessment-title-container,
.assessment-products-container {
    margin-bottom: 1.5rem;
}

.assessment-return-container {
    display: flex;
    margin-top: 1rem;
}

.assessment-details b {
    font-weight: 700;
}

.assessment-details .product-content-list {
    margin-top: 0.5rem;
}

.assessment-details .product-content-list li {
    margin-bottom: 0.5rem;
    position: relative;
}

.assessment-details .product-content-list.checkmarks-list li:before {
    content: url('../images/check_icon.svg');
    position: relative;
    top: 0.250rem;
    filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(346%) hue-rotate(81deg) brightness(95%) contrast(87%);
}

.assessment-details .product-content-list.superman-list li {
    list-style: initial;
    margin-left: 1rem;
}

.td-product-title {
    font-weight: 700;
}

.td-product-example-report a {
    color: #342570;
}

@media screen and (min-width: 1024px){
    .page-assessments .assessment-products-container {
        max-width: 50rem;
    }

    .page-assessments .assessment-details {
        padding: 3rem;
        width: calc(50% - 6rem);
    }

    .page-assessments .assessment-banner-image .bannerimage {
        position: fixed;
    }

    .td-product-title {
        flex-grow: 1;
    }

    .td-product-price,
    .td-product-credits {
        padding: 0 1rem;
    }
}

@media screen and (max-width: 1024px){
    .page-assessments .page-content {
        flex-direction: column;
    }

    .page-assessments .assessment-banner-image {
        width: 100%;
    }

    .page-assessments .assessment-banner-image .bannerimage {
        width: 100%;
    }

    .page-assessments .page-content {
        padding: 0;
    }

    .page-assessments .td-product-title {
        color: #1D153E;
        font-size: 1.5rem;
        font-weight: 700;
        width: 100%;
    }

    .products-table tbody tr {
        flex-wrap: wrap;
    }

    .page-assessments .assessment-details {
        padding: 0.5rem;
    }

    .page-assessments .button-back {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }
}

/* shopping cart overview */
.content-webshop-purchase .container,
.content-webshop-confirm .container {
    display: flex;
    flex-direction: column;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 3.5rem;
    color: #1D153E;
}

.content-webshop-purchase font {
    color: #3C3C3C;
    font-size: 1.125rem;
    line-height: 1.625rem;
}

.content-webshop-confirm .module-login {
    padding: 0;
}

/* why would there be two elements having the #article id.. sigh */
.content-webshop-purchase .container div:first-child {
    width: 50rem;
    padding-top: 4rem;
}

.content-webshop-purchase .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.content-webshop-purchase .module-purchase {
    margin-top: 3.5rem;
}

.td-shoppingcart-product-title a {
    color: #1D153E;
    font-weight: 700;
    text-decoration: none;
}

.td-shoppingcart-product-total-price,
.td-shoppingcart-product-total-credits,
.td-shoppingcart-total-price,
.td-shoppingcart-total-price-label,
.td-shoppingcart-product-price,
.tr-shoppingcart-total-credits, 
.tr-shoppingcart-credits-left {
    font-weight: 700;
}

.tr-shoppingcart-header .td-shoppingcart-product-total-credits,
.tr-shoppingcart-header .td-shoppingcart-product-total-price,
.tr-shoppingcart-header .td-shoppingcart-product-price,
.tr-shoppingcart-credits-left {
    font-weight: 400;
}

.tr-shoppingcart-credits-left {
    color: #3C3C3C;
}

.tr-shoppingcart-header {
    color: #3C3C3C;
}

.td-shoppingcart-product-count > form {
    display: inline-block;
}

.td-shoppingcart-product-count .combobox {
    width: unset;
    font-weight: 700;
    text-align: center;
}

.content-webshop-purchase .td-shoppingcart-product-count:before {
    content: 'Aantal';
    margin-right: 1rem;
    position: relative;
    top: -0.125rem;
}

.shoppingcart-table > tbody {
    display: flex;
    flex-direction: column;
}

.shoppingcart-table > tbody > tr {
    display: flex;
    flex-direction: row;
    padding: 0.5rem 0;
    height: unset !important;
    align-items: center;
    justify-content: space-between;
}

.shoppingcart-table > tbody > tr > td {
    padding: 0 0.5rem;
}

.content-webshop-purchase .shoppingcart-table > tbody > tr.tr-shoppingcart-header {
    display: none;
}

.td-shoppingcart-product-count {
    flex-grow: 1;
}

.td-shoppingcart-product-total-price,
.td-shoppingcart-product-total-credits,
.td-shoppingcart-product-price,
.td-shoppingcart-product-credits,
.td-shoppingcart-product-count {
    text-align: right;
}

.shoppingcart-table .tr-spacer {
    display: none;
}

.tr-shoppingcart-total-price,
.tr-shoppingcart-total-credits {
    border-top: 0.0625rem solid #E4E7EC;
}

.tr-shoppingcart-total-price > td,
.tr-shoppingcart-total-credits > td {
    border: none !important;
}

.td-shoppingcart-total-price {
    flex-grow: 1;
    text-align: right;
}

@media screen and (min-width: 1024px) {
    .td-shoppingcart-product-title {
        order: 1;
    }
    
    .td-shoppingcart-product-count  {
        order: 2;
    }
    
    .td-shoppingcart-product-delete {
        order: 3;
    }
    
    .td-shoppingcart-product-price,
    .td-shoppingcart-product-credits {
        order: 4;
        width: 6rem;
    }
    
    .td-shoppingcart-product-total-price,
    .td-shoppingcart-product-total-credits {
        order: 5;
        width: 7rem;
    }

    .content-webshop-purchase .container,
    .content-webshop-confirm .container {
        max-width: 80rem;
        width: calc(100% - 10rem);
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 1024px) {
    .content-webshop-purchase .container,
    .content-webshop-confirm .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 1rem;
    }

    .tr-shoppingcart-product {
        flex-wrap: wrap;
    }

    .td-shoppingcart-product-title {
        width: 100%;
    }

    .td-shoppingcart-product-price,
    .td-shoppingcart-product-credits {
        display: none;
    }

    .td-shoppingcart-product-title {
        order: 1;
    }
    
    .td-shoppingcart-product-count  {
        order: 2;
        text-align: left;
    }
    
    .td-shoppingcart-product-price,
    .td-shoppingcart-product-credits {
        order: 3;
    }
    
    .td-shoppingcart-product-total-price,
    .td-shoppingcart-product-total-credits {
        order: 4;
    }

    .td-shoppingcart-product-delete {
        order: 5;
        width: 100%;
    }

    .content-webshop-purchase .container div:first-child {
        width: unset;
    }

    .shoppingcart-table > tbody > tr.tr-shoppingcart-product > td {
        padding-bottom: 0.5rem;
    }

    .button-shoppingcart-continue-shopping,
    .button-shoppingcart-make-payment {
        width: 100%;
    }

    .content-webshop-purchase .shoppingcart-table > tbody > tr:last-child > td:first-child,
    .content-webshop-purchase .shoppingcart-table > tbody > tr:last-child > td:last-child {
        flex-grow: 1;
    }
}

/* confirm purchase */
.confirm-purchase-container {
    padding-top: 4rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.button-confirm-purchase {
    margin-top: 0.5rem;
}

.confirm-purchase-container .page-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.content-webshop-confirm .td-shoppingcart-product-credits,
.content-webshop-confirm .tr-shoppingcart-header > .td-shoppingcart-product-title {
    display: none;
}

.confirm-purchase-payment {
    display: flex;
    flex-direction: column;
}

.confirm-purchase-payment .payment-options-container {
    flex-grow: 1;
    padding-bottom: 1.5rem;
}

.payment-options-container > form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.payment_choice label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.payment_choice label .labeltext {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.125rem;
    font-weight: 700;
}

.payment_choice label .labeltext {
    margin-left: 3rem;
}

.payment-options .ideal .labeltext:before {
    background-image: url('../images/ideal-image.png');
}

.payment-options .later .labeltext:before {
    background-image: url('../images/achteraf_betalen.png');
}

.payment-options .labeltext::before {
    content: '';
    display: inline-block;
    background-repeat: no-repeat;
    height: 4rem;
    width: 5rem;
}

.option-payment {
    border: 0.0625rem solid #E4E7EC;
    border-radius: 0.250rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.payment-options-container > form > .payment-options {
    flex-grow: 1;
}

.purchase-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.payment-agreement {
	width: 20rem;
	margin-right: 2rem;
	font-size: 0.875rem;
}

.purchase-buttons-container > button {
    width: max-content;
}

.confirm-purchase-text {
    width: 100%;
    padding-bottom: 1rem;
    order: 1;
}

.confirm-purchase-text p {
    display: none;
}

.confirm-purchase-payment {
	width: calc(50% - 4rem);
    order: 2;
    margin-right: 4rem;
}

.confirm-purchase-payment h2,
.confirm-purchase-table h2 {
    font-size: 1.5rem;
    font-weight: 700;
}

.confirm-purchase-payment h2 {
    margin-bottom: 1rem;
}

.confirm-purchase-buttons {
    display: flex;
    justify-content: flex-end;
}

.confirm-purchase-table {
    order: 3;
    background-color: #F4F7FC;
    padding: 1.5rem;
    border-radius: 0.250rem;
	width: 45%
}

.confirm-purchase-table .td-shoppingcart-product-count {
    font-weight: 700;
}

.confirm-purchase-table .tr-shoppingcart-header .td-shoppingcart-product-count {
    font-weight: 400;
}

.option-payment input {
    width: 1rem;
    height: 1rem;
}

@media screen and (max-width: 1024px){
    .confirm-purchase-container {
        padding-top: 0.5rem;
    }
    .confirm-purchase-payment {
        width: 100%;
        margin-right: 0;
    }

    .content-webshop-confirm .tr-shoppingcart-header {
        display: none;
    }

    .content-webshop-confirm .td-shoppingcart-product-count:before {
        content: 'Aantal';
        font-weight: 400;
        margin-right: 1rem;
    }

    .content-webshop-confirm .confirmorder,
    .content-webshop-confirm .confirm-purchase-table {
        width: 100%;
    }

    .purchase-buttons-container {
        align-items: end;
    }

    .payment-options .labeltext::before {
        height: 2rem;
        width: 2.5rem;
    }

    .payment_choice label .labeltext {
        margin-left: 1.5rem;
    }
}

/* confirm or error order page. Could use a generic class to apply style to all pages */
.content-webshop-paycredits #article,
.content-webshop-omnikassa-completed #article,
.content-webshop-omnikassa-cancelled #article,
.content-webshop-omnikassa-error #article,
.content-webshop-omnikassa-expired #article,
.content-webshop-omnikassa-in-progress #article,
.content-webshop-paylater #article {
    color: #1D153E;
    font-size: 1rem;
    padding: 4rem 5rem;
}

.content-webshop-paycredits h1,
.content-webshop-omnikassa-completed h1,
.content-webshop-omnikassa-cancelled h1,
.content-webshop-omnikassa-error h1,
.content-webshop-omnikassa-expired h1,
.content-webshop-omnikassa-in-progress h1
.content-webshop-paylater h1 {
    font-size: 2rem; 
    font-weight: 700;
    margin-bottom: 1rem;
}

.content-webshop-paycredits button,
.content-webshop-omnikassa-completed button,
.content-webshop-omnikassa-cancelled button,
.content-webshop-omnikassa-error button,
.content-webshop-omnikassa-expired button,
.content-webshop-omnikassa-in-progress button,
.content-webshop-paylater button {
    margin-top: 1rem;
}

@media screen and (max-width: 1024px){
    .content-webshop-paycredits #article,
    .content-webshop-omnikassa-completed #article,
    .content-webshop-omnikassa-cancelled #article,
    .content-webshop-omnikassa-error #article,
    .content-webshop-omnikassa-expired #article,
    .content-webshop-omnikassa-in-progress #article
    .content-webshop-paylater #article {
        color: #1D153E;
        font-size: 1rem;
        padding: 1rem 0.5rem;
    }
}

/* clients.asp & profile.asp styling */

.clients-employees-title {
    display: none;
}

.product {
	display: none;
}

.content-clients .container,
.page-profile .container {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 5rem;
}

.content-clients .container > div,
.page-profile .container > div {
    background-color: #F4F7FC;
}

.content-clients .container > div:first-child,
.page-profile .container > div:first-of-type {
    margin-top: 4rem;
    padding: 1.25rem 1.25rem 0 1.25rem;
    border-top-left-radius: 0.250rem;
    border-top-right-radius: 0.250rem;
}

h1.profile-tools {
    font-size: 1.5rem;
}

.content-clients .container .article-clients,
.page-profile .container .profile-item {
    padding: 0 1.25rem 1.25rem 1.25rem;
    border-bottom-left-radius: 0.250rem;
    border-bottom-right-radius: 0.250rem;
}

.page-profile .container .profile-item {
    padding-top: 1rem;
}

.clients-assessments-table tbody,
.action-table tbody {
    display: flex;
    flex-direction: column;
    color: #3C3C3C;
}

.clients-assessments-table,
.action-table tbody {
    margin-top: 1.5rem;
}

.clients-assessments-table tbody > tr,
.action-table tbody > tr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 0.0625rem solid #E4E7EC;
}

.clients-assessments-table tbody > tr:first-child {
    border-top: 0.0625rem solid #E4E7EC;
    border-bottom: unset;
}

.clients-assessments-table tbody > tr:first-child,
.td-clients-assessment-date,
.clients-assessments-table tbody > tr:first-child a,
.action-table tbody > tr > td:first-child {
    font-weight: 700;
    text-decoration: none;
    color: #1D153E;
}

.action-table tbody > tr > td:nth-child(2) {
    flex-grow: 1;
    padding-left: 3rem;
}

.navlist a {
    font-weight: 700;
    color: #1D153E;
}

.td-clients-assessment-date {
    order: 1;
    width: 8rem;
}

.td-clients-assessment-product {
    order: 2;
    flex-grow: 1;
}

.td-clients-assessment-client {
    order: 3;
    width: 20rem;
}

.td-clients-assessment-status {
    order: 4;
    width: 24rem;
}

.td-clients-assessment-status button:not(last-child)
{
	margin-right: 0.75rem;
	margin-bottom: 0.75rem;
}

.clients-assessment-filter {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-weight: 700;
    color: #1D153E;
}

.clients-assessment-filter > select {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.clients-assessment-filter > select:last-of-type {
    margin-right: 0;
}

.clients-assessment-filter > .clients-filter {
    display: none;
}

.content-clients {
    color: #3C3C3C;
    font-size: 1rem;
}

.content-clients .container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.content-clients h2 {
    color: #1D153E;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}


@media screen and (max-width: 1024px){
    .content-clients .container,
    .page-profile .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .content-clients .container > div:first-child,
    .page-profile .container > div:first-of-type {
        margin-top: 1rem;
        padding: 0.5rem 0.5rem 0 0.5rem;
    }
    
    .content-clients .container .article-clients,
    .page-profile .container .profile-item {
        padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .clients-assessments-table tbody > tr:first-child {
        display: none;
    }

    .clients-assessments-table tbody > tr,
    .profile-item tbody > tr {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0;
        height: unset;
    }

    .action-table tbody > tr > td:nth-child(2) {
        padding-left: unset;
    }

    .clients-assessments-table tbody > tr > td,
    .profile-item tbody > tr > td {
        width: max-content;
        padding: 0.25rem 0;
    }

    .clients-assessment-filter {
        flex-direction: column;
        align-items: flex-end;
    }

    .clients-assessment-filter select {
        margin: 0;
    }
}

/* account page */

.page-account {
    padding: 1.5rem;
    max-width: 40rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
    margin-left: 5rem;
    background-color: #F4F7FC;
}

.account-table {
	width: 100%;
}

.account-table tr {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0;
}

.account-table tr:first-of-type {
    padding-top: 1rem;
}

.account-table label {
    color: #1D153E;
    font-weight: 700;
}

.content-account .page-title-account {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

#account form {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
	padding-top: 2.438rem;
}

.td-account-header {
    font-weight: 700;
    color: #3C3C3C;
    font-size: 1.125rem;
}

.button-modify-account-details {
    background-color: #1D153E;
    border-radius: 0.250rem;
    color: #FFFFFF;
    font-weight: 700;
    border: none;
    font-size: 1rem;
}

@media screen and (max-width: 1024px){
    .page-account {
        padding: 0.5rem;
        max-width: unset;
        margin-top: 0;
        margin-bottom: 2rem;
        margin-left: 0;
    }
}

/* mail sending styling */
#mail-settings > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(2) > img:nth-child(2) {
    filter: brightness(0) saturate(100%) invert(75%) sepia(14%) saturate(6199%) hue-rotate(338deg) brightness(102%) contrast(104%);
}

.content-sendinvite .container,
.content-sendaccess .container,
.content-sendreminder .container,
.content-sendresume .container  {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 4rem;
}

.content-sendinvite .container div:first-child,
.content-sendaccess .container div:first-child,
.content-sendreminder .container div:first-child,
.content-sendresume .container div:first-child {
    margin-top: 4rem;
    margin-bottom: 2rem;
    max-width: 40rem;
    font-size: 1.125rem;
}

.content-sendinvite .container .module-invite {
    margin-bottom: 2rem;
}

.module-invite h1 {
    font-size: 1.625rem;
}

.content-sendinvite #mail-settings > tbody {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.content-sendinvite #mail-settings > tbody > tr:last-child {
    width: 100%;
}

.content-sendinvite #mail-settings > tbody > tr:nth-child(odd) {
    border: 0.0625rem solid #E4E7EC;
    border-radius: 0.250rem;
    padding: 1rem;
    width: 40rem;
    margin-bottom: 2rem;
    margin-right: 2rem;
}

table#mail-settings tr > td:first-child {
    width: 3rem !important;
}

table#mail-settings tr#mail-settings-error > td:first-child {
    width: unset !important;
    margin-bottom: 2rem;
}

tr#mail-settings-error {
    margin-bottom: 2rem;
}

.content-sendinvite #mail-settings > tbody > tr > td > table > tbody {
    display: flex;
    flex-direction: column;
}

.content-sendinvite #mail-settings > tbody > tr > td > table > tbody > tr {
    padding: 0.5rem 0;
}

.content-sendinvite table.list tbody,
.content-sendaccess table.list tbody,
.content-sendreminder table.list tbody,
.content-sendresume table.list tbody {
    display: flex;
    flex-direction: column;
}

.content-sendinvite table.list tbody tr,
.content-sendaccess table.list tbody tr,
.content-sendreminder table.list tbody tr,
.content-sendresume table.list tbody tr {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
}

.content-sendinvite table.list tbody tr:last-child td:first-child,
.content-sendaccess table.list tbody tr:last-child td:first-child,
.content-sendreminder table.list tbody tr:last-child td:first-child,
.content-sendresume table.list tbody tr:last-child td:first-child  {
    display: none;
}

.content-sendinvite table.list tbody tr:first-child td:first-child,
.content-sendreminder table.list tbody tr:first-child td:first-child {
    width: 100%;
}

.content-sendinvite table.list tbody tr:last-child td br,
.content-sendaccess table.list tbody tr:last-child td br,
.content-sendreminder table.list tbody tr:last-child td br,
.content-sendresume table.list tbody tr:last-child td br  {
    display: none;
}

.content-sendinvite table.list tbody tr:last-child td:last-child,
.content-sendaccess table.list tbody tr:last-child td:last-child,
.content-sendreminder table.list tbody tr:last-child td:last-child,
.content-sendresume table.list tbody tr:last-child td:last-child {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.content-sendinvite textarea,
.content-sendaccess textarea,
.content-sendreminder textarea,
.content-sendresume textarea {
    height: 14rem;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.content-sendinvite .list textarea,
.content-sendinvite .list input,
.content-sendaccess .list textarea,
.content-sendaccess .list input,
.content-sendreminder .list textarea,
.content-sendreminder .list input,
.content-sendresume .list textarea,
.content-sendresume .list input {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    width: calc(100% - 1rem);
}

.content-sendinvite b,
.content-sendaccess b,
.content-sendreminder b,
.content-sendresume b {
    font-weight: 700;
    font-size: 1rem;
    color: #1D153E;
}

@media screen and (max-width: 1024px) {
    .content-sendinvite .container,
    .content-sendaccess .container,
    .content-sendreminder .container,
    .content-sendresume .container  {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 1rem;
    }

    .content-sendinvite .container div:first-child,
    .content-sendaccess .container div:first-child,
    .content-sendreminder .container div:first-child,
    .content-sendresume .container div:first-child {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .content-sendinvite #mail-settings > tbody > tr:nth-child(odd) {
        width: unset;
        margin-bottom: 0;
        margin-right: 0;
    }

    #mail-settings {
        margin-bottom: 1rem;
    }
}

/* contact page confirmation */
.page-contact #article {
    margin-top: 4rem;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 4rem;
}

@media screen and (max-width: 1024px) {
    .page-contact #article {
        margin-top: 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: 1rem;
    }
}

/* Thema overzicht page */
.themas-overzicht {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 5rem;
    padding-right: 5rem;

    position: relative;
    background-image: url('../images/ruled-background.png');
    background-size: 20% auto;
}

.themas-overzicht > h1 {
    font-size: 2.125rem;
}

.themas-overzicht:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 85%;
    background-color: white;
    z-index: -1;
}

.themas-overzicht .themas-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.themas-overzicht .themas-container .themas-tile {
    height: 17rem;
    position: relative;
    color: #FFFFFF;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    border-radius: 0.250rem;

    box-shadow: 5px 5px 15px #17212B26;

    cursor: pointer;

    line-height: 1.625rem;
}

.themas-tile-icon {
    height: 4rem;

    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* some magical filter to turn the svg in the img white, using this codepen to generate it: https://codepen.io/sosuke/pen/Pjoqqp */
.themas-tile-icon > img {
    height: 100%;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1143%) hue-rotate(52deg) brightness(111%) contrast(101%);
}

.themas-tile-title {
    font-size: 1.250rem;
    font-weight: 700;
    width: 80%;
    margin-bottom: 0.250rem;
}

.themas-tile-subtitle {
    font-size: 1rem;
    width: 80%;
}

.themas-tile-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.themas-tile-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.250rem;
}

@media screen and (min-width: 1024px) {
    .themas-overzicht .themas-container .themas-tile {
        margin: 1.5rem;
        flex-basis: calc(33% - 3rem);
    }

    .themas-overzicht .themas-container {
        margin: -1.5rem;
        max-width: 84rem;
    }
    

    .themas-tile * {
        transition: all 0.3s;
    }

    .themas-tile-subtitle {
        visibility: hidden;
        opacity : 0; transition:opacity 1s;
    }

    .themas-tile-title {
        font-size: 1.5rem;
    }

    .themas-tile-icon {
        height: 6rem;
    }

    .themas-tile:hover .themas-tile-subtitle {
        visibility: visible;
        opacity : 1
    }

    .themas-tile:hover .themas-tile-icon {
        height: 4rem;
    }
}

@media screen and (max-width: 1024px) {
    .themas-overzicht {
        padding: 0.75rem 0.75rem 2rem 0.75rem;
    }
    
    .themas-overzicht .themas-container {
        display: flex;
        flex-direction: column;
    }
        
    .themas-container {
        width: 100%;
        margin-bottom: -0.75rem;
    }

    .themas-tile {
        width: 100%;
        margin-bottom: 0.75rem;
    }
}

/* forgot password & other small pages */
.page-forgotpassword .container,
.page-resetpassword .container {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 4rem;
}

.page-forgotpassword #article,
.page-resetpassword #article {
    max-width: 40rem;
    margin-top: 4rem;
}

.page-forgotpassword form label {
    font-weight: 700;
} 

.page-resetpassword form button {
    background-color: #342570;
    color: #FFFFFF;
}

.page-resetpassword form button:hover {
    background-color: #1d153e;
}

.page-forgotpassword .container form {
    margin-top: 1rem;
}

.page-forgotpassword .container table tbody {
    display: flex;
    flex-direction: column;
}

.page-forgotpassword .container table tbody tr {
    display: flex;
    flex-direction: column;
}

.page-forgotpassword .container font {
    color: #3C3C3C !important;
}

@media screen and (max-width: 1024px) {
    .page-forgotpassword .container,
    .page-resetpassword .container {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    .page-forgotpassword #article,
    .page-resetpassword #article {
        max-width: unset;
        margin-top: 1rem;
    }
}

/* css for displaying legacy portal link */
#existinguser {
    position: relative;
    margin-bottom: 9rem;
}

.legacy-portal-message {
    position: absolute;
    bottom: -3rem;
    width: calc(100% - 2rem);
    border-radius: 0.250rem;
    font-weight: 400;
    color: white;
    background-color: #FF9D1B;
    padding: 1rem 1rem;
    display: flex;
}

@media screen and (max-width: 1024px) {
    .legacy-portal-message {
        border-radius: 0;
    }
}

.legacy-portal-message a {
    color: white;
}

.legacy-portal-message div:first-of-type {
    margin-right: 1rem;
}

.legacy-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* end css displaying legacy portal link */

/* styling for the onderzoek & analytics page. might be reused for other content/text pages. */
.information-title {
    text-align: center;
}

.information-content img {
    display: block;
}

.information-block {
    position: relative;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
}

.information-block .information-text-content {
    width: calc(50% - 8rem);
    padding: 3rem 0rem;
    font-size: 1.125rem;
}

.information-list-container {
    background-color: #F4F7FC;
    width: calc(50% - 6rem);
    padding: 3rem;
    font-size: 1.125rem;
}

.information-list {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.information-list-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

.information-list-item-title {
    font-weight: 700;
    font-size: 1.250rem;
    width: 100%;
}

.information-list li {
    position: relative;
    margin-top: 1.5rem;
    left: 2rem;
}

.information-list li:first-of-type {
    margin-top: 0;
}

.information-list li:before {
    content: '';
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: -2rem;
    background-color: #CC2E17;
    border-radius: 0.250rem;
}

.information-image {
    width: 50%;
}

.information-image img {
    width: 100%;
}

.information-block-dark-background {
    background-color: #1D153E;
    color: #FFFFFF;
}

.information-block-dark-background .information-medium-title {
    color: #FFFFFF;
}

.information-block-dark-background .information-image {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.information-block-list {
    display: flex;
    flex-direction: row;
    margin: -1.5rem;
    color: #FFFFFF;
}

.information-block-list > div {
    display: flex;
    flex-direction: column;
    border-radius: 0.250rem;
    margin: 1.5rem;
    flex-basis: calc(33% - 3rem);
    position: relative;
    z-index: 0;

}

.information-block-list-item:before {
    content: '';
    background: linear-gradient(0deg, #1D153E80, #1D153E);
    border-radius: 0.250rem;
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
}

.information-block-list > div > img {
    position: absolute;
    border-radius: 0.250rem;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.information-block-list-item-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 1.5rem;
    z-index: 1;
}

.information-block-list-item-text {
    text-align: center;
    z-index: 1;
    padding: 0 1rem 3rem 1rem;
}

.information-block-tiles > div > p {
    margin-bottom: 2.5rem;
    font-size: 1.125rem;
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.information-block-tiles > div > h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.information-block-popout {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.information-text-content-popout-container {
    position: relative;
}


.information-block-background {
    width: 100%;
    position: relative;
}

.information-block-background:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #1D153E;
    opacity: 85%;
    z-index: 0;
}

.information-block-background img {
    height: 100%;
    width: 100%;
    position: absolute;
    object-fit: cover;
    z-index: -1;
}

.information-grey-background {
    background-color: #F4F7FC;
    width: 50%;
    font-size: 1.125rem;
}

.information-text-content-popout {
    font-size: 1.125rem;
}

.information-white-background {
    background-color: #FFFFFF;
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.information-block-dark-background-content {
    width: 50%;
}

.information-block-dark-background-content .information-image {
    padding-top: 3rem;
}

.information-block-background .information-text-content {
    max-width: 80rem;
    padding: 3rem 5rem;
    margin-left: auto;
    margin-right: auto;
    color: #FFFFFF;
    z-index: 1;
    position: relative;
    font-size: 1.125rem;
}

.information-block-background .information-medium-title {
    color: #FFFFFF;
}

.information-block-two .information-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.information-block .image-no-fit img {
    width: 100%;
    height: unset;
    object-fit: unset;
}

#article.information-content {
    z-index: -1;
    padding: 0;
    background-image: url('../images/ruled-background.png');
    background-size: 20% auto;
    position: relative;
    padding-top: 0;
}

#article.information-content:after {
    z-index: -1;
    position: absolute;
    content: "";
    height: 65%;
    width: 100%;
    top: 0;
    left: 0;
    background: white;
}

#article.information-content:before {
    z-index: -1;
    position: absolute;
    content: "";
    height: 35%;
    width: 100%;
    bottom: 0;
    left: 0;
    background: white;
    opacity: 85%;
}

#article.information-content .information-block-centered {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5rem;
    margin-top: 3rem;
}

.information-block-two .information-text-content {
    background-color: #F4F7FC;
}

.information-medium-title {
    font-weight: 700;
    font-size: 1.5rem;
    color: #1d153e;
    margin-bottom: 0.5rem;
}

.information-text-content-popout {
    border-radius: 0.250rem;
    background-color: #F4F7FC;
    box-shadow: 5px 5px 15px #17212B26;
}

.information-image {
    width: 100%;
}

.information-block-dark-background .information-text-content {
    width: unset;
}

.organisatieadvies.article-default {
    padding: 0;
}

.organisatie-advies-text-content .information-text-content {
    font-size: 1.125rem;
}

@media screen and (min-width: 1024px){
    .organisatie-advies-container {
        position: relative;
    }

    @media screen and (min-height: 800px){
        .organisatie-advies-container {
            height: calc(100vh - 8.5rem);            
        }
    }

    .organisatie-advies-cover-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .organisatie-advies-cover-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .organisatie-advies-text-content {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .organisatie-advies-text-content:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(255,255,255,0.85) 30%, transparent);
        z-index: 0;
    }

    .organisatie-advies-text-content .information-title {
        text-align: left;
    }

    .organisatie-advies-text-content .information-text-content {
        z-index: 1;
        position: relative;
        width: 40%;
        min-width: 40rem;
        padding: 4rem 5rem;
    }

    .information-text-content-popout-container {
        width: 50%;
    }

    
    .information-block-background .information-text-content p {
        width: 50%;
    }

    .information-text-content-popout {
        padding: 2rem 3rem;
        height: max-content;
        position: relative;
        position: absolute;
        top: 50%;
        left: -8rem;
        transform: translate(0, -50%);
    }

    .half-max-width-align-left,
    .half-max-width-align-right {
        max-width: 40rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .half-max-width-align-left {
        margin-right: auto;
    }

    .half-max-width-align-right {
        margin-left: auto;
    }

    .information-grey-background {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .information-grey-background .half-max-width-align-right,
    .information-block-dark-background .half-max-width-align-right,
    .information-grey-background .half-max-width-align-left,
    .information-block-dark-background .half-max-width-align-left {
        padding-right: 3rem;
        padding-left: 3rem;
        max-width: 40rem;
    }

    .information-grey-background .information-list {
        padding-right: 2rem;
    }

    .information-white-background .half-max-width-align-left {
        max-width: 46rem;
    }
    
    .information-block-popout .information-image img {
        border-top-left-radius: 0.250rem;
        border-top-right-radius: 0.250rem;
    }

    .information-block-popout .information-image {
        width: 50%;
        border-radius: 0.250rem;
    }
}

img.desktop-image {
    display: block;
}

img.mobile-image {
    display: none;
}

.organisatie-advies-container {
    margin-bottom: 3rem;
}

@media screen and (max-width: 1024px){
    .organisatie-advies-container {
        position: relative;
    }

    .organisatie-advies-cover-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .organisatie-advies-cover-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .information-block {
        flex-direction: column;
    }

    .information-block .information-text-content {
        padding: 1rem;
        width: unset;
    }

    #article.information-content .information-block-centered {
        padding: 0.5rem;
        margin-top: 0.5rem;
    }

    .information-image {
        width: unset;
    }

    .information-title {
        margin-top: 1rem;
    }

    .information-list li {
        max-width: calc(100% - 2rem);
    }
    
    .information-block-list {
        flex-direction: column;
    }

    .information-block-list-item {
        min-height: 15rem;
    }

    .information-block-popout {
        flex-direction: column;
    }

    .information-text-content-popout {
        padding: 1rem;
        margin-top: 1rem;
    }

    .information-block-background .information-text-content {
        padding: 1rem;
    }

    .information-grey-background {
        padding: 1rem;
        width: calc(100% - 2rem);
    }

    .information-white-background {
        width: calc(100% - 2rem);
        padding: 1rem;
        order: -1;
    }

    .information-block-dark-background-content {
        width: 100%;
    }

    .information-block-dark-background-content .information-image {
        padding-top: 0;
    }

    #article.information-content .information-block-popout {
        padding: 0;
    }

    .information-text-content-popout {
        top: -5rem;
        position: relative;
        width: 80%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: -5rem;
    }

    .information-block-list {
        margin: 0;
    }

    .information-block-list > div {
        margin: 0.5rem;
    }

    .organisatie-advies-container {
        position: relative;
    }

    .organisatie-advies-cover-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .organisatie-advies-cover-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .organisatie-advies-text-content {
        position: relative;
        height: 100%;
        z-index: 1;
        padding: 1rem;
        background-color: #1D153E;
        opacity: 85%;
        color: #FFFFFF;
    }

    .organisatie-advies-text-content .information-title {
        color: #FFFFFF;
    }

    img.desktop-image {
        display: none;
    }
    
    img.mobile-image {
        display: block;
    }

    .organisatie-advies-container {
        margin-bottom: 1rem;
    }
}

/* bss slideshow css */
.bss-slides{
  position: relative;
  display: block; 
  line-height: 0;/*removes the gap if you put a border on the slideshow div*/   
}
figcaption {
  line-height: 1.5; /* restores line-height to the child element*/
}
.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
  position: relative;
}
.bss-slides figure img{
  opacity: 0;
  transition: opacity 1.2s;
  backface-visibility: hidden;
}
.bss-slides .bss-show{
  z-index: 2;
}
.bss-slides .bss-show img{
  opacity: 1;
  backface-visibility: hidden;
  position: relative; 
}

.bss-slides figcaption{
  position: absolute;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{
  z-index: 3;
  opacity: 1;
}
.bss-slides figcaption a{
  color: #fff;    
}
.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .3;
  user-select: none;
}
.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}
.bss-next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bss-prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.bss-fullscreen{
  display: block;
  width: 32px;
  height: 32px;    
  background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); 
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;   
  cursor: pointer;    
  opacity: .3;
} 
.bss-fullscreen:hover{
  opacity: .8;   
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
/* bss slideshow css end */

/* overrides for slideshow css */
.bss-slides figcaption{
    bottom: 0em;
    right: 0em;
    padding: .5em;
    width: calc(100% - 1em);
    border-radius: 0;
    min-height: 7em;
    text-align: center;
    font-size: 1rem;
    background-color: rgba(29, 21, 62, 0.85);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bss-next,
.bss-prev {
    background-color: rgba(29, 21, 62, 1);
    border-radius: 0.250rem;
    opacity: 0.85;
    height: 3rem;
    width: 3rem;
    padding: 0;
    color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
}

.bss-next {
    right: 1rem;
    background-image: url("../images/Icon\ feather-arrow-right-white.svg")
}

.bss-prev {
    left: 1rem;
    background-image: url("../images/Icon\ feather-arrow-left-white.svg")
}

.figcaption-medium {
    font-size: 1.25rem;
    font-weight: 700;
}

@media screen and (max-width: 1024px){
    .h-captcha {
        width: 50%;
        transform: scale(2);
        transform-origin:0 0;
        margin-bottom: 2.5rem;
    }

    div#contact-widget + div {
        transform: scale(1.5);
        transform-origin: center bottom 0rem;
    }
}

/* Blog widget styling */
.widget-blog {
    max-width: 80rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5rem;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.widget-blog .blog-list-container,
.blog-read-more .read-more-list {
    display: flex;
    justify-content: flex-start;
}

.blog-list-container .blog-tile,
.read-more-list .read-more-tile {
    border-radius: 0.250rem;
    position: relative;
    cursor: pointer;
}

.blog-list-container .blog-tile.featured {
    flex-basis: calc(100% - 3rem);
}

.blog-image {
    position: relative;
    height: 12rem;
    width: 100%;
}

.featured .blog-image,
.blog-banner {
    height: 24rem;
    position: relative;
}

.featured .blog-image:before {
	content: '';
	background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 35%, rgba(255,255,255,0) 100%);
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
    border-radius: 0.250rem;
}

.blog-image img,
.blog-banner img {
    border-radius: 0.250rem;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.featured .blog-short-text {
    display: none;
}

.blog-title {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: #1d153e;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
}

.blog-short-text {
    font-size: 1.125rem;
}

.blog-section {
    font-weight: 700;
}

.blog-quote {
    font-size: 1.5rem;
    font-style: italic;
    border-top: #1D153E solid 0.0625rem;
    border-bottom: #1D153E solid 0.0625rem;
    padding: 1.25rem 0;
    margin: 1.25rem 0;
}

.read-more-tile .blog-short-text {
    font-size: 1rem;
}

.featured .blog-title {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1;
    color: #FFFFFF;
    font-size: 2.125rem;
    font-weight: 700;
    margin: 0;
    line-height: 3rem;
    max-width: 40rem;
}

.blog-read-more {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.read-more-title {
    font-size: 2.125rem;
    font-weight: 700;
    margin-bottom: 3.5rem;
    color: #1d153e;
}

.blog-container {
    width: calc(100% - 3rem);
}

.blog-read-more {
    width: 100%;
}

.blog-content {
    max-width: 50rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.business-card {
    height: 9rem;
    width: 100%;
    background-color: #F4F7FC;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.business-card .business-card-picture {
    height: 100%;
    width: 9rem;
}

.business-card .business-card-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.business-card .business-card-name {
    font-weight: 700;
}

.business-card-link a {
    text-decoration: none;
    color: #1D153E;
    font-weight: 700;
}

.business-card-name img {
    height: 1.125rem;
    width: 1.125rem;
    margin-left: 0.5rem;
    position: relative;
    top: 0.2rem;
}

.business-card .business-card-picture {
    padding: 1rem;
}

.business-card .business-card-picture img {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    border-radius: 10rem;
}

@media only screen and (min-width: 1024px) {
    .widget-blog .blog-list-container,
    .blog-read-more .read-more-list {
        width: 100%;
        margin: -1.5rem;
        flex-wrap: wrap;
        flex-direction: row;
    }
    
    .blog-list-container .blog-tile,
    .read-more-list .read-more-tile {
        margin: 1.5rem;
        flex-basis: calc(33.33% - 3rem);
    }
}

@media only screen and (max-width: 1024px) {
    .widget-blog {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .widget-blog .blog-list-container,
    .blog-read-more .read-more-list {
        width: calc(100% - 1rem);
        flex-direction: column;
    }
    
    .blog-list-container .blog-tile,
    .read-more-list .read-more-tile {
        margin-bottom: 1.5rem;
    }

    .blog-image,
    .featured .blog-image {
        height: 60vw;
    }

    .blog-banner {
        height: 10rem;
    }

    .featured .blog-title {
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        z-index: 1;
        color: #FFFFFF;
        font-size: 2.125rem;
        font-weight: 700;
        margin: 0;
        line-height: 3rem;
        max-width: 40rem;
    }

    .blog-short-text {
        display: none;
    }

    .blog-image:before {
        content: '';
        background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 35%, rgba(255,255,255,0) 100%);
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 0.250rem;
    }
}

.pdf-container {
    position: fixed;
    top: 0;
    height: calc(100% - 8.5rem);
    background: rgba(255,255,255,0.85);
    padding: 8.5rem 3rem 0 3rem;
    width: calc(100% - 6rem);
    z-index: 1;
    border-radius: 0.250rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.pdf-container iframe {
    width: 60rem;
    height: calc(100% - 2rem);
}

.close-pdf-viewer {
    display: flex;
    justify-content: flex-end;
    width: 60rem;
    height: 0;
}

.close-pdf-viewer button {
    position: relative;
    left: 3rem;
}

@media only screen and (max-width: 1024px) {
    .pdf-container {
        position: fixed;
        height: calc(100% - 4rem);
        padding: 4rem 0.5rem 0 0.5rem;
        width: calc(100% - 1rem);
        justify-content: flex-end; 
    }
    
    .pdf-container iframe {
        width: 100%;
        height: calc(100% - 3rem);
    }
    
    .close-pdf-viewer {
        width: 100%;
        height: 3rem;
    }
    
    .close-pdf-viewer button {
        left: unset;
    }
}

.thema-blog-container {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2.5rem;
    padding-top: 1.5rem;
}

.thema-blog-container .thema-blog {
    margin: 1.5rem;
}

.thema-blog-header {
    height: 20rem;
    position: relative;
    margin-bottom: 1.5rem;
}

.thema-blog-title {
    color: #FFFFFF;
    font-size: 2.125rem;
    font-weight: bold;
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    z-index: 2;
    line-height: 3rem;
}

.thema-blog-image {
    width: 100%;
    height: 100%;
}

.thema-blog-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 0.250rem;
}

.thema-blog-image:before {
    content: '';
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 35%, rgba(255,255,255,0) 100%);
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.250rem;
}

.thema-blog-category-title {
    flex-basis: 100%;
    text-align: center;
}

.thema-blog-category-title h1 {
    padding: 0 1.5rem;
}

.lees-meer-blog {
    background-color: #FF9D1B;
    color: #FFFFFF;
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
}

.lees-meer-blog:after {
    content: url("../images/Icon\ feather-arrow-right-white.svg");
    position: relative;
    margin-left: 0.5rem;
    top: 0.1rem;
}

.lees-meer-blog:hover {
    background-color: #FC910D;
}

@Media screen and (min-width: 1024px){
    .thema-blog-container {
        max-width: 80rem;
        margin: -1.5rem;
        padding-bottom: 5.5rem;
        padding-top: 1.5rem;
        width: 100%;
    }
    
    .thema-blog-container .thema-blog {
        margin: 1.5rem;
        flex-basis: calc(50% - 3rem);
    }    
}

@Media screen and (max-width: 1024px){
    .thema-blog-header {
        height: 60vw;
    }
}

/* styling for the agile lead banner on the homepage and making the navigation arrows visible again */
.homepage-slideshow .bss-prev, 
.homepage-slideshow .bss-next {
  display: unset;
}

.bss-slides .agile-lead-banner {
	position: absolute;
	bottom: 0;
	left: -1rem;
	width: calc(100% + 1rem);
	height: 5rem;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	background-color: rgba(52, 40, 110, 0.95);
	z-index: 2;
	padding: 1rem 0;

	border-top: 0.25rem solid #FFFFFF;
	box-shadow: 0 5px 15px rgba(0,0,0,0.16);
}

.bss-slides .agile-lead-banner h2 {
	color: #FFFFFF;
	font-size: 2.125rem;
	font-weight: 700;
}

.bss-slides .agile-lead-banner a {
	font-size: 1.75rem;
	font-weight: 700;
	color: #FD9D27;
	cursor: pointer;
}

.custom-agile-employees-organisation {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    width: 100%;
}

.custom-agile-employees-organisation p {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.bold-text {
    font-weight: 700;
}

.maak-test {
    display: block;
    color: #FFFFFF;

}

.agile-employees-description,
.agile-employees-image {
    width: 50%;
    position: relative;
}

.agile-employees-description {
    width: calc(50% - 6rem);
    padding: 5rem 2rem 5rem 4rem;
}

.agile-employees-description p a {
    color: #3C3C3C;
}

a.maak-test {
    text-decoration: none;
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    width: max-content;
}

.agile-employees-image-container:after {
    content: '';
    background-color: #25B299;
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
    height: 100%;
    top: 0;
    right: 0;
    left: 15rem;
    display: block;
    position: absolute;
    z-index: 0;
}

.agile-employees-image-container {
    height: 80%;
    width: 100%;
    left: 0;
    top: 10%;
    display: block;
    position: absolute;
    overflow: hidden;
}

.agile-employees-image-container img {
    
    position: relative;

    height: 83%;
    width: auto;

    z-index: 1;

    top: 52%;
    transform: translate(0, -50%);
}

@media screen and (max-width: 1024px){
    .agile-employees-image {
        display: none;
    }

    .agile-employees-description {
        width: 100%;
        padding: 1rem 0.5rem;
    }
}


/* Fix to change html layout without changing the backend for agile werken category */
#article.agile-werken > .category-container > .category-image-container {
    display: none;
}

#article.agile-werken > .category-container > .category-description {
    padding: unset;
    background-color: #FFFFFF;
}

.contactdetails:after {
	content: "KvK: 05 07 27 51";
}

.contactdetails li:last-child {
    display: none;
}

@media screen and (min-width: 1024px){
    #article.agile-werken > .category-container > .category-description > .category-content {
        display: flex;
        flex-wrap: wrap;
    }

    #article.agile-werken .category-container,
    #article.agile-werken .category-description,
    #article.agile-werken .category-content {
        width: 100%;
    }

    #article.agile-werken .category-content .category-image-container {
        width: 50%;
    }

    #article.agile-werken .category-content .category-description {
        width: calc(50% - 8rem);
    }

    #article.agile-werken .category-description .category-image {
        min-height: calc(100vh - 8.5rem);
    } 
}