body {
	    margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .mainBlock {
        /*position: relative;*/
        vertical-align: middle; position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    .center{   
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }
    
    .center.seg {
        width: 5%;
        visibility: hidden;
        display: block;
    }

    .controls { 
        position: absolute; right: 1%; bottom: 5%;
        text-align: center;  opacity: 0.7; 
        visibility: hidden;
    }

    #left {
        width: 1.5cm;
    }

    #right {
        width: 1.5cm;
    }

    #up {
        width: 1.5cm;
       transform:translate(0,+40%);  
    }

    #down {
        width: 1.5cm;
        transform:translate(0,+45%);  
    }

    .sound_button {
        position: absolute; bottom: 1%;   left: 1%;
        width: 2cm;
        visibility: visible;
        opacity: 0.7;
    }

    #restart {
        position:absolute;
        margin-top: 16%;
        width: 2cm;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        visibility: hidden;
    }
    #ok_middle {
        position:absolute;
        margin-top: 16%;
        width: 2cm;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

    #map {
        width: 100%;
    }

    #end { width: 10%;
        visibility: hidden; }

    #score {
        position: absolute; top: 2%;   right: 1%;
        width: 2cm;
        visibility: hidden;
        z-index: 500;
    }

    #score_text {
        position: absolute; right: 10%; top: 0.5%;
        text-align: center;
        transform: translate(-90%, -50%);
        border-radius: 100%;
        font-size: 16pt;
        font-style: bold;
        color: black;
        text-shadow: 0 0px 0 ;
    }

    #score_back { width: 100%; opacity: 1; }

    #ifacevisual {
        position: absolute;
        width: 100%;
        top: 30%;
        }

    .iface {
        vertical-align: middle;
        position: absolute;
        top: 3%;
        left: 50%;
        width: 90%;
        transform: translate(-50%, -50%);
        z-index:1000;
        visibility: hidden;
    }

    .iface p {
        text-align: left;
        position: absolute;
        margin-top: 5%;
        left:50%;
        width:80%;
        transform: translate(-50%, -50%);
        /*margin-left:30%;*/
        border-radius: 100%;
        font-size: 18pt;
        color: white;
        text-shadow: 0 0px 0 ;
        font-family: "Times New Roman";
    }

    #ok_iface {
        position:absolute;
        margin-top: 11%;
        right: 3.5%;
        width: 2cm;
    }
    
    #ok_middle {
        position:absolute;
        margin-top: 16%;
        width: 2cm;
        text-align: center;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

    .apple {
        z-index: 100;
    }

    #vote {
        visibility: hidden;
        z-index: 1000;
        width: 60%
    }

    #game_time {
        visibility: hidden;
        
        position:absolute;
        margin-top: 18%;
        width: 3cm;
        text-align: center;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        z-index:10001;
    }

    #time_text {
        
        position:absolute;
        margin-top: 23%;
        width: 3cm;
        text-align: center;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        font-size: 16pt;
        font-style: bold;
        color: black;
        text-shadow: 0 0px 0 ;

       /* position: absolute; right: 10%; top: 0.5%;
        text-align: center;
        transform: translate(-90%, -50%);
        border-radius: 100%;
        font-size: 16pt;
        font-style: bold;
        color: black;
        text-shadow: 0 0px 0 ;*/
    }

    #time_back { width: 100%; opacity: 1; }

    #logo {
        position: absolute;
        transform: translate(0,-152%);
        left:-1;
        width:9%;
        opacity: 0.8;
        vertical-align: top;
        z-index:999;
    }

    #start {
        margin-top: -1.8%;
        width: 60%;
        z-index:1000;
    }

    #win {
        visibility: hidden;
        margin-top: -1.8%;
        width: 60%;
        z-index:1000;
    }

    #game_over {
        visibility: hidden;
        margin-top: -1.8%;
        width: 60%;
        z-index:1000;
    }

    /*#win {
        visibility: hidden;
        margin-top: -2.1%;
        margin-right: -41%;
        width: 76%;
        z-index:1000;
    }

    #game_over {
        visibility: hidden;
        width: 32%;
        z-index:1000;
    }*/


    *.unselectable {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
     
        /*
          Introduced in IE 10.
          See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
        */
        -ms-user-select: none;
        user-select: none;
     }