/* layout */
header, #drives, #services, footer {
  clear: both;
  padding: 0.5em;
}
.drive {
  float: left;
  width: 20%;
}
.chart {
  height: 80%;
  width: 80%;
  viewBox: 0 0 20 20;
}
circle {
  cx: 10; 
  cy: 10;
}
.pie {
  fill: #bbb;
  r: 10;
}
.piece {
  stroke: #312c4c;
  r: 5;
  fill: transparent;
  stroke-width: 10;
  transform: rotate(-90) translate(-20);
}
h5 {
  text-align: left;
  margin: 0.5em 3em;
}
em {
  float: right;
}
.service {
  float: left;
  width: 25%;
}
.logo {
  width: 100%;
}

/* breakpoints at 850px and 475px */
@media screen and (max-width: 850px) {
  .drive {
    width: 50%;
  }
}
@media screen and (max-width: 475px) {
  .drive {
    width: 100%;
  }
  .service {
    width: 100%;
  }
}