/* Sonar Menu Images */
ul.sonarmenu{ list-style: none; }
ul.sonarmenu li{ display: inline; }
ul.sonarmenu a{ position: relative; }
ul.sonarmenu a:hover, ul.sonarmenu a:focus{ outline: none; }

ul.sonarmenu a::before, ul.sonarmenu a:after{ 
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;                          /* width of outer circle */
	height: 70px;                         /* height of outer circle */
	border: 12px double rgba(0,0,0,0.1);  /* style and color of circles */
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
	transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{                    /* inner circle specific CSS */
	width: 60px;                         /* width of inner circle */
	height: 60px;                        /* width of inner circle */
	border-width: 6px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
	transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
	-webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
	-moz-animation: pulsate 1.2s infinite;
	-ms-animation: pulsate 1.2s infinite;
	animation: pulsate 1.2s infinite;
}

/* ### Keyframe animations ### */
@-webkit-keyframes pulsate{
30%{
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
 }
100%{
opacity: 0.3;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}

@-moz-keyframes pulsate{
30%{
opacity: 1;
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
-moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}

@-ms-keyframes pulsate{
30%{
opacity: 1;
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
-ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}

@-keyframes pulsate{
30%{
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
}
100%{
opacity: 0.3;
transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}