::-webkit-scrollbar {  display: none;}  

#preload-01 { background: url(../img/road-T1.svg) no-repeat -9999px -9999px; }
#preload-02 { background: url(../img/road-T2.svg) no-repeat -9999px -9999px; }
#preload-03 { background: url(../img/road-T3.svg) no-repeat -9999px -9999px; }
#preload-04 { background: url(../img/road-T4.svg) no-repeat -9999px -9999px; }
#preload-05 { background: url(../img/roadX.svg) no-repeat -9999px -9999px; }
#preload-06 { background: url(../img/road.svg) no-repeat -9999px -9999px; }
#preload-07 { background: url(../img/road-turn1.svg) no-repeat -9999px -9999px; }
#preload-08 { background: url(../img/road-turn2.svg) no-repeat -9999px -9999px; }
#preload-09 { background: url(../img/road-turn3.svg) no-repeat -9999px -9999px; }
#preload-10 { background: url(../img/road-turn4.svg) no-repeat -9999px -9999px; }
#preload-11 { background: url(../img/roadX.svg) no-repeat -9999px -9999px; }
#preload-12 { background: url(../img/roadNS.svg) no-repeat -9999px -9999px; }
#preload-13 { background: url(../img/roadNS2.svg) no-repeat -9999px -9999px; }
#preload-14 { background: url(../img/roadEW.svg) no-repeat -9999px -9999px; }
#preload-15 { background: url(../img/roadEW2.svg) no-repeat -9999px -9999px; }


 

*::-moz-selection { background: transparent}
*::selection { background: red }

body, html {padding:0; margin:0; height:100% }
body {font-family: 'Lato', sans-serif; font-size:14px; font-size:1vw;}



#view {overflow:scroll; width:100vw; height:calc(100vh - 60px); position:relative;  position:fixed; top:0; left:0;

background:grey;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#808080+0,636363+100 */
background: #808080; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #808080 0%, #636363 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #808080 0%,#636363 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #808080 0%,#636363 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#636363',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
#ground { background:grey; /*background-image:url('../img/grass.jpg'); */ position:relative ;


width:2048px;
height:2048px; 
transition:transform .4s linear;

}
#center-of-world {position:absolute; top:50%; left:50%; width:0; height:0; background-color:red}



.tile {
width: 64px; 
height:18.7px; 

border:0px solid green; position:absolute; box-sizing:border-box}
.toucharea {
   width:46px; 
   height:46px; 
   position:absolute; 
   top:-22px; 
   left:0; 
   right:0; 
   margin:auto;
   z-index:5; 
   background-color:red; 
   opacity:0; 
   transform:scaleY(.6) rotate(45deg) ;
   z-index:2}

.overlay {   
   pointer-events: none;
   width:46px; 
   height:46px; 
   position:absolute; 
   top:-22px; 
   left:0; 
   right:0; 
   margin:auto;
   z-index:5; 
   background-color:#00ffe2;
   background-color:white; 
   opacity:0; 
   transform:scaleY(.6) rotate(45deg) ;
   z-index:500
    }
.overlay.overlay-size-4 {width:92px; height:92px;     top: -46px;    left: 18px;}
.overlay.overlay-size-9 {    width: 135px; height: 134px; top: -66px; left: 27px;}    

    
.tile:hover .overlay {opacity:.4;  }
.building {position:absolute; bottom:0; left:0; width:100%; pointer-events: none;
	-webkit-user-select: none; 	-webkit-user-drag: none; 	-webkit-app-region: no-drag;	cursor: default;  -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; 
   } 
.building-size-4 {width:200%;     bottom: -19px;}
.building-size-9 {width:300%;     bottom: -37px;}     

.bubble {width: 80%; position:absolute; margin:auto; left:0; right:0; top: -77px; pointer-events: none;
	-webkit-user-select: none; 	-webkit-user-drag: none; 	-webkit-app-region: no-drag;	cursor: default;  -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; 
   }
.bubble.bubble4 {    left: 32px; top: -80px;}
.bubble.bubble9 {    left: 61px; top: -90px;}


@keyframes bubblebounce {
0% {transform:translateY(0px)}
100% {transform:translateY(10px)}
}


  
.bubble img {width:100%; animation: bubblebounce 1s 0s ease infinite alternate }
.tags {position:absolute; margin:auto; left:0; right:0; transform:translateY(-50%); font-size:10px; text-align: center; color:#cacaca}
.tag-col {color:yellow}


  
.row:nth-child(even) {transform:translateX(-32px); }
.row:nth-child(even) .tile {border-color:red}

#toolbar {overflow:auto; position:fixed; bottom:0; left:0; height:60px; width:100%; background-color: #202526; text-align: center; font-size:0; }
/*#toolbar-inner {overflow:visible; width:auto; }*/
.tool {opacity:.1; display:inline-block;margin:0 5px;  width:60px; height:60px; box-sizing: border-box; vertical-align: bottom; position:relative; transition:transform}
.tool.enabled {opacity:1}
.tool-shine img {animation:tool-shine .5s 0s linear infinite alternate-reverse}

@keyframes tool-shine {
0%{transform:scale(1) translateY(-50%);}
100%{transform:scale(1.3) translateY(-50%);}
}

.tool img {width:100%; display:block; position:absolute; top:50%; margin:auto; left:0; right:0; transform:translateY(-50%)}
.tool.selected-tool {background-color:black;}
.tool:hover {background-color:#2c4e51;}

.tip {opacity:0; 
    position: absolute;
    bottom: 90%;
    background: #32423f;
    padding: 20px;
    font-size: 15px;
    color: #ffffff;
    pointer-events: none;
    border-radius: 3px;
    }
    
     
.tool.enabled .tip{opacity:1}


#console {position:fixed; top:0; left:0}
#console button {background:none; border:0; color:grey}

#messages {  
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    right:0; 
    padding: 0;
    font-size: 1em;
    letter-spacing: 0.07em;
    font-weight:600;
    text-transform: uppercase;
    color: #ffffff;

    text-align: center;
    margin: auto;
    
}

#popups {
    display:none;
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
    background: white;
    color: #1f3a24;
    width: 50%;
    text-align: center;
    font-size: 2em;
    padding: 2em 0em;
    box-sizing: border-box;
    cursor:pointer
    }

#messages p{padding:1em 20px; margin:0 0 0px; 
 background: #ffc42f;
 background: #aa5a5a; 

   border-radius: 0px; transition:all 1s; } 

#log-left, #logmoney {position: fixed;
    font-size: 1em;
    top: 0;
    left:15px;
    color: #dedede;
    font-weight: bold;
    letter-spacing: 1px;
        line-height: 0.3em;
        }
#log-left {}
#logmoney{right: 15px; left:auto}



@-moz-document url-prefix() { 
#logmoney {right: 27px;}

}



.pre-icon {font-weight:300}
/*.icon-population {line-height:1em; height:12px}*/    


.turbina {}
.building.turbina-vrtula {
    
    bottom: 47px;
    width: 72px;
    left: -5px; 
transform: rotateX(10deg) rotateY(45deg) rotateZ(0deg);
   
    
}
.building.turbina-vrtula img{
width:100%; display:block;
animation:turbina 5s 0s linear infinite;}
    
@keyframes turbina{
0%{transform:rotate(0deg)}
100%{transform: rotate(360deg)}

}



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

body {font-size:10px}

}


@media only screen and (min-width: 1000px) {
#ground.zoom0 {transform:scale(.7)}
#ground.zoom1 {transform:scale(1)}
#ground.zoom2 {transform:scale(1.7)}
}