/*------------------------------------------------------------------------
# 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 {
  --color48-base: #d80000;
 --gr-color2: #FD8900;
 --title-color: #101840;
 --body-color: #666666;
 --smoke-color: #F8F8F8;
 --smoke-color2: #ECF1FF;
 --black-color: #000000;
 --black-color2: #101018;
 --gray-color: #bdbdbd;
 --white-color: #ffffff;
 --body-bg: #E1E4E5;
 --light-color: #E1E4E5;
 --yellow-color: #E2B93B;
 --success-color: #27AE60;
 --error-color: #EB5757;
 --th-border-color: #fff;
 --main-container: 1320px;
 --container-gutters: 24px;
 --section-space-mobile: 80px;
 --section-title-space: 60px;
 --ripple-ani-duration: 5s
}
.mx-team48 .mos-img img {display: none !important;}

.social-link .field-label  {display: none !important;}
.social-link ul {
  padding-left: 0rem;
}  
.box-img img {
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out
}
.team-grid {
 position:relative;
 z-index:2;
 border-radius:24px;
 text-align:center;
 background-color: rgba(150, 150, 150, 0.1);
 box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
 overflow:hidden
}
.team-grid .box-content {
 -webkit-mask-image:url('data:image/svg+xml,<svg width="424" height="294" viewBox="0 0 424 294" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0V0C132.85 69.2505 291.15 69.2505 424 0V0V294H0V0Z" fill="%23D9D9D9"/></svg>');
 mask-image:url('data:image/svg+xml,<svg width="424" height="294" viewBox="0 0 424 294" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0V0C132.85 69.2505 291.15 69.2505 424 0V0V294H0V0Z" fill="%23D9D9D9"/></svg>');
 -webkit-mask-size:100% 100%;
 mask-size:100% 100%;
 padding:92px 12px 32px 12px;
 -webkit-mask-position:top center;
 mask-position:top center;
 background-color:var(--white-color);
 margin-top:-74px
}
@media (max-width: 375px) {
 .team-grid .box-content {
  -webkit-mask-size:110% 103%;
  mask-size:110% 103%
 }
}
.team-grid .box-title {
 margin-bottom:8px
}
.team-grid .box-img {
 -webkit-mask-image:url('data:image/svg+xml,<svg width="424" height="271" viewBox="0 0 424 271" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 217V217C132.163 289.004 291.837 289.004 424 217V217V0H0V217Z" fill="%23D9D9D9"/></svg>');
 mask-image:url('data:image/svg+xml,<svg width="424" height="271" viewBox="0 0 424 271" preserveAspectRatio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 217V217C132.163 289.004 291.837 289.004 424 217V217V0H0V217Z" fill="%23D9D9D9"/></svg>');
 -webkit-mask-size:100% 100%;
 mask-size:100% 100%;
 -webkit-mask-position:bottom center;
 mask-position:bottom center;
 background-color:var(--white-color)
}
.team-grid .box-desig {
 display: block;
 color:var(--body-color);
 max-width:260px;
 margin:0 auto 25px auto
}
.team-grid .box-social {
 width:60px;
 padding:4px 5px;
 background:var(--white-color);
 border-radius:99px;
 margin:-27px auto 0 auto;
 display:-webkit-box;
 display:-webkit-flex;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 -ms-flex-pack:center;
 justify-content:center;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out;
 overflow:hidden;
 position:relative;
 z-index:3
}
.team-grid .box-btn {
 height:52px;
 -webkit-transition:0.4s ease-in-out;
 transition:0.4s ease-in-out;
 position:absolute;
 top:calc(50% - 26px);
 left:calc(50% - 26px)
}
.team-grid .box-btn i {
 width:52px;
 height:52px;
 line-height:52px;
 font-size:22px;
 background-color:var(--color48-base);
 color:var(--white-color);
 text-align:center;
 border-radius:30px
}
.team-grid .th-social {
 visibility:hidden;
 opacity:0;
 -webkit-transform-origin:center;
 -ms-transform-origin:center;
 transform-origin:center;
 height:52px;
 -webkit-transform:scaleX(0);
 -ms-transform:scaleX(0);
 transform:scaleX(0);
 white-space:nowrap
}
.team-grid .th-social li {
 --icon-size: 42px;
 font-size:18px;
 margin-right:2px;
 margin-top: 4px;
 color:var(--color48-base);
 background-color:var(--white-color)
}
.team-grid .th-social li:hover {
 background-color:var(--title-color);
 color:var(--white-color)
}
.team-grid .th-social li:last-child {
 margin-right:0
}
.team-grid:hover .box-img img {
 -webkit-transform:scale(1.1);
 -ms-transform:scale(1.1);
 transform:scale(1.1)
}
.team-grid:hover .box-btn {
 visibility:hidden;
 opacity:1;
 -webkit-transform:scaleX(0);
 -ms-transform:scaleX(0);
 transform:scaleX(0);
 width:0
}
.team-grid:hover .box-social {
 width:90%;
 background-color:var(--color48-base)
}
.team-grid:hover .th-social {
 -webkit-transform:scaleX(1);
 -ms-transform:scaleX(1);
 transform:scaleX(1);
 visibility:visible;
 opacity:1
}
.th-social li {
 display:inline-block;
 width:var(--icon-size, 46px);
 height:var(--icon-size, 46px);
 line-height:var(--icon-size, 45px);
 background-color:var(--smoke-color);
 color:var(--body-color);
 font-size:16px;
 text-align:center;
 margin-right:5px;
 border-radius:99px
}
.th-social li:last-child {
 margin-right:0
}
.th-social li:hover {
 background-color:var(--theme-color);
 color:var(--white-color)
}
.th-btn {
 position:relative;
 z-index:2;
 overflow:hidden;
 vertical-align:middle;
 display:inline-block;
 border:none;
 text-transform:capitalize;
 text-align:center;
 background-color:var(--color48-base);
 color:var(--white-color);
 font-family:var(--body-font);
 font-size:15px;
 font-weight:400;
 line-height:1;
 padding:20.5px 32px;
 min-width:170px;
 border-radius:30px;
 -webkit-perspective:320px;
 perspective:320px
}
.th-btn:before {
 content:"";
 position:absolute;
 height:0;
 top:50%;
 right:0;
 width:0;
 background-color:var(--title-color);
 z-index:-1;
 -webkit-transition:all 0.4s ease-in-out;
 transition:all 0.4s ease-in-out;
 border-radius:inherit;
 -webkit-transform-origin:top center;
 -ms-transform-origin:top center;
 transform-origin:top center
}
.th-btn i {
 font-size:1em
}
.th-btn:hover,
.th-btn.active {
 color:var(--white-color);
 box-shadow:none
}
.th-btn:hover::before,
.th-btn:hover:after,
.th-btn.active::before,
.th-btn.active:after {
 top:0;
 height:100%;
 width:100%;
 right:unset;
 left:0
}
.th-social .field-label {
  display: none !important;
}

.th-social ul {
  padding-left: 0rem;
}
.th-social ul li {
  list-style: none;