.vPlayer{
  display: grid;
  grid-template-columns: auto 415px auto;
  grid-template-rows: 200px 100px auto;
}

#vpBody {
  grid-column: 2/3;
  grid-row: 2/3;
  background-color: #DDD;
  border-radius: 20px;
  padding: 20px;

}


/*------------------*/

.buildVPlayer{
  width:100%;
}

.buildPlayer{
  display:grid;
  grid-template-columns: 30px 30px 190px 50px 35px ;
  grid-template-rows:  9px 2px 9px;


}

.vpControls{
  grid-row: 1/4;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.45;
  /*background-color: blue;*/
  /*border: 1px solid black;*/
}

#vpPlay{
  grid-column: 1/2;
  background-image: url("img/play.png");
}

#vpPause{
  grid-column: 1/2;
  background-image: url("img/pause.png");
  visibility: hidden;
}

#vpReset{
  grid-column: 2/3;
  background-image: url("img/reset.png");
  align-content: center;
  text-align: center;
}

#vpCnt{
  grid-column: 4/5;
  font-family: Arial;
  font-size: 12px;
/*  padding-left: 10px;*/
  color: #000;
  line-height: 170%;
  text-align: center;
}

#vpVolume{
  grid-column: 5/6;
  background-image: url("img/volume.png");
  align-items: left;
}

#vpPlay:hover, #vpReset:hover, #vpPause:hover, #vpVolume:hover {
  opacity: 0.85;
}



#vpScroll, #vpScrollBack {
  grid-column: 3/4;
  grid-row: 2/3;
  width:0px;
  height:2px;
  background: linear-gradient(#55bb55, #256a25);
  opacity: 0.8;
  -webkit-transition-timing-function: linear; /* Safari and Chrome */
  transition-timing-function: linear;
}

#vpScrollBack{
  background: linear-gradient(#bbb, #888);
  width: 100%;
  height: 2px;
  opacity: 1;
}