#contenitore {
  position: relative;
  width: 100%;
  margin: 20px auto;
  margin-bottom: 5px;
  text-align: center;
  overflow: hidden;
  font: 16px 'Trebuchet MS', sans serif;
}
.our-skill-area {
    background: rgba(248, 248, 248, 0.8) url('../images/region_map.png') no-repeat fixed center top / cover;
}
.progress-h4 {
    padding: 5px;
    border-bottom: 3px solid #ed1b24;
}
.our-skill-area {
    position: relative;
}
.progress-h4 {
    color: #fff;
    font-weight: 500;
}
.fix {
    overflow: hidden;
}
.area-padding-2 {
    padding: 70px 0px 50px;
}
.test-overly {
    background: rgba(0, 0, 0, 0.80);
    position: absolute;
    width: 100%;
    height: 100%;
}

.left {
  float: left;
  width: 48%;
}

#grafico {
  position: relative;
  height: 300px;
  width: 100%;
  margin-top: 20px;
}

.riga {
  position: absolute;
  left: 0;
  height: 1px;
  background-color: gray;
  width: 100%;
}

.riga div {
  float: left;
  margin: -8px 0 0 -40px;
}

.canc {
  clear: both;
}

.tabula {
  width: 60%;
  background-color: white;
  color: #000;
  margin: 1em auto;
}

.tabula caption {
  background-color: #D8EED8;
  color: #004156;
  text-align: left;
}

.tabula tr:nth-child(2n) {
  background-color: #D8EED8;
}

.tabula tr:nth-child(2n+1) {
  background-color: #BFDFFF;
}

.tabula td {
  text-align: center;
  border-bottom: 1px solid #CDCDCD;
  padding: 6px;
}

.columndiv {
  position: absolute;
  width: 25%;
  bottom: 0;
  background-color: #003366;
}

div.button {
  margin: 0 auto;
  text-align: center;
  width: 100px;
  background-color: #003366;
  border: 1px solid #003366;
  border-radius: 5px;
  padding: 8px;
  color: #E1E2CF;
  cursor: pointer;
}

.columndiv div {
  margin-top: -20px;
  height: 20px;
  color: white;
  font-weight: 500;
}

.chartdiv {
  height: 150%;
  margin-left: 1.35%;
  margin-right: 1.35%;
  margin-bottom: 5%;
  border: 3px solid white;
  border-radius: 35px;
  overflow: hidden;
}

.progress-h4 {
  padding: 5px;
  border-bottom: 3px solid #ed1b24;
}

.chart-h4 h4 {
  color: white;
  text-align: center;
  margin-left: 50px;
}

.box1 {
  float: left;
  width: 25px;
  height: 25px;
  border: 1px solid white;
  background-color: white;
  margin-right: 10px;
  margin-left: 25%;
}

.box2 {
  float: left;
  width: 25px;
  height: 25px;
  border: 1px solid #ed1b24;
  background-color: #ed1b24;
  margin-right: 10px;
  margin-left: 25%;
}

.box1jp {
  float: left;
  width: 25px;
  height: 25px;
  border: 1px solid white;
  background-color: white;
  margin-right: 10px;
  margin-left: 35%;
}

.box2jp {
  float: left;
  width: 25px;
  height: 25px;
  border: 1px solid #ed1b24;
  background-color: #ed1b24;
  margin-right: 10px;
  margin-left: 35%;
}

@media (max-width: 768px) {
  #contenitore {
    width: 60%;
  }

  .chartdiv {
    margin: 5% 0;
  }

  .chart-h4 h4 {
    font-size: 18px;
  }

  .box1,
  .box2 {
    margin-left: 8%;
  }

  .box1jp,
  .box2jp {
    margin-left: 16%;
  }
}