#filter_toggle{
    width: 95%;
    margin: auto;
    margin-top: 7%;
    display: flex;
    align-items: center;
    justify-content: right;
    /* border: 1px solid white; */
    color: white;
}

#filter_toggle>h3{
    font-weight: lighter;
    font-size: medium;
    margin-right: 1%;
}

#filter_toggle>img{
    width: 4%;
    cursor: pointer;
    transition: 0.25s;
    transform:rotate(45deg);
}

.filter{
    width: 97%;
    margin: auto;
    border: 1px solid white;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    border-radius: 10px;
    padding: 0% 0% 1% 0%;
}

.filter>div{
    width: 10%;
    /* border: 1px solid white; */
    /* text-align: center; */
}

.filter>div>h3{
    color: white;
    font-weight: normal;
}

.filter>div>p{
    color: white;
    display: inline;
}

.filter>div>input{
    background-color: transparent;
    border: 1px solid white;
}

.gallery{
    width: 97%;
    height: auto;
    margin: auto;
    margin-top: 2%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
    /* overflow-y: scroll; */
    padding-right: 1%;
    padding-left: 1%;
}

.gallery>h1{
    color: white;
    font-weight: lighter;
}

.gallery img{
    width: 80%;
    display: block;
    margin: auto;
}

.gallery>div{
    display: flex;
    border: 1px solid white;
    border-radius: 10px;
    margin-top: 2%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.gallery>div>div:nth-child(1){
    width: 40%;
    /* border: 1px solid; */
    display: flex;
    align-items: center;
    /* background-color: rgba(255, 255, 255, 0.226); */
    border-radius: 10px 0px 0px 10px;
}

.gallery>div>div:nth-child(2){
    width: 60%;
    /* border: 1px solid; */
    padding: 2%;
}

.gallery>div>div:nth-child(2)>div{
    margin-top: 3%;
}

.gallery h3{
    margin-left: 5%;
    margin-bottom: 1%;
    font-size: small;
    color:  white;
    font-weight: lighter;
}

.gallery>div>div:nth-child(2)>h3:nth-child(2){
    display: inline;
}
.gallery>div>div:nth-child(2)>h3:nth-child(3){
    display: inline;
    color: white;
    font-size: small;
}

.gallery button{
    width: 90%;
    display: block;
    margin: auto;
    margin-top: 4%;
    height: 35px;
    border-radius: 5px;
    border: 1px solid white;
    color: white;
    background-color: transparent;
    font-size: medium;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s;
}

button:hover{
    background-color: rgba(255, 255, 255, 0.164);
}

.gallery>div>div>div{
    width: 90%;
    margin: auto;
    /* border: 1px solid rgb(187, 187, 187); */
    /* background-color: rgb(231, 231, 231); */
    /* border-radius: 20px; */
    /* display: flex; */
    align-items: center;
    /* padding: 2.5%; */
}

.gallery>div>div>div>p{
    font-size: small;
    margin: 0px;
}

.gallery>div>div>p{
    font-size: small;
}

.colours{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 3%;
}

.colours img{
    width: 100%;
    cursor: pointer;
}

.colours>div{
    width: 20%;
}

/* .gallery input[type=checkbox]{

} */