/* ===

Theme Name: SLE
Version: 1.2.0
Description: The Template is created for TemplateMonster
Author: Koval Web

*=== */
.team-member-item .tmi-sl-bordered > li {
    margin-right: 0.75rem;
}

.team-member-item .tmi-sl-bordered > li:last-child {
    margin-right: 0;
}

.team-member-item .tmi-sl-bordered > li:hover > a {
    fill: var(--accent);
    border-color: var(--accent);
}

.team-member-item .tmi-sl-bordered > li > a {
    border: 1px solid white;
    width: 2.25em;
    height: 2.25em;
}

.team-member-item .tmi-photo::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s;
}

.tmi-collection {
    position: relative;
}

.tmi-collection:hover .tmi-photo-collection {
    transform: translateY(-0.625rem);
}

.tmi-collection:hover .tmi-photo-collection::before {
    opacity: 1;
}

.tmi-collection:hover .tmi-photo-collection::after {
    opacity: 0.7;
}

.tmi-collection:hover .tmi-photo-collection .el-collection::before {
    transform: rotate(4deg);
}

.tmi-collection:hover .tmi-photo-collection .el-collection::after {
    transform: rotate(-4deg);
}

.tmi-collection:hover .tmi-photo-collection .tmi-photo::before {
    opacity: 0;
}

.tmi-collection:hover .social-links {
    opacity: 1;
}

.tmi-collection .social-links {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 2;
    transition: opacity 0.2s;
}

.tmi-collection .social-links > li > a {
    fill: white;
}

.tmi-photo-collection {
    position: relative;
    transition: all 0.2s;
}

.tmi-photo-collection::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.tmi-photo-collection::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(180deg, rgba(2, 2, 2, 0) 0%, #020202 100%);
    opacity: 0;
    transition: opacity 0.2s;
}

.tmi-photo-collection .el-collection::before, .tmi-photo-collection .el-collection::after {
    transform: rotate(0);
}

.tmi-photo-collection .tmi-photo::before {
    background-color: #151515;
    opacity: 0.3;
}

.tmi-photo-bg:hover .tmi-photo::before {
    opacity: 0.7;
}

.tmi-photo-bg:hover .social-links {
    opacity: 1;
}

.tmi-photo-bg .tmi-details {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.tmi-photo-bg .social-links {
    position: absolute;
    right: 0;
    bottom: 1.5rem;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 2;
    transition: opacity 0.2s;
    display: block;
}

.tmi-photo-bg .social-links > li {
    margin: 0 0 0.75rem 0;
}

.tmi-photo-bg .social-links > li:last-child {
    margin-bottom: 0;
}

.tmi-photo-bg .social-links > li:hover > a {
    fill: white;
    border-color: white;
}

.tmi-photo-bg .social-links > li > a {
    fill: white;
}

.tmi-photo-bg .tmi-photo::before {
    background-color: var(--accent);
    opacity: 0;
}

.tmi-absolute::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 160px;
    background: linear-gradient(180deg, rgba(2, 2, 2, 0) 0%, #020202 100%);
    opacity: 1;
    transition: opacity 0.2s;
}

.tmi-absolute:hover .tmi-photo::before {
    opacity: 0.7;
}

.tmi-absolute {
    color: white;
}

.tmi-absolute .social-links {
    opacity: 1;
}

.tmi-absolute .social-links > li {
    margin-right: 0;
}

.tmi-absolute .social-links > li > a {
    fill: white;
}

.tmi-absolute .tmi-info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 1.25rem;
    z-index: 3;
}

.tmi-absolute .tmi-info::after {
    content: "";
    position: absolute;
    left: -4px;
    top: 1.75rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent);
}

.tmi-absolute .tmi-details {
    border-bottom: 1px solid white;
    padding-top: 0;
}

.tmi-absolute .tmi-photo::before {
    background: linear-gradient(180deg, rgba(239, 62, 22, 0) 0%, var(--accent) 100%);
    opacity: 0;
}

.tmi-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tmi-details {
    position: relative;
    padding: 1rem 0;
}

.tmi-details .tmi-heading {
    margin-bottom: 0.5rem;
}

.tmi-position {
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .tmi-absolute .tmi-info {
        padding: 2rem;
    }

    .tmi-absolute .tmi-info::after {
        top: 2.75rem;
    }
}