/* ========== ICON HOVER EFFECT ========== */

	/* ===== ICON SETTING ===== */
		.fa-effect{
			display: inline-block;
			font-size: 0px;
			cursor: pointer;
			margin: 15px 30px;
			width: 90px;
			height: 90px;
			border-radius: 50%;
			text-align: center;
			position: relative;
			z-index: 1;
			color: #fff;
		}

		.fa-effect: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;
		}

		.fa-effect:before {
			speak: none;
			font-size: 48px;
			line-height: 90px;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			display: block;
			-webkit-font-smoothing: antialiased;
		}
	/* ===== END ICON SETTING ===== */


	/* ========== ICON HOVER EFFECT 1 ========== */

		.icon-effect-1 .fa-effect {
			background: rgba(255,255,255,0.1);
			-webkit-transition: background 0.2s, color 0.2s;
			-moz-transition: background 0.2s, color 0.2s;
			transition: background 0.2s, color 0.2s;
		}

		.icon-effect-1 .fa-effect:after {
			top: -7px;
			left: -7px;
			padding: 7px;
			box-shadow: 0 0 0 4px #fff;
			-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;
		}
		
			/* ========== ICON HOVER EFFECT 1A ========== */

				.icon-effect-1A .fa-effect:hover {
					background: rgba(255,255,255,1);
					color: #41ab6b;
				}

				.icon-effect-1A .fa-effect:hover:after {
					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					-ms-transform: scale(1);
					transform: scale(1);
					opacity: 1;
				}
			/* ========== END ICON HOVER EFFECT 1A ========== */
			
			
			/* ========== ICON HOVER EFFECT 1B ========== */

				.icon-effect-1B .fa-effect:hover {
					background: rgba(255,255,255,1);
					color: #41ab6b;
				}

				.icon-effect-1B .fa-effect:after {
					-webkit-transform: scale(1.2);
					-moz-transform: scale(1.2);
					-ms-transform: scale(1.2);
					transform: scale(1.2);
				}

				.icon-effect-1B .fa-effect:hover:after {
					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					-ms-transform: scale(1);
					transform: scale(1);
					opacity: 1;
				}
			/* ========== END ICON HOVER EFFECT 1B ========== */
	/* ========== END ICON HOVER EFFECT 1 ========== */
	
	
	/* ========== ICON HOVER EFFECT 2 ========== */

		.icon-effect-2 .fa-effect {
			color: #eea303;
			box-shadow: 0 0 0 3px #fff;
			-webkit-transition: color 0.3s;
			-moz-transition: color 0.3s;
			transition: color 0.3s;
		}

		.icon-effect-2 .fa-effect:after {
			top: -2px;
			left: -2px;
			padding: 2px;
			z-index: -1;
			background: #fff;
			-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;
		}

			/* ========== ICON HOVER EFFECT 2A ========== */

				.icon-effect-2A .fa-effect:hover {
					color: #eea303;
				}

				.icon-effect-2A .fa-effect:hover:after {
					-webkit-transform: scale(0.85);
					-moz-transform: scale(0.85);
					-ms-transform: scale(0.85);
					transform: scale(0.85);
				}
			/* ========== END ICON HOVER EFFECT 2A ========== */
			
			
			/* ========== ICON HOVER EFFECT 2B ========== */

				.icon-effect-2B .fa-effect: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;
				}

				.icon-effect-2B .fa-effect:hover {
					color: #fff;
				}
			/* ========== END ICON HOVER EFFECT 2B ========== */
	/* ========== END ICON HOVER EFFECT 2 ========== */


	/* ========== ICON HOVER EFFECT 3 ========== */
	
		.icon-effect-3 .fa-effect {
			box-shadow: 0 0 0 4px #fff;
			-webkit-transition: color 0.3s;
			-moz-transition: color 0.3s;
			transition: color 0.3s;
		}

		.icon-effect-3 .fa-effect:after {
			top: -2px;
			left: -2px;
			padding: 2px;
			z-index: -1;
			background: #fff;
			-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;
		}

			/* ========== ICON HOVER EFFECT 3A ========== */
			
				.icon-effect-3A .fa-effect {
					color: #f06060;
				}

				.icon-effect-3A .fa-effect:hover {
					color: #fff;
				}

				.icon-effect-3A .fa-effect:hover:after {
					-webkit-transform: scale(1.3);
					-moz-transform: scale(1.3);
					-ms-transform: scale(1.3);
					transform: scale(1.3);
					opacity: 0;
				}
			/* ========== END ICON HOVER EFFECT 3A ========== */
			
			
			/* ========== END ICON HOVER EFFECT 3B ========== */
			
				.icon-effect-3B .fa-effect {
					color: #fff;
				}

				.icon-effect-3B .fa-effect:hover {
					color: #f06060;
				}

				.icon-effect-3B .fa-effect:after {
					-webkit-transform: scale(1.3);
					-moz-transform: scale(1.3);
					-ms-transform: scale(1.3);
					transform: scale(1.3);
					opacity: 0;
				}

				.icon-effect-3B .fa-effect:hover:after {
					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					-ms-transform: scale(1);
					transform: scale(1);
					opacity: 1;
				}
			/* ========== END ICON HOVER EFFECT 3B ========== */
	/* ========== END ICON HOVER EFFECT 3 ========== */

	
	/* ========== END ICON HOVER EFFECT 4 ========== */
	
		.icon-effect-4 .fa-effect {
			width: 92px;
			height: 92px;
			box-shadow: 0 0 0 4px rgba(255,255,255,1);	
		}

			/* ========== END ICON HOVER EFFECT 4A ========== */
			
				.icon-effect-4A .fa-effect {
					-webkit-transition: box-shadow 0.2s;
					-moz-transition: box-shadow 0.2s;
					transition: box-shadow 0.2s;
				}

				.icon-effect-4 .fa-effect:before {
					line-height: 92px;
				}

				.icon-effect-4 .fa-effect:after {
					top: -4px;
					left: -4px;
					padding: 0;
					z-index: 10;
					border: 4px dashed #fff;
				}

				.icon-effect-4 .fa-effect:hover {
					box-shadow: 0 0 0 0 rgba(255,255,255,0);
					color: #fff;
				}
			/* ========== END ICON HOVER EFFECT 4A ========== */
			
			
			/* ========== END ICON HOVER EFFECT 4B ========== */
			
				.icon-effect-4B .fa-effect:hover {
					-webkit-transition: box-shadow 0.2s;
					-moz-transition: box-shadow 0.2s;
					transition: box-shadow 0.2s;
				}

				.icon-effect-4B .fa-effect: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);
					}
				}			
			/* ========== END ICON HOVER EFFECT 4B ========== */
	/* ========== END ICON HOVER EFFECT 4 ========== */


	/* ========== ICON HOVER EFFECT 5 ========== */
					
		.icon-effect-5 .fa-effect {
			box-shadow: 0 0 0 4px rgba(255,255,255,1);
			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;
		}

		.icon-effect-5 .fa-effect:after {
			display: none;
		}

		.icon-effect-5 .fa-effect:hover {
			background: rgba(255,255,255,1);
			color: #702fa8;
			box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
		}
		
			/* ========== ICON HOVER EFFECT 5A ========== */
					
				.icon-effect-5A .fa-effect: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;
					}
				}
			/* ========== END ICON HOVER EFFECT 5A ========== */
			

			/* ========== ICON HOVER EFFECT 5B ========== */

				.icon-effect-5B .fa-effect: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;
					}
				}
			/* ========== END ICON HOVER EFFECT 5B ========== */
			

			/* ========== ICON HOVER EFFECT 5C ========== */
			
				.icon-effect-5C .fa-effect: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;
					}
				}
			/* ========== END ICON HOVER EFFECT 5C ========== */
			
			
			/* ========== ICON HOVER EFFECT 5D ========== */
			
				.icon-effect-5D .fa-effect: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;
					}
				}
			/* ========== END ICON HOVER EFFECT 5D ========== */
	/* ========== END ICON HOVER EFFECT 5 ========== */
	
	
	/* ========== ICON HOVER EFFECT 6 ========== */
	
		.icon-effect-6 .fa-effect {
			box-shadow: 0 0 0 4px rgba(255,255,255,1);
			-webkit-transition: background 0.2s, color 0.2s;
			-moz-transition: background 0.2s, color 0.2s;
			transition: background 0.2s, color 0.2s;
		}

		.icon-effect-6 .fa-effect:hover {
			background: rgba(255,255,255,1);
			color: #64bb5d;
		}

		.icon-effect-6 .fa-effect:hover:before {
			-webkit-animation: spinAround 2s linear infinite;
			-moz-animation: spinAround 2s linear infinite;
			animation: spinAround 2s linear infinite;
		}

	/* ========== END ICON HOVER EFFECT 6 ========== */
	
	
	/* ========== ICON HOVER EFFECT 7 ========== */
	
		.icon-effect-7 .fa-effect {
			box-shadow: 0 0 0 4px rgba(255,255,255,1);
			-webkit-transition: background 0.2s, color 0.2s;
			-moz-transition: background 0.2s, color 0.2s;
			transition: background 0.2s, color 0.2s;	
		}

		.icon-effect-7 .fa-effect:hover {
			color: #fff;
		}

		.icon-effect-7 .fa-effect:after {
			top: -8px;
			left: -8px;
			padding: 8px;
			z-index: -1;
			opacity: 0;
		}
		
			/* ========== END ICON HOVER EFFECT 7A ========== */
			
				.icon-effect-7A .fa-effect:after {
					box-shadow: 0 0 0 rgba(255,255,255,1);
					-webkit-transition: opacity 0.2s, box-shadow 0.2s;
					-moz-transition: opacity 0.2s, box-shadow 0.2s;
					transition: opacity 0.2s, box-shadow 0.2s;
				}

				.icon-effect-7A .fa-effect:hover:after {
					opacity: 1;
					box-shadow: 3px 3px 0 rgba(255,255,255,1);
				}

				.icon-effect-7A .fa-effect:before {
					-webkit-transform: scale(0.8);
					-moz-transform: scale(0.8);
					-ms-transform: scale(0.8);
					transform: scale(0.8);
					opacity: 0.7;
					-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;
				}

				.icon-effect-7A .fa-effect:hover:before {
					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					-ms-transform: scale(1);
					transform: scale(1);
					opacity: 1;
				}

			/* ========== END ICON HOVER EFFECT 7A ========== */
			
		
			/* ========== ICON HOVER EFFECT 7B ========== */
			
				.icon-effect-7B .fa-effect:after {
					box-shadow: 3px 3px rgba(255,255,255,1);
					-webkit-transform: rotate(-90deg);
					-moz-transform: rotate(-90deg);
					-ms-transform: rotate(-90deg);
					transform: rotate(-90deg);
					-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
					-moz-transition: opacity 0.2s, -moz-transform 0.2s;
					transition: opacity 0.2s, transform 0.2s;
				}

				.icon-effect-7B .fa-effect:hover:after {
					opacity: 1;
					-webkit-transform: rotate(0deg);
					-moz-transform: rotate(0deg);
					-ms-transform: rotate(0deg);
					transform: rotate(0deg);
				}

				.icon-effect-7B .fa-effect:before {
					-webkit-transform: scale(0.8);
					-moz-transform: scale(0.8);
					-ms-transform: scale(0.8);
					transform: scale(0.8);
					opacity: 0.7;
					-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;
				}

				.icon-effect-7B .fa-effect:hover:before {
					-webkit-transform: scale(1);
					-moz-transform: scale(1);
					-ms-transform: scale(1);
					transform: scale(1);
					opacity: 1;
				}
			/* ========== END ICON HOVER EFFECT 7B ========== */
	/* ========== END ICON HOVER EFFECT 7 ========== */
	
	
	/* ========== ICON HOVER EFFECT 8 ========== */
	
		.icon-effect-8 .fa-effect {
			background: rgba(255,255,255,0.1);
			-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;
		}

		.icon-effect-8 .fa-effect:after {
			top: 0;
			left: 0;
			padding: 0;
			z-index: -1;
			box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
			opacity: 0;
			-webkit-transform: scale(0.9);
			-moz-transform: scale(0.9);
			-ms-transform: scale(0.9);
			transform: scale(0.9);
		}

		.icon-effect-8 .fa-effect:hover {
			background: rgba(255,255,255,0.05);
			-webkit-transform: scale(0.93);
			-moz-transform: scale(0.93);
			-ms-transform: scale(0.93);
			transform: scale(0.93);
			color: #fff;
		}

		.icon-effect-8 .fa-effect: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;
			}
		}
	/* ========== END ICON HOVER EFFECT 8 ========== */


	/* ========== ICON HOVER EFFECT 9 ========== */
	
		.icon-effect-9 .fa-effect {
			-webkit-transition: box-shadow 0.2s;
			-moz-transition: box-shadow 0.2s;
			transition: box-shadow 0.2s;
		}

		.icon-effect-9 .fa-effect:after {
			top: 0;
			left: 0;
			padding: 0;
			box-shadow: 0 0 0 3px #fff;
			-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;
		}

			/* ========== ICON HOVER EFFECT 9A ========== */
			
				.icon-effect-9A .fa-effect:hover:after {
					-webkit-transform: scale(0.85);
					-moz-transform: scale(0.85);
					-ms-transform: scale(0.85);
					transform: scale(0.85);
					opacity: 0.5;
				}

				.icon-effect-9A .fa-effect:hover {
					box-shadow: 0 0 0 10px rgba(255,255,255,1);
					color: #fff;
				}
			/* ========== END ICON HOVER EFFECT 9A ========== */
			
			
			/* ========== ICON HOVER EFFECT 9B ========== */

				.icon-effect-9B .fa-effect:hover:after {
					-webkit-transform: scale(0.85);
					-moz-transform: scale(0.85);
					-ms-transform: scale(0.85);
					transform: scale(0.85);
				}

				.icon-effect-9B .fa-effect:hover {
					box-shadow: 0 0 0 10px rgba(255,255,255,0.4);
					color: #fff;
				}
			/* ========== END ICON HOVER EFFECT 9B ========== */
	/* ========== END ICON HOVER EFFECT 9 ========== */