/*** ============================================= Team Style1 Area Css ============================================= ***/ .team-style1-area { position: relative; display: block; background: #ffffff; padding: 120px 0 80px; z-index: 10; } .team-style1-area .auto-container { max-width: 1600px; } .single-team-style1 { position: relative; display: block; margin-bottom: 40px; } .single-team-style1 .img-holder { position: relative; display: block; padding-bottom: 120px; } .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: 32px 0 32px; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); transition: all 200ms linear; transition-delay: 0.1s; } .single-team-style1:hover .title-holder { box-shadow: none; } .single-team-style1 .title-holder h2 { font-size: 22px; line-height: 30px; font-weight: 700; margin: 0 0 2px; } .single-team-style1 .title-holder h2 a { color: var(--thm-primary); } .single-team-style1 .title-holder h2 a:hover { color: var(--thm-primary); } .single-team-style1 .title-holder h3 { color: var(--thm-gray); font-size: 16px; line-height: 24px; font-weight: 400; font-family: var(--thm-font); } .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.05), inset 0px -2px 0px 0px rgba(238, 41, 106, 0.004); padding: 33px 0px 40px; 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::before { content: ""; position: absolute; left: 0; bottom: 0; right: 0; height: 2px; background: var(--thm-base); transform: scaleX(0); transition: all 100ms linear; transition-delay: 0.5s; } .single-team-style1:hover .title-holder .overlay-title::before { transform: scaleX(1.0); transition: all 900ms linear; transition-delay: 0.3s; } .single-team-style1 .title-holder .overlay-title .social-links { position: relative; display: block; margin-top: 14px; } .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: #f2f3fa; 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-primary); 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-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; }