.filters{
	background: black;
	color: white;
    position: absolute;
    padding-top: var(--header-h);
    bottom: 100%;
    transition: 0.5s transform;
    transform: translateY(0px);
    /* column-span: all; */
    width: calc(100% + (var(--grid-gap) * 2));
    mix-blend-mode: difference;
/*    z-index: 1;*/
    display: grid;
    grid-template-columns: var(--grid-cols);
    gap: var(--grid-gap);
    left: calc(var(--grid-gap) * -1);
    padding: var(--header-h) calc(var(--grid-gap) * 2) var(--grid-gap) calc(var(--grid-gap) * 2);
    max-height: 100vh;
    overflow-y: scroll;
}

/*.filters.closed{
    opacity: 0;
}*/


.filters #fClients{
	grid-column-start: 4;
    
}

.filters #fCategories{
	grid-column-start: 6;
    
}

.filterAll{
    display: none !important;
}



.fClient.active, .category.active, .fClient:hover, .category:hover{
/*	color: red;*/
    margin-left: -1.5vw;
}

.fClient, .category, .resetAll{
    cursor: pointer;
}

.fClient.active .arrow, .category.active .arrow, .fClient:hover .arrow, .category:hover .arrow{
    display: block;
}

.filters .arrow{
    width: 1.5vw;
    display: none;
}

.categoriesTitle, .clientsTitle, .resetTitle{
    text-transform: uppercase;
    font-family: "bb-modern-semicondensed-pro";
}

.closeFiltersField{
/*    background: rgba(255,0,0,0.5);*/
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

body.gallery .closeFiltersField{
    z-index: 10 !important;
}

@media screen and (orientation:landscape){
    .showMobile{
        display: none;
    }
    #hHome{
        overflow: visible;
        max-width: 5vw;
    }
    .headerChild{
        margin-left: 0.2vw;
    }
    .filters #fClients{
        grid-column-end: 6;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .filters #fClients .fClient, .filters #fCategories .category, .filters p:not(.filters .resetTitle){
        margin-top: 0;
        margin-bottom: 0.1em;
        display: flex;
    }
    .filters .categoriesTitle, .filters .clientsTitle, .filters .resetTitle{
        margin-top: 0.5vw;
        margin-bottom: 0.2vw;
    }
    .resetAll{
        grid-row-start: 2;
        grid-column-start: 7;
    }
}
@media screen and (orientation:portrait){

    .showMobile.fContact{
        display: none;
    }
    .filters #fClients {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 2;
    }
    .filters .categoriesTitle, .filters .clientsTitle{
        margin-top: 5vw;
        margin-bottom: 1.1vw;
    }
    .filters #fClients .fClient, .filters #fCategories .category{
        margin-left: 5vw;
        margin-top: 0vw;
        margin-bottom: 1.1vw;
        font-size: calc(var(--header-fs) * 1.1);
        line-height: calc(var(--header-fs) * 1.15);
        display: flex;
    }
    .filters #fCategories{
        grid-column-start: 7;
        grid-column-end: 12;
        grid-row-start: 2;
    }
    .filters{
        padding: var(--header-h) calc(var(--grid-gap)) var(--grid-gap) calc(var(--grid-gap));
    }
    .showMobile.fContact{
        display: flex;
/*        height: 5vh;*/
/*        background: red;*/
        color: white;
        grid-column-start: 1;
        grid-column-end: 13;
        padding-top: 2.5vh;
        justify-content: space-between;
        font-size: 3vw;
        line-height: 3.2vw;
    }
    .resetAll{
        grid-column-start: 9;
        grid-column-end: 12;
/*        background: red;*/
        grid-row-end: 3;
        grid-row-start: auto;
        display: flex;
        flex-direction: column;
        align-self: end;
    }
    .resetAll .resetTitle{
        margin: 0;
        text-transform: uppercase;
        font-family: "bb-modern-semicondensed-pro";
    }
    .resetAll p:not(.resetAll .resetTitle){
        margin-top: 0.5vw;
        margin-bottom: 1.1vw;
    }
    .filters .arrow{
        width: 5vw !important;
        flex-shrink: 0;
    }
    .fClient.active, .category.active, .fClient:hover, .category:hover{
        margin-left: 0vw !important;
    }
}