@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 #40C4FF;
	     }
	     100% {
	          box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
	     }
	}
	@keyframes shadow-pulsered
	{
	     0% {
	          box-shadow: 0 0 0 0px #F44336;
	     }
	     100% {
	          box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
	     }
	}

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

	}
	#startStopBtn.running{
		background-color:#F44336;
		border-color:#E53935;
		color:#FFFFFF;
		animation: shadow-pulsered 1s 2;
		transition: background-color 0.5s ;

	}
	#startStopBtn:before{
		content:"Iniciar";
	}
	#startStopBtn.running:before{
		content:"Parar";
	}
	#test{
		padding-bottom: 190px; 
	}
	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: #F5F5F5;
		cursor:pointer;
		color: #01579B;
		border-width:0px;
		border:none;
		font-size: 0.8em;
		font-family:"OpenSans",sans-serif;
		width:100%;
		padding: 10px;
	}
	#recomend{
		text-align: center; 
		font-size: 1em;
		color: #C62828;
	}
	#cabecalho {
		padding: 10px;
	}

	h5{
		margin-bottom: 3px;		
	}
	@media all and (max-width:40em){
		body{
			font-size:0.8em;
		}
	}
	#testWrapper {
		position: relative;
		min-height: 100vh;
	}
	footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 178px; 
		background: #424242;
		color: white;
		text-align: center;
	}

	.cabec { 
		height: 68px; 
		background: #424242; 
		color: #FFF; 
		margin-bottom: 20px;
	}
	.tit {
		  margin: auto;
		  width: 95%;
		  display: flex;
		  align-items:center;
		  font-size: 1.25rem;
		  font-weight: bold;
		  height: 68px;
	}


	.mgt1 { margin-top: 14px;}

	img {
		max-width: 100%;
		height: auto;
	}

	.iframe {
       background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23424242" x="50%" y="50%" font-family="OpenSans, sans-serif" font-size="28" text-anchor="middle">Carregando</text></svg>') 0px 0px no-repeat;
    }

	@media (min-width: 992px) {  
	.cabec {
		height: 100px;
		margin-bottom: 60px;
	 }
	.tit {
		font-size: 1.75em;
		width: 50%;
		transition: font-size 0.3s;
		height: 100px;
	}
	.iframe {
		margin-top: -70px;
	}