/** Buttons **/
.ty-work .btn {
    position: relative;
    padding: 12px 41px 12px 22px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    border-radius: 37px;
    transition: all 250ms ease-in-out;
}

@media only screen and (max-width: 736px) {
    .ty-work .btn {
        font-size: 15px;
    }
}

.ty-work .btn-down.btn:after {
    content:'';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 10px;
    height: 6px;
    transform: translateY(-3px);
}
.ty-work .btn-right.btn:after {
    content:'';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 6px;
    height: 10px;
    transform: translateY(-6px);
}

.ty-work .btn-down.btn-white:after,
.ty-work .btn-down.btn-grey:after,
.ty-work .btn-down.btn-green:after {
    background-image: url('/wp-content/themes/kappersakademie/assets/images/angle-down.png');
}

.ty-work .btn-down.btn-black:after,
.ty-work .btn-down.btn-red:after {
    background-image: url('/wp-content/themes/kappersakademie/assets/images/angle-down-white.png');
}

.ty-work .btn-right.btn-white:after,
.ty-work .btn-right.btn-grey:after,
.ty-work .btn-right.btn-green:after {
    background-image: url('/wp-content/themes/kappersakademie/assets/images/angle-right.png');
}

.ty-work .btn-right.btn-black:after,
.ty-work .btn-right.btn-red:after {
    background-image: url('/wp-content/themes/kappersakademie/assets/images/angle-right-white.png');
}

.ty-work .btn-white {
    background-color: #FFFFFF;
}

.ty-work .btn-white:hover {
    background-color: #f4f4f4;
}

.ty-work .btn-black {
    background-color: #30353e;
    color: #FFFFFF;
}

.ty-work .btn-black:hover {
    background-color: #3a404a;
}

.ty-work .btn-grey {
    background-color: #e9e7e1;
}

.ty-work .btn-grey:hover {
    background-color: #eeece8;
}

.ty-work .btn-green {
    background-color: #a5c8c4;
}

.ty-work .btn-green:hover {
    background-color: #d6e6e4;
}

.ty-work .btn-red {
    background-color: #ca1d15;
    color: #FFFFFF;
}

.ty-work .btn-red:hover {
    background-color: #da261b;
}

/** Header visual Archive **/
.ht-header-visual-vacancy {
    background-color: #E9E7E1;
    overflow: hidden;
}

.ht-header-visual-vacancy-detail.ht-header-visual-vacancy {
    background-color: #FFFFFF;
    overflow: hidden;
}

.ht-header-visual-vacancy .ht-header-visual-content {
    display: flex;
    align-items: stretch;
}

.ht-header-visual-vacancy .ht-header-visual-content-left,
.ht-header-visual-vacancy .ht-header-visual-content-right {
    width: 50%;
}

.ht-header-visual-vacancy-detail .ht-header-visual-content-left {
    width: 55%;
}

.ht-header-visual-vacancy-detail .ht-header-visual-content-right {
    width: 45%;
}

.ht-header-visual-vacancy .ht-header-visual-content-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 128px 80px 128px 0;
}

.ht-header-visual-vacancy .ht-header-visual-content-left > h1 {
    width: 100%;
    margin: 0 0 24px;
    font-size: 55px;
    font-weight: 400;
}

.ht-header-visual-vacancy .ht-header-visual-content-left > .ht-header-visual-content-left-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.ht-header-visual-vacancy-detail .ht-header-visual-content-left > .ht-header-visual-content-left-text  {
    margin-bottom: 24px;
}

.ht-header-visual-vacancy-detail .ht-header-visual-content-left > ul {
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
}

.ht-header-visual-vacancy-detail .ht-header-visual-content-left > ul li {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 0 0 0 25px;
    margin: 0 0 8px;
}

.ht-header-visual-vacancy-detail .ht-header-visual-content-left > ul li:nth-child(1):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/timer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ht-header-visual-vacancy-detail .ht-header-visual-content-left > ul li:nth-child(2):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 18px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/money.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ht-header-visual-vacancy-detail .ht-header-visual-content-left > ul li:nth-child(3):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 18px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/location-pin.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ht-header-visual-vacancy .ht-header-visual-content-right .ht-header-visual-job-image {
    width: 50vw;
    height: 100%;
}

/** Header visual Werkenbij **/
.ht-header-visual-job .container {
    position: relative;
    padding-bottom: 72px;
}

.ht-header-visual-job .container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 128px);
    height: calc(100% + 104px);
    margin: -104px -64px 0;
    background-color: white;
}

.ht-header-visual-job-image {
    display: block;
    height: 732px;
}

.ht-header-visual-job-image-small {
    display: none;
}

@media only screen and (max-width: 992px) {
    .ht-header-visual-job-image {
        display: none;
    }

    .ht-header-visual-job-image-small {
        display: block;
        aspect-ratio: 1 / 0.8333;
    }

    .ht-header-visual-vacancy-detail.ht-header-visual-vacancy {
        background-color: #E9E7E1;
    }

    .ht-header-visual-vacancy .ht-header-visual-job-image,
    .ht-header-visual-vacancy-detail .ht-header-visual-job-image {
        display: block;
    }

    .ht-header-visual-vacancy .ht-header-visual-content,
    .ht-header-visual-vacancy-detail .ht-header-visual-content {
        flex-direction: column-reverse;
    }

    .ht-header-visual-vacancy .ht-header-visual-content-left,
    .ht-header-visual-vacancy .ht-header-visual-content-right ,
    .ht-header-visual-vacancy-detail .ht-header-visual-content-left,
    .ht-header-visual-vacancy-detail .ht-header-visual-content-right {
        width: 100%;
    }

    .ht-header-visual-vacancy .ht-header-visual-content-left,
    .ht-header-visual-vacancy-detail .ht-header-visual-content-left {
        padding: 50px 0;
    }

    .ht-header-visual-vacancy .ht-header-visual-content-right,
    .ht-header-visual-vacancy-detail .ht-header-visual-content-right {
        aspect-ratio: 1.2 / 1;
    }

    .ht-header-visual-vacancy .ht-header-visual-content-right .ht-header-visual-job-image,
    .ht-header-visual-vacancy-detail .ht-header-visual-content-right .ht-header-visual-job-image {
        width: 100vw;
        margin-left: calc(-50vw + 360px);
    }
}

@media only screen and (max-width: 768px) {
    .ht-header-visual-vacancy .ht-header-visual-content-right .ht-header-visual-job-image,
    .ht-header-visual-vacancy-detail .ht-header-visual-content-right .ht-header-visual-job-image {
        margin-left: -15px;
    }

    .ht-header-visual-vacancy .ht-header-visual-content-left > h1,
    .ht-header-visual-vacancy-detail .ht-header-visual-content-left > h1 {
        margin: 0 0 12px;
        font-size: 25px;
    }

    .ht-header-visual-vacancy .ht-header-visual-content-left > .ht-header-visual-content-left-text,
    .ht-header-visual-vacancy-detail .ht-header-visual-content-left > .ht-header-visual-content-left-text {
        font-size: 14px;
    }

    .ht-header-visual-vacancy-detail .ht-header-visual-content-left > .ht-header-visual-content-left-text  {
        margin-bottom: 20px;
    }

    .ht-header-visual-vacancy-detail .ht-header-visual-content-left > ul {
        padding: 0;
        margin: 0 0 24px;
        list-style: none;
    }

    .ht-header-visual-vacancy-detail .ht-header-visual-content-left > ul li {
        font-size: 14px;
        padding: 0 0 0 23px;
    }
}

@media only screen and (max-width: 480px) {
    .ht-header-visual-vacancy-detail .btn {
        width: 100%;
        text-align: left;
    }
}

.ht-header-visual-content {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
}

.ht-header-visual-content > h1 {
    width: 100%;
    margin: 0 0 24px;
    font-size: 55px;
    font-weight: 400;
}

.ht-header-visual-content-left {
    width: 41%;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.ht-header-visual-content-right {
    width: 49%;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.ht-header-visual-content-right > *:not(:last-child) {
    margin-bottom: 32px;
}

@media only screen and (max-width: 736px) {
    .ht-header-visual-job .container {
        padding-bottom: 50px;
    }

    .ht-header-visual-content {
        flex-direction: column;
    }

    .ht-header-visual-content > h1 {
        font-size: 25px;
    }

    .ht-header-visual-content-left,
    .ht-header-visual-content-right {
        width: 100%;
        font-size: 14px;
    }

    .ht-header-visual-job .container:before {
        height: calc(100% + 50px);
        margin: -50px -64px 0;
    }
}

/** Latest vacancies **/
.ty-latest-vacancies {
    padding: 72px 0;
    background-color: #F4F3F0;
}

.ty-latest-vacancies p.ty-latest-vacancies-subject {
    color: #da261b;
    font-family: 'Abril Fatface', cursive;
    font-size: 18px;
    font-weight: 400;
}

.ty-latest-vacancies .ty-latest-vacancies-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 48px;
}


.ty-latest-vacancies .ty-latest-vacancies-header h2 {
    font-size: 32px;
    font-weight: 400;
}

.ty-latest-vacancies .ty-latest-vacancies-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    color: #ca1d15;
    font-size: 16px;
    font-weight: 700;
    text-decoration: underline;
    transition: all 250ms ease-in-out;
}

.ty-latest-vacancies .ty-latest-vacancies-link:after {
    content:'';
    position: relative;
    width: 6px;
    height: 10px;
    margin-left: 12px;
    background-image: url('/wp-content/themes/kappersakademie/assets/images/angle-right-red.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ty-latest-vacancies .ty-latest-vacancies-link:hover {
    color: #ca1d15;
}

.ty-latest-vacancies-loop {
    margin: 0 -16px;
}

.ty-latest-vacancies-loop > .slick-list > .slick-track {
    display: flex;
    align-items: stretch;
}

.ty-latest-vacancies-item {
    margin: 0 16px 32px;
    background-color: #FFFFFF;
    height: auto !important;
}

.ty-latest-vacancies-item:hover {
    text-decoration: none;
}

.ty-latest-vacancies-item:hover .ty-latest-vacancies-item-image img {
    transform: scale(1.05);
}

.ty-latest-vacancies-item-image {
    width: 100%;
    aspect-ratio: 1 / 0.725;
    overflow: hidden;
}

.ty-latest-vacancies-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 250ms ease-in-out;
}

.ty-latest-vacancies-item-content {
    padding: 36px;
}

.ty-latest-vacancies-item-content h3 {
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 22px;
}

.ty-latest-vacancies-item-content ul {
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
}

.ty-latest-vacancies-item-content ul li {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 0 0 0 25px;
    margin: 0 0 8px;
}

.ty-latest-vacancies-item-content ul li:nth-child(1):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/timer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ty-latest-vacancies-item-content ul li:nth-child(2):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 18px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/money.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ty-latest-vacancies-item-content ul li:nth-child(3):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 18px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/location-pin.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@media only screen and (max-width: 1024px) {
    .ty-latest-vacancies-loop {
        width: 100vw;
        margin: 0 calc(-50vw + 470px);
    }

    .ty-latest-vacancies-loop .slick-list {
        padding: 0px calc((100vw - 970px) / 2) !important;
    }
}

@media only screen and (max-width: 991px) {
    .ty-latest-vacancies-loop {
        width: 100vw;
        margin: 0 calc(-50vw + 360px);
    }

    .ty-latest-vacancies-loop .slick-list {
        padding: 0px calc((100vw - 750px) / 2) !important;
    }
}

@media only screen and (max-width: 736px) {
    .ty-latest-vacancies {
        padding: 50px 0;
    }

    .ty-latest-vacancies p.ty-latest-vacancies-subject {
        margin: 0 0 6px;
        font-size: 14px;
    }

    .ty-latest-vacancies .ty-latest-vacancies-header {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 0 0 32px;
    }


    .ty-latest-vacancies .ty-latest-vacancies-header h2 {
        font-size: 20px;
        margin: 0 0 12px;
    }

    .ty-latest-vacancies .ty-latest-vacancies-link {
        font-size: 14px;
    }

    .ty-latest-vacancies .ty-latest-vacancies-link:after {
        height: 8px;
        margin-left: 8px;
    }

    .ty-latest-vacancies-loop {
        width: 100vw;
        margin: 0 -15px;
    }

    .ty-latest-vacancies-loop .slick-list {
        padding: 0 20% 0 0 !important;
    }

    .ty-latest-vacancies-item-content h3 {
        font-size: 16px;
        margin: 0 0 16px;
    }

    .ty-latest-vacancies-item-content ul {
        margin: 0 0 16px;
    }

    .ty-latest-vacancies-item-content ul li {
        font-size: 14px;
        padding: 0 0 0 20px;
        margin: 0 0 6px;
    }

    .ty-latest-vacancies-item-content ul li:nth-child(1):before {
        width: 12px;
        height: 12px;
    }

    .ty-latest-vacancies-item-content ul li:nth-child(2):before {
        width: 12px;
        height: 14px;
    }

    .ty-latest-vacancies-item-content ul li:nth-child(3):before {
        width: 12px;
        height: 14px;
    }

    .ty-latest-vacancies-item .btn {
        width: 100%;
        font-size: 15px;
    }
}

/** Testimonials **/
.ty-testimonials {
    padding: 72px 0;
}

.ty-testimonials p.ty-testimonials-subject {
    color: #da261b;
    font-family: 'Abril Fatface', cursive;
    font-size: 18px;
    font-weight: 400;
}

.ty-testimonials h2 {
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 48px;
}

.ty-testimonials .ty-testimonials-list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0 -16px;
}

.ty-testimonials .ty-testimonials-list .slick-track {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.ty-testimonials .ty-testimonials-list .ty-testimonials-item {
    position: relative;
    margin: 0 16px 32px;
    padding: 48px 72px 74px;
    margin-bottom: 46px;
    background-color: #F4F3F0;
}

.ty-testimonials .ty-testimonials-list .ty-testimonials-item.slick-slide {
    height: auto !important;
}

.ty-testimonials .ty-testimonials-list .ty-testimonials-item p.ty-testimonials-item-name {
    position: relative;
    width: 100%;
    padding: 0 9px;
    font-family: 'Abril Fatface', cursive;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.ty-testimonials .ty-testimonials-list .ty-testimonials-item p.ty-testimonials-item-job {
    padding: 0;
    margin: 0 0 24px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    border: none;
}

.ty-testimonials .ty-testimonials-list .ty-testimonials-item .ty-testimonials-item-quote-container {
    position: relative;
    display: flex;
    padding: 0;
    margin: 8px 0 0;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 300;
}

.ty-testimonials .ty-testimonials-list .ty-testimonials-item blockquote {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    border: none;
}

.ty-testimonials .ty-testimonials-list .ty-testimonials-item .ty-testimonials-item-image {
    position: absolute;
    bottom: -46px;
    left: 50%;
    width: 92px;
    height: 92px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    transform: translateX(-50%);
}

@media only screen and (max-width: 736px) {
    .ty-testimonials {
        padding: 50px 0 20px;
    }

    .ty-testimonials p.ty-testimonials-subject {
        font-size: 14px;
        margin: 0 0 10px;
    }

    .ty-testimonials h2 {
        font-size: 22px;
        margin: 0 0 24px;
    }

    .ty-testimonials .ty-testimonials-list .slick-list {
        padding: 0 20% 0 0 !important;
    }

    .ty-testimonials .ty-testimonials-list .ty-testimonials-item p {
        font-size: 16px;
    }

    .ty-testimonials .ty-testimonials-list .ty-testimonials-item blockquote {
        font-size: 16px;
    }
}

@media only screen and (max-width: 512px) {
    .ty-testimonials .ty-testimonials-list .slick-list {
        padding: 0 20% 0 0 !important;
    }
    
    .ty-testimonials .ty-testimonials-list .ty-testimonials-item {
        padding: 24px 12px 62px;
    }
}

/** HTML **/
.ty-html {
    padding: 72px 0;
}

@media only screen and (max-width: 736px) {
    .ty-html {
        padding: 50px 0;
    }
}

/** 2 col image text **/
.ty-2-col-image-text {
    background-color: #F4F3F0;
}

.ty-2-col-image-text .ty-2-col-image-text-cols {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-contain {
    width: calc(42% - 32px);
    padding: 72px 0;
}

.ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-contain .ty-2-col-image-text-left-img-contain {
    width: 100%;
    height: 100%;
}

.ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-cover {
    width: 42%;
    padding: 0;
}

.ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-cover .ty-2-col-image-text-left-img-cover {
    position: absolute;
    width: 42.908vw;
    height: 100%;
    right: calc(59% + 80px);
}

.ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right {
    width: 58%;
    padding: 72px 0;
}

.ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right .ty-2-col-image-text-right-subject {
    color: #da261b;
    font-family: 'Abril Fatface', cursive;
    font-size: 18px;
    font-weight: 400;
}

.ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right h2 {
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 32px;
}

.ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right .ty-2-col-image-text-right-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0 0 32px;
}

@media only screen and (max-width: 1199px) {
    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-cover .ty-2-col-image-text-left-img-cover {
        position: absolute;
        width: 45.908vw;
        height: 100%;
        right: calc(47% + 80px);
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-contain {
        width: 48%;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right {
        width: 48%;
    }
}

@media only screen and (max-width: 991px) {
    .ty-2-col-image-text .ty-2-col-image-text-cols {
        flex-direction: column;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left,
    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right {
        position: relative;
        width: 100%;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-cover {
        width: 100vw;
        height: 60vw;
        margin: 0 calc(-50vw + 50%);
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-contain {
        width: 100%;
        aspect-ratio: 1 / 0.8;
        padding-bottom: 0;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-cover .ty-2-col-image-text-left-img-cover {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media only screen and (max-width: 736px) {
    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-left.ty-2-col-image-text-left-contain {
        padding-top: 50px;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right {
        padding: 50px 0;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right .ty-2-col-image-text-right-subject {
        font-size: 14px;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right h2 {
        font-size: 20px;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right .ty-2-col-image-text-right-text {
        font-size: 14px;
    }

    .ty-2-col-image-text .ty-2-col-image-text-cols .ty-2-col-image-text-right .btn {
        width: 100%;
        font-size: 15px;
    }
}

/** Vacancy form **/
.ty-vacancy-form {
    padding: 72px 0;
    background-color: #F4F3F0;
}

.ty-vacancy-form-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.ty-vacancy-form-content {
    width: calc(50% - 16px);
}

.ty-vacancy-form-content .ty-vacancy-form-subject {
    color: #da261b;
    font-family: 'Abril Fatface', cursive;
    font-size: 18px;
    font-weight: 400;
}

.ty-vacancy-form-content h2 {
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 24px;
}

.ty-vacancy-form-content .ty-vacancy-form-text {
   font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400; 
}

.ty-vacancy-form-code {
    width: calc(50% - 16px);
    padding: 0;
    background-color: white;
}

.ty-vacancy-form-code iframe {
    width: 100% !important;
    border: 2px solid white;
    height: 868px;
    overflow: hidden;
}

@media only screen and (max-width: 1199px) {
    .ty-vacancy-form-code iframe {
        height: 892px;
    }
}

@media only screen and (max-width: 991px) {
    .ty-vacancy-form-code iframe {
        height: 916px;
    }
}

@media only screen and (max-width: 768px) {
    .ty-vacancy-form {
        padding: 50px 0;
    }

    .ty-vacancy-form .ty-vacancy-form-wrapper {
        flex-direction: column;
    }

    .ty-vacancy-form .ty-vacancy-form-content,
    .ty-vacancy-form .ty-vacancy-form-code {
        width: 100%;
    }

    .ty-vacancy-form .ty-vacancy-form-content {
        margin: 0 0 32px;
    }

    .ty-vacancy-form .ty-vacancy-form-content .ty-vacancy-form-subject {
        font-size: 14px;
    }

    .ty-vacancy-form .ty-vacancy-form-content h2 {
        font-size: 20px;
        margin: 0 0 12px;
    }

    .ty-vacancy-form .ty-vacancy-form-content .ty-vacancy-form-text {
        font-size: 14px;
    }
}

/** Vacancy usps **/
.ty-vacancy-usps {
    padding: 72px 0;
}

.ty-vacancy-usps h2 {
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 48px;
    text-align: center;
}

.ty-vacancy-usp-list {
    display: flex;
    flex-wrap: wrap;
}

.ty-vacancy-usp-item {
    width: 50%;
}

.ty-vacancy-usp-item .ty-vacancy-usp-item-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 24px;
}

.ty-vacancy-usp-item .ty-vacancy-usp-item-header img {
    width: 36px;
    height: auto;
    margin-right: 24px;
}

.ty-vacancy-usp-item .ty-vacancy-usp-item-header h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;
}


.ty-vacancy-usp-item .ty-vacancy-usp-item-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

.ty-vacancy-usp-item:nth-child(odd) {
    padding: 40px 16px 40px 72px;
}

.ty-vacancy-usp-item:nth-child(even) {
    padding: 40px 72px 40px 16px;
}

.ty-vacancy-usp-item:nth-child(4n+1),
.ty-vacancy-usp-item:nth-child(4n+2){
  background-color: #F4F3F0;
}

.ty-vacancy-usp-item:nth-child(4n+3),
.ty-vacancy-usp-item:nth-child(4n+4){
  background-color: white;
}

@media only screen and (max-width: 992px) {
    .ty-vacancy-usp-item:nth-child(odd) {
        padding: 32px 16px 32px 48px;
    }

    .ty-vacancy-usp-item:nth-child(even) {
        padding: 32px 48px 32px 16px;
    }
}

@media only screen and (max-width: 736px) {
    .ty-vacancy-usps {
        padding: 50px 0;
    }

    .ty-vacancy-usp-item {
        width: 100%;
    }

    .ty-vacancy-usp-item:nth-child(odd) {
        padding: 32px;
        background-color: #F4F3F0 !important;
    }

    .ty-vacancy-usp-item:nth-child(even) {
        padding: 32px;
        background-color: white !important;
    }
}

/** contact blocks **/
.section-contact {
    padding-top: 104px !important;
    padding-bottom: 104px !important;
}

.contactblocks .ccard .txt-holder > p > a {
    position: relative;
    display: flex;
    padding-left: 26px;
}

.contactblocks .ccard .txt-holder > p > a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

.contactblocks > div:nth-child(1) .ccard .txt-holder > p > a:before {
    background-image: url('/wp-content/themes/kappersakademie/assets/images/phone.png');   
}

.contactblocks > div:nth-child(2) .ccard .txt-holder > p > a:before {
    background-image: url('/wp-content/themes/kappersakademie/assets/images/whatsapp.png');
}

.contactblocks > div:nth-child(3) .ccard .txt-holder > p > a:before {
    background-image: url('/wp-content/themes/kappersakademie/assets/images/mail.png');
}

/** Archive vacancy cards **/
.ty-vacancies {
    background-color: rgba(233, 231, 225, 0.5)
}
.ty-vacancies-loop {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -16px;
}
.ty-vacancies-item {
    width: calc((100% / 3) - 32px);
    margin: 0 16px 32px;
    background-color: #FFFFFF;
}

.ty-vacancies-item:hover {
    text-decoration: none;
}

.ty-vacancies-item:hover .ty-vacancies-item-image img {
    transform: scale(1.05);
}

.ty-vacancies-item-image {
    width: 100%;
    aspect-ratio: 1 / 0.725;
    overflow: hidden;
}

.ty-vacancies-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 250ms ease-in-out;
}

.ty-vacancies-item-content {
    padding: 36px;
}

.ty-vacancies-item-content h3 {
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 22px;
}

.ty-vacancies-item-content ul {
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
}

.ty-vacancies-item-content ul li {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 0 0 0 25px;
    margin: 0 0 8px;
}

.ty-vacancies-item-content ul li:nth-child(1):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/timer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ty-vacancies-item-content ul li:nth-child(2):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 18px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/money.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ty-vacancies-item-content ul li:nth-child(3):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 18px;
    transform: translateY(-50%);
    background-image: url('/wp-content/themes/kappersakademie/assets/images/location-pin.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/** Mobile Only gallery **/
.ty-mobile-gallery {
    display: none;
}

@media only screen and (max-width: 736px) {
    .ty-mobile-gallery {
        display: block;
        padding: 50px 0;
        overflow: hidden;
    }

    .ty-mobile-gallery-nav {
        width: calc(100% + 46px);
        margin: 0 -23px 0 -23px;
    }

    .ty-mobile-gallery-nav  .ty-mobile-gallery-item {
        margin: 0 8px;
        height: 80vw;
    }

    .ty-mobile-gallery-nav  .ty-mobile-gallery-item.slick-current {
        width: calc(60vw - 8px) !important;
    } 

    .ty-mobile-gallery-nav  .ty-mobile-gallery-item.slick-current + .slick-active {
        width: calc(40vw - 8px) !important;
    }

    .ty-mobile-gallery-nav  .ty-mobile-gallery-item.single > div {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    .ty-mobile-gallery-nav  .ty-mobile-gallery-item.double > div {
        overflow: hidden;
        width: 100%;
        height: calc(50% - 8px);
    }

    .ty-mobile-gallery-nav  .ty-mobile-gallery-item> div > img {
        object-fit: cover;
        object-position: center;
        min-width: 100%;
        max-width: none;
        max-height: 100%;
    }

    .ty-mobile-gallery-nav  .ty-mobile-gallery-item.double div:first-child,
    .ty-mobile-gallery-main  .ty-mobile-gallery-item.double img:first-child {
        margin-bottom: 16px;
    } 

    .ty-mobile-gallery-main {
        width: 100vw;
        margin: 50px -15px 0;
    }

    .ty-mobile-gallery-main .ty-mobile-gallery-item {
        width: 100%;
        height: auto;
    }

    .ty-mobile-gallery-main .ty-mobile-gallery-item > img {
        object-fit: cover;
    }
}

.ty-filter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 48px;
}

.ty-filter-box > span {
    font-family: 'Abril Fatface', cursive;
    font-size: 22px;
    font-weight: 400;
}

.ty-vacancy-list-wrapper {
    padding: 96px 0 104px;
}

.ty-vacancy-list-wrapper .search-filter-base {
    width: 50%;
}

.ty-vacancy-list-wrapper .search-filter-field__input {
    border: none;
}

.ty-vacancy-list-wrapper .search-filter-component-combobox--mode-single .search-filter-component-combobox__selection,
.ty-vacancy-list-wrapper .search-filter-component-combobox .search-filter-component-combobox__actions .search-filter-component-combobox__actions-input {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    padding: 10px 0 10px 22px;
}

.ty-vacancy-list-wrapper .search-filter-component-combobox__listbox-toggle::before {
    display: none;
}

.ty-vacancy-list-wrapper .search-filter-component-combobox .search-filter-component-combobox__actions .search-filter-component-combobox__actions-input::placeholder {
    color: #000000;
}

/** pagination **/
.vacancy-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.vacancy-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    width: 32px;
    height: 32px;
    line-height: 1;
    color: #000000;
    font-weight: 700;
    border: 1px solid #a5c8c4;
    transition: all 250ms ease-in-out;
}

.vacancy-pagination .page-numbers:hover {
    border: 1px solid #ca1d15;
}

.vacancy-pagination .page-numbers.current {
    background-color: #a5c8c4;
}

.vacancy-pagination .page-numbers.prev,
.vacancy-pagination .page-numbers.next {
    border: none;
    width: 12px;
    height: 32px;
}

.vacancy-pagination .page-numbers.prev svg path,
.vacancy-pagination .page-numbers.next svg path {
    fill: #000000;
    transition: all 250ms ease-in-out;
}

.vacancy-pagination .page-numbers.prev:hover svg path,
.vacancy-pagination .page-numbers.next:hover svg path {
    fill: #ca1d15;
}

@media only screen and (max-width: 991px) {
    .ty-vacancies-item {
        width: calc(50% - 32px);
    }
}

@media only screen and (max-width: 767px) {
    .ty-vacancy-list-wrapper {
        padding: 50px 15px;
    }
    
    .ty-vacancies-item {
        width: 100%;
    }

    .ty-filter-box {
        flex-direction: column;
        align-items: flex-start;
        margin: 0 0 48px;
    }

    .ty-filter-box > span {
        display: flex;
        font-size: 16px;
        margin: 0 0 10px;
    }
    
    .ty-vacancy-list-wrapper .search-filter-base {
        width: 100%;
    }
}