@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Open+Sans:wght@500;700&display=swap');

.whatsappbutton { z-index: 1000; background-color: #25D366; position: fixed; right: 40px; bottom: 20px; font-size: 18px; padding: 10px 20px; border-radius: 100px; font-weight: 500; transition:ease-in-out 200ms all; }
.whatsappbutton .fa-whatsapp { color:#fff; font-weight: bold; font-size: 24px; }
.whatsappbutton .whatsapp { display: flex; align-items: center; column-gap: 10px; }
.whatsappbutton:hover{ transform: scale(1.05); text-decoration:none; }

@media screen and (max-width: 992px) {
    .whatsappbutton{ right:10px; bottom:10px; font-size:16px; }
}

    :root{
        vacancy-accent-color: #26B6B4;
        vacancy-btn-color: #26B6B4;
        vacancy-text-color: #26B6B4;
    }

    h1,h2,h3,h4,h5,h6 {
        font-family: 'Montserrat', serif;
        font-weight: 400;
    }

    h1 {
    }
    
    h2{
        line-height: 35px;
        color:black !important;
    }
    
    h2 span{
        color:#051d40 !important;
        font-weight: 600;
        font-family: 'Montserrat', sans-serif !important;
    }

    
    body{
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height:1.4;
        font-weight: 400;
    }
    
    .display h1{
        line-height:1;
        font-weight: 700;
        text-transform: unset;
    }
    
    .display h1.smaller{
        font-size:2.4rem;
    }
    
    .bg-light{
        background-color:#fff !important;
    }
    
    .vacancy-index-item-field-value i,.vacancy-detail-team .vacancy-detail-team-item .vacancy-colleague-function{
         color:#2064AC!important;
    }
    
@media (max-width: 768px) {
    .is-header-home .is-box-centered { vertical-align: bottom; }
    .is-header-contact .is-box-centered { vertical-align: bottom; }
}
    
@media (min-width: 1200px) {
    .team-blocks .col-lg-4 {  
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .display h1.smaller{
        font-size:3.5rem;
    }
}
  
  .apply-btn-submit{
        border-radius: 50px !important;
        letter-spacing: normal;
        font-weight: 500;
  }
  
    .apply-btn-submit:hover{
        background-color: #4085C6;
  }
  
      .container_vacancy-detail .fas, .container_vacancy-detail .fa, .container_vacancy-detail .far, .vacancy-detail-sidebar .vacancy-detail-sidebar-cta .social-share span, .modal .modal-content .modal-title{
          color:#2064AC !important;
      }
    

    
    *{
        font-family: 'Montserrat', sans-serif ;
        scroll-behavior: smooth;
    }
    
    p{
        font-weight: 400 !important;
        font-style:normal;
    }
    
    p > b {
        color: #051d40!important;
        font-weight: 400 !important;
        font-style:normal ;
    }
    
    li {
        font-weight: 400 !important;
    }
    
    .is-dark-text * {
        color: #303030;
    }
    
    .navbar-logo {
        max-height: 80px;
    }
    
    .is-footer .fas{
        color:#2064AC;
    }
    
    .nav-link{
        color: #1D64AE !important;
        font-weight: 500;
    }
    
    
    a.uitdaging-wrapper {
        display: block;
        border: 2px solid #26B6B4;
        padding: 30px 20px 20px;
        border-radius: 4px;
        transition: all 200ms ease-out !important;
        height:100%;
    }
    
    a.uitdaging-wrapper:hover {
        background-color: #26B6B4;
        color: #fff !important;
        text-decoration:none;
    }
    
    a.uitdaging-wrapper h3{
        font-weight: bolder;
        line-height: 1.2;
        color: #26B6B4 !important;
        font-size: 20px;
     }
    
    a.uitdaging-wrapper:hover h3, a.uitdaging-wrapper:hover .icon, a.uitdaging-wrapper:hover span{
        color:#fff !important;
        text-decoration:none;
    }
    
    .uitdaging-wrapper .icon{
        font-size: 60px;
        color: #26B6B4 ;
    }
    
    a.werknemers-wrapper {
        display: block;
        border: 2px solid #005078;
        padding: 30px 20px 20px;
        border-radius: 4px;
        transition: all 200ms ease-out !important;
        height:100%;
    }
    
    a.werknemers-wrapper:hover {
        background-color: #26B6B4;
        color: #fff !important;
        text-decoration:none;
    }
    
     a.werknemers-wrapper h3{
        font-weight: bolder;
        line-height: 1.2;
        color: #26B6B4 !important;
        font-size: 20px;
     }
    
    a.werknemers-wrapper:hover h3, a.werknemers-wrapper:hover .icon, a.werknemers-wrapper:hover span{
        color: white !important;
        text-decoration:none;
    }
    
    .werknemers-wrapper .icon{
        font-size: 60px;
        color: #26B6B4;
    }
    

    
     .personeel-wrapper  {
        display: block;
        padding: 30px 10px 20px;
        transition: all 200ms ease-out !important;
        height:100%;
        background-color: #fff;
        position:relative;
    }
    
    .personeel-wrapper img {
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 0px;
    height: 170px;
    object-fit: cover;
    width:100%;
    }
    
    
     .personeel-wrapper  h3{
        font-weight: bolder;
        line-height: 1.2;
        color: #005078;
        margin-top: 170px;
     }
    
    .personeel-wrapper .function{
        margin-top: -10px;
        color: #8f5d46;
        font-size: 16px;
    }
    
    .personeel-wrapper  .icon{
        font-size: 60px;
        color: #005078;
    }
    
        .locatie-wrapper  {
        display: block;
        border: 2px solid #005078;
        padding: 30px 20px 20px;
        border-radius: 4px;
        transition: all 200ms ease-out !important;
        height:100%;
        position:relative;
    }
    
    .locatie-wrapper img {
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 0px;
    height: 300px !important;
    width:100%;
    object-fit: cover;
    }
    
    
     .locatie-wrapper  h3{
        font-weight: bolder;
        line-height: 1.2;
        color: #005078;
        margin-top: 300px;
     }
    
    .locatie-wrapper .function{
        margin-top: -10px;
        color: #e5415b;
        font-size: 16px;
    }
    
    
    img.shadow{
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
        border-radius:6px;
    }
    
    .btn-default, .btn-info, .btn-primary{
        background-color: #1D64AE !important;
        color: #fff !important;
        border-radius: 64px!important;
        font-weight: 500;
        border: none;
    }
    
    .btn-default, .btn-info, .btn-primary:hover{
        background-color: #4085C6 ;
    }
    
    .btn-default-ghost{
        background-color: #fff !important;
        color: #2064AC !important;
        border-radius: 64px!important;
        font-weight: 500;
        border: none;
    }
    
    .btn-default-ghost:hover{
        background-color:#2064AC !important;
        color:#fff !important;
    }
    
    .vacancy-index-list-counter{
        background-color:#8f5d46 !important;
    }
    
    .header .btn-default:first-child{
        margin-right:5px;
    }
        .header .btn-default:first-child:hover{
        background-color: #4085C6 !important;
    }
    
    .header .btn-default:last-child{
        margin-left:5px;
    }
    


    .container_vacancy-detail li {
        font-weight: 400;
    }

    
    .vacancy-detail .employee{ background-color: rgb(73, 164, 162);}
    .vacancy-detail .form-control{border-radius: 0px !important;}
    .apply-btn-submit{border-radius:0px;padding: 15px 20px;}
    
    .icon-home-title span{
        font-weight:600;
    }
    
    .col-md-6.img-default {
        padding: 0px 30px;
    }
    .is-footer b{
        color: rgb(73, 164, 162);
    }
    .cta-title{
        font-size:36px;
        color:#fff !important;
    }
    
    .is-footer h3 {
        font-weight: bolder;
        line-height: 1.2;
        color: black;
    }
    
    .navbar-toggler span{
        background-color:#1D64AE !important;
    }
    
    #navbar-main .nav-item a{
        transition:all 200ms ease-in-out;
    }
    #navbar-main .nav-item.active:not(:last-child) a,  #navbar-main .nav-item:not(:last-child):hover a{
            color: #1D64AE ;
            text-shadow: -0.5px -0.5px 0 #00507900, 0.3px 0.3px 0 #005079, -0.2px 0.2px 0px #00507900, 0.5px 0.5px 0 #00507900;
    }
    
     #navbar-main .nav-item .dropdown-item:hover{
    background-color: #1D64AE !important;
    font-weight: normal;
    color: #fff !important;
}

    
    .logo-header{
        width:25% !important; 
    }
  li.nav-item:last-child a.nav-link {
        background-color: #1D64AE;
        color: #fff !important;
        border-radius: 64px!important;
        padding: 5px 20px;
        margin-top: 10px;
        margin-left: 25px;

    }
    li.nav-item:last-child:hover a.nav-link{
        color:#fff !important;
        background-color: #4085C6;
    }
    
    .icon-home-title{font-size:24px; margin-top:20px;}
    @media screen and (max-width: 992px) {
        .logo-header{ width: 50%;}
        .row .btn:last-child{margin-top:10px;}
        li.nav-item:last-child a.nav-link{margin: 10px;text-align: center;}
        nav#nav-main {padding: 0px 10px;}
        a.uitdaging-wrapper {padding: 20px 0px;margin: 13px; position: relative; height: auto;}
        a.werknemers-wrapper {padding: 20px 10px;margin: 13px; position: relative; height: auto;}
          .personeel-wrapper {padding: 20px 10px;margin: 13px; position: relative; height: auto;}
           .locatie-wrapper {padding: 20px 10px;margin: 13px; position: relative; height: auto;}
        .col-md-6.img-default{padding:15px;}
        .is-overlay .is-overlay-bg{background-position:center right;}
    .is-footer img{width:200px !important;}
      .icon-home-title{margin-top:10px !important; margin-bottom:6px; letter-spacing:0px !important;}   
    }
    
    .vacancy-index-item {border-radius: 0; border: none;}
    
    .uitdaging-wrapper .icon {
    font-size: 60px;
    color: #26b6b4;
}

    .uitdaging-wrapper .icon:hover {
    font-size: 60px;
    
    color: white;
}
    
      /*** UPDATED VACANCY OVERVIEW STYLE ***/
    .vacancy-index-list-counter {
        padding: 0;
        width: 38px;
        height: 38px;
        display: inline-flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-right: 2px;
        color: #fff;
        background-color: #39A0DA !important;
    }
    
    

    
    
    .vacancy-index-item {
    background-color: white;
    border-radius:10px;
    
}
    
    .vacancy-index-item-fields {
        display: grid;
        gap: 6px;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0;
        width: unset;
    }   
    .vacancy-index-item-fields > .ml-auto {
        grid-column: 3;
        grid-row: 1 / 4;
    }

    .vacancy-index-item-fields > div {
        padding: 0!important;
    }
    
    @media screen and (max-width: 992px) {
        .vacancy-index-item-fields {
            grid-template-columns: 1fr 1fr;
        }   
        .vacancy-index-item-fields > .ml-auto {
            grid-column: 1 / 3;
            grid-row: unset;
            margin-left: unset;
            width: 100%;
            margin-top: 5px;
        } 
        .vacancy-index-item-fields > .ml-auto .btn {
            width: 100%;
        } 
    }
    .vacancy-index-item-fields > .ml-auto {
        grid-column: 3;
        grid-row: 1 / 4;
    }
    
    @media screen and (max-width: 992px) {
        .vacancy-index-item-fields {
            grid-template-columns: 1fr 1fr;
        }   
        .vacancy-index-item-fields > .ml-auto {
            grid-column: 1 / 3;
            grid-row: unset;
            margin-left: unset;
            width: 100%;
            margin-top: 5px;
        } 
        .vacancy-index-item-fields > .ml-auto .btn {
            width: 100%;
        } 
    }
    
    

    
    
    .is-bg-grey, .is-wrapper > div.is-bg-grey {
    background-color: #DCEFEB;
}
    .vacancy-detail-progress .progress-bar {
    background-color: #26B6B4;
}
    
    .is-overlay .is-overlay-bg {
    background-color:#DAF2FA ;
}
    
    
    @media screen and (max-width: 768px) {
        .is-header-home {padding-top: 120px;}
    }
    
    .contactform {margin-left: 15px; margin-right: 15px;}
    @media screen and (max-width: 768px) {
    .contactform {margin-left: 30px; margin-right: 30px;}