.hiw-section {

    max-width: 90%;

    margin: 20px auto;

    display: flex;

}



.content-container {

    border-radius: 5px;

    border-top-left-radius: 0;

    width: 100%;

}



h1 {

    margin:0 10px 10px;

    border-bottom: 1px solid #ccc;

    padding: 0 0 15px;

    text-align: center;

    font-weight: normal;

    font-size: 1.5em;

}



.content-container h2 {

    font-size: 1.1em;

    text-align: center;

    margin:0;

    padding: 10px;

    background-color: #8b3993;

    color: white;

    font-weight: normal;

    cursor: pointer;

}



.tuitions-search-div {

display: flex;

width: 98%;

margin: 10px auto 20px;

border-radius: 5px;

overflow: hidden;

box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}



.select-div {

    display: flex;

    width: 30%;

}



.select-div select {

    width: 50%;

    border: none;

    border-right: 1px solid #ccc;

    padding-left: 10px;

    font-size: 16px;

}



.search-content {

    display: flex;

    flex-wrap: nowrap;

    width: 70%;

}



.search-content button {

    width:20%;

    max-width: 50px;

    text-align: center;

    background-color: #f60;

    color: white;

    border: none;

    padding: 10px;

    font-size: 16px;

}



.search-content input {

    width: 100%;

    border: none;

    padding: 10px;

    font-size: 16px;

    overflow: hidden;

    text-overflow: ellipsis;

}



.flex-box {

    width: 100%;

    display: flex;

}



.flex-div {

    width:20%;

    margin: 10px auto;

    border: 1px solid;

    border: 3px solid white;

    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

    border-radius: 5px;

    background-color: #f2f2f2;

    overflow: hidden;

    padding: 10px;

}



.flex-div:nth-child(2) {

    padding-left: 20px ;

    display: block;

    width: 78%;

}

#filter-content {
transition: max-height 0.2s ease;
max-height: 100%;
padding: 0;
}

.filter-div {

border-radius: 5px;

overflow:hidden;

}



.filter-div div {

padding: 10px 15px 15px;

background-color: white;

border-bottom: 1px solid #ccc;

}



.filter-div button {

padding: 7px 15px;

display: block;

text-align: center;

border: none;

width: 100%;

cursor: pointer;

background-color: #f60;

color: white;

}



.filter-div label {

display: block;

margin: 0 0 10px;

font-size: 16px;

}



.filter-div label:nth-child(n+2) {

font-size: 14px;

cursor: pointer;

}



.filter-div input[type="text"] {

padding: 5px 10px;

max-width: 100%;

}



.filter-div input[type="radio"] {

margin-right: 5px;

}



.content-container li {

    margin: 5px 0 20px;

    font-size: 14px;

    max-width: 90%;

}



.cards-flex-box {

    margin: 15px auto;

    display: flex;

    flex-wrap: wrap;

    width: 100%;

}



.card-flex {

    width: 32%;

    margin: 10px auto;

    font-size: 13px;

    background-color: white;

    padding:0 10px 10px;

    border-radius: 5px;

    overflow: hidden;

    text-overflow: ellipsis;

    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

}



.card-flex label {

    margin:5px 0;

    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.card-flex label:nth-child(n+2) {

    border-bottom: 1px dashed #f1f1f1;

    padding-bottom: 5px;

    color: grey;

    font-weight: light;

}



.card-flex p {

    margin: 5px 0;

    border-radius: 5px;

    padding: 10px;

    background-color: #f2f2f2;

    color: grey;

}



.card-flex img {

    max-width: 70px;

display: block;

margin: 5px auto;

}



.card-flex table {

    table-layout: fixed;

    width: 100%;

    margin-bottom: 5px;

    padding-bottom: 10px;

    border-bottom: 1px dashed #f2f2f2;

}



.tuition-title {

    font-size: 16px;

    color: #8b3993;

    font-weight: 700;

}



.card-flex button {

    display: inline-block;

    width: 100px;

    margin: 5px 3px;

    background-color: #0066cc;

    color: white;

    text-align: center;

    border: none;

    padding: 5px;

    font-size: 12px;

    border-radius: 5px;

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

}



.card-flex button:nth-child(2) {

    background-color: #f60;

}



.btns-div {

    text-align: center;

    margin-top: 10px;

}



:focus {

    outline: 0;

}



button {

    cursor: pointer;

}



.no-result-div {

    margin: 15px 15px 50px;

    background-color: white;

    border: 1px solid #ccc;

    padding: 40px 20px;

    border-radius: 5px;

    text-align: center;

}







@media only screen and (max-width:650px)  {



.hiw-section {

max-width: 95%;

}



.btns-div button {

padding: 10px 10px;

font-size: 14px;

}



.content-container h1 {

font-size: 1.3em;

}



.content-container h2 {

font-size: 1em;

}



.content-container img {

    max-width: 100%;

}



.content-container li {

    max-width: 95%;

}



.content-container li ul {

    padding-left: 10px;

}



.tuitions-search-div {

display: block;

box-shadow: none;

padding: 5px;

}



.select-div {

width: 100%;

margin-bottom: 10px;

border-radius: 5px;

border: 1px solid #ccc;

overflow: hidden;

}



.select-div select {

padding: 10px;

overflow: hidden;

background-color: white;

}



.search-content {

width: 100%;

border-radius: 5px;

overflow: hidden;

border: 1px solid #ccc;

}



.flex-box {

display: block;

padding: 0 10px;

}



#filter-content {
max-height: 0;
}



.flex-div {

    width: 100%;

    margin-bottom: 20px;

}



.flex-div:nth-child(2) {

    border: none;

    width: 100%;

    padding-top: 20px;

    padding-left: 10px;

    display: block;

}



.cards-flex-box {

display: block;

}



.card-flex {

width: 100%;

padding: 15px;

}



.card-flex button {

font-size: 12px;

padding: 7px 10px;

width:120px;

}



.card-flex img {

    max-width: 100px;

margin:5px auto;

}



}