/*---------------*/
/* START Content */
/*---------------*/

h1.pagetitle {
    text-shadow: none;
}

/*///// banner /////*/

.banner {
    margin-bottom: -2px
}

p.figure, .figure {
    font-size: 4rem;
    color: #ff6600;
}

.bannerBackground p,
#wrapper .bannerBackground h1 {
    color: #fff;
} 

 /*/////  speciaal hoekje op de titel /////*/
.banner h1:before {
    content: "";
    width: 150px;
    height: 50px;
    border: 4px solid #ff6600;
    border-bottom-width: 0;
    border-right-width: 0;
    display: block;
    position: absolute;
    transform: skewY(3deg) translate(-30px, -15px);

}

.banner h1 {
    margin-top: 20px;
}
@media only screen and (max-width : 768px) {
    h1 {
        font-size: 2.6rem;
    }
    h2 {
        font-size: 2.2rem;
    }
    h3 {
        font-size: 1.9rem;
    }
    h4 {
        font-size: 1.6rem;
    }
    h5 {
        font-size: 1.3rem;
    }
}

/*/////// Banner met rode en blauwe schuine border erover  //////*/
.red .bannerBackground,
.red .bannerSkewed,
.red .bannerSkewedReverse,
.red .quote {
    background-color: var(--backgroundcolordark);
    color: #fff;
}

.blue .bannerBackground,
.blue .bannerSkewed,
.blue .bannerSkewedReverse,
.blue .quote {
    background-color: var(--backgroundcolor3);
    color: #fff;
}

.bannerBackground {
    position: relative;
    z-index: 1;
    padding: 50px 50px 1px 50px;
    
}

.bannerSkewed {
    height: 180px;
    transform: skewY(-3deg);  
    margin-top: -110px; 
}

.bannerImg {
    height: 400px; 
    margin-top: -70px;
    background-position: 50% 0%; /* to avoid decapitating persons in the image */
}

.bannerSkewedReverse {
    height: 180px; 
    transform: skewY(3deg);  
    margin-bottom: -110px;  
}



/*///// Grote quoteBlock /////*/

.quote {
    display: flex;
    flex-direction: column;
    font-size: 20px;
}

.quoteQuote:before {
    content: "";
    width: 150px;
    height: 50px;
    border: 4px solid #ff6600;
    border-bottom-width: 0;
    border-right-width: 0;
    display: block;
    position: absolute;
    transform: skewY(3deg) translate(-20px, -30px);
}

.quote.blue {
    background-color: var(--backgroundcolor3); 
    /* margin-left: -15px;
    margin-right: -15px; */
}

.quoteCopy,
.quoteImg {
    width: 100%;
}
.quoteImg .portlet {
    margin-bottom: 0px;
}


.quoteCopy {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 70px 50px 50px 50px; /* 70px 70px;*/
    color: #fff;
}

.quoteName {
    padding-top: var(--spacer-3);
    color: #ff6600;
}

.quoteImg img {
    width: 100%;
}

@media only screen and (min-width : 768px) {
    .quote {
        flex-direction: row;
        align-items: center;
    }

    .quoteQuote:before {
        border-width: 0;
    }

    .quoteCopy,
    .quoteImg {
        width: 50%;
    }

    .quoteCopy {
        padding: 20px;
    }
    .quoteName {
        padding-top: var(--spacer-2);
    }
}

@media only screen and (min-width : 992px) {

    .quoteQuote:before {
        border-top-width: 4px;
        border-left-width: 4px;
    }

    .quoteCopy {
        padding: 60px 50px 15px;
    }

    #wrapper .quoteCopy p {
        font-size: 2rem;
    }
}

@media only screen and (min-width : 1200px) {
    .quote {
        font-size: 24px;
    }
    .quoteCopy {
        padding: 70px 130px 15px;
    }
}

@media only screen and (min-width : 1700px) {
    .quoteCopy {
        padding: 80px 250px 15px;
    }

    #wrapper .quoteCopy p {
        font-size: 2.4rem;
    }
}
@media only screen and (min-width : 2000px) {
    .quote{
        font-size: 30px;
    }
}

/*////// De visuals op de job   /////*/
.jobPropertiesImg {
    padding-left: var(--spacer-5);
    padding-right: var(--spacer-5);
    padding-bottom: var(--spacer-3);
}

/*////// should the class subfooter be in pvgroup.css ??? ///*/
.subfooter section.background {
    padding-top: var(--spacer-4);
    padding-bottom: var(--spacer-4);
}

.component-paragraph {
    margin-bottom: 1rem;
}

.jobDomainBlue .card-title,
.jobDomainBlue a {
    color: var(--secondary);
}

.jobDomainRed .card-title,
.jobDomainRed a {
    color: var(--primary);
}

.titleZeroPb .background {
    padding-bottom: 0px; 
}


/*///// hide mobile scrollable footer /////*/
.mobile-footer-menu {
    display: none;
}

/*///// Application flow /////*/
.applicationImg {
    border-bottom: 2px dashed #ff6600;
    padding-bottom: 25px;
}
.applicationImg img {
    height: 90px;
}
.applicationCopy {
    color: var(--backgroundcolor3);
    font-weight: bold;
    padding: 25px;
}
.applicationStep {
    min-width: 200px;
    text-align: center;
    position: relative;
    scroll-snap-align: center;
}
@media only screen and (max-width : 767px) { 
    .applicationImg {
        border-bottom: 0px dashed #ff6600;
        padding: 15px 0px;
    }
    /* .applicationCopy {
        border-bottom: 2px dashed #ff6600;
        padding: 15px;
    } 
    .applicationStep {
        border-left: 2px dashed #ff6600;
    }*/
}

/*///// Contact form styling ////*/
/*
@media only screen and (min-width : 992px) {*/
    .lfr-ddm-form-container {
        padding: 0;
        margin-left: 0;
        border: 0;
    }

.background-color-dark .portlet-forms-display, 
.background-color-3 .portlet-forms-display,
.background-color-dark .lfr-ddm__default-page-container, 
.background-color-3 .lfr-ddm__default-page-container  {
    background-color: transparent;
    color: #fff;
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
}
.background-color-dark .ddm-form-page-container.wizard .btn-primary,
.background-color-3 .ddm-form-page-container.wizard .btn-primary {
    background-color: var(--backgroundcolor3);
}
.ddm-form-page-container.wizard {
    max-width: 700px;
    margin: 0;
}

.background-color-dark .ddm-form-page-container.wizard p,
.background-color-3 .ddm-form-page-container.wizard p {
    font-size: 1.5rem;
}
.background-color-dark .has-error .form-feedback-item,
.background-color-3 .has-error .form-feedback-item  {
    font-weight:600;
    color: #fff;
}


/*///// START replace default bullets ////*/

ul {
    padding-inline-start: 20px;
}

ul li {
    list-style-type: none;
}

#wrapper ul:not(.list-unstyled, .dropdown-menu)>li:not(.lfr-nav-item, .nav-item):before {
    
    font: var(--fa-font-regular);
    content: "\f00c";
}

ul li:before {
    margin-right: 5px;
}
ul li:before {
    color: #ff6600;
}
.jobDomainBlue ul li:before {
    color: var(--secondary);
}
.jobDomainRed ul li:before {
    color: var(--primary);
}


/*///// STOP replace default bullets ////*/


/*-------------------------------------------*/
/* start corrections 20200506 VIDEOCONTAINER */
/*-------------------------------------------*/


@media only screen and (min-width : 768px) {
    .video {
        width: 100%;
        position:relative;
        padding-bottom:54%; 
        padding-top:17px;  
        height:0;
        overflow:hidden;
        background-color: #eee; 
        text-align: center;
        border-radius: var(--border-radius-lg);
    }
    
    .video iframe {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
} 
@media only screen and (min-width : 992px) {
    .video {
        padding-top:25px;  
    }
}

@media only screen and (min-width : 1200px) {
    .video {
        padding-top:30px;  
    }
}
/*------------------------------------------*/
/* stop corrections 20200506 VIDEOCONTAINER */
/*------------------------------------------*/

.top-nav-desktop {
    position: relative;
    right: auto;
}
.top-nav-desktop #language-nav {
    position: fixed;
    right: 0;
    padding-right: var(--spacer-4);
} 
@media only screen and (min-width: 1200px) {
    .top-nav-desktop {
        right:  calc(((100% - 1200px) / 2) + 25px);
    }
    .top-nav-desktop #language-nav {
        right: calc((100% - 1200px) / 2);
    } 
}