.team-page-section{
position: relative;
padding: 115px 0px 30px;
}
.team-block{
position: relative;
margin-bottom: 70px;
}
.team-block .inner-box{
position: relative;
}
.team-block .inner-box .image{
position: relative;
}
.team-block .inner-box .image img{
position: relative;
width:100%;
display: block;
}
.team-block .inner-box .image .overlay-box{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
display: block;
transform: scale(0,0);
transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
background-color: rgba(238,45,80,0.70);
}
.team-block .inner-box:hover .image .overlay-box{
transform: scale(1,1);
opacity: 1;
visibility: visible;
}
.team-block .inner-box .image .overlay-box .overlay-inner{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: table;
vertical-align: middle;
padding: 10px 40px;
}
.team-block .inner-box .image .overlay-box .overlay-inner .content{
position: relative;
display: table-cell;
vertical-align: middle;
}
.team-block .inner-box .image .overlay-box .social-box{
position:relative;
text-align: center;
}
.team-block .inner-box .image .overlay-box .social-box a {
position: relative;
width: 36px;
height: 36px;
color: #443986;
text-align: center;
line-height: 40px;
font-size: 18px;
margin: 0px 2px;
border-radius: 50%;
display: inline-block;
background-color: #ffffff;
transition: all 300ms ease;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
}
.team-block .inner-box .image .overlay-box .social-box a:hover{
color:#ffffff;
background-color: #443986;
}
.team-block .inner-box .lower-content{
position: relative;
padding-top: 30px;
text-align: center;
}
.team-block .inner-box .lower-content h3{
position: relative;
font-size: 22px;
font-weight: 600;
line-height: 1.3em;
margin-bottom: 4px;
}
.team-block .inner-box .lower-content h3 a{
position: relative;
color: #222222;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.team-block .inner-box .lower-content h3 a:hover{
color: var(--theme-color);
}
.team-block .inner-box .lower-content .designation{
position: relative;
color: var(--theme-color);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
} .team__section {
position: relative;
padding: 120px 0 110px;
}
.team__block {
position: relative;
}
.team__block .inner-box {
position: relative;
margin-bottom: 30px;
text-align: center;
}
.team__block .lower-content {
position: relative;
}
.team__block h4 {
position: relative;
font-size: 22px;
font-weight: 600;
color: #00224f;
margin-bottom: 5px;
}
.team__block .designation {
position: relative;
color: var(--theme-color);
font-size: 17px;
}
.team__block .social-links {
position: absolute;
display: flex;
flex-wrap: wrap;
top: 0;
left: 0;
right: 0;
bottom: 0;
align-items: center;
justify-content: center;
transition: .5s;
opacity: 0;
}
.team__block .inner-box:hover .social-links {
opacity: 1;
}
.team__block .social-links li {
margin: 0 5px;
}
.team__block .social-links a {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
background: #fff;
box-shadow: 0px 20px 40px 0px rgba(38, 32, 81, 0.2);
color: #443986;
font-size: 18px;
display: inline-block;
opacity: 0;
transform: perspective(100px) translateZ(30px) rotate(45deg);
transition: opacity 500ms ease 0ms, transform 500ms ease 0ms, background 500ms ease, color 500ms ease;
}
.team__block .inner-box:hover .social-links a {
opacity: 1;
transform: perspective(100px) translateZ(0px) rotate(0deg);
transition: opacity 500ms ease 300ms, transform 500ms ease 300ms, background 500ms ease, color 500ms ease;
}
.team__block .inner-box .social-links a:hover {
background-color: var(--theme-color);
color: #fff;
}
.team__block .share-icon {
position: absolute;
bottom: -25px;
left: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
background: #fff;
box-shadow: 0px 20px 40px 0px rgba(38, 32, 81, 0.2);
color: #443986;
font-size: 18px;
transition: .5s;
transform: translate(-50%, 0);
}
.team__block .inner-box:hover .share-icon {
background-color: var(--theme-color);
color: #fff;
}
.team__block .image {
position: relative;
margin-bottom: 50px;
display: inline-block;
vertical-align: middle;
}
.team__block .image:before {
position: absolute;
content: '';
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(15, 22, 28, 0.5);
border-radius: 50%;
transition: .5s;
opacity: 0;
}
.team__block .inner-box:hover .image:before {
opacity: 1;
}