@font-face {font-family: Poppins; src: url(https://www.alternate.nl/download/b2c_nl/pic/fonts/Poppins-Regular.ttf); }

    .skyscraper { display: none; }
    #mainContent { background: #155fb8; }
#PortalPagina .row {
    background: #12509c;
    padding: 30px;
    text-align: center;
    color: white; font-family: Poppins;
}


    /* Vlakverdeling */ 
    #PortalPagina { position: relative; background: #133654 url("https://www.alternate.nl/download/b2c_nl/pic/themapagina/puzzel-campagne/achtergrond.jpg"); width: 100%; overflow: hidden; box-shadow: 0 0 200px #000000;}
    #PortalPagina header { margin-bottom: 15px; }

#nlMenu ul {  display: flex; justify-content: center; }
#nlMenu ul li { list-style: none; }
#nlMenu ul li a { background: white;  padding: 13px 140px; color: black; border: 3px solid #0f4382; }

    /* TopSellers*/
    .Topsellers { padding: 0 3em; }
    .Topsellers h2 { color: white; text-align: center; font-size: 50px; font-weight: 200; }
    .Topsellers .product { padding: 1em !important; }
    .Topsellers .product a { display: block; text-align: center; padding: 10px; border: 5px solid #244264; border-radius: 15px; background: white; overflow: hidden; margin: 1em 0; }
    .Topsellers .product a:hover { text-decoration: none; opacity: 0.8;}
    .Topsellers .product a .productTitle { font-size: 16px; height: 40px; text-align: center !important; color: black; text-align: -webkit-right; overflow: hidden; }
    .Topsellers .prijzen { text-align: -webkit-right; }
    .Topsellers .actieprijs { background: #0a8eb5; text-align: center; color: white; font-size: 28px; font-weight: 800; width: fit-content; padding: 2px 25px; }
    .Topsellers .msrp { background: #15323a; width: fit-content; padding: 5px 18px 4px; transform: translate(5px, 12px) rotate(3deg); color: white; font-size: 12px; margin-top: -43px; text-decoration: line-through; } 
    .Topsellers .msrp:empty { margin: -10px; background: none !important; }
    .uitverkocht { filter: grayscale(1); pointer-events: none;}
    .uitverkocht .actieprijs { background: #b95a5a !important; transform: rotate(-9deg) scale(1.4) translate(-1px, -18px); margin: -3px; }

    /* Categorie*/
    #Categorie .container { padding: 0 40px; }
    #Categorie .row { justify-content: center; }
    #Categorie .card { border: none; background: none; transform: scale(0.95); transition: .15s linear; }
    #Categorie .card:hover { transform: scale(1); transition: .15s linear; }
    #Categorie .col-sm-6, #Categorie .col-sm-8, #Categorie .col-sm-12 { padding: 0; }
    #Categorie .Titelbanner { margin: 25px 0 30px -120px; box-shadow: 30px 0 10px black; }
    
    .Topsellers, #Promos, #Merken { margin: 4em 2em; border: 0.4em solid #ff8100; border-radius: 1em; box-shadow: 0 0 20px #081b2e; }
    .Topsellers .Titelbanner { transform: translate(-15px, -33px); }
    
    #Promos, #Merken { width: 96%; }
    #Promos .Titelbanner { margin: -10px 0 30px -118px; }

    /* Merken*/
    #Merken { flex-flow: wrap; justify-content: center; padding: 0 50px; }
    #Merken .row { justify-content: center; }
    #Merken .Titelbanner { margin: -50px 0 30px -165px; box-shadow: 30px 0 10px black; }
    #Merken a { display: flex; width: 22%;  margin: 13px; background: linear-gradient(45deg, #f9f9f9, lightgrey); border-radius: 10px; border: 1px solid white; transition: .15s linear;}
    #Merken a:hover { transform: scale(1.1); transition: .15s linear;}
    #Merken a img { object-fit: contain; margin: -9px 12px; }
    #Merken a img:nth-child(1) { margin: 15px -4px -36px -15px; }
    
    .actieVoorwaarden { background: #7a0202; padding: 20px 30px; color: #e7c5c5; }

    @media screen and (max-width: 667px) { /* Mobile */
        #PortalPagina { width: 100%; margin: 0; }
        #PortalPagina p { font-size: 14px; line-height: 23px;}
        #PortalPagina img { width: 100%; }
        .Topsellers, #Promos, #Merken { margin: 10px; }

        #Categorie .container { padding: 0; }
        #Categorie .row {padding: 5px 15px; }
        #Categorie .card { width: 100%; }
        #Categorie .card img { width: 100%; }
        #Categorie .Titelbanner { transform: scale(2.5) translate(22px, -8px); }

        .Topsellers h2 { font-size: 30px; }
        .Topsellers .product { padding: 0em !important; }
        .Topsellers .product a img { width: 60% !important; }
        .Topsellers .product a { width: 89%; margin: 10px; }
        .Topsellers .actieprijs { font-size: 30px !important; padding: 10px 13px; }
        .Topsellers .col-6 { flex: 0 0 100%; max-width: 100%; }
        
        #Promos .Titelbanner { transform: scale(1.5) translate(41px, 1px); }
        #Merken .Titelbanner { transform: scale(2.1) translate(39px, 7px); }
        
        #Merken a { width: 42%; margin: 14px; }
        #Merken a img:nth-child(1) { width: 44%; }
        #Merken a img:nth-child(2) { margin: 0; padding: 10px; }

#nlMenu ul { padding: 0; }
#nlMenu ul li { margin: 13px 0; }
#nlMenu ul li a {  padding: 13px 29px; }
    }

    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */ 
        #PortalPagina { width: 100%; margin: 0; }
        #PortalPagina img { width: 100%; }
        .Topsellers { padding: 20px 15px 90px; }
        .Topsellers h2 { font-size: 30px; }
        .Topsellers .product a img { width: 90%; }
        .Topsellers .product a { width: 100%; margin: 0; }
        .Topsellers .actieprijs { font-size: 18px !important; padding: 8px 13px; }
        
        #Promos .Titelbanner { transform: scale(1.5) translate(41px, 1px); }
        .Topsellers .Titelbanner { transform: translate(55px, -33px)scale(1.5); }
        #Merken .Titelbanner { transform: scale(1.9) translate(39px, 7px); }
        #Merken a { width: 30%; }

#nlMenu ul li a { padding: 13px 65px;} 
    }