* {
    margin: 0;
    padding: 0;
    font-family: verdana
}

body {
    width: 100%;
    height: 100%
}

#wrapper_bu {
    position: relative;
    /* top: 150px; */
    width: 100%;
    height: 100%;
    background-color: #ddd
}
@media (max-width: 767px) {
    #wrapper_bu {
    position: relative;
    /* top: 150px; */
    width: 100%;
    height: 100%;
    background-color: #ddd
}
}
.txt_Center {
    margin: 50% 0% 0% 20%
}

.txt_h1 {
    font-size: 2em
}

.holder_bu {
    cursor: pointer
}

.holder_bu_awayL1 {
    position: absolute;
    top: 30%;
    left: 20%;
    width: 22%;
    height: 40%;
    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
}

@media (max-width: 767px) {
    .holder_bu_awayL1 {
        position: absolute;
        top: 30%;
        left: 13%;
        width: 33%;
        height: 40%;
        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
    }
}

.holder_bu_awayL2 {
    position: absolute;
    top: 35%;
    left: 7%;
    width: 18%;
    height: 30%;
    opacity: 0.6;
    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
}

@media (max-width: 767px) {
    .holder_bu_awayL2 {
        position: absolute;
        top: 35%;
        left: 0%;
        width: 25%;
        height: 30%;
        opacity: 0.6;
        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
    }
}

.holder_bu_center {
    position: absolute;
    top: 5%;
    left: 36%;
    width: 60%;
    height: 90%;
    background-color: #37c;
    -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
}

@media (max-width: 767px) {
    .holder_bu_center {
        position: absolute;
        top: 0%;
        left: 30%;
        width: 43%;
        height: 90%;
        background-color: rgb(51 119 204);
        -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;
    }
}

.holder_bu_awayR1 {
    position: absolute;
    top: 30%;
    left: 58%;
    width: 22%;
    height: 40%;
    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
}

@media (max-width: 767px) {
    .holder_bu_awayR1 {
        position: absolute;
        top: 30%;
        left: 58%;
        width: 33%;
        height: 40%;
        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
    }
}

.holder_bu_awayR2 {
    position: absolute;
    top: 35%;
    left: 75%;
    width: 18%;
    height: 30%;
    opacity: 0.6;
    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
}

@media (max-width: 767px) {
    .holder_bu_awayR2 {
        position: absolute;
        top: 35%;
        left: 80%;
        width: 24%;
        height: 30%;
        opacity: 0.6;
        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
    }
}