.specia-icon {

	display: inline-block;

	font-size: 12px;

	cursor: pointer;

	width: 60px;

	height: 60px;

	border-radius: 50%;

	position: relative;

	z-index: 1;

	color: #fff;

}



.specia-icon:after {

	pointer-events: none;

	position: absolute;

	width: 100%;

	height: 100%;

	border-radius: 50%;

	content: '';

	-webkit-box-sizing: content-box; 

	-moz-box-sizing: content-box; 

	box-sizing: content-box;



}



.specia-icon:before {

	font-family: 'Fontawesome';

    speak: none;

    font-size: 24px;

    line-height: 56px;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    display: block;

    -webkit-font-smoothing: antialiased;

    padding: 5px;

}





/* Effect 1 */

.specia-icon-effect-1 .specia-icon {

	-webkit-transition: background 0.2s, color 0.2s;

	-moz-transition: background 0.2s, color 0.2s;

	transition: background 0.2s, color 0.2s;

}



.specia-icon-effect-1 .specia-icon:after {

	top: -4px;

	left: -4px;

	padding: 4px;

	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

	-webkit-transform: scale(.8);

	-moz-transition: -moz-transform 0.2s, opacity 0.2s;

	-moz-transform: scale(.8);

	-ms-transform: scale(.8);

	transition: transform 0.2s, opacity 0.2s;

	transform: scale(.8);

	opacity: 0;

}



/* Effect 1a */

.specia-icon-effect-1a .specia-icon:hover {

	background: rgba(28,49,76,0.1);

	color: #fff;

}



.specia-icon-effect-1a .specia-icon:hover:after {

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

	opacity: 1;

}



/* Effect 1b */

.specia-icon-effect-1b .specia-icon:hover {

	background: #e84c3d;

	color: #fff;

}



.specia-icon-effect-1b .specia-icon:after {

	-webkit-transform: scale(1.2);

	-moz-transform: scale(1.2);

	-ms-transform: scale(1.2);

	transform: scale(1.2);

}



.specia-icon-effect-1b .specia-icon:hover:after {

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

	-ms-transform: scale(1);

	transform: scale(1);

	opacity: 1;

}



/* Effect 2 */

.specia-icon-effect-2 .specia-icon {

	color: #fff;

	box-shadow: 0 0 0 3px #fff;

	-webkit-transition: color 0.3s;

	-moz-transition: color 0.3s;

	transition: color 0.3s;

}



.specia-icon-effect-2 .specia-icon:after {

	top: -2px;

	left: -2px;

	padding: 2px;

	z-index: -1;

	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

	-moz-transition: -moz-transform 0.2s, opacity 0.2s;

	transition: transform 0.2s, opacity 0.2s;

}





/* Effect 2b */

.specia-icon-effect-2b .specia-icon:hover:after {

	-webkit-transform: scale(0);

	-moz-transform: scale(0);

	-ms-transform: scale(0);

	transform: scale(0);

	opacity: 0;

	-webkit-transition: -webkit-transform 0.4s, opacity 0.2s;

	-moz-transition: -moz-transform 0.4s, opacity 0.2s;

	transition: transform 0.4s, opacity 0.2s;

}



.specia-icon-effect-2b .specia-icon:hover {

	color: #fff;

}



/* Effect 3 */

.specia-icon-effect-3 .specia-icon {

	box-shadow: 0 0 0 4px #fff;

	-webkit-transition: color 0.3s;

	-moz-transition: color 0.3s;

	transition: color 0.3s;

}



.specia-icon-effect-3 .specia-icon:after {

	top: -2px;

	left: -2px;

	padding: 2px;

	z-index: -1;

	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;

	-moz-transition: -moz-transform 0.2s, opacity 0.3s;

	transition: transform 0.2s, opacity 0.3s;

}



/* Effect 3a */

.specia-icon-effect-3a .specia-icon {

	color: #ffffff;

}



.specia-icon-effect-3a .specia-icon:hover {

	color: #ffffff;

}



.specia-icon-effect-3a .specia-icon:hover:after {

	-webkit-transform: scale(1.3);

	-moz-transform: scale(1.3);

	-ms-transform: scale(1.3);

	transform: scale(1.3);

	opacity: 0;

}





/* Effect 4 */

.specia-icon-effect-4 .specia-icon {

	width: 60px;

	height: 60px;

}



.specia-icon-effect-4a .specia-icon {

	-webkit-transition: box-shadow 0.2s;

	-moz-transition: box-shadow 0.2s;

	transition: box-shadow 0.2s;

}



.specia-icon-effect-4 .specia-icon:after {

	top: -4px;

	left: -4px;

	padding: 0;

	z-index: 10;

	border: 4px dashed #1c314c;

}



.specia-icon-effect-4 .specia-icon:hover {

	box-shadow: 0 0 0 0 rgba(255,255,255,0);

	color: #fff;

}



/* Effect 4b */

.specia-icon-effect-4b .specia-icon:hover {

	-webkit-transition: box-shadow 0.2s;

	-moz-transition: box-shadow 0.2s;

	transition: box-shadow 0.2s;

}



.specia-icon-effect-4b .specia-icon:hover:after {

	-webkit-animation: spinAround 9s linear infinite;

	-moz-animation: spinAround 9s linear infinite;

	animation: spinAround 9s linear infinite;

}



@-webkit-keyframes spinAround {

	from {

		-webkit-transform: rotate(0deg)

	}

	to {

		-webkit-transform: rotate(360deg);

	}

}

@-moz-keyframes spinAround {

	from {

		-moz-transform: rotate(0deg)

	}

	to {

		-moz-transform: rotate(360deg);

	}

}

@keyframes spinAround {

	from {

		transform: rotate(0deg)

	}

	to {

		transform: rotate(360deg);

	}

}



/* Effect 5 */

.specia-icon-effect-5 .specia-icon {

	overflow: hidden;

	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;

	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;

	transition: background 0.3s, color 0.3s, box-shadow 0.3s;

}



.specia-icon-effect-5 .specia-icon:after {

	display: none;

}



.specia-icon-effect-5 .specia-icon:hover {

	color: #ffffff;

}



.specia-icon-effect-5a .specia-icon:hover:before {

	-webkit-animation: toRightFromLeft 0.3s forwards;

	-moz-animation: toRightFromLeft 0.3s forwards;

	animation: toRightFromLeft 0.3s forwards;

}



@-webkit-keyframes toRightFromLeft {

	49% {

		-webkit-transform: translate(100%);

	}

	50% {

		opacity: 0;

		-webkit-transform: translate(-100%);

	}

	51% {

		opacity: 1;

	}

}

@-moz-keyframes toRightFromLeft {

	49% {

		-moz-transform: translate(100%);

	}

	50% {

		opacity: 0;

		-moz-transform: translate(-100%);

	}

	51% {

		opacity: 1;

	}

}

@keyframes toRightFromLeft {

	49% {

		transform: translate(100%);

	}

	50% {

		opacity: 0;

		transform: translate(-100%);

	}

	51% {

		opacity: 1;

	}

}



.specia-icon-effect-5b .specia-icon:hover:before {

	-webkit-animation: toLeftFromRight 0.3s forwards;

	-moz-animation: toLeftFromRight 0.3s forwards;

	animation: toLeftFromRight 0.3s forwards;

}



@-webkit-keyframes toLeftFromRight {

	49% {

		-webkit-transform: translate(-100%);

	}

	50% {

		opacity: 0;

		-webkit-transform: translate(100%);

	}

	51% {

		opacity: 1;

	}

}

@-moz-keyframes toLeftFromRight {

	49% {

		-moz-transform: translate(-100%);

	}

	50% {

		opacity: 0;

		-moz-transform: translate(100%);

	}

	51% {

		opacity: 1;

	}

}

@keyframes toLeftFromRight {

	49% {

		transform: translate(-100%);

	}

	50% {

		opacity: 0;

		transform: translate(100%);

	}

	51% {

		opacity: 1;

	}

}



.specia-icon-effect-5c .specia-icon:hover:before {

	-webkit-animation: toTopFromBottom 0.3s forwards;

	-moz-animation: toTopFromBottom 0.3s forwards;

	animation: toTopFromBottom 0.3s forwards;

}



@-webkit-keyframes toTopFromBottom {

	49% {

		-webkit-transform: translateY(-100%);

	}

	50% {

		opacity: 0;

		-webkit-transform: translateY(100%);

	}

	51% {

		opacity: 1;

	}

}

@-moz-keyframes toTopFromBottom {

	49% {

		-moz-transform: translateY(-100%);

	}

	50% {

		opacity: 0;

		-moz-transform: translateY(100%);

	}

	51% {

		opacity: 1;

	}

}

@keyframes toTopFromBottom {

	49% {

		transform: translateY(-100%);

	}

	50% {

		opacity: 0;

		transform: translateY(100%);

	}

	51% {

		opacity: 1;

	}

}



.specia-icon-effect-5d .specia-icon:hover:before {

	-webkit-animation: toBottomFromTop 0.3s forwards;

	-moz-animation: toBottomFromTop 0.3s forwards;

	animation: toBottomFromTop 0.3s forwards;

}



@-webkit-keyframes toBottomFromTop {

	49% {

		-webkit-transform: translateY(100%);

	}

	50% {

		opacity: 0;

		-webkit-transform: translateY(-100%);

	}

	51% {

		opacity: 1;

	}

}

@-moz-keyframes toBottomFromTop {

	49% {

		-moz-transform: translateY(100%);

	}

	50% {

		opacity: 0;

		-moz-transform: translateY(-100%);

	}

	51% {

		opacity: 1;

	}

}

@keyframes toBottomFromTop {

	49% {

		transform: translateY(100%);

	}

	50% {

		opacity: 0;

		transform: translateY(-100%);

	}

	51% {

		opacity: 1;

	}

}



/* Effect 6 */

.specia-icon-effect-6 .specia-icon {

	-webkit-transition: background 0.2s, color 0.2s;

	-moz-transition: background 0.2s, color 0.2s;

	transition: background 0.2s, color 0.2s;

}



.specia-icon-effect-6 .specia-icon:hover {

	color: #fff;

}



.specia-icon-effect-6 .specia-icon:hover:before {

	-webkit-animation: spinAround 2s linear infinite;

	-moz-animation: spinAround 2s linear infinite;

	animation: spinAround 2s linear infinite;

}



/* Effect 8 */

.specia-icon-effect-8 .specia-icon {

	-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;

	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;

	transition: transform ease-out 0.1s, background 0.2s;

}



.specia-icon-effect-8 .specia-icon:after {

	top: 0;

	left: 0;

	padding: 0;

	z-index: -1;

	box-shadow: 0 0 0 2px #e84c3d;

	opacity: 0;

	-webkit-transform: scale(0.9);

	-moz-transform: scale(0.9);

	-ms-transform: scale(0.9);

	transform: scale(0.9);

}



.specia-icon-effect-8 .specia-icon:hover {

	-webkit-transform: scale(0.93);

	-moz-transform: scale(0.93);

	-ms-transform: scale(0.93);

	transform: scale(0.93);

	color: #fff;

}



.specia-icon-effect-8 .specia-icon:hover:after {

	-webkit-animation: sonarEffect 1.3s ease-out 75ms;

	-moz-animation: sonarEffect 1.3s ease-out 75ms;

	animation: sonarEffect 1.3s ease-out 75ms;

}



@-webkit-keyframes sonarEffect {

	0% {

		opacity: 0.3;

	}

	40% {

		opacity: 0.5;

		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

	}

	100% {

		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

		-webkit-transform: scale(1.5);

		opacity: 0;

	}

}

@-moz-keyframes sonarEffect {

	0% {

		opacity: 0.3;

	}

	40% {

		opacity: 0.5;

		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

	}

	100% {

		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

		-moz-transform: scale(1.5);

		opacity: 0;

	}

}

@keyframes sonarEffect {

	0% {

		opacity: 0.3;

	}

	40% {

		opacity: 0.5;

		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

	}

	100% {

		box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);

		transform: scale(1.5);

		opacity: 0;

	}

}