body, html {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;

    /*text*/
    font-family : "OEMishtameshPro-Regular";
    font-size: 38px;
    line-height: 40px;
    margin: 0 !important;

    top: 0%;
    left: 0%;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*
    visibility: hidden;
    */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior:none;
}

#loader-view {
    position: absolute;
    top: 0vh;
    left: 0vh;
    width: 100%;
    height: 100%;
}

#loader-view .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7vh;
    height: 7vh;
    background-image: url(../images/load_black.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: translate(-50%,-50%);
}

#container{
    visibility: hidden;
    position: absolute;
    background-color: #00558e;
    width: 133vh;
    height: 100vh;
    left: 0%;
    right: 0%;
    margin: 0 auto;
}

#game-view{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    left: 0%;
}
div#print-loader {
    background: #ffffff;
    position: absolute;
    left:  0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em
    
}


div#print-loader p {
    animation: fadeinout 1s infinite;
    padding-bottom: 8vh;
}
@keyframes fadeinout {
    0% {
       opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;    
    }
}


#disableScreen, #disableScroll
{
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

#bg {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    left: 0%;
    z-index: 10;
}

.image {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float: left;
    z-index: 25;
}

.centerRelative{
    position: relative;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.centerRelativeX{
    position: relative;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.centerRelativeY{
    position: relative;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.speaker{
    display: inline-block;
    width: 5.5%;
    height: 5%;
    overflow: hidden;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 900%;
    background-image: url("../images/sound_anim.png");
    cursor: pointer;
}

.speakerPlay {
    -webkit-animation: animSpeaker .7s steps(8) infinite;
    -moz-animation: animSpeaker .7s steps(8) infinite;
    -ms-animation: animSpeaker .7s steps(8) infinite;
    -o-animation: animSpeaker .7s steps(8) infinite;
    animation: animSpeaker .7s steps(8) infinite;
}

@-webkit-keyframes animSpeaker {
    100% {background-position: 100% 0;}
}

@-moz-keyframes animSpeaker {
    100% {background-position: 100% 0;}
}

@-ms-keyframes animSpeaker {
    100% {background-position: 100% 0;}
}

@-o-keyframes animSpeaker {
    100% {background-position: 100% 0;}
}

@keyframes animSpeaker {
    100% {background-position: 100% 0;}
}

.tapHighLightColor {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

/************* class A ***************/

#speakerPopup.speaker.classA {
    top: 26.5%;
}

/************* class D ***************/

#speakerPopup.speaker.classD {
    top: 26.5%;
}

/******* blnk speaker *******/
.blinkSpeaker {
    animation: blinkSpeakerAnim 0.5s infinite step-end alternate;
}


@keyframes blinkSpeakerAnim {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}