.management-team{
    position:relative;
    background:#fff;
}

.management-team .hidden{
    display:none !important;
}

.management-team .intro{
    position:relative;
}

.management-team .intro .entry-title{
    margin:10px 0 20px;   
}

.management-team .intro p a .aligncenter{
    width:100%;
}

.management-team .team-content{
    position:relative;
    display:flex;
    display:-webkit-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    -webkit-flex-wrap:wrap;
}

.management-team .team-content h2{
    text-align:center;
    color:#e11423;
    font-size:24px;
    margin:20px auto;
    width:100%;
}

.management-team .team-content .single-member{
    position:relative;
    width:168px;
    height:168px;
    overflow: hidden;
    margin:5px;
    cursor: pointer;
    border-radius:5px;

}

.management-team .team-content .single-member .photo{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    background:center center no-repeat transparent;
    background-size:cover;
    -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}

.management-team .team-content .single-member:hover .photo{
    -moz-filter: none;
    -o-filter: none;
    -webkit-filter: none;
    -ms-filter:none;
    filter: none;
}

.management-team .team-content .single-member .info{
    position:absolute;
    bottom:-70px;
    left:0;
    height:70px;
    width:100%;
    text-align:center;
    display:flex;
    flex-wrap:wrap;
    align-content: center;
}

.management-team .team-content .single-member:hover .info:after{
    content:"";
    position:absolute;
    bottom:-70px;
    left:0;
    height:70px;
    width:100%;
    transition:all 0.4s ease;
    background:#e11423;
    z-index:1;
    opacity:0.8;
}

.management-team .team-content .single-member:hover .info, .management-team .team-content .single-member:hover .info:after{
    bottom:0;
}

.management-team .team-content .single-member .info h5{
    position:relative;
    z-index: 2;    
    color:#fff;
    font-size:14px;
    font-weight:bold;
    padding:0;
    margin:0 0 3px;
    width:100%;
    line-height:14px;
    padding:0 5px;
    box-sizing:border-box;
}

.management-team .team-content .single-member .info p{
    position:relative;
    z-index: 2;    
    color:#fff;
    font-size:12px;
    line-height:13px;
    padding:0;
    margin:0;
    width:100%;
    padding:0 5px;
    box-sizing:border-box;
}

.overlay-anim{
    position:absolute;
    top:-5000px;
    left:-5000px;
    display:block;
    width:168px;
    height:168px;
    z-index: 1;
    background:#fff;
    opacity: 0;
    box-sizing: border-box;
}

.overlay-anim.animating{
    transition:all 0.4s ease;
    border:1px solid #ccc;
    opacity: 1;
    z-index:10;
}



.overlay-anim.positioning{
    background:none;
}

.overlay-anim.fixed{
    top:50% !important;
    left:50% !important;
    width:600px;
    height:400px;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    width:100%;
    height:100%;
    background:#000;
    opacity:0.6;
    z-index:10000;
    position:fixed;
}

.member-detail{
    position:fixed;
    z-index: -1;
    opacity: 0;
    background:#fff;
    border:1px solid #ccc;
    top:50%;
    left:50%;
    width:600px;
    height:400px;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);

}



.member-detail.show{
    z-index:10001;
    opacity: 1;
}

.member-detail-content{
    position:relative;
    display:flex;
    padding:20px;
    flex-wrap:wrap;
    justify-content: space-between;
}

.member-detail-close{
    position:absolute;
    top:10px;
    right:10px;
    display:block;
    width:30px;
    height:30px;
    z-index:2;
}

.member-detail-close span{
    position:absolute;
    top:10px;
    height:30px;
    width:2px;
    background:#e11423;
}

.member-detail-close span.line-1{
    right:15px;    
    transform:rotate(45deg);
}
.member-detail-close span.line-2{
    right:16px;
    transform:rotate(-45deg);
}

.member-detail-content .side-a{
    position:relative;
    width:150px;
    

}

.member-detail-content .side-a .photo{
    position:relative;
    display:block;
    width:150px;
    height:150px;
    background:center center no-repeat transparent;
    background-size:cover;
}

.member-detail-content .side-b{
    position:relative;
    width:calc(100% - 170px);
    padding:20px 0 0;
}

.member-detail-content .side-b .story-copy{
    position:relative;
    max-height:250px;
    overflow:auto;
    
}

.member-detail-content .side-b h2{
    font-size:24px;
    margin:0 0 10px;
    line-height:24px;
    color:#e11423;
}

.member-detail-content .side-b h3{
    font-size:18px;
    margin:0 0 20px;
    line-height:18px;
}

.member-detail-content .side-b p{
    font-size:14px;
    line-height:20px;
    margin:0;
}



@media (max-width: 1140px){
    .management-team .team-content .single-member{
        width:157px;
        height:157px;
        margin:3px;
    }
    .overlay-anim{
        width:157px;
        height:157px;
    }
}

@media (max-width: 1018px){
     .management-team .team-content .single-member{
        width:236px;
        height:236px;
        margin:5px;
    }
    .overlay-anim{
        width:236px;
        height:236px;
    }
}

@media(max-width:767px){
    .management-team .team-content {
        width:310px;
        margin:auto;
    }
    .management-team .team-content .single-member{
        width:150px;
        height:150px;
        margin:2px;
    }
    .overlay-anim{
        width:150px;
        height:150px;
    }
    .member-detail{
        top:0;
        left:0;
        transform:none;
        -webkit-transform:none;
        width:auto;
        height:auto;
        bottom:0;
        right:0;
    }
    .member-detail-content .side-b{
        width:100%;
    }
    .member-detail-content .side-b .story-copy{
        max-height:none;
    }
}