.buttonComponent {
  display: inline;
}

/* Explicitly bounding the centering reference plane */
.button-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.mycircle button {
  padding: 0;
  margin: 5px 1px;
  height: 85px;
  width: 85px;
  font-size: 0.6em;
  border: 8px solid #b3b3b3;
}

.columncircle a {
  display: block;
}

/* THE FIX: Absolute center alignment tracking */
.mycircle .ddd {
  visibility: hidden;
  text-align: center;
  width: 175px;
  height: 175px;
  position: absolute;
  
  /* Centers exactly at 50% height of parent wrapper */
  top: 50%;
  transform: translateY(-50%);
  
  color: #0D2036 !important;
  box-shadow: 0 0 10px #1f3d7a !important;
  margin-left: 90px;
  border: 20px solid #b3b3b3;
  font-weight: bold;
  z-index: 100; /* Keeps hover layout crisp and on top */
}

/* Linear Gradients Optimization */
.mycircle .btnOne { background: #FFFFE5; }
.mycircle .btnTwo { background: #E5F2FF; }
.mycircle .btnThree { background: #E5FFE5; }
.mycircle .btnFour { background: #FFF5E5; }
.mycircle .btnFive { background: #FFFFFF; }
.mycircle .btnSix { background: #FFE5FF; }
.mycircle .btnSeven { background: #ECECF9; }
.mycircle .btnEight { background: #F9F2EC; }
.mycircle .btnNine { background: #F0F0F5; }
.mycircle .btnTen { background: #E5FAFF; }
.mycircle .btnEleven { background: #E5F2FF; }
.mycircle .btnTwelve { background: #d6f8db; }

.mycircle .btnlink:hover div.ddd {
  visibility: visible;
}

@media screen and (max-width: 1150px) and (min-width: 795px) {
  .mycircle button {
    margin: 7px 0px;
    height: 65px;
    width: 65px;
    font-size: 0.4em;
    border: 7px solid #b3b3b3;
  }
}

@media screen and (max-width: 795px) {
  .mycircle, .buttonComponent {
    display: none;
  }
}