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

#mainContent { background: #062806; }
    #PortalPagina { background: url(https://www.alternate.nl/download/b2c_nl/pic/themapagina/tuin-klussen/2022/green-grass-field-background.jpg); background-size: 40%; background-repeat: round; box-shadow: 0 0 40px #095e00;  font-family: Poppins; }
    #PortalPagina h1 { FONT-SIZE: 30px; }
    #PortalPagina p { font-size: 16px; line-height: 24px; }
    
    .Inleiding { padding: 60px; text-align: center; margin: -7em 0; color: white;}
    .Titelbanner { text-align: center; padding: 30px; background: #202020; margin: 7em 0 -7px; }
    .Titelbanner h2 { margin: 0; font-size: 30px; text-transform: uppercase; color: white;}
    
    .Tekstvlak { margin: 7em -70px 0 -60px; align-self: center; padding: 50px; }
    .Tekstvlak h2 { font-size: 28px; text-transform: uppercase; }
    .Tekstvlak a { border: 3px solid #2a7212; padding: 10px; background: #6da75b; border-radius: 10px; color: white; margin: 2px 0; display: inline-flex; width: fit-content; }
    
    .ItemAfbeelding img {  width: 100%; border: 15px solid white;  box-shadow: 0 0 10px black; margin: 3em 0 -6em; }
    
    #PortalPagina  .row:nth-child(odd) .ItemAfbeelding img {  transform: rotate(-4deg)scale(0.9) }
    
    #PortalPagina  .row:nth-child(even) { flex-direction: row-reverse; }
    #PortalPagina  .row:nth-child(even) .ItemAfbeelding img {  transform: rotate(4deg)scale(0.9)translate(0, 10px);}

    /* Menu */
    #PortalMenu { width: 80%; margin: -40px auto 86px; }
    #PortalMenu .row { padding: 0; }
    #PortalMenu .col-6 { padding: 0; }
    #PortalMenu .col-6 a:hover { text-decoration: none; }
    #PortalMenu h2 { background: white; height: 3em; border: 2px solid; text-align: center; padding: 16px; } 
    #PortalMenu .col-6 a:hover h2 { color: white; background: #31420b; }
    
    #Tuin, #Klussen { background: #d9bd86; width: 90%; box-shadow: inset 3px 3px 30px #48340b; margin-top: 30px; border-radius: 40px; }
    
    @media screen and (max-width: 667px) { /* Mobile */
        .OmslagFoto img { width: 100%; }
        #PortalPagina .row { flex-direction: column; }
        #PortalPagina .col-4, #PortalPagina .col-6 { max-width: 100%; flex: 0 0 100%; }
        .Tekstvlak { margin: 0; }
        .ItemAfbeelding img { margin: 2em 0 -4em; }
    }

    @media screen and (min-width: 768px) and (max-width: 1032px) { /* Tablet */
        #PortalPagina .col-6 {  max-width: 100%; }
        .OmslagFoto img { width: 100%; }
        .Tekstvlak { margin: 0; align-self: center; padding: 20px; }
        #PortalPagina  .row { flex-direction: column; align-content: center; }
        #PortalPagina .row:nth-child(even) { flex-direction: column; }
        #PortalPagina .row:nth-child(even) .ItemAfbeelding img { transform: rotate(4deg)scale(0.9)translate(0, -34px); }
        #PortalPagina .row:nth-child(odd) .ItemAfbeelding img { transform: rotate(-4deg)scale(0.9)translate(-7px, -58px); }
    }