
/*------------------------------------------------------------------------
# mod_mx_team Extension
# ------------------------------------------------------------------------
# author    mixwebtemplates
# copyright Copyright (C) 2019 mixwebtemplates.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.mixwebtemplates.com
-------------------------------------------------------------------------*/

:root {
 --color36-primary: #FF4C13;
 --mtitle-color: #000F57;
 --body-color: #4D5765;
 --smoke-color: #EBECF2;
 --black-color: #000000;
 --white-color: #ffffff;
 --light-color: #72849B;
 --yellow-color: #FFB539;
 --success-color: #28a745;
 --error-color: #dc3545;
 --border-color: #E4E4E4;
 --icon-size: 36px;
 --ripple-ani-duration: 5s
}

.mos-img img {display: none !important;}

.mx-team36 .team-img {
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out
}
.mx-team36 .play-btn {
 position:relative;
 z-index:3;
 border:none;
 background-color:transparent;
 padding:0
}
.mx-team36 .play-btn>i {
 background-color:var(--color36-primary);
 color:var(--white-color);
 --icon-size: 40px
            
        
}
.mx-team36 .play-btn:before,
.mx-team36 .play-btn:after {
 background-color:var(--color36-primary)
}
.mx-team36 .play-btn:hover {
 -webkit-transform:rotate(45deg);
 -ms-transform:rotate(45deg);
 transform:rotate(45deg)
}
.mx-team36 .mxt-social {
 position:absolute;
 width:40px;
 bottom:50px;
 right:0
}
.mx-team36 .mxt-social a {
 margin-right:0;
 margin-bottom:7px;
 background-color:var(--white-color);
 color:var(--color36-primary);
 box-shadow:0px 5px 18px rgba(76,88,104,0.06);
 visibility:hidden;
 opacity:0;
 -webkit-transform:translateY(45px);
 -ms-transform:translateY(45px);
 transform:translateY(45px);
 -webkit-transition:0.3s ease-in-out;
 transition:0.3s ease-in-out
}
.mx-team36 .mxt-social a:nth-child(1) {
 -webkit-transition-delay:0s;
 transition-delay:0s
}
.mx-team36 .mxt-social a:nth-child(2) {
 -webkit-transition-delay:0.1s;
 transition-delay:0.1s
}
.mx-team36 .mxt-social a:nth-child(3) {
 -webkit-transition-delay:0.2s;
 transition-delay:0.2s
}
.mx-team36 .mxt-social a:nth-child(4) {
 -webkit-transition-delay:0.3s;
 transition-delay:0.3s
}
.mx-team36 .mxt-social a:hover {
 background-color:var(--color36-primary);
 color:var(--white-color)
}
.mx-team36 .team-social {
 position:absolute;
 top:-20px;
 right:30px
}
.mx-team36 .team-social ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.mx-team36 .team-social:hover .mxt-social a {
 visibility:visible;
 opacity:1;
 -webkit-transform:translateY(0);
 -ms-transform:translateY(0);
 transform:translateY(0)
}
.mx-team36 .team-social:hover .mxt-social a:nth-child(4) {
 -webkit-transition-delay:0s;
 transition-delay:0s
}
.mx-team36 .team-social:hover .mxt-social a:nth-child(3) {
 -webkit-transition-delay:0.1s;
 transition-delay:0.1s
}
.mx-team36 .team-social:hover .mxt-social a:nth-child(2) {
 -webkit-transition-delay:0.2s;
 transition-delay:0.2s
}
.mx-team36 .team-social:hover .mxt-social a:nth-child(1) {
 -webkit-transition-delay:0.3s;
 transition-delay:0.3s
}
.mx-team36:hover .team-img img {
 -webkit-transform:scale(1.08);
 -ms-transform:scale(1.08);
 transform:scale(1.08)
}
.team-card {
 position:relative
}
.team-card .team-img {
 overflow:hidden;
 border-radius:10px 10px 0 0
}
.team-card .team-img img {
 width:100%;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out
}
.team-card .team-title {
 font-size:24px;
 margin-bottom:4px;
 margin-top:-0.24em;
 -webkit-transition:0.1s ease-in-out;
 transition:0.1s ease-in-out
}
.team-card .team-title a {
 color:inherit
}
.team-card .team-title a:hover {
 color:var(--mtitle-color)
}
.team-card .team-desig {
 color:var(--color36-primary);
 display:block;
 margin-bottom:-0.45em;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out
}
.team-card .team-content {
 border-radius:0 0 10px 10px;
 background-color:var(--color36-primary);
 text-align:center;
 padding:40px 15px 40px 15px;
 box-shadow:0px 10px 15px rgba(7,36,95,0.07);
 position:relative;
 z-index:2
}
.team-card .team-content:before {
 content:'';
 width:100%;
 height:100%;
 background-color:var(--white-color);
 position:absolute;
 top:0;
 left:0;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out;
 z-index:-1;
 border-radius:0 0 9px 9px
}
.team-card:hover .team-content:before {
 height:0
}
.team-card:hover .play-btn>i {
 background-color:var(--white-color);
 color:var(--color36-primary)
}
.team-card:hover .play-btn::before,
.team-card:hover .play-btn:after {
 background-color:var(--white-color)
}
.team-card:hover .team-title {
 color:var(--white-color)
}
.team-card:hover .team-desig {
 color:var(--white-color)
}
.team-box {
 position:relative;
 max-width:430px;
 margin:0 auto;
 -webkit-filter:drop-shadow(4px 10px 7px rgba(7,36,95,0.05));
 filter:drop-shadow(4px 10px 7px rgba(7,36,95,0.05))
}
.team-box .team-img {
 overflow:hidden;
 position:relative;
 border-radius:10px 10px 0 0;
 width:calc(100% - 78px)
}
.team-box .team-img img {
 width:100%;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out
}
.team-box .team-content {
 text-align:center;
 width:calc(100% - 78px);
 padding:35px 15px;
 border-radius:0 0 0 10px;
 background-color:var(--white-color)
}
.team-box .team-title {
 font-size:24px;
 margin-bottom:4px;
 margin-top:-0.24em
}
.team-box .team-title a {
 color:inherit
}
.team-box .team-title a:hover {
 color:var(--color36-primary)
}
.team-box .team-desig {
 display:block;
 margin-bottom:0.45em
}
.team-box .mos-img {
 display:block;
 margin-bottom:0.45em
}
.team-box .team-social {
 top:unset;
 bottom:0;
 right:0;
 height:100%;
 width:78px
}
.team-box .team-social:after,
.team-box .team-social:before {
 content:'';
 height:190px;
 width:100%;
 background-color:var(--white-color);
 border-radius:0 10px 10px 0;
 position:absolute;
 bottom:0;
 right:0;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out
}
.team-box .team-social:before {
 -webkit-clip-path:polygon(0 0, 100% 35px, 100% 100%, 0% 100%);
 clip-path:polygon(0 0, 100% 35px, 100% 100%, 0% 100%)
}
.team-box .team-social:after {
 height:0;
 bottom:155px;
 background-color:var(--mtitle-color);
 border-radius:0 10px 0 0;
 z-index:-2
}
.team-box .team-social:hover:after {
 height:calc(100% - 155px)
}
.team-box .team-social:hover .play-btn {
 -webkit-transform:rotate(45deg);
 -ms-transform:rotate(45deg);
 transform:rotate(45deg)
}
.team-box .play-btn {
 position:absolute;
 top:unset;
 bottom:150px;
 left:50%;
 margin-left:-20px
}
.team-box .mxt-social {
 bottom:200px;
 right:50%;
 margin-right:-20px
}
.team-box:hover .team-img {
 border-radius:10px 0 0 0
}
@media (max-width: 375px) {
 .team-box .team-img img {
  height:295px;
  object-fit:cover
 }
 .team-box .team-title {
  font-size:20px;
  margin-bottom:2px
 }
}
.team-one__social li a:hover {
  color: var(--color35-primary);
}
.mxt-social a {
 display:inline-block;
 width:var(--icon-size, 40px);
 height:var(--icon-size, 40px);
 line-height:var(--icon-size, 40px);
 background-color:var(--white-color);
 color:var(--color36-primary);
 font-size:14px;
 text-align:center;
 margin-right:5px;
 border-radius:50%
}
.mxt-social a:last-child {
 margin-right:0
}
.mxt-social a:hover {
 background-color:var(--color36-primary);
 color:var(--white-color)
}
.play-btn {
 display:inline-block;
 position:relative;
 z-index:1
}
.play-btn>i {
 display:inline-block;
 width:var(--icon-size, 60px);
 height:var(--icon-size, 60px);
 line-height:var(--icon-size, 60px);
 text-align:center;
 background-color:var(--white-color);
 color:var(--color36-primary);
 font-size: 14px;
 border-radius:50%;
 z-index:1;
 -webkit-transition:all ease 0.4s;
 transition:all ease 0.4s
}
.play-btn:after,
.play-btn:before {
 content:"";
 position:absolute;
 left:0;
 top:0;
 right:0;
 bottom:0;
 background-color:var(--white-color);
 z-index:-1;
 border-radius:50%;
 -webkit-transition:all ease 0.4s;
 transition:all ease 0.4s
}
.play-btn:after {
 -webkit-animation-delay:2s;
 animation-delay:2s
}
.play-btn:hover:after,
.play-btn:hover::before,
.play-btn:hover i {
 background-color:var(--color36-primary);
 color:var(--white-color)
}
.play-btn:after,
.play-btn:before {
 -webkit-animation-duration:var(--ripple-ani-duration);
 animation-duration:var(--ripple-ani-duration);
 -webkit-animation-timing-function:ease-in-out;
 animation-timing-function:ease-in-out;
 -webkit-animation-iteration-count:infinite;
 animation-iteration-count:infinite;
 -webkit-animation-name:ripple;
 animation-name:ripple
}
@-webkit-keyframes ripple {
 0% {
  -webkit-transform:scale(1);
  transform:scale(1);
  opacity:0
 }
 30% {
  opacity:0.4
 }
 100% {
  -webkit-transform:scale(1.5);
  transform:scale(1.5);
  opacity:0
 }
}
@keyframes ripple {
 0% {
  -webkit-transform:scale(1);
  transform:scale(1);
  opacity:0
 }
 30% {
  opacity:0.4
 }
 100% {
  -webkit-transform:scale(1.5);
  transform:scale(1.5);
  opacity:0
 }
}
.project-icon {
 display:inline-block;
 background-color:var(--color36-primary); 
 padding: 5px 13px;
 font-size:15px;
 color:var(--white-color);
 box-shadow:0px 8px 19px rgba(0, 27, 108, 0.3);
 border-radius:5px;
 text-align:center
}
.project-icon:hover {
 background-color:var(--mtitle-color);
 color:var(--white-color)
}

.mxt-social .field-label {
  display: none !important;
}