/**
 * Button mask on plan css
 *
 **/

.plan-container {
    position: relative;
    display: none;
}
.plan-container img {
    width: 100%;
    height: auto;
}
.button-mask,
.button-mask a {
    position: absolute;
    left: 0;
    top: 0;
}
.button-mask {  
    width: 100%;
    height: 100%;
    z-index: 100;
}
.button-mask a {
    width: 20px;
    height: 20px;
    border-radius: 50% 50%;
}
.plan-ontainer.show {
    display: block;
}

.plan-a-fl3,
.plan-a-fl5 {
    width: 1151px;
    height: 331px;
}
.plan-b-fl3,
.plan-b-fl5 {
    width: 1151px;
    height: 675px;
}

/**
 * Tower A - ชั้น 3, 5
 *=================================**/
.plan-a .button-mask a:nth-of-type(1) { top: 20%; left: 19.5%; }
.plan-a .button-mask a:nth-of-type(2) { top: 20%; left: 23.5%; }
.plan-a .button-mask a:nth-of-type(3) { top: 33%; left: 33%; }
.plan-a .button-mask a:nth-of-type(4) { top: 33%; left: 39%; }
.plan-a .button-mask a:nth-of-type(5) { top: 33%; left: 45.5%; }
.plan-a .button-mask a:nth-of-type(6) { top: 33%; left: 51%; }
.plan-a .button-mask a:nth-of-type(7) { top: 20%; left: 65%; }
.plan-a .button-mask a:nth-of-type(8) { top: 20%; left: 70%; }
.plan-a .button-mask a:nth-of-type(9) { top: 20%; left: 74%; }
.plan-a .button-mask a:nth-of-type(10) { top: 20%; left: 79%; }

.plan-a .button-mask a:nth-of-type(11) { top: 33%; left: 89%; }
.plan-a .button-mask a:nth-of-type(12) { top: 33%; left: 95%; }
.plan-a .button-mask a:nth-of-type(13) { top: 70%; left: 96%; }
.plan-a .button-mask a:nth-of-type(14) { top: 70%; left: 89%; }
.plan-a .button-mask a:nth-of-type(15) { top: 70%; left: 84%; }
.plan-a .button-mask a:nth-of-type(16) { top: 70%; left: 79%; }
.plan-a .button-mask a:nth-of-type(17) { top: 70%; left: 75%; }
.plan-a .button-mask a:nth-of-type(18) { top: 70%; left: 70%; }
.plan-a .button-mask a:nth-of-type(19) { top: 70%; left: 66%; }
.plan-a .button-mask a:nth-of-type(20) { top: 70%; left: 61%; }

.plan-a .button-mask a:nth-of-type(21) { top: 70%; left: 57%; }
.plan-a .button-mask a:nth-of-type(22) { top: 70%; left: 52.5%; }
.plan-a .button-mask a:nth-of-type(23) { top: 70%; left: 48%; }
.plan-a .button-mask a:nth-of-type(24) { top: 70%; left: 43%; }
.plan-a .button-mask a:nth-of-type(25) { top: 70%; left: 39%; }
.plan-a .button-mask a:nth-of-type(26) { top: 70%; left: 34%; }
.plan-a .button-mask a:nth-of-type(27) { top: 70%; left: 30%; }
.plan-a .button-mask a:nth-of-type(28) { top: 55%; left: 25%; }
.plan-a .button-mask a:nth-of-type(29) { top: 55%; left: 18%; }


/**
 * Tower B - ชั้น 3, 5
 *=================================**/
.plan-b .button-mask a:nth-of-type(1) { top: 92%; left: 28.5%; }
.plan-b .button-mask a:nth-of-type(2) { top: 84%; left: 28.5%; }
.plan-b .button-mask a:nth-of-type(3) { top: 69%; left: 28.5%; }
.plan-b .button-mask a:nth-of-type(4) { top: 62%; left: 28.5%; }
.plan-b .button-mask a:nth-of-type(5) { top: 54%; left: 28.5%; }
.plan-b .button-mask a:nth-of-type(6) { top: 47%; left: 28.5%; }
.plan-b .button-mask a:nth-of-type(7) { top: 37%; left: 33%; }
.plan-b .button-mask a:nth-of-type(8) { top: 29%; left: 33%; }
.plan-b .button-mask a:nth-of-type(9) { top: 9%; left: 29%; }
.plan-b .button-mask a:nth-of-type(10) { top: 9%; left: 35%; }

.plan-b .button-mask a:nth-of-type(11) { top: 9%; left: 39%; }
.plan-b .button-mask a:nth-of-type(12) { top: 9%; left: 43.5%; }
.plan-b .button-mask a:nth-of-type(13) { top: 9%; left: 48%; }
.plan-b .button-mask a:nth-of-type(14) { top: 9%; left: 52%; }
.plan-b .button-mask a:nth-of-type(15) { top: 9%; left: 57%; }
.plan-b .button-mask a:nth-of-type(16) { top: 9%; left: 61%; }
.plan-b .button-mask a:nth-of-type(17) { top: 9%; left: 69%; }
.plan-b .button-mask a:nth-of-type(18) { top: 9%; left: 74%; }
.plan-b .button-mask a:nth-of-type(19) { top: 26%; left: 71%; }
.plan-b .button-mask a:nth-of-type(20) { top: 26%; left: 65%; }

.plan-b .button-mask a:nth-of-type(21) { top: 26%; left: 59%; }
.plan-b .button-mask a:nth-of-type(22) { top: 26%; left: 53%; }
.plan-b .button-mask a:nth-of-type(23) { top: 26%; left: 47%; }
.plan-b .button-mask a:nth-of-type(24) { top: 42%; left: 39%; }
.plan-b .button-mask a:nth-of-type(25) { top: 53%; left: 43%; }
.plan-b .button-mask a:nth-of-type(26) { top: 63%; left: 43%; }
.plan-b .button-mask a:nth-of-type(27) { top: 74%; left: 43%; }
.plan-b .button-mask a:nth-of-type(28) { top: 83%; left: 39%; }
.plan-b .button-mask a:nth-of-type(29) { top: 91%; left: 39%; }

/**
 * Responsive
 *
 **/

/**
 * Tablet (landscape)
 **/
@media only screen and (max-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) {
    .plan-a-fl3,
    .plan-a-fl5 {
        width: 990px;
        height: 285px;
    }
    .plan-b-fl3,
    .plan-b-fl5 {
        width: 990px;
        height: 581px;
    }
}
@media only screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1) {
    .plan-a-fl3,
    .plan-a-fl5 {
        width: 740px;
        height: 213px;
    }
    .plan-b-fl3,
    .plan-b-fl5 {
        width: 740px;
        height: 434px;
    }
}