/* PIE CHART */
.chart {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 50px;
  left: 0;
  margin: 0;
}
.chart .circle-inner {
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: 500px;
    background: #40af49;
    left: 25%;
    top: 25%;
}
.chart circle {
  fill: #40af49;
}
.pieTip {
  font-family: Din, sans-serif;
  padding: 3px 40px 3px 3px;
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: none;
  display: flex;
  align-items: center;
  background: rgba(70, 98, 196, 0.97);
  border-radius: 20px;
  color: white;
  font-size: 1rem;
  text-transform: capitalize;
  text-align: left;
  line-height: 1.3;
  letter-spacing: .06em;
  -webkit-transform: all .3s;
     -moz-transform: all .3s;
      -ms-transform: all .3s;
       -o-transform: all .3s;
          transform: all .3s;
  pointer-events: none;
}
.pieTip .tip-num {
  background: rgb(120, 155, 198);
  border-radius: 20px;
  font-size: 1.2rem;
  margin-right: 5px;
  padding: 5px 15px;
}
.chart path { cursor: pointer; }
#worldwideStackChart,
#transportationStackChart,
#residualBarChart,
#distillateBarChart {
	width		: 100%;
	height		: 500px;
	font-size	: 0.9rem;
  font-family: OpenSans, sans-serif;
  color: white;
}

.amcharts-export-menu-top-right {
  top: 10px;
  right: 0;
}
#worldwideStackChart text.amcharts-legend-label,
#transportationStackChart text.amcharts-legend-label {
  fill: white;
  font-family: OpenSans, sans-serif;
}
#residualBarChart text.amcharts-axis-title,
#distillateBarChart text.amcharts-axis-title {
    fill: white;
    font-family: OpenSans, sans-serif;
    font-size: 1rem;
    font-weight: normal;
}
#residualBarChart text.amcharts-axis-label,
#distillateBarChart text.amcharts-axis-label,
#worldwideStackChart text.amcharts-axis-label,
#transportationStackChart text.amcharts-axis-label {
  fill: white;
  font-family: OpenSans, sans-serif;
}
#worldwideStackChart .amcharts-category-axis text.amcharts-axis-label,
#transportationStackChart .amcharts-category-axis text.amcharts-axis-label {
  fill: #40af49;
}

.circle-chart-legend {
  margin-left: 600px;
  margin-top: 50px;
}
.legend-block {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    cursor: pointer;
}
.legend-block .color-block {
    width: 30px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
}
.legend-block .legend-label {
    display: inline-block;
    font-size: 0.8rem!important;
}

@media (max-width: 900px) {
  .chart {
    width: 300px;
    height: 300px;
    top: 50px;
  }
  .circle-chart-legend {
    margin-left: 0;
    margin-top: 320px;
    display: flex;
    flex-wrap: wrap;
  }
  .section-transportation .chart {
    top: 80px;
  }
  .legend-block {
    display: inline-flex;
    align-items: center;
    margin-bottom: 5px;
    cursor: pointer;
    width: 50%;
  }
  .amChartsLegend.amcharts-legend-div {
    display: none!important;
  }
  #worldwideStackChart,
  #transportationStackChart,
  #residualBarChart,
  #distillateBarChart {
  	height: 300px;
  }
}

@media (max-width: 470px) {
  .section-worldwide .chart {
    top: 80px;
  }
}