body {
    font-family: 'Montserrat', sans-serif;
    margin: 0
}

.aba-sec {
    position: relative;
    width: 732px;
    height: 656px;
    margin: auto;
}

    .aba-sec img {
        top: 0px;
        position: absolute;
        width: 732px;
        height: 569px;
        object-fit: contain;
    }

.abasec-mn {
    position: relative;
}

    .abasec-mn div {
        position: absolute;
        background: #d0d2d3;
        transition: all 0.5s ease
    }

        .abasec-mn div.block {
            /*background: #d71313;*/
        }

        .abasec-mn div a {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            height: 100%;
            font-size: 11px;
            color: #fff; 
			text-indent: -999px;
            overflow: hidden;
        }

        .abasec-mn div:hover {
            transform: scale(1.2)
        }

.aba-avna {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.aba-rf, .aba-hf, .aba-vip, .aba-cat1, .aba-ua {
    padding: 0 10px;
    display: flex;
    align-items: center
}

    .aba-hf span {
        width: 20px;
        height: 20px;
        background: #f4e941;
        display: inline-block;
        margin-right: 5px
    }

    .aba-rf span {
        width: 20px;
        height: 20px;
        background: #009b3f;
        display: inline-block;
        margin-right: 5px
    }

    .aba-vip span {
        width: 20px;
        height: 20px;
        background: #d2d3d5;
        display: inline-block;
        margin-right: 5px
    }

    .aba-cat1 span {
        width: 20px;
        height: 20px;
        background: #221435;
        display: inline-block;
        margin-right: 5px
    }

    .aba-ua span {
        width: 20px;
        height: 20px;
        background: #797979;
        display: inline-block;
        margin-right: 5px
    }

.clck-msg {
    display: none;
    padding: 10px;
    background: rgba(255 255 255 / 0.3);
    color: #fff;
    position: absolute;
    right: 10px;
    bottom: 10px
}

.aba-sec a {
    text-decoration: none
}

.vip {
    width: 128px;
    height: 23px;
    top: 482px;
    left: 301px;
}

.block1 {
    width: 56px;
    height: 48px;
    top: 427px;
    left: 123px;
    transform: rotate(32deg);
    clip-path: polygon(15% 0%, 98% 0%, 100% 100%, 0% 100%);
}

.block2 {
    width: 56px;
    height: 45px;
    top: 453px;
    left: 173px;
    transform: rotate(16deg);
    clip-path: polygon(15% 0%, 98% 0%, 100% 100%, 0% 100%);
}

.block3 {
    width: 68px;
    height: 43px;
    top: 461px;
    left: 229px;
    clip-path: polygon(10% 0%, 98% 0%, 100% 100%, 0% 100%);
}

.block4 {
    width: 28px;
    height: 31px;
    top: 448px;
    left: 301px;
}

.block5 {
    width: 28px;
    height: 31px;
    top: 448px;
    left: 335px;
}

.block6 {
    width: 28px;
    height: 31px;
    top: 448px;
    left: 367px;
}

.block7 {
    width: 28px;
    height: 31px;
    top: 448px;
    left: 400px;
}

.block8 {
    width: 70px;
    height: 57px;
    top: 448px;
    left: 434px;
    clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
}

.block9 {
    width: 60px;
    height: 57px;
    top: 441px;
    left: 502px;
    transform: rotate(-12deg);
    clip-path: polygon(0% 0%, 74% 0%, 100% 100%, 0% 100%);
}

.block10 {
    width: 60px;
    height: 57px;
    top: 417px;
    left: 552px;
    transform: rotate(-30deg);
    clip-path: polygon(0% 0%, 74% 0%, 100% 100%, 0% 100%);
}

.block11 {
    width: 60px;
    height: 56px;
    top: 369px;
    left: 596px;
    transform: rotate(-60deg);
    clip-path: polygon(17% 0%, 82% 0%, 100% 100%, 0% 100%);
}

.block12 {
    width: 62px;
    height: 56px;
    top: 318px;
    left: 614px;
    transform: rotate(13deg);
    clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 90%);
}

.block13 {
    width: 62px;
    height: 46px;
    top: 275px;
    left: 617px;
}

.block14 {
    width: 62px;
    height: 46px;
    top: 226px;
    left: 617px;
    clip-path: polygon(0 18%, 100% 0, 100% 100%, 0% 100%);
}

.block15 {
    width: 62px;
    height: 51px;
    top: 174px;
    left: 610px;
    transform: rotate(-8deg);
    clip-path: polygon(0 28%, 90% 0, 100% 100%, 0% 100%);
}

.block16 {
    width: 62px;
    height: 61px;
    top: 121px;
    left: 590px;
    transform: rotate(-27deg);
    clip-path: polygon(0 28%, 90% 0, 100% 100%, 0% 100%);
}

.block17 {
    width: 62px;
    height: 61px;
    top: 77px;
    left: 535px;
    transform: rotate(28deg);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 9% 100%);
}

.block18 {
    width: 52px;
    height: 66px;
    top: 59px;
    left: 487px;
    transform: rotate(18deg);
    clip-path: polygon(0 10%, 100% 0, 90% 87%, 9% 100%);
}

.block19 {
    width: 62px;
    height: 60px;
    top: 59px;
    left: 430px;
    clip-path: polygon(0 0%, 100% 0, 75% 100%, 0% 100%);
}

.block20 {
    width: 61px;
    height: 60px;
    top: 59px;
    left: 365px;
}

.block21 {
    width: 61px;
    height: 60px;
    top: 59px;
    left: 300px;
}

.block22 {
    width: 61px;
    height: 60px;
    top: 59px;
    left: 235px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%);
}

.block23 {
    width: 61px;
    height: 60px;
    top: 65px;
    left: 178px;
    transform: rotate(-15deg);
    clip-path: polygon(13% 0, 100% 0, 100% 100%, 33% 93%);
}

.block24 {
    width: 61px;
    height: 60px;
    top: 81px;
    left: 134px;
    transform: rotate(-35deg);
    clip-path: polygon(0 0, 100% 10%, 90% 100%, 6% 93%);
}

.block25 {
    width: 61px;
    height: 60px;
    top: 124px;
    left: 83px;
    transform: rotate(24deg);
    clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
}

.block26 {
    width: 61px;
    height: 52px;
    top: 179px;
    left: 63px;
    transform: rotate(14deg);
    clip-path: polygon(0 0, 100% 20%, 100% 86%, 0% 100%);
}

.block27 {
    width: 64px;
    height: 45px;
    top: 228px;
    left: 55px;
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%);
}

.block28 {
    width: 64px;
    height: 49px;
    top: 275px;
    left: 55px;
    clip-path: polygon(0 0, 100% 2%, 100% 90%, 0% 100%);
}

.block29 {
    width: 64px;
    height: 54px;
    top: 323px;
    left: 58px;
    transform: rotate(-7deg);
    clip-path: polygon(0 0, 100% 2%, 100% 80%, 0% 100%);
}

.block30 {
    width: 64px;
    height: 63px;
    top: 369px;
    left: 74px;
    transform: rotate(-26deg);
    clip-path: polygon(0 0, 100% 10%, 100% 77%, 10% 100%);
}





/*div.vip{background: #d2d3d5;box-shadow: 0 0 3px 3px #062c01 inset;}*/
div.block1, div.block2, div.block3, div.block9, div.block10 {
    background: #dd9f34;
    box-shadow: 0 0 3px 3px #45310f inset;
}
div.block4, div.block5, div.block6, div.block7 {
    
    box-shadow: 0 0 3px 3px #45310f inset;
}

div.block11, div.block12, div.block13, div.block14, div.block15, div.block16 {
    background: #409b58;
    box-shadow: 0 0 3px 3px #154522 inset;
}

div.block17, div.block18, div.block19, div.block20, div.block21, div.block22, div.block23, div.block24, div.block25, div.block26, div.block27, div.block28, div.block29, div.block30 {
    background: #b50031;
    box-shadow: 0 0 3px 3px #2b040e inset;
}

div.vip:hover {
    transform: scale(1);
}
div.block1:hover {
    transform: rotate(32deg) scale(1.2);
}

div.block2:hover {
    transform: rotate(16deg) scale(1.2);
}

div.block9:hover {
    transform: rotate(-12deg) scale(1.2);
}

div.block10:hover {
    transform: rotate(-30deg) scale(1.2);
}

div.block11:hover {
    transform: rotate(-60deg) scale(1.2);
}

div.block12:hover {
    transform: rotate(13deg) scale(1.2);
}

div.block15:hover {
    transform: rotate(-8deg) scale(1.2);
}

div.block16:hover {
    transform: rotate(-27deg) scale(1.2);
}

div.block17:hover {
    transform: rotate(28deg) scale(1.2);
}

div.block18:hover {
    transform: rotate(18deg) scale(1.2);
}

div.block23:hover {
    transform: rotate(-15deg) scale(1.2);
}

div.block24:hover {
    transform: rotate(-35deg) scale(1.2);
}

div.block25:hover {
    transform: rotate(24deg) scale(1.2);
}

div.block26:hover {
    transform: rotate(14deg) scale(1.2);
}

div.block29:hover {
    transform: rotate(-7deg) scale(1.2);
}

div.block30:hover {
    transform: rotate(-26deg) scale(1.2);
}


.abasec-mn div.block:hover {
    transform: scale(1);
}

div.block1.block:hover {
    transform: rotate(32deg) scale(1);
}

div.block2.block:hover {
    transform: rotate(16deg) scale(1);
}

div.block9.block:hover {
    transform: rotate(-12deg) scale(1);
}

div.block10.block:hover {
    transform: rotate(-30deg) scale(1);
}

div.block11.block:hover {
    transform: rotate(-60deg) scale(1);
}

div.block12.block:hover {
    transform: rotate(13deg) scale(1);
}

div.block15.block:hover {
    transform: rotate(-8deg) scale(1);
}

div.block16.block:hover {
    transform: rotate(-27deg) scale(1);
}

div.block17.block:hover {
    transform: rotate(28deg) scale(1);
}

div.block18.block:hover {
    transform: rotate(18deg) scale(1);
}

div.block23.block:hover {
    transform: rotate(-15deg) scale(1);
}

div.block24.block:hover {
    transform: rotate(-35deg) scale(1);
}

div.block25.block:hover {
    transform: rotate(24deg) scale(1);
}

div.block26.block:hover {
    transform: rotate(14deg) scale(1);
}

div.block29.block:hover {
    transform: rotate(-7deg) scale(1);
}

div.block30.block:hover {
    transform: rotate(-26deg) scale(1);
}

/*.abasec-mn div{box-shadow: 0 0 3px 3px #159d04 inset;}*/
.abasec-mn div.block {
    box-shadow: none
}

    .abasec-mn div.block a {
        cursor: not-allowed;
    }
 .abasec-mn div.vip a {
        cursor: not-allowed;
    }
.aba-ua {
    display: none
}



@media (max-width:992px) {
    .aba-modal .modal-body {
        height: 400px;
    }

    .aba-sec {
        transform: scale(0.42);
        transform-origin: top left;
        padding: 20px 0;
    }

        .aba-sec img {
            top: 20px;
        }

    .clck-msg {
        display: block;
    }
}


.ecs-modal .modal-dialog {
    max-width: 800px;
}

.ecs-modal .modal-header {
    background: #58469c;
    flex-direction: row;
    padding: 1rem;
}

.ecs-modal .modal-title {
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.ecs-modal .modal-body {
    padding: 0
}

.ecs-modal .btn-close {
    position: absolute;
    top: 25px;
    right: 20px;
    filter: invert(1);
}

.ecs-modal .modal-body {
    background: #fff
}