
/*------------------------------------------------------------------------
# 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 {

	--color31-primary: #E81C2E;
	--color31-dark: #1c222e;
	--color31-dark-3: #798497;
	--color31-light-1: #f1f2f3;
	--color31-white: #fff;
}
.mos-img img {display: none !important;}

@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}.animate__slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}.animate__slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}.animate__slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}
.color-white {
  color: var(--color31-white) !important;
}
.text-color {color: var(--color31-dark-3);}
.text-color-light {color: var(--color31-light-1) !important;}
.color-bg-dark {background: var(--color31-dark);}
.team-style31 {
	position: relative;
	overflow: hidden;
	opacity: 1;
}
.team-style31 .team-content__image {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.team-style31 .team-content__image img {
	width: 100%;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
.team-style31:hover .team-content__image img {
	opacity: 0.5;
	-webkit-transform: translateX(30%);
	transform: translateX(30%);
}
.team-content__image i {
	width: 30px;
	height: 30px;
	background: var(--color31-white);
	border-radius: 50%;
	color: var(--color31-primary);
	text-align: center;
	line-height: 30px;
	margin-left: 8px;
}
.team-style31 .team-content__text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color31-primary);
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-animation: 0.5s ease-in-out 0s normal none 1 running slideOutRight;
	animation: 0.5s ease-in-out 0s normal none 1 running slideOutRight;
}
.team-style31:hover .team-content__text {
	-webkit-transform: none;
	transform: none;
	width: 80%;
	-webkit-animation: 0.5s ease-in-out 0s normal none 1 running slideInLeft;
	animation: 0.5s ease-in-out 0s normal none 1 running slideInLeft;
}
.team-style31 .team-content__text .team-info-center {
	padding: 20px;
	text-align: center;
	background: var(--color31-white);
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 100%;
	background: var(--color31-dark);
}
.team-style31 .team-content__text .team-info-center ul li {
	display: inline-block;
	margin: 5px;
}
.team-style31 .team-content__text .team-info-center ul li a span {
	display: block;
	width: 36px;
	height: 36px;
	background: var(--color31-white);
	color: var(--color31-primary);
	line-height: 36px;
	text-align: center;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.team-style31 .team-content__text .team-info-center ul li a:hover span {
	background: var(--color31-primary);
	color: var(--color31-white);
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.team-info-center h3 {
	margin-bottom: 5px;
	line-height: 1;
}
.team-social-info {
	margin-top: 10px;
}
.team-content__image {
	position: relative;
}
.team-content__image h4 {
	position: absolute;
	bottom: 0;
	left: 0;
	background: var(--color31-dark);
	color: var(--color31-primary);
	padding: 20px;
	border-top-right-radius: 20px;
	font-weight: normal;
}
.team-content__image h4 i {
	margin-right: 8px;
}
.team-style31:hover .team-content__image h4 {
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-animation: 0.5s ease-in-out 0s normal none 1 running slideOutDown;
	animation: 0.5s ease-in-out 0s normal none 1 running slideOutDown;
}
.team-style31 .team-social-info ul {
  padding-left: 0px;  
  list-style: none;
}