@font-face { font-family: Poppins; src: url(https://www.alternate.nl/download/b2c_nl/pic/fonts/Poppins-Regular.ttf); }
    #PortalPagina { font-family: Poppins; background: #00152a; color: #fff; overflow: hidden; }
    #PortalPagina img { width: 100%; }
    #PortalPagina h1 { font-size: 30px; }
    #PortalPagina h2 { font-size: 25px; line-height: 40px; }
    #PortalPagina p { font-size: 16px; line-height: 24px; }
    
    .modal-content { color: black; }
    .Videos iframe { aspect-ratio: 16 / 9; width: 100%; }
    .VideoBTN { position: absolute; width: 240px; right: 30px; top: 300px; transform: rotate(15deg); }
    .pulse { animation-duration: 2s; animation-delay: 0.5s; animation-iteration-count: infinite; -webkit-animation-name: pulse; animation-name: pulse; }
    @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);} }
    @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);} 50% {-webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05);} to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }

    #PortalMenu { position: relative; z-index: 2; width: 70%; margin: -27px auto; }
    #PortalMenu a { display: block; width: fit-content; margin: 0 5px; padding: 10px 30px; color: #fff; transform: skewX(-9deg); border: 5px solid #102f3c; box-shadow: 0 0 0 4px #ffffff73; background: linear-gradient(24deg, #4db678e0, #28a3b6e0, #3c2432e0); font-size: 16px; }
    #PortalMenu a:hover { background: linear-gradient(0deg, #65592f, #f8d96b); }
    #PortalMenu a:last-child {  background: linear-gradient(24deg, #679a0c, #76b900, #4f6f28); }
    
    /* Uitklapvragen */
    .Uitklapmenu { width: 100% !important; text-align: left; padding: 5px; cursor: pointer; }
    .UitklapVlak { display: none;}
    .UitklapmenuTitel h2 { font-size: 20px !important; }
    .Pijltje { float: left; background: url(/pix/navigation/treeArrowRight.png) no-repeat; width: 14px; height: 26px; background-position: left 10px; cursor: pointer; }
    .Pijltje.flip { background-position: left 14px; transform: rotate(90deg); background-position-x: 5px; }
    
    .Inleiding { width: 80%; background: #c6c6c6 url(https://www.alternate.nl//download/b2c_nl/pic/merken/thunderstorm-by-alternate/mainpage/2025/InleidingBG.png?v=1) no-repeat center; background-blend-mode: multiply; margin: 80px auto 0;
                transform: skewX(-5deg); border: 8px solid #102f3c; box-shadow: 0 0 0 5px #ffffff73; }
    .Inleiding .row { align-items: center; transform: skewX(5deg); }
    .Inleiding .SeoTekst { padding: 60px; color: white; }
    .Inleiding .SeoTekst h2 { font-size: 35px !important; text-transform: uppercase; }
    .Inleiding .SeoTekst p span { font-size: 30px; line-height: 40px; color: #77b901; }
    .Inleiding .ItemAfbeelding { width: 80%; margin: 0 0 -60px 120px; }
    .Inleiding .Videos iframe { border: 2px solid #606060; border-radius: 5px; box-shadow: 0 0 20px 10px #00000073; margin: -30px; }
    
    #Pro, #Limited { background: #020912; }
    #Xtreme .SeoTekstvlak h2 span, #Xtreme .SeoTekstvlak h2 span span, #Xtreme .promoCards h3 span, #Xtreme .InformatieVlak h3 span { color: #bc0d15; }
    #Pro .SeoTekstvlak h2 span, #Pro .SeoTekstvlak h2 span span, #Pro .promoCards h3 span, #Pro .InformatieVlak h3 span { color: #0cccef; }
    #Pro.ThunderstormSerie .row .ItemAfbeelding img { width: 125% !important; }
    #Starter .SeoTekstvlak h2 span, #Starter .SeoTekstvlak h2 span span, #Starter .promoCards h3 span, #Starter .InformatieVlak h3 span { color: #27c017; }
    #Limited .SeoTekstvlak h2 span, #Limited .SeoTekstvlak h2 span span, #Limited .promoCards h3 span, #Limited .InformatieVlak h3 span { color: #f5d72e; }
    #Limited.ThunderstormSerie .row .ItemAfbeelding img { margin: 0 -38px; }

    .ThunderstormSerie { padding: 0 0 40px; }
    .ThunderstormSerie .row { align-items: flex-end; }
    .ThunderstormSerie .row .Badges img { width: 50% !important; }
    .ThunderstormSerie .SeoTekstvlak { position: relative; padding: 60px; }
    .ThunderstormSerie .SeoTekstvlak h2 { font-size: 40px; line-height: 50px; font-weight: 100; text-transform: uppercase; }
    .ThunderstormSerie .SeoTekstvlak h2 span { font-weight: 900; }
    .ThunderstormSerie .SeoTekstvlak h3 { font-size: 60px; line-height: 60px; text-transform: uppercase; margin-bottom: 30px; }
    .ThunderstormSerie .row img { width: 130% !important; }
    .ThunderstormSerie .carousel-inner { width: 80%; margin: 100px 0; padding: 8px; border: 10px solid #f8d96b; border-radius: 50px; box-shadow: 0 0 20px #32b6b7; transform: skewX(10deg); }
    .ThunderstormSerie .carousel .Afbeelding { border-radius: 35px; overflow: hidden; }
    .ThunderstormSerie .carousel .Afbeelding img { width: 100% !important; margin: 0 !important; transform: skewX(-10deg) scale(1.2); height: 410px; object-fit: cover; }
    .ThunderstormSerie .carousel-control-prev, .ThunderstormSerie .carousel-control-next { width: 50px; height: 50px; border-radius: 50%; background: #135292; border: 5px solid #00152a; box-shadow: 0 0 0 4px #0cccef; opacity: 1; }
    .ThunderstormSerie .carousel-control-prev { top: 400px; left: -35px; }
    .ThunderstormSerie .carousel-control-next { top: 30px; right: 85px; }
    
    .InformatieVlak h3 { font-size: 35px !important; line-height: 40px !important; }

    /* Button met animatie */
    .voltage-button { position: relative; margin-bottom: 100px; }
    .voltage-button a { display: block; width: fit-content; padding: 10px 20px; color: #fff; background: #0D1127; border: 2px solid #5978F3; border-radius: 5px; transition: background 0.3s; }
    .voltage-button a:hover { cursor: pointer; background: #0F1C53; }
    .voltage-button a:hover + svg { opacity: 1; }
    .voltage-button svg { display: block; width: 41%; height: 60px; margin: -52px -3px; pointer-events: none; opacity: 0; transition: opacity 0.2s 0.1s; }
    .voltage-button svg path { stroke-dasharray: 100; filter: url('#glow'); }
    .voltage-button .line-1 { stroke: #f6de8d; animation: spark-1 8s linear infinite; }
    .voltage-button .line-2 { stroke: #6bfeff; stroke-dashoffset: 500; animation: spark-2 8s linear infinite; }

    .promoCards { margin: 0 50px; justify-content: flex-end; }
    .promoCards h3 { text-align: center; padding: 20px; font-size: 35px; text-transform: uppercase; }
    .promoCards .highlight-carousel-container { position: relative; padding: 0; }
    .promoCards .swiper { position: static; user-select: none; }
    
    .promoCards .product { background: white; border: 2px solid #e3e3e3; border-radius: 10px; margin: 10px; display: block; padding: 10px; position: relative; overflow: hidden; }
    .promoCards .imgbox img { padding: 10px 30px 110px; width: 100% !important; margin: 0; }
    .promoCards .Uitverkocht .imgbox::before, .promoCards .Binnenkort .imgbox::before { position: absolute; width: 80%; transform: rotate(-30deg); text-align: center; font-weight: 900; 
             left: -45px; top: 26px; text-transform: uppercase; }
    .promoCards .Uitverkocht .imgbox::before { content: "Niet leverbaar"; background: #a21616; border: 3px solid #e3000e; }
    .promoCards .Binnenkort .imgbox::before { content: "Verwacht"; background: #135292; border: 3px solid #0cccef; }
    .promoCards .Infoblok { position: absolute; left: 0; bottom: -200px; background: linear-gradient(0deg, #e9e9e9 50%, #ffffff66);  transition: .5s; padding: 0 10px !important;  backdrop-filter: blur(3px); color: black; }
    .promoCards .product:hover .Infoblok { bottom: 0 }
    .promoCards .productTitle { font-size: 12px; overflow: hidden; color: var(--bs-body-color); height: 30px; margin-top: 10px; padding: 0; text-transform: inherit; }
    .promoCards .prijzen { display: flex; flex-direction: column; justify-content: flex-end; text-align: right; height: 4em; padding-bottom: 10px !important; }
    .promoCards .historyPrice{ color: black; text-decoration: line-through; margin: 0; }
    .promoCards .actieprijs { color: #ad0109; font-size: 1.5rem !important; font-weight: 900; margin: 0; }
    .promoCards .Specificaties label { font-weight: 900; }
    .promoCards #bulletList ul { padding: 0; }
    .promoCards #bulletList li { font-size: 12px; margin: -7px 0; list-style: none; }
    .promoCards #bulletList li:before { content: "> "; font-weight: 900; font-size: 22px; line-height: 25px; color:#e595dc; position: relative; top: 3px; }
    .promoCards .Chipset { display: none; }
    .promoCards .btn.btn-outline-success { margin: 0; }
    .promoCards .btn { margin: 10px 0; width: 100%; border-radius: 5px; }
    
    .promoCards .product:not(:has(li)) .Infoblok { bottom: -55px !important; }
    .promoCards .product:not(:has(li)) .Specificaties { display: none; }
    .promoCards .product:not(:has(li)):hover .Infoblok { bottom: 0 !important; }
    .promoCards .product:not(:has(li)):hover #bulletList { margin: -30px; }
    
    .ProductSlider .btn-outline-gray-light { background: white; margin: -9px; width: auto; }
    .swiper-button-prev, .swiper-button-next { width: 35px; height: 35px; padding: 0 9px; top: 145px; background: #135292; color: #fff; border-radius: 50%; border: 3px solid #00152a; box-shadow: 0 0 0 2px #0cccef; }
    .swiper-button-prev, .swiper-rtl .swiper-button-next { left: -46px !important; }
    .swiper-button-next, .swiper-rtl .swiper-button-prev { right: -46px !important; }
    .swiper-button-prev:after, .swiper-button-next:after, .swiper-rtl .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { transform: scale3d(0.5, 0.4, 0.5); }
    .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; }
    .carousel-indicators { bottom: -50px; left: -10%; }
    .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 100%; border: none; margin: -20px 6px; background: #f8d96b; }
    
    @media (max-width: 920px) { .swiper-button-prev, .swiper-button-next { top: 155px; } .promoCards { margin: 20px 50px; } }
    @media (max-width: 600px) { .promoCards { margin: 20px; } }
    @media (max-width: 450px) { .swiper-button-prev, .swiper-button-next { top: 130px; } }

    @keyframes spark-1 { to { stroke-dashoffset: -1000; } }
    @keyframes spark-2 { to { stroke-dashoffset: -500; } }
    @keyframes fly-up { 0% { opacity: 0; transform: translateY(0) scale(0.2); } 5% { opacity: 1; transform: translateY(-1.5rem) scale(0.4); } 10%,100% { opacity: 0; transform: translateY(-3rem) scale(0.2); } }
    @keyframes fly-down { 0% { opacity: 0; transform: translateY(0) scale(0.2); } 5% { opacity: 1; transform: translateY(1.5rem) scale(0.4); } 10%,100% { opacity: 0; transform: translateY(3rem) scale(0.2); } }
    
    #ExtraInfo { background: url(https://www.alternate.nl//download/b2c_nl/pic/merken/thunderstorm-by-alternate/mainpage/2025/InleidingBG.png?v=1) center/cover no-repeat; padding: 100px; }
    #ExtraInfo .SeoTekstvlak { text-align: center; padding: 60px 0; }
    #ExtraInfo .row:nth-child(1):has(.SeoTekstvlak) img { display: block; width: 23%; border: 5px solid #ffffff40; padding: 10px; margin: 10px; border-radius: 15px; }
    #ExtraInfo .card h3 { transform: skewX(10deg); }
    
    #ExtraInfo .card { margin: 10px; padding: 4px; color: #fff; border: 5px solid #102f3c; border-radius: 30px; box-shadow: 0 0 0 4px #ffffff73; background: linear-gradient(90deg, #4db67870, #28a3b670, #3c243270); 
           overflow: hidden; transition: 1s; }
    #ExtraInfo .card.Klein { width: 23%; margin: 10px auto; }
    #ExtraInfo .card img { border-radius: 24px; }
    #ExtraInfo .card.Groot:hover { transform: scale(0.95); }
    
    #BenchmarksInfo { width: 100% !important; transform: skewX(0deg) !important; background: black !important; text-align: center; border: 8px solid #102f3c !important; border-radius: 30px !important; overflow: hidden;}
    #BenchmarksInfo picture { margin-bottom: -270px; z-index: -1; }
    #BenchmarksInfo h2 { color: #4ab912; padding: 0 160px 10px; z-index: 2; text-transform: uppercase; }
    #BenchmarksInfo img { width: 102% !important; margin: -30px -11px !important; transform: skewX(0deg) scale(1) !important; }
    #BenchmarksInfo ul li { list-style: none;  width: 33.33%; padding: 10px; margin-top: 40px; }
    #BenchmarksInfo ul li:nth-child(2) { border: 4px solid #4edf0240; border-top: none; border-bottom: none; }
    #BenchmarksInfo ul i, #BenchmarksInfo ul em { display: block; margin: -60px 0 38px; font-size: 11px; color: #c1c1c1; }
    #BenchmarksInfo ul p span { color: #3ca001; font-weight: 900; margin: 0 5px 0 0; }
    #BenchmarksInfo ul li img { padding: 0 !important; margin-bottom: 10px !important; }
    
    #VeelgesteldeVragen { text-align: center; }
    #VeelgesteldeVragen .SeoTekstvlak { margin: 10px; padding: 40px; color: black; align-items: center; text-align: center; background: linear-gradient(#f3f3f3, #adadad); position: relative; }
    #VeelgesteldeVragen .Bout { width: 20px !important;  height: 20px !important; position: absolute; }

    @media (max-width: 667px) { /* Mobiel */
      #PortalPagina h1 { font-size: 25px; }
      #PortalPagina p { font-size: 14px; line-height: 23px; }
      .VideoBTN, #PortalMenu { display: none; }
      .voltage-button { margin-bottom: 60px; }
      
      .Inleiding { width: 100%; transform: skewX(0deg); margin: 0; }
      .Inleiding .row { transform: skewX(0deg); }
      .Inleiding .SeoTekst { padding: 30px; }
      .Inleiding .ItemAfbeelding { display: none; }
      .Inleiding .Videos iframe { display: block; margin: -30px auto 20px; width: 90%; height: auto; }
      
      .ThunderstormSerie .SeoTekstvlak { padding: 20px; }
      .ThunderstormSerie .row img { width: 100% !important; margin: 0 0 -45px; }
      .ThunderstormSerie .SeoTekstvlak h3 { font-size: 45px; line-height: 48px; margin-bottom: 14px; }
      #Pro.ThunderstormSerie .row .ItemAfbeelding img { width: 100% !important; }
      #Limited.ThunderstormSerie .row .ItemAfbeelding img { margin: 0 0 -45px; }
      
      .ThunderstormSerie .carousel-inner { width: 70%; margin: 0 auto 40px; height: 290px; padding: 8px; border: 4px solid #f8d96b; border-radius: 34px;  transform: skewX(10deg); }
      .ThunderstormSerie .carousel .Afbeelding { border-radius: 25px; }
      .ThunderstormSerie .carousel .Afbeelding img { margin: 0 !important; height: 19em; }
      .ThunderstormSerie .carousel-control-prev, .ThunderstormSerie .carousel-control-next { width: 30px; height: 30px; border: 6px solid #00152a; box-shadow: 0 0 0 2px #0cccef; }
      .ThunderstormSerie .carousel-control-next { right: 20px; }
      .ThunderstormSerie .carousel-control-prev { top: 90%; left: 20px; }
      
      .promoCards { flex-direction: column !important; }
      .promoCards h3 { padding: 30px 10px 0; }
      .ThunderstormSerie .promoCards .imgbox img { margin: 0; padding: 10px;}
      .promoCards .Infoblok { position: relative; bottom: 0; }
      
      #ExtraInfo { padding: 10px; }
      #BenchmarksInfo picture { margin-bottom: 0; }
      #BenchmarksInfo h2 { padding: 0; }
      #BenchmarksInfo .row { flex-flow: column; }
      #BenchmarksInfo ul li { width: 100%; }
      #BenchmarksInfo ul li:nth-child(2) { border: none; }
      
      #ExtraInfo .SeoTekstvlak .row { overflow: scroll; flex-flow: row; padding: 0 20px; }
      #ExtraInfo .card.Klein { width: 70%; margin: 10px; }
      #ExtraInfo .SeoTekstvlak { padding: 60px 20px; }
      
      #VeelgesteldeVragen .SeoTekstvlak { padding: 20px; }
      .UitklapmenuTitel h2 { font-size: 13px !important; line-height: 18px !important; }
    }
    
    @media (min-width: 768px) and (max-width: 1032px) { /* Tablet */
      #PortalPagina { overflow: hidden; }
      #PortalPagina h2 { font-size: 23px; line-height: 20px; }
      #PortalPagina p { font-size: 14px; line-height: 20px; }
      .VideoBTN { width: 170px; right: 10px; top: 1.5%; }
      #PortalMenu { width: 90%; margin: 0 auto; }
      #PortalMenu a { width: 20%; text-align: center; margin: 0 auto;  padding: 6px; font-size: 14px; }
      .ThunderstormSerie .row:nth-child(2) { flex-direction: column; }
      .ThunderstormSerie .row .Badges img { float: left; }
      .ThunderstormSerie .carousel-inner { width: 90%; height: 100%; aspect-ratio: 8 / 9; }
      .promoCards.row { flex-direction: column; margin: 0; }
      .promoCards #bulletList li { font-size: 11px; }
      .ThunderstormSerie .carousel-control-next { top: 10px; right: 8%; }
      .ThunderstormSerie .promoCards .imgbox img { width: 100% !important; margin:0 0 13em !important; }
      .promoCards .Infoblok { bottom: 0; }
      .promoCards .Uitverkocht .imgbox::before, .promoCards .Binnenkort .imgbox::before { font-size: 11px; left: -40px; }
      .promoCards .btn.btn-outline-success { font-size: 12px; }
      
      #ExtraInfo { padding: 20px; }
      #BenchmarksInfo img { width: 100% !important; margin: -20px 0 80px !important; }
      #BenchmarksInfo h2 { padding: 10px; height: 30px; }
      #VeelgesteldeVragen .SeoTekstvlak { margin: 0; }
      .UitklapmenuTitel h2 { font-size: 15px !important; }
      
      .Inleiding { width: 90%; }
      .Inleiding .ItemAfbeelding { display: none; }
      .Inleiding .Videos iframe { margin: -30px 0 20px 30px; }
      .Videos iframe { width: 90%; }
      
      .ThunderstormSerie .row { flex-direction: row-reverse; }
      .ThunderstormSerie .col-lg-6:has(.ItemAfbeelding) { margin: 0 0px 0 -70px; width: 52%; }
      .ThunderstormSerie .col-lg-6:has(.SeoTekstvlak) { width: 53%; }
      .InformatieVlak .row { flex-direction: row; align-items: center; }
      .InformatieVlak .row .col-lg-6 { width: 50%; }
      .InformatieVlak .row .col-lg-6 .SeoTekstvlak { padding: 20px; }
      .ThunderstormSerie .SeoTekstvlak { padding: 0; }
      .ThunderstormSerie .SeoTekstvlak h3 { font-size: 55px; margin-bottom: 10px; }
      
      .ThunderstormSerie .carousel-control-prev { top: 320px; left: 5px; }
      
    }