/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {


}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

    :root {
        --block-margin: 50px 0px;
	    --block-padding: 50px 0px;
    }

    .container-fluid {
        width:85%;
    }

    .content-blok figure img {
        height:auto;
    }

    /* == SINGLE PRODUCT == */

    .product-overzicht .filter-resultaat {
        margin:0px;
    }

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

    /* == MENUBALK == */
    .header-placeholder {
        display:none;
        height:70px;
    }

    header.desktop {
        position: fixed;
        top:0;
        left:0;
        z-index:9999;
        width:100%;
        height:70px;
        background: var(--wit);
        box-shadow: var(--box-shadow);
    }

    header.desktop figure.logo {
        margin:0;
        height:100%;
    }

    header.desktop .menubalk {
        position:relative;
        padding:10px 0px;
        height:70px;
        background: var(--wit);
        border-bottom:2px solid var(--lichtgrijs);
    }

    header.desktop .menubalk .container-fluid {
        height:100%;
        display:flex;
        align-items: center;
    }

    header.desktop ul {
        list-style-type:none;
        padding-left:0;
        display:flex;
        justify-content: end;
        margin-bottom:0;
    }

    header.desktop ul li {
        display:inline-block;
        margin:0px 8px;
    }

    header.desktop ul li:last-child {
        margin-right:0;
    }

    header.desktop ul li a {
        color: var(--tekst-kleur);
        text-decoration: none;
    }

    header.desktop .doneer-button a {
        padding: 8px 12px;
    }

    header.desktop .categorie-menu {
        height:40px;
        background: var(--wit);
    }

    header.desktop .categorie-menu li {
        display:flex;
        margin:0px 20px;
        height:100%;
        border:none;
    }

    header.desktop .categorie-menu li a {
        padding:0!important;
        align-items: center;
        display: flex;
    }

    header.desktop .categorie-menu li.menu-item-has-children a::after {
        content: "\f078";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 10px;
    }

    header.desktop .categorie-menu li.menu-item-has-children .sub-menu {
        display:none;
        transition: all 300ms ease-in-out;
        margin-top: 24px;
        background: var(--wit);
        z-index: 999;
        padding: 50px 0px;                                    
        transition: all 500ms ease-in-out;
        padding: 20px 30px;
        border-radius: 0px 0px 20px 20px;
        margin-left:-30px;
    }
    
    header.desktop .categorie-menu li.menu-item-has-children .sub-menu li {
        margin:0px 20px 0px 0px;
    }

    header.desktop .categorie-menu li.menu-item-has-children .sub-menu li a:after {
        content:'';
    }

    header.desktop .categorie-menu li.menu-item-has-children .sub-menu li .sub-menu {
        margin-left:0;
    }

    header.desktop .categorie-menu li.menu-item-has-children:hover .sub-menu {
        display: block;
        position: absolute;
    }

    header.desktop .categorie-menu li.menu-item-has-children:hover .sub-menu li {
        margin-bottom:3px;
    }

    header.desktop .account-acties figure {
        position: relative;
        margin:0px 10px;
    }

    header.desktop .account-acties figure:first-child {
        margin-left:0;
    }

    header.desktop .account-acties figure:last-child {
        margin-right:0;
    }

    header.desktop .account-acties figure a {
        color: var(--geel);
        font-size:1.3rem;
    }

    header.desktop figure .aantal-winkelmand-items, header.desktop figure .aantal-wensenlijst-items {
        position: absolute;
        right: -15px;
        top: -10px;
        font-size: 12px;
        color: var(--wit);
        background: var(--rood);
        height: 20px;
        width: 20px;
        border-radius: 100%;
        line-height: 20px;
      }

    /* == POPUP WINKELMAND == */

    .popup.winkelmand {
        width:70vw;
        padding:10px;
    }

    .popup.winkelmand .popup-doorgaan-button {
        font-size:0.8rem;
    }

    .popup.winkelmand .checkout-button {
        margin-top:0;
    }

}

/*XLarge devices (larger desktops, 1200px and up)*/
@media (min-width: 1200px) {

    .container-fluid {
        width:70%;
    }

    header .header__container {
        margin:100px 0px;
    }

}


/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

	
}