/*
 * @package:    fz3temp-2
 * @author:     Dennis Rougoor - Fervent Digital
 * @copyright:  2018 - 2024
 * --------------
 * Created:     06-03-2024, 15:13:25
 * Modified:    07-05-2025, 09:49:23
 * Modified By: Dennis Rougoor
 */
/* 
Theme Name: Hapklaar
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Bij Hapklaar vinden we dat elke ondernemer, groot of klein, online zichtbaar moet kunnen zijn. Of je nu op zoek bent naar een vette website, een conversiegerichte webshop, professionele fotografie óf het beter inzetten van je social media: Hapklaar is jouw one-stop oplossing voor online zichtbaarheid.
Author: Hapklaar
Author URI: https://www.hapklaar.online/
Template: hello-elementor
Version: 2.0.0
Text Domain: hapklaar
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Improved Animations Stylesheet from https://element.how/elementor-improve-entrance-animations/ , works for the 'fade' animations */

@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

/* LENIS SMOOTH SCROLL CSS */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0,-30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInDown {
    animation-name: fadeDown
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInLeft {
    animation-name: fadeLeft
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(30px,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInRight {
    animation-name: fadeRight;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0,30px,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.elementor-element.fadeInUp {
    animation-name: fadeUp;
}

.nm,
.nm p {
    margin-bottom: 0px !important;
}

.nl,
.nl a {
    text-decoration: none !important;
}

.fc {
    max-width: fit-content !important;
}

.inline .elementor-heading-title {
    display: inline !important;
    position: relative !important;
}

a.elementor-button {
      clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, 100% 100%, 0 100%);
}

.btn-ghost .elementor-button-wrapper {
    overflow: hidden !important;
}

.btn-ghost .elementor-button::after {
    content: "";
    width: 3px;
    height: 44px;
    background: white;
    position: absolute;
    top: -9.5px;
    right: 15px;
    transform: rotate(-47deg);
}

.btn-ghost.red .elementor-button::after {
    background: #EF3B2F !important;
}

.header-bottom {
    clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 50%, 100% 100vh, 0 100vh)
}

.button-inner-text-wrapper {
    display: flex;
    flex-flow: column;
    height: 20px;
    gap: 13px;
    overflow: hidden;
}

.button-inner-text-wrapper span {
    transition: transform 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.slider-image img {
    transition: transform 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.slider-image:hover img {
    transform: scale(1.1);
}

.elementor-button:hover .button-inner-text-wrapper span:first-child {
    transform: translateY(-32px);
}

.elementor-button:hover .button-inner-text-wrapper span:last-child {
    transform: translateY(-32px);
}

.highlighted-text {
    font-family: "Reenie Beanie", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 36px;
    line-height: 120%;
    color: #EF3B2F;
    font-weight: 400;
    position: absolute;
    bottom: -20px;
    right: -130px;
    transform: rotate(-10deg);
    z-index: 0;
}

.catering-slider .highlighted-text {
    color: #B1D268 !important;
}

.smooth-image-slider .elementor-main-swiper.swiper {
    overflow: inherit !important;
}

.smooth-image-slider .elementor-carousel-image {
    height: 360px !important;
}

.smooth-image-slider .swiper-slide:nth-child(4n + 1) .elementor-carousel-image {
    margin-top: 32px;
}

.smooth-image-slider .swiper-slide:nth-child(4n + 2) .elementor-carousel-image {
    margin-top: 96px;
}

.smooth-image-slider .swiper-slide:nth-child(4n + 3) .elementor-carousel-image {
    margin-top: 64px;
    height: 300px !important;
}

.smooth-image-slider .swiper-slide:nth-child(4n) .elementor-carousel-image {
    margin-top: 0px;
    height: 420px !important;
}

body.scrolled-down #header {
    transform: translateY(-54px);
}

.arrowControlForward_1,
.arrowControlPrevious_1,
.arrowControlForward_2,
.arrowControlPrevious_2  {
    cursor: pointer !important;
    
}

.arrowControlForward_1 img,
.arrowControlPrevious_1 img,
.arrowControlForward_2 img,
.arrowControlPrevious_2 img {
transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.arrowControlForward_1:hover img,
.arrowControlForward_2:hover img {
    transform: translateX(16px);
}

.arrowControlPrevious_1:hover img,
.arrowControlPrevious_2:hover img {
    transform: translateX(-16px);
}

.stappen-title {
    position: relative;
    display: inline-block;
    font-family: sans-serif;
}

.star {
    position: absolute;
    font-size: 40px !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 900 !important;
    line-height: 40px !important;
}

.star::before {
    content: '';
    background: url(images/starshape.svg);
    background-size: cover;
    position: absolute;
    top: -42px;
    left: -50px;
    width: 125px;
    height: 125px;
    z-index: -1;
    animation: rotateStar 15s linear infinite;
}

@keyframes rotateStar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.stappen-loop .swiper-slide {
    padding-top: 100px !important;
}

.border-cut {
    clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%);
}

.mogelijkheden-item .elementor-widget-button {
    height: 0px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.mogelijkheden-item:hover .elementor-widget-button {
    height: 52px !important;
}

.elementor-widget-text-editor ul {
    padding-left: 0px !important;
    padding-top: 8px !important;
    list-style-position: inside !important;
}

.elementor-widget-text-editor ul li {
    list-style-image: url(images/list-img.svg) !important;
}

.srp_miniplayer_metas {
    display: none !important;
}

.srp_player_boxed  {
    display: flex !important;
    gap: 16px !important;
}

.album-art img {
    object-fit: cover !important;
    height: 90px !important;
    max-width: 110px !important;
}

.iron-audioplayer .album .album-art {
    max-width: 110px !important;
}

.iron-audioplayer .srp-play-circle {
    height: 48px !important;
    width: 48px !important;
    border-width: 3px !important;
    border-color: #EF3B2F !important;
}

.sricon-play {
    color: #EF3B2F !important;
}

.iron-audioplayer .srp_player_boxed {
    background: #FFF5EC !important;
    padding: 16px !important;
}

.elementor-button-content-wrapper {
    align-items: center !important;
}

.cta-image::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgb(16,49,43);
    background: -moz-linear-gradient(180deg, rgba(16,49,43,0) 0%, rgba(16,49,43,0.46) 60%, rgba(16,49,43,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(16,49,43,0) 0%, rgba(16,49,43,0.46) 60%, rgba(16,49,43,1) 100%);
    background: linear-gradient(180deg, rgba(16,49,43,0) 0%, rgba(16,49,43,0.46) 60%, rgba(16,49,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10312b",endColorstr="#10312b",GradientType=1);
}

.about-us-facts {
    height: fit-content !important;
}

.about-us-facts-wrapper {
    align-content: flex-start;
}

.gform_fields {
    gap: 16px !important;
}

.gform_fields input:not([type="checkbox"]):not(.gform_button),
.gform_fields textarea,
.gform_fields select {
    background-color: #FFF5EC !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    border: solid 1px rgba(16,49,43,.20) !important;
    height: inherit !important;
    padding: 16px !important;
    gap: 16px !important;
    color: #10312BCC !important;
    font-family: "Roboto", Sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    width: 100% !important;
}

.gform_fields input::placeholder,
.gform_fields textarea::placeholder {
    color: rgba(16,49,43,.50) !important;
    font-family: "Roboto", Sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.single-vacature .gform_fields input::placeholder,
.single-vacature .gform_fields textarea::placeholder  {
    color: rgba(255,255,255,.50) !important;
}

.single-vacature .gform_fields input:not([type="checkbox"]):not(.gform_button),
.single-vacature .gform_fields textarea {
    background: rgba(255,255,255,.30) !important;
    border: solid 1px rgba(255,255,255,.15) !important;
    color: #ffffff !important;
}

.single-vacature .gform_drop_area {
    background: rgba(255,255,255,.30) !important;
}

.single-vacature .gform_drop_area::before {
    display: none !important;
}

.single-vacature .gform_drop_instructions {
    color: rgba(255,255,255,.50) !important;
}

.single-vacature .gform_button_select_files  {
    background: white !important;
    color: rgb(119, 119, 119) !important;
}

.single-vacature .gfield_label {
    color: #fff !important;
}

.gfield_consent_label {
    color: #10312BCC !important;
}

.single-vacature .gfield_consent_label {
    color: #FFFFFFCC !important;
}

.single-vacature .gfield_consent_label a {
    color: #ffffff !important;
}

.gform_button {
    font-family: "Roboto", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    border-radius: 0px 0px 0px 0px !important;
    padding: 16px 40px 16px 26px !important;
    background-color: #ef3b2f !important;
    color: #ffffff !important;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, 100% 100%, 0 100%) !important;
}

.vacature-item .elementor-heading-title {
    transition: all 0.4s cubic-bezier(0.68, 0, 0.26, 1) !important;
}

.gform_required_legend {
    display: none !important;
}

.vacature-item:hover .elementor-heading-title {
    color: #B1D268 !important;
    transform: translateX(16px);
}

.solliciteren-title .highlighted-text {
    color: #B1D268 !important;
}

.single-vacature .vacature-item .elementor-heading-title {
    color: #10312b !important;
}

.single-vacature .vacature-item:hover .elementor-heading-title {
    color: #B1D268 !important;
}

.single-vacature .vacature-item {
    border-color: rgba(16,49,43,.20) !important;
}

.gform_confirmation_message {
    background: #b1d26845 !important;
    color: #10312b !important;
    padding: 16px 32px !important;
}

.single-vacature .gform_confirmation_message {
    color: #B1D268 !important;
}

.offerte-stap-titel {
    font-size: 16px !important;
    font-weight: bold !important;
    font-family: "Roboto", Sans-serif !important;
    color: #10312B !important;
}

.gform_title {
    font-family: "Source Serif Pro", Sans-serif !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: 120% !important;
    color: #10312B !important;
}

@media screen and (min-width: 2500px) {
    .arrowControlPrevious_2 {
        left: calc((110vw - 1530px) / 2) !important;
    }

    .arrowControlForward_2 {
        right: calc((110vw - 1530px) / 2) !important;
    }
}

@media screen and (min-width: 3000px) {
    .arrowControlPrevious_2 {
        left: calc((100vw - 1530px) / 2) !important;
    }

    .arrowControlForward_2 {
        right: calc((100vw - 1530px) / 2) !important;
    }
}



@media screen and (max-width: 1366px) {
    .smooth-image-slider .elementor-carousel-image {
        height: 280px !important;
    }

    .smooth-image-slider .swiper-slide:nth-child(4n + 3) .elementor-carousel-image {
        height: 220px !important;
    }

    .smooth-image-slider .swiper-slide:nth-child(4n) .elementor-carousel-image {
        height: 360px !important;
    }
}

@media screen and (max-width: 1200px) {
    .gform_title {
        font-size: 36px !important;
    }
}

@media screen and (max-width: 880px) {
    .gform_title {
        font-size: 32px !important;
    }
}

@media screen and (max-width: 768px) {
    .header-bottom {
        clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 24px, 100% 100vh, 0 100vh) !important;
    }
    .highlighted-text {
        font-size: 24px !important;
        right: -100px !important;
        bottom: -10px !important;
    }
}