.stem-member-directory { padding: 0; }

    .stem-member-directory h1 { width: 100%; text-align: center; }

    .stem-member-directory label { float: left; margin: 2px 0; padding: 0; width: 100%; text-align: left; color: #7d7d7d; line-height: 30px; }
    .stem-member-directory input[type=text],
    .stem-member-directory input[type=date],
    .stem-member-directory input[type=password],
    .stem-member-directory input[type=email],
    .stem-member-directory input[type=color],
    .stem-member-directory input[type=datetime-local],
    .stem-member-directory input[type=file],
    .stem-member-directory input[type=image],
    .stem-member-directory input[type=search],
    .stem-member-directory input[type=tel],
    .stem-member-directory input[type=time],
    .stem-member-directory input[type=url],
    .stem-member-directory input[type=week],
    .stem-member-directory select { padding: 10px 5px; width: 100%; min-height: 46px; }

    .stem-member-directory .serach { width: 100%; max-width: 992px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
        .stem-member-directory .serach label { width: 48%; margin: 10px auto; }





    .stem-member-directory .paginator { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 20px; }
        .stem-member-directory .paginator button { display: inline-block; margin: 5px; padding: 2px 10px; border: 1px solid #ccc; background-color: #eee; cursor: pointer; text-decoration: none; color: #000; outline: none; font-size: 18px; line-height: 18px; }
            .stem-member-directory .paginator button:disabled { opacity: 0.5 }
        .stem-member-directory .paginator select { min-height: 0; }

        .stem-member-directory .paginator .result-amount { width: 100%; max-width: 200px; margin-left: 20px; display: flex; align-items: center; }
            .stem-member-directory .paginator .result-amount span { width: 115px; display: inline-block; margin-right: 10px; }
            .stem-member-directory .paginator .result-amount select { width: calc(100% - 135px); text-align: center; padding: 5px; }


@media only screen and (max-width: 600px) {
    .stem-member-directory .paginator button { font-size: 14px; padding: 2px 5px; }

    .stem-member-directory .paginator .result-amount { max-width: 100%; margin: 10px 0; }
}



.stem-member-directory .customer-directory-list { width: 100%; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
    .stem-member-directory .customer-directory-list > div { display: flex; flex-direction: column; align-items: center; margin: 10px; min-height: 450px; width: 100%; max-width: 300px; padding: 0 5px; }
        .stem-member-directory .customer-directory-list > div a { display: inline-block; text-align: center; margin: 5px; }

        .stem-member-directory .customer-directory-list > div .customer-directory-image { width: 300px; height: 350px; background: transparent center center no-repeat; background-size: cover; }


@media only screen and (max-width: 992px) {
    .stem-member-directory .customer-directory-list > div { width: 48%; }
}

@media only screen and (max-width: 768px) {
    .stem-member-directory .customer-directory-list > div { width: 100%; margin: 10px auto; }
}


.stem-member-directory .customer-director-details { width: 100%; display: flex; flex-direction: column; text-align: center; }
    .stem-member-directory .customer-director-details label { text-align: center; }