body { 
  color: #4a4a4a; 
  margin: 0 auto; 
  text-align: center; 
  font-family: FFDINStdRegular;
}

h1 {
  font-family: FFDINStdCondensedMedium;
  margin-top: 0;
  margin-bottom: 0;
}

h2 {
  font-family: FFDINStdCondensedMedium;
  text-align: center;
}


h2 {
    font-family: FFDINStdCondensedMedium;
    margin-bottom: 0;
}


.percent {
  font-family: FFDINStdBold;;
}

.domain {
  stroke: none ;
}

path {
  stroke: #fff;
}


.slice:hover {
  /*transform: scale(1.02);*/
}

/*.slice-selected {
  transform: scale(1.02);
}*/

.bar:hover {
  transform: scale(1.03) translateY(-10px);
}

.bar-selected {
  transform: scale(1.03) translateY(-10px);
}

.tick {
   font-family: FFDINStdRegular;
  font-size: 13px;
}

@media (max-width: 860px) {

/*  h1 {
    font-size: 24px;
  }*/

  h3 {
    font-size: 16px !important;
  }

  .chart-container {
    display: block !important;
  }

  .donut-chart-container {
    width: 100% !important;
  }

  .bar-chart-container {
    width: 100% !important;
  }

  
/*  .default-text- {
    font-size: 18px !important;
  }*/
}

@media (min-width: 861px) {

  .slide-container {
    width: 90%;
    text-align: center;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .chart-container {
    display: flex;
    width: 100%;
    margin-bottom: 35px;
  }

  .donut-chart-container {
    width: 50%;
    margin: 0 auto;
  }

  .bar-chart-container {
    width: 50%;
    margin: 0 auto;
  }

  .percent {
    font-family: FFDINStdBold;;
  }


  .domain {
    stroke: none ;
  }

  path {
    stroke: #fff;
  }

  .slice:hover {
   /* transform: scale(1.02);*/
  }

  .slice-selected {
    transform: scale(1.05);
  }

  .bar:hover {
    transform: scale(1.03) translateY(-10px);
  }

  .bar-selected {
    transform: scale(1.03) translateY(-10px);
  }

  .tick {
     font-family: FFDINStdRegular;
    font-size: 13px;
  }
}