:root{
    --filters-width-large:15vw;
    --filters-width-medium:30vw;
    --filters-width-small:90vw;
    --filters-width-tiny:30vw;
}

/* searchbar */

.searchbar-section{
    text-align: center;
    position:relative;
}

.searchbar-section form {
    display: inline-block;
    width: 60%;
    text-align: center;
    margin:20px auto;
    /* border-radius: 4px; */
    font-size: 16px;
    /* background:#e9e9e9; */
    border-bottom: 2px var(--accent-2) solid;
}

.searchbar-section form > * {
    display:inline-block;
}


input, 
button {
    z-index: 5;
    position:relative;
    font-family: var(--main-font);
    display: inline-block;
    text-align: center;
    height: 40px;
    outline: none;
    background:#e9e9e9;
    border:none;
    border-radius:4px;
    transition:0.2s;
}

input[type="text"]{
    margin: 20px auto 20px 0px;
    width: 40%;
    text-align:left;
    font-size:22px;
    padding-left:10px;
}

input:hover{
    background:#ccc;
}

button {
    color:#fff;
    margin:18px 0;
    height:42px;
    width:80px;
    cursor:pointer;
    background:var(--accent-1);
    position:relative;
    top:-2px;
    transition:0.2s;
}

button:hover{
    background:var(--accent-2);
}


/* display settings */

.result-display{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:0 5px 0 5px;
    margin-right: 20px;
    max-width: 90vw;
    transition: 0.6s;
}

.result-display.filters-closed {
    max-width: 95vw;
}

.disp-selector{
    display:inline-block;
    width:30vw;
    transition: 0.6s;
}

.result-display.filters-closed .disp-selector{
    margin:auto 5vw;
}


.disp-selector i {
    cursor:pointer;
    /* margin:auto 10px; */
    background:#e9e9e9;
    border-radius:4px;
    padding:15px 6px;
    transition: 0.2s;
}

.disp-selector i:hover{
    background:#ccc;
}

.result-count{
    /* float:right; */
    display:inline-block;
    margin-right: 20px;
}





/* results section */

.results-section {
    display: flex;
    flex-wrap:nowrap;
    justify-content: start;
}


/* filters */

.results-section .filters{
    width:var(--filters-width-large);
    /* border-bottom:2px var(--accent-1) solid; */
    /* overflow: hidden; */
    position: relative;
    left:0;
    transition:0.6s;
    
}

.results-section .filters > * {
    margin-left: 5%;
    margin-right: 5%;
}


.results-section .filters h4 {
    margin-left:0;
    padding-left: 5px;
    margin-bottom:10px;
    border-bottom:2px var(--accent-2) solid;
}

.results-section .filters p {
    margin-left:0;
    padding-left: 10px;
    margin-bottom: 5px;
    border-bottom: 2px var(--grey) solid;
    width:95%;
}

.filters select{
    overflow:hidden;
    width:90%;
    white-space: pre;
    border:none;
    outline:none;
    background: #e9e9e9;
    height:40px;
    border-radius:4px;
    font-size:18px;
    cursor:pointer;
    transition:0.2s;
}

.filters select:hover{
    background: #ccc;
}

.filters option{
    background: #fff;
    border:none;
    outline:none;
}

.filters .checks{
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height:50vh;
}

.filters .checks::-webkit-scrollbar,
.filters .checks::-webkit-scrollbar-button{
    display: none;
}

.filters .check{
    display:inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    background:var(--accent-1);
    color:#fff;
    border-radius:4px;
    cursor:pointer;
    transition:0.2s;
    margin-bottom:2.5px;
    margin-top:2.5px;
    height:30px;
    width: 100%;
}

.filters .check:hover,
.filters .checked{
    background:var(--accent-2);
}

.filters .check span{
    margin-left:5px;
}

.filters .check div{
    /* width:30px; */
    display: inline-block;
    padding:0;
    margin:0 10px;
    opacity:0;
    transition:0.2s;
}

.filters .check.checked div{
    opacity:1;
}


/* hamburger menu button */

.filters .hamburger-toggle{
    float:right;
    position:relative;
    height:20px;
    width:20px;
    padding:5px;
    margin:10px;
    text-align: center;
    border-radius:4px;
    background:#e4e4e4;
    z-index: 9;
    left:0;
    top:-2px;
    transition:0.6s;
}

.filters .hamburger-toggle.pop-out{
    left:40px;
    border-radius: 0 4px 4px 0;
}

.filters .hamburger-toggle:hover{
    background:#33333366;
    cursor:pointer;
}



.hamburger-toggle i {
    margin-top:50%;
}

/* results */

.results-wrap{
    position: relative;
    left:0;
    border-top:2px var(--accent-1) solid;
    margin-left:20px;
    transition:0.6s;
}

.results-wrap.filters-closed{
    margin-left:5vw;
    min-width: 90vw;
}

.results{
    width: 100%;
}

.results .no-results {
    justify-self: space-around;
}

.results .title{
    font-weight:700;
}

.results .item{
    text-decoration: none;
    transition:background 0.2s;
}

.results .item:hover{
    background:#e9e9e9;
}

.results .data{
    color:#333;  
}

.results .title{
    color:#000;
}

/* grid view */

.results.grid{
    display:inline-flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
}

.results.grid .item{
    width:200px;
    height:410px;
    margin: 20px 1%;
    border-radius:4px;
    padding:5px;
    display: inline-block;
    position:relative;
}

.results.grid .thumbnail{
    object-fit: contain;
    width:80%;
    height:180px;
    margin-left:10%;
    box-sizing: content-box;
    padding:5px;
    border-bottom:2px #ccc solid;
}

.results.grid .thumbnail img{
    object-fit: contain;
    width:100%;
    height:100%;
}


.results.grid img{
    width:100%;
}

.results.grid .data{
    padding:10px;
    max-height:200px;    
}

.results.grid .blur{
    position: relative;
    height: 1.5em;
    top:-40px;
    z-index: 1;
    backdrop-filter: blur(2px);
    mask: linear-gradient(to bottom, #00000000 , #000000ff);
}

.results.grid .title{
    height: 60px;
    overflow: hidden;
}

.results.grid .description{
    text-align: center;
    overflow:hidden;
    height: 102px;
}

/* compact view */

.results.compact{
    width:100%;
}

.results.compact .item{
    width:100%;
    border-radius:4px;
    height:100px;
    display: inline-block;
    position:relative;
}


.results.compact .thumbnail{
    object-fit: contain;
    height:80%;
    max-width:20%;
    margin-left:10px;
    box-sizing: content-box;
    padding:15px 5px;
    display: inline-block;
}

.results.compact img {
    height:100%;
}

.results.compact .data{
    position: absolute;
    top:5px;
    border-left:2px #ccc solid;
    font-size:12px;
    display: inline-block;
    width:80%;
    margin: 5px auto;
    height:80px;
    padding-left:10px;
    color:#333;
    overflow:hidden;
}

.results.compact .bottom-align{
    bottom:0;
}

.results.compact .no-results{
    text-align: center;
}


/* page switcher */

.page-switcher{
    text-align: center;
}

.page-switcher a {
    color: #000;
    /* background:var(--accent-2); */
    text-decoration: none;
    border-radius:4px;
    width:30px;
    height: 30px;
    display:inline-block;
    transition: 0.2s;
}

.page-switcher a:hover{
    color:#fff;
    background:var(--accent-1);
}

.page-switcher .prev i,
.page-switcher .next i{
    margin-top:7px;
}

.page-switcher .page{
    display:inline-flex;
    align-items: center;
    justify-content: center;
}

.page-switcher .page i{
    /* margin-top:7px; */
}


/* filters and content sizes */
@media (min-width:1000px){

    .disp-selector{
        margin:auto 0 auto calc(var(--filters-width-large) + 20px);
    }

    .results-section .filters{
        width: var(--filters-width-large);
        min-width:var(--filters-width-large);
    }

    .results-wrap{
        min-width:calc(90vw - var(--filters-width-large));
        max-width:calc(90vw - var(--filters-width-large));
    }

    .results-section .filters.closed{
        left:calc(0vw - var(--filters-width-large));
    }
    

    .results-wrap.filters-closed{
        min-width: 90vw;
        max-width:90vw;
        left:calc(0vw - var(--filters-width-large));
    }
}

@media (max-width:1000px){

    .disp-selector{
        margin:auto 0 auto calc(var(--filters-width-medium) + 20px);
    }

    .results-section .filters{
        width: var(--filters-width-medium);
        min-width:var(--filters-width-medium);
    }

    .results-wrap{
        min-width:calc(90vw - var(--filters-width-medium));
        max-width:calc(90vw - var(--filters-width-medium));
    }

    .results-section .filters.closed{
        left:calc(0vw - var(--filters-width-medium));
    }
    

    .results-wrap.filters-closed{
        min-width: 90vw;
        max-width:90vw;
        left:calc(0vw - var(--filters-width-medium));
    }
}

@media (max-width:500px){

    .disp-selector{
        margin:auto 0 auto calc(var(--filters-width-small) + 20px);
    }

    .results-section .filters{
        width: var(--filters-width-small);
        min-width:var(--filters-width-small);
    }

    .results-wrap{
        min-width:calc(90vw - var(--filters-width-small));
        max-width:calc(90vw - var(--filters-width-small));
    }

    .results-section .filters.closed{
        left:calc(0vw - var(--filters-width-small));
    }
    

    .results-wrap.filters-closed{
        min-width: 90vw;
        max-width:90vw;
        left:calc(0vw - var(--filters-width-small));
    }
}

.hidden {
    display: none !important;
}