.chart {
    float: left;
    margin: 10px 0;
    width: 25%;
    text-align: center;
}

.percentage,
.label {
    text-align: center;
    color: #333;
    font-weight: 100;
    font-size: 1.2em;
    margin-bottom: 0.3em;
}

.credits {
    padding-top: 0.5em;
    clear: both;
    color: #999;
}

.credits a {
    color: #333;
}

.dark {
    /*background: #333;*/
    float: left;
    width: 100%;
    border-bottom: 1px solid #999;
}

.dark .percentage-light,
.dark .label {
    text-align: center;
    color: #999;
    font-weight: 100;
    font-size: 1.2em;
    margin-bottom: 0.3em;
    margin:0px auto; 
}

.dark .topic{
  float: left;
  width: 24.8%;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  background: #dcdcdc;
  padding: 10px 0;
  border-left: 1px solid #999;
}

.dark .topic:last-child{
  border-right: 1px solid #999;
}

.city{
  padding: 6% 0;
  font-size: 16px;
}
.scor{
  padding: 6% 0;
  font-size: 20px;
  font-weight: bold;
  color: #1AA9EB;
}
.dark .nums{
  color: #00a29a!important;
  padding: 23% 0;
  font-size: 16px;
}