:root{
    --header-height-1: 8vh;
    --header-height-2: calc(2.3vh + (var(--padding-main) * 2));
    --color-header: white;
}

.header{
	display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg);
    position: sticky;
    top: 0;
    padding-left: var(--padding-main);
    padding-right: var(--padding-main);
    z-index: 11;
}
.atlas-scroll .header{
    z-index: 14;
}

.header-menu{
    width: 100%;
    height: calc(var(--header-height-1) + var(--header-height-2));
    z-index: 12;
}

.header a, .bottom-menu a, .footer a{
    text-decoration: none;
    color: black;
}
.header h2{
    margin: auto;
    font-family: "NordicPavillion";
    font-size: 2.8em;
}
.header h2 sup{
    font-size: 0.59em;
    letter-spacing: 0.05em;
}
.header .about-b, .header .contact-b,.bottom-h .atlas-b{
    font-family: "NordicPavillion";
    font-size: 1.12em;

}
.header .about-b a, .bottom-menu .about-b a, .header .contact-b a, .bottom-menu .contact-b a,  .footer a{
    color: darkgrey;
}
.header .about-b .activeMenu, .header .about-b a:hover, .footer .activeMenu, .footer a:hover{
    color: black;
}
.header .contact-b .activeMenu, .header .contact-b a:hover{
    color: black;
}

.footer{
    width: 100%;
/*    border-top: var(--border);*/
    height: var(--header-height-2);
    padding-left: var(--padding-main);
    padding-right: var(--padding-main);
    font-family: "NordicPavillion";
    font-size: 0.8em;
}

.footer .header-b{
    display: flex;
}

.footer .bottom-h{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: var(--border);
    background: var(--color-bg);
    z-index: 2;
    padding: var(--padding-main) 0;
    box-sizing: border-box;
    height: var(--header-height-2);
}

.header .bottom-h{
/*	display: flex;*/
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: var(--border);
    background: var(--color-bg);
    z-index: 2;
    padding: var(--padding-main) 0;
    box-sizing: border-box;
    height: var(--header-height-2);
}

.bottom-h .header-b p, .bottom-h .header-b a{
    margin: auto 0;
}

.bottom-h .tiles-b::after {
    content: " [\00A0]";
}
.bottom-h .tiles-b.selected::after {
    content: " [x]";
}
.bottom-h .list-b::before {
    content: "[\00A0] ";
}
.bottom-h .list-b.selected::before {
    content: "[x] ";
}

.type-list-b{
    cursor: pointer;
}

.bottom-h .tiles-b.selected, .bottom-h .list-b.selected{
    color: black;
}

.bottom-h .tiles-b, .bottom-h .list-b{
    font-family: "NEXTMono";
    letter-spacing: var(--nextmono-spacing);
    font-size: var(--nextmono-sm-f-s);
    color: darkgrey;
}
.bottom-h .tiles-b:hover, .bottom-h .list-b:hover{
    color: black;
}
.bottom-h .header-b-center{
    column-gap: 1em !important;
    display: grid;
    justify-content: center;
    align-items: center;
}
.bottom-h .header-b-right{
    display: flex;
    justify-content: flex-end;
}
/*.bottom-h .tiles-b:hover::after{
    content: " [x]";
}
.bottom-h .list-b:hover::before{
    content: "[x] ";
}*/



.header .top-h{
    width: 100%;
    text-align: center;
    background: var(--color-bg);
    z-index: 2;
    height: var(--header-height-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .bottom-h .header-b, .footer .bottom-h .header-b{
	display: flex;
    column-gap: var(--padding-main);
}

.filters-cont{
    height: var(--header-height-2);
    overflow: visible;
    width: 100%;
}
.filters-header{
    background-color: var(--color-bg);
    z-index: 2;
    position: relative;
    height: var(--header-height-2);
}
.habitat-header{
    border-bottom: var(--border);
}
.filters-header, .filters-expandable{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
/*    padding: var(--padding-main) 0;*/
    box-sizing: border-box;
}
.filters-expandable{
    padding: 0em 0em 1.2em 0em;
}
.filters-subcont{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 5px;
}

.filters-subcont p{
    margin: 0px;

}
.filters-subcont .reset{
    font-family: "NordicPavillion";
    color: darkgrey;
    cursor: pointer;
    font-size: 0.8em;
}
.filters-subcont .reset:hover{
    color: black;
}
.filters-header .filters-center p{
    display: flex;
    align-items: center;
}

.habitat-header .filters-subcont p{
    margin: auto 0px;
    font-family: "NEXTMono";
/*    letter-spacing: var(--nextmono-spacing);*/
    font-size: var(--nextmono-sm-f-s);
    white-space: nowrap;
    position: relative;
    bottom: 0.09em;
}
.atlas-filters .filters-subcont .filters-p{
    margin: auto 0px;
    font-family: "NordicPavillion";
/*    letter-spacing: var(--nextmono-spacing);*/
    font-size: 0.85em;
}

.filters-right .habitat-info-p{
    display: flex;
    justify-content: flex-end;
}
.filters-left .habitat-info-p{
    display: flex;
    justify-content: flex-start;
}

.filters-right p{
    text-align: right;
}

.filters-center{
    display: flex;

    justify-content: center;
}
.filters-expandable .filters-center{
    align-items: flex-end;
}
.closed .expand::before{
    content: url('svgs/plus.svg');
}
.open .expand::before{
    content: url('svgs/minus.svg');
}

/*.closed .filters-expandable{
    transform: translateY(calc(-25vh + 1px));
}*/
.open .filters-expandable{
    transform: translateY(0px) !important;
}

.filters-expandable{
    min-height: 25vh;
    border-bottom: var(--border);
    transition: 0.2s transform;
    background: var(--color-bg);
    width: 100%;
}

.draggable-f{
    display: flex;
    column-gap: 15px;
}

.clickable-f{
    row-gap: 0.3em;
    display: flex;
    flex-direction: column;
}

.draggable-f .slider-i p, .clickable-f p{
    color: darkgrey;
    font-family: "NordicPavillion";
    font-size: var(--nextmono-sm-f-s);

}
.clickable-f p{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 0.5em;
}
.clickable-f p:hover{
    color: black;

}
.draggable-f .slider-i p.selected, .clickable-f p.selected{
    color: black;
}
.draggable-f .slider-i{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.clickable-f p:not(.filter-title p)::after{
    content: url(svgs/filter-0.svg);
    white-space: nowrap;
    width: 1.2em;
    display: block;
    opacity: 0.5;
}
.clickable-f p.selected:not(.filter-title p.selected)::after{
    content: url(svgs/filter-1.svg);
    white-space: nowrap;
    width: 1.2em;
    display: block;
    opacity: 1;
}

.image-header{
/*    display: none;*/
}
.image-header .filters-right, .image-header .filters-left{
    grid-template-columns: 1fr;
    margin: auto 0px;
    font-family: "NEXTMono";
    /* letter-spacing: var(--nextmono-spacing); */
    font-size: var(--nextmono-sm-f-s);
}
.image-header .filters-right{
    text-align: right;
}
.video-header .header{
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 15;
    mix-blend-mode: difference;
}
.video-header .header a:hover{
    color: var(--color-header);
}
.video-header .header .about-b a, .video-header .header .contact-b a, .video-header .bottom-h .tiles-b, .video-header  .bottom-h .list-b{
    color: dimgrey;
}

/*body .video-header .header .about-b a:hover > body .atlas-scroll .header .about-b a{
    color: black;
}*/
.video-header .header a, .video-header .bottom-h .tiles-b.selected, .video-header .header .about-b .activeMenu, .video-header .header .about-b a:hover, .video-header .header .contact-b a:hover,.video-header .bottom-h .tiles-b:hover,.video-header .bottom-h .list-b:hover, .video-header .bottom-h .tiles-b.selected, .video-header .bottom-h .list-b.selected{
    color: var(--color-header);
    transition: 0.1s color;
}
.video-header .header, .video-header .top-h, .video-header .bottom-h{
    background: transparent;
}

.video-header .header .bottom-h{
    border-bottom: none;
}

.atlas-main .header-menu{
    background: var(--color-bg);
}

.atlas-main .filters-header{
    border-top: var(--border);
}

.atlas-main .header .top-h, .atlas-main .header .bottom-h{
    opacity: 0;
}

@media screen and (orientation:landscape) {
    .filters-p.activeSelected{
        color: black;
    }
    .filters-cont.atlas-filters.closed .filters-header{
        border-bottom: var(--border);
    }
    /*.filters-p:not(.allfilters)::before{
        content: "[   ] ";
    }
    .filters-p.activeSelected:not(.allfilters)::before{
        content: "[ x ] "
    }*/
    .header .top-h,.header-menu{
        transition: 0.5s height;
    }
    .button-habitat, .full-model, .habitat-wrap-child, .intro-c{
        transition: 0.5s top;
    }
    .header h2{
        transition: 0.5s font-size;
    }
    /*.scrollDownH .header h2{
        font-size: 2em;
    }*/
    .top-h{
        overflow: hidden;
    }
    .header h2{
        font-size: 2.85em;
    }
    /*.full-model{
        transition: 0.2s top ;
    }*/
    /*.scrollUp .header .top-h{
        height: var(--header-height-1);
    }
    .scrollDown .header .top-h{
        height: 3vh;
    }*/
    .video-header .about-b, .video-header .contact-b{
        opacity: 0;
    }
    .footer .bottom-h{
        margin-top: -1px;
        background: var(--color-bg);
        z-index: 10;
        position: relative;
        width: 100%;
    }
    .atlas-filters .filters-subcont .filters-p{
        position: relative;
        bottom: 0.09em;
    }
}

/*ipad, tablets*/

@media screen and (min-width: 600px) and (max-width: 820px) and (orientation:portrait), (min-width: 821px) and (orientation:portrait){
    :root{
        --header-height-1: 7vh;
        --header-height-2: calc(2vh + (var(--padding-main) * 2));
      }
    .atlas-scroll .header-menu{
        background: var(--color-bg);
    }
    .bottom-menu{
        background: var(--color-bg);
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
    }
    .bottom-h .header-b-center{
        grid-column-start: 2;
        column-gap: 1em !important;
        font-size: 1.1em;
    }
    .bottom-menu .contact-b, .bottom-menu .about-b{
        font-family: "NordicPavillion";
        font-size: 1.12em;
    }
    .bottom-menu.bottom-h.desktop-hide{

        z-index: 10;
        mix-blend-mode: normal;
        padding: 0 var(--padding-main) var(--padding-main) var(--padding-main);
        transition: 0.5s transform;
        height: var(--header-height-2);
    }
    .scrollDown .bottom-menu.bottom-h.desktop-hide{
        transform: translateY(calc(var(--header-height-2)));
    }
    .scrollUp .bottom-menu.bottom-h.desktop-hide{
        transform: translateY(0vh);
    }
    .header{
        transition: 0.5s transform;
    }
    .scrollDown .header{
        transform: translateY(calc((var(--header-height-1) + (var(--header-height-2) * 2)) * -1));
    }
    .scrollDown .atlas-scroll .header .top-h{
        transform: translateY(calc((var(--header-height-1) + (var(--header-height-2) * 2)) * 1));
        border-bottom: var(--border);
    }
    .video-header .top-h{
        transition: 0.5s transform;
    }
    .scrollDown .video-header .top-h{
        transform: translateY(calc(var(--header-height-1) + (var(--header-height-2)* 2)));
    }
    .scrollUp .header{
        transform: translateY(0vh);
    }
     .scrollUp .video-header .top-h{
        transform: translateY(0vh);
    }
    .bottom-menu.bottom-h.desktop-hide .header-b.header-b-right{
        grid-column-start: 3;
    }

    .header{
        padding: 0px;
    }
    .footer .header-b-right a,.footer .header-b-left a{
        flex-grow: 0;        /*width: 100%;
        text-align: right;*/
    }

    .header-menu, .bottom-menu, .filters-expandable, .filters-header{
        padding: 0 var(--padding-main);
    }

    .header .bottom-h{
        display: flex;
        justify-content: center;
    }
    .header h2{
        font-size: 2.1em;
    }
    .filters-subcont, .filters-header{
        display: flex;
        column-gap: 1.8em;
/*        row-gap: 1em;*/
    }
    .filters-expandable{
        min-height: 25vh;
/*        border-bottom: var(--border);*/
        transition: 0.2s transform;
        background: var(--color-bg);
        width: calc(100% -(var(--padding-main)* 2));
        margin-left: var(--padding-main);
        margin-right: var(--padding-main);
    }
    .filters-expandable .filter-border{
        width: 100%;
    }

    .filterClose{
        background: var(--color-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 0em;
/*        transition: 0.2s height;*/
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        overflow: hidden;
    }
    .filters-header::before{
      /*content : "";
      position: sticky;

      left    : var(--padding-main);
      bottom  : 0;
      height  : 1px;
      width   :calc(100% - (var(--padding-main) * 2)); 
      border-bottom:1px solid magenta;*/
    }
    .filter-border{
        width: calc(100% - (var(--padding-main) * 2));
        border-bottom: var(--border);
        position: sticky;
        bottom: 0;
        left: var(--padding-main);
        z-index: 10;
        opacity: 1;
    }
    .filters-cont.atlas-filters.open .filterClose{
        height: 4em !important;
    }

    .filters-header .expand::before{
        display: none;
    }
    .atlas-main .filters-header{
        overflow-x: scroll;
    }
    .atlas-filters .filters-subcont .filters-p{
        white-space: nowrap;
    }
    .filters-expandable{
        max-height: calc(100vh - (var(--header-height-1) + (var(--header-height-2) * 2)));
        overflow: scroll;
        min-height: 0px;
    }
    .filters-expandable, .filters-expandable .filters-subcont{
        /*display: flex;
        flex-direction: column;*/
    }
    .filters-expandable{
        display: flex;
        grid-template-columns: 1fr 1fr;
        column-gap: 2em;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;

    }
    .filters-expandable .filters-subcont{
        display: block;
        width: 43%;
/*        background: red;*/
    }
    .filters-expandable.singleFilterMobile .filters-subcont.filters-left{
        transform: translateX(66%);
    }
    .filters-expandable.singleFilterMobile .filters-subcont.filters-right{
        transform: translateX(-66%);
    }
    .filters-cont.atlas-filters.open .filterClose{
        grid-column-start: 1;
        grid-column-end: 3;
        width: 100%;
    }
    .clickable-f, .draggable-f{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 5vw;
        row-gap: 0.5em;
    }
    .filter.even{
        grid-column-start: 2;
        text-align: left;
        justify-content: flex-start;
    }
    .clickable-f .filter.even::after{
        content: none !important;
    }
    .clickable-f .filter.even::before{
/*        content: "[\2009\2009\2009\2009]\00A0\00A0" !important;*/
        content: url(svgs/filter-0.svg) !important;
        white-space: nowrap;
        width: 1.2em;
        display: block;
        opacity: 0.5;
    }
    .clickable-f .filter.even.selected::before{
/*        content: "[\2009x\2009]\00A0\00A0" !important;*/
        content: url(svgs/filter-1.svg) !important;
        white-space: nowrap;
        width: 1.2em;
        display: block;
        opacity: 1;
    }
    .filter-title{
        font-family: "NordicPavillion";
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .filter-title p{
        text-align: left;
        color: black;
        font-size: 0.9em;
        justify-content: flex-start;
    }
    .atlas-filters .filters-subcont .filters-p{
        font-size: 0.9em;
    }
    .draggable-f .slider-i p, .clickable-f p:not(.filter-title p){
        font-size: 0.8em;
        text-transform: capitalize;
        white-space: nowrap;
    }
    .hiddenFilter{
        width: 0px;
    }
    .filterSection{
        overflow: hidden;

        transition: 0.3s max-height;
    }
    .filterSection:not(.filterSection.visible){
        max-height: 0px !important;
/*        display: none;*/
    }
    .filterSection.visible, .filterSection.all-visible{
        display: grid;
/*        max-height: 500px;*/
    }
    /*.filters-p::before{
        content: "[   ] ";
    }
    .filters-p.active::before, .filters-p.all-active::before{
        content: "[ x ] ";
    }*/
    .filters-p{
        display: flex;
        column-gap: 0.8em;
        align-items: center;
    }
    .filters-p.active{
        color: black;
    }
    .filters-p.active::before{
        opacity: 1 !important;
    }
    .filters-p.activeSelected::before{
        opacity: 0.5 !important;
    }
    .filters-p.active.activeSelected::before{
        opacity: 1 !important;
    }
    .filters-p:not(.allfilters)::before{
/*        content: "[\2009\2009\2009\2009]\00A0\00A0";*/
        content: url("svgs/filter-0.svg");
        white-space: nowrap;
        width: 1.5em;
        display: block;
        opacity: 0.5;
    }
    .filters-p.activeSelected:not(.allfilters)::before{
/*        content: "[\2009x\2009]\00A0\00A0"*/
        content: url("svgs/filter-1.svg");
        white-space: nowrap;
        width: 1.5em;
        display: block;
        opacity: 1;
    }
    .filters-subcont .reset{
        font-size: 0.9em;
        white-space: nowrap;
        margin: auto;
    }
    .draggable-f .slider-i p.selected, .clickable-f p.selected{
        color: darkgrey;
    }
    .activeFilter.draggable-f .slider-i p.selected,.activeFilter.clickable-f p.selected{
        color: black !important;
    }
    .filters-cont.atlas-filters.closed .filters-header{
/*        border-bottom: var(--border);*/
    }
    .atlas-list a:first-of-type .atlas-list-preview.visible{
/*        border-top: var(--border);*/
    }
    .atlas-main .atlas-list{
        margin-top: 2px;
    }
    .atlas-main .atlas{
/*        border-top: var(--border);*/
        margin-left: 0.5em;
        margin-right: 0.5em;
        width: calc(100% - 1em);
        margin-top: 2px;
    }
    .filters-expandable{
        transition: 0.5s transform;
    }
    .header .bottom-h{
        padding: 0 0 var(--padding-main) 0;
    }
    .filters-subcont{
/*        row-gap: 0.9em;*/
    }
    .footer p{
        white-space: nowrap;
    }
    .footer .header-b{
        width: 100%;
    }
    /*.top-h, .bottom-h{
            position: relative;
    }*/
   /* .filters-expandable{
        transition: 1s max-height;
    }*/
    /*.open .filters-expandable{
        max-height: 80vh !important;
        overflow-y: scroll;
    }*/
   /* .closed .filters-expandable{
        max-height: 0vh !important;
        overflow-y: scroll;
    }*/
    .filters-header{
        overflow-x: scroll;
    }
    .b-l{
        width: calc(100% - (var(--padding-main) * 2));
        position: absolute;
        border-top: var(--border);
        margin-bottom: var(--padding-main);
    }
    .bottom-menu .header-b{
        margin-top: var(--padding-main);
    }
    .header-b.header-b-right.mobile-hide:not(.habitat-header-ipad .header-b.header-b-right.mobile-hide), .header-b.header-b-left.mobile-hide:not(.habitat-header-ipad .header-b.header-b-left.mobile-hide){
/*        display: none !important;*/
    }
    .header .bottom-h .header-b, .footer .bottom-h .header-b {
        display: flex;
        column-gap: var(--padding-main);
        flex-grow: 1;
        text-align: right;
        height: fit-content;
        margin: auto;
    }
    .bottom-h{
        width: 100%;
    }
    .bottom-menu.bottom-h.desktop-hide{
        display: none;
    }
    .habitat-header .filters-subcont{
        column-gap: 0.1em;
    }
    .atlas-scroll .header .about-b, .atlas-scroll .header .contact-b{
        opacity: 0;
    }
}

@media screen and (max-width: 600px) and (orientation:portrait){
    :root{
        --header-height-1: 8vh;
        --header-height-2: calc(3vh + (var(--padding-main) * 2));
    }
    .atlas-scroll .header-menu{
        background: var(--color-bg);
    }
    .bottom-menu{
        background: var(--color-bg);
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
    }
    .bottom-h .header-b-center{
        grid-column-start: 2;
        column-gap: 1em !important;
        font-size: 1.1em;
    }
    .bottom-menu .contact-b, .bottom-menu .about-b{
        font-family: "NordicPavillion";
        font-size: 1.12em;
    }
    .bottom-menu.bottom-h.desktop-hide{

        z-index: 10;
        mix-blend-mode: normal;
        padding: 0 var(--padding-main) var(--padding-main) var(--padding-main);
        transition: 0.5s transform;
        height: var(--header-height-2);
    }
    .scrollDown .bottom-menu.bottom-h.desktop-hide{
        transform: translateY(calc(var(--header-height-2)));
    }
    .scrollUp .bottom-menu.bottom-h.desktop-hide{
        transform: translateY(0vh);
    }
    .header{
        transition: 0.5s transform;
    }
    .scrollDown .header{
        transform: translateY(calc((var(--header-height-1) + (var(--header-height-2) * 2)) * -1));
    }
    .scrollDown .atlas-scroll .header .top-h{
        transform: translateY(calc((var(--header-height-1) + (var(--header-height-2) * 2)) * 1));
        border-bottom: var(--border);
    }
    .video-header .top-h{
        transition: 0.5s transform;
    }
    .scrollDown .video-header .top-h{
        transform: translateY(calc(var(--header-height-1) + (var(--header-height-2)* 2)));
    }
    .scrollUp .header{
        transform: translateY(0vh);
    }
     .scrollUp .video-header .top-h{
        transform: translateY(0vh);
    }
    .bottom-menu.bottom-h.desktop-hide .header-b.header-b-right{
        grid-column-start: 3;
    }

    .header{
        padding: 0px;
    }

    .header-menu, .bottom-menu, .filters-expandable, .filters-header{
        padding: 0 var(--padding-main);
    }

    .header .bottom-h{
        display: flex;
        justify-content: center;
    }
    .header h2{
        font-size: 2.1em;
    }
    .filters-subcont, .filters-header{
        display: flex;
        column-gap: 1.8em;
/*        row-gap: 1em;*/
    }
    .filters-expandable{
/*        row-gap: 1em;*/
    }

    .filterClose{
        background: var(--color-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 0em;
/*        transition: 0.2s height;*/
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        overflow: hidden;
    }
    .filters-cont.atlas-filters.open .filterClose{
        height: 4em !important;
    }

    .filters-header .expand::before{
        display: none;
    }
    .atlas-main .filters-header{
        overflow-x: scroll;
    }
    .atlas-filters .filters-subcont .filters-p{
        white-space: nowrap;
    }
    .filters-expandable{
        max-height: calc(100vh - (var(--header-height-1) + (var(--header-height-2) * 2)));
        overflow: scroll;
        min-height: 0px;
    }
    .filters-expandable, .filters-expandable .filters-subcont{
        display: flex;
        flex-direction: column;
    }
    .clickable-f, .draggable-f{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 5vw;
        row-gap: 0.5em;
    }
    .filter.even{
        grid-column-start: 2;
        text-align: left;
        justify-content: flex-start;
    }
    .clickable-f .filter.even::after{
        content: none !important;
    }
    .clickable-f .filter.even::before{
/*        content: "[\2009\2009\2009\2009]\00A0\00A0" !important;*/
        content: url(svgs/filter-0.svg) !important;
        white-space: nowrap;
        width: 1.2em;
        display: block;
        opacity: 0.5;
    }
    .clickable-f .filter.even.selected::before{
/*        content: "[\2009x\2009]\00A0\00A0" !important;*/
        content: url(svgs/filter-1.svg) !important;
        white-space: nowrap;
        width: 1.2em;
        display: block;
        opacity: 1;
    }
    .filter-title{
        font-family: "NordicPavillion";
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .filter-title p{
        text-align: left;
        color: black;
        font-size: 0.9em;
        justify-content: flex-start;
    }
    .atlas-filters .filters-subcont .filters-p{
        font-size: 0.9em;
    }
    .draggable-f .slider-i p, .clickable-f p:not(.filter-title p){
        font-size: 0.8em;
        text-transform: capitalize;
    }
    .hiddenFilter{
        width: 0px;
    }
    .filterSection{
        overflow: hidden;

        transition: 0.3s max-height;
    }
    .filterSection:not(.filterSection.visible){
        max-height: 0px !important;
/*        display: none;*/
    }
    .filterSection.visible, .filterSection.all-visible{
        display: grid;
/*        max-height: 500px;*/
    }
    /*.filters-p::before{
        content: "[   ] ";
    }
    .filters-p.active::before, .filters-p.all-active::before{
        content: "[ x ] ";
    }*/
    .filters-p{
        display: flex;
        column-gap: 0.8em;
        align-items: center;
    }
    .filters-p.active{
        color: black;
    }
    .filters-p.active::before{
        opacity: 1 !important;
    }
    .filters-p.activeSelected::before{
        opacity: 0.5 !important;
    }
    .filters-p.active.activeSelected::before{
        opacity: 1 !important;
    }
    .filters-p:not(.allfilters)::before{
/*        content: "[\2009\2009\2009\2009]\00A0\00A0";*/
        content: url("svgs/filter-0.svg");
        white-space: nowrap;
        width: 1.5em;
        display: block;
        opacity: 0.5;
    }
    .filters-p.activeSelected:not(.allfilters)::before{
/*        content: "[\2009x\2009]\00A0\00A0"*/
        content: url("svgs/filter-1.svg");
        white-space: nowrap;
        width: 1.5em;
        display: block;
        opacity: 1;
    }
    .filters-subcont .reset{
        font-size: 0.9em;
        white-space: nowrap;
        margin: auto;
    }
    .draggable-f .slider-i p.selected, .clickable-f p.selected{
        color: darkgrey;
    }
    .activeFilter.draggable-f .slider-i p.selected,.activeFilter.clickable-f p.selected{
        color: black !important;
    }
    .filters-cont.atlas-filters.closed .filters-header{
/*        border-bottom: var(--border);*/
    }
    .atlas-list a:first-of-type .atlas-list-preview.visible{
/*        border-top: var(--border);*/
    }
    .atlas-main .atlas{
/*        border-top: var(--border);*/
        margin-left: 0.5em;
        margin-right: 0.5em;
        width: calc(100% - 1em);
        row-gap: 0.1em;
    }
    .filters-expandable{
        transition: 0.5s transform;
        border-bottom: none;
    }
    .filters-expandable .filter-border{
        width: 100%;
    }
    .header .bottom-h{
        padding: 0 0 var(--padding-main) 0;
    }
    .filters-subcont{
/*        row-gap: 0.9em;*/
    }
    .footer p{
        white-space: nowrap;
    }
    /*.top-h, .bottom-h{
            position: relative;
    }*/
   /* .filters-expandable{
        transition: 1s max-height;
    }*/
    /*.open .filters-expandable{
        max-height: 80vh !important;
        overflow-y: scroll;
    }*/
   /* .closed .filters-expandable{
        max-height: 0vh !important;
        overflow-y: scroll;
    }*/
    .filters-header{
        overflow-x: scroll;
    }
    .b-l{
        width: calc(100% - (var(--padding-main) * 2));
        position: absolute;
        border-top: var(--border);
        margin-bottom: var(--padding-main);
    }
    .bottom-menu .header-b{
        margin-top: var(--padding-main);
    }
    .filter-border{
        width: calc(100% - (var(--padding-main) * 2));
        border-bottom: var(--border);
        position: sticky;
        bottom: 0;
        left: var(--padding-main);
        z-index: 10;
        opacity: 1;
    }

}

/*** Jakob ***/

.clickable-f p.filter{
    color: rgb(169, 169, 169);
}
.clickable-f p.filter.selected{
    color: rgb(0, 0, 0);
}

/* more convenient scrolling on touch - START */
.filterSection .section.desktop-hide{
    pointer-events: none;
}
.filterSection.activeFilter .section.desktop-hide{
    pointer-events: unset;
}
.filterSection .section.desktop-hide .handle{
    pointer-events: all;
}
/* more convenient scrolling on touch - END */