/*
Theme Name: MOSQUITO IN THE ROOM
Description: MOSQUITO IN THE ROOM (mei 2026)
Version: 1.0
Author: Pieter De Decker
Author URI: https://www.pieterdedecker.com
Template: enfold
*/



/* ** ----------------------------------------------------------------
» FONTS
---------------------------------------------------------------- ** */

/* OSWALD - font */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



*, h1, h2, h3, h4, p, ul, li, a, li a, strong {
    
}
h1 {
    font-family: 'Oswald', Arial, Helvetica, sans-serif !important;
    text-transform: initial !important;
    font-size: 3.5em;
}
.home h1 {
    text-transform: lowercase !important;
}
h1 strong {
}
h2 {
    font-family: 'Oswald', Arial, Helvetica, sans-serif !important;
    text-transform: initial !important;
    font-size: 2.5em;
    font-weight: 600 !important;
}
.home h2 {
    text-transform: lowercase !important;
}
h3 {
    font-family: Montserrat, Arial, Helvetica, sans-serif !important;
    text-transform: initial !important;
    font-size: 2em;
    font-weight: 400 !important;
}
h4 {
    font-family: Montserrat, Arial, Helvetica, sans-serif !important;
    text-transform: initial !important;
    font-size: 1.4em;
    background-color: #993432;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 7px;
    color: #fff !important;
    font-weight: 600 !important;
}
h5 {
    font-family: Montserrat, Arial, Helvetica, sans-serif !important;
    text-transform: initial !important;
    font-size: 1.2em;
    font-weight: 600 !important;
    color: #993432 !important;
}

p {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    text-transform: initial !important;
    font-size: 1em;
    font-weight: 400 !important;
}

p strong,
ul li strong,
ol li strong {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    color: #993432 !important;
}


ul, 
ol {    
}
ul li,
ol li {
   
}

/* LINKS */

.textcontent p a,
.textcontent li a {
    border-bottom: 1px solid #993432 !important;
}
.textcontent p a:hover,
.textcontent li a:hover {
    border-bottom: 1px solid #c9e9e2 !important;
    background-color: #c9e9e2 !important;
}
#footercontainer p a:hover {
    border-bottom: 1px solid #fff !important;
}


/* ** ----------------------------------------------------------------
» ALGEMENE LAY-OUT
---------------------------------------------------------------- ** */

.container {
    padding-left: 75px;
    padding-right: 75px;
}

/* HEADER */

#header_main {
    padding: 15px;
}
#header_main .av-logo-container {
    display: ;
}
#header_main .menu a .avia-menu-text {
    font-size: 1.1em;
    font-weight: 400 !important;
}
#header_main .menu a:hover .avia-menu-text {
    font-weight: 500 !important;
}

.headercontactbutton a .avia-menu-text {
    border-radius: 50px !important;
    border: 1px solid #000 !important;
}
.headercontactbutton a:hover .avia-menu-text {
    background-color: #c9e9e2 !important;
    color: #000 !important;
}

.mosquitologo img {
    height: 100px;
    width: 100px;
}

/* HEADER SCROLL ANCHOR */

.anchor-offset {
    position: relative;
}

.anchor-offset:before {
    content: "";
    display: block;
    height: 70px !important;
    margin-top: -70px !important;
    visibility: hidden;
    pointer-events: none;
}
#over,
#diensten {
    scroll-margin-top: 250px !important;
    scroll-padding-top: 250px !important;
}

/* HEADER VIDEO */

.headervideo {
    margin-bottom: 0 !important;
}
#homeheader main.content {
    padding-bottom: 0 !important;
    margin-top: 20px !important;
}

/* TITELBOL */

#over .av_textblock_section:first-of-type,
#diensten .av_textblock_section:first-of-type,
#projecten .av_textblock_section:first-of-type,
#team .av_textblock_section:first-of-type,
#klanten .av_textblock_section:first-of-type,
#contact .av_textblock_section:first-of-type {
    text-align: center;
    
}
.mosquito_titelbol_container {
    /*border-top: 1px solid #000;*/
}

.mosquito_titelbol {
    position: relative;
    transform: translateY(-52%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: black;
    border-radius: 999px;
    aspect-ratio: 1 / 1;
}

/* tekst */
.mosquito_titelbol p {
    margin: 0;

    color: white;
    font-size: 1rem;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    line-height: 1;
}

/* klein bolletje */
.mosquito_titelbol::after {
    content: "";
    position: absolute;
    width: 5px;
    aspect-ratio: 1;
    background: white;
    border-radius: 50%;
    top: 22%;
    right: 22%;
}

.mosquito_titelbol_container {
    position: relative;
    border-top: 0px solid #000;
}
.titellijn {
    position: relative;
    border-top: 1px solid #000;
}

/* DIENSTEN */

.diensten_cards img {
    width: 60px;
    height: auto;
    margin-bottom: 20px;
    margin-top: 20px;
}
.diensten_cards h5 {
    font-family: Montserrat, Arial, Helvetica, sans-serif !important;
    text-transform: initial !important;
    font-size: 1.3em;
    font-weight: 600 !important;
    color: #993432 !important;
    min-height: 3.9em;
}
.diensten_cards p {
    font-size: 0.9em;
    line-height: 150%;
}



/* FLIP CARDS */

.diensten_voedingsketen .flip-card {
    perspective: 1000px;
}
.diensten_voedingsketen .flip-card-inner {
    position: relative;

    width: 100%;
    height: 350px;

    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.diensten_voedingsketen .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.diensten_voedingsketen .flip-card-front,
.diensten_voedingsketen .flip-card-back {
    position: absolute;
    inset: 0;

    backface-visibility: hidden;

    display: grid;
    place-items: center;

    border-radius: 50%;
}
.diensten_voedingsketen .flip-card-front {
    background: black;
    color: white;
    border: 1px solid #000;
}
.diensten_voedingsketen h5 {
    font-family: Montserrat, Arial, Helvetica, sans-serif !important;
    text-transform: initial !important;
    font-size: 1.2em;
    font-weight: 500 !important;
    color: #c9e9e2 !important;
    min-height: 2.4em;
    text-transform: uppercase !important;
    text-align: center;
    padding-top: 60px;
    margin-bottom: -50px;
}
.diensten_voedingsketen img {
    width: 60px;
    height: auto;
    
    padding-bottom: 40px !important;
}
.diensten_voedingsketen .flip-card-back {
    background: #c9e9e2;
    transform: rotateY(180deg);
    border: 1px solid #000;
    padding: 30px;
    text-align: center;
    
    font-size: 0.9em;
    line-height: 150%;
}

.diensten_voedingsketen {
    position: relative;
}
.diensten_voedingsketen .flip-card::before,
.diensten_voedingsketen .flip-card::after {
    content: "";
    position: absolute;
    width: 125px;
    height: 70px;
    transform: translateX(0);
    background-image: url('https://mosquitointheroom.be/web/wp-content/themes/mosquito/img/MosquitoInTheRoom_arrow_1.png');
        
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 20;
}

.diensten_voedingsketen.card_primairesector .flip-card::before {
    display: none !important;
}
.diensten_voedingsketen.card_primairesector .flip-card::after {
    left: 50%;
    bottom: -70px;
    transform: scaleY(-1);
}
.diensten_voedingsketen.card_voedingsbedrijven .flip-card::before {
    left: 50%;
    top: -70px;
}
.diensten_voedingsketen.card_voedingsbedrijven .flip-card::after {
    right: 50%;
    bottom: -70px;
    transform: rotate(180deg);
}
.diensten_voedingsketen.card_retail .flip-card::before {
    right: 50%;
    top: -70px;
    transform: scaleX(-1);
}
.diensten_voedingsketen.card_retail .flip-card::after {
    left: 50%;
    bottom: -70px;
    transform: scaleY(-1);
}
.diensten_voedingsketen.card_consument .flip-card::before {
    display: none !important;
}
.diensten_voedingsketen.card_consument .flip-card::after {
    right: 50%;
    bottom: -70px;
    transform: rotate(180deg);
}

.diensten_voedingsketen_kennis .kennisetc::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    
    background-image: url('https://mosquitointheroom.be/web/wp-content/themes/mosquito/img/MosquitoInTheRoom_arrow_2.png');
        
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 20;
    
    left: 50% ;
    top:-40px;
    transform: translateX(-50%);
}

.kennisetc {
    padding: 7px;
    border: 1px solid #000;
    border-radius: 10px;
}
.kennisetc p {
    text-transform: uppercase !important;
    font-weight: 600 !important;
}
.kennisetc ul {
    text-transform: uppercase;
    font-weight: 400;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 1.8rem;

    list-style: none;
    padding: 0;
    margin: 0;
}



/* PAGE HEADER */


/* OVER */



/* STAPPENPLAN */








/* BLOG */

#projectblog a.slide-image {
    border-radius: 10px;
}
#projectblog .image-overlay {
    display: none !important;
}
#projectblog .slide-content {
    text-align: center;
}
#projectblog .entry-content-header h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: #993432 !important;
    padding: 30px;
}
#projectblog .entry-content-header h3 a {
    min-height: 3.45em;
}
#projectblog .slide-meta {
    display: none;
}

/* wrapper van alle kolommen */
#projectblog .slide-entry-wrap {
    display: flex;
    align-items: stretch;
}
/* individuele card */
#projectblog .slide-entry {
    display: flex;
    flex-direction: column;
    float: none !important;
    height: auto !important;
    padding-bottom: 0px !important;
}

/* content binnen card */
#projectblog .slide-content {
/*    display: flex;
    flex-direction: column;
    flex-grow: 1;*/
    height: 70%;
}
/* titelblok */
#projectblog .slide-entry-title {
/*    display: flex;*/
    align-items: center;
    justify-content: center;
    min-height: 2.4em;
    line-height: 1.15;
    text-align: center;
    font-size: 1.2em !important;
}
/* tekst */
#projectblog .slide-entry-excerpt {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    font-size: 0.9em !important;
    line-height: 150%;
    padding: 0 30px 0px 30px ;
}
/* knopcontainer */
#projectblog .read-more-link {
/*    margin-top: auto;*/
    padding-top: 30px;
    text-align: center;
}
/* knop */
#projectblog .read-more-link a.more-link {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    font-size: 0 !important;

    background-color: #993432;
    background-image: url('https://mosquitointheroom.be/web/wp-content/themes/mosquito/img/MosquitoInTheRoom_arrow_4.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    border-radius: 50px;
}

#projectblog .read-more-link a.more-link:hover {
    background-color: #000;
}
#projectblog .read-more-link a.more-link:hover {
    background-color: #000;
    color: #fff;
}
/* enfold fix */
#projectblog .flex_column {
    margin-bottom: 0;
}
/* svg pijltje weg */
#projectblog .more-link-arrow {
    display: none !important;
}




/* BLOG - SINGLE POST */

.single .categorietags {
    font-size: 0.8em !important;
    color: #993432 !important;
}
.single img {
    border-radius: 10px;
}
.single .av-dynamic-content-category .av-dynamic-content-category-link a {
    color: #000000 !important;
}
.single .av-dynamic-content-category .av-dynamic-content-category-link a:hover {
    color: #993432 !important;
}

.terugnaaroverzicht {
    margin-top: 50px;
}
.terugnaaroverzicht a:hover {
    border-bottom: 1px solid #000;
}




/* TEAMLID OVERLAY */
.teamlid.flex_column.av_one_half {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  transition: background-color 0.3s ease;
  background-blend-mode: soft-light;
}
.teamlid.flex_column.av_one_half:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* TEAMLID */
.teamlid {
    padding: 20px !important;
}
.teamlid .teamlid_naam,
.teamlid .teamlid_functie,
.teamlid .teamlid_info {
    visibility: hidden;
    color: #ffffff;
}
.teamlid:hover .teamlid_naam,
.teamlid:hover .teamlid_functie,
.teamlid:hover .teamlid_info {
    visibility: visible;
}
.teamlid .teamlid_contact {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    background-color: #993432;
    border-radius: 10px;
    padding: 0px 20px;
    visibility: visible;
}
.teamlid .teamlid_contact .telefoon {
    color: #ffffff;
    font-size: 1.2em;
}
.teamlid .teamlid_contact p a {
    color: #ffffff;
    font-size: 1em;
}
.teamlid .teamlid_contact p a:hover {
    text-decoration: underline !important;
}
.teamlid .teamlid_naam {
    font-size: 1.6em;
    margin-bottom: 120px;
}
.teamlid .teamlid_functie {
    font-size: 1.2em;
}
.teamlid .teamlid_info {
    font-size: 0.8em;
    line-height: 150%;
    margin-bottom: 50px;
}




/* TEAMLID OVERLAY */
.teamlid.flex_column.flex_column_table_cell {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  transition: background-color 0.3s ease;
  background-blend-mode: soft-light;
}
.teamlid.flex_column.flex_column_table_cell:hover {
  background-color: rgba(0, 0, 0, 0.6);
}




/* QUOTE */

.quoteinthemiddle {
    text-align: center;
}
.quoteinthemiddle h3 {
    font-size: 2.5em;
    line-height: 130%;
    color: #993432 !important;
    font-weight: 500 !important;
    padding: 30px 70px 20px 70px;
}





/* KLANTEN */

#top .avia-smallarrow-slider-heading {
    position: absolute;
    top: 50%;
}
#top .avia-content-slider-inner {
    width: calc(100% - 0px) !important;
    margin: 0 auto;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows {
    width: 100%; 
}
.avia-logo-slider .avia-slideshow-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 20;
    pointer-events: none;
}
.avia-slideshow-arrows .prev-slide,
.avia-slideshow-arrows .next-slide {
    pointer-events: auto;
}
#top .avia-slideshow-arrows a.avia-svg-icon {
    background-color: transparent;
}
#top .avia-slideshow-arrows a.avia-svg-icon:hover {
    fill: #993432;
}



/* FOOTER */

#scroll-top-link {
    display: none;
}
.linkedinlogo img {
    width: 25px;
    border-radius: 0;
}
.linkedinlogo:hover img {
    opacity: 0.5;
}

#footercontainer p strong {
    color: #ffffff !important;
    font-size: 1.4em !important;
    font-weight: 500 !important;
}

#footercontainer .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
    margin-top: -70px;
    margin-bottom: 50px;
}

/* NEWSLETTER FORM */
#footercontainer .newsletter {
    margin-top: -300px !important;
}
#footercontainer .newsletter .newsletterformulier {
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 8px 20px;    
}
#footercontainer .newsletter fieldset {
    margin: 0;
}
#footercontainer .newsletter .gform_fields {
    grid-row-gap: 0;
    row-gap: 10px;
}
#footercontainer .newsletter input {
    border: 0px !important;
    border-bottom: 1px solid #fff !important;
}
#footercontainer .newsletter #gform_submit_button_1 {
    background-color: #fff;
    border-radius: 10px;
    color: #000;
    padding: 5px 15px;
}
.grecaptcha-badge {
    display: none !important;
}


.footersocket {
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 8px 20px;
}
.footersocket p {
    margin: 0;
    font-size: 0.8em;
}




/* ** ----------------------------------------------------------------
» MEDIA QUERIES
---------------------------------------------------------------- ** */

@media only screen and (max-width: 1310px) {
  
}
@media only screen and (max-width: 1100px) {
   
}
@media only screen and (max-width: 989px) {
    
    #homeheader > .container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #projectblog .slide-entry-wrap {
/*       display: initial !important;*/
    }

    #projectblog .slide-entry {
/*      width: 50% !important;
        float: left;*/
    }
    .responsive #top #projectblog .slide-entry {
        width: 100% !important; /* 48% zorgt voor ruimte tussen de 2 kolommen */
        margin-left: 0% !important;
    }
    .responsive #top #projectblog .slide-entry:nth-child(even) {
        margin-left: 0% !important;
    }
    #projectblog .read-more-link {
        padding-top: 0;
    }
    #projectblog .slide-content {
        height: 30% !important;
    }
    
    #footercontainer .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
        margin-top: 20px;
        margin-bottom: 50px;
    }
    #footercontainer .newsletter {
        margin-top: 0 !important;
    }
}
@media only screen and (max-width: 769px) {
    
    /* MOBILE HEADER */
      .responsive #top #wrap_all #header {
        position: fixed !important;
      }
      .responsive #top #wrap_all #main {
        padding-top: 80px !important;
        margin: 0;
      }
    
    
    
    .diensten_voedingsketen .flip-card-inner {
        width: 50%;
        height: 350px;
        margin: 0 auto;
    }

    .diensten_voedingsketen .flip-card::before,
    .diensten_voedingsketen .flip-card::after {
        display: none !important;
    }
    .diensten_voedingsketen .flip-card {
        margin-bottom: 88px;
    }
    .diensten_voedingsketen.card_consument .flip-card {
        margin-bottom: 0;
    }
    .diensten_voedingsketen .flip-card::after {
        display: initial !important;
        content: "";
        position: absolute;
        width: 40px;
        height: 108px;
        transform: translateX(-40px);
        transform: translateY(-108px);
        background-image: url('https://mosquitointheroom.be/web/wp-content/themes/mosquito/img/MosquitoInTheRoom_arrow_5.png');

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: none;
        z-index: 20;
    }
    .diensten_voedingsketen.card_primairesector .flip-card::before,
    .diensten_voedingsketen.card_voedingsbedrijven .flip-card::before,
    .diensten_voedingsketen.card_retail .flip-card::before,
    .diensten_voedingsketen.card_consument .flip-card::before {
        display: none !important;
    }
    .diensten_voedingsketen.card_primairesector .flip-card::after,
    .diensten_voedingsketen.card_voedingsbedrijven .flip-card::after,
    .diensten_voedingsketen.card_retail .flip-card::after {
        left: calc(50% - 20px) !important;
        bottom: 0 !important;
        transform: translateX(-40px) !important;
        transform: translateY(108px) !important;
    }
    .diensten_voedingsketen.card_consument .flip-card::after {
        display: none !important;
    }
    

    .kennisetc ul {
        gap: 0.7rem !important;
    }
    

    /* tekst */
    #projectblog .slide-entry-excerpt {
        padding: 0px 10px 0px 10px ;
    }
    
    .teamlid {
        margin-bottom: 60px !important;
    }
    
    .quoteinthemiddle h3 {
        padding: 30px 30px 20px 30px;
    }

    /* FOOTER */
    
    .footerportret1 {
        width: 50% !important;
        padding-right: 3%;
    }
    .footerportret2 {
        width: 50% !important;
        padding-left: 3%;
    }

}
@media only screen and (max-width: 600px) {
    .diensten_voedingsketen .flip-card-inner {
        width: 65%;
        height: 350px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 479px) {
    .diensten_voedingsketen .flip-card-inner {
        width: 75%;
        height: 350px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 350px) {
    .diensten_voedingsketen .flip-card-inner {
        width: 90%;
        height: 350px;
        margin: 0 auto;
    }
}