/*** ============================================= Team Style1 Area Css ============================================= ***/ .team-style1-area { position: relative; display: block; background: #ffffff; padding: 120px 0 80px; z-index: 10; } .team-style1-area.pd120 { padding-bottom: 120px; } .single-team-style1 { position: relative; display: block; margin-bottom: 40px; } .single-team-style1 .img-holder { position: relative; display: block; padding-bottom: 110px; } .single-team-style1 .img-holder .inner { position: relative; display: block; overflow: hidden; background-color: var(--thm-base); z-index: 1; } .single-team-style1 .img-holder .inner img { width: 100%; transition: all 500ms linear; transition-delay: 0.2s; } .single-team-style1:hover .img-holder .inner img { transform: scale(1.1) rotate(0deg); opacity: 0.20; transition: all 500ms linear; transition-delay: 0.1s; } .single-team-style1 .title-holder { position: absolute; left: 0; bottom: 0; right: 0; padding: 25px 0 25px; } .single-team-style1 .title-holder h2 { font-size: 24px; line-height: 30px; font-weight: 700; } .single-team-style1 .title-holder h2 a { color: var(--thm-black); } .single-team-style1 .title-holder h2 a:hover { color: var(--thm-primary); } .single-team-style1 .title-holder h3 { color: var(--thm-base); font-size: 20px; line-height: 30px; font-weight: 700; font-family: var(--thm-font-2); } .single-team-style1 .title-holder .overlay-title { position: absolute; left: 0; bottom: 0; right: 0; background: #ffffff; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); padding: 26px 0px 30px; z-index: 2; transform: perspective(400px) rotateX(90deg); transform-origin: center; transition: all 500ms linear; transition-delay: 0.1s; } .single-team-style1:hover .title-holder .overlay-title, .single-team-style1.active .title-holder .overlay-title { opacity: 1; transform: perspective(400px) rotateY(0deg); transition: all 300ms linear; transition-delay: 0.1s; } .single-team-style1 .title-holder .overlay-title .social-links { position: relative; display: block; margin-top: 12px; } .single-team-style1 .title-holder .overlay-title .social-links li { position: relative; display: inline-block; margin-right: 6px; } .single-team-style1 .title-holder .overlay-title .social-links li:last-child { margin-right: 0px; } .single-team-style1 .title-holder .overlay-title .social-links li a { position: relative; display: block; width: 50px; height: 50px; background: #ebf1ed; border-radius: 50%; transition: all 200ms linear; transition-delay: 0.1s; z-index: 1; } .single-team-style1 .title-holder .overlay-title .social-links li a:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--thm-base); content: ""; border-radius: 50%; z-index: -1; transform: scale(0.0); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); } .single-team-style1 .title-holder .overlay-title .social-links li a:hover::before { transform: scaleX(1.0); } .single-team-style1 .title-holder .overlay-title .social-links li a i::before { color: var(--thm-black); font-size: 15px; line-height: 50px; transition: all 200ms linear; transition-delay: 0.1s; } .single-team-style1 .title-holder .overlay-title .social-links li a:hover i::before { color: #ffffff; } /*** ============================================= Team Page Css ============================================= ***/ .team-page { position: relative; display: block; background: #ffffff; padding: 120px 0 80px; z-index: 10; } .team-element-page2 .single-team-style1 .title-holder { background: var(--thm-primary); } .team-style1-carousel.owl-carousel .owl-stage-outer { overflow: visible; } .team-style1-carousel.owl-carousel .owl-stage-outer .owl-item { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg) scaleY(0.5); -ms-transform: perspective(400px) rotateX(90deg) scaleY(0.5); transform: perspective(400px) rotateX(90deg) scaleY(0.5); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .5s; transition-property: all; } .team-style1-carousel.owl-carousel .owl-stage-outer .owl-item.active { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg) scaleY(1.0); -ms-transform: perspective(400px) rotateX(0deg) scaleY(1.0); transform: perspective(400px) rotateX(0deg) scaleY(1.0); transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .3s; transition-property: all; }