html, body {
  height: 100%;
  display: -webkit-box;
  display: flex;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
	font-family: 'Almarai', sans-serif!important;
	  overflow-y: hidden;
  overflow-x: hidden;
}

.pie {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-filter: drop-shadow(0 0px 0px #333);
          filter: drop-shadow(0 0px 0px #333);
}

.data-path:hover {
  cursor: pointer;
}

.data-text {
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
  fill: #2D2D2D;
}
.data-text__value {
  font-size: 7rem;
  -webkit-transform: translateY(-0.5rem);
          transform: translateY(-0.5rem);
  opacity: 0;
}
.data-text__name {
  font-size: 1rem;
  -webkit-transform: translateY(0.5rem);
          transform: translateY(0.5rem);
  opacity: 0;
}
.data-text--show {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-animation: fadeGraphTextIn 0.5s forwards;
          animation: fadeGraphTextIn 0.5s forwards;
}
.data-text:hover {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.legend-text {
  fill: #2F2F2F;
}

@-webkit-keyframes fadeGraphTextIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeGraphTextIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}