.project-search-container { display: flex; flex-direction: column; justify-content: stretch; align-items: center; padding: 0px 30px; margin-top: 30px; } .project-search-filters-container { display: flex; flex-direction: column; gap: 25px; justify-content: stretch; align-items: stretch; width: 100%; } .project-search-filter-container { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 10px; } .project-search-filter-label { font-size: 16px; font-weight: bold; font-family: Source Sans Pro; } .project-search-filter-item { display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 150px; width: 100%; min-height: 50px; padding: 5px 10px; border: 1px solid rgba(0, 0, 0, 0.0); background-color: rgba(0, 0, 0, 0.04); border-radius: 5px; font-family: Source Sans Pro; font-size: 16px; } .project-search-filter-select { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; font-size: 13px; font-weight: 400; font-family: Space Grotesk; text-align: center; border: 1px solid #02114A; cursor: pointer; } .project-search-filter-select-item { padding: 15px 10px; width: 100%; height: 100%; border-right: 1px solid #02114A; } .project-search-filter-select-item-selected { color: white; padding: 15px 10px; width: 100%; height: 100%; border-right: 1px solid #02114A; background-color: #02114A; } .project-search-divider { width: 100%; margin: 35px 20px; height: 1px; background-color:rgba(0, 0, 0, 0.1); } .project-search-button { margin-top: 20px; height: 50px; background-color: #5D6A73; color: white; border: 0px; border-radius: 5px; font-size: 20px; font-family: Source Sans Pro; font-weight: lighter; } .project-search-button:hover { cursor: pointer; font-size: 24px; transition-duration: 0.3s; background-color: #252631; } /* Results */ .project-search-results-container { display: flex; flex-direction: column; justify-content: start; align-items: center; margin-bottom: 50px; gap: 30px; } @media only screen and (min-width: 750px) { .project-search-filters-container { flex-direction: row; flex-flow: row wrap; justify-content: center; align-items: center; } .project-search-filter-container { max-width: 450px; min-width: 400px; } .project-search-button { min-width: 400px; margin-top: 30px; } .project-search-filter-select { width: 100%; font-size: 15px; font-weight: 400; font-family: Space Grotesk; text-align: center; border: 1px solid #02114A; cursor: pointer; } .project-search-results-container { flex-direction: row; flex-flow: row wrap; justify-content: center; align-items: center; } }