File: /var/www/prestitravel.com/wp-content/themes/itfirm/assets/scss/elementor/team.scss
.ct-team-grid1, .ct-team-carousel1 {
.item--image img {
width: 100%;
}
.item--title {
font-size: 22px;
margin-bottom: 4px;
color: #fff;
@media #{$max-lg} {
font-size: 20px;
}
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--position {
font-size: 15px;
font-weight: 500;
color: $primary_color;
}
.item--social {
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
border: 1px solid #e9e6e6;
background-color: #fff;
display: inline-flex;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
a {
line-height: 39px;
height: 39px;
width: 36px;
color: #747474;
font-size: 14px;
+ a {
border-left: 1px solid #e9e6e6;
}
&:hover {
color: $primary_color;
}
}
}
.item--desc {
font-size: 15px;
line-height: 24px;
color: #fff;
margin-bottom: 27px;
@include transform(translateY(20px));
@include transition(all 200ms linear 0ms);
@media #{$max-lg} {
font-size: 14px;
line-height: 22px;
margin-bottom: 18px;
}
}
.item--details {
line-height: 35px;
padding: 0 16px;
font-size: 14px;
background: lighten($primary_color_hex, 0.1);
@include transform(translateY(20px));
@include transition(all 200ms linear 0ms);
z-index: 99;
position: relative;
&:hover {
background: lighten($primary_color_hex, 0.1);
}
}
.tem--meta {
position: absolute;
bottom: 0;
left: 0;
right: 0;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
padding: 36px 20px 30px;
z-index: 99;
&:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 100%;
right: 0;
clip-path: polygon(0 24%, 100% 0, 100% 100%, 25% 100%, 0 100%);
-webkit-clip-path: polygon(0 24%, 100% 0, 100% 100%, 25% 100%, 0 100%);
-moz-clip-path: polygon(0 24%, 100% 0, 100% 100%, 25% 100%, 0 100%);
-ms-clip-path: polygon(0 24%, 100% 0, 100% 100%, 25% 100%, 0 100%);
-o-clip-path: polygon(0 24%, 100% 0, 100% 100%, 25% 100%, 0 100%);
@include transition(.1s cubic-bezier(.24,.74,.58,1));
background-color: rgba(#00070b, 0.9);
z-index: -1;
}
}
.item--holder {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
@include background-gradient-bottom(rgba($gradient_to_hex, 0.9) 60%, rgba($gradient_from_hex, 0.9));
padding: 10px 20px 120px 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
@include transition(.15s cubic-bezier(.24,.74,.58,1));
opacity: 0;
@media #{$max-lg} {
padding-left: 15px;
padding-right: 15px;
}
}
.item--line {
z-index: 89;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #f5f5f5;
opacity: 0;
}
.item--inner {
position: relative;
margin-bottom: 50px;
text-align: center;
z-index: 1;
&:before {
content: '';
}
&:hover {
.item--social {
border-color: $primary_color;
a {
border-color: $primary_color;
}
}
.tem--meta {
&:before {
bottom: 2px;
left: 2px;
right: 2px;
background-color: #fff;
}
.item--title {
color: #333333;
}
}
.item--holder {
opacity: 1;
}
.item--desc, .item--details {
@include transform(translateY(0px));
}
.item--line {
opacity: 1;
}
}
}
}
.ct-team-grid2 {
.item--image {
width: 130px;
height: 130px;
padding: 3px;
position: relative;
margin: 0 auto 24px auto;
@include border-radius(130px);
z-index: 1;
&:before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include border-radius(130px);
@include background-gradient-bottom($gradient_color_from, $gradient_color_to);
}
img {
border: 7px solid #fff;
@include border-radius(130px);
}
}
.item--title {
margin-bottom: 8px;
font-size: 20px;
color: #08203a;
}
.item--position {
font-size: 14px;
font-weight: 500;
color: #666666;
margin-bottom: 18px;
}
.item--holder {
@include box-shadow(0 10px 50px rgba(#848484, 0.1));
background-color: #fff;
@include border-radius(10px);
padding: 32px 20px 36px 20px;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
.item--details {
width: 40px;
height: 40px;
display: inline-block;
background-color: #e1e0ff;
font-size: 24px;
font-weight: 500;
line-height: 40px;
border-radius: 100%;
i {
font-style: normal;
@extend .text-gradient;
}
}
}
.item--desc {
color: #ffffff;
line-height: 1.5;
margin-bottom: 20px;
}
.item--social {
padding-top: 5px;
margin-bottom: 10px;
a {
display: inline-block;
width: 35px;
height: 35px;
background-color: #fff;
border-radius: 100%;
line-height: 35px;
font-size: 16px;
color: #747474;
margin: 0 3px 10px 3px;
&:hover i {
@extend .text-gradient;
}
}
}
.item--holder-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
@include border-radius(10px);
padding: 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
opacity: 0;
@include transform(scaleY(0));
transform-origin: bottom center;
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
@include transition(.3s cubic-bezier(.24,.74,.58,1));
&:before {
content: '';
@include border-radius(10px);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@include background-gradient-rotate(-45deg, $gradient_color_from, $gradient_color_to);
opacity: 0.85;
z-index: -1;
}
.item--title {
color: #fff;
a {
color: inherit;
&:hover {
color: inherit;
}
}
}
.item--position {
color: #fff;
}
.item--details {
line-height: 36px;
padding: 00 16px;
color: #08203a;
background: #fff;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
i {
margin-left: 6px;
&:before, &:after {
background-color: #08203a;
}
}
&:hover {
background-color: #08203a;
color: #fff;
i {
&:before, &:after {
background-color: #fff;
}
}
}
}
}
.item--inner {
position: relative;
text-align: center;
margin-bottom: 50px;
&:hover {
.item--holder {
@include box-shadow(0 25px 35px rgba(121, 121, 121, 0.2));
}
.item--holder-hover {
opacity: 1;
@include transform(scaleY(1));
}
}
}
}