.profile-card {
display: block;
position: relative;
transition: all .3s;
}
.profile-card img {
display: block;
vertical-align: middle;
width: 100%;
}
.profile-card .title-text {
background: rgba(196,30,51,.5);
bottom: 0;
color: #fff;
left: 0;
letter-spacing: 2px;
padding: 5px 10px;
position: absolute;
right: 0;
text-transform: uppercase;
transition: all .3s ease;
z-index: 2;
width: 100%;
}
.profile-card h5 {
font-family: 'BrandonGrotesque-Regular', sans-serif;
margin-bottom: 0;
}
.profile-card .title {
font-size: 13px;
}
.profile-card .profile-info {
display: none;
}
.profile-card .view-profile {
background: rgba(196,30,51,.4);
bottom: 0;
color: #fff;
cursor: pointer;
left: 0;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
transition: all .3s ease;
z-index: 10;
}
.profile-card:hover .view-profile {
opacity: 1;
}
.profile-card .view-profile .font-icon {
background: #000;
border-radius: 50%;
color: #fff;
display: block;
height: 36px;
line-height: 31px;
margin-left: -18px;
margin-top: -18px;
left: 50%;
position: absolute;
text-align: center;
top: 50%;
vertical-align: middle;
width: 36px;
}
.profile-card .view-profile .font-icon::before {
margin-left: -1px;
vertical-align: middle;
}
.viewed {
display: none;
}
.profile-box {
background: #f1f1f1;
border: 1px solid #c41e33;
padding: 1.4rem;
position: relative;
}
#img-here img {
display: block;
width: 100%;
}
#title-here {
border-bottom: 1px solid #fff;
margin-bottom: 1rem;
padding-bottom: 1rem;
}
#title-here h5 {
font-family: 'BrandonGrotesque-Regular', sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 32px;
margin-bottom: 0;
}
#title-here .title {
font-size: 20px;
line-height: 22px;
}
#text-info {
background: #011023;
color: #fff;
padding: 1rem;
}
#close-me {
color: #444;
cursor: pointer;
height: 14px;
line-height: 14px;
opacity: 0;
position: absolute;
right: 5px;
top: 4px;
text-align: center;
transition: opacity .3s ease, color .3s ease;
width: 14px;
z-index: 10;
}
#close-me:hover {
color: #c41e33;
}
#profile-box:hover #close-me {
opacity: 1;
}