@font-face {font-family: Poppins; src: url(https://www.alternate.nl/download/b2c_nl/pic/fonts/Poppins-Regular.ttf); }
    #PortalPagina { width: 100%; font-family: Poppins; background: #0e3403; }
    #PortalPagina h1 { font-size: 30px; } 
    #PortalPagina h2 { font-size: 25px; line-height: 40px; }
    #PortalPagina p { font-size: 16px; line-height: 24px; }
    #PortalPagina img { width: 100%; }
    
    #Deals { padding: 20px 60px; }
    #Deals .Inleiding h3 { text-align: center; color: white; font-size: 30px; margin-bottom: 20px; text-transform: uppercase; text-shadow: 0 0 20px #8BC34A; }
    #Deals .Categorie { position: relative; display: flex; flex-flow: wrap; background: linear-gradient(45deg, #911d15, #8b1e15); border: 3px solid #b51111; border-radius: 20px; justify-content: center; margin: 7px -8px; 
                align-items: flex-end; height: -webkit-fill-available; box-shadow: inset 0 0 10px #000000, 5px 5px 10px #5d00007a; overflow: hidden; align-content: flex-start; }
    #Deals .Categorie:hover::before { filter: opacity(1); }
    #Deals .Categorie::before { content: ""; width: 100%; height: inherit; background: linear-gradient(55deg, #ff0000 30%, #23ff00 70%); mix-blend-mode: hue; filter: opacity(0); transition: 1s; border-radius: 20px; position: absolute; z-index: 2; }
    #Deals .HoofdBtn { display: block; background: linear-gradient(174deg, #4caf5066, #8f1e15 80%); width: 95%;  color: white; text-transform: uppercase;  font-size: 16px !important; font-weight: 900; line-height: 24px !important; 
               transform: translate(0, -40px); border-radius: 0 0 20px 20px; border: none; box-shadow: 0 -40px 10px #00000073; margin: 0 auto -30px; padding-top: 20px; }
    #Deals .HoofdBtn strong { color: #FFC107; font-size: 22px; display: block; }
    #Deals .CategorieImg img { padding: 5px; }
    
    #Deals .SubCategorieen .btn { background: orange; }
    #Deals .SubCategorieen { position: relative; z-index: 3; }
    
    /* LIVE SHOPPING */
    #Shopping { border: 3px solid #236d07; border-radius: 30px; width: 92%; margin: 30px auto; box-shadow: inset 0 0 30px green, 0 0 30px black; justify-content: center; }
    #Shopping .Videos iframe { display: block; margin: 20px auto; height: auto; width: 100%; aspect-ratio: 16 / 9; }
    #Shopping .Inleiding { text-align: center; padding: 30px; }
    #Shopping .Inleiding h3 { font-size: 30px; font-family: Poppins; }
    #Shopping .product { position: relative; width: 18%; background: white; padding: 25px 5px; margin: 5px; border-radius: 20px; border: 2px solid #dfdfdf; overflow: hidden; }
    #Shopping .product img { height: 100px; object-fit: contain; }
    #Shopping .productTitle { font-size: 10px; font-weight: 500; text-align: center; min-height: 26px; margin: 10px 0 15px; overflow: hidden; }
    #Shopping .badge { background: #d4810e; position: absolute; width: 73px !important; height: 73px; padding: 10px 24px; z-index: 2; top: 0; left: -14px; font-size: 13px; font-weight: 300; text-align: left; clip-path: polygon(0 0, 100% 0%, 0 100%, 0% 100%); }
    #Shopping .prijzen { justify-items: right; margin: -12px -10px -10px; }
    #Shopping .historyPrice { height: 25px; margin: 0; text-decoration-line: line-through; }
    #Shopping .actieprijs { font-size: 26px !important; font-weight: 600; color: #ad0109; margin-bottom: 0; }
    #Shopping .productPromo { text-align: center; background: #ad0109; color: white; padding: 5px 10px; font-size: 8px; position: absolute; top: 9px; right: 10px; border-radius: 5px; z-index: 2; }
    #Shopping .promoCards { justify-content: center; margin-bottom: 30px; }
    #Shopping .promoCards .highlight-carousel-container product { position: relative; padding: 0px; overflow: hidden; border-radius: 20px; }
    #Shopping .promoCards .swiper { position: static; user-select: none; margin: 0 5px; }
    
    #Shopping .productTitle.Bold { font-weight: 900; font-size: 13px; margin: 10px 0 -10px; }

    /* LIVE SHOPPING SLIDER*/
    .highlight-carousel-container product { width: 21%; }
    .highlight-carousel-container product .badge { left: 5px; border-radius: 20px 0; }
    .swiper-slide .promoCard { width: 100% !important; padding: 0px !important; margin: 0 !important; border: none !important; height: 15em;}
    .swiper-slide .promoCard img { width: 100% !important; }
    .swiper-button-prev, .swiper-rtl .swiper-button-next, .swiper-button-next, .swiper-rtl .swiper-button-prev { margin: 0 5px; color: #ffffff; background-color: #d4810e30; height: 35px; width: 35px; 
                         border-radius: 20px; top: 220px; }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { margin-left: -4px; }
    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { margin-left: 4px; }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { transform: scale3d(0.5, 0.4, 0.5); }
    @media only screen and (max-width: 1300px) { .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 8px !important; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 8px !important; } }
    @media (max-width: 920px) { .swiper-button-prev, .swiper-rtl .swiper-button-next, .swiper-button-next, .swiper-rtl .swiper-button-prev { top: 215px; } .promoCards { margin: 20px 50px; } }
    @media (max-width: 600px) { .promoCards { margin: 20px; } }
    @media (max-width: 450px) { .swiper-button-prev, .swiper-rtl .swiper-button-next, .swiper-button-next, .swiper-rtl .swiper-button-prev { top: 220px; } }
    
    /* Content */
    .actieVoorwaarden { background: #191919; color: white; padding: 30px; margin-top: 20px; }
    .actieVoorwaarden p { margin: 0; }
    
    @media screen and (max-width: 667px) { /* Mobile */
        #PortalPagina h1 { font-size: 25px; }
        #PortalPagina h3 { font-size: 22px; }
        #PortalPagina p { font-size: 14px; line-height: 23px;}
        
        #Shopping .OmslagFoto { padding: 0; margin-bottom: -35%; }
        #Shopping .Videos iframe { height: 13em; }
        #Shopping .Inleiding { padding: 10px; }
        #Shopping .promoCards { width: 90%; justify-content: inherit; }
        #Shopping .promoCards img { width: 100%; }
        #Shopping .product { width: 95%; }
        #Shopping .prijzen { float: right; }
        
        #Deals { padding: 20px; }
        #Deals .Categorie { height: auto !important; }
    }
    
    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
        #Shopping .OmslagFoto { margin-bottom: -18em; }
        #Shopping .Videos iframe { height: revert-layer; }
        #Shopping .promoCards { width: 100%; margin: 0; }
        #Shopping .product { width: 30%; }
        #Shopping .product img { width: 100%; }
        #Deals .Categorie { height: auto !important; }
        #Shopping .prijzen { float: right; }
    }