/*------------------------------------------------------------------------
# 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 {
  --color42-base: #2e67fc;
  --color42-base-rgb: 46, 103, 252;
  --color42-white: #ffffff;
  --color42-white-rgb: 255, 255, 255;
  --color42-black: #000000;
  --color42-black-rgb: 0, 0, 0;
  --color42-black2: #2B1E16;
  --color42-black2-rgb: 43, 30, 22;
}
.mx-team42 .mos-img {margin-bottom: 10px;}

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

.mx-team42 {
 position:relative;
 margin-bottom:30px
}
.mx-team42 .inner-box {
 position:relative;
 padding-bottom:30px
}
.mx-team42 .inner-box:hover .image img {
 transform:scale(1.1)
}
.mx-team42 .inner-box:hover .social-links {
 transform:scaleY(1);
 opacity:1;
 visibility:visible
}
.mx-team42 .inner-box:hover .info-box:after {
 height:385px
}
.mx-team42 .inner-box:hover .info-box .name, .mx-team42 .inner-box:hover .info-box .span, .mx-team42 .inner-box:hover .info-box .mos-img {
 color:var(--color42-white)
}
.mx-team42 .info-box {
 position:relative;
 padding:35px 20px 30px;
 text-align:center
}
.mx-team42 .info-box:before {
 height:385px;
 background-color:#f2f3f6
}
.mx-team42 .info-box:after,
.mx-team42 .info-box:before {
 position:absolute;
 left:0;
 top:0;
 width:100%;
 border-radius:20px;
 content:"";
 z-index: -1;
 transition:all .3s ease;
}
.mx-team42 .info-box:after {
 height:100%;
 height:0;
 background-color:var(--color42-black)
}
.mx-team42 .info-box .name {
 position:relative;
 margin-bottom:7px;
 font-size: 21px;
 z-index:2
}
.mx-team42 .info-box .designation {
 position:relative;
 display:block;
 font-size:14px;
 text-transform:capitalize;
 z-index:2;
 line-height:1em;
 transition:all .4s ease
}
.mx-team42 .image-box {
 position:relative;
 padding:0 20px
}
.mx-team42 .image-box .image {
 position:relative;
 overflow:hidden;
 margin-bottom:0;
 border-radius:40px;
 z-index:1
}
.mx-team42 .image-box .image img {
 width:100%;
 transition:all .4s ease
}
.mx-team42 .share-icon {
 position:absolute;
 right:0;
 margin:0;
 bottom:-30px;
 height:60px;
 width:60px;
 line-height:60px;
 text-align:center;
 font-size:16px;
 color:var(--color42-black);
 background-color:var(--color42-base);
 transition:all .3s ease;
 z-index:3;
 border-radius:50%
}
.mx-team42 .social-links {
 position:absolute;
 right:0;
 bottom:40px;
 padding:15px 0;
 margin:0;
 display:flex;
 align-items:center;
 flex-direction:column;
 width:54px;
 background:var(--color42-black);
 transform:scaleY(0);
 transform-origin:bottom;
 z-index:3;
 visibility:hidden;
 opacity:0;
 border-radius:10px;
 transition:all .4s ease
}
.mx-team42 .social-links a {
 position:relative;
 height:35px;
 width:50px;
 display:block;
 font-size:14px;
 line-height:35px;
 text-align:center;
 color:var(--color42-white);
 transition:all .3s ease
}
.mx-team42 .social-links a:hover {
 color:var(--color42-base)
}

.mx-team42 .thm-btn {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  padding: 6px 20px;
  border-radius: 10px;
  background-color: var(--color42-base);
  border: 1px solid var(--color42-base);
  color: var(--color42-white);
  font-size: 16px;
  line-height: 24px;
  z-index: 1;
  text-transform: capitalize;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.mx-team42 .thm-btn:hover {
  color: var(--color42-base);
}
.mx-team42 .thm-btn:hover i {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.mx-team42 .thm-btn::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 10px;
  width: 10px;
  z-index: -1;
  content: "";
  background: #fff;
  -webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

.thm-btn:hover:before {
  width: 300%;
  height: 300%;
  left: 0%;
  right: auto;
}

.social-links .field-label {
  display: none;
}
.social-links ul {
  padding-left: 0rem;
}
.social-links ul li {
  list-style: none;