@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; font-family: Poppins; background: #e9ecef; padding-bottom: 10px;
        img { width: 100%; }
        h1 { font-size: 30px; } 
        h2 { font-size: 35px; line-height: 50px; text-transform: uppercase; }
        p { font-size: 16px; line-height: 24px; }
    }
    .SeoBasisBlok a { font-size: 16px; line-height: 30px; }

    /* Menu */
    #PortalMenu .row { justify-content: center; margin: -40px 0 30px; }
    #PortalMenu a { border: 1px solid #c2c2c2; width: fit-content; padding: 15px 40px; background: white; }
    
    /* Vlakverdeling */
    .Inleiding { padding: 20px 100px; text-align: center; }
    .Inleiding .SeoTekstvlak .btn { position: inherit; }
    
    section .row:has(.SeoTekstvlak) { background-image: url(https://www.alternate.nl/download/b2c_nl/pic/merken/Club3D/Portal/Badge.png?v=1), linear-gradient(85deg, #494747 50%, #6b6b6b 70%), 
                                    linear-gradient(85deg, #ffffff 50%, #f5f5f5 70%); background-size: 60%, cover, cover; background-repeat: no-repeat; background-position: 620px -230px, 0 -140px, 0; 
                                    margin: 40px; padding: 20px; border: 2px solid #dbdbdb; border-radius: 20px; color: white; }
    .SeoTekstvlak {position: relative;padding: 20px 10px;}
    .SeoTekstvlak .btn {position: absolute;bottom: 0;background: #ad0108;border-radius: 10px;padding: 10px 20px;color: white;/* margin: 50px 0 0; */}
    .ItemAfbeelding { height: 100%; align-content: end; }
    .ItemAfbeelding img {transform: scale(1.2);margin: 10% 0 0%;}

    @media screen and (max-width: 667px) { /* Mobile */
        #PortalPagina {
            h1 { font-size: 25px; }
            h2 { font-size: 25px; line-height: 30px; }
            p { font-size: 14px; line-height: 23px; }
        }
        #PortalMenu .row { margin: 0; }
        #PortalMenu a { width: 100%; }
        .Inleiding { padding: 20px 10px; }
        section .row:has(.SeoTekstvlak) { margin: 0; flex-direction: column-reverse; background-position: 150px -40px, 0 0, 0px; }
        .SeoTekstvlak { padding: 0; }
        .SeoTekstvlak .btn { position: inherit; }
    }

    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
        .Inleiding { padding: 20px; }
        .ItemAfbeelding img { transform: scale(1); margin: -220px 0 -40px; }
        .SeoTekstvlak .btn { position: relative; z-index: 3; margin: 0 0 30px; }
        section .row:has(.SeoTekstvlak) { margin: 10px 0; }
    }