#wrapper_bu {
  position: absolute;
  width: 90%;
  left: 5%;
  height: 100%;
}
.holder_bu { cursor: pointer }

.holder_bu_awayL1 {
  position: absolute;
  top: 10%;
  left: 0%;
  width: 35%;
  /* height: 0%; */
  /* background-color: rgba(0,0,50,0.7); */
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 1;
}

.holder_bu_awayL2 {
  position: absolute;
  top: 10%;
  left: 0%;
  width: 35%;
  /* height: 60%; */
  /* background-color: rgba(0,0,50,0.5); */
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 0;
}

.holder_bu_center {
  position: absolute;
  top: 5%;
  left: 26%;
  width: 48%;
  /* height: 90%; */
  /* box-shadow: 0px 0px 20px rgba(0,0,50,0.5); */
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 2;
}
@media only screen and (max-width: 991px) {
  .holder_bu_center {
    top: 5%;
    left: 5%;
    width: 90%;
  }
  .holder_bu_awayL1{
    display: none;
  }
  .holder_bu_awayR1{
    display: none;
  }
  .holder_bu_awayL2{
    display: none;
  }
  .holder_bu_awayR2{
    display: none;
  }
}

.holder_bu_awayR1 {
  position: absolute;
  top: 10%;
  left: 65%;
  width: 35%;
  /* height: 0%; */
  /* background-color: rgba(0,0,50,0.7); */
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 1;
}

.holder_bu_awayR2 {
  position: absolute;
  top: 10%;
  left: 70%;
  width: 30%;
  /* height: 30%; */
  /* background-color: rgba(0,0,50,0.5); */
  -webkit-transition: width 1s, height 1s, top 1s, left 1s;
  -moz-transition: width 1s, height 1s, top 1s, left 1s;
  -o-transition: width 1s, height 1s, top 1s, left 1s;
  -ms-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width 1s, height 1s, top 1s, left 1s;
  z-index: 0;
}

.out{
  display: none;
}