@import "../../scss_components/base_variables";
@import "../../scss_components/mixins";
.teacher_content {
    & .teacher_img {
        position: relative;
        overflow: hidden;
        display: inline-block;
        max-width: 100%;
        vertical-align: top;
        & > a {
            text-decoration: none !important;
            display: inline-block;
            max-width: 100%;
            vertical-align: top;
            position: relative;
            z-index: 12;
            &:after {
                @include pseudo(absolute, 100%, 100%);
                top: 0;
                left: 0;
                background: rgba(0,0,0,0.2);
                opacity: 0;
            }
        }
        &:hover {
            & .expert_socials {
                opacity: 1;
                bottom: 15px;
            }
            &>a:after {
                opacity: 1;
            }
        }
        & .expert_socials {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: -100px;
            opacity: 0;
            z-index: 13;
            & a {
                position: relative;
                top: 0;
                display: inline-block;
                margin: 5px 4px;
                height: 29px;
                width: 29px;
                font-size: 13px;
                color: $white;
                border-radius: 50%;
                text-align: center;
                line-height: 29px;
                &.expert-social-facebook {
                    background-color: $facebook;
                }
                &.expert-social-twitter {
                    background-color: $twitter;
                }
                &.expert-social-google-plus {
                    background-color: $google-plus;
                }
                &.expert-social-linkedin {
                    background-color: $linkedin;
                }
                &.expert-social-youtube-play {
                    background-color: $youtube;
                }
                &:after {
                    @include pseudo(absolute, 100%, 6px);
                    bottom: -6px;
                    left: 0;
                    display: none;
                }
                &:hover {
                    top: -6px;
                    &:after {
                        display: block;
                    }
                }
            }
        }
    }
    & .title {
        padding-top: 30px;
        margin: 2px 0 0;
        color: #457992;
    }
    & .job {
        margin-bottom: 14px;
        font-size: 13px;
        color: $grey-text;
    }
    & .content {
        font-size: 13px;
        line-height: 18px;
    }
}

.teacher-col {
    &.col-md-3:nth-child(4n+1) {
        clear: both;
    }
    & .multiseparator {
        margin: 46px 0 49px;
    }
}
