/**
 * @file
 * Subtheme specific CSS.
 */
 :root {
    --primary-color : #FFFFFF;
    --secondary-color : #3A3F45;
    --general-text-color : #5C6873;
    --main-bg-color : #E8E3E3;
    --secondary-bg-color: #F2F2F2;
    --highlight-color : #F00100;
    --secondary-cta-bg-color : #FF6767;
}

.container-fluid {
    margin: 0!important;
    padding: 0!important;
}

body {
    overflow-x:hidden;
}

body, .site-footer {
    font-family: 'Nunito', sans-serif, Arial, Helvetica;
}

/**
* Header/Branding
*/

.header {
    padding: 0 4vw;
}

#navbar-main {
    background-color: white!important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.brand-navigation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end!important;
    padding-right: 120px!important;
    padding-left: 100px!important;
}

.navbar-brand {
    max-width: 12rem;
    max-height: 12rem;
    overflow-y: hidden;
    position: relative;
}

.navbar-brand img {
    position: relative;
     top: -50px; 
}

.navbar-nav {
    gap: 1.2rem;
}

.nav-item {
    position: relative;
}

#navbar-main a {
    font-family: 'Nunito', sans-serif, Arial, Helvetica;
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
}

nav.menu--main ul li a::after {
    display: block;
    content: '';
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 0;
    background: var(--secondary-color);
    transition: width 0.4s;
}

nav.menu--main ul li a:hover::after {
    width: 50%;
}

/**
* Hero-banner
*/

.view-hero-banner-view {
    margin: 25px 0 100px 0;
}
.hero-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.hero-text-wrapper {
    width: 40vw;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
    padding: 40px;
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(15px);
}

.hero-text-part {
    color: var(--primary-color);
}

.hero-tagline {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    margin-bottom: 25px;
}

.hero-value-proposition {
    font-size: 20px;
    font-weight: bold;
}

.char {
    transform: translateY(115px);
    transition: transform .5s;
}

.hero-cta a, .hero-cta, .hero-tagline, .specialty-title, .specialty-text {
    overflow: hidden;
}

.hero-tagline .field, .hero-cta a .field, .specialty-title .field, .specialty-text .field {
    /* transform: translateY(-200%); */
    /* animation: slideDown 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; */
}

.hero-cta a .field, .specialty-text .field {
    /* animation-delay: 0.3s; */
}

@keyframes slideDown {
    to {
        transform: translateY(0);
    }
}

.hero-cta {
    margin: 50px 0 0 0;
    background-color: var(--highlight-color);
    padding: 10px 25px;
    border-radius: 15px;
}

.hero-cta a {
    text-decoration: none;
    color: var(--primary-color);
    font-size: 28px;
    font-weight: bolder;
}

.hero-image-wrapper {
    width:100vw;
/*     height: 700px; */
    overflow-y: hidden;
    overflow-x: hidden;
}

.hero-image-wrapper img {
    width:100vw;
    filter:brightness(0.4);
}

/**
* Specialty
*/
.block-views-blockspecialties-view-block-1 {
    margin-top: 100px;
    padding: 50px 0;
}

.block-views-blockspecialties-view-block-1 .view-content {
    padding: 50px 120px;
}

.view-specialties-view {
    text-align: center;
    font-family: 'Nunito', sans-serif, Arial, Helvetica;
}

.view-header {
    font-size: 36px;
    font-weight: bold;
    display:inline-block;
    padding: 0 120px;
    color: var(--highlight-color);
}

.view-header:after {
    content: '';
    display: block;
    position: relative;
    width: 75%;
    border: 3px solid var(--highlight-color);
    border-radius: 5px;
    margin-top: 8px; 
    left: 12.5%;
}

.specialty-wrapper {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.specialty-image {
    z-index: 10;
}

.specialty-icon {
    width: 100px;
    height: 100px;
}

.specialty-text-wrapper {
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: -50px;
    background: rgba(232, 227, 227, 0.20);
    padding: 50px 25px 25px 25px;
    border-radius: 15px;
    min-height: 20rem;
}

.specialty-title {
    font-size: 24px;
    color: var(--secondary-color);
    font-weight: bold;
    text-transform: uppercase;
    padding: 25px;
}

.specialty-text {
    text-align: justify;
    font-size: 16px;
    font-weight: bold;
}

/**
* Offer
*/

.view-offers-view {
    font-family: 'Nunito', sans-serif, Arial, Helvetica;
    text-align: center;
}

.view-offers-view .view-header {
    margin-bottom: 40px;
}

.offer-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 50px;
}

.offer-wrapper.blok-links .offer-text-wrapper{
    padding: 0 120px 0 75px;
}

.offer-wrapper.blok-rechts .offer-text-wrapper {
    padding: 0 75px 0 120px;
}

.offer-image-wrapper {
    width: 55vw;
}

.blok-links img.offer-image {
    width: 50vw;
    border-radius: 0px 50px 50px 0px;
    min-height: 30rem;
}

/* 
.offer-image {
    object-fit: cover;
} */
 
@keyframes imgSlider {
    0% {clip-path: circle(0%); }
    100% {clip-path: circle(75%); }
/*     0% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 99%, 0 99%); } */
}

.blok-rechts img.offer-image {
     width: 50vw; 
     margin-left: 50px; 
     border-radius: 50px 0px 0px 50px;
     min-height: 30rem;
}

.offer-title {
/*     padding: 10px 25px;
    border-left: 4px solid var(--secondary-color); */
/*     margin: 0 0 20px 0; */
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 30px;
/*     padding-left: 25px;
    border-left: solid 5px var(--secondary-color); */
    color: var(--secondary-color);
}

.offer-text {
    margin: 0;
    text-align: justify;
    color: var(--general-text-color);
    font-size: 14px;
    font-weight: lighter;
}

.blok-links .offer-text, .blok-links .offer-title {
/*     margin-left: 50px; */
}

.blok-rechts .offer-text, .blok-rechts .offer-title {
/*     margin-right: 50px; */
}

/**
* Reference
*/
.block-views-blockreferences-view-block-1 {
    margin-top: 100px;
    padding: 50px 0;
/*     background: rgba(232, 227, 227, 0.20); */
}

.block-views-blockreferences-view-block-1 .view-content {
    padding: 50px 120px;
}

.block-views-blockreferences-view-block-1 .views-view-responsive-grid__item-inner {
    height: 100%;
}

.view-references-view {
    font-family: 'Nunito', sans-serif, Arial, Helvetica;
    text-align: center;
}

.node--type-reference {
    height: 100%;
    border: none;
}

.reference-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.reference-image {
    z-index: 10;
    padding: 0 25px;
    width: 100%;
}

/**
* Webform - Contacteer ons
*/

.block-webform-block {
    background: var(--highlight-color);
    padding: 35px 120px;
    color: var(--primary-color);
}

.webform-submission-contacteer-ons-form {
    width: 45vw;
}

.block-webform-block h2 {
    padding: 0 0 20px 0;
    color: var(--primary-color);
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
}

.webform-button--submit.btn-primary {
    background: var(--secondary-cta-bg-color);
    color: var(--primary-color);
    border-color: var(--secondary-cta-bg-color);
    border-radius: 15px;
    font-size: 20px;
    padding: 20px 25px;
    text-transform: uppercase;
}

.webform-button--submit.btn-primary:hover {
    background-color: var(--primary-color);
    color: var(--highlight-color);
    border: var(--primary-color);
}

.form-type-textfield, .form-type-email {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.form-type-textfield, .form-type-email, .form-type-textarea {
    font-size: 18px;
}

.form-type-textfield label, .form-type-email label {
    width: 100px;
}

/**
* Footer
*/
.site-footer {
    background-color: var(--primary-color)!important;
    color: var(--secondary-color);
    padding: 0 120px;
}

.site-footer__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.site-footer img {
    width: 10rem;
    height: auto;
}

.footer-social-media-wrapper {
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin-top: 20px;
}

.site-footer .content a {
    color: var(--secondary-color)!important;
    font-size: 20px;
}

.footer-contact-wrapper {
    color: var(--secondary-color);
}

.footer-contact-address-1-sub
{
    font-size: 12px;
    font-style: italic;
    margin-bottom: 15px;
}

#block-adminfree-footercontactinfo .footer-contact-address-1 {
    font-size: 28px;
}

#block-adminfree-footercontactinfo .footer-contact-address-2,
#block-adminfree-footercontactinfo .footer-contact-address-3 {
        font-size: 20px;
}

#block-adminfree-footercontactinfo .footer-contact-address-2 a {
    text-decoration: none;
}

#block-adminfree-voet {
    padding-top: 31px;
}

#block-adminfree-voet a {
    padding: 0;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .header, section.region-footer-third {
        display: none;
    }
    .view-hero-banner-view {
        margin: 0 0 100px 0;
    }
    .block-views-blockspecialties-view-block-1 {
        padding: 0;
        margin-top: 0;
    }
    .block-views-blockreferences-view-block-1 {
        margin-top: 0;
    }
    .block-views-blockreferences-view-block-1 .view-content {
        padding: 50px 50px;
    }
    .site-footer {
        padding: 25px;
    }
    .site-footer img {
        width: 6rem;
        height: auto;
    }   

    .hero-text-wrapper {
        width: 60vw;
        height: 14rem;
        padding: 20px;
        top: 8rem;
        left: 35%;
    }
    .hero-tagline {
        font-size: 18px;
        line-height: 20px;
    }
    .hero-value-proposition {
        font-size: 12px;
        font-weight: 400;
    }
    .hero-cta {
        margin: 1rem 0 0 0;
    }
    .hero-cta a {
        font-size: 14px;
        margin: 5px 0 0 0;
    }

    .view-header {
        font-size: 32px;
    }

    .specialty-title {
        font-size: 20px;
    }
    .specialty-text {
        font-size: 14px;
    }

    .offer-wrapper.blok-links {
        flex-direction: column-reverse;
    }
    .offer-wrapper.blok-rechts {
        flex-direction: column;
    }
    .offer-wrapper.blok-links .offer-text-wrapper {
        padding: 0 25px 0 25px;
    }
    .offer-wrapper.blok-rechts .offer-text-wrapper {
        padding: 0 25px 0 25px;
    }
    .offer-title {
        font-size: 16px;
    }
    .offer-text {
        font-size: 12px;
    }
    .offer-image-wrapper {
        width: 100%;
        margin: 50px 0;
    }
    .blok-rechts img.offer-image {
        width:100%;
        margin-left: 0;
        border-radius: 0;
        min-height: 20vw;
    }
    .blok-links img.offer-image {
        width:100%;
        margin-left: 0;
        border-radius: 0;
        min-height: 20vw;
    }

    .reference-image {
        padding: 0 10px;
    }

    .block-webform-block {
        padding: 35px 25px;
    }
    .webform-submission-contacteer-ons-form {
        width: 80vw;
    }

    #block-adminfree-footercontactinfo .footer-contact-address-1 {
        font-size: 20px;
    }
    #block-adminfree-footercontactinfo .footer-contact-address-2, #block-adminfree-footercontactinfo .footer-contact-address-3 {
        font-size: 16px;
    }
    .site-footer .content a {
        color: var(--secondary-color)!important;
        font-size: 16px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .header, section.region-footer-third {
        display: none;
    }
    .view-hero-banner-view {
        margin: 0 0 100px 0;
    }
    .block-views-blockspecialties-view-block-1 {
        padding: 0;
    }
    .block-views-blockreferences-view-block-1 .view-content {
        padding: 50px 50px;
    }
    .site-footer {
        padding: 25px;
    }
    .site-footer img {
        width: 6rem;
        height: auto;
    }   

    .hero-text-wrapper {
        width: 60vw;
        height: 300px;
        top: 25%;
        left: 35%;
    }
    .hero-tagline {
        font-size: 28px;
        line-height: 32px;
    }
    .hero-value-proposition {
        font-size: 16px;
    }
    .hero-cta a {
        font-size: 20px;
    }

    .view-header {
        font-size: 32px;
    }

    .specialty-title {
        font-size: 20px;
    }
    .specialty-text {
        font-size: 14px;
    }

    .offer-wrapper.blok-links {
        flex-direction: column-reverse;
    }
    .offer-wrapper.blok-rechts {
        flex-direction: column;
    }
    .offer-wrapper.blok-links .offer-text-wrapper {
        padding: 0 25px 0 25px;
    }
    .offer-wrapper.blok-rechts .offer-text-wrapper {
        padding: 0 25px 0 25px;
    }
    .offer-title {
        font-size: 16px;
    }
    .offer-text {
        font-size: 12px;
    }
    .offer-image-wrapper {
        width: 100%;
        margin: 50px 0;
    }
    .blok-rechts img.offer-image {
        width:100%;
        margin-left: 0;
        border-radius: 0;
        min-height: 20vw;
    }
    .blok-links img.offer-image {
        width:100%;
        margin-left: 0;
        border-radius: 0;
        min-height: 20vw;
    }

    .reference-wrapper {
        align-items: center;
        margin-bottom: 25px;
    }
    .reference-image {
        padding: 0 10px;
        max-width: 20rem;

    }

    .block-webform-block {
        padding: 35px 25px;
    }
    .webform-submission-contacteer-ons-form {
        width: 90vw;
    }

    #block-adminfree-footercontactinfo .footer-contact-address-1 {
        font-size: 20px;
    }
    #block-adminfree-footercontactinfo .footer-contact-address-2, #block-adminfree-footercontactinfo .footer-contact-address-3 {
        font-size: 16px;
    }
    .site-footer .content a {
        color: var(--secondary-color)!important;
        font-size: 16px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header, section.region-footer-third {
        display: none;
    }
    .view-hero-banner-view {
        margin: 0 0 100px 0;
    }
    .block-views-blockspecialties-view-block-1 {
        padding: 0;
    }
    .block-views-blockreferences-view-block-1 .view-content {
        padding: 50px 50px;
    }
    

    .hero-text-wrapper {
        width: 60vw;
        top: 25%;
        left: 35%;
    }
    .hero-tagline {
        font-size: 32px;
        line-height: 36px;
    }
    .hero-value-proposition {
        font-size: 18px;
    }
    .hero-cta a {
        font-size: 26px;
    }

    .view-header {
        font-size: 32px;
    }

    .specialty-text-wrapper {
        padding: 50px 100px 25px 100px;
    }
    .specialty-title {
        font-size: 20px;
    }
    .specialty-text {
        font-size: 14px;
    }

    .offer-wrapper.blok-links .offer-text-wrapper {
        padding: 0 25px 0 25px;
    }
    .offer-wrapper.blok-rechts .offer-text-wrapper {
        padding: 0 0 0 25px;
    }
    .offer-title {
        font-size: 16px;
    }
    .offer-text {
        font-size: 12px;
    }

    .reference-wrapper {
        align-items: center;
    }
    .reference-image {
        padding: 0 10px;
        max-width: 20rem;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hero-tagline {
        font-size: 32px;
        line-height: 36px;
    }
    .hero-value-proposition {
        font-size: 18px;
    }
    .hero-cta a {
        font-size: 26px;
    }

    .view-header {
        font-size: 32px;
    }

    .specialty-title {
        font-size: 14px;
    }
    .specialty-text {
        font-size: 14px;
        font-weight: 400;
    }

/*     .offer-text-wrapper{
        padding: 0 25px 0 60px;
    } */
    .offer-wrapper.blok-links .offer-text-wrapper {
        padding: 0 25px 0 25px;
    }
    .offer-wrapper.blok-rechts .offer-text-wrapper {
        padding: 0 0 0 25px;
    }
    .offer-title {
        font-size: 16px;
    }
    .offer-text {
        font-size: 12px;
    }

    .reference-image {
        padding: 0 10px;
    }
}