/* Effect 19: 3D side */

ul.team-social li a,

.cl-effect-19 a {

	line-height: 32px;

	margin: 2px;

	-webkit-perspective: 800px;

	-moz-perspective: 800px;

	perspective: 800px;

	width: 32px;

}





ul.team-social li a span,

.cl-effect-19 a span {

	position: relative;

	display: inline-block;

	width: 100%;

	background: #eeeeee;

	-webkit-transition: -webkit-transform 0.4s, background 0.4s;

	-moz-transition: -moz-transform 0.4s, background 0.4s;

	transition: transform 0.4s, background 0.4s;

	-webkit-transform-style: preserve-3d;

	-moz-transform-style: preserve-3d;

	transform-style: preserve-3d;

	-webkit-transform-origin: 50% 50% -16px;

	-moz-transform-origin: 50% 50% -16px;

	transform-origin: 50% 50% -16px;

}



ul.team-social li a span::before,

.csstransforms3d .cl-effect-19 a span::before {

	position: absolute;

	top: 0;

	left: 100%;

	width: 100%;

	height: 100%;

	background: #77be32;

	content: attr(data-hover);

	

	-webkit-transition: background 0.4s;

	-moz-transition: background 0.4s;

	transition: background 0.4s;

	-webkit-transform: rotateY(90deg);

	-moz-transform: rotateY(90deg);

	transform: rotateY(90deg);

	-webkit-transform-origin: 0 50%;

	-moz-transform-origin: 0 50%;

	transform-origin: 0 50%;

	pointer-events: none;

	

	font-family: FontAwesome;

	font-style: normal;

	font-weight: normal;

	line-height: 32px;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	color: #FFF;	



}



ul.team-social li.facebook a span::before {

	content: "\f09a";	

}

ul.team-social li.twitter a span::before {

	content: "\f099";	

}

ul.team-social li.gplus a span::before {

	content: "\f0d5";	

}

ul.team-social li.skype a span::before {

	content: "\f17e";	

}





ul.team-social li a:hover span,

ul.team-social li a:focus span,

.cl-effect-19 a:hover span,

.cl-effect-19 a:focus span {

	background: #878787;

	-webkit-transform: rotateY(-90deg);

	-moz-transform: rotateY(-90deg);

	transform: rotateY(-90deg);

}



ul.team-social li a:hover span::before,

ul.team-social li a:focus span::before,

.csstransforms3d .cl-effect-19 a:hover span::before,

.csstransforms3d .cl-effect-19 a:focus span::before {

	background: #77be32;	

}



/* Effect 20: 3D side */



.cl-effect-20 a {

	line-height: 2em;

	-webkit-perspective: 800px;

	-moz-perspective: 800px;

	perspective: 800px;

}



.cl-effect-20 a span {

	position: relative;

	display: inline-block;

	padding: 3px 15px 0;

	background: #587285;

	box-shadow: inset 0 3px #2f4351;

	-webkit-transition: background 0.6s;

	-moz-transition: background 0.6s;

	transition: background 0.6s;

	-webkit-transform-origin: 50% 0;

	-moz-transform-origin: 50% 0;

	transform-origin: 50% 0;

	-webkit-transform-style: preserve-3d;

	-moz-transform-style: preserve-3d;

	transform-style: preserve-3d;

	-webkit-transform-origin: 0% 50%;

	-moz-transform-origin: 0% 50%;

	transform-origin: 0% 50%;

}



.cl-effect-20 a span::before {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: #fff;

	color: #2f4351;

	content: attr(data-hover);



	-webkit-transform: rotateX(270deg);

	-moz-transform: rotateX(270deg);

	transform: rotateX(270deg);

	-webkit-transition: -webkit-transform 0.6s;

	-moz-transition: -moz-transform 0.6s;

	transition: transform 0.6s;

	-webkit-transform-origin: 0 0;

	-moz-transform-origin: 0 0;

	transform-origin: 0 0;

	pointer-events: none;

}



.cl-effect-20 a:hover span,

.cl-effect-20 a:focus span {

	background: #2f4351;

}



.cl-effect-20 a:hover span::before,

.cl-effect-20 a:focus span::before {

	-webkit-transform: rotateX(10deg);	

	-moz-transform: rotateX(10deg);

	transform: rotateX(10deg);

}