/*----------------------------------------------------------------------------*\
	ICON SHORTCODE
\*----------------------------------------------------------------------------*/
.mpc-icon { display: inline-block; text-align: center; line-height: 1em; vertical-align: middle; max-width: 100%; overflow: hidden; z-index: 1; transform: translate3d(0, 0, 0); }

.mpc-icon-wrap { position: relative; overflow: hidden; }

.mpc-icon .mpc-regular, .mpc-icon .mpc-hover { position: relative; display: block; width: auto; top: 0; left: 0; }

.mpc-icon .mpc-regular img, .mpc-icon .mpc-hover img { display: block; max-width: 100%; }

.mpc-icon:not(.mpc-icon--image) .mpc-regular, .mpc-icon:not(.mpc-icon--image) .mpc-hover { width: 1.35em; height: 1.35em; line-height: 1.35em; }

.mpc-icon.mpc-icon--character .mpc-regular, .mpc-icon.mpc-icon--character .mpc-hover { width: auto; min-width: 1.35em; }

.mpc-icon.mpc-effect-none .mpc-regular, .mpc-icon.mpc-effect-none .mpc-hover { -webkit-transition: none; transition: none; }

.mpc-icon .mpc-hover { position: absolute; width: 100%; height: 100%; }

.mpc-icon-hover.mpc-effect-slide-up .mpc-hover { transform: translate(0, -100%); }

.mpc-icon-hover.mpc-effect-slide-up .mpc-regular { transform: translate(0, 0); }

.mpc-icon-hover.mpc-effect-slide-up:hover .mpc-hover, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-slide-up .mpc-hover, .mpc-active .mpc-icon-hover.mpc-effect-slide-up .mpc-hover { transform: translate(0, 0); }

.mpc-icon-hover.mpc-effect-slide-up:hover .mpc-regular, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-slide-up .mpc-regular, .mpc-active .mpc-icon-hover.mpc-effect-slide-up .mpc-regular { transform: translate(0, 100%); }

.mpc-icon-hover.mpc-effect-slide-down .mpc-hover { transform: translate(0, 100%); }

.mpc-icon-hover.mpc-effect-slide-down .mpc-regular { transform: translate(0, 0); }

.mpc-icon-hover.mpc-effect-slide-down:hover .mpc-hover, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-slide-down .mpc-hover, .mpc-active .mpc-icon-hover.mpc-effect-slide-down .mpc-hover { transform: translate(0%, 0); }

.mpc-icon-hover.mpc-effect-slide-down:hover .mpc-regular, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-slide-down .mpc-regular, .mpc-active .mpc-icon-hover.mpc-effect-slide-down .mpc-regular { transform: translate(0, -100%); }

.mpc-icon-hover.mpc-effect-slide-left .mpc-hover { transform: translate(-100%, 0); }

.mpc-icon-hover.mpc-effect-slide-left .mpc-regular { transform: translate(0, 0); }

.mpc-icon-hover.mpc-effect-slide-left:hover .mpc-hover, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-slide-left .mpc-hover, .mpc-active .mpc-icon-hover.mpc-effect-slide-left .mpc-hover { transform: translate(0, 0); }

.mpc-icon-hover.mpc-effect-slide-left:hover .mpc-regular, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-slide-left .mpc-regular, .mpc-active .mpc-icon-hover.mpc-effect-slide-left .mpc-regular { transform: translate(100%, 0); }

.mpc-icon-hover.mpc-effect-slide-right .mpc-hover { transform: translate(100%, 0); }

.mpc-icon-hover.mpc-effect-slide-right .mpc-regular { transform: translate(0, 0); }

.mpc-icon-hover.mpc-effect-slide-right:hover .mpc-hover, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-slide-right .mpc-hover, .mpc-active .mpc-icon-hover.mpc-effect-slide-right .mpc-hover { transform: translate(0, 0); }

.mpc-icon-hover.mpc-effect-slide-right:hover .mpc-regular, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-slide-right .mpc-regular, .mpc-active .mpc-icon-hover.mpc-effect-slide-right .mpc-regular { transform: translate(-100%, 0); }

.mpc-icon-hover.mpc-effect-none .mpc-hover, .mpc-icon-hover.mpc-effect-fade .mpc-hover { opacity: 0; }

.mpc-icon-hover.mpc-effect-none .mpc-regular, .mpc-icon-hover.mpc-effect-fade .mpc-regular { opacity: 1; }

.mpc-icon-hover.mpc-effect-none:hover .mpc-hover, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-none .mpc-hover, .mpc-active .mpc-icon-hover.mpc-effect-none .mpc-hover, .mpc-icon-hover.mpc-effect-fade:hover .mpc-hover, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-fade .mpc-hover, .mpc-active .mpc-icon-hover.mpc-effect-fade .mpc-hover { opacity: 1; }

.mpc-icon-hover.mpc-effect-none:hover .mpc-regular, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-none .mpc-regular, .mpc-active .mpc-icon-hover.mpc-effect-none .mpc-regular, .mpc-icon-hover.mpc-effect-fade:hover .mpc-regular, .mpc-parent-hover:hover .mpc-icon-hover.mpc-effect-fade .mpc-regular, .mpc-active .mpc-icon-hover.mpc-effect-fade .mpc-regular { opacity: 0; }
