/********* Compiled - Do not edit *********/
@font-face {
font-family:"Right Grotesk";
src:url(//thesmiles.be/wp-content/uploads/fonts/RightGrotesk-SpatialBold.woff2), url(//thesmiles.be/wp-content/uploads/fonts/RightGrotesk-SpatialBold.woff), url(//thesmiles.be/wp-content/uploads/fonts/RightGrotesk-SpatialBold.ttf);font-weight:;
font-display:swap;
}
@font-face {
font-family:"Noi";
src:url(//thesmiles.be/wp-content/uploads/fonts/NoiVariableFix.woff2), url(//thesmiles.be/wp-content/uploads/fonts/NoiVariableFix.woff), url(//thesmiles.be/wp-content/uploads/fonts/NoiVariableFix.ttf);font-weight:;
font-display:swap;
}
:root{--color-primary:#f13c46;--color-gradient-start:#f42958;--color-gradient-stop:#e4442a;}.woocommerce ul.products, .woocommerce-page ul.products{margin-left:-15px;margin-right:-15px;}.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{padding-left:15px;padding-right:15px;}body{font-family:Noi;font-weight:400;line-height:1.3em;font-size:1.2em;color:#000000;}body.single-post .blog-single-title{font-family:inherit;}body.single-post .content{font-family:inherit;}.h1,h1{font-family:Right Grotesk;font-weight:500;line-height:1.2em;font-size:52px;color:#e46b4c;}.h2,h2{font-family:Right Grotesk;font-weight:500;line-height:1.2em;font-size:40px;color:#e46b4c;}.h3,h3{font-family:Right Grotesk;font-weight:500;line-height:1.2em;font-size:32px;color:#e46b4c;}.h4,h4{font-family:Right Grotesk;font-weight:500;line-height:1.2em;font-size:25px;color:#e46b4c;}.h5,h5{font-family:Right Grotesk;font-weight:500;line-height:1.2em;font-size:21px;color:#e46b4c;}.h6,h6{font-family:Right Grotesk;font-weight:500;line-height:1.2em;font-size:18px;color:#e46b4c;}.titlebar-inner h1{}.titlebar-inner p{}/* overlapicon footer */

.overlapfoto {
    position: absolute;
    right: -140px;
    z-index: 10;
    top: -20%; /* Verplaats de afbeelding omhoog om 50% te overlappen */
}

/* overlapicon home */

.overlaphome {
    position: absolute;
    right: -140px;
    z-index: 10;
    top: -30%; /* Verplaats de afbeelding omhoog om 50% te overlappen */
}

.happy {
    position: absolute;
    left: 10px; /* Iets naar rechts */
    z-index: 999; /* Hogere z-index om het bovenaan te plaatsen */
    top: 10%; /* Iets hoger */
    transform: scale(0.5); /* Maakt het element 50% kleiner */
}

.happyhome {
    position: absolute;
    left: 50px; /* Iets naar rechts */
    z-index: 999; /* Hogere z-index om het bovenaan te plaatsen */
    top: 40%; /* Iets hoger */
    transform: scale(0.1); /* Maakt het element 50% kleiner */
}

/* Stijl voor het element dat op de voorgrond moet verschijnen */
.voorhome {
    position: relative; /* of absolute, afhankelijk van uw layout */
    z-index: 10;
    /* Andere stijlen */
}

/* Stijl voor het .achterhome element */
.achterhome {
    position: absolute;
    right: -1000px;
    z-index: 1;
    top: -400px;
    transform: scale(0.4);
}

.achterover {
    position: absolute;
    right: -1000px;
    z-index: 1;
    top: -600px;
    transform: scale(0.2);
}





.jobstekst {
    background-color: #FFFFFF; /* Blauw-groen tint */
    padding: 45px 120px; /* 45px boven/onder, 70px links/rechts */
    border-radius: 125px; /* Minder extreem afgeronde hoeken */
    display: block; /* Verandert de display-eigenschap */
    margin: auto; /* Centreert het blok element */
    text-align: center; /* Zorgt dat de tekst in het midden van het blok staat */
    max-width: fit-content; /* De maximale breedte past zich aan de inhoud aan */
}

.formulefoto {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; 
}





/* tekst welkom in the smiles knokke */

.teksthome {
    background-color: #13b9b9; /* Blauw-groen tint */
    padding: 45px 120px; /* 45px boven/onder, 70px links/rechts */
    border-radius: 125px; /* Minder extreem afgeronde hoeken */
    display: block; /* Verandert de display-eigenschap */
    margin: auto; /* Centreert het blok element */
    text-align: center; /* Zorgt dat de tekst in het midden van het blok staat */
    max-width: fit-content; /* De maximale breedte past zich aan de inhoud aan */
}

.teksthomemobiel {
    background-color: #13b9b9; /* Blauw-groen tint */
    padding: 20px 20px; /* 45px boven/onder, 70px links/rechts */
    border-radius: 45px; /* Minder extreem afgeronde hoeken */
  
    margin: auto; /* Centreert het blok element */
    text-align: center; /* Zorgt dat de tekst in het midden van het blok staat */
    max-width: fit-content; /* De maximale breedte past zich aan de inhoud aan */
}

.homebar {
    background-color: #edabcf; /* Roze achtergrond */
    padding: 40px 10px; /* 20px padding boven/onder, 10px links/rechts */
    border-radius: 125px; /* Afgeronde hoeken */
}



@font-face {
    font-family: 'RightGrotesk-SpatialBold';
    src: url('//thesmiles.be/wp-content/uploads/fonts/RightGrotesk-SpatialBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


.btn-txt {
    font-family: 'RightGrotesk-SpatialBold', sans-serif;
    letter-spacing: 0.5px;
}


.link-txt {
    font-family: 'RightGrotesk-SpatialBold', sans-serif;
    letter-spacing: 0.5px;
}

.ld-module-trigger-txt {
    font-family: 'RightGrotesk-SpatialBold', sans-serif;
    letter-spacing: 0.5px;
}

.ld-dropdown-menu-content {
    font-family: 'RightGrotesk-SpatialBold', sans-serif;
    letter-spacing: 0.5px;
    font-size: 16px;
}

.ld-module-dropdown {
    /* Gebruik transform om het element subtiel omhoog te verplaatsen. */
    transform: translateY(-40px);
    
    /* Behoud de afgeronde hoeken en andere stijlen. */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    /* Voeg meer eigenschappen toe zoals nodig. */
}

.fa-angle-down {
    /* Maak het icoon vetter. De exacte waarde hangt af van het lettertype en wat 'vet' voor dat lettertype betekent. */
    font-weight: 900; /* Dit is meestal de dikste beschikbare gewicht, maar de beschikbare waarden kunnen variëren afhankelijk van het lettertype. */
    
    /* Stel de kleur in. U kunt hier elke geldige CSS kleurwaarde gebruiken, zoals hexadecimale kleurcodes, rgb(), rgba(), enz. */
    color: #13b9b9; /* Dit is een voorbeeld, vervang het door de gewenste kleurcode. */
    
    /* U kunt hier ook andere eigenschappen toevoegen als u wilt, zoals grootte, enz. */
    /* Bijvoorbeeld: */
    font-size: 24px; /* Dit zet de grootte van het icoon. Pas aan naar uw behoeften. */
}


/* Contact form 7 knop */

.wpcf7-submit {
    font-family: 'RightGrotesk-SpatialBold', sans-serif;
    letter-spacing: 0.5px;
}




/* Base Styling for All Response Outputs */
.wpcf7-response-output {
  padding: 10px;
  border-radius: 5px; /* Rounded Corners */
  margin-bottom: 20px;
  color: white; /* White text color */
}

/* Success Message Styling */
.wpcf7 form.sent .wpcf7-response-output {
  background-color: #398439; /* Dark Green Background */
  border: 2px solid #398439; /* Dark Green Border */
}

/* Error Message Styling for various form states like invalid, unaccepted, or payment-required */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  background-color: #a94442; /* Dark Red Background */
  border: 2px solid #a94442; /* Dark Red Border */
}



.activiteittekst {
    position: relative;
    background-color: white; /* Witte achtergrond voor de tekst */
    border-radius: 80px; /* Sterk afgeronde hoeken */
    padding: 20px; /* Binnenruimte rond de tekst */
    z-index: 2; /* Zorgt ervoor dat de tekst boven de pseudo-elementen staat */
    margin: 30px; /* Extra ruimte rondom het element */
    /* Stijlen voor de tekst, zoals font-size, font-family, color, etc. */
}


.vc_tta-title-text {
    color: #5265a9;
}

.vc_tta .vc_tta-controls-icon {
    font-weight: bold; /* Maakt het icoon dikker */
    color: #00008B; /* Donkerblauwe kleur */
}



/* Change the hover state for days */
.ui-datepicker .ui-datepicker-calendar .ui-state-hover {
    background-color: #47589d; /* New hover background color */
    color: #ffffff; /* New hover text color */
}


/* Change the active (selected) state for days */
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-highlight {
    background-color: #47589d; /* New active background color */
    color: #ffffff; /* New active text color */
}



.wpb_single_image.kidspartyfoto .vc_single_image-wrapper.vc_box_rounded, 
.wpb_single_image.kidspartyfoto .vc_single_image-wrapper.vc_box_rounded img {
    border-radius: 20px 20px 0 0;
    box-shadow: none;
}



.footertekstkleur {
    color: #5265a9;
}



.footertekstkleurtwee {
    color: #5265a9;
  }
  
  
  
@media (min-width: 768px) {
    .language {
        float: right;
    }
}

@media (max-width: 767px) {
    .language {
        visibility: hidden;
    }
}


/* voor formules */

/* Aanpassing van de positie van submenu-items */
.nav-item-children {
  top: 80px; /* Pas deze waarde aan om de gewenste positie te krijgen, 0 is slechts een voorbeeld */
}

/* Kleur van de tekst van submenu-items aanpassen */
.main-nav .children>li>a, .nav-item-children>li>a {
  color: #47589e; /* Stelt de tekstkleur in op blauw */
}

/* Hover-effecten voor submenu-items uitschakelen */
.main-nav .children>li>a:hover, .nav-item-children>li>a:hover {
  color: #47589e; /* Behoudt de blauwe tekstkleur ook bij hover */
  background-color: transparent; /* Voorkomt veranderingen in de achtergrondkleur bij hover */
}


/* voor language switcher */

#language_selector_float {
    position: fixed;
    left: 10px;
    top: 80%; /* Aangepast naar 80% van de bovenkant van de pagina */
    transform: translateY(-50%);
    z-index: 1000;
    background-color: white; /* Witte achtergrond */
    border-radius: 10px; /* Ronde hoeken */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Lichte box schaduw */
}

#language_selector_float a {
    display: block;
    margin: 5px 10px; /* Aangepast om ruimte binnen de container te creëren */
}






.custom-row {
    display: flex;
}

.custom-col {
    flex: 1; /* This ensures the columns take up equal width */
    max-width: calc(25% - 10px); /* Adjusts the width slightly down from 25% to compensate for the wider third column */
}

.custom-col-wide {
    flex: 1;
    max-width: calc(25% + 40px); /* Increase this column's width. Adjust between 40px to 60px as needed */
}

/* Optional: Ensure total width doesn't exceed the container */
.custom-row > div {
    box-sizing: border-box;
}




/* vanaf 5 feb 2025 */


/* PC */

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;

    /* Overgenomen knopeigenschappen */
    width: 225px;
    height: 60px;
    background-color: rgb(239, 180, 214);
    border: 3px solid rgb(239, 180, 214);
    color: rgb(232, 116, 93);
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;

    /* Pilvorm */
    border-radius: 50px; 
    
    /* Extra instellingen */
    display: flex;
    align-items: center; /* Zorgt ervoor dat de tekst verticaal gecentreerd is */
    justify-content: center;
    text-decoration: none;
    padding: 0 20px;
    line-height: 1;

    /* Eerst onzichtbaar maken */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Knop wordt pas zichtbaar als de gebruiker 800px heeft gescrold */
.floating-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* Hover-effect: tekst wordt wit */
.floating-btn:hover {
    color: #ffffff;
}

/* Alleen tonen op desktop */
@media (max-width: 1024px) {
    .floating-btn {
        display: none !important;
    }
}


/* MOBIEL */

.floating-btn-mobile {
    position: fixed;
    right: -50px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg); /* In het midden + 90° gekanteld */
    z-index: 9999;

    /* Kleinere afmetingen */
    width: 160px;
    height: 45px;
    background-color: rgb(239, 180, 214);
    border: 3px solid rgb(239, 180, 214);
    color: rgb(232, 116, 93);
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;

    /* Pilvorm */
    border-radius: 50px; 
    
    /* Extra instellingen */
    display: flex;
    align-items: center; /* Zorgt ervoor dat de tekst verticaal gecentreerd is */
    justify-content: center;
    text-decoration: none;
    padding: 0 15px;
    line-height: 1;

    /* Eerst onzichtbaar maken */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Knop wordt pas zichtbaar als de gebruiker 800px heeft gescrold */
.floating-btn-mobile.visible {
    opacity: 1;
    visibility: visible;
}

/* Hover-effect: tekst wordt wit */
.floating-btn-mobile:hover {
    color: #ffffff;
}

/* Alleen tonen op mobiele schermen */
@media (min-width: 1025px) {
    .floating-btn-mobile {
        display: none !important;
    }
}