/*
* Tested on:
* Chrome/38
* Safari/8
* iPad/8.1
* Android Phone/4.4
*/
@mixin center() {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

html {
	background-color: tint(#000, 10%);
	position: relative;
	width: 100%;
	height: 100%;
}

.timer {
	@include center;
	height: 50px; /* change these to scale */
	width: 50px;
	background-color: rgba(255,255,255, 0.1);
	border-radius: 100%;
}

.circle {
	stroke: #ffffff;
	fill: transparent;
	stroke-dasharray: 100 100;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1s;
  transition-timing-function: linear;
}

.text {
	fill: rgba(255,255,255,0.7);
	font-family: Helvetica, sans-serif;
	font-size: 10px;
	text-anchor: middle;
}