/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/
.bg1{background:#fff9e9;}
.bg2{background:#f9ffe9;}
.bg3{background:#f1ffe9;}
.bg4{background:#e9fff9;}
.bg5{background:#ffffe9;}
.bg6{background:#f9ffe9;}
.bg7{background:#e9fff9;}
.bg8{background:#fff9e9;}
.bg9{background:#f9ffe9;}
.bg10{background:#ffffe9;}
.bg11{background:#e9fff9;}



#web {
  background: #f3f3f3; 
  width: 600px; 
  height: 600px; 
  border: 1px solid #000; 
  position: relative; 
}

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

.sphere { 
  width: 150px; 
  height: 150px; 
  border-radius: 50%;
  position: absolute; 
  border: 2px rgb(115,166,183) solid;
  border-radius: 50%;
  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:400px; top: 115px;}
.two{left: 394px; top: 247px;}
.three{left: 267px; top: 260px;}
.four{left: 258px; top: 120px;}
.five{left: 243px; top: 523px;}
.six{left: 205px; top: 405px;}
.seven{left: 243px; top: 287px;}
.eight{left: 343px; top: 215px;}
.nine{left: 467px; top: 215px;}
.ten{left: 567px; top: 287px;}

.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;
}

.title {
   position: relative;
   top: 65px;
   left: 55px;
}
.description {
   position: relative;
   top: 65px;
   left: 25px;
}