.ringing {
    @extend %posRelative;
	display: block;
	margin: 0;
	width: 1em;
	height: 1em;
	font-size: 25vmin;
	border-radius: 0.5em;
	box-shadow: 0 0 0 0em rgba(#ffffff, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
	transform: translate3d(0, 0, 0) scale(1);
	animation: phone-container 3000ms infinite;
	&:before,
	&:after {
		@extend %posAbsolute;
        content: "";
        top: 0;
        left: 0;
        @extend %width100;
		@extend %height100;
	}
	&:before {
		border-radius: 50%;
		@include animation(phone-outer 2s ease infinite);
		@include backface-visibility(hidden);
	}
    &:after {
        background-color: rgba(#fff, 0.1);
        border-radius: 100%;
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(0);
        animation: phone-inner 3000ms infinite;
    }
}

@include keyframes(phone-container) {
	0% {
	  transform: translate3d(0, 0, 0) scale(1);
	  box-shadow:
		0 0 0 0em rgba(#ffffff, 0),
		0em 0.05em 0.1em rgba(#000000, 0.2);
	}
	33.3333% {
	  transform: translate3d(0, 0, 0) scale(1.1);
	  box-shadow:
		0 0 0 0em rgba(#ffffff, 0.1),
		0em 0.05em 0.1em rgba(#000000, 0.5);
	}
	66.6666% {
	  transform: translate3d(0, 0, 0) scale(1);
	  box-shadow:
		0 0 0 0.5em rgba(#ffffff, 0),
		0em 0.05em 0.1em rgba(#000000, 0.2);
	}
	100% {
	  transform: translate3d(0, 0, 0) scale(1);
	  box-shadow:
		0 0 0 0em rgba(#ffffff, 0),
		0em 0.05em 0.1em rgba(#000000, 0.2);
	}
}

@include keyframes(phone-inner) {
	0% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(0);
	}
	33.3333% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(0.9);
	}
	66.6666% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scale(0);
	}
	100% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scale(0);
	}
}


@include keyframes(phone-outer) {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 5px rgba(#ffffff, 0);
	}
	33.3333% {
		box-shadow: 0 0 0 10px rgba(#ffffff, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
	}
	66.6666% {
		box-shadow: 0 0 0 15px rgba(#ffffff, 0.2), 0em 0.05em 0.1em rgba(#000000, 0.5);
	}
	100% {
		box-shadow: 0 0 0 5px rgba(#ffffff, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
	}
}