﻿<style>

ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
	list-style: none;
	width:990px;
	padding:0px auto; float:left;
}

ul.sonarmenu li{
 display: inline; 
 float:left;
}

ul.sonarmenu a{
	position: relative;
	display: inline-block;
	color:white; /* font color */
	text-decoration: none;
	margin: 10px 10px;
	text-transform: uppercase;
	font-family: 'Raleway', Georgia; /* font style (uses Google fonts) */
	font-size: 14px; /* font size */
	
	border-bottom: 2px solid transparent; /* Bottom border style */
}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{
	outline: none;
	border-bottom: 2px solid #fff; /* Bottom border style on hover */
}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px; /* width of outer circle */
	height: 70px; /* height of outer circle */
	border: 6px double rgba(226, 53, 44, 0.8); /* 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 12.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);
	}

}

    .style1
    {
        left: 0px;
        top: 0px;
        height: 362px;
    }

</style>