@font-face {
	  font-family: OpenSansBold;
	  src: url(results/OpenSans-Semibold.ttf);
	}
	@font-face {
	  font-family: OpenSans;
	  src: url(results/OpenSans-Light.ttf);
	}
	@keyframes shadow-pulse
	{
	     0% {
	          box-shadow: 0 0 0 0px #0C58F1;
	     }
	     100% {
	          box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
	     }
	}
	@keyframes shadow-pulsered
	{
	     0% {
	          box-shadow: 0 0 0 0px #FF6060;
	     }
	     100% {
	          box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
	     }
	}

	html,body{
		border:none; padding:0; margin:0;
	}
	body{
		text-align:center;
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
}
	#startStopBtn{
		display:inline-block;
		width: 100px;
		height: 100px;
		font: 18px/100px 'OpenSans', sans-serif;
		text-transform: uppercase;
		letter-spacing: 0.1px;
		color: #000;
		text-align: center;
		font-weight: bold;
		border-radius: 50%;
		border:0.15em solid #0C58F1;
		animation: shadow-pulse 1s 10;
		cursor:pointer;

	}
	#startStopBtn.running{
		background-color:#;
		border-color:#FF6060;
		color:#FFFFFF;
		animation: shadow-pulsered 1s 2;
	}
	#startStopBtn:before{
		content:"Iniciar";
	}
	#startStopBtn.running:before{
		content:"Cancelar";
	}
	#test{
		margin-bottom:12em;
	}
	div.testArea{
		display:inline-block;
		width:16em;
		height:12.5em;
		position:relative;
		box-sizing:border-box;
	}
	div.testArea2{
		display:inline-block;
		width:14em;
		height:7em;
		position:relative;
		box-sizing:border-box;
		text-align:center;
	}
	div.testArea div.testName{
		position:absolute;
		top:0.1em; left:0;
		width:100%;
		font-size:1.2em;
		z-index:9;
	}
	div.testArea2 div.testName{
        display:block;
        text-align:center;
        font-size:1.2em;
	}
	div.testArea div.meterText{
		position:absolute;
		bottom:1.55em; left:0;
		width:100%;
		font-size:2.2em;
		z-index:9;
	}
	div.testArea2 div.meterText{
        display:inline-block;
        font-size:1.5em;
	}
	div.meterText:empty:before{
		content:"0.00";
	}
	div.testArea div.unit{
		position:absolute;
		bottom:2em; left:0;
		width:100%;
		z-index:9;
	}
	div.testArea2 div.unit{
		display:inline-block;
	}
	div.testArea canvas{
		position:absolute;
		top:0; left:0; width:100%; height:100%;
		z-index:1;
	}
	div.testGroup{
		display:block;
        margin: 0 auto;
	}
	#shareArea{
		width:95%;
		max-width:40em;
		margin:0 auto;
		margin-top:2em;
	}
	#shareArea > *{
		display:block;		
		height:auto;
		margin: auto;
		max-width: 100%;
	}
	#resultsURL {
		text-align: center;
		background: #212121;
		cursor:pointer;
		color: #40C4FF;
		border-width:0px;
		border:none;
		font-size: 0.8em;
		font-family:"OpenSans",sans-serif;
		width:100%;
		padding: 10px;
	}
	#recomend{
		text-align: center; 
		font-size: 0.9em;
		color: #BDBDBD;
	}
	#cabecalho {
		padding: 5px;
	}
	#logo {
		height: 50px;
		margin-top: 10px;
	}
	h1{
		color:#0C58F1;
		margin: 5px;
		font-family:OpenSansBold;
	}
	@media all and (max-width:40em){
		body{
			font-size:0.8em;
		}
	}