@font-face {font-family: Poppins; src: url(https://www.alternate.nl/download/b2c_nl/pic/fonts/Poppins-Regular.ttf); }

    #PortalPagina { font-family: Poppins; background: #f1f1f1;
        img { width: 100%; }
        h1 { font-size: 40px; }
        h2 { font-size: 25px; line-height: 40px; }
        p { font-size: 14px; line-height: 23px; }
    }

    .OmslagFoto { margin-bottom: -30em; }
    .OmslagFoto .ItemAfbeelding { padding: 20px; }

    #Inleiding .ItemAfbeelding { margin-left: 30px; }
    #Inleiding .SeoTekstvlak { padding: 60px 60px 60px 0; }
    #Inleiding h1 { color: #f89b23; }
    #Inleiding .btn { width: fit-content; background: linear-gradient(105deg, #f89b23 86%, #db7b00 70%); padding: 10px 40px; margin: 0 7px; font-weight: 900; font-size: 20px !important; }
    
    #Reviews { padding: 30px; }
    .filter .filter-item { display: flex; flex-direction: column; }
    .filter .accordion-item { background: #ffffff; border: 2px solid #c1c1c1 !important; border-radius: 5px; margin: 10px 0; }
    .filter span {  font-size: 25px; }
    .filter .accordion-header a { font-size: 16px; pointer-events: none; }
    .filter #resetFiltersBtn { background: linear-gradient(105deg, #f89b23 86%, #db7b00 70%); padding: 5px 20px; font-weight: 900; border: 1px solid #db7b00; border-radius: 5px; }
    
    #Reviews .filter .filter-button { background: none; border: none; text-align: left; width: fit-content; font-size: 16px; line-height: 25px; }
    #Reviews .filter .filter-button:hover { filter: grayscale(1); }
    #Reviews .filter .filter-button:hover:before { filter: contrast(0); }
    #Reviews .filter .filter-button:before { content: "\25E2"; margin-right: 5px; color: #fff; filter: opacity(0); }
    #Reviews .filter .filter-button.active { color: #a10000 !important; font-weight: bold; }
    #Reviews .filter .filter-button.hidden { color: #c7c7c7; }
    #Reviews .filter .accordion-button::after { display: none; }
    #Reviews .filter .accordion-collapse.collapse { display: block; }
    
    #Reviews .content { display: flex; flex-wrap: wrap; align-self: start; }
    #Reviews .content .hidden { display: none; }
    #Reviews .content .reset-button { width: fit-content; margin: 10px; padding: 5px 20px; background: #1262eda3; color: white; border: 1px solid #ffffff36; border-radius: 4px; }
    
    .accordion-item { background: white; overflow: hidden; margin-bottom: 10px; }
    .accordion-item:has(img)::before { content: "";  display: list-item; background: #f89b23; width: 200px; height: 390px; transform: rotate(45deg); margin: -130px -33px -260px; position: relative; right: -930px; top: -140px; }
    .accordion-item .row { align-items: center; }
    .accordion-item .btnSluiten { display: block; background: linear-gradient(105deg, #f89b23 86%, #db7b00 70%); padding: 5px 15px; margin: -10px 17px 17px; font-weight: 900; }
    .accordion-item .btnSluiten.collapsed { display: none; }
    .accordion-item p:empty { display: none; }
    
    .accordion-header .ItemAfbeelding { height: 35em; margin: 0; padding: 20px; }
    .accordion-header .ItemAfbeelding img { object-fit: cover; height: 100%; border-radius: 20px; }
    .accordion-header h4 { font-size: 35px; z-index: 2; position: relative; }
    .accordion-header .SeoTekstvlak { padding: 50px; padding-left: 0; }
    .accordion-header .SeoTekstvlak p { color: #737373; }
    .accordion-header .SeoTekstvlak .btn { margin: -20px -12px; font-size: 16px !important; color: #f89b23; font-weight: 900; }
    .accordion-header .Badge { width: 30% !important; }
    .accordion-header .SeoTekstvlak .btn:not(.collapsed) { display: none; }
    
    .accordion-item:has(.show) .SeoTekstvlak p, .accordion-item:has(.show) .SeoTekstvlak ul { opacity: 1; height: auto; margin: revert-layer; transition: .5s; }
    .SeoTekstvlak p:nth-child(n+3), .SeoTekstvlak ul { opacity: 0; height: 0; overflow: hidden; margin: 0; transition: .5s; }
    
    .accordion-body .SeoTekstvlak { padding: 0 10px 20px; border-bottom: 3px solid #ebebeb; margin-bottom: 20px; }
    .accordion-body .SeoTekstvlak .ItemAfbeelding .top-shadow { background: linear-gradient(to bottom, transparent 70%, black 100%); z-index: 2; height: 100%; }
    .accordion-body .SeoTekstvlak h4 { display: flex; background: white; margin: -60px auto 0; z-index: 2; position: relative; font-size: 25px; padding: 20px; width: 97%; border-radius: 20px; }
    .accordion-body .SeoTekstvlak p { font-size: 13px !important; line-height: 25px !important; padding: 0 20px; }
    .accordion-body .SeoTekstvlak ul { padding: 0 50px; }
    .accordion-body .SeoTekstvlak ul:first-child { border-right: 3px solid #f79b2252; }
    .accordion-body .SeoTekstvlak ul li:first-child { display: block; }
    
    @media screen and (max-width: 667px) { /* Mobile */
        #PortalPagina { overflow: hidden; }
        #PortalPagina {
            h1 { font-size: 25px; }
            h2 { font-size: 17px;}
            p { font-size: 14px; line-height: 23px;} 
        }
        .OmslagFoto { margin-bottom: 0; }
        .OmslagFoto img { display: block; width: 200% !important; margin: 0 -180px -240px; }
        #Inleiding { padding: 10px; }
        #Inleiding .ItemAfbeelding { margin: 0 70px 0; }
        #Inleiding .SeoTekstvlak { padding: 30px 20px 20px; place-items: center; }
        #Inleiding .btn { padding: 5px 15px; margin: 5px; }
        .filter .accordion-header a { pointer-events: all; }
        .filter .collapse:not(.show) { display: none !important; }
        #Reviews .filter .accordion-button::after { display: block; }
        #Reviews .filter .filter-button.hidden { display: none !important; }
        
        #Reviews { padding: 20px 0; margin: 10px; }
        #Reviews h2.text-center { display: none; }
        #Reviews .content { padding: 0; }
        .accordion-header .ItemAfbeelding { height: 20em; }
        .accordion-header h4 { font-size: 19px; }
        .accordion-header .SeoTekstvlak { padding: 30px !important; }
        .accordion-body .SeoTekstvlak { padding: 0; }
        .accordion-body .SeoTekstvlak h4 { font-size: 18px; }
    }

    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
        .OmslagFoto img { width: 90% !important; }
        .filter .accordion-header a { pointer-events: all; }
        #Inleiding { padding: 10px; }
        #Inleiding .SeoTekstvlak { padding: 30px 20px 20px; }
        #Inleiding .ItemAfbeelding { width: 40%; float: right; margin: 150px 0 -70px; }
        #Reviews { margin: 0 10px; }
        .accordion-header h4 { font-size: 25px; }
        .accordion-header .SeoTekstvlak { padding: 0 50px 30px; }
        .filter .collapse:not(.show) { display: none !important; }
        #Reviews .filter .filter-button.hidden { display: none !important; }
        #Reviews .filter .accordion-button::after { display: block; }
    }