.donut {
	overflow: hidden;
	background: center/70px no-repeat;
	font-family: 'Lato', sans-serif;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	color: #000;
}

.donut svg {
    width: 100%;
    max-width: 500px;
}

.donut svg .arc:hover,
.donut svg .touched * {
    fill: #f00!important;
    color: #f00!important;
}

@media (min-width:991.98px) {
	.donut {
		/* display: flex;
		justify-content: center; */
		overflow: hidden;
		background: center/70px no-repeat;
		font-family: 'Lato', sans-serif;
		text-align: center;
		font-size: 16px;
		font-weight: 400;
		color: #000;
	}
	
	.donut svg {
		width: 100%;
		max-width: 500px;
	}
	
	.donut svg .arc:hover,
	.donut svg .touched * {
		fill: #f00!important;
		color: #f00!important;
	}
}