.referenzen.filter {
    display: flex;
    gap: 5px;
    padding-bottom: 20px;
}

div.filter-option {
    width: 100%;
    margin: 5px 5px;
}
div.filter-options-container {
    margin: -5px -5px;
    padding-bottom: 20px;
}

div.tx_referenzen {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Three columns with equal width */
    gap: 20px; /* Space between the grid items */
}

div.reference {
    /* border: 1px solid #ced4da; */
    text-align: left;
    /* padding: 10px; */
}

div.reference>div.title {
    font-weight: bold;
}

div.thumb {
    max-width: 640px;
    position: relative;
}

img.thumb {
    max-width: 640px;
    width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

.numberOfReferences {
    margin-bottom: 20px;
}

div.productsContainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Three columns with equal width */
    gap: 20px; /* Space between the grid items */
}

.referenceProductCard {
    /* border: 2px solid black; */
    background-color: #f8f8f8;
}

div.pictureContainer {
    /* width: fit-content;
    background-color:chartreuse */
    margin-bottom: 1em;
}
.slick-slide {
    height: fit-content;
    width: fit-content;
}

.slick-slide figure {
    text-align: center;
}

.slick-prev:before, .slick-next:before{
    color:#572381;
}

div.buildingTypes {
    background-color: #eee;
    border: 1px solid #aaa;
    border-radius: 1em;
    padding: 1em;
}

span.buildingType {
    margin: 5px 20px 5px 5px;
    background-color: aquamarine;

}

div.productGroups {
    background-color: #eee;
    border: 1px solid #aaa;
    border-radius: 1em;
    padding: 1em;
}

span.productGroup {
    margin: 5px 20px 5px 5px;
    background-color: aquamarine;

}
span.productGroup::before {
    background-color: white;
    background-image: url("../Icons/productgroup.png");
    background-size: 40px 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
    content: "";
}

.checkbox {
    margin-left: 10px;
    margin-right: 10px;    
}
.checkboxLabel {
    margin-right: 20px;
}
div.filterCheckboxes {
    display: table;
}
div.checkboxWithLabel {
    display: inline-flex;
}
span.titlePictureCopyright {
    text-orientation: upright;
    writing-mode: sideways-lr;
    color: white;
    font-size: smaller;
    position: absolute;
    bottom: 8px;
    right: 8px;
}

div.additionalInfos {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Three columns with equal width */
    gap: 20px; /* Space between the grid items */
}

div.additionalInfo label {
    margin-right: 10px;
    font-weight: bolder;
    color:#572381;
}

div.referencesPagination {
    display: flex;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid gray;
}
span.paginationPageIndexCurrent {
    font-weight: bolder;
    margin-left: 10px;
}
span.paginationPageIndex {
    font-weight: normal;
    margin-left: 10px;
}
 /* Extra small devices (phones, 600px and down) */
 /* @media only screen and (max-width: 600px) {...} */

 /* Small devices (portrait tablets and large phones, 600px and up) */
 /* @media only screen and (min-width: 600px) {...} */
 
 /* Medium devices (landscape tablets, 768px and up) */
 /* @media only screen and (min-width: 768px) {...} */
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
    div.filter-options-container {
        display: flex;
    }    
    div.filter-option {
        width: 33%;
    }
    div.tx_referenzen {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Three columns with equal width */
        gap: 20px; /* Space between the grid items */
    }    
    div.productsContainer {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Three columns with equal width */
        gap: 20px; /* Space between the grid items */
    }
    div.additionalInfos {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Three columns with equal width */
        gap: 20px; /* Space between the grid items */
    }    
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 /* @media only screen and (min-width: 1200px) {...}  */