body[class*="template-vacancies"] #pageheader header > div {  margin: 48px var(--outer-05);  }
body[class*="template-vacancies"] #pageheader header > div p:last-child{ margin-bottom:0;}
@media all and (min-width: 1500px) {
    body[class*="template-vacancies"] #pageheader header > div {  margin: 48px var(--outer-1);  }
}

@media all and (min-width: 900px)  and (max-width: 1199px) {
    body[class*="template-vacancies"] #pageheader figure picture {
        padding-bottom:  35%;
    }
    body[class*="template-vacancies"] #pageheader header > div {
        width: auto;
        margin: calc(0px - var(--inner-1)) var(--outer-05) 0;
        padding: var(--inner-1) var(--inner-1);
    }
}
body[class*="template-vacancies"] #pageheader header > div { border-radius: 12px; }
@media all and (max-width: 899px) {
    body[class*="template-vacancies"] #pageheader header h1   { margin-bottom: 0.5em;  }
    body[class*="template-vacancies"] #pageheader header   { border-radius: 12px;
        margin-right: var(--outer-05);
        margin-left: var(--outer-05); padding: 0;
    }

    body[class*="template-vacancies"] #pageheader header > div {
        width: auto; border-radius: 0;
        margin: calc(0px - var(--inner-1)) 0 var(--outer-05);
        padding: var(--outer-1) ; padding:20px;
    }
    body[class*="template-vacancies"] #pageheader figure {

        padding-bottom: 50%;
    }
}

.vacancy_table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px 16px;
    border-left: var(--outer-05) solid transparent;
    border-right: var(--outer-05) solid transparent;
    margin: 32px 0;

}
@media all and (min-width: 1500px) {
    .vacancy_table {

        border-left: var(--outer-1) solid transparent;
        border-right: var(--outer-1) solid transparent;
    }
}
.vacancy_table .row {
    margin: 16px 0;
    display: table-row;
}
.vacancy_table .row:first-child {
    margin-top: 0 !important;
}
.vacancy_table .cell {
    display: table-cell;
    padding: 1em;
    font-size: 1em;
    line-height: 1.2;

}

.vacancy_table a.row {
    color: black;
    border-radius: 4px;
}


.vacancy_table .row .cell {
    border: 1px solid #5D5F56;
    background-color: #ECEAE6;
}

.vacancy_table .row:first-child .cell {
    white-space: nowrap;
}

.vacancy_table a.row:is(:hover,:focus-visible) .cell {
    background-color: var(--hi_grey);
    color: white;
}

.vacancy_table .row .cell:not(:first-child):not(:last-child) {
    border-left: none;
    border-right: none;
}

.vacancy_table .row .cell:last-child {
    text-align: right;
}

.vacancy_table .row .cell:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.vacancy_table .row .cell:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: none;
}

.vacancy_table .row:first-child .cell {
    background-color: #004D44;
    color: white;
    font-weight: 700;

}

.vacancy_table .cell strong {
    font-weight: 700;
}

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

    .vacancy_table .cell {
        font-size: 18px;
    }

}

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

    .vacancy_table .cell {
        padding: 12px;
    }
}

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

    .vacancy_table {
        margin: var(--outer-1) 0;

        display: block;
        border-spacing: 0px;

    }

    .vacancy_table .row {
        display: block;
        width: 100%;
        border-radius: 4px;
        border: 1px solid #5D5F56;
        background-color: #ECEAE6;
        padding: 8px 16px;
    }

    .vacancy_table a.row:is(:hover,:focus-visible) .cell {
        background-color: transparent;
        color: currentColor;
    }

    .vacancy_table a.row:is(:hover,:focus-visible) {
        background-color: var(--hi_grey);
        color: white;
    }

    .vacancy_table .row:first-child {
        display: none;
    }


    .vacancy_table .row .cell,
    .vacancy_table .row .cell:first-child,
    .vacancy_table .row .cell:first-child {
        display: flex;
        border: none !important;
        border-radius: 0;
        background-color: transparent;
        padding: 0;
        margin: 0.5em 0;
        white-space: normal;

    }


    .vacancy_table .row .cell:last-child {
        text-align: left;
    }

    .vacancy_table .row .cell::before {
        content: attr(data-th) ': ';

        display: block;
        min-width: 8em;

    }


    .vacancy_table .row .cell :is(span,strong) {
        display: block;
    }

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

    .vacancy_table .cell {
        font-size: 16px;
    }
    .vacancy_table .row .cell::before {

        min-width: 7em;

    }

}



.vacancyheader { background: var(--hi_burgundy); color: white; padding:var(--outer-05) var(--outer-1);   border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;

    margin: var(--outer-1) var(--outer-05)  var(--outer-1) ;
}

.vacancyheader :is(h1,h2){ width: 100%; font-size: 32px; font-weight: 700; margin-bottom: 0.5em; line-height: 1.2 }
.vacancyheader div {  display: flex; flex-direction: column;}
.vacancyheader p {display:flex; align-items: center;     margin: 8px 0; }
.vacancyheader p strong { font-weight:700; }
.vacancyheader p.apply { margin: auto 0 8px 0; }

dl.vacancy_info { flex: 1; display: flex; flex-wrap: wrap; }



dl.vacancy_info :is(dt,dd) {
    float: left; font-size: 1em; line-height: 1.3; margin:0.33em 0 0;

}



dl.vacancy_info dt { clear: left; font-weight: 700; width: 7em;  }

/*
.vacancy_info1 { display: flex; flex-wrap: wrap; }
.vacancy_info1 dd { width: 100%;}

*/

dl.vacancy_info dt::after { content:":"; }

dl.vacancy_info::after { display: block; height: 0px; content:""; clear: both; }

dl.vacancy_info dt,
dl.vacancy_info dd {
    padding:8px 0;  display: inline-block;
}
dl.vacancy_info dt { }
dl.vacancy_info dd { width: calc(100% - 7em); }
dl.vacancy_info dd span{ font-size: 16px; line-height: 1.4;  }
dl.vacancy_info dd:has(a) {

}
.vacancyheader p:not(.apply) a,
dl.vacancy_info dd a { white-space: nowrap;
    font-size: 18px; background: rgba(255, 255, 255, 0.80); color: black; padding: 12px 1em; border-radius: 300px; border: 1px solid black; transition: all 0.2s ease;

}
.vacancyheader p:not(.apply) a:is(:hover,:focus-visible),
dl.vacancy_info dd a:not(.status):is(:hover,:focus-visible){

    background: white;
    border-color: white;
    color: black;
}
.vacancyheader p.booklet  { margin-bottom: 1em;}
.vacancyheader p.booklet a { display: inline-flex; align-items: center; font-weight: 700;}
.vacancyheader p.booklet a::after {
    content: attr(data-ext); border-radius: 8px;
    color: white; text-transform: uppercase;
    background:rgba(0, 0, 0, 0.80);
    display: inline-block;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    margin-left: 0.5em;
    line-height: 2;

    min-width: 1.666666666666667em;
    text-align: center;
    padding: 0 0.2222em;
}



.vacancyheader p.apply a {
    font-size: 24px;  background:var(--hi_yellow);
    color: var(--hi_black); padding: 0.5em 1em; border-radius: 8px; border: 1px solid black; font-weight: 700; transition: all 0.2s ease;
}
.vacancyheader p.apply a:is(:hover,:focus-visible){

    background: white;
    border-color: white;
    color: black;
}



.vacancyheader span.status{
    padding:7px 10px; font-size: 14px; font-weight: bold; color: black;
    border: 1px solid #221D33; background: white; border-radius:4px; margin: 0 0 0 12px;

    background: #FC8D8D;
}
.vacancyheader span.status.open{
    background: #8DFCA5;
}
.vacancyheader span.status.soon{
    background: #FCD08D;
}


@media all and (max-width:1023.98px) {
    .vacancyheader p:not(.apply) {
        margin-bottom: 1em;
    }
}

@media all and (min-width:600px) {
    dl.vacancy_info dd span{  display: block}
}
@media all and (min-width:1024px) {
    .vacancyheader { display: flex; flex-wrap: wrap;}
    dl.vacancy_info { margin-right: 24px;}

}
@media all and (min-width:1200px) {
    .vacancyheader { margin: var(--outer-05);}
    .vacancyheader :is(h1,h2){ font-size: 40px;}
}
@media all and (max-width:899.98px) {
    .vacancyheader { padding: 24px; }
    .vacancyheader :is(h1,h2){ font-size: 24px; }
    dl.vacancy_info :is(dt,dd),
    .vacancyheader p:not(.apply) a,dl.vacancy_info dd a,
    .vacancyheader p:not(.apply):not(:has(a)) {
        font-size: 18px;
    }

    dl.vacancy_info dd a {
        font-size: 16px;
    }

    .vacancyheader p.apply {
        margin: auto 0 8px 0;
    }

    .vacancyheader p.apply a {
        font-size: 18px;
    }
}
@media all and (max-width:599.98px) {
    .vacancyheader { padding: 18px; }
    dl.vacancy_info :is(dt,dd),
    .vacancyheader p:not(.apply) a,dl.vacancy_info dd a,
    .vacancyheader p:not(.apply):not(:has(a)) {
        font-size: 16px;
    }


    dl.vacancy_info dd a {
        font-size: 16px;
    }

    .vacancyheader p.apply {
        margin: auto 0 8px 0;
    }
    .vacancyheader p a {
        font-size: 16px;
    }
    .vacancyheader p.apply a {
        font-size: 18px;
    }
}


.vacancy_content { padding: var(--outer-05) 0; }
.vacancy_content .bodytext { margin-bottom: 0 !important; }

.vacancy_content .bodytext:first-child { padding-top: 0 !important; }
.vacancy_content .bodytext:last-child { padding-bottom:   0 !important; }


.vacancyheader+div>.vacancy_content:first-child { padding-top: 0;}


.vacancy_content:nth-child(even)
{ background:#ECEAE6; }


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

    .vacancy_content .bodytext { margin: 0 !important; }
}
@media all and (max-width:899.98px) {
    .vacancy_content {
        padding: var(--outer-1) 0;
    }
}
.vacancy_content h2 { font-size: 24px; }
@media all and (min-width:1200px) {
    .vacancy_content h2 { font-size: 32px; }

}

.vacancy_content dl.faqs dd div { padding-bottom: 1em; }

/*.vacancy_content .wrapper { max-width: 1280px; margin: 0 auto;}*/
.vacancy_content .imagery {   margin-top:0; margin-bottom:0;}
.vacancy_content .imagery+imagery {   margin-top:var(--outer-1);}


body.single-vacancies dl#anchors dd a{
    background: var(--hi_yellow);
    border: 1px solid var(--hi_black);
    color: var(--hi_black);
}

body.single-vacancies dl#anchors dd a:is(:hover,:focus-visible){
    background: var(--green); color: white;
}



/* IMAGES */

@media all and (min-width:1024px) {
    body.single-vacancies .eventbanner figure {
        padding-bottom: 33.333%;
    }

}

body.single-vacancies .imagery .vidholder>div { background: var(--hi_grey); }
body.single-vacancies .imagery:not(.fullbleed) .vidholder { margin-top: var(--outer-05) ; margin-bottom: var(--outer-05) ; }
body.single-vacancies .imagery:not(.fullbleed):first-child .vidholder { margin-top: 0 ; }
body.single-vacancies .imagery:not(.fullbleed):last-child .vidholder {   margin-bottom: 0 ; }

body.single-vacancies .imagery:not(.fullbleed) .vidholder ,
body.single-vacancies .imagery:not(.fullbleed) figure ,
body.single-vacancies .imagery:not(.fullbleed) figure.portrait ,
body.single-vacancies .imagery.fullbleed figure.portrait { width: var(--outer-9); margin-left: auto; margin-right: auto;  }


@media all and (max-width:1499px) {
    body.single-vacancies .imagery:not(.fullbleed) .vidholder ,
    body.single-vacancies .imagery:not(.fullbleed) figure { width: var(--outer-10); margin-left: auto; margin-right: auto;  }
    body.single-vacancies .imagery:not(.fullbleed) figure.portrait ,
    body.single-vacancies .imagery.fullbleed figure.portrait { width: var(--outer-8); margin-left: auto; margin-right: auto;  }




}

@media all and (max-width:1499px) {
    body.single-vacancies .imagery:not(.fullbleed) .vidholder ,
    body.single-vacancies .imagery:not(.fullbleed) figure{ width: var(--outer-14); margin-left: auto; margin-right: auto;  }
    body.single-vacancies .imagery:not(.fullbleed) figure.portrait ,
    body.single-vacancies .imagery.fullbleed figure.portrait { width: var(--outer-9); margin-left: auto; margin-right: auto;  }




}
@media all and (max-width:899px) {
    body.single-vacancies .imagery:not(.fullbleed) .vidholder ,
    body.single-vacancies .imagery:not(.fullbleed) figure  { width: var(--outer-14); margin-left: auto; margin-right: auto;  }
    body.single-vacancies .imagery:not(.fullbleed) figure.portrait ,
    body.single-vacancies .imagery.fullbleed figure.portrait { width: var(--outer-9); margin-left: auto; margin-right: auto;  }

    body.single-vacancies .imagery { margin-top: var(--outer-1);  margin-bottom: var(--outer-1); }
    body.single-vacancies .imagery:last-child{ margin-bottom: 0; }
    body.single-vacancies .imagery:first-child { margin-top: 0; }
}

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

    body.single-vacancies .imagery:not(.fullbleed) figure.portrait ,
    body.single-vacancies .imagery.fullbleed figure.portrait { width: var(--outer-14); margin-left: auto; margin-right: auto;  }

}


body.page-id-13288 #sectionintro>div:last-child::before {   height: 0; padding-bottom: 33.333%;  }
body.page-id-13288 #sectionintro>div:first-child p {   max-width: 32em;  }
body.page-id-13288 #sectionintro>div:first-child p:last-child a:only-child:last-child:first-child {    background: var(--hi_yellow); color: var(--hi_black);  }
body.page-id-13288 #sectionintro>div:first-child p:last-child a:only-child:last-child:first-child:is(:hover,:focus-visible){   background: white;  }
body.page-id-13288 #sectionintro>div:first-child p:last-child a:only-child:last-child:first-child::after  {   background-image: url("../images/icons/arrow.php?colour=30312C");  }
body.page-id-13288 #sectionintro>div:first-child p:last-child a:only-child:last-child:first-child:is(:hover,:focus-visible)::after {   background-image: url("../images/icons/arrow.php?colour=30312C");  }
body.page-id-13288 div#sectionmenu ul li a[href*="recruitment/vacancies"] {   background: var(--hi_yellow); color: var(--hi_black);  }
body.page-id-13288 div#sectionmenu ul li a[href*="recruitment/vacancies"]:is(:hover,:focus-visible) {   background: var(--green); color: white;  }

body.page-id-13288 div#sectionmenu ul li a[href*="recruitment/vacancies"]:is(:hover,:focus-visible) {   background: var(--green); color: white;  }

@media all and (min-width:900px) {
    div#sectionmenu { padding-top: 32px; padding-bottom: 20px;}
}
@media all and (max-width:1499px) {
    body.page-id-13288 #sectionintro p,
    body.page-id-13288 .aboutgrid > div > a > div p {
        font-size: 18px;
    }
}
@media all and (max-width:899px) {
    body.page-id-13288 #topimage  { height: 40vw;}

}
@media all and (max-width:599px) {
    body.page-id-13288 #sectionintro p,
    body.page-id-13288 .aboutgrid>div>a>div p {   font-size: 16px;  }

    body.page-id-13288 #topimage  { height: 50vw;}
}