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

}

/*MEDIA @ 1600px*/
@media only screen and (max-width:1600px) {

}

/*MEDIA @ 1500px*/
@media only screen and (max-width:1500px) {

}

/*MEDIA @ 1400px*/
@media only screen and (max-width:1400px) {
    nav .nav_wrapper ul {
        gap: 30px;
    }

    footer > ul {
        gap: 30px;
    }
}

/*MEDIA @ 1300px*/
@media only screen and (max-width:1300px) {

}

/*MEDIA @ 1100px*/
@media only screen and (max-width:1100px) {
    .hidemobile{
        display: none !important;
    }
    
    .hidedesktop{
        display: flex !important;
    }



    nav,
    nav:hover{
        background-color: transparent;
        transition: background-color .2s ease-in-out;
    }

    nav{height: 70px;}

    nav.scrolled,
    nav.scrolled:hover{
        background-color: var(--MainColor_Dark);
        transition: background-color .2s ease-in-out;
    }

    nav .nav_wrapper figure.logo img,
    nav .nav_wrapper .social_wrapper{
        display: none;
    }

    nav .nav_wrapper ul {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-flow: column;
        transform: translate(0,-100%);
        opacity: 1;
        background-color: var(--MainColor_Dark);
        transition: transform .5s ease-in-out;
    }

    nav:hover .nav_wrapper ul {
        transform: translate(0,-100%);
        transition: transform .5s ease-in-out;
    }

    nav.open .nav_wrapper ul {
        transform: translate(0,0%);
        transition: transform .5s ease-in-out;
    }

    nav.open:hover .nav_wrapper ul {
        transform: translate(0,0%);
        transition: transform .5s ease-in-out;
    }

    nav .nav_wrapper figure.logo{
        left: 20px;
        top: 20px;
    }

    nav .nav_wrapper figure.logo img{
        width: 230px;
        height: auto;
    }

    nav .nav_wrapper figure.logo img.mobiel{
        display: block;
        filter: invert(0);
    }

    nav div.hamburger{
        display: flex;
    }






    header.specialscroll div.container figure.figleft img{
        height: 95vh;
    }

    header.specialscroll div.container figure.figleft {
        top: 0;
        width: 100%;
        max-width: 100vw;
        height: auto;
        z-index: 1;
    }

    .tripple_image div.container{
        grid-template: 1fr 20px 1fr / 1fr 1.2fr;
        gap: 50px;
        width: 90%;
        justify-content: center;
    }

    .tripple_image div.container div.figleft{
        grid-row: 1/2;
        grid-column: 1/2;
        height: 400px;
        width: 100%;
    }

    .tripple_image div.container div.figcenter{
        grid-row: 1/4;
        grid-column: 2/3;
        align-self: center;
        justify-self: center;
        height: 600px;
        width: 100%;
    }

    .tripple_image div.container div.figright{
        grid-row: 3/4;
        grid-column: 1/2;
        height: 400px;
        width: 100%;
    }

    .showcase div.container div.image_holder {
        height: 350px;
    }

    .showcase div.container div.image_holder figure {
        height: 100%;
    }



    .text_image div.container{
        grid-template: max-content 700px max-content / 1fr;
        gap: 50px;
    }

    .text_image div.container figure{
        width: 100%;
        margin: auto;
        max-width: 100%;
    }

    .text_image div.container figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .text_image div.container article{
        width: 90%;
        margin: auto;
    }

    .text_image div.container article p{
        text-align: center;
    }

    .text_image div.container article p.title{
        text-align: center;
    }

    .text_image div.container article a{
        text-align: center;
        align-self: center;
    }


    .just_tekst_split div.container {
        grid-template: max-content max-content / 1fr;
        gap: 50px;
        padding: 0;
        width: 90%;
    }

    .just_tekst_split div.container article{
        width: 90%;
        max-width: 90%;
    }

    .just_tekst_split div.container article p{
        text-align: center;
    }

    .just_tekst_split div.container article p.title{
        text-align: center;
    }



    .product_showcase div.container .products_wrapper{
        width: 100%;
    }

    .product_showcase div.container .products_wrapper a.product{
        cursor: pointer;
        height: 610px;
        width: 90%;
    }
    
    .product_showcase div.container .products_wrapper a.product figure img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        transform: scale(1.1);
        transition: transform .3s ease-in-out;
    }


    .product_showcase div.container .products_wrapper a.product p.item_name{
        width: 100%;
    }








    .product_wrapper {
        height: max-content;
        display: grid;
        grid-template: 800px max-content / 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }

    .product_wrapper article {
        margin: auto;
        display: flex;
        flex-flow: column;
        justify-content: center;
        max-width: 90%;
    }




    .select_filter div.container{
        flex-flow: column;
    }
    
    .select_filter div.container div.fliter{
        width: 90%;
        height: 200px;
    }


    .double_image div.container div{
        height: 310px;
    }






    .order div.container form{
        grid-template: max-content / 1fr;
    }
    
    .order div.container form .captcha_notify{
        grid-column: 1/2;
    }
    
    .order div.container form .button{
        grid-column: 1/2;
    }
    
    .order div.container form #contact_message{
        grid-column: 1/2;
    }







    footer > ul {
        flex-flow: column;
        gap: 20px;
    }
}

/*MEDIA @ 950px*/
@media only screen and (max-width:950px) {

}

/*MEDIA @ 690px*/
@media only screen and (max-width:690px) {

}

/*MEDIA @ 600px*/
@media only screen and (max-width:600px) {
    .tripple_image div.container {
        grid-template: 1fr 20px 1fr / 1fr 2fr;
        gap: 20px;
    }

    .tripple_image div.container div.figleft,
    .tripple_image div.container div.figright {
        height: 200px;
        width: 100%;
    }

    .tripple_image div.container div.figcenter {
        height: 300px;
    }

    .showcase div.container div.image_holder {
        height: 510px;
        flex-flow: column;
    }

    .text_image div.container {
        grid-template: max-content 580px max-content / 1fr;
    }

    .product_wrapper {
        height: max-content;
        display: grid;
        grid-template: 500px max-content / 1fr;
        gap: 30px;
        margin-bottom: 50px;
    }


    
}

/*MEDIA @ 487px*/
@media only screen and (max-width:487px) {
    .product_showcase div.container .products_wrapper a.product{
        cursor: pointer;
        height: 420px;
        width: 90%;
    }
}

@media only screen and (max-width:470px) {
    .tripple_image div.container {
        grid-template: 1fr 2fr 1fr / 1fr;
        gap: 20px;
    }

    .tripple_image div.container div.figcenter {
        grid-row: 2/3;
        grid-column: 1/2;
        height: 600px;
        width: 100%;
    }

    .tripple_image div.container div.figright {
        grid-row: 3/4;
        grid-column: 1/2;
        height: 400px;
        width: 100%;
    }

    .tripple_image div.container div.figleft {
        grid-row: 1/2;
        grid-column: 1/2;
        height: 400px;
        width: 100%;
    }

    .tripple_image div.container div.figcenter figcaption{
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

    .tripple_image div.container div.figcenter figcaption a,
    .tripple_image div.container div.figcenter figcaption p{
        text-align: center;
        margin: auto;
    }

    .double_image div.container{
        gap: 30px;
        width: 95%;
        grid-template: 500px 500px / 1fr;
    }

    .double_image div.container div{
        height: 250px;
    }

    .double_image div.container div.figleft{
        align-self: flex-start;
    }
}

/*MEDIA @ 365px*/
@media only screen and (max-width:365px) {
    .product_showcase div.container .products_wrapper a.product{
        cursor: pointer;
        height: 300px;
        width: 90%;
    }
}

@media only screen and (max-width:700px) and (max-height:800px) {

}

@media only screen and (max-width:700px) and (max-height:650px) {

}