@font-face {font-family: Poppins; src: url(https://www.alternate.nl/download/b2c_nl/pic/fonts/Poppins-Regular.ttf); }
    
    .modal { align-content: center; }
    .modal-body .Aanbieding { background: #b10502; font-size: 25px; text-transform: uppercase; color: white; text-align: center; font-weight: 700; }
    .modal-body .product img { display: block; width: 50%; margin: 0 auto; }
    .modal-body .product .productTitle { padding: 20px 0 0; }
    .modal-body .historyPrice { font-size: 30px; text-decoration: line-through;text-align: right; margin: -10px 0; }
    .modal-body .product .actieprijs { font-size: 40px; font-weight: 900; color: #d10c0d; text-align: right; }
    .modal-body .product .badge { width: 100%; background: #2c2c2c !important; padding: 10px; }   
    
     #PortalPagina { width: 100%; position: relative; z-index: 0; font-family: Poppins; background: #182902 url(https://www.alternate.nl/download/b2c_nl/pic/themapagina/WK/2026/BG.jpg?v=2) no-repeat; background-size: 100%; padding-bottom: 40px;
        img { width: 100%; }
        h1 { font-size: 30px; } 
        h2 { font-size: 25px; line-height: 40px; }
        p { font-size: 16px; line-height: 24px; }
        
        .OmslagFoto { background: none; width: 70% !important; margin: 0 auto 30px; }
        .Lijn { justify-content: center; margin: 20px 0 -50px; }
        
        .Speler .card { border: none; }
        .Speler .btn { transition: 0.2s linear; }
        .Speler .btn:hover { filter: drop-shadow(2px 4px 6px #000000ba); transform: translateY(-20px) scale(1.1); }
        .Speler .Product { margin: -25px auto -50px; }
        .Speler .Titel { background: black; color: white; font-size: 16px !important; line-height: 22px; width: fit-content; margin: 0 auto; padding: 5px 30px; transform: skewX(-10deg); }
        .Speler .Positie { background: #b10502; width: fit-content; margin: 0 auto; padding: 5px 20px;  color: white; transform: skewX(-10deg); }
        .Speler .badge { display: none; top: 80px; right: 35%; position: absolute; background: blue !important; }
        .Speler .btn:hover .badge { display: inline-block; }
        
        .Bank picture img { width: 50% !important; margin: 40px auto -160px; display: block; border-radius: 30px;}
        .Bank .row { height: 510px; background: url(https://www.alternate.nl/download/b2c_nl/pic/themapagina/WK/2026/Wisselbank.png?v=2) no-repeat; background-position: center; justify-content: center; padding-top: 120px; }
        .Bank .row .product { width: 14%; border: none; padding: 5px; }
        .Bank .row .product .productTitle { text-align: center; background: black; color: white; font-size: 13px; text-align: center; padding: 10px; }
        .Bank .row .product .prijzen { background: white; padding: 10px; margin: -10px 0 0; }
        .Bank .row .product .historyPrice { text-decoration: line-through; text-align: left; }
        .Bank .row .product .actieprijs { font-size: 70px !important; font-weight: bold; color: #d10c0d; text-align: right; margin: -20px 20px 20px; }
        
        .Winactie { background: black; color: white; margin: 0 40px; border-radius: 40px; overflow: hidden; }
        .Winactie .accordion-item { border: none; }
        .Winactie .accordion-button.collapsed { background: #b30504; text-align: center; color: white; width: fit-content; margin: 10px auto; padding: 0 30px; }
        .Winactie .accordion-button:not(.collapsed) { background: #b30504; text-align: center; color: white; width: fit-content; margin: 10px auto; padding: 0 30px; box-shadow: none; border-radius: 5px; }
        .Winactie .accordion-button::after { display: none; }
        .Winactie .accordion-body { color: white; }
        .Winactie .accordion-body ul { padding: 20px 40px; border-radius: 10px; }
        .Winactie .accordion-body ul:nth-child(even) { background: #1a1a1a; }
        .Winactie .accordion-body li:first-child { list-style: none; font-size: 20px; text-align: center; padding: 10px; }
        .Winactie .accordion-body ul:last-child li { font-size: 15px; }
        .Winactie .accordion-body li:nth-child(n+2)::marker { color: #ffbb10; content: "> "; font-size: 20px; }
        
        .Winactie .GoogleForm iframe { width: 100%; height: 100em; }
    }
    
    @media screen and (max-width: 667px) { /* Mobile */
        .modal { width: 70%; margin: 0 15%; }
        .modal-body .Aanbieding { font-size: 15px; }
        .modal-body .product .productTitle { padding: 10px 0; font-size: 12px; }
        .modal-body .historyPrice { font-size: 20px; }
        .modal-body .product .actieprijs { font-size: 30px; margin: 0; }
        
        #PortalPagina { overflow: hidden; background-size: 170%;  background-position: center -80px; background-color: #384d08;
            .OmslagFoto {  width: 90% !important; margin: 0 auto -10px; }
            .Opstelling { padding: 5px; }
            .card-body { padding: 4px; }
            .btn { padding: 0; }
            .Lijn { margin: -30px 0 -10px; }
            
            .Speler { padding: 0; }
            .Speler .Product { margin: 15px 0 -10px; }
            .Speler .Titel { font-size: 8px !important; line-height: 11px; padding: 2px 6px; }
            .Speler .Positie { font-size: 7px; line-height: 9px; padding: 4px; }
            .Speler .btn:hover .badge { display: none; }
            
            .Bank picture img { width: 80% !important; margin: 20px auto 0; }
            
            .Bank .row { flex-wrap: nowrap; background-position: top !important; background-size: 90% !important; height: auto; justify-content: left; padding: 20px; overflow: scroll; }
            .Bank .row .product { width: 32%; }
            .Bank .row .product .productTitle { font-size: 9px; padding: 7px; }
            .Bank .row .product .historyPrice { font-size: 14px; }
            .Bank .row .product .actieprijs { font-size: 40px !important; margin: -20px 0 0; }
            
            .Winactie { margin: 10px; }
            .Winactie .accordion-button.collapsed { width: 82% !important; line-height: 20px; padding: 20px !important; width: 90% !important; }
            .Winactie .accordion-button:not(.collapsed) { width: 82% !important; line-height: 20px; padding: 20px !important; width: 90% !important; }
            .Winactie .accordion-body ul { padding: 20px 20px; font-size: 10px; }
            .Winactie .accordion-body li:nth-child(n+2)::marker { font-size: 12px; }
            .Winactie .accordion-body ul:last-child li { font-size: 10px; }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
        #PortalPagina {
            .Lijn { margin: 0 0 -30px; }
            .Speler .card { align-items: center; }
            .Speler .Product { margin: -20px auto -20px; }
            .Speler .Titel { font-size: 12px !important; line-height: 17px; width: 130px; padding: 5px 10px; }
            .Speler .Positie { font-size: 10px; padding: 0 10px; }
            .Speler .btn:hover .badge { display: none; }
            
            .Bank .row { height: auto; background-size: 80% !important; padding-top: 130px; }
            .Bank .row .product { width: 17%; }
            .Bank .row .product .actieprijs { font-size: 50px !important; margin: -20px 0 10px; }
        }
    }