@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', sans-serif;}
    #PortalPagina img { width: 100%; }
    #PortalPagina h2 { font-size: 40px; line-height: 40px; }
    #PortalPagina p { font-size: 16px; line-height: 24px; }
    #PortalPagina .Tekstvlak a { display: inline-block;  background: #ad0109; padding: 10px 15px; color: white; border-radius: 15px; }
    #PortalPagina .Tekstvlak a:hover { background: #71060c; }

    /* Header */
    .OmslagFoto { background: url(https://www.alternate.nl/download/b2c_nl/pic/Bedrijfspagina/Zakelijke-pagina-b2b/header-bg.jpg); height: 35em; display: flex; align-items: center; justify-content: center; }
    .OmslagFoto h1 { color: white; font-size: 80px; text-transform: uppercase; padding: 0 10%; text-align: center; }

    /* Vlakverdeling */
    #Inleiding { 
        padding: 60px 0;
        .SeoTekstvlak { padding: 0 0 40px; }
        h3 { font-size: 28px; margin: 20px; }
        .Tekstvlak p { height: 10em; }
    }
    
    #ITHardware {
        background: #efefef; padding: 60px; border-radius: 20px;
        .Tekstvlak { padding: 40px; }
        h4 { font-size: 20px; text-transform: uppercase; padding: 5px 0; }
        .row:nth-child(2n) { gap: 10px; justify-content: center;
            .Tekstvlak { width: 32%; padding: 20px; background: white; border-radius: 15px; }
            .Tekstvlak i { font-size: 40px; padding: 10px; }
            .Tekstvlak p { height: 70px; }
            .Tekstvlak a { padding: 5px 10px; border-radius: 10px; font-size: 12px; }
            ul { display: flex; flex-flow: wrap; gap: 10px; justify-content: center; list-style: none; padding: 0; }
            
            #Software { width: 65% !important; }
        }
        .modal-dialog { max-width: 70% !important; margin-top: 20%; }
        .modal-body ul { justify-content: left !important; text-align: left; font-size: 16px; }
        .modal-body ul a { background: none !important; color: purple !important; font-size: inherit !important; padding: inherit !important; }
    }
    
    #Server { 
        padding: 60px; background: #efefef; margin: 30px 0; border-radius: 20px;
        .SeoTekstvlak { padding: 30px 0; }
        
        #ServerWaarom{
            background: white; padding: 0 30px 20px;
            .text-center .SeoTekstvlak { width: 100% !important; }
            .row:nth-child(even) { background: #efefef; }
            .row:nth-child(odd) { flex-direction: row-reverse; }
            .row div:nth-child(odd) { width: 30%; }
            .row div:nth-child(even) { width: 70%; }
            .SeoTekstvlak { padding: 60px; align-self: center; }
            .ItemAfbeelding { padding: 20px; display: flex; align-items: center; }
        }
    }
    
    #Diensten { 
        padding: 60px; background: #efefef; margin: 30px 0; border-radius: 20px;
        .SeoTekstvlak { padding: 30px 0; }
        
        #DienstenOpLocatie, #DienstenOnderhoud{ background: white; padding: 0 30px 20px;
            .text-center .SeoTekstvlak { width: 100% !important; }
            .SeoTekstvlak { padding: 60px; align-self: center; }
            .ItemAfbeelding { padding: 20px; display: flex; align-items: center; }
        }
        
        #DienstenOnderhoud .row { background: #efefef !important; }
    }

    #ZakelijkeServer { z-index: 3; position: relative; 
        .row { flex-direction: row-reverse; align-items: center; background: #ad0109; color: white; padding: 60px 20px; border-radius: 20px; }
        .ItemAfbeelding img { height: 540px; object-fit: cover; border-radius: 0 15px 15px 0; margin: -60px 35px; }
        li { font-size: 16px; }
    }
    
    #Contact { position: sticky; bottom: 0; z-index: 2; padding: 30px 10px 0; background: white; border-radius: 20px; box-shadow: 0 -60px 80px white;
        .Opties { display: flex;justify-content: center; gap: 10px;
            a { display: flex; padding: 10px; color: black; background: #efefef; border-radius: 15px; }
            svg { width: 60%; height: -webkit-fill-available; margin: 10px; }
            svg, path { fill: #ad0109; }
            p { margin: 0; }
            span { font-size: 13px; }
        }
    }

    @media screen and (max-width: 667px) { /* Mobile */
        #PortalPagina h2 { font-size: 20px; line-height: 25px; }
        
        .OmslagFoto { height: 16em; background-size: cover; }
        .OmslagFoto h1 { font-size: 30px; }
        
        #Inleiding .SeoTekstvlak { padding: 0 20px; }
        #Inleiding .Tekstvlak p { height: auto; }
        #Inleiding .col-lg-4.col-sm-4.Tekstvlak { padding: 20px; }
        
        #ITHardware { padding: 10px; 
            .Tekstvlak { padding: 10px; }
            .row:nth-child( even) { margin: 0; 
                #Software { width: 90% !important; }
            }
            .row:nth-child(2n) .Tekstvlak { width: 90%; }
            .row:nth-child(2n) .Tekstvlak p { height: auto; }
            .modal-dialog { max-width: 100% !important; margin-top: 40%; }
            .modal-body ul { font-size: 14px; }
        }
        
        #Server {
            padding: 10px;
            #ServerWaarom {
                .SeoTekstvlak { padding: 10px; }
                .row div:nth-child(odd), .row div:nth-child(even) { width: 100%; }
                .ItemAfbeelding { padding: 10px 5px; }
                .ItemAfbeelding img { height: auto; }
            }
        }
        
        #Diensten { padding: 10px; }
        #Diensten {
            #DienstenOpLocatie, & #DienstenOnderhoud {
                .SeoTekstvlak { padding: 10px; }
            }
        }
        
        #ZakelijkeServer {
            .row { padding: 10px; }
            .row div { width: 100%; }
            .ItemAfbeelding img { height: 220px; border-radius: 15px; margin: 15px 0; }
        }
        
        #Contact { position: inherit; box-shadow: none;
            .Opties { flex-direction: column; padding: 0;
            }
        }
    }

   @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
        .OmslagFoto { height: 14em; background-size: cover; }
        .OmslagFoto h1 { font-size: 50px; }
        #Inleiding .col-sm-4 { width: 100%; padding: 20px 20px; }
        #Inleiding .Tekstvlak p { height: auto; }
        #ITHardware .row:nth-child(2n) .Tekstvlak { width: 48%; }
        #ITHardware .row:nth-child(2n) .Tekstvlak p { height: auto; }
        #ITHardware .modal-dialog { max-width: 90% !important;  margin-top: 10%; }
        #ITHardware .modal-body ul { font-size: 14px; }
        #Server #ServerWaarom .SeoTekstvlak { padding: 20px; }
        #DienstenOpLocatie .ItemAfbeelding, #DienstenOnderhoud .ItemAfbeelding { width: 40%; margin: 0 auto -60px; }
        #ZakelijkeServer .ItemAfbeelding img { border-radius: 15px; margin: 0; }
        #Contact { box-shadow: none; }
        #Contact .Opties a { width: 33%; }
    }