:root {
    --ffc943: #ffc943;
    --ffca43: #ffca43;
    --7a7a7a: #7a7a7a;
    --ff9d5e: #ff9d5e;
}
@font-face{
    font-family: "Arial Nova Cond Light";
    src: url("../fonts/custom/Arial Nova Cond Light/Web Fonts/6a2ac230fb5ef1dab1ad971b175b2010.eot");
    src: url("../fonts/custom/Arial Nova Cond Light/Web Fonts/6a2ac230fb5ef1dab1ad971b175b2010.eot?#iefix")format("embedded-opentype"),
        url("../fonts/custom/Arial Nova Cond Light/Web Fonts/6a2ac230fb5ef1dab1ad971b175b2010.woff")format("woff"),
        url("../fonts/custom/Arial Nova Cond Light/Web Fonts/6a2ac230fb5ef1dab1ad971b175b2010.woff2")format("woff2"),
        url("../fonts/custom/Arial Nova Cond Light/Web Fonts/6a2ac230fb5ef1dab1ad971b175b2010.ttf")format("truetype"),
        url("../fonts/custom/Arial Nova Cond Light/Web Fonts/6a2ac230fb5ef1dab1ad971b175b2010.svg#Arial Nova Cond Light")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

.mobile-view-only {
    display: none !important;
}

@media(max-width: 768px) {
    body.first-mobile-block-inview .mobile-logo {
        opacity: 1 !important;
    }

    div.mobile-view-only {
        display: block !important;
    }

    body.logo-force-show button.hamburger.mobile-only {
        display: none !important;
    }

    .mobile-drawer .drawer-close {
        font-size: 3.2rem !important;
        color: #ff8c42 !important;
    }

    .mobile-drawer .drawer-nav {
        margin: 7rem 0 0 !important;
    }

    .home-page .mobile-hero .hero-inner,
    body.logopedie-page .mobile-hero .hero-inner {
        width: 100%;
        max-width: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 35px 0px;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }

    .home-page .mobile-hero .hero-title,
    body.logopedie-page .hero-title {
        font-weight: 100;
        text-align: center !important;
        margin: 0;
        padding: 0;
        font-size: 55px;
        font-family: 'Adelina-Regular';
        color: var(--ffc943);
    }

    .home-page .mobile-hero,
    body.logopedie-page .mobile-hero,
    body:not(.home-page):not(.praktisch-page):not(.contact-page) section.mobile-hero:first-of-type {
        padding-top: 160px !important;
        padding-bottom: 160px !important;
    }

    .mobile-view-only .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .ul-list p .ul-list li {
        color: var(--7a7a7a);
    }

    .mobile-view-only p,
    .mobile-view-only ul li,
    body.logopedie-page p, body.logopedie-page li {
        font-size: 1.5rem !important;
        font-family: "Arial Nova Cond Light" !important;
        font-weight: 400;
    }

    section.mobile-only,
    section[class^="mobile-"],
    section[class*=" mobile-"] {
        min-height: auto !important;
        height: auto !important;
    }

    .mobile-view-only :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul) {
        max-width: 100%;
        width: 100%;
    }

    .mobile-view-only :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li {
        margin-bottom: 20px !important;
    }

    :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li::before {
        width: 5rem !important;
        height: 5rem !important;
        background-size: 100% 100%;
    }

    :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li {
        padding-left: 4.3rem !important;
    }

    .image-box img {
        max-width: 100%;
        width: 100%;
        border-radius: 50px;
    }

    .image-box {
        max-width: 100%;
        margin: 0 auto;
        border-radius: 50px;
        overflow: hidden;
        margin-top: 50px;
    }

    .mobile-only .hero-scroll span,
    .mobile-only .section-scroll span {
        order: -1;
        font-size: 24px;
        color: var(--ffca43);
    }

    body.home-page .hero-scroll,
    body.home-page .section-scroll,
    body.home-page .hero-scroll .chevron,
    body.home-page .section-scroll .chevron,
    body.logopedie-page .hero-scroll,
    body.logopedie-page .section-scroll,
    body.logopedie-page .hero-scroll .chevron,
    body.logopedie-page .section-scroll .chevron {
        color: var(--ffca43) !important;
        fill: var(--ffca43) !important;
    }

    body.home-page .hero-scroll .chevron path,
    body.home-page .section-scroll .chevron path,
    body.logopedie-page .hero-scroll .chevron path,
    body.logopedie-page .section-scroll .chevron path {
        stroke: var(--ffca43) !important;
    }

    .mobile-only .hero-scroll .chevron-group,
    .mobile-only .section-scroll .chevron-group {
        position: relative;
        bottom: 25px;
    }

    .mobile-only .hero-scroll,
    .mobile-only .section-scroll {
        bottom: 15px !important;
    }

    .home-page .mobile-vision {
        padding-bottom: 150px !important;
    }

    .mobile-view-only .hero-title {
        font-weight: 100;
        margin: 0;
        padding: 0;
        font-size: 100px;
        font-family: 'Adelina-Regular';
        color: var(--ffc943);
    }

    .mobile-view-only .hero-inner {
        width: 100%;
        max-width: 90%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 35px 0px;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }

    .home-page .mobile-vision,
    .logopedie-page .mobile-vision {
        background: color-mix(in srgb, #ffffff 35%, #ffffff);
    }

    .text-white {
        color: #ffffff !important;
    }

    .bg-heading,
    .logopedie-page h3 {
        text-align: center !important;
        font-weight: 100;
        margin: 0;
        padding: 0;
        font-size: 55px;
        line-height: normal;
        font-family: 'Adelina-Regular';
        color: #ffffff;
    }

    .background-enhance {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-top: 30px;
        text-align: center;
    }

    section.taaltherapie-section {
        padding-top: 90px;
        position: relative;
        padding-bottom: 130px;
    }

    .mobile-view-only .section-content p {
        font-weight: 400;
        font-family: "Arial Nova Cond Light" !important;
    }

    .mobile-view-only .container,
    .container {
        padding-top: 0 !important;
        max-width: 90% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .bottom-scroll {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10px;
    }

    a.section-scroll {
        text-decoration: none;
    }

    .section-scroll span {
        font-size: 24px;
        color: var(--ffca43);
        font-weight: 600 !important;
        font-family: "Arial Nova Cond Light" !important;
    }

    .section-scroll svg path {
        stroke-width: 0.5 !important;
        stroke: var(--ffca43) !important;
    }

    .section-scroll svg {
        height: 123px;
    }

    .section-scroll .chevron-group {
        display: flex;
    }

    .arrow-keys {
        width: 100px;
        margin: 0 auto;
        display: block;
    }

    .arrow-keys img {
        width: 100%;
    }

    .we-helpen-section {
        position: relative;
        padding-top: 90px;
    }

    .bg-buttons {
        display: grid;
        align-items: center;
        justify-content: center;
        row-gap: 15px;
        margin-top: 15px;
    }

    .bg-image {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0;
        font-size: 24px;
        padding: 15px 50px;
        font-family: 'Adelina-Regular';
        font-weight: 500;
        color: var(--ff9d5e);
        line-height: normal;
        font-weight: 400;
        font-family: "Arial Nova Cond Light" !important;
    }

    .spraaktherapie-section {
        padding-top: 60px;
        position: relative;
        padding-bottom: 170px;
    }

    .lezen-text {
        font-size: 30px;
        line-height: normal;
        color: var(--ff9d5e);
        font-family: 'Adelina-Regular';
        font-weight: 500;
    }

    .lezen-text h6 {
        margin: 0;
    }

    .bg-heading-section {
        position: relative;
        padding-top: 60px;
        padding-bottom: 170px;
    }

    .before-icons li::marker {
        content: none;
    }

    .before-icons li {
        position: relative;
        padding-left: 55px;
        font-weight: 400 !important;
    }

    .ml-list.before-icons {
        padding-left: 0px;
    }

    .before-icons li::before {
        content: "";
        position: absolute;
        width: 35px;
        height: 34px;
        background-image: url(../images/pijl-geel.png);
        background-size: 87px;
        background-repeat: no-repeat;
        background-position: center center;
        left: 0px;
    }

    .spraaktherapie-section p {
        font-weight: 500;
        margin-bottom: 0;
        margin-top: 0;
        font-family: "Arial Nova Cond Light" !important;
    }

    section.pb-90 {
        padding-bottom: 90px;
    }

    .imgtop-heading .image-box {
        margin-top: 0;
    }

    .h6-heading {
        font-size: 55px;
        margin: 0;
        font-weight: 100;
        color: var(--ff9d5e);
        line-height: normal;
        margin-bottom: 10px;
        font-family: "Arial Nova Cond Light" !important;
    }

    .footer-mobile {
        background-color: #ffeab4;
    }

    .footer-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        column-gap: 35px;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 15px;
        max-width: 550px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    section.footer-mobile {
        padding-top: 50px;
        padding-bottom: 20px;
    }

    section.footer-mobile ul li a {
        color: var(--7a7a7a);
        text-decoration: none;
        font-weight: 500;
        font-family: "Arial Nova Cond Light" !important;
    }

    .footer-mobile .footer-location {
        text-align: right;
        font-weight: 500;
        font-size: 24px !important;
        color: #7a7a7a;
        font-family: "Arial Nova Cond Light" !important;
        text-decoration: none;
        display: block;
    }

    .footer-location img {
        position: relative;
        top: 10px;
    }

    .pt-0 {
        padding-top: 0px;
    }

    .pb-0 {
        padding-bottom: 0px;
    }
    .mobile-hero.mobile-only.main-mobile p,
    .mobile-hero.mobile-only.main-mobile ul.ml-list li{
        font-family: sans-serif !important;
        font-weight: 500;
    }
    .imgtop-heading .h6-heading{
        margin-top: 40px;
        margin-bottom: 20px;
    }

    :is( section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij ) :is(.mo-bullets, .ml-list, ul) > li::before {
        background-position-y: 13px !important;
        background-position-x: -21px !important;
    }
    :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li {
        padding-left: 3.3rem !important;
    }
}


@media(max-width: 575px) {

    .home-page .mobile-hero .hero-title,
    .logopedie-page .mobile-hero .hero-title,
    .bg-heading, .logopedie-page h3 {
        font-size: 55px;
        line-height: normal !important;
        padding-left: 15px;
        padding-right: 15px;

    }

    .home-page .mobile-hero,
    .logopedie-page .mobile-hero,
    body:not(.home-page):not(.praktisch-page):not(.contact-page) section.mobile-hero:first-of-type {
        padding-top: 120px !important;
    }

    .mobile-view-only p,
    .mobile-view-only ul li,
    body.logopedie-page p, body.logopedie-page li {
        font-size: 1.5rem !important;
    }

    .mobile-only .hero-scroll span,
    .mobile-only .section-scroll span {
        order: 0;
        font-size: 24px;
        color: var(--ffca43);
    }

    .section-scroll span {
        font-size: 24px;
        line-height: normal;
    }

    .background-enhance {
        padding-top: 15px;
    }

    .bg-heading-section {
        padding-bottom: 20px;
    }

    .image-box {
        margin-top: 20px;
    }
    .we-helpen-section {
        padding-top: 20px;
    }
    .spraaktherapie-section {
        padding-bottom: 20px;
    }
    .before-icons li::before {
        width: 30px;
        height: 30px;
        background-size: 80px;
    }
    .before-icons li {
        padding-left: 45px;
    }
    section.pb-90 {
        padding-bottom: 40px;
    }
        .pt-0 {
        padding-top: 0px !important;
    }
    .h6-heading {
        font-size: 40px;
        line-height: normal;
    }
    .footer-mobile .footer-location {
        font-size: 20px !important;
        line-height: normal;
        margin-bottom: 0;
    }
    .mobile-view-only :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li {
        margin-bottom: 15px !important;
    }
    .arrow-keys {
        width: 75px;
        margin-top: 10px;
    }
    .bg-heading-section#bg-heading-section4 .imgtop-heading .h6-heading,
    .bg-heading-section#bg-heading-section5 .imgtop-heading .h6-heading{
        margin-top: 0px;
    }
    .footer-menu ul {
        margin-bottom: 20px;
    }
    .bg-image {
        font-size: 24px;
    }
}

@media(max-width: 428px){
    .home-page .mobile-hero .hero-title,
    .logopedie-page .mobile-hero .hero-title,
    .bg-heading, .logopedie-page h3 {
        font-size: 40px;
        line-height: normal !important;
    }
    .home-page .mobile-hero .hero-inner,
    .logopedie-page .mobile-hero .hero-inner {
        padding: 20px 0px;
        margin-bottom: 20px;
    }
    .mobile-view-only :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li {
        margin-bottom: 10px !important;
    }
    :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li::before {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    .home-page .mobile-hero,
    .logopedie-page .mobile-hero,
    body:not(.home-page):not(.praktisch-page):not(.contact-page) section.mobile-hero:first-of-type {
        padding-top: 100px !important;
    }
    :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li {
        padding-left: 3.5rem !important;
    }
    .mobile-view-only p, .mobile-view-only ul li,
    body.logopedie-page p, body.logopedie-page li {
        font-size: 20px !important;
    }
    :is(section[class^="mobile-"], section[class*=" mobile-"], .mobile-only, .overons-page .why-ontpop.mobile-only, .overons-page .mobile-meet-liselotte, .overons-page .mobile-meet-loes, .overons-page .mobile-wie-zijn-wij) :is(.mo-bullets, .ml-list, ul)>li {
        padding-left: 2rem !important;
    }
    .image-box ,
    .image-box img{
        border-radius: 40px;
    }
}