@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    .modal-dialog { max-width: 50%; place-self: anchor-center; margin-top: 25%; }
    
    #PortalPagina { width: 100%; position: relative; z-index: 0; font-family: "Poppins", sans-serif; background: #000105; color: white;
        img { width: 100%; }
        h1 { font-size: 30px; }
        h2 { font-size: 50px; line-height: 35px; margin-bottom: 30px; }
        h2 strong { font-size: 24px; text-transform: uppercase; font-weight: 600; }
        p { font-size: 16px; line-height: 24px; margin: 0; }
        a { font-size: 16px; line-height: 30px; }
        a:hover { color: black !important; font-weight: 600; }
        .btn-primary {  background: #00acc8; border-color: #09d4f5; margin-top: 20px; }
        .btn-primary:hover { background: #00acc8; border-color: #09d4f5; filter: saturate(0.5); }

        /* Menu */
        #PortalMenu { background: #353535 !important;
            .navbar-collapse { justify-content: center; }
            .navbar-collapse .navbar-nav .nav-item { border-right: 3px solid #575757; padding: 0 10px; }
            .navbar-collapse .navbar-nav .nav-item:last-child { border: none; }
            .navbar-collapse .navbar-nav .nav-item a:hover { font-weight: bold; color: #00acc8 !important; }
            .dropdown-item.active, .dropdown-item:active { background: #f1f1f1; }
            .navbar-collapse .navbar-nav .nav-item .nav-link { color: white; }
            .dropdown-item { padding: 8px 20px; }
            .container-fluid { flex-flow: row-reverse; align-items: start; }
            .navbar-toggler { background: white; }
        }

        /* Content */
        .Inleiding { text-align: center; padding: 110px; background: linear-gradient(0deg, transparent, #454545, transparent); }
        
        .highlight-carousel-container { width: 90%;  margin: -80px auto 50px; }
        .swiper-slide { background: white; padding: 0 10px 10px; border-radius: 20px;
            .productCard img { display: block; width: 70% !important; margin: 0 auto 10px; }
            .productTitle { font-size: 16px; line-height: 20px; height: 40px; overflow: hidden; }
            .productCard ul { height: 90px; overflow: hidden; font-size: 12px; line-height: 19px; }
            .ratingsfalse { display: none; }
            .ratingstrue { display: flex; width: 50%; margin: 0 -4px -7px; transform: scale(0.9); }
            .productInfo { display: flex; gap: 10px; align-items: flex-end; justify-content: right; }
            .productPrices { width: 70%; text-align: right; }
            .productPrice { font-size: 25px !important; font-weight: 700; color: #9f0707; margin: 0; }
            .historyPrice { height: 30px; margin: 0; text-decoration-line: line-through; font-size: 20px; }
            .swiper-nav-button-prev, .swiper-nav-button-next { padding: 10px; margin: 0 5px !important; }
        }
        #Assortiment .row:nth-child(even) { flex-direction: row-reverse; }
        #Assortiment .row { align-items: center; .SeoTekstvlak { padding: 30px; background: #0000007a; border: 3px solid grey; box-shadow: 0 0 0 6px black; margin: 0 -20px; 
                       backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
        }
        
        #ssd { background: linear-gradient(0deg, black 40%, transparent 50%), url(https://www.alternate.nl/download/b2c_nl/pic/merken/klevv/Portal/SSD.jpg?v=1); }
        #bolt { background: linear-gradient(0deg, black 40%, transparent 50%), url(https://www.alternate.nl/download/b2c_nl/pic/merken/klevv/Portal/Bolt.jpg?v=1); }
        #fit { background: linear-gradient(0deg, black 40%, transparent 50%), url(https://www.alternate.nl/download/b2c_nl/pic/merken/klevv/Portal/FIT.jpg?v=1); }
        #urbane { background: linear-gradient(0deg, black 30%, transparent 45%), url(https://www.alternate.nl/download/b2c_nl/pic/merken/klevv/Portal/Urban.jpg?v=1);  }
        #cras { background: linear-gradient(0deg, black 40%, transparent 50%), url(https://www.alternate.nl/download/b2c_nl/pic/merken/klevv/Portal/CRAS.jpg?v=1); }
        #laptopgeheugen { background: linear-gradient(0deg, #313131 30%, transparent 60%), url(https://www.alternate.nl/download/b2c_nl/pic/merken/klevv/Portal/Laptop.jpg?v=1); }
        
        #Assortiment .row div:has(.ItemAfbeelding) { position: relative; }
        #Assortiment .row div:has(.ItemAfbeelding) a { border: 4px solid #ffae00; background: #c18400; position: absolute; width: 150px; height: 150px;  border-radius: 100%; align-content: center; 
            font-size: 25px; font-weight: 600; text-transform: uppercase; }
        #Assortiment #bolt div:has(.ItemAfbeelding) a { right: 30px; top: 340px; transform: rotate(5deg); }
        #Assortiment #fit div:has(.ItemAfbeelding) a { right: 460px; top: 340px; transform: rotate(347deg); }
        #Assortiment #urbane div:has(.ItemAfbeelding) a { right: 50px; top: 270px; transform: rotate(10deg); }
        #Assortiment #cras div:has(.ItemAfbeelding) a { right: 120px; top: 120px; transform: rotate(352deg); }
    }

    @media screen and (max-width: 667px) { /* Mobile */
        .modal-dialog { max-width: 90% !important; margin-top: 130px;
            iframe { width: 100%; height: 100%; }
        }
        #PortalPagina {
            h1 { font-size: 25px; }
            h2 { font-size: 36px; line-height: 29px; margin-bottom: 15px; }
            p { font-size: 14px; line-height: 23px; }
            #PortalMenu { .navbar-collapse .navbar-nav .nav-item { border-right: none; } }
            .Inleiding { padding: 40px 20px; }
            #Assortiment .row:nth-child(odd) { flex-direction: column; }
            #Assortiment .row { background-size: 200%;
                .SeoTekstvlak { width: 93%; margin: 0 auto; }
                .highlight-carousel-container { width: 100%; margin: 30px 0; }
            }
            #Assortiment .row div:has(.ItemAfbeelding) a { top: -20px !important; right: 0px !important; transform: rotate(15deg) scale(0.8) !important; }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
        #PortalPagina {
            .Inleiding { padding: 40px; }
            .highlight-carousel-container { width: 100%; margin: 30px auto 20px; }
            #Assortiment #cras div:has(.ItemAfbeelding) a { right: 170px; top: 200px; transform: rotate(352deg) scale(0.8); }
            #Assortiment #urbane div:has(.ItemAfbeelding) a { top: 190px; }
            #Assortiment #bolt div:has(.ItemAfbeelding) a { top: 190px; }
        }
    }