#searchpage {
    width: 100%;
    max-width: 500px;
}
#searchpage.manyresults {
    max-width: 800px;
}
#searchpage.hasresults .searchinput i.fa-search {
    width: 40px;
    padding-right: 10px;
}
#searchpage.hasresults .searchinput i.fa-times {
    width: 40px;
    right: 40px;
}
#searchpage:not(.hasresults) .searchinput .fa-times {
    opacity: 0;
    pointer-events: none;
}
.filterchild {
    display: flex;
    width: 100%;
}
.searchinput input,select {
    font-size: 14px;
    border: 2px solid #ccc;
    border-radius: 5px;
    position: relative;
    z-index: 1;
}
.searchinput {
    position: relative;
    max-width: 400px;
    flex-grow: 1;
}
.searchinput input {
    width: 100%;
    padding: 20px;
}
.searchinput i {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 60px;
    width: 60px;
    text-align: center;
    z-index: 2;
    cursor: pointer;
    color: #ccc;
    transition: all .1s linear;
}
.searchinput i:hover {
    color: var(--themecolor);
}
.filterknop { padding-left: 10px }
.filterknop,
.lijstknop {
    cursor: pointer;
    width: 40px;
    line-height: 60px;
    text-align: center;
    color: #666;
}
.filterknop:hover,
.lijstknop:hover { color: var(--themecolor); }
#searchpage:not(.manyresults) .lijstknop { display: none }
select {
    padding: 15px;
}
.searchinput input:hover,
.searchinput input:focus,
select:hover,
select:focus {
    border-color: var(--themecolor);
}
#results {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
#searchpage:not(.hasresults) #results { display: none }
.result {
    width: calc(33.33% - 15px);
    margin-top: 10px;
}
#searchpage:not(.manyresults) #results {
    gap: 10px;
}
#searchpage:not(.manyresults) .result {
    width: calc(50% - 5px);
}
@media only screen and (max-width:600px) {
    #results { gap: 10px }
    .result { width: calc(50% - 5px) }
}
@media only screen and (max-width:360px) {
    #searchpage:not(.manyresults) #results,
    #results { gap: 0 }
    #searchpage:not(.manyresults) .result,
    .result { width: 100% }
}
.result div {
    line-height: 1.5;
}
.result .title {
    font-family: 'Athiti', sans-serif;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 8px;
    line-height: 1;
}
.result .artist,
.result .info {
    font-size: 13px;
    margin-bottom: 8px;
}
.result .imglink {
    display: block;
    position: relative;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.result i {
    position: absolute;
    z-index: 2;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    font-size: 26px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    pointer-events: none;
    transition: opacity .15s linear;
    color: #fff;
    text-shadow: 0 1px 3px #0009;
}
.result .imglink:not(:hover) i { opacity: 0 }
.result img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: opacity .15s linear;
}
.result .imglink:hover img { opacity: .7 }

/* LIJST WEERGAVE */
#searchpage.manyresults.lijst {
    flex-direction: row;
}
#searchpage.manyresults.lijst .result {
    position: relative;
    padding-left: 115px;
    height: 100px;
}
#searchpage.manyresults.lijst #results .imglink {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#searchpage.manyresults.lijst #results .title,
#searchpage.manyresults.lijst #results .artist {
    position: relative;
    z-index: 2;
    flex-basis: 100%;
}
#searchpage.manyresults.lijst #results .info,
#searchpage.manyresults.lijst #results .rijkslink { display: none }
#searchpage.manyresults.lijst #results .imglink i {
    left: 25px;
}
#searchpage.manyresults.lijst #results {
    gap: 10px;
}
#searchpage.manyresults.lijst .result {
    width: calc(50% - 5px);
}
@media only screen and (max-width:700px) {
    #searchpage.manyresults.lijst #results {
        gap: 5px;
    }
    #searchpage.manyresults.lijst .result {
        width: 100%;
    }
}
#searchpage.lijst .fa-list,
#searchpage:not(.lijst) .fa-table-cells-large { display: none !important }

.filterpar:not(.weg) {
    background: #eee;
    padding: 10px;
    border-radius: 5px;
    margin: -10px -10px 10px -10px;
}
.filterpar {
    overflow: hidden;
    transition: all .3s ease-out;
    height: 280px;
}
@media only screen and (min-width:450px) {
    .filterpar:not(.weg) {
        height: 190px;
    }
    .filters {
        display: flex;
    }
    .filters > * {
        width: 50%;
        max-width: 210px;
    }
}
.kol1 { margin-bottom: 10px }
.filterpar.weg {
    height: 62px;
    margin-bottom: 10px;
}
.filter {
    padding-left: 5px;
}
.filter input,
.filter label {
    display: inline-block;
    cursor: pointer;
}
.filter label {
    padding: 5px;
}
.filterinfo {
    padding-bottom: 10px;
}
#searchpage:after {
    display: block;
    position: relative;
    left: 0;
    bottom: 0;
    background: #0002;
    padding: 20px;
    text-align: center;
    margin: 20px -50px -50px -50px;
    font-size: 13px;
}
@media only screen and (max-width:640px) {
    #searchpage:after {
        margin: 20px -25px -25px -25px;
    }
}
#searchpage.noresults:after {
    content: attr(data-noresults);
}
#searchpage.entertext:after {
    content: attr(data-notext);
}
#searchpage.choosefilter:after {
    content: attr(data-nofilter);
}

.rijkslink {
    font-size: 16px;
    color: #666;
    padding: 8px;
    margin: -6px;
}
.rijkslink:hover {
    color: var(--themecolor);
}