.teachers-section{
width: 100%;
height: auto;
margin-top: 150px;
}
.teachers-section h1 {
text-align: center;
color: #000000;
margin: 4rem 0 3rem 0;
}
        
.divider-h1 {								/* minor cosmetics */
    display: table; 
    font-size: 24px; 
    text-align: center; 
    width: 75%; 						/* divider width */
    margin: 40px auto;	
    direction: ltr;				/* spacing above/below */
}
.divider-h1 span { display: table-cell; position: relative; }
.divider-h1 span:first-child, .divider-h1 span:last-child {
    width: 43%;
    top: 13px;							/* adjust vertical align */
    -moz-background-size: 100% 2px; 	/* line width */
    background-size: 100% 2px; 			/* line width */
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
}
.divider-h1 span:first-child {				/* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#00000042));
    background-image: -webkit-linear-gradient(180deg, transparent, #00000042);
    background-image: -moz-linear-gradient(180deg, transparent, #00000042);
    background-image: -o-linear-gradient(180deg, transparent, #00000042);
    background-image: linear-gradient(90deg, transparent, #00000042);
}
.divider-h1 span:nth-child(2) {
    color: #000; padding: 0px 5px; width: auto; white-space: nowrap;
}
.divider-h1 span:last-child {				/* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00000042), to(transparent));
    background-image: -webkit-linear-gradient(180deg, #00000042, transparent);
    background-image: -moz-linear-gradient(180deg, #00000042, transparent);
    background-image: -o-linear-gradient(180deg, #00000042, transparent);
    background-image: linear-gradient(90deg, #00000042, transparent);
}
.teachers-section .container{
    width: 85% !important;
}
a {
text-decoration: none;
transition: all 0.2s;
}
.teachers-section a:hover {
color: rgb(0, 104, 0);
text-decoration: none;
}

.teachers-section a:focus {
outline: none;
text-decoration: none;
}


.teachers-section .filterDiv {
float: left;
color: #000;
width: 300px;
height: 340px;
margin: 20px 20px;
display: none;
padding: 0;
padding-bottom:10px;
transition: .3s all ease-in-out;
}
/* tablet size  */
@media (min-width:762px) and (max-width:992px){
    .teachers-section .filterDiv {
        margin: 15px 15px;
    }
}
.teachers-section .filterDiv h5{
    margin-top: 10px;
}
.teachers-section .filterDiv span{
    color: #666;
    font-size: 14px;
}
.teachers-section .filter-image{
    width: 100%;
    overflow: hidden;
}
.teachers-section .filter-image img{
    width: 100%;
    height: 265px;
    transition: all .3s ease-in-out;
}
.teachers-section .filterDiv:hover{
    box-shadow: 0px 5px 5px rgb(230, 230, 230);
}
.teachers-section .filterDiv:hover .filter-image img{
    transform: scale(1.1);
}
.filter-image {
	position: relative;
}
.filter-image::before {
	position: absolute;
	top: 0;
	right: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(right, #0a734700 0%, #0a73 100%);
	background: linear-gradient(to left, #0a734700 0%, #0a73 100%);
	-webkit-transform: skewX(25deg);
	transform: skewX(25deg);
}
.filter-image:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		right: 125%;
	}
}
@keyframes shine {
	100% {
		right: 125%;
	}
}


.teachers-section .show {
display: block;
}

.teachers-section .container {
margin-top: 20px;
overflow: hidden;
}

/* Style the buttons */
.teachers-section #myBtnContainer{
width: 100%;
display: flex;
justify-content: center;
}
.teachers-section #myBtnContainer .row{
    width: 98%;
    display: flex;
    justify-content: center;
}
.teachers-section .btn {
border: none;
outline: none;
padding: 10px 26px;
margin: 5px;
background-color: #0a734703;
transition: all 0.2s;
cursor: pointer;
}

.teachers-section .btn:hover {
background-color: #0a734714;
}

.teachers-section .btn.active {
background-color: #0a7347;
color: white;
}

.is-animated {
animation: .6s zoom-in;
}

@keyframes zoom-in {
0% {
    transform: scale(.1);
} 
100% {
    transform: none;
}
}

.teachers-section .scale-in-center {
    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes scale-in-center {
0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}
}
@keyframes scale-in-center {
0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}
}
.staff-team-section{
    margin-top: 100px;
}
.staff-team-section .card{
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.189);
    background-color: rgb(248, 248, 248);
    box-shadow: 0px 10px 10px rgb(226, 226, 226);
    cursor: default;
    margin-bottom: 40px;
}
.staff-team-section .card .card-body{
    padding: 0;
}
.staff-team-section .card .card-body .card-text{
    margin:15px 0 10px;
    font-size: 21px;
}
.staff-team-section .card img{
    max-height:250px !important;
    border-bottom: 5px solid #0a734747;

}
.staff-team-section .container{
    width: 80% !important;
    
}
@media (max-width:762px){
    .divider-h1 span:first-child, .divider-h1 span:last-child {
        width: 23%;
    }
    /* make buttons smaller */
    .teachers-section .btn {
        padding: 8px 13px;
        margin: 10px;
    }
}