.office-col input[type="radio"]{
  display:none;
}

.office-col label{
  width:20%;
  height: 40px;
  float:left;
  text-align:center;
  background:#ffffff;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  color:#222222;
  padding:0.2%;
  margin:0.5%;
  margin-bottom:30px;
  cursor:pointer;
  font-size:10px;
}

.office-col input[type="radio"][id="sc"]:checked + label{
}

.office-col input[type="radio"][id="sc"]:checked ~ .zo, input[type="radio"][id="sc"]:checked ~ .bo{
  opacity:0;
  display:none;
  transition:display 1s linear;
}

.office-col input[type="radio"][id="zo"]:checked + label{
}

.office-col input[type="radio"][id="zo"]:checked ~ .sc, input[type="radio"][id="zo"]:checked ~ .bo{
  opacity:0;
  display:none;
  transition:display 1s linear;
}

.office-col input[type="radio"][id="bo"]:checked + label{
}

.office-col input[type="radio"][id="bo"]:checked ~ .sc, input[type="radio"][id="bo"]:checked ~ .zo{
  opacity:0;
  display:none;
  transition:display 1s linear;
}

.tile{
  /*float:left;*/
  transition:all .5s;
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}