@font-face {font-family: Poppins; src: url(https://www.alternate.nl/download/b2c_nl/pic/fonts/Poppins-Regular.ttf); }
    #PortalPagina { width: 100%; position: relative; z-index: 0;}
    #PortalPagina img { width: 100%; }
    #PortalPagina h1 { font-family: Poppins; font-size: 51px; line-height: 65px; text-transform: uppercase; } 
    #PortalPagina h2 { font-family: Poppins; font-size: 40px; line-height: 60px; }
    #PortalPagina p { font-size: 14px; line-height: 24px; }
    .ItemAfbeelding { margin: 0; }
    
    /* Vlakverdeling */
    #Inleiding { background: linear-gradient(33deg, #000000, #636363, #2b2b2b); color: white; }
    #Inleiding .row { flex-direction: row-reverse; }
    #Inleiding .col-lg-6 { align-self: center; padding: 0; }
    #Inleiding .SeoTekstvlak { padding: 60px; }
    #Inleiding .SeoTekstvlak img { width: 50%; transform: translate(-11px, 0); }
    #Inleiding .SeoTekstvlak p { font-size: 18px; line-height: 28px; }
    #Inleiding .SeoTekstvlak span { font-weight: bolder; }
    
    #Aanbod h2 { font-size: 40px; text-align: center; }

    /* Aanbod */
    #Aanbod { font-family: Poppins; padding: 20px; }
     .product a { position: relative; display: flex; flex-direction: column; height: 23em; text-align: center; padding: 10px; background: white; border-radius: 20px; margin: 5px; border: 2px solid #cfcfcf;}
     .product a:hover { text-decoration: none;}
     .product img { height: 200px; object-fit: contain; }
     .productTitle { font-size: 16px; color: black; height: 52px;}
     .prijzen { position: relative; right: 16px; }
     .actieprijs { position: absolute; right: 0; background: #a00e15; width: fit-content; color: white; padding: 5px 10px; font-size: 22px !important; }
     .msrp { background: #252525; width: fit-content; padding: 5px 15px; color: white; transform: rotate(4deg); position: absolute; right: -9px; bottom: -21px; z-index: 2; text-decoration: line-through; }
     .msrp:empty { display: none; }
     .product .Productbutton { position: absolute; left: 0; bottom: -50px; width: 100px !important; }
     .uitverkocht { filter: grayscale(1); }
     .uitverkocht .actieprijs { background: #8e8e8e; }
     .Ondertitel { text-align: center; padding: 24px 0 0; color: #878787; }

.product, .product div {
    width: 100% !important;
}

.jacsListing div {
    width: 30%;
}

    @media screen and (max-width: 667px) { /* Mobile */
        #PortalPagina h1 { font-size: 34px; line-height: 40px; }
        #PortalPagina h2 { font-size: 25px; line-height: 35px; }
        #PortalPagina p { font-size: 12px; line-height: 20px; }
        #Inleiding .SeoTekstvlak { padding: 10px; }
        #Inleiding .SeoTekstvlak p { font-size: 24px; line-height: 36px; }
        .actieprijs { padding: 10px 10px; font-size: 30px !important; }
        .jacsListing div { width: 100%; }
    }

    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
         #PortalPagina h1 { font-size: 34px; line-height: 35px; }
         #Inleiding .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
         #Inleiding .SeoTekstvlak { padding: 10px; }
         #Inleiding .SeoTekstvlak p { font-size: 19px; line-height: 25px; }
         .jacsListing div { width: 33.33%; }
    }