.rect1{
  width: 100%;
  height: 10px;
  background: #fec44f;
  opacity: 0.6;
}

.rect2{
  width: 100%;
  height: 10px;
  background: #d95f0e;
  opacity: 0.7;
}

.circlel,
.circler {
  width: 10%;
  height:0;
  padding-bottom: 10%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  float: left;
  transition: opacity 0.5s ease;
}

.circlel {
  background: #4679BD;
}

.circler {
  background: #d95f0e;
}

.circlel:hover,
.circler:hover {
  opacity: 0.1;
}