/* Headers */

.section-header {
	padding: 0;
	border-bottom: 1px solid var(--green);
	margin-top: 90px;
}
.header-wrapper {
    position: relative;
	min-height: 714px;
	width: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
}

.header-block {
    position: relative;
	width: 100%;
	background-repeat: no-repeat;
	background-size: contain;
}

.header-wrapper h1 {
    padding-top: 35%;
}
.home-bg p {
	margin-top: -1em;
	margin-bottom: 2em;
	font-size: 1.6em;
	line-height: 1;
    font-family: CircularXXWeb-Bold, sans-serif;
}


@media (max-width: 991px) {
    .header-wrapper h1 {
        padding-top: 15% !important;
        margin-bottom: 40px !important;
    }
    .header-wrapper {
        height: 700px;
	    min-height: 700px;
    }
    .header-wrapper-vacature {
        height: auto;
        min-height: 0;
    }
}
.doc-vacaturepage, .doc-vacature, .node-5641, .doc-profielprofessional, .node-10404 {
/*    background: url("data:image/svg+xml,%3Csvg id='PP_groen' data-name='PP groen' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2329eb6c;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='300' cy='300' r='300'/%3E%3C/svg%3E") no-repeat center center;*/
    background-position: calc(50% + 600px) -500px;
    background-size: 1000px auto;
    overflow-x: hidden;
}
.section-header-vacature, .section-header-profiel {
    border-bottom: 0 none;
    min-height: 12vw;
}

.section-header-opdrachtgever {
    border: none;
    min-height: 20vw;
    margin-top: 50px
}

.overflow-x-visible {
    overflow-x: visible;
}

.header-wrapper-vacature {
    height: auto;
    min-height: 0;
}
.header-wrapper-vacature h1 {
    padding-top: 1em;
}

.header-wrapper-algemeen {
    position: relative;
	min-height: 714px;
	width: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
	margin-top: 90px;
}
.header-wrapper-algemeen.smalleheader {
    margin-bottom: -280px;
}

.header-wrapper-algemeen h1 {
    padding-top: 100px;
}

.header-wrapper-algemeen h2 {
    font-size: 1.7em;
    line-height: 1;
}
.header-droombaan h1 {
    padding-top: 76px;
	margin-bottom: 0;
}

@media (max-width:576px) {
    .header-wrapper {
	height: auto;
	min-height: 700px;
    }
    .header-wrapper-vacature {
        height: auto;
        min-height: 0;
    }
}

.header-wrapper-contact {
    position: relative;
	/*height: 714px;*/
	/*min-height: 714px;*/
	/*width: 100%;*/
	background-repeat: no-repeat !important;
	background-size: cover;
	margin-top: 90px;
}

.header-wrapper-contact h1 {
    padding-top: 30px;
}

.header5050Img {
    width: 80%;
    transform: rotate(-5deg);
}

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

@media (min-width: 768px) {
    .header5050Img {
        position:absolute;
        right:0;
    }
}

@media (min-width: 992px) and (max-width: 1199.8px) {

}

@media (min-width: 991px) {
    .header5050Img.job-opening {
        width: 80%;
    }
}

@media (max-width: 991px) {
    .header-image-container {
        /*top: 0px; */
        align-items: center;
    }

    .header5050Img.job-opening {
        width: 90%;
    }
}


/* Header images*/

.home-bgxx {
    background: url("/media/ypabbouo/home-banner.jpg");
	background-position: top right;
}

.overheid-bg {
    background: url("/media/nricvudi/overheid-banner.jpg");
    background: url("/media/t5ch1xap/intern-banner.jpg") no-repeat top right;
}

body.xxx .overheidvacatures-bg {
    background: url("/media/kmxhvyzv/overheid-banner-vacatures-overheid.jpg"); /* yusuf */
    background: url("/media/t5ch1xap/intern-banner.jpg") no-repeat top right;
}

body.xxx .zorg-bg {
    position: relative;
    background: url("/media/f4tpbsgq/zorg-banner.jpg");
    background: url("/media/twyjedft/banner-vacatures-zorg.jpg") no-repeat top right;
}

body.xxx .zorgvacatures-bg {
    background: url("/media/twyjedft/banner-vacatures-zorg.jpg");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
}

body.xxx .traineeships-bg {
    background: url("/media/zvgblpdz/traineeships-banner.jpg");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
    background: url("/media/f4tpbsgq/zorg-banner.jpg") no-repeat top right; /* aimee */
}

body.xxx .traineeshipsvacatures-bg {
    background: url("/media/spnfsbp1/banner-vacatures-traineeships.jpg");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
    background: url("/media/f4tpbsgq/zorg-banner.jpg") no-repeat top right; /* aimee */
}

body.xxx .intern-bg {
    background: url("/media/t5ch1xap/intern-banner.jpg");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
    background: url("/media/vx0cbv30/werken-als-zzper-banner.jpg") no-repeat top right; /* stefan + saphira */
}

body.xxx .intenvacatures-bg {
    background: url("/media/le5fc1i2/banner-vacatures-intern.jpg");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
    background: url("/media/vx0cbv30/werken-als-zzper-banner.jpg") no-repeat top right; /* stefan + saphira */
}

body.xxx .zelfstandigen-bg {
    background: url("/media/vx0cbv30/werken-als-zzper-banner.jpg");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
}

body.xxx .werken-bij-pp-bg {
    background: url("/media/axjdlyeo/werken-bij-pp-banner.jpg");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
}


body.xxx .header-algemeen-bg {
    background: url("/media/tfsisvuo/header-algemeen.png");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
}

@media (max-width:991px) {
    .home-bg {
        background: url("/media/hfxol0p4/home-banner-mobiel.jpg")!important;
        background-position: top right !important;
        background-repeat: no-repeat!important;
    }
    .overheid-bg {
        background: url("/media/ulpnubxx/overheid-banner-mobiel.jpg")!important;
	    background-position: top right !important;
	    background-repeat: no-repeat!important;
    }
    .overheidvacatures-bg {
        background: url("/media/4uxd1xli/overheid-banner-vacatures-overheid-mobiel.jpg")!important;
	    background-position: top right !important;
	    background-repeat: no-repeat!important;
    }
    .zorg-bg {
        background: url("/media/k3zbecxw/zorg-banner-mobiel.jpg")!important;
	    background-repeat: no-repeat !important;
	    background-position: top right !important;
    }
    .zorgvacatures-bg {
        background: url("/media/tjxhktmb/banner-vacatures-zorg-mobiel.jpg")!important;
        background-repeat: no-repeat !important;
	    background-position: top right !important;
    }
    .traineeships-bg {
        background: url("/media/fn4kznyd/traineeships-banner-mobiel.jpg")!important;
	    background-repeat: no-repeat !important;
	    background-position: top right !important;
    }
    .traineeshipsvacatures-bg {
        background: url("/media/3p5hutuu/banner-vacatures-traineeships-mobiel.jpg")!important;
	    background-repeat: no-repeat !important;
	    background-position: top right !important;
    }
    .intern-bg {
        background: url("/media/2xbhs0hp/intern-banner-mobiel.jpg")!important;
	    background-repeat: no-repeat !important;
	    background-position: top right !important;
    }
    .intenvacatures-bg {
        background: url("/media/5onea53j/banner-vacatures-intern-mobiel.jpg")!important;
    	background-repeat: no-repeat !important;
    	background-position: top right !important;
    }
    .zelfstandigen-bg {
        background: url("/media/5b1dykck/werken-als-zzper-banner-mobiel.jpg");
        position: relative;
    	background-repeat: no-repeat;
    	background-position: top right;
    }
    .werken-bij-pp-bg {
    background: url("/media/ugwgempj/werken-bij-pp-banner-mobiel.jpg");
    position: relative;
	background-repeat: no-repeat;
	background-position: top right;
    }
}

.filter-searchbar-form .input-group {
    background-color: var(--white);
    border: 1px solid var(--grey-lighter);
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
    border-radius: 250px;
    font-size: 20px;
    color: var(--purple-darkest);
    margin-bottom: 30px;
    height: 65px;
    padding-left: 15px;
}

.filter-searchbar-form .form-control {
    border-radius: 10px !important;
    border: 0px !important;
    margin-bottom: 0px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat left center;
    background-size: 1.6em 1.6em;
    padding-left: 2em;
    /*<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>*/
}

.filter-searchbar-form .form-control:focus {
    box-shadow: none;
}

.filter-searchbarxx {
/*    background-color: var(--white);
    box-shadow: 0px 10px 30px #00000029;
    border-radius: 250px !important;*/
    font-size: 20px;
    color: var(--purple-darkest);
 /*   margin-bottom: 30px;
    height: 65px;
    padding-left: 30px;*/
    border: 0 none;
}
.filter-searchbar-form .input-group-append {
    align-self: center;
/*    padding-top: 6px;*/
    padding-right: 10px;
}

@media (max-width: 991px){
    .filter-searchbar-form .input-group-append {
/*        padding-top: 12px !important;*/
        padding-right: 12px !important;
    }
}

.btn-search {
    margin-top: .75rem !important;
    color: var(--white);
    background-color: var(--purple-darker);
    font-family: CircularXXWeb-Bold, sans-serif;
    text-transform: uppercase;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: none;
    border-radius: 4px;
    width: max-content;
    text-decoration: none;
    border-radius: 150px;
    border: 2px solid var(--purple-darker);
}

/* HomeHeroBlock */


    .homeheroblock {
        /*display: flex;*/
        /* background-color: var(--blue-lighter); tf-no */
		/*background: url("data:image/svg+xml,%3Csvg id='PP_groen' data-name='PP groen' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2329eb6c;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='300' cy='300' r='300'/%3E%3C/svg%3E") no-repeat 130% -100px;*/
        padding: 200px 0 0;
        height: 100%;
        width: 100%;
    }

    .wrapper-vakgebieden-buttons {
        display: flex;
        flex-direction: column;
    }

    .homeheroblock .aboveButtonText {
        text-transform: uppercase;
        font-size: 12px;
        color: var(--purple-darker);
    }

    .homeheroblock__right {
        width: 100%;
    }

        .homeheroblock__right img {
            width: 640px;
            height: 714px;
            background: url("/media/ypabbouo/home-banner.jpg");
        }

    .homeheroblock__left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
    }

    @media (max-width: 995px) {
        .homeheroblock {
            flex-direction: column-reverse;
            padding: 50px 0;
        }

        .homeheroblock__title {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .homeheroblock__right, .homeheroblock__left {
            width: 100%;
        }

            .homeheroblock__right img {
                width: 70%;
                display: block;
                margin: auto;
            }

    }



#inschrijvenButtonContainer {
    position: relative;
}

#inschrijvenButtonAttentionSeeker {
    position: absolute;
    background: var(--green);
    color: var(--purple-darkest);
    border-radius: 5px;
    width: 15em;
    right: 0;
    top: -200px;
    padding: 15px;
    -webkit-box-shadow: 1px 1px 15px 0px rgba(0,0,0,0.5); 
    box-shadow: 1px 1px 15px 0px rgba(0,0,0,0.5);
    transition: top .5s;
}
#inschrijvenButtonAttentionSeeker:after {
    content: "";
    background: var(--green);
    position: absolute;
    top: -8px;
    right: 25%;
    z-index: 99999999999;
    height: 15px;
    width: 15px;
    transform: rotate(45deg);
}
#inschrijvenButtonClose {
    position: absolute;
    display: block;
    padding: 0;
    right: 15px;
    top: 15px;
    width: 1em;
    height: 1em;
    border: 0 none;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") no-repeat center center;
    color: transparent;
}
#inschrijvenButtonAttentionSeeker h3 {
    font-size: 1.2em;
    line-height: 1.2;
    margin-bottom: 0;
}
#inschrijvenButtonAttentionSeeker p {
    margin-bottom: 0;
    line-height: 1.2;
}

.contentexpander {
    max-height: 8.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-height .5s cubic-bezier(0, 1, 0, 1), background-color .5s;
}
.contentexpander p {
    margin: 0;
}
.contentexpandcontainer.expanded .contentexpander {
    max-height: 200vh;
    transition: max-height 1s ease-in-out;
    background-color: rgba(255,255,255,.8);
}
.contentexpandcontainer button {
    display: none;
}
@media (max-width: 576px) {
    .contentexpandcontainer button {
        display: inline-block;
        font-size: 1.6em;
        font-family: CircularXXWeb-Bold, sans-serif;
        border: 0 none;
        background: transparent;
        padding: 0;
    }
    .contentexpandcontainer .contentexpandcontainerhide {
        display: none;
    }
    .contentexpandcontainer.expanded .contentexpandcontainerhide {
        display: inline;
    }
    .contentexpandcontainer.expanded .contentexpandcontainershow {
        display: none;
    }
}

.txtBlack {
    color: #000000 !important;
}

.txtWhite {
    color: #ffffff !important;
}

.txtGreen {
    color: #28eb6c !important;
}

.txtBlue {
    color: #0c0347 !important;
}

.small-header {
    min-height:300px !important;
}