ul.staff-list { margin: 0; padding: 0; display: flex; flex-wrap: wrap; list-style: none; width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; }
ul.staff-list li { margin: 10px; padding: 0; width: calc(25% - 20px); background-color: #f6f6f6; border-bottom: 5px solid #189AD6; }
ul.staff-list li > a { display: block; line-height: 0; }
ul.staff-list img { width: 100%; }
ul.staff-list li .staff-short { width: 100%; padding: 20px; }
ul.staff-list li .staff-short h5 { font-size: 16px; margin-bottom: 0; }
ul.staff-list li .staff-short span { color: #19C333; font-size: 14px; text-align: left; display: block; }

/*---------------------Single Staff Page----------------*/
.staff-single { display: flex; flex-wrap: wrap; }
.staff-single .staff-left { min-width: 228px; max-width: 228px; }
.staff-single .staff-right { flex: 1 0 0%; margin-left: 30px; }
.staff-right h3 { border-bottom: 1px solid #189AD6; margin-bottom: 15px; padding-bottom: 15px; font-size: 22px; line-height: normal; }
.staff-right h3 span { font-size: 15px; font-weight: 400; line-height: 18px; color: #19C333; margin-left: 5px; }

/** styles for filter / masonary list */
.masonary-list { margin: 0; margin-bottom: 20px; padding: 0; display: flex; flex-wrap: wrap; list-style: none; }
.masonary-list li { margin: 0 5px; }
.masonary-list li .current { background: #189AD6; }

/*---------------Responsive Css------------*/
@media (max-width:992px) {
	ul.staff-list li { width: calc(33.33% - 20px); }
	.staff-single .staff-left { width: 180px; }
}
@media (max-width:767px) {
	ul.staff-list li { width: calc(50% - 20px); }
}
@media (max-width:640px) {
	.staff-single .staff-left { margin-bottom: 20px; }
	.staff-single .staff-right { flex: 1 0 100%; margin-left: 0; }
}
@media (max-width:480px) {
	ul.staff-list li { width: 100%; }
}