body {
  font-family: FFDINStdRegular;
}

h2 {
  font-family: FFDinStdBold;
  margin-bottom: 0px;
  /* font-size: 2.2vw; */
}

p {
  margin: 0px;
  /* font-size: 1.5vw; */
}

#donut-container {
  display: flex;
  justify-content: center;
}

.donut-wrapper {
  text-align: center;
  padding: 20px;
  width: 50%;
}
.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
  padding-top: 20px;
}
.svg-content-responsive {
  display: inline-block;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  left: 0;
  text-align: center;
}

path {
  stroke: #fff;
}

.slice {
  transition: all .3s ease-in-out;
}

.slice:hover {
  transform: scale(1.05);
}

.category, .percent {
  font-family: FFDinStdBold;
}

@media
	only screen and (max-width: 860px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* #donut-container {
      display:block;
    } */

  .legend {
      display: none;
    }

  }

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	body {
		padding: 0;
		margin: 0;
		width: 320px; }
	}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body {
		width: 495px;
	}
}