* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        font-family: 'Nunito', sans-serif;
        font-size: 62.5%;
    }

    header {
        background: #df0000;
        color: white;
        height: 12rem;
        width: 100%;
        display:flex;

    }


    /*modal voeg toe aan winkelmandje*/

    .modal{
        width: 50rem;
        height: 30rem;
        background: #f6f6f6;
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 20%;
        left:70rem;
        box-shadow: 0 0 5rem 0 rgb(0, 0, 0, 0.3);
        color: #df0000;
        font-size: 300%;
        font-weight: 400;
        border-radius: 0.5rem;
        display: none;
        z-index: 1;
    }

    .a-popup{
        animation-name: popup;
        animation-duration: 0.8s;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    @keyframes popup {
        from{
            opacity: 0;
            transform: translateY(2rem);
        }
        to{
            opacity: 1;
            transform: translateY(0);
        }
    }

    .logoimage{
        height: 10rem;
        width: 17rem;
        align-items:center;
        margin-left:5%;
        margin-top:5%;
        border-radius:0.5rem;
        box-shadow: 0.3rem 0.2rem 4rem rgb(74, 70, 70);
    }

    .active {
        background: rgb(255, 255, 255);
    }


    .productpaginablok{
        gap:4rem;
        display:flex;
        width:40rem;
        justify-content:center;
        align-items:center;
        margin-left:120rem;
    }


    .productpagina1blok {
        display: flex;
        font-size: 2rem;
        background: #df0000;
        width: 17rem;
        height: 4rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.8rem;
        border: solid white 0.25rem;

    }

    .productpagina2blok {
        display: flex;
        font-size: 2rem;
        background: #df0000;
        width: 17rem;
        height: 4rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.8rem;
        border: solid white 0.25rem;

    }


    a {
        text-decoration: none;
        color: rgb(255, 255, 255);
    }



    .bannerlogo {
        width: 100%;
        height: 40%;
    }

    .container {
        position: relative;
        text-align: center;
        color: white;
    }

    .text-image {
        position: absolute;
        top: 34.5rem;
        left: 6rem;
        font-family: 'Nunito', sans-serif;
        font-weight: 600;
        font-size: larger;
        border-radius: 1rem;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.8rem;
    }

    .button-image {
        position: absolute;
        font-family: 'Nunito', sans-serif;
        top: 38rem;
        left: 9.5rem;
        font-size: larger;
        border-radius: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14rem;
        height: 4rem;
        border: solid white 0.25rem;
    }


    .headingblok {
        height: 60rem;
        margin-bottom: 10rem;
        margin-top: 5rem;
        display: flex;
        margin-bottom: 15rem;
    }


    .headingfoto {
        width: 65rem;
        height: 45rem;
        border-radius: 1rem;
        margin-top: 7.5rem;
        margin-left: 13rem;
        position: absolute;
        box-shadow: 0rem 0rem 40rem rgb(74, 70, 70);
        transition: 0.3s transform;
    }

    .headingfoto:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .groteheading {
        font-size: 5.5rem;
        font-family: 'Nunito', sans-serif;
        margin-left: 55%;
        margin-top: 3%;
        position: absolute;
    }

    .textgroteheading {
        font-size: 2.5rem;
        font-family: 'Nunito', sans-serif;
        margin-left: 55%;
        margin-top: 9%;
        position: absolute;
        width: 45rem;
    }

    .buttonheading {
        position: absolute;
        font-family: 'Nunito', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.5rem;
        width: 25rem;
        height: 5.5rem;
        border: solid #4a4646 0.1rem;
        background: none;
        margin-top: 19%;
        margin-left: 55%;
        font-size: 2.5rem;
        color: black;
        background: #df0000;
    }



    /*vier versillende producten*/

    .vierproducten {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 30rem;
        gap: 6rem;
        margin-bottom: 35rem;
    }

    .product1:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .product2:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .product3:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .product4:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .product1 {
        width: 40rem;
        height: 45rem;
        background: #eee;
        box-shadow: 0rem 0rem 5rem rgb(204, 201, 201);
        ;
        border-radius: 2rem;
        transition: 0.3s transform;
    }

    .product2 {
        width: 40rem;
        height: 45rem;
        background: #eee;
        box-shadow: 0rem 0rem 5rem rgb(204, 201, 201);
        ;
        border-radius: 2rem;
        transition: 0.3s transform;
    }

    .product3 {
        width: 40rem;
        height: 45rem;
        background: #eee;
        box-shadow: 0rem 0rem 5rem rgb(204, 201, 201);
        ;
        border-radius: 2rem;
        transition: 0.3s transform;
    }

    .product4 {
        width: 40rem;
        height: 45rem;
        background: #eee;
        box-shadow: 0rem 0rem 5rem rgb(204, 201, 201);
        ;
        border-radius: 2rem;
        transition: 0.3s transform;
    }


    .product1 img {
        width: 100%;
        height: 100%;
        border-radius: 2rem;
    }

    .product2 img {
        width: 100%;
        height: 100%;
        border-radius: 2rem;
    }

    .product3 img {
        width: 100%;
        height: 100%;
        border-radius: 2rem;
    }

    .product4 img {
        width: 100%;
        height: 100%;
        border-radius: 2rem;
    }



    /*Vier verchillende website stappen*/

    .stappenblokken {
        width: 100%;
        font-family: 'Nunito', sans-serif;
        margin-bottom: 15rem;
    }

    .stapblokken {
        width: 95%;
        /*even checken*/
        height: 25rem;
        display: flex;
        border-radius: 2rem;
        margin: 6rem;
        box-shadow: 0rem 0rem 5rem rgb(204, 201, 201);;
        background: #eee;
        justify-content: center;
        align-items: center;
    }

    .stapblok1 {
        width: 40rem;
        height: 30rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 1.5rem;
    }

    .stapblok2 {
        width: 40rem;
        height: 30rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 1.5rem;
    }

    .stapblok3 {
        width: 40rem;
        height: 30rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 1.5rem;
    }

    .stapblok4 {
        width: 40rem;
        height: 30rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 1.5rem;
    }

    .blokfoto {
        width: 40%;
        height: 50%;
    }

    /*De nieuwe Cherry functie*/

    .gaafproduct {
        height: 60rem;
        margin-bottom: 10rem;
        margin-top: 5rem;
        display: flex;
        margin-bottom: 35rem;
        position: relative;
    }


    .productfoto {
        width: 50rem;
        height: 60rem;
        border-radius: 1rem;
        margin-top: 7.5rem;
        margin-left: 60%;
        position: absolute;
        box-shadow: 0rem 0rem 40rem rgb(74, 70, 70);
        transition: 0.3s transform;
    }

    .productfoto:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .headinggaafproduct {
        font-size: 5.5rem;
        font-family: 'Nunito', sans-serif;
        margin-left: 10%;
        margin-top: 3%;
        position: relative;
        width: 100%;

    }

    .textgaafproduct {
        font-size: 2.5rem;
        font-family: 'Nunito', sans-serif;
        margin-left: 4%;
        margin-top: 4%;
        position: absolute;


    }

    /*Reviews*/


    .sectionreviews {
        background:none;
        height:20rem;
        margin-bottom:40rem;
    }
    
    .arrow{
        width:10rem;
        height:2rem;
        background:none;
        font-size:300%;
        outline:none;
        border:none;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-left:2rem;
        position:absolute;
        border:0.15rem solid #726f6f;
        border-radius:2rem;
        color:#df0000;
        cursor: pointer;
    }


    .arrow.hover{
        cursor:pointer;
    }
    
    
    .reviews{
        display:flex;
        justify-content:center;
        align-items:center;
        height:100%;    
        gap:15rem;
        width:100%;
        flex-wrap:wrap;
        margin-bottom:10%;
    }
    
    
    .review{
        width:41rem;
        min-height:20rem;
        height:43rem;
        list-style:none;
        padding:4rem;
         border-radius:0.5rem;
         background:white;
         box-shadow:0 1rem 1rem 0 rgba(0, 0, 0, 0.2),
         inset 0 -1rem 1rem -1rem rgba(0, 0, 0, 0.1);
         position: relative;
         animation-name:fadeIn;
         animation-duration:0.8s;
    }
    
    .review:nth-of-type(4), .review:nth-of-type(5), .review:nth-of-type(6){
        display:none;
    } 
    
    
    .review img{
        width:8rem;
        height:8rem;
        position:absolute;
        top:0;
        left:50%;
        transform: translateX(-50%);
        line-height:0.5;
    }
    
    .stars{
        color:#df0000;
        font-size:2rem;
        margin-top:2.8rem;
    }
    
    
    .review p {
        font-size:1.8rem;
        font-style:italic;
        padding-bottom:2rem;
        font-family: 'Montserrat', sans-serif;
    }
    


    .top{
        width:10rem;
        height: 8rem;
        font-size:5rem;
        font-family: 'Montserrat', sans-serif;
        border-radius:0.5rem;
        color:#920000;
        position:fixed;
        bottom:3.5rem;
        right:4rem;
        display:flex;
        justify-content:center;
        align-items:center;
        border:0.4rem solid #920000;

    }


    /*footer*/

    footer{
        width:100%;
        height:16rem;
        background:#554c4c;
        font-family: 'Montserrat', sans-serif;
        display:flex;
    }

    .contactgegevens{
        font-size:2rem;
        display:flex;
        align-items:center;
        margin-left:5rem;
        color:rgb(255, 255, 255);
        text-decoration: underline 0.1rem solid rgb(255, 255, 255);
        flex-direction: column;
        gap: 2rem;
        padding-top: 2rem;
    
    }

    .overprogrammeur{
        font-size:2rem;
        display:flex;
        color:rgb(255, 255, 255);
        text-decoration: underline 0.1rem solid rgb(255, 255, 255);
        align-items:center;
        margin-left:45rem;
    }


    .footerblok{
        width:100%;
        height:100%;
        display:flex;
    }
    

    /*productpagina1*/

    .catogorie{
        width: 35rem;
        height: 30rem;
        margin-top: 5rem;
        font-family: 'Montserrat', sans-serif;
        font-size:3rem;
        background:#df0000;
        border-radius:2rem;
        margin-bottom:2rem;
        border:0.10rem solid #eee;
    }
    
    .catogorie.checkbox{
        width: 1rem;
        height: 10rem;
        justify-content:center;
        align-items:center;
        display:flex;
        
    }
    
    .catogorie1{
        background:#df0000;
        width: 100%;
        height:8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap:1rem;
        border-top-left-radius:2rem;
        border-top-right-radius:2rem;
        
    }
    
    .catogorie2{
        background: #df0000;
        width: 100%;
        height: 8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap:1rem;
    }
    
    .catogorie3{
        background:#df0000;
        width: 100%;
        height: 8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap:1rem;
        border-bottom-left-radius:2rem;
        border-bottom-right-radius:2rem;
        
    }
    
    
    
    .categoriecard{
        width:60%;
        height: 110rem;  
        display:flex;
        flex-wrap: wrap;
        margin-bottom:10rem;
    }
    
    .card{
        height: 25rem;
        width: 20rem;
        margin-top: 3rem;
        margin-left: 5rem;
        transition:0.4s;
    }

    
    .card:hover {
        transform: scale(1.08);
        cursor: pointer;
    }
    
    .fotoblokproduct, img{ 
        width: 100%;
        height: 18rem;
    }
    
    .textblokproduct{
        color:black;
        width: 100%;
        height: 14rem;
        font-size:2rem;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        font-family: 'Montserrat', sans-serif;
        background: #554c4c;
    }
    


    /*dropdownbutton*/
    
    .dropbtn {
        font-family: 'Montserrat', sans-serif;
        background-color: #df0000;
        color: #554c4c;
        font-size: 2.4rem;
        width: 15rem;
        height: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.3rem solid #554c4c;;
        border-radius:3rem;
      }
      

      .dropdown {
        position: relative;
        display: inline-block;
        margin-left: 5rem;
        margin-top:6rem;
      }


      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 30rem;
        height:30rem;
        box-shadow: 0rem 0.8rem 2rem 0rem rgba(0,0,0,0.2);
        z-index: 1;

      }
      

      .dropdown-content a {
        color: rgb(255, 255, 255);
        text-decoration: none;
        display: block;
        
      }
      

      .dropdown-content a:hover {background-color: #ddd;}
      

      .dropdown:hover .dropdown-content {display: block;}
      

      .dropdown:hover .dropbtn {background-color: #df0000;}
    
    
    
      .filter--dorpdown{
        width: 30%;
        height: 7rem;
        margin-top: 4rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }





      .euro{
        color:#df0000;
        top:2rem;
        left:-8rem;
      }

      .filter{
        -webkit-appearance:none;
        appearance: none;
        
        width:3rem;
        height:3rem;
        background:#726f6f;
        display:flex;
        border-radius:1rem;
    }

    .filter:checked{
        background:#920000;
    }

    .label{
        font-size:3rem;
        display:flex;
        justify-content:center;
        align-items:center;
    }



      /*individueel pagina*/

      .individueelblok1{
        width:100%;
        height:120rem;
        display:flex;
        justify-content:center;
        align-items:center;
      }

      .individueelinblok1{
        border-radius:2rem;
        width:90%;
        height:90%;
        background-color:#eee;
        display:flex;
        flex-wrap: wrap;

      }

      .individueelblok1foto{
        height:40%;
        width:35%;
        margin-top:8%;
        margin-left:10%;
        border-radius:2rem;
      }

      .individueelblok1foto > img{
        height:100%;
        width:100%;
        display:flex;
        border-radius:2rem;
        border:0.4rem solid #554c4c;
        object-fit: fill;  
      }


      .individueelblok2{
        width:45%;
        height:50%;
        background-color:#ddd;
        margin-left:5%;
        margin-top:5%;
        border-radius:2rem;
      }

      .winkelwagenknop{
        border-radius:10rem;
        height:6rem;
        width:6rem;
        display:flex;
        margin-left:1%;
      }

      .winkelwagenknop > img{
        height:100%;
        width:100%;
      }

      .titel{
        font-family: 'Montserrat', sans-serif;
        font-size:6rem;
        margin-left:10%;

      }

      .buttonblok{
        width:40%;
        height:40%;
        margin-left:10%;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:1rem;
      }

      .buttonblok--button{
        font-family: 'Montserrat', sans-serif;
        width:10rem;
        height:6rem;
        border-radius:0.8rem;
        display:flex;
        justify-content:center;
        align-items:center;
        background:#726f6f;
        border:#df0000 solid 0.2rem;
    }

      .prijs{
        display:flex;
        font-size:4rem;
        margin-top:5%;
        margin-left:10%;
      }


      
      .individueelinblok1{
        width:90%;
        height:90%;
        background-color:#eee;
        display:flex;
        flex-wrap: wrap;
      }

      
      .individueelblok3{
        display:flex;
        width:35%;
        height:40%;
        border-radius:2rem;
        font-size:2.3rem;
        margin-left:17rem;
      }

      .individueelblok3 p{
        background: #ddd;
        padding: 4rem;
        border-radius: 2rem;
      }
      

      .voegtoeaanwinkelmandje{
        width:25rem;
        height:5rem;
        border:0.2rem solid #df0000;
        background:#726f6f;
        border-radius:2rem;
        display:flex;
        margin-left:11rem;
        font-size:1.5rem;
        align-items:center;
        justify-content:center;
        color:white;
      }


      /*winkelwagenpagina*/

      .winkelwagen--items{
        background: white;
        margin: 3rem;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 6rem;
        margin-top: 6rem;
    }
    
    .winkelwagen--item{
        width: 65%;
        height: 25rem;
        padding: 4rem;
        display: flex;
        border:0.1rem solid #726f6f;
        font-family: NotoSansDisplay, NotoSansDisplay-fallback, Arial, sans-serif;
        border-radius:1rem;
        align-items: center;
        justify-content: space-between;
        font-size: 1.4rem;
    }
    
    .winkelwagen--item:hover{
        cursor: pointer;
    }
    
    .img--winkelwagen{
        width: 25rem;
        height: 20rem;
        border-radius:2rem;
    }
    
    

    
    .prijs{
        margin-right: 6rem;
        margin-top:1rem;
    }
    
    
    .winkelwagen--button:hover{
        cursor: pointer;
    }

    .winkelwagen--button{
        margin-right:76rem;
        background: #df0000;
        width: 20rem;
        height: 5rem;
        border: none;
        color: white;
        border-radius:1rem;
    }



      /*animatie en responsive*/

    @keyframes fadeIn{
        from{
            opacity:0;
            filter:blur(0.10rem);
        }
        to{
            opacity:1;
            filter:(0);
        }
    }




    @media screen and (max-width: 1700px){
        .productpaginablok{
            margin-left:40rem;
        }

        .categoriecard{
            height:150rem;
        }

        .individueelblok3text{
            font-size:1.8rem;
        }
        
        .groteheading{
            font-size:4rem;
        }


    }

    @media screen and (max-width: 1600px){
        .headinggaafproduct{
            font-size:4.5rem;
        }

        .textgaafproduct{
            font-size:2rem;
        }

        .productfoto{
            width:40rem;
            height:40rem;
        }

    }

    
    @media screen and (max-width: 1529px){
        .sectionreviews{
            height:70rem;
        }

        .text-image{
            margin-top:-9rem;
        }

        .button-image{
            margin-top:-9rem;
        }

        .headingfoto{
            width:50rem;
            height:40rem;
        }

        .individueelblok3text{
            font-size:1.2rem;
        }
        
        .groteheading{
            font-size:3rem;
        }

        .headinggaafproduct{
            font-size:3.5rem;
        }

        .stapblokken{
            width:100%;
            margin-left:0;
        }
    }

    @media screen and (max-width: 1230px){

        .categoriecard{
            height:180rem;
        }

        .overprogrammeur{
            font-size:1.4rem;
            margin-left:15rem;
            
        }

        .headingfoto{
            width:40rem;
            height:30rem;
            margin-left:6rem;
        }

        .individueelblok3text{
            font-size:1.6rem;
        }
        
        .groteheading{
            font-size:3rem;
        }

    }

    @media screen and (max-width: 1070px){
            .voegtoeaanwinkelmandje{
                margin-bottom: -50rem;
                }
            
            .winkelwagenknop{
                margin-right: -5rem;
            }
            .buttonblok{
                margin-bottom: 5rem ;
            }

            .top{
                margin-left:10rem;
                width:3rem;
                height:3rem;
                bottom:3rem;
                right:3rem;
            }

            .productpaginablok{
                margin-left:10rem;
            }

            .titel{
                font-size:4rem;
            }

            .sectionreviews{
                height:120rem;
            }

            .text-image{
                margin-top:-13rem;
            }
    
            .button-image{
                margin-top:-13rem;
            }

            .headingfoto{
                margin-top:3rem;
                width:30rem;
                height:20rem;
                margin-left:6rem;
            }
    
            
            .textgroteheading{
                font-size:2rem;
            }

            .groteheading{
                font-size:2.5rem;
            }

            .buttonheading{
                width:14rem;
                height:5rem;
                font-size:1.5rem;
            }

            .headingblok{
                height:30rem;
            }

            .productfoto{
                width:30rem;
                height:30rem;
            }

            .headinggaafproduct{
                font-size:2.5rem;
            }

            .textgaafproduct{
                font-size:2rem;
                width:40rem;
            }

        
    }

    @media screen and (max-width: 950px){
        .voegtoeaanwinkelmandje
            {
                margin-bottom: -50rem;
            }
        
        .winkelwagenknop{
            margin-right: -5rem;
        }
        .buttonblok{
            margin-bottom: 5rem ;
        }

        header{
            width: 100%;
            height:20rem;
        }

        footer{
            width:100%;
        }

        .productpaginablok{
            width:20rem;
        }
        
        .individueelblok3text{
            font-size:1.3rem;
        }

        .categoriecard{
            height:250rem;
            flex-direction: column;
            width:5rem;
        }
    
        .voegtoeaanwinkelmandje{
            width:18rem;
            margin-left:2rem;
        }

        .text-image{
            margin-top:-20rem;
            width:14rem;
            font-size:1rem;
        }

        .button-image{
            margin-top:-20rem;
            width:10rem;
            font-size:1rem;
            margin-left:-1rem;
        }

        .headingfoto{
            margin-top:3rem;
            width:30rem;
            height:20rem;
            margin-left:4rem;
        }

        
        .textgroteheading{
            font-size:1.5rem;
            width:30rem;
        }

        .groteheading{
            font-size:2rem;
        }

        .buttonheading{
            width:14rem;
            height:5rem;
            font-size:1.5rem;
        }


}



@media screen and (max-width: 750px){
    .productpaginablok{
        width:10rem;
        margin-left:10rem;
    }

    .top{
        font-size:3rem;
    }

    .winkelwagen--item{
        width:40rem;
    }

    .img--winkelwagen{
        width:10rem;
        height:10rem;
    }

    .naamproduct{
        font-size:1.5rem;
    }

    .prijs{
        font-size:2rem;
    }

    .overprogrammeur{
        font-size:1rem;
        margin-left:8rem;
    }

    .individueelblok3text{
        font-size:1rem;
    }

    .titel{
        font-size:4rem;
    }

    .product1{
        height:30rem;
        width:30rem;
    }

    .product2{
        height:30rem;
        width:30rem;
    }

    .product3{
        height:30rem;
        width:30rem;
    }

    .product4{
        height:30rem;
        width:30rem;
    }

    .text-image{
        margin-top:-25rem;
    }

    .button-image{
        margin-top:-25rem;
    }

    .productfoto{
        width:20rem;
        height:20rem;
    }

    .headinggaafproduct{
        font-size:2rem;
    }

    .textgaafproduct{
        font-size:1.5rem;
        width:40rem;
    }

    .vierproducten{
        margin-bottom:15rem;
    }


    @media screen and (max-width: 650px){
        .button-image{
            width:5rem;
            margin-top:-29rem;
        }

        .text-image{
            font-size:0.8rem;
            margin-left:-2rem;
            margin-top:-27rem;
        }

        .headingfoto{
            width:20rem;
        }

        .groteheading{
            margin-left:30rem;
            font-size:1.5rem;
        }

        .textgroteheading{
            font-size:1rem;
            margin-left:33rem;
            width:15rem;
        }

        .buttonheading{
            width:10rem;
            height:4rem;
            font-size:1rem;
        }


        .product1{
            height:20rem;
            width:20rem;
        }
    
        .product2{
            height:20rem;
            width:20rem;
        }
    
        .product3{
            height:20rem;
            width:20rem;
        }
    
        .product4{
            height:20rem;
            width:20rem;
        }
        
        .vierproducten{
            margin-bottom:0rem;
            height:25rem;
        }

        .stapblokken{
            height:20rem;
        }

        .stapblok1{
            height:10rem;
            font-size:1rem;
        }
        
        .stapblok2{
            height:10rem;
            font-size:1rem;
        }

        .stapblok3{
            height:10rem;
            font-size:1rem;
        }

        .stapblok4{
            height:10rem;
            font-size:1rem;
        }

        .headinggaafproduct{
            font-size:1;
            margin-left:1rem;
        }

        .textgaafproduct{
            font-size:1rem;
            width:20rem;
        }

        .productfoto{
            margin-left:30rem;
        }

        .gaafproduct{
            height:20rem;
        }

        .sectionreviews{
            height:220rem;
        }

        .review{
            height:70rem;
            width:25rem;
        }
        .stars{
            margin-top:5rem;
        }

    }

@media screen and (max-width: 550px){
    .productpaginablok{
        width:10rem;
        margin-left:5rem;
    }

    .fotoblokproduct{
        width:8rem;
        height:8rem;
    }

    .textblokproduct{
        width:8rem;
        height:10rem;
        font-size:1rem;
        margin-top:8rem;
    }

    .card{
        width:100%;
    }

    .catogorie{
        width:100%;
    }

    .individueelinblok1{
        height:120rem;
        flex-wrap: wrap;
    }

    .individueelblok1{
        width:100%;
    }

    .individueelblok1foto{
        width:100%;
        height:30rem;
        margin-left:0;
    }

    .individueelblok3text{
        width:100%;
        height:40rem;
        font-size:1.6rem;
    }

    .voegtoeaanwinkelmandje{
        width:10rem;
        margin-left:4rem;
    }
    
    .titel{
        font-size:3rem;
    }

    .buttonblok{
        width:14em;
    }

    .buttonblok--button{
        width:8rem;
    }
    

    .individueelblok2{
        width:100%;
        height:40rem;
        margin-left:0rem;
    }

    .individueelblok3{
        width:100%;
        height:40rem;
        margin-left:0rem;
    }

    .groteheading{
        font-size:1.1rem;
    }

    .textgroteheading{
        font-size:1rem;
        margin-left:30rem;
    }

    .productfoto{
        margin-left:23rem;
    }

    .buttonheading{
        width:6rem;
        font-size:0.8rem;
        margin-left:35rem;
    }



    @media screen and (max-width: 451px) {
        .reviews{
            width:100%;
            
        }
        .top{
            width:3.75rem;
            height:3.75rem;
            bottom:3.75rem;
            right:3.75rem;
            }

        header{
            width: 100%;
            height:20rem;
        }

        footer{
            width:100%;
        }


        .overprogrammeur{
            padding:1rem;
        }

        .contactgegevens{
            margin-top:15%;
            font-size:1rem;

        }

        .logoimage{
            height:10rem;
            width:15rem;

        }

        .productpagina1blok{
            width: 16rem;
            
        }

        .productpagina2blok{
            width: 16rem;
        }

        .productpaginablok{
            width:40%;
            flex-direction:column;
            margin-left:10%;
            gap:15%;
        }


        .titel{
            font-size:4rem;
        }

        .buttonblok{
            flex-direction:column;
        }

        .buttonblok--button{
            width:100%;
            height:100%;
        }


        .winkelwagenknop{
            width:50%;
            height:40%;
            margin-left:0%;
        }

        .winkelwagenknop > img{
            width:50%;
            height:10%;
            margin-left:10%;
        }

        .individueelinblok1{
            flex-direction: column;
            width: 100%;

        }

        .individueelblok1foto{
            width:100%;
        }

        .individueelblok2{
            width:100%;
            margin-bottom:2rem;
        }

        .buttonblok--button{
            width: 50%;
            height: 30%;
        }

        .buttonblok{
            flex-direction: row;
        }
              
        .winkelwagenlink{
            width: 10rem;
        }

        .contactgegevens{
            margin: 0;
            width: 7rem;
        }

        .overprogrammeur{
            font-size: 1rem;
            margin-left:1rem;
        }

      .individueelblok3{
        display:flex;
        margin:0;
        width:100%;
        justify-content:center;
      }

     

      .individueelblok3 p{
        background: #ddd;
        border-radius: 2rem;
        font-size:2rem;
      }
      

      .voegtoeaanwinkelmandje{
        border:0.2rem solid #df0000;
        background:#726f6f;
        border-radius:2rem;
        display:flex;
        font-size:1.2rem;
        align-items:center;
        justify-content:center;
        width:10rem;
      }

      .winkelwagen--item{
        width:25rem;
      }

      .img--winkelwagen{
        width:4rem;
        height:4rem;
      }

      .prijs{
        font-size:2rem;
      }

      .headingblok{
        height:20rem;
      }
      
      .groteheading{
        margin-left:25rem;
      }

      .textgroteheading{
        margin-left:26rem;
      }

      .buttonheading{
        margin-left:26rem;
        margin-top:10rem;
      }

      .arrow{
        width:5rem;
      }