/*
look at the weird glitch on the 6th button. something to do with color vs background-color. or did i fuck up?
*/

*, *:before, *:after {
   -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}
body {
  font-family:'Helvetica', sans-serif; 
}



.button-wrap {
  width: 600px;
  margin: 4px;
  cursor: pointer;
}
.button-bg {
  width: 100%;
  height: 100%;
  background-color: #888;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}


.button-active .button-bg { background-color:#888; }

.plus-button .button-wrap {
  text-align: left;   
  width: 40px;
  height:40px;
  margin: 4px ;
  cursor: pointer;
  transition:all 0.2s ease;
}

.plus-button .button-wrap:hover {
  width: 200px;
  height:40px;
  margin: 4px ;
  cursor: pointer;
  transition:all 0.2s ease;
}

.plus-button .button-bg {
  width: 100%;
  height: 100%;
  background-color: #888;
  border-radius: 20px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}

.plus-button .button-in, 
.plus-button .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  text-transform:uppercase;
  
}
.plus-button .button-in { margin-left:54px; font-size:0.9em;   padding-top:9px; font-weight:normal; white-space:nowrap}
.plus-button .button-out { margin-left:8px; color:#fff; font-size:1.8em;  padding-top:0px; font-weight:bold;}
.plus-button .button-active .button-out { color:#fff; }
.plus-button .button-active .button-in { color:#fff; }
.plus-button .button-active .button-bg { background-color:#888; }