@media only screen and (device-width: 1024px) and (orientation:landscape) {
    div#keyboard_place {
        width:100%;
        left: 120px !important;
        height: 460px;
        ma transform-origin: center
    }

}

div#vkeyboardhand {
    background-color: #f3f3f3;
    border-radius: 20px;
}

@media only screen and (max-device-width: 480px) {

    div#keyboard_place {
        transform: scale(.9) translatey(-10px);
        width: 110%;
        left: 6px;
        transform-origin: left;
        height: 300px
    }

}

div#keyboard_place {
    position: relative;
    height: 410px;
    top: -35px;
    margin: auto;
    overflow: hidden;
    width: 75%;
    /* left: 2.5%; */
    direction: ltr;
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {


    div#keyboard_place {
        width: 105%;
        left: 0px;
        transform: scale(.7) translateX(-20px);
        top: -100px
    }

 }


.hands_holder {
    position: relative;
    width: 100%;
    height: 220%;
    overflow: hidden;
}


object#svgObject {
    width: 650px;
    position: absolute;
    pointer-events: none;
    height: 363px;
    opacity: 0.8;
    -webkit-transform: translateX(70px) scale(1.66);
    -ms-transform: translateX(70px) scale(1.66);
    z-index: 9;
    left: 5px;
    transform: translateX(70px) scale(1.66) !important;
    top: -2px !important;
}


div#keyboard {
    /* position: absolute; */
    top: -1px;
    opacity: 1;
    width: 685px;
    margin: auto;
}


.st0 {
    /* fill: none; */
    stroke-width: 0.5;
    stroke-miterlimit: 10;
}
.st0 {
    fill: white;
    /* stroke: #ffffff; */
    stroke-width: 0.7;
    stroke-miterlimit: 10;
}

.st3 {
    font-size: 15px;
}

.st2 {
    font-family: 'vazir';
}
.st1 {
    fill: #777777;
}

#text-shift-right, #text-backspace, #text-enter, #text-tab, #caps-lock, #text-shift-left, #text-option-right, #text-option-left {
    fill: #777;
}
.st8 {
    font-size: 11px;
}

.st9 {
    fill: #777 !important;
}

.change_kayboard_btn {
    width: auto;
    position: absolute;
    /* height: 50px; */
    z-index: 9;
    cursor: pointer;
    bottom: 105px;
    color: #444444;
    /* background-color: #e6e6e6; */
    padding: 5px;
    border-radius: 10px;
}

.change_kayboard_btn span.fa {
    padding: 5px;
}

.change_kayboard_btn.disable {
    color: #afafaf;
    background-color: #f7f7f7;
}