/*------------------------------------------------------------------------
# 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 {
 --color33-primary: #E81C2E;
}
.mos-img img {display: none !important;}
.mx-team,
.mx-team .mx-name a {
 transition:all .5s
}
.mx-team .mx-content {
 position:relative;
 transition:all .5s
}
.mx-team .mx-media img {
 width:100%
}
.mx-team .mx-position {
 display:block
}
.mx-team33 {
 margin-bottom:100px;
 position:relative
}
@media only screen and (max-width:767px) {
 .mx-team33 {
  margin-bottom:60px
 }
}
.mx-team33 .mx-media {
 border-right:5px solid var(--color33-primary);
 transition:all .5s
}
.mx-team33 .mx-media img {
 object-fit:cover;
 padding-bottom:20px
}
.mx-team33 .mx-media .overlay-content {
 position:absolute
}
.mx-team33 .social {
 position:absolute;
 right:0;
 top:5px;
 z-index:3
}
.mx-team33 .social li {
 background-color:#9f3a00;
 background-color:var(--color33-primary);
 height:40px;
 line-height:40px;
 margin-bottom:5px;
 opacity:0;
 list-style: none;
 position:relative;
 text-align:center;
 -webkit-transform:translateX(50px) skewY(-12deg);
 transform:translateX(50px) skewY(-12deg);
 width:40px
}
.mx-team33 .social li a {
 color:#fff;
 display:inline-block;
 font-size:16px;
 height:100%;
 -webkit-transform:skewY(12deg);
 transform:skewY(12deg);
 width:100%
}
.mx-team33 .social li:first-child {
 transition:.1s
}
.mx-team33 .social li:nth-child(2) {
 transition:.2s
}
.mx-team33 .social li:nth-child(3) {
 transition:.3s
}
.mx-team33 .social li:nth-child(4) {
 transition:.4s
}
.mx-team33 .social li:nth-child(5) {
 transition:.5s
}
.mx-team33 .social li:nth-child(6) {
 transition:.6s
}
.mx-team.style-7 .social li:nth-child(7) {
 transition:.7s
}
.mx-team33 .mx-info {
 background-color:var(--color33-primary);
 bottom:60px;
 color:#fff!important;
 font-size:16px;
 margin-bottom:0;
 padding:12px 43px 12px 18px;
 position:absolute;
 right:0;
 transition:all .5s;
 width:90%;
 z-index:2
}
.mx-team33 .mx_read_link a {
 background-color:var(--color33-primary);
 top:20px;
 color:#fff!important;
 font-size:16px;
 margin-bottom:0;
 padding:7px 18px;
 position:absolute;
 left:0px;
 opacity:0;
 transition:all .5s;
 -webkit-transform:skewY(-12deg);
 transform:skewY(-12deg);
 z-index:2
}
.mx-team33.active .mx_read_link a ,
.mx-team33:hover .mx_read_link a  {
 opacity:1;
 -webkit-transform:skewY(-12deg);
 transform:skewY(-12deg);
}
.mx-team33 .mx-position {
 background-color:var(--color33-primary);
 bottom:-60px;
 color:#fff!important;
 font-size:21px;
 font-weight:500;
 margin-bottom:0;
 padding:12px 25px 12px 12px;
 position:absolute;
 right:0;
 text-align:end;
 text-transform:uppercase;
 transition:all .5s;
 width:75%;
 z-index:2
}
@media only screen and (max-width:1199px) {
 .mx-team33 .mx-position {
  bottom:-50px;
  font-size:16px;
  padding:8px 25px
 }
 .mx-team33 .mx-info {
  bottom:40px;
 }
}
@media only screen and (max-width:767px) {
 .mx-team33 .mx-position {
  padding-left:0;
  padding-right:18px
 }
 .mx-team33 .mx-info {
  bottom:40px;
 }
}
@media only screen and (max-width:575px) {
 .mx-team33 .mx-position {
  width:60%
 }
 .mx-team33 .mx-info {
  bottom:40px;
 }
}
.mx-team33 .mx-name {
 background-color:#f5f5f5;
 bottom:-15px;
 font-size:30px;
 font-weight:700;
 margin-bottom:0;
 padding:25px;
 position:absolute;
 right:0;
 text-align:right;
 text-transform:uppercase;
 width:95%;
 z-index:1
}
.mx-team33 .mx-name,
.mx-team33 .mx-name a {
 color:var(--color33-primary)
}
.mx-team33 .mx-name:after {
 background:var(--color33-primary);
 content:"";
 height:100%;
 left:0;
 opacity:0;
 position:absolute;
 top:0;
 transition:all .5s;
 width:100%;
 z-index:-1
}
@media only screen and (max-width:1199px) {
 .mx-team33 .mx-name {
  font-size:30px;
  font-weight:600;
  padding:17px 25px 17px 0
 }
}
@media only screen and (max-width:1480px) {
 .mx-team33 .mx-name {
  font-size:25px;
  width:100%
 }
}
@media only screen and (max-width:767px) {
 .mx-team33 .mx-name {
  padding-left:0;
  padding-right:18px
 }
}
@media only screen and (max-width:575px) {
 .mx-team33 .mx-name {
  width:85%
 }
}
.mx-team33 .mx-content {
 position:absolute;
 -webkit-transform:skewY(-12deg);
 transform:skewY(-12deg);
 width:100%
}
.mx-team33.active .social li,
.mx-team33:hover .social li {
 opacity:1;
 -webkit-transform:translateY(0) skewY(-12deg);
 transform:translateY(0) skewY(-12deg)
}
.mx-team33.active .mx-media,
.mx-team33:hover .mx-media {
 border-color:var(--color33-primary);
}
.mx-team33.active .mx-content .mx-name,
.mx-team33.active .mx-content .mx-name a,
.mx-team33:hover .mx-content .mx-name,
.mx-team33:hover .mx-content .mx-name a {
 color:#fff
}
.mx-team33.active .mx-content .mx-name:after,
.mx-team33:hover .mx-content .mx-name:after {
 box-shadow:0 15px 20px 0px rgba(0,0,0,.2);
 opacity:1
}
.mx-team33.active .mx-content .mx-position,
.mx-team33:hover .mx-content .mx-position {
 background-color:#232323;
 color:#ff8139!important;
 color:var(--color33-primary)!important
}

.mx-team33:hover .mx-content .mx-info  {
 background-color:#fff;
 color:#333!important;
}