#webbox { 
  width: 400px; 
  height: 400px; 
  position: relative;
margin-left: auto;
margin-right:auto;
}

#center-sphere { 
  width: 200px; 
  height: 200px; 
  position: absolute; 
  left: 98px; 
  top: 98px; 
  border: 2px rgb(115,166,183) solid;
  border-radius: 5%;
}

.sphere { 
  width: 150px; 
  height: 150px; 
  position: absolute; 
  border: 2px rgb(115,166,183) solid;
  border-radius: 5%;
  transition: background-color 800ms ease-in-out;
  background: rgba(125,184,214, .2);
   transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms ;
  -moz-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
  -ms-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
  -o-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
  -webkit-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
}

.sphere:hover {
  transition: background-color 800ms ease-in-out;
  background: rgb(115,166,183);
  color: #ffffff;
  z-index: 999;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 275px; 
  height: 275px;
}

.one{left:0px; top: 0px;}
.two{right: 0px; top: 0px;}
.three{left: 0px; bottom: 0px;}
.four{right: 0px; bottom: 0px;}


.text {
   -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: relative;
  top: 65px;
  left: 45px;
}

.sphere:hover .text {
  top: 20px;
  left: 100px;
}

.sphere:hover .muscles{
  top: 20px;
  left: 82px;
}

.blurb {
  margin: 2.5em;
  color: rgba(255,255,255,0);
  -ms-transform: scale(.9); 
  -webkit-transform: scale(.9); 
  transform: scale(.9);
  visibility: hidden;
}

.sphere:hover .blurb {
   -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  color: rgba(255,255,255,1);
  visibility: visible;
}

.muscles {
  top: 70px;
  left: 20px;
}

.titlecenter {
   position: relative;
   top: 45px;
   left: 0px;
   text-align: center;
}
.descriptioncenter {
   position: relative;
   top: 25px;
   left: 0px;
   text-align: center;
}