@media screen and (min-width:730px) {
	.test {
		font-size: 18px;
		padding: 10px
	}
}

.number {
	font-family: gauge-mono, Helvetica, Arial, sans-serif;
	line-height: 1.2;
	margin: -.1em 0;
	font-size: 1.6em
}

@media screen and (min-width:730px) {
	.number {
		font-size: 2.5em
	}
}

.unit {
	font-size: .9em;
	-webkit-font-smoothing: antialiased
}

@keyframes appear {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes appear-from-right {
	from {
		opacity: 0;
		transform: translate3d(50px, 0, 0)
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0)
	}
}

@keyframes appear-up {
	from {
		opacity: 0;
		transform: translate3d(0, 40px, 0)
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0)
	}
}

@keyframes spin-forever {
	0% {
		transform: rotate(-35deg)
	}

	100% {
		transform: rotate(325deg)
	}
}

.gauge-assembly {
	position: relative;
	flex-shrink: 0;
	width: 250px;
	height: calc(250px - 25px);
	margin: 0 auto 10px;
	animation-name: appear;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-duration: 250ms
}

@media screen and (min-width:730px) {
	.gauge-assembly {
		width: 350px;
		height: 315px;
		margin: 0
	}
}

.gauge-container {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 250px;
	height: calc(250px - 25px)
}

@media screen and (min-width:730px) {
	.gauge-container {
		width: 350px;
		height: 315px
	}
}

.gauge {
	position: relative;
	display: inline-block;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	z-index: 1;
	transform: rotateZ(-180deg);
	transition: transform 20ms linear
}

@media screen and (min-width:730px) {
	.gauge {
		width: 350px;
		height: 350px
	}
}

.gauge-path {
	position: relative;
	top: -5px;
	left: -7px;
	transform: rotate(-45deg)
}

@media screen\0 {
	.gauge-path {
		top: 133px;
		left: -27px;
		transform: rotate(-45deg) scale(2.5)
	}
}

@media (min-width:0\0) and (max-width:730px) {
	.gauge-path {
		top: 65px;
		left: -15px;
		transform: rotate(-45deg) scale(1.9)
	}
}

.gauge-path-background,
.gauge-path-current-speed,
.gauge-path-loading {
	fill: transparent;
	transform-origin: center;
	stroke-width: 9px;
	animation-duration: 650ms;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: backwards
}

.gauge-path-background,
.gauge-path-current-speed {
	animation-name: gauge-loading-progress
}

.gauge-path-background {
	stroke-dasharray: 202px;
	stroke-dashoffset: 0
}

.gauge-path-current-speed {
	stroke-dasharray: 404px;
	transition: stroke-dashoffset 50ms linear
}

.gauge-path-loading {
	stroke-dasharray: 404px;
	stroke-dashoffset: 404px;
	animation-name: gauge-loading-fill;
	opacity: 0
}

.gauge-needle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	height: 135px;
	width: 25px;
	-webkit-backface-visibility: hidden;
	transition: transform 50ms linear
}

@media screen and (min-width:730px) {
	.gauge-needle {
		height: 190px;
		width: 30px
	}
}

.gauge-needle svg {
	height: 100%;
	width: 100%
}

.speed-assembly {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	height: calc(250px - 25px);
	width: 250px;
	text-align: center;
	animation-name: appear;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-duration: 250ms
}

@media screen and (min-width:730px) {
	.speed-assembly {
		width: 350px;
		height: 315px
	}
}

.increments-wrapper {
	position: absolute;
	z-index: 5;
	height: 100%;
	width: 100%;
	font-weight: 500;
	font-size: .95em;
	cursor: default;
	-webkit-font-smoothing: antialiased
}

.increment {
	position: absolute;
	z-index: 0;
	width: 14%;
	height: 7%;
	opacity: .3;
	animation-duration: 250ms;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: backwards;
	animation-name: increment-flash;
	transition: opacity .1s linear, color .1s linear
}

.increment--on {
	opacity: 1
}

.increment-0 {
	top: 79.75%;
	left: 20.75%;
	animation-delay: 750ms;
	text-align: left
}

.increment-1 {
	top: 60.25%;
	left: 13%;
	animation-delay: .8s;
	text-align: left
}

.increment-2 {
	top: 38.25%;
	left: 15.25%;
	animation-delay: 850ms;
	text-align: left
}

.increment-3 {
	top: 19.5%;
	left: 26.75%;
	animation-delay: .9s;
	text-align: left
}

.increment-4 {
	top: 12%;
	left: 50%;
	animation-delay: 950ms;
	text-align: center;
	margin-left: -7%
}

.increment-5 {
	top: 19.5%;
	right: 26.75%;
	animation-delay: 1s;
	text-align: right
}

.increment-6 {
	top: 38.25%;
	right: 15.25%;
	animation-delay: 1.05s;
	text-align: right
}

.increment-7 {
	top: 60.25%;
	right: 13%;
	animation-delay: 1.1s;
	text-align: right
}

.increment-8 {
	top: 79.75%;
	right: 20.75%;
	animation-delay: 1.15s;
	text-align: right
}

@keyframes increment-flash {
	0% {
		opacity: 0
	}

	50% {
		opacity: .6
	}

	100% {
		opacity: .3
	}
}

@keyframes gauge-loading-fill {
	0% {
		opacity: 1;
		stroke-dashoffset: 404px
	}

	99% {
		opacity: 1;
		stroke-dashoffset: 202px
	}

	100% {
		opacity: 0;
		stroke-dashoffset: 404px
	}
}

@keyframes gauge-loading-progress {
	0% {
		opacity: 0
	}

	99% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes progress-bounce {
	0% {
		transform: translate3d(-50%, 0, 0)
	}

	50% {
		transform: translate3d(950%, 0, 0)
	}

	100% {
		transform: translate3d(-50%, 0, 0)
	}
}

.gauge-needle {
	color: #a6a6a6
}

.stroke-primary {
	stroke: #3372e8
}

.monochrome-primary {
	color: rgba(50, 50, 50)
}

.monochrome-secondary {
	color: rgba(115, 115, 115)
}

@keyframes share-button-load {
	0% {
		opacity: 0;
		transform: translate(-50%, 10px)
	}

	100% {
		opacity: .8;
		transform: translate(-50%, 0)
	}
}