.position {
  float: left;
  width:13.5%;
  margin: 5% 2% 5% 8%;
  text-align:center;
}

.progress-bar {
  position: relative;
  height: 173px;
  width: 173px;
  background:none;
  display:block;
  box-shadow:none;

}

.progress-bar div {
  position: absolute;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.progress-bar div span {
  position: absolute;
  font:33px Arial, Helvetica, sans-serif; font-weight:bold;
  line-height: 130px;
  height: 126px;
  width: 126px;
  left: 11.5px;
  top: 11.5px;
  text-align: center;
  border-radius: 50%;
  background-color:#cecece;
  color:#242a35;
}

.progress-bar .background { background-color: #b3cef6; }

.team-name{font:16px Arial, Helvetica, sans-serif; color:#b2b9c4; display:block; margin-top: 11px; margin-left: -5px; }

.progress-bar .rotate {
  clip: rect(0 100px 200px 0);
  background-color: #4b86db;
}

.progress-bar .left {
  clip: rect(0 100px 200px 0);
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar .right {
  clip: rect(0 100px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}
 @keyframes 
toggle {  0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}


}


@media (max-width: 768px) {
.position {
    width: 19%;
    margin: 5% 3% 5% 2%;
}
}

@media (max-width: 630px) {
.position {
    width: 25%;
    margin: 5% 2% 5% 17%;
}
}

@media (max-width: 480px) {
	
	.position {
	width:151px;
  margin:0px auto ;
	margin-bottom:20px;
  display:block;
  float:none;}
  
}