Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan sagittis nunc ac tempus. Curabitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan sagittis nunc ac tempus. Curabitur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan sagittis nunc ac tempus. Curabitur.
Williamson
Web Developer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan sagittis nunc ac tempus. Curabitur.
kristina
Web Designer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan sagittis nunc ac tempus. Curabitur.
.demo{ background: #f8f8f8; }
.our-team{
overflow: hidden;
position: relative;
}
.our-team .pic{
padding-bottom: 20px;
margin-bottom: 30px;
}
.our-team .layer-1{
width: 200%;
overflow: hidden;
transform: rotate(10deg) translate(-13%, 13%);
}
.our-team .layer-2{
background: #fff;
overflow: hidden;
transform: rotate(-16deg) translate(-9%, -13%);
}
.our-team .layer-3{
width: 51%;
margin: 0 auto;
transform: rotate(6deg) translateY(5%);
}
.our-team img{
width: 100%;
height: auto;
}
.our-team .social{
width: 50%;
height: 150%;
background: linear-gradient(to right, rgba(244, 205, 3, 0), rgba(3, 176, 244, 0.8));
position: absolute;
bottom: 0;
right: 0;
transform: translateX(100%);
transition: all 0.3s ease-out 0s;
}
.our-team:hover .social{
transform: translateX(0px);
}
.our-team .social-icon{
list-style: none;
padding: 0;
margin: 0;
width: 30px;
position: absolute;
bottom: 95px;
right: 15px;
}
.our-team .social-icon li a{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
background: #fff;
border-radius: 50%;
font-size: 13px;
color: #000;
text-align: center;
margin: 4px 0;
transform: scale(0);
transition: all 0.2s ease-out 0.4s;
}
.our-team:hover .social-icon li a{
transform: scale(1);
}
.our-team .social-icon li a.fa-facebook:hover{ color: #4867aa; }
.our-team .social-icon li a.fa-google-plus:hover{ color: #db4437; }
.our-team .social-icon li a.fa-twitter:hover{ color: #1da1f2; }
.our-team .team-info{
padding: 15px 15px 20px;
margin: 25px;
background: #48c6f7;
border-radius: 3px;
text-align: center;
position: absolute;
bottom: 65px;
left: 0;
right: 0;
transition: all 0.2s ease-out 0s;
}
.our-team:hover .team-info{
background: #fff;
}
.our-team .title{
font-size: 18px;
color: #000;
margin: 0;
}
.our-team .post{
display: block;
font-size: 14px;
font-style: italic;
color: #6c6c6c;
margin-top: 5px;
}
.our-team .description{
padding: 0 20px;
font-size: 14px;
color: #6c6c6c;
text-align: center;
}
@media only screen and (max-width: 990px){
.our-team{ margin-bottom: 20px; }
}
@media only screen and (max-width: 767px){
.our-team .social-icon{ right: 25px; }
.our-team .team-info{ bottom: 30px; }
}
@media only screen and (max-width: 767px){
.our-team .team-info{ bottom: 65px; }
}