@media only screen and (max-width: 815px) {
 .pending .icon-lock {top: 11%; left: 42%;}
 .current .icon-play {top: 13%;left: 43.5%;}
 .completed .icon-check { top: 8%;   left: 41.5%;}
}
@media only screen and (max-width: 740px) {
 
}
@media only screen and (max-width: 670px) {
 .pending .icon-lock {top: 8%; left: 42%;}
 .current .icon-play {top: 11%;left: 43.5%;}
 .completed .icon-check { top: 7%;   left: 39.5%;}
}
@media only screen and (max-width: 570px) {
 .pending .icon-lock {top: 8%; left: 40%;}
 .current .icon-play {top: 11%;left: 41.5%;}
 .completed .icon-check { top: 7%;   left: 38.5%;}
}
@media only screen and (max-width: 485px) {
 .pending .icon-lock {top: 8%; left: 39%;}
 .current .icon-play {top: 11%;left: 39.5%;}
 .completed .icon-check { top: 7%;   left: 36.5%;}
}
@media only screen and (max-width: 414px) {
 .pending .icon-lock {top: 8%; left: 35%;}
 .current .icon-play {top: 11%;left: 36.5%;}
 .completed .icon-check { top: 7%;   left: 31.5%;}
}
@media only screen and (max-width: 330px) {
 .pending .icon-lock {top: 8%; left: 32%;}
 .current .icon-play {top: 11%;left: 34.5%;}
 .completed .icon-check { top: 7%;   left: 31.5%;}
}