div#start {
	cursor: pointer;
   top: 35%;
   /* width: 72vh;
   margin-top: 16vh;*/
   width: 352px;  /*a 70 coincidia ej con botnes calidad y lenguaje asi como copyright y pinchabas y se ejecutaba este , solucion reducir a ej 30*/
   height:102px;
    z-index: 2;
}

div#start_game {  /*boton iniciar game*/
/* transform: scale(0, 1);  debia aparecer 0,0 u esa es la diferencia con la que funciona en game y aparece tachado podr defecto.
  -ms-transform: scale(0, 1);   deja los 45px por 45px en 90x90 desde la esquina inferior derecha mas el button y right que ya le impone el parente 
  -webkit-transform: scale(0, 1); */
   cursor: pointer;
   top: 35%;
   /* width: 72vh;
   margin-top: 16vh;*/
   width: 352px;  /*a 70 coincidia ej con botnes calidad y lenguaje asi como copyright y pinchabas y se ejecutaba este , solucion reducir a ej 30*/
   height:102px;
   /*al haberla reeditado y scalado dejando imagen a 352x102 la en y x95 creo la es solo queda dejar al 100% sino vemos algo deformacion*/
   margin-top: 8px;
    
    z-index: 1;
	display:inline-block;  /*unas lineas mas abajo exactamente en lo ponen a none si el idioma cambia en los tag img es o img en segun el caso*/
	
    background-repeat: no-repeat;
    background-size: 100% 100%;	 
}

div#start_game[lang="es"] {
   background-image: url(interface/start_game_es.png);
}

div#start_game[lang="en"] {
     background-image: url(interface/start_game_en.png);
}
  



img#start_game_glow {  /*glow o hover no se aprecia si al pulsar te vas a otra ventana*/
    top: 25%;
    /*width: 66vh;
    margin-top: 17vh;*/
	width: 70%;
	margin-top: 8px;
    z-index: 1;
}

img#start_game_hover {
	
    top: 25%;
   /* width: 66vh;
    margin-top: 17vh;*/
	width: 70%;
	margin-top: 8px;
    z-index: 1;
    display: none;   /*para por codigo pasar a inline-block*/
}



@media (orientation : portrait) {
    img#start_game {
        width: 66vw;
        margin-top: 17vw;
    }

    img#start_game_glow {
        width: 66vw;
        margin-top: 17vw;
    }

    img#start_game_hover {
        width: 66vw;
        margin-top: 17vw;
    }
	
	
	
}


div#start_game .clockwise, div#start_game .anticlockwise {
  position: relative;
  color: #fff;
  font-size: 40px;
  font-weight: bold;

}


div#patreon {
	position: absolute;
    top: 25%;
	color: #fff;  /*color blanco para el texto*/
	 font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;
   /* width: 66vh;
    margin-top: 17vh;*/
	right: 15px;
	width: 20%;
	margin-top: 8px;
    z-index: 2;
    display: block;   /*para por codigo pasar a inline-block*/
	cursor: pointer;
	background-color: rgba(95, 132, 132, 0.9); /*ahora es el extendido en patron de juegos azul semitransparente con border-radius*/
    border-radius: 12px;
	
}


body[lang="en"] div#patreon div[lang="es"] {
    display: none;
}

body[lang="es"] div#patreon div[lang="en"] {
    display: none;
}

div#patreon .clockwise, div#patreon .anticlockwise {
  position: relative;
  color: #fff;
  font-size: 40px;
  font-weight: bold;

}



div#paypal {
position: absolute;
top: 14%;
/*bottom: 0;*/
right: 15px;
display: block;
/*visibility: display;	*/
/*mejor hacer esto desde codigo para visualizarlo y poder interaccionar 
en un momento dado hasta posicionarlo en el lado desead seguramente ein interface.js este aclarado*/
z-index: 2;	
}




div#copyrights {
    position: absolute;
	opacity: 1;  /*en game main no creo necesitase estas dos lineas para mostrarlo opacity y zindex a 2*/
	z-index: 2;
    /*width: 18vh;
    height: 4vh;*/
	width: 280px;
	height: 75px;
	top: 70%;
    /*bottom: 60px;*/
    left: 50%;
   /* margin-bottom: 50px;
    background-image: url(interface/copyrights.png);*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
	
	color: #f6dd96;  /*un poquito amarillento*/
    /*margin-top: 20px;*/
    font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;
	
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	display: block;
}  

body[lang="en"] div#copyrights div[lang="es"] {
    display: none;
}

body[lang="es"] div#copyrights div[lang="en"] {
    display: none;
}

div#copyrights > a:link, a:visited {   /*si esta operativo el visited no nos vamos a enterar si lo muestra siempre igual que como link*/
    /*color: (internal value);   hay parce unas predeterminadas que lo mostraban en morado o azul oscuro y no se observaba bien el link*/
	color:#D7F2F7;  /*blanco*/
    text-decoration: underline;/* y subrrayado  ambos afectan al cooki y segurametne algo mas*/
    cursor: pointer;  /*a auto desde w3school como dice lo hace automaticamente los navegadores, lo dejaba sin cursor */
}

div#copyrights > a:link:active, a:visited:active { 
    color: (internal value);
	color:#FFFF00; /*amarillento*/
}







/*segunda extraccion .Ahora le incoror los dos elmeentos que estaban solos en atlantida_0.css    */

div#replay {
    position: absolute;
    left: 50%; top: 50%;
  /*  background-image: url(interface/replay.png);*/
    width: 206px;
    height: 256px;
    margin-left: -128px;
    margin-top: -128px;
	z-index: 1;
	
    visibility:hidden;
	transform: translate(0%, 0%); /*al que impone  al -50%,-50% .centrated x-y  class lo deja no se porque a la izq del centro y al top. Asi que lo personalizamos*/
	
	border-radius: 12px;
   background-color: rgba(27, 84, 86, 0.5);
   
   
   
}

div#replay  div span{
	font-weight: bold;
	 border-radius: 8px;
    background-color: #000;
   color: #fff; /*!important;*/
}	

div#victory {
    position: absolute;
    left: 50%; top: 50%;
    /*background-image: url(interface/win.png);*/
    width: 206px;
    height: 256px;
    margin-left: -128px;
    margin-top: -128px;
	 z-index: 1;
    visibility:hidden;
	
	text-align: center;  /*en div span de victory no hace nada asi que aqui lo dejo, la o del mensaje es la clave*/
	
	transform: translate(0%, 0%); /*al que impone  al -50%,-50% .centrated x-y  class lo deja no se porque a la izq del centro y al top. Asi que lo personalizamos*/
	
	border-radius: 12px;
   background-color: rgba(27, 84, 86, 0.5);
   
  
	
	
}

div#victory  div span{
	
 font-weight: bold;
	 border-radius: 8px;
    background-color: #000;
   color: #fff; /*!important;*/
}


.next_btn:hover span,
.restart_btn:hover span {
   color:#000;
    font-weight: bold;
}



body[lang="es"] div#replay div.restart_btn {
    margin-top: 24px;
}

body[lang="en"] div#replay div.restart_btn {
    margin-top: 32px;
}



div.restart_btn {
    text-align: center;  /*estaba a left , vamos diria que sin ajustar . De aqui nos vamos a linea 311 a centrar tambein texto justo encima boton*/
    /*color: #a9a9a9;*/
	color: #fff;
    font-family: "Linux_Biolinum_Bold";
    font-size: 15px;
    line-height: 40px;
    margin-left: auto;
    margin-right: auto;
  
	background-image: url(interface/game_menu_buttons.png);
  cursor: pointer;
  /*padding-top: 4px;*/
   height: 40px;
   
   background-position: 0 0;
	padding-top: 2px;  /*lo va ignorar por  el ultimo motivo explicado unas lineas atras*/
}


/*  la ignora frente a supongo la que mas elementos tiene unas lineas atras aunque tenga nuevos atributos o propiedades como background postion
body[lang="es"] div.restart_btn {
				comentada  width: 198px;
	 width: 204px;
	              comentada  height: 45px;
    background-position: 0 0;
	padding-top: 2px;
	
}
*/

body[lang="es"] div.restart_btn:hover {
   /* width: 198px;
    background-position: 0 -40px;*/
	 background-position: 204px 0;
	padding-top: 2px;
}

body[lang="en"] div.restart_btn {
    /*width: 150px;
    background-position: -198px 0;*/
	  width: 204px;
	   background-position: 0 0;
}

body[lang="en"] div.restart_btn:hover {
   /* width: 150px;
    background-position: -198px -40px;*/
	 background-position: 204px 0;
}

body[lang="en"] div.restart_btn span[lang="es"] {
    display: none;
}

body[lang="es"] div.restart_btn span[lang="en"] {
    display: none;
}



 /*descubrimos con las lineas siguientes para comparar con mi ajsute en tal innvento que aprovecha botones del game menu para standarizar que no hacia falta repetir background-image  


div#game_exit_dialeg div:hover  {
	
	 background-image: url(interface/game_menu_buttons.png);
}

div#game_exit_dialeg div:hover  {
	
	background-image: url(interface/game_menu_buttons.png);
}

*/


div.next_btn {
    background-repeat: no-repeat;
    /*background-image: url(interface/next_btn.png);*/
	background-image: url(interface/game_menu_buttons.png);
    height: 40px;
    width: 206px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}



div.next_btn span {
    text-align: left;
    /*color: #a9a9a9;*/
	color: #fff;
    font-family: "Linux_Biolinum_Bold";
    font-size: 15px;
    line-height: 40px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
		
}
/*
div.next_btn:hover span {
    color: #80d0ff;
}
*/




div#vitory:first-child {	
    width: 204px;
	/*height: 45px;*/
    background-position: 0 0;
	padding-top: 2px;
}

body[lang="en"] div#vitory:first-child {
    width: 204px;
}

div#vitory:first-child:hover {
    background-position: 204px 0;
	padding-top: 2px;
}

body[lang="en"] div#vitory:first-child:hover {
    background-position: 204px 0;
}



div#vitory:nth-child(2) {
    width: 204px;
	/*height: 45px;*/
    background-position: 0 -40px;
	padding-top: 2px;
}

body[lang="en"] div#vitory:nth-child(2) {
    width: 204px;
}

div#vitory:nth-child(2):hover {
    background-position: 204px -40px;
	padding-top: 2px;
}

body[lang="en"] div#vitory:nth-child(2):hover {
    background-position: 204px -40px;
}














body[lang="en"] div.next_btn span[lang="es"] {
    display: none;
}

body[lang="es"] div.next_btn span[lang="en"] {
    display: none;
}

body[lang="es"] div#replay div[lang="en"] {
    display: none;
}

body[lang="en"] div#replay div[lang="es"] {
    display: none;
}

body[lang="es"] div#replay div[lang="es"] {
	text-align: center;   /*mi aporte como el center al texto del boton unas ineas atras en 228*/
    padding-top: 50px;
}

body[lang="en"] div#replay div[lang="en"] {
    padding-top: 62px;
}






body[lang="es"] div#victory div[lang="en"] {
    display: none;
}

body[lang="en"] div#victory div[lang="es"] {
    display: none;
}



/*
div#victory div.next_btn {
    margin-top: 30px;
    margin-bottom: 6px;
}

body[lang="es"] div#victory div.next_btn {
    margin-top: 34px;
    margin-bottom: 6px;
}

div#victory {
    top: 25%;
    background-repeat: no-repeat;
    visibility: hidden;
}


body[lang="es"] div#victory {
					comentado  background-image: url(interface/win_desk_es.png);
    width: 376px;
    height: 286px;
}

body[lang="en"] div#victory {
					comentado background-image: url(interface/win_desk_en.png);
    width: 296px;
    height: 286px;
}

*/

@media (max-height: 320px) {
/*   
   div#replay {
        width: 234px;
        height: 156px;
        background-image: url(interface/replay_mobile.png);
    }

    div.restart_btn {
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    div.next_btn {
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    body[lang="en"] div#replay div[lang="en"] {
        padding-top: 40px;
    }

    body[lang="es"] div#replay div[lang="es"] {
        padding-top: 30px;
    }

    body[lang="en"] div#replay div.restart_btn {
        margin-top: 16px;
    }

    body[lang="es"] div#replay div.restart_btn {
        margin-top: 10px;
    }

    body[lang="es"] div#victory {
        width: 284px;
        top: 50%;
        height: 190px;
        background-image: url(interface/win_mobile_es.png);
    }

    body[lang="en"] div#victory {
        width: 234px;
        top: 50%;
        height: 190px;
        background-image: url(interface/win_mobile_en.png);
    }

    div#victory div.next_btn {
        margin-top: 16px;
        margin-bottom: -4px;
    }

    body[lang="es"] div#victory div[lang="es"] {
        padding-top: 26px;
    }

    body[lang="es"] div#victory div.next_btn {
        margin-top: 12px;
        margin-bottom: -4px;
    }

    body[lang="en"] div#victory div[lang="en"] {
        padding-top: 20px;
    }

    div#replay div[lang] span,
    div#victory div[lang] span {
        font-size: 13px;
    }
	
	*/
}




/*
@media only screen and (orientation: landscape) {
}*/
div#start_cont {
    /*position: fixed;
	overflow: hidden;   
    width: 100%;
    height: 100%;*/
	position:absolute;
    top: 0;
    left: 0;
	/*overflow: hidden;  ya hereda el overflow-x actual puesto al body*/
	width: 100%;
	height: 2955px;
    /*background-color: #171717;*/
	background-color: #000000;
    background-position: center bottom;
    /*background-size: auto 100%;*/
	background-size: auto;  /*sin este no aparece repetido*/
  /*  background-repeat: no-repeat;*/
  background-repeat: repeat-y;
    opacity: 0;
	/*supuestamente cargamos la imagen que el body tambien esta cargando pero por los huecos observados en el momento de escribir esto en el encode dudo funcionase
	y solo estuviese haciendo el del body
    background-image: url(interface/title_bg.png);   porque la encode porque me daba mucho por culo a veces no cargandose al recargar la pagina   /
	background-image:url('data:image/png;base64,');*/
	background-image: url(interface/title_bg.png); 
     -moz-transition: opacity .25s linear;
    -ms-transition: opacity .25s linear;
    -webkit-transition: opacity .25s linear;
    transition: opacity .25s linear;
	 z-index: 2;
 }


body[lang="es"] div#start_cont {
    background-position: center top;
}

body[lang="en"] div#start_cont {
    background-position: center bottom;
}

/*
body[lang="es"] div#start_cont img#start_game[lang="en"]{
    display: inline-block;
}


body[lang="en"] div#start_cont img#start_game[lang="es"] {
    display: inline-block;
}
*/


body[lang="en"] div#start_game[lang="es"] {
    display: none;
}

body[lang="es"] div#start_game[lang="en"] {
    display: none;
}

div#start_cont .personajes-portada {
		 position: fixed;
	/*top: 0; incompatible con centered-y y es el unico que la usa hasta ahora*/
    /*left: 0; incompatible con centered-x*/
	width: 1024px;
	height: 512px;
	 background-repeat: no-repeat;
	 background-position: center top;

	  z-index: 2;
}

.personajes-portada .clockwisedown { 
  left: 17%;
  position: relative;
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  
}

.personajes-portada .anticlockwiseup { 
  left: 20%;
  position: relative;
  color: #fff;
  font-size: 50px;
  font-weight: bold;
}


div#quality {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 298px;
    margin-left: -294px;
    height: 60px;
    background-image: url(interface/qual.png);
	z-index: 4;  /*porque ha de superar a la 4 de los personajes imagen*/
}

body[lang="es"] div#start_cont div#quality[quality="low"] {
    background-position: 0 -60px;
}

body[lang="es"] div#start_cont div#quality[quality="high"] {
    background-position: 0 0px;
}

body[lang="en"] div#start_cont div#quality[quality="low"] {
    background-position: 0 -120px;
}

body[lang="en"] div#start_cont div#quality[quality="high"] {
    background-position: 0 -180px;
}

div#low_qual {
    margin-top: 16px;
    width: 56px;
    height: 34px;
    float: left;
    margin-left: 154px;
    cursor: pointer;
}

body[lang="en"] div#start_cont div#low_qual {
    margin-right: 20px;
    margin-left: 0;
    width: 60px;
    float: right;
}

body[lang="en"] div#start_cont div#high_qual {
    float: right;
    width: 62px;
    margin-left: 0;
}


body[lang="es"] div#start_cont div#low_qual {
    margin-right: 20px;
    margin-left: 0;
    width: 60px;
    float: right;
}

body[lang="es"] div#start_cont div#high_qual {
    float: right;
    width: 62px;
    margin-left: 0;
}



div#high_qual {
    margin-top: 16px;
    width: 56px;
    height: 34px;
    float: left;
    cursor: pointer;
}

div#languages_bar {
    position: fixed;
    bottom: 0;
    right: 50%;
    width: 293px;
    margin-right: -289px;
    height: 57px;
    background-image: url(interface/lang_es_en.png);
	z-index:4;
}

div#lang_es {
    margin-top: 16px;
    width: 56px;
    height: 34px;
    float: left;
    margin-left: 124px;
    cursor: pointer;
}

div#lang_en {
    margin-top: 16px;
   /* width: 66px;  para evitar algunos como bloqueos que no responde al pincharla la agrandamos de ancho sino tb de altura*/
	width: 86px;
    height: 34px;
    float: left;
    cursor: pointer;
}

body[lang="en"] div#start_cont div#languages_bar {
    background-position: 0 -57px;
}

body[lang="en"] div#start_cont div#lang_es {
    margin-left: 122px;
}

@media (max-width: 640px) {
    div#quality {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        margin-left: -220px;
        -moz-transform-origin: bottom;
        -ms-transform-origin: bottom;
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }

    body[lang="en"] div#start_cont div#quality[quality="low"] {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        margin-left: -220px;
    }

    body[lang="en"] div#start_cont div#quality[quality="high"] {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        margin-left: -220px;
    }

    div#languages_bar {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        margin-right: -220px;
        -moz-transform-origin: bottom;
        -ms-transform-origin: bottom;
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }

    body[lang="en"] div#start_cont div#languages_bar {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        margin-right: -220px;
    }
}

@media (max-height: 520px) {
    div#quality {
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        margin-left: -247px;
        -moz-transform-origin: bottom;
        -ms-transform-origin: bottom;
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }

    body[lang="en"] div#start_cont div#quality[quality="low"] {
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        margin-left: -247px;
    }

    body[lang="en"] div#start_cont div#quality[quality="high"] {
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        margin-left: -247px;
    }

    div#languages_bar {
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        margin-right: -247px;
        transform-origin: bottom;
        -webkit-transform-origin: bottom;
    }

    body[lang="en"] div#start_cont div#languages_bar {
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        margin-right: -247px;
    }
}


/* preoloader personalizado para el tractor*/

/* main menu o start-menu sm preloader/

div#preloader_t_cont {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
   / background-image: url(interface/preloader_bg.jpg);/
    /background-image: url(interface/fondo_preloader0_render1024-576.png);/
background-image:url('data:image/png;base64,');
 
    background-color: #171717;
    background-repeat: no-repeat;
    background-position: center center;
    visibility: hidden;
}
*/
div#prelod_t_static_path {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 395px;
	height: 222px;
    /*height: 134px;*/
    margin-left: -197px;
    margin-top: -75px;
}
div#prelod_t_dynamic_path {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    /*background-image: url(interface/loader_bar_line.png);  era 395x134*/
	background-image: url(interface/render_city_05_pack_preload_white395-222.png);
}
div#prelod_t_static_path > span {
    display: inline-block;
    font-family: Ruslan;
    /*margin-top: 102px;*/
	 margin-top: 202px;
    margin-left: 170px;
    font-size: 32px;
    color: #fff;
}















/* main menu o start-menu sm preloader/

div#preloader_a_cont {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
   / background-image: url(interface/preloader_bg.jpg);/
    /background-image: url(interface/fondo_preloader0_render1024-576.png);/
background-image:url('data:image/png;base64,');

    background-color: #171717;
    background-repeat: no-repeat;
    background-position: center center;
    visibility: hidden;
}
*/
div#prelod_a_static_path {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 395px;
	height: 222px;
    /*height: 134px;*/
    margin-left: -197px;
    margin-top: -75px;
}
div#prelod_a_dynamic_path {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    /*background-image: url(interface/loader_bar_line.png);  era 395x134*/
	background-image: url(interface/render_city_05_pack_preload_white395-222.png);
}
div#prelod_a_static_path > span {
    display: inline-block;
    font-family: Ruslan;
    /*margin-top: 102px;*/
	 margin-top: 202px;
    margin-left: 170px;
    font-size: 32px;
    color: #fff;
}

/*avatar  av/
div#preloader_avatar_cont {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
   / background-image: url(interface/preloader_bg.jpg);/
    /background-image: url(interface/fondo_preloader0_render1024-576.png);/
	background-image:url('data:image/png;base64,');
 
    background-color: #171717;
    background-repeat: no-repeat;
    background-position: center center;
    visibility: hidden;
}
*/
div#prelod_av_static_path {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 395px;
	height: 222px;
    /*height: 134px;*/
    margin-left: -197px;
    margin-top: -75px;
}
div#prelod_av_dynamic_path {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    /*background-image: url(interface/loader_bar_line.png);  era 395x134*/
	background-image: url(interface/preloadaer_for_avatar_default395-222-2.png);
}
div#prelod_av_static_path > span {
    display: inline-block;
    font-family: Ruslan;
   /* margin-top: 102px;*/
  /* margin-top: 480px; ya no es necesario puesto que usar alturas de 475 parece no soportarlo y volvimos a 202 que si parece soportarlo frente a la espada de 134*/
  margin-top: 202px;  
  margin-left: 170px;
    font-size: 32px;
    color: #fff;
}


/*city  cy
div#preloader_city_cont {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
   / background-image: url(interface/preloader_bg.jpg);/
    /background-image: url(interface/fondo_preloader0_render1024-576.png);
	background-image:url('data:image/png;base64,...');
	background-color: #171717;
    background-repeat: no-repeat;
    background-position: center center;
    visibility: hidden;
}
*/

div#prelod_cy_static_path {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 395px;
	height: 222px;
    /*height: 134px;*/
    margin-left: -197px;
    margin-top: -75px;
}
div#prelod_cy_dynamic_path {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    /*background-image: url(interface/loader_bar_line.png);  era 395x134*/
	background-image: url(interface/preloadaer_for_avatar_default395-222.png);
}
div#prelod_cy_static_path > span {
    display: inline-block;
    font-family: Ruslan;
   /*margin-top: 102px;*/
	 margin-top: 202px;
    margin-left: 170px;
    font-size: 32px;
    color: #fff;
}



div#game_menu {
    width: 296px;  /*la imagen de buttons es de 336 la en y 408 de ancho la es . Y de alto 200px ambas.Pero supongo no importa si cada div esta personalizado con width cada uno por boton distinto incluso par el idioma por lo que se escribe que varia. Y estas medidas son de la que ahora
	he reemplazado por un fondo semitransparente*/
    height: 364px;
	
	/*nos traemos de game_exit mi invento de border y solo fondo color semitransparente azulado*/
	 border-radius: 8px;   
    /*background-image: url(interface/game_menu_desk.png);
    background-repeat: no-repeat;*/
    
	 background-color: rgba(27, 84, 86, 0.5);
	/*visibility: hidden;
	opacity: 0;
	ya las puse en el .html durante las pruebas*/
}

div#game_menu div {
    height: 40px; /*al dividir 200px de altura de la imagen sale a 40 cada div*/
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
	
	
}

div#game_menu div span {
    line-height: 40px;
   /* color: #a9a9a9;*/
   color: #fff;
    font-family: "Linux_Biolinum_Bold";
    font-size: 15px;
	 font-weight: bold;
}

div#game_menu div:hover span {
   /* color: #80d0ff;*/
   color:#000;
    font-weight: bold;
}

body[lang="es"] div#game_menu div {
 /*   background-image: url(interface/menu_buttons_es_desk.png);*/
  background-image: url(interface/game_menu_buttons.png);
}

body[lang="en"] div#game_menu div {
    /*background-image: url(interface/menu_buttons_en_desk.png);*/
	background-image: url(interface/game_menu_buttons.png);
}

div#game_menu div:first-child {
    margin-top: 38px;
    width: 204px;
}

body[lang="en"] div#game_menu div:first-child {
    width: 204px;
}

body[lang="en"] div#game_menu div span.es {
    display: none;
}

body[lang="es"] div#game_menu div span.en {
    display: none;
}

div#game_menu div:first-child:hover {
    background-position: 203px 0;
}

body[lang="en"] div#game_menu div:first-child:hover {
    background-position: 203px 0;
}

div#game_menu div:nth-child(2) {
    width: 204px;
    background-position: 0 -40px;
}

body[lang="en"] div#game_menu div:nth-child(2) {
    width: 204px;
}

div#game_menu div:nth-child(2):hover {
    background-position: 204px -40px;
}

body[lang="en"] div#game_menu div:nth-child(2):hover {
    background-position: 204px -40px;
}

div#game_menu div:nth-child(3) {
    width: 204px;
    background-position: 0 -80px;
}

body[lang="en"] div#game_menu div:nth-child(3) {
    width: 204px;
}

body[lang="en"] div#game_menu div:nth-child(3):hover {
    background-position: 204px -80px;
}

div#game_menu div:nth-child(3):hover {
    background-position: 204px -80px;
}



div#game_menu div:nth-child(4) {
    width: 198px;
    background-position: 0 -120px;
}

body[lang="en"] div#game_menu div:nth-child(4) {
    width: 204px;
}

body[lang="en"] div#game_menu div:nth-child(4):hover {
    background-position: 204px -120px;
}

div#game_menu div:nth-child(4):hover {
    background-position: 204px -120px;
}




div#game_menu div:nth-child(5) {
    width: 204px;
    background-position: 0 -160px;
}

body[lang="en"] div#game_menu div:nth-child(5) {
    width: 204px;
}

div#game_menu div:nth-child(5):hover {
    background-position: 204px -160px;
}

body[lang="en"] div#game_menu div:nth-child(5):hover {
    background-position: 204px -160px;
}






div#game_menu div:nth-child(6) {
    width: 204px;
    background-position: 0 -200px;
}

body[lang="en"] div#game_menu div:nth-child(6) {
    width: 204px;
}

div#game_menu div:nth-child(6):hover {
    background-position: 204px -200px;
}

body[lang="en"] div#game_menu div:nth-child(6):hover {
    background-position: 204px -200px;
}



div#game_menu div:nth-child(7) {
    width: 204px;
    background-position: 0 -240px;
}

body[lang="en"] div#game_menu div:nth-child(7) {
    width: 204px;
}

div#game_menu div:nth-child(7):hover {
    background-position: 204px -240px;
}

body[lang="en"] div#game_menu div:nth-child(7):hover {
    background-position: 204px -240px;
}
















div#credits_panel {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #171717;
    background-size: auto 100%;
    background-repeat: no-repeat;
  /*  background-image: url(interface/title_bg.png); sigue dando mucho por no mostrandose
	background-image: url('data:image/png;base64,'); */
	
	/*ya debemos saber que era title pero no lo comente y ole para decoder la que deje aqui, ala proxima comenta*/
    visibility: hidden;
}

body[lang="es"] div#credits_panel {
    background-position: center top;
}

body[lang="en"] div#credits_panel {
    background-position: center bottom;
}

/*
div#credits_exit {
    position: absolute;
    width: 120px;
    height: 40px;
    bottom: 0;
    margin-bottom: 20px;
    right: 0;
    margin-right: 20px;
    background-image: url("interface/help_exit.png");
}

body[lang="en"] div#credits_panel div#credits_exit {
    background-position: -120px 0;
}

body[lang="es"] div#credits_panel div#credits_exit:hover {
    background-position: 0 -40px;
}

body[lang="en"] div#credits_panel div#credits_exit:hover {
    background-position: -120px -40px;
}
*/


/*
div#authors_list_exit {
    position: absolute;
    width: 120px;
    height: 40px;
    bottom: 0;
    margin-bottom: 20px;
    right: 0;
    margin-right: 20px;
    background-image: url("interface/help_exit.png");
}

body[lang="en"] div#authors_list_exit {
    background-position: -120px 0;
}

body[lang="es"] div#authors_list_exit:hover {
    background-position: 0 -40px;
}

body[lang="en"] div#authors_list_exit:hover {
    background-position: -120px -40px;
}

 TODO LO SIGUIENTE ES PLANTILLA DEL GAME MENU AUNQUE TENEMOS YA MUCHOS OTROS USOS DEL MISMO EJ game_exit element y en lugar de la clase podiamos haber usado authors_list id*/

 

 
 
div#credits_panel  div.game_menu_buttons, div#authors_list div.game_menu_buttons{
	
	 position: absolute;
    width: 204px;
    
    bottom: 0;
  margin-bottom: 20px;
/*  margin-right: 20px; 
*/  
  right: 0;
  
	
	
    height: 40px; /*al dividir 200px de altura de la imagen sale a 40 cada div*/
    
	/* estas son de game menu y no vienen a cuento en credits_exit ni authors exit button
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 10px;*/
	
    cursor: pointer;
    text-align: center;
	
	
}

div#credits_panel div.game_menu_buttons  span, div#authors_list div.game_menu_buttons  span{
    line-height: 40px;
   /* color: #a9a9a9;*/
   color: #fff;
    font-family: "Linux_Biolinum_Bold";
    font-size: 15px;
	 font-weight: bold;
}

div#credits_panel div.game_menu_buttons:hover span, div#authors_list div.game_menu_buttons:hover span {
   /* color: #80d0ff;*/
   color:#000;
    font-weight: bold;
}

body[lang="es"] div#credits_panel div.game_menu_buttons, body[lang="es"] div#authors_list div.game_menu_buttons  {
 /*   background-image: url(interface/menu_buttons_es_desk.png);*/
  background-image: url(interface/game_menu_buttons.png);
}

body[lang="en"] div#credits_panel div.game_menu_buttons, body[lang="en"] div#authors_list div.game_menu_buttons {
    /*background-image: url(interface/menu_buttons_en_desk.png);*/
	background-image: url(interface/game_menu_buttons.png);
}


body[lang="es"] div#credits_panel div.game_menu_buttons:hover, body[lang="es"] div#authors_list div.game_menu_buttons:hover  {
 /*   background-image: url(interface/menu_buttons_es_desk.png);*/
  background-image: url(interface/game_menu_buttons.png);
}

body[lang="en"] div#credits_panel div.game_menu_buttons:hover, body[lang="en"] div#authors_list div.game_menu_buttons:hover {
    /*background-image: url(interface/menu_buttons_en_desk.png);*/
	background-image: url(interface/game_menu_buttons.png);
}

div#credits_panel div.game_menu_buttons:first-child, div#authors_list div.game_menu_buttons:first-child {
/*   margin-top: 38px;*/
    width: 204px;
	background-position: 0 0;
}

body[lang="en"] div#credits_panel div.game_menu_buttons:first-child, div#authors_list div.game_menu_buttons:first-child {
    width: 204px;
	background-position: 0 0;
}

body[lang="en"] div#credits_panel div.game_menu_buttons  span[lang="es"], body[lang="en"] div#authors_list div.game_menu_buttons span[lang="es"] {
    display: none;
}

body[lang="es"] div#credits_panel div.game_menu_buttons  span[lang="en"], body[lang="es"] div#authors_list div.game_menu_buttons span[lang="en"] {
    display: none;
}

div#credits_panel div.game_menu_buttons:first-child:hover, div#authors_list div.game_menu_buttons:first-child:hover {
    background-position: 203px 0;
}

body[lang="en"] div#credits_panel div.game_menu_buttons:first-child:hover, body[lang="en"] div#authors_list div.game_menu_buttons:first-child:hover {
    background-position: 203px 0;
}
















div#authors {  /*tiene de parent al credits_panel y de tal es la imagen con el link a la lista*/
    position: absolute;
    top: 50%;
    left: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	
	
}

body[lang="es"] div#credits_panel div#authors {  /*esta es la imagen del boton o link a la lista de autores que muestra equipo-team de n-dimensiones*/
    background-image: url(interface/authors_es.png);
    width: 29vh;
    margin-top: 26vh;
    height: 9vh;
}

body[lang="en"] div#credits_panel div#authors {
    background-image: url(interface/authors_en.png);
    width: 40vh;
    margin-top: 26vh;
    height: 9vh;
}





div#authors_click_area {
    width: 100%;
    height: 5vh;
    position: absolute;
    left: 0;
    bottom: 0;
}

div#authors_click_area:hover {
    cursor: pointer;
}

div#authors_list {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
   /* background-color: #000;*/
    visibility: hidden;
	
	
		
	/*nos traemos de game_exit mi invento de border y solo fondo color semitransparente azulado*/
	 border-radius: 8px;   
    /*background-image: url(interface/game_menu_desk.png);
    background-repeat: no-repeat;*/
    
	 background-color: rgba(27, 84, 86, 0.5);
	/*visibility: hidden;
	opacity: 0;
	ya las puse en el .html durante las pruebas*/
	
}

div#authors_list > div.list {
    width: 300px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

body[lang="en"] div#authors_list > div.list.es {
    display: none;
}

body[lang="es"] div#authors_list > div.list.en {
    display: none;
}

div#authors_list > div.list > span {
    font-family: "Linux_Biolinum", sans-serif;
    font-size: 20px;
    color: #fff;
    display: block;
    text-align: center;
}

div#authors_list > div.list > span.develop_kind {
    font-size: 24px;
    color: #E0EA5D;
}

@media (max-width: 420px) and (orientation: portrait) {
    div#authors_list > div.list > span.develop_kind {
        font-size: 24px;
        color: #E0EA5D;
    }
}

@media (max-width: 620px) and (orientation: portrait) {
    div#authors_list > div.list {
        -moz-transform: translateY(-50%) scale(0.45);
        -ms-transform: translateY(-50%) scale(0.45);
        -webkit-transform: translateY(-50%) scale(0.45);
        transform: translateY(-50%) scale(0.45);
    }

    div#authors_list_exit {
        -moz-transform-origin: bottom;
        -ms-transform-origin: bottom;
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
}

@media (max-height: 620px) and (orientation: landscape) {
    div#authors_list > div.list {
        -moz-transform: translateY(-50%) scale(0.45);
        -ms-transform: translateY(-50%) scale(0.45);
        -webkit-transform: translateY(-50%) scale(0.45);
        transform: translateY(-50%) scale(0.45);
    }

    div#authors_list_exit {
        -moz-transform-origin: bottom;
        -ms-transform-origin: bottom;
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
}




.centered_x {  
    position: absolute;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.centered2_x {  /*el unico que usa esta variacion ha sido start_cont*/
    position: absolute;
    left: 10%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.centered_y {  /*el unico que la usa es start_cont*/
    position: absolute;
    top: 45%; /*y ha necesitado cambiar de 50 a 25 */
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.centered_xy {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



div#help_panel {
    width: 616px;
    height: 466px;
    text-align: center;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

span.help_descr {
	background: #333;
    font-family: "Linux_Biolinum_Bold";
    font-size: 15px;
    margin-top: 52px;
    display: inline-block;
    color: #fff;
    text-align: left;
    font-weight: bold;
    line-height: 1.25;
}

body[lang="es"] span.help_descr.en {
    display: none;
}

body[lang="en"] span.help_descr.es {
    display: none;
}

body[lang="es"] div#help_panel[mobile="0"] {
    background-image: url(interface/help_desk_es.png);
}

body[lang="en"] div#help_panel[mobile="0"] {
    background-image: url(interface/help_desk_en.png);
}

body[lang="es"] div#help_panel[mobile="1"] {
    background-image: url("interface/help_tab_es.png");
    height: 446px;
}

body[lang="en"] div#help_panel[mobile="1"] {
    background-image: url("interface/help_tab_en.png");
    height: 446px;
}


div#help_exit {
    position: absolute;
    width: 120px;
    height: 40px;
    bottom: 0;
    margin-bottom: 84px;
    left: 50%;
    background-image: url("interface/help_exit.png");
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

div#help_panel[mobile="1"] div#help_exit {
}

body[lang="en"] div#help_panel div#help_exit {
    background-position: -120px 0;
}

body[lang="es"] div#help_panel div#help_exit:hover {
    background-position: 0 -40px;
}

body[lang="en"] div#help_panel div#help_exit:hover {
    background-position: -120px -40px;
}




div.move_control {
    margin-top: 62px;
    text-align: left;
}

div.move_control div:last-child {
    margin-top: 32px;
}

div.move_control span {
    color: #fff;
    font-family: "Linux_Biolinum";
    font-size: 15px;
}

div.move_control span:first-child {
    margin-left: 116px;
}

div.move_control div:first-child span:last-child {
    margin-left: 100px;
}

div.move_control div:last-child span:last-child {
    margin-left: 108px;
}

div.additional_panel {
    position: absolute;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    visibility: hidden;
}

div#back_to_menu {
    position: absolute;
    bottom: 0;
    left: 50%;
    background-image: url("interface/back_to_menu.png");
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
}

body[lang="en"] div#back_to_menu {
    width: 259px;
    height: 57px;
}

body[lang="en"] div#back_to_menu {
    width: 223px;
    height: 57px;
    background-position: 0 -114px;
}

body[lang="es"] div#back_to_menu:hover {
    background-position: 0 -57px;
}

body[lang="en"] div#back_to_menu:hover {
    background-position: 0 -171px;
}

div#under_construct {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 50%;
    margin-top: 68px;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -webkit-transform-origin: center;
    transform-origin: center;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
}

body[lang="es"] div#under_construct {
    width: 610px;
    height: 200px;
    background-image: url("interface/under_const_es.png");
}

body[lang="en"] div#under_construct {
    width: 520px;
    height: 200px;
    background-image: url("interface/under_const_en.png");
}

@media (max-width: 640px) {
    div#under_construct {
        -moz-transform: scale(0.5) translateX(-100%);
        -ms-transform: scale(0.5) translateX(-100%);
        -webkit-transform: scale(0.5) translateX(-100%);
        transform: scale(0.5) translateX(-100%);
        -moz-transform-origin: top;
        -ms-transform-origin: top;
        -webkit-transform-origin: top;
        transform-origin: top;
	margin-top: 10px;
    }
}

div#canvas_shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    visibility: hidden;
}

div#game_menu_calling {
    position: absolute;
    /*bottom: 0;*/
	top: 0;
    left: 50%;
    height: 57px;
    background-image: url("interface/game_menu_calling.png");
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /*visibility: hidden;*/
	visibility: visible;
  /*  -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);*/
}

body[lang="es"] div#game_menu_calling {
    width: 259px;
}

body[lang="en"] div#game_menu_calling {
    width: 223px;
    background-position: -259px 0;
}

body[lang="es"] div#game_menu_calling:hover {
    background-position: 0 -57px;
}

body[lang="en"] div#game_menu_calling:hover {
    background-position: -259px -57px;
}


/*
@media (max-height: 420px) {
    body[lang="es"] div#help_panel[mobile="1"] {
        width: 454px;
        height: 300px;
        background-image: url(interface/help_mobile_es.png);
    }

    body[lang="en"] div#help_panel[mobile="1"] {
        width: 454px;
        height: 300px;
        background-image: url(interface/help_mobile_en.png);
    }

    span.help_descr {
        font-size: 12px;
        margin-top: 28px;
    }

    div#help_exit {
        margin-bottom: 40px;
        -moz-transform: translateX(-50%) scale(0.75);
        -ms-transform: translateX(-50%) scale(0.75);
        -webkit-transform: translateX(-50%) scale(0.75);
        transform: translateX(-50%) scale(0.75);
    }

    body[lang="en"] div#help_panel div#help_exit {
        background-position: -120px 0;
    }

    body[lang="es"] div#help_panel div#help_exit:hover {
        background-position: 0 -40px;
    }

    div#game_menu {
        width: 234px;
        height: 272px;
        background-image: url(interface/game_menu_mobile.png);
    }

    div#credits_exit,
    div#game_menu div {
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    div#game_menu_calling {
        -moz-transform: translateX(-50%) scale(0.50);
        -ms-transform: translateX(-50%) scale(0.50);
        -webkit-transform: translateX(-50%) scale(0.50);
        transform: translateX(-50%) scale(0.50);
        -moz-transform-origin: top;
        -ms-transform-origin: top;
        -webkit-transform-origin: top;
        transform-origin: top;
    }

    div#credits_exit {
        -moz-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
    }

    div#game_menu div {
        margin-bottom: -4px;
    }

    @media (orientation: landscape) {
        div#preloader_a_cont {
            background-size: auto 520px;
        }

        div#prelod_a_static_path {
            margin-top: -72px;
            -moz-transform: scale(0.69);
            -ms-transform: scale(0.69);
            -webkit-transform: scale(0.69);
            transform: scale(0.69);
        }
    }
}

@media (max-width: 420px) and (orientation: portrait) {
    div#preloader_a_cont {
        background-size: auto 420px;
    }

    div#prelod_a_static_path {
        margin-top: -72px;
        -moz-transform: scale(0.69);
        -ms-transform: scale(0.69);
        -webkit-transform: scale(0.69);
        transform: scale(0.69);
    }
}

/*avatar*/
  @media (orientation: landscape) {
        div#preloader_avatar_cont {
            background-size: auto 520px;
        }

        div#prelod_avatar_static_path {
            margin-top: -72px;
            -moz-transform: scale(0.69);
            -ms-transform: scale(0.69);
            -webkit-transform: scale(0.69);
            transform: scale(0.69);
        }
    }
}

@media (max-width: 420px) and (orientation: portrait) {
    div#preloader_a_cont {
        background-size: auto 420px;
    }

    div#prelod_a_static_path {
        margin-top: -72px;
        -moz-transform: scale(0.69);
        -ms-transform: scale(0.69);
        -webkit-transform: scale(0.69);
        transform: scale(0.69);
    }
}


/*city*/

  @media (orientation: landscape) {
        div#preloader_city_cont {
            background-size: auto 520px;
        }

        div#prelod_cy_static_path {
            margin-top: -72px;
            -moz-transform: scale(0.69);
            -ms-transform: scale(0.69);
            -webkit-transform: scale(0.69);
            transform: scale(0.69);
        }
    }
}

@media (max-width: 420px) and (orientation: portrait) {
    div#preloader_city_cont {
        background-size: auto 420px;
    }

    div#prelod_cy_static_path {
        margin-top: -72px;
        -moz-transform: scale(0.69);
        -ms-transform: scale(0.69);
        -webkit-transform: scale(0.69);
        transform: scale(0.69);
    }	
}


div#game_exit_dialeg {
	
	position: Absolute;
	top: 50%;
	left: 50%;
width: 200px; /*al mirarlo de forma interactiva coincide con el ancho de cada buton en game menu*/
height: auto;  /*ajusta a solo los dos div la altura , vamos son los elementos de estos en este caso el texto size elque lo determina*/


  
  visibility: hidden;
  z-index: 2;
  border-radius: 12px;
   background-color: rgba(27, 84, 86, 0.5);
	/*#47d7dc;  /*azul clarito*/
  
}


div#game_exit_dialeg div  {
 color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background-image: url(interface/game_menu_buttons.png);
  cursor: pointer;
  /*padding-top: 4px;*/
   height: 40px;
  }


div#game_exit_dialeg div:hover span {
   /* color: #80d0ff;*/
   color:#000;
    font-weight: bold;
}
  
  
  
div#game_exit_dialeg div:hover  {
	
	 background-image: url(interface/game_menu_buttons.png);
}

body[lang="en"] div#game_exit_dialeg div:hover  {
	
	background-image: url(interface/game_menu_buttons.png);
}



body[lang="es"] div#game_exit_dialeg_sub span[lang="en"] {
    display: none;
}

body[lang="en"] div#game_exit_dialeg_sub span[lang="es"] {
    display: none;
}

body[lang="es"] div#save_game span[lang="en"] {
    display: none;
}

body[lang="en"] div#save_game span[lang="es"] {
    display: none;
}



												/*vemos que tienen ambas 204 de ancho lo que hemos dicho que es el ancho de cada boton
												y la posicion  backgroun en la del boton 0 y 1 de la tabla en la imagen de game_menu, luego de altura separados los 40 px de cada boton y un poco mas */

div#game_exit_dialeg div:first-child {	
    width: 204px;
	/*height: 45px;*/
    background-position: 0 0;
	padding-top: 2px;
}

body[lang="en"] div#game_exit_dialeg div:first-child {
    width: 204px;
}

div#game_exit_dialeg div:first-child:hover {
    background-position: 204px 0;
	padding-top: 2px;
}

body[lang="en"] div#game_exit_dialeg div:first-child:hover {
    background-position: 204px 0;
}



div#game_exit_dialeg div:nth-child(2) {
    width: 204px;
	/*height: 45px;*/
    background-position: 0 -40px;
	padding-top: 2px;
}

body[lang="en"] div#game_exit_dialeg div:nth-child(2) {
    width: 204px;
}

div#game_exit_dialeg div:nth-child(2):hover {
    background-position: 204px -40px;
	padding-top: 2px;
}

body[lang="en"] div#game_exit_dialeg div:nth-child(2):hover {
    background-position: 204px -40px;
}

div#engine_b4w {
	position: absolute;
	top: 55%;
	left: 7%;
	width: 76px;
	height: 176px;
    /*width: 412px;
    height: 132px;*/
    /*position: absolute;
    left: 0;
    top: 0;
    margin-top: 20px;
    margin-left: 72px;*/
   /* background-image: url(interface/brand.png);
	 background-image: url("icons2/blender_logo_link175x56.png");*/
	 background-repeat: no-repeat;
	 z-index: 1;
	 cursor: pointer;
}


div#engine_b4w  a {
	position: absolute;
	width: 76px;
	height: 76px;
	background-image: url("icons2/blend4web_logo.png"); 
	 
}

div#engine_b4w p {
    position: absolute;
	top: 45%;
	font-size: 18px;
	color: #FFFFFF;   /*color del texto*/
    display: block;
    margin: 0;
    margin-top: 20px;
    font-family: "Linux_Biolinum";

	font-weight: bold; /*hay fuente biloinum definida como Bold , podriamos usarla sin forzarla a bold aqui*/
	
	  line-height: 1.25;
	text-align: center;
	
	 border-radius: 8px;
    background-color: #000;
}

div#engine_verge3d {
	
	position: Absolute;
	top: 75%;
	right: 7%;
	width: 76px;
	height: 176px;
    /*width: 412px;
    height: 132px;*/
    /*position: absolute;
    left: 0;
    top: 0;
    margin-top: 20px;
    margin-left: 72px;*/
   /* background-image: url(interface/brand.png);
	 background-image: url("icons2/blender_logo_link175x56.png");*/
	 background-repeat: no-repeat;
	 z-index:3;  /*en el huaew parece se resistia a aparcer sin subir a 3*/
	 cursor: pointer;
	
}

div#engine_verge3d  a{
	
	position: absolute;
	width: 76px;
	height: 76px;
	background-image: url("icons2/verge3d_logo76x76.png"); 
	
	 
}


div#engine_verge3d p {
	position: absolute;
	top: 45%;
	font-size: 18px;
	color: #FFFFFF;   /*color del texto*/
    display: block;
    margin: 0;
    /*margin-top: 20px;*/
    font-family: "Linux_Biolinum";

	font-weight: bold; /*hay fuente biloinum definida como Bold , podriamos usarla sin forzarla a bold aqui*/
	
	  line-height: 1.25;
	text-align: center;
	
	 border-radius: 8px;
    background-color: #000;
	
}



body[lang="en"] div#engine_verge3d  p[lang="es"] {
    display: none;
}

body[lang="es"] div#engine_verge3d p[lang="en"] {
    display: none;
}



div#tuits_timeline {  /*parece es machacado por div#tuits_timeline iframe {  mas adelante*/
	
	position: Absolute;
	top: 75%;
	right: 89%;	
	height: 200px;
    /*width: 412px;
    height: 132px;*/
    /*position: absolute;
    left: 0;
    top: 0;
    margin-top: 20px;
    margin-left: 72px;*/
   /* background-image: url(interface/brand.png);
	 background-image: url("icons2/blender_logo_link175x56.png");*/
	 background-repeat: no-repeat;
	 z-index:3;  /*en el huaew parece se resistia a aparcer sin subir a 3*/
	 cursor: pointer;
	
}


/*antes estaba operativo con idioma aunque mostraba engrafico en ingles solo para es como en, puesto que el otro era en ruso. ahora se ha trasladado a engine_b4w id*/

div#soc_cont {   /*brand cuelga de este div si se usa con > aqui su posicion, scc ya no lo usamos en el html*/
    position: absolute;
    right: 0;
    top: 60%;
    width: 280px;
    height: 160px;
    background-image: url(interface/soc_bg_desk.png);  /*es un fondo  para ambos iconos o links que les hace profundidad al ser una macha negra con transicion en los bordes*/
}

div#soc_cont a {
    width: 100%;
    height: 100%;
    display: block;
}

body[lang="es"] div#soc_cont a[lang="en"] {
    display: none;
}

body[lang="en"] div#soc_cont a[lang="es"] {
    display: none;
}

div#soc_cont > div.brand {
    width: 76px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 20px;
    margin-left: 72px;
   /* background-image: url(interface/brand.png);*/	
}

div#soc_cont > div.brand.hover {
    background-position: -76px 0;
}

div#soc_cont > div.soc {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 20px;
    background-image: url(interface/soc_btns_desk.png);
}

body[lang="es"] div#soc_cont > div.soc {
    margin-right: 31px;
    width: 68px;
    height: 72px;
}

body[lang="es"] div#soc_cont > div.soc.hover {
    background-position: -68px 0;
}

body[lang="en"] div#soc_cont > div.soc {
    width: 57px;
    height: 75px;
    margin-right: 42px;
    background-position: 0 -72px; /*creo que el de color azul es el normal y el naranja el hover*/
}

body[lang="en"] div#soc_cont > div.soc.hover {
    background-position: -57px -72px;
}

@media (max-height: 320px) and (orientation: landscape) {
    div#soc_cont {
        width: 145px;
        height: 165px;
        background-image: url(interface/soc_bg_mobile.png);
    }

    div#soc_cont > div.brand {
        width: 53px;
        height: 55px;
        background-size: 106px 55px;
        margin-top: auto;
        margin-left: 73px;
        margin-bottom: 55px;
        top: auto;
        bottom: 0;
    }

    div#soc_cont > div.brand.hover {
        background-position: -53px 0;
    }

    div#soc_cont > div.soc {
        position: absolute;
        height: 35px;
        margin-top: 10px;
        background-image: url(interface/soc_btns_mobile.png);
    }

    body[lang="es"] div#soc_cont > div.soc,
    body[lang="en"] div#soc_cont > div.soc {
        margin-right: 28px;
        width: 35px;
    }

    body[lang="en"] div#soc_cont > div.soc {
        background-position: 0 -35px;
    }

    body[lang="es"] div#soc_cont > div.soc.hover {
        background-position: -35px 0;
    }

    body[lang="en"] div#soc_cont > div.soc.hover {
        background-position: -35px -35px;
    }
}

@media (max-width: 320px) and (orientation: portrait) {
    div#soc_cont {
        width: 145px;
        height: 165px;
        background-image: url(interface/soc_bg_mobile.png);
    }

    div#soc_cont > div.brand {
        width: 53px;
        height: 55px;
        background-size: 106px 55px;
        margin-top: auto;
        margin-left: 73px;
        margin-bottom: 55px;
        top: auto;
        bottom: 0;
    }

    div#soc_cont > div.brand.hover {
        background-position: -53px 0;
    }

    div#soc_cont > div.soc {
        position: absolute;
        height: 35px;
        margin-top: 10px;
        background-image: url(interface/soc_btns_mobile.png);
    }

    body[lang="es"] div#soc_cont > div.soc,
    body[lang="en"] div#soc_cont > div.soc {
        margin-right: 28px;
        width: 35px;
    }

    body[lang="en"] div#soc_cont > div.soc {
        background-position: 0 -35px;
    }

    body[lang="es"] div#soc_cont > div.soc.hover {
        background-position: -35px 0;
    }

    body[lang="en"] div#soc_cont > div.soc.hover {
        background-position: -35px -35px;
    }
}

  
  
div#iframe_open_btn {  /*el que se supone lo cierra esta en el html que abre el ifram*/
    position: absolute;
    left: 250px; top: 50px;  /*antes era 100 y 100. Se desplaza mas a la izq porque lo necesita el tamaņo dle boton o algo asi sino a saber porque*/
   /* background-image: url(interface/view_tps_60_colorG.png);   Se supone hemos usado el mismo icono que para tps a falta de uno que le representeį
      lo que nos podria liar si lo vemos y no hace la accion deseada*/
  /*  background-image: url(interface/view_tps_60_colorG.png);*/
  
    margin:0px 10px 30px 0px; /* antes era 0 10 256 y 0*/
    width: 60px;
    height: 60px;
	 z-index: 2;
    visibility:visible;
  /*  visibility:visible;*/
}
   
div#iframe_open_btn p {
	color: #f6dd96;
 font-family: "Linux_Biolinum";
    line-height: 1.25;
   font-size: 10px;
} 



@media (max-width: 640px) and (orientation: landscape) {
	   
div#iframe_open_btn {
	top: 5px;
   left: 155px;
  } 

}

/* si tuviese un id el iframe element
div#iframe_id {
position: absolute;
top: 2%;*/
/*bottom: 0;*/
/*left: 5px;
display: block; */
/*visibility: display;	*/
/*mejor hacer esto desde codigo para visualizarlo y poder interaccionar 
en un momento dado hasta posicionarlo en el lado desead seguramente ein interface.js este aclarado*/
/*z-index: 2;	
}
*/
 iframe {  /*machaca al tmaņo especificado en el html por el iframe tag*/
    width: 400px;
    height: 140px;
	position:absolute;
	top:10%;
	left:20%;
    margin: 5px auto; /*esto de margin le deja separado esos 80px del top al marco o borde*/
    display: block
}

#tuits_timeline iframe {  /*machaca al tmaņo especificado en el html por el iframe tag pero al del tuits_timeline solo no a otros posibles que no hay*/
    width: 210px;
    height: 200px; /*coinciden con los especificados en <iframe*/
	top: 65%;
	right: 19%;
	position:absolute;
	
    margin: 5px auto; /*esto de margin le deja separado esos 80px del top al marco o borde*/
    display: block
}


#canvas_cont_product_info {  /*nuevo canvas adicional por fin , ver tema namespace para saberlo usar al completo antes
								ahora ya sabemos que su fondo puede ser cubierto por el del boton de product_info para hacerlos coincidir pero es solo eso, no tiene evento auque no descarto que pudiese tenerlos el el .js para su canvas crane_excavation*/
								
	  position: fixed;
    /*bottom: 250px;*/
    pointer-events: none;  
	
	top: 15%;
	left: 10%;  /*y ya veremos si el bottom lo vamos a usar como requisito para ver la grua, al accionado hemos puesto un delay para lanzar la pagina product info y antes usa un camvas adicional  que le ponemos propiedades siguientes ahora que tenemos claro su necesidad en tema namespace*/

	/*  se han creado dos media queri para hasta 800 como portatil y mi pantalla lg de escritrio
	y para el resto  a mas altura supongo no habra problema de solapamiento grua con personajes
	
	width: 900px;
    height: 540px;   estas anterioes daban problemas ej de solapar la grua la cabeza character de portada*/
	width: 1024px;
    height: 768px;  /*fijamos para el resto de pantallas superiores a 800*/
	
	
	
	
	z-index: 0;    /*el codigo ha de ocultarlo al ser clicado para mostrar el tractor animado justo unos segundos antes de pasar a la ventana con zoom y texto informativo*/
    visibility: visible; /*show*/
	opacity: 1;							
								
    
	
}  


#canvas_cont_faders {  /*nuevo canvas adicional por fin , ver tema namespace para saberlo usar al completo antes
								ahora ya sabemos que su fondo puede ser cubierto por el del boton de product_info para hacerlos coincidir pero es solo eso, no tiene evento auque no descarto que pudiese tenerlos el el .js para su canvas crane_excavation*/
  position: absolute;
    /*bottom: 250px;*/
    pointer-events: none;  
	
	top: 0%;
	left: 0%;  /*y ya veremos si el bottom lo vamos a usar como requisito para ver la grua, al accionado hemos puesto un delay para lanzar la pagina product info y antes usa un camvas adicional  que le ponemos propiedades siguientes ahora que tenemos claro su necesidad en tema namespace*/

	/*  se han creado dos media queri para hasta 800 como portatil y mi pantalla lg de escritrio
	y para el resto  a mas altura supongo no habra problema de solapamiento grua con personajes
	
	width: 900px;
    height: 540px;   estas anterioes daban problemas ej de solapar la grua la cabeza character de portada*/
/*se quedan ocupando lo que queriamos altura total epro no la anchura y queda desplazado a la izq
	width: 100vh;
    height: 100vw;  /*fijamos para el resto de pantallas superiores a 800
*/	
    height: 100vw;
	width: 100%;
	
	
	
	z-index: 0;    /*el codigo ha de ocultarlo al ser clicado para mostrar el tractor animado justo unos segundos antes de pasar a la ventana con zoom y texto informativo*/
    visibility: visible; /*show*/
	opacity: 1;
	
}  




/*Antigua product_info  ahora con el aņadido btn pues finalmente es un boton con una imagen de un constructor u obrero que nos informa que herramientas se usaron para su desarrollo y como es en una pagina responsibe puede ser muy amplliable tal info*/
div#product_info_btn {             /*se ha trasladado a otra pagina luego al depurar solo lo veremos si abrimos tal pagina*/
   	cursor: pointer;
	position: fixed;
	top: 10%;
	left: 10%;  /*y ya veremos si el bottom lo vamos a usar como requisito para ver la grua, al accionado hemos puesto un delay para lanzar la pagina product info y antes usa un camvas adicional  que le ponemos propiedades siguientes ahora que tenemos claro su necesidad en tema namespace*/
	
    padding-left: 42px;
	
	/* desde options anims el menu opened tenia esto de scale y ya sabemos que nos ocurrio usandolo para variar la scala que se separaban los botnes al desplegar
	transform: scale(0, 0);  debia aparecer 0,0 u esa es la diferencia con la que funciona en game y aparece tachado podr defecto.
  -ms-transform: scale(1, 1);   deja los 45px por 45px en 90x90 desde la esquina inferior derecha mas el button y right que ya le impone el parente 
  -webkit-transform: scale(1, 1);             */

    background-image: url(interface/product_info.png);
	background-repeat: no-repeat;
    margin:0px 10px 30px 0px;
    /*width: 100px;     Haber si recordamos que empiza a contar desde esquina izq superior de la imagen .png osea si pones 50px y es de size 100px mostrara 50%
    height: 100px;*/
	/*width: 225px;   /*estas medidas son las originales luego nos hemos comido algunos rincones al dejar 200x200 para adaptarlo al canvas tractor o quizas no
	 height: 224px;*/

	width: 146px;
	height: 142px;
	
	
	 z-index: 3;    /*el codigo ha de ocultarlo al ser clicado para mostrar el tractor animado justo unos segundos antes de pasar a la ventana con zoom y texto informativo*/
    visibility: visible; /*show*/
	opacity: 1;
	
/*	box-sizing: border-box;  dejemoslo bonito
    box-shadow: 0 0 10px #45e8ff, inset 0 0 10px #45e8ff;*/
	

	
}



/*div#product_info_btn , #canvas_cont_product_info {
	
	 position: absolute;
			top: 20%;   este es el ajuste si queremos verlo ej centrado dentro el borde rojo del iframe, pero descubrimos entonces que ni de coņa es responsible cuando la pagina lo es
			left: 1%;                     osea depende de la pagina donde publicas el iframe , ya no veo mas oportunidad que abrir con ej _parent de target tal pagina directametne
			max-width: 50%;*/
	

	/*  position: absolute;
    width: 200px;
    height: 200px;
    bottom: 250px;
    pointer-events: none;*/
	
	
}

@media (max-width: 460px) {   /*la proxima vez pon que dispositivo es este si el redmi el huawei*/

div#product_info_btn  {
    width: 100px;
    height: 100px;
  }
}



@media (max-width: 650px) {   /*huawei 730g*/

div#product_info_btn  {
    width: 100px;
    height: 100px;
  }
  
  div#canvas_cont_product_info {
	left: 5%;
	top: 5%;
  }	
  
}

@media (max-height: 420px) {

div#product_info_btn  {
	
}



div#canvas_cont_product_info {
	width: 540px;
    height: 340px;
  }	
}




@media (max-height: 800px) {

div#product_info_btn  {
	
}

div#canvas_cont_product_info {
	top: 0%;/*esta es la medida que permite dejar encima del personaje tractor en portatil sin solaparlo*/
	width: 900px;
    height: 640px;
  }	
}



div#product_info_btn  > .clockwise, div#product_info_btn  >  .anticlockwise{
  position: relative;
  color: #fff;
  font-size: 40px;
  font-weight: bold;

}


.anticlockwise {
float: right;

    -webkit-animation: move_left 1s infinite; /* Safari 4.0 - 8.0 */
    animation: move_left 1s infinite;
	animation-iteration-count: 7;
}	

/* Safari 4.0 - 8.0 */
@-webkit-keyframes move_left {
    from {right: 0px;}
    to {right: 40px;}
}

@keyframes move_left {
    from {right: 0px;}
    to {right: 40px;}
}


.clockwise {
   float: left;
 /*  right: 40px;
    background: red;*/
   
	
    -webkit-animation: move_right 1s infinite; /* Safari 4.0 - 8.0 */
    animation: move_right 1s infinite;
	animation-iteration-count: 7; /*cuando finaliza 6 reproducciones se ouclta por javascriipt en atlantida.js*/
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes move_right {
    from {left: -40px;}
    to {left: 0px;}
}

@keyframes move_right {
    from {left: -40px;}
    to {left: 0px;}
}



.anticlockwise2 {  /*variacion que tiene permanentemente la animacion*/
    float: right;

    -webkit-animation: move_left2 1s infinite; /* Safari 4.0 - 8.0 */
    animation: move_left2 1s infinite;
	animation-iteration-count: infinite;
}	

/* Safari 4.0 - 8.0 */
@-webkit-keyframes move_left2 {
    from {right: -70px;}
    to {right: -30px;}
}

@keyframes move_left2 {
    from {right: -70px;}
    to {right: -30px;}
}



.clockwise2 { 
  float: left;
 /*  right: 40px;
    background: red;*/
   
	
    -webkit-animation: move_right2 1s infinite; /* Safari 4.0 - 8.0 */
    animation: move_right2 1s infinite;
	animation-iteration-count: infinite; /*cuando finaliza 6 reproducciones se ouclta por javascriipt en atlantida.js*/
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes move_right2 {
    from {left: -70px;}
    to {left: -30px;}
}

@keyframes move_right2 {
    from {left: -70px;}
    to {left: -30px;}
}





.anticlockwiseup {
top: 1%;

    -webkit-animation: move_up 1s infinite; /* Safari 4.0 - 8.0 */
    animation: move_up 1s infinite;
	animation-iteration-count: infinite;
}	

/* Safari 4.0 - 8.0 */
@-webkit-keyframes move_up {
    from {top: -90%;}
    to {top: -100%;}
}

@keyframes move_up {
    from {top: -90%;}
    to {top: -100%;}
}


.clockwisedown {
   bottom: 1%;
 /*  right: 40px;
    background: red;*/
   
	
    -webkit-animation: move_down 1s infinite; /* Safari 4.0 - 8.0 */
    animation: move_down 1s infinite;
	animation-iteration-count: infinite; /*cuando finaliza 6 reproducciones se ouclta por javascriipt en atlantida.js*/
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes move_down {
    from {bottom: 60%;}
    to {bottom: 30px;}
}

@keyframes move_down {
    from {bottom: 60% ;}
    to {bottom: 30%;}
}








 
div#product_info {             /*se ha trasladado a otra pagina luego al depurar solo lo veremos si abrimos tal pagina*/
    position: absolute;
    /*top: 20%;   este es el ajuste si queremos verlo ej centrado dentro el borde rojo del iframe, pero descubrimos entonces que ni de coņa es responsible cuando la pagina lo es
    left: 1%;                     osea depende de la pagina donde publicas el iframe , ya no veo mas oportunidad que abrir con ej _parent de target tal pagina directametne
	max-width: 50%;*/
	top: 20%;
	left: 30%;
    padding-left: 42px;
}

div#product_info p {
    /*color: #f6dd96;*/
	color: #FFFFFF;   /*color del texto*/
    display: none;
    margin: 0;
    margin-top: 20px;
    font-family: "Linux_Biolinum";
    line-height: 1.25;
	font-weight: bold; /*hay fuente biloinum definida como Bold , podriamos usarla sin forzarla a bold aqui*/
	text-align: center;
}


body[lang="es"] div#product_info p[lang="es"] {
    display: block;
}

body[lang="en"] div#product_info p[lang="en"] {
    display: block;
}

@media (max-height: 320px) and (orientation: landscape) {
    div#product_info p {
        font-size: 10px;
        margin-top: 10px;
    }

    div#product_info {
        padding-left: 28px;
    }
}

@media (max-width: 320px) and (orientation: portrait) {
    div#product_info p {
        font-size: 10px;
        margin-top: 10px;
    }

    div#product_info {
        padding-left: 28px;
    }
}

@media (max-width: 640px) and (orientation: landscape) {
    div#product_info p {
        font-size: 10px;
    }
}

/*cuando solo era un elemento "a" 
a.help_info_previ { */
div.help_info_previ { 
	 position: absolute;
	left: 0%;
    top: 240px;  /*antes de absolute con fixed fue 10px*/
	/*transform: rotate(-90deg);   como ahora ha sido reemplazada flecha hacia abao o de previ a help interrogante lo comentamos*/	
	background-color: rgba(95, 132, 132, 0.9);
	/*border-radius: 8px;*/
	-moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
	 z-index: 3;
}

div.help_info_previ2 {
	position: absolute;
	left: 0%;
    top: 385px; /*antes de absolute con fixed era 145px*/
	background-color: rgba(95, 132, 132, 0.9);
	border-radius: 8px;
}

div.help_info_previ  img {
	position: relative;	
}	
div.help_info_previ2  a {	
	/*transform: rotate(-90deg);   como ahora ha sido reemplazada flecha hacia abao o de previ a help interrogante lo comentamos*/	
}

div.help_info_previ2, div.help_info_previ  p {
	font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;
		 
    /*background-color: #000;*/
   color: #fff; /*!important;*/
	
}

body[lang="en"] div.help_info_previ div[lang="es"], body[lang="en"] div.help_info_previ2 div[lang="es"] {
    display: none;
}

body[lang="es"] div.help_info_previ div[lang="en"], body[lang="es"] div.help_info_previ2 div[lang="en"] {
    display: none;
}



div#contador_temp_anims_fonts {
position: absolute;
	left: 145px;
	top: 10px;
	height: 20px;	
	width: 20px;
	/*background-color: #fff;*/
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	 
	 background-color: rgba(95, 132, 132, 0.9);
	 border-radius: 8px;
}

div#product_info_previ {  /*imagen/previos.png mejor help.png*/
	position: absolute;
	left: 85px; /*de 45px ha pasdo con absolute en lugar de fixed a 65px*/
	top: 300px;  /*con fixed era 30px ahora con absolute es 300px*/
	height: 100px;
	
	visibility: hidden;  /*esto deberia ocultar el teaxto del parrafo siguiente y solo mostrarse por javascrtip*/
	z-index: 4; /*para estar por encima del monigote o pintor obrero que esta a 3*/
}

div#product_info_previ p  {

    position: absolute;
	/*left: 35px;
    top: -45px;  al separar previ de btn product info y no ser hijo*/
	
  
  
    background-repeat: no-repeat;
    background-size: 100% 100%;
	
	/*color: #f6dd96; estaba bien para una letra mostrada sobre el fondo pero como este puede 
	variar mejor fijarlo como sigue y con un color, la fte o tamaņo podria variar en segun que dispositivo si a penas se visualizase*/
    /*margin-top: 20px;*/
    font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;
	
	
	 background-color: rgba(95, 132, 132, 0.9);
	 border-radius: 8px;
    /*background-color: #000;*/
   color: #fff; /*!important;*/
   
   width: 275px;  /*con esto alargamos el texto de la ayuda en dos lineas por encima del monigote*/	

}  

body[lang="en"] div#product_info_previ div[lang="es"] {
    display: none;
}

body[lang="es"] div#product_info_previ div[lang="en"] {
    display: none;
}





div#Novedades  {  /*imagen/previos.png mejor help.png*/
	position: fixed;
	z-index: 7;
	right: 20%;
	top: 2%;
	height: 46px;  /*ocupando tal recuadro los dos juegos y sus imagenes*/
	width: 153px;
	/*background-image: url(images/badge_google_play.png);*/
	background-repeat: no-repeat;
	display: block;
	visibility: visible;  /*esto deberia ocultar el teaxto del parrafo siguiente y solo mostrarse por javascrtip*/
	cursor: pointer;
}

img#img_logo_play {
	position: absolute;
	top: 5px;
	right: 0px;	
}

div#Novedades .clockwise2 { 
  position: relative;
  left: 65%;   
  color: #fff;
  font-size: 40px;
  font-weight: bold;
}

div#Novedades .anticlockwise2 { 
  position: relative;
  right: 15%;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
}

div#Text_Novedades {
	visibility: visible;
}

div#Text_Novedades p {  /*texto al pinchar el logo google play*/	
    position: fixed;
	top: 10%;
	right: 10%;
	z-index: 8;
	
	/*z-index: 5;*/
	/*visibility: hidden; ya lo muestra pinchar el boton o div novedades al mostrarse la pagina del juego antes de iniciarlo, esta asi programado*/
	/*left: 35px;
    top: -45px;  al separar previ de btn product info y no ser hijo*/  
  
    background-repeat: no-repeat;
    background-size: 100% 100%;	
	/*color: #f6dd96; estaba bien para una letra mostrada sobre el fondo pero como este puede 
	variar mejor fijarlo como sigue y con un color, la fte o tamaņo podria variar en segun que dispositivo si a penas se visualizase*/
    /*margin-top: 20px;*/
    font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;	
	
	 border-radius: 8px;	  
	 background-color: rgba(95, 132, 132, 0.9);	 
    /*background-color: rgba(0,0,0,0.5);*/
    color: #fff; /*!important;*/	

}  

body[lang="en"] div#Text_Novedades div[lang="es"] {
    display: none;
}

body[lang="es"] div#Text_Novedades div[lang="en"] {
    display: none;
}
 


div#novedades_table{
	position: fixed;
	height: 160px;
	width: 250px;
	min-width: 250px;
	max-width: 310px;
	max-height: 220px;
	height: 150px;
	min-height: 150px;
	right: 17%;
    top: 22%;	
	/*width: 250px;
	height: auto;*/
	display: table;
	z-index: 4;  /*sin esto los titulos animados pasan por encima y no nos funcionan los enlaces*/
}
 
 div#novedades_table p {  /*texto de los nombres de los iconos de los juegos*/

	
	
	/*padding-top: 20px;  de la cajita el texto aparece tanto distanciada de su borde superior*/
	font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;		
	border-radius: 8px;
    background-color: rgba(0,0,0,0.5);
    color: #fff; /*!important;*/
	 
 }   


p#novedades_title_table {
	position: fixed;
	right: 17%;
    top: 65%;	/*se traslada bajo los botones de los juegos en lugar de encima que interferia con texto anuncio btn google play disponibilidad*/
	/*top: 3%;*/
	width: 180px;
	height: 20px;
	
	font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;		
	border-radius: 8px;
	background-color: rgba(95, 132, 132, 0.9);
    /*background-color: rgba(0,0,0,0.5);  de negro pasa a azulito simitransparente*/
    color: #fff; /*!important;*/
	
}



div#novedades_row_0 {
/*	position:relative;
	display: block;
	width: 240px;
	height: 70px;*/
	display: table-row;
	width: 250px;
	height: 80px;
	max-height: 80px;
}

div#novedades_row_0 .column1  {
	/*position :relative;
	left: 0%;*/
	display: table-cell;
	width: 80px;
	height: 80px;
	max-height: 80px;
	vertical-align: middle;
	/*width: 70px;
	height: 70px;*/
}

div#novedades_row_0 .column1  p {
    
	font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;		
	border-radius: 8px;
    background-color: rgba(0,0,0,0.5);
    color: #fff; /*!important;*/
	
}

div#novedades_row_0 .column2  {
	display: table-cell;
    width: 80px;
	height: 80px;	
  /*  background-image: url(icons2/la_ciudad_perdida_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}


div#novedades_row_0 .column3 {
	
	display: table-cell;
    width: 80px;
	height: 80px;	
  /*  background-image: url(icons2/la_ciudad_perdida_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}


div#novedades_row_1 {
/*	position:relative;
	display: block;
	width: 240px;
	height: 70px;*/
	display: table-row;
	width: 250px;
	height: 80px;
	max-height: 80px;
}

div#novedades_row_1 .column1  {
	display: table-cell;
	width: 80px;
	height: 80px;
	max-height: 80px;
	vertical-align: middle;
	/*width: 70px;
	height: 70px;*/
}
div#novedades_row_1 .column1 p {
	
	font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;		
	border-radius: 8px;
    background-color: rgba(0,0,0,0.5);
    color: #fff; /*!important;*/
}

div#novedades_row_1 .column2 {
	display: table-cell;
	width: 80px;
	height: 80px;	
/*	background-image: url(icons2/un_mundo_nuevo_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}
div#novedades_row_1 .column3 {	
	display: table-cell;	
	width: 80px;
	height: 80px;	
/*	background-image: url(icons2/un_mundo_nuevo_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}

 
 
div#novedades1_table{
	position: absolute;
	height: 160px;
	width: 250px;
	min-width: 250px;
	max-width: 310px;
	max-height: 220px;
	height: 150px;
	min-height: 150px;
	right: 17%;
    top: 54%;	
	/*width: 250px;
	height: auto;*/
	display: table;
	z-index: 4;  /*sin esto los titulos animados pasan por encima y no nos funcionan los enlaces*/
}
 
 div#novedades1_table p {  /*texto de los nombres de los iconos de los juegos*/

	
	
	/*padding-top: 20px;  de la cajita el texto aparece tanto distanciada de su borde superior*/
	font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;		
	border-radius: 8px;
    background-color: rgba(0,0,0,0.5);
    color: #fff; /*!important;*/
	 
 }   

 
div#novedades1_row_0 {
/*	position:relative;
	display: block;
	width: 240px;
	height: 70px;*/
	display: table-row;
	width: 250px;
	height: 80px;
	max-height: 80px;
}

div#novedades1_row_0 .column1  {
	display: table-cell;
	width: 80px;
	height: 80px;
	max-height: 80px;
	vertical-align: middle;
	/*width: 70px;
	height: 70px;*/
}
div#novedades1_row_0 .column1 p {
	
	font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;		
	border-radius: 8px;
    background-color: rgba(0,0,0,0.5);
    color: #fff; /*!important;*/
}



body[lang="en"] .column1 p[lang="es"] {
    display: none;
}

body[lang="es"] .column1 p[lang="en"] {
    display: none;
}




div#novedades1_row_0 .column2 {
	display: table-cell;
	width: 80px;
	height: 80px;	
/*	background-image: url(icons2/un_mundo_nuevo_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}
div#novedades1_row_0 .column3 {	
    position: absolute;
	left: 65%;
	display: table-cell;	
	width: 80px;
	height: 80px;	
/*	background-image: url(icons2/un_mundo_nuevo_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}

div#novedades1_row_0 .column4 {	
	position: absolute;
    left: 95%;
	display: table-cell;	
	width: 80px;
	height: 80px;	
/*	background-image: url(icons2/un_mundo_nuevo_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}


div#novedades1_row_1 {
/*	position:relative;
	display: block;
	width: 240px;
	height: 70px;*/
	display: table-row;
	width: 250px;
	height: 80px;
	max-height: 80px;
}

div#novedades1_row_1 .column1  {
	display: table-cell;
	width: 80px;
	height: 80px;
	max-height: 80px;
	vertical-align: middle;
	/*width: 70px;
	height: 70px;*/
}
div#novedades1_row_1 .column1 p {
	
	font-family: "Linux_Biolinum";
    line-height: 1.25;
	text-align: center;		
	border-radius: 8px;
    background-color: rgba(0,0,0,0.5);
    color: #fff; /*!important;*/
}

div#novedades1_row_1 .column2 {
	display: table-cell;
	width: 80px;
	height: 80px;	
/*	background-image: url(icons2/un_mundo_nuevo_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}
div#novedades1_row_1 .column3 {	
	display: table-cell;
	position: absolute;
    left: 65%;
	width: 80px;
	height: 80px;	
/*	background-image: url(icons2/un_mundo_nuevo_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}


 div#novedades1_row_1 .column4 {	
    position: absolute;
    left: 95%;
	display: table-cell;	
	width: 80px;
	height: 80px;	
/*	background-image: url(icons2/un_mundo_nuevo_70x70.png);*/
	background-repeat: no-repeat;	
	cursor: pointer;
}
  
  /*REPETIMOS PATRON ANTERIOR CON EL BOTON DE AYUDA YA DENTRO EL JUEGO, AMBOS con javascript aplicado, el primero en ESTAN EN atlantida.js , el del juego en main menu.js
  finalmente sera en options_annims para el ej de ayuda a seleccionar avatar*/

  
  
@media (max-height: 768px) and (min-width: 854px) {  /*altura max en mi desktop y parto de la max anchura del huaweig730 de 853. finalmente la text_content.html esta enre 853x445*/

div#product_info_previ p {
    left: 32px;
    top: -28px;  /*para estar encima monigote aun asi no se garantiza*/
  	text-align: left;
  }

}


@media (max-height: 480px) and (max-width: 853px) {  /*altura max en mi desktop y parto de la anchura del huaweig730. finalmente la text_content.html alcanza el maximo a 853x445
                                        para el redmi que nos afecta aqui , es de 480 e nlugar de 445 de huawei luego en total comprende desde 360 en lugar del huwaew a 335
										Recuerda sin dudar que esta es la medida del redmi movil pinchandolo fisicamente por usb el resto  como la simulacion son especuulacioens infundadas*/
										
div#product_info_previ p {
   left: 6px;
   /*top: 10px;*/
   top: -28px; 
   text-align: left;
  }

}




@media (min-height: 336px) and (min-width: 641px) {  /*altura max en mi desktop y parto de la anchura del huaweig730. finalmente la text_content.html esta enre 853x445*/
													/*creo que el huwaei g730 deberia estar aqui entre ambos tag start_cont de pagina inicio y el de text content medidas del 100x100*/

div#product_info_previ p {
	
	left: 4px;
	/*top: 10px;*/
	top: -28px; 
	text-align: left;
  }	
}

@media (max-width: 640px) and  (max-height: 335px)   {	/*la anterior de la tool con una serie de layouts predeterminados era 480x320 en landscape ahora dejamos medidas huaweig730*/
														/*en pagina text_content.html muestra el tag start_cont 853x445*/	
														/*en una segunda toma el redmi tiene ni mas ni menos uqe un poco mas de altura 360 en tag start_cont de pagina principal
														y en text_content pagina de   */
div#product_info_previ p {
	
	left: 4px;
	/*top: 10px;*/
	top: -28px; 
	text-align: left;
  }	
														
}
  


button#zoom-in, button#zoom-out {
	/*background-color: darkolivegreen;*/
	border-color: darkgreen;
    border-width: 5px;
    /*position: absolute;  finalmente decido dejarlo fixed como el boton volver*/
	
    /* display: block; */
    /* opacity: 1; */
    /* visibility: visible; */
     z-index: 3; /*para no ser machacado por el index 2 del start_text_cont u otro*/
	 background-color: rgba(95, 132, 132, 0.9);
	/*border-radius: 8px;*/
	-moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
   
}
button#zoom-in {
 position: fixed;	
 cursor: zoom-in;
 left: 13%;
 top: 1%;
	
}
button#zoom-out {
 position: fixed;	
 left: 19%;	
 top: 1%;
 cursor: zoom-out;
}  


.zoom {
	  position: fixed;
	  top: 1%;
	 border-color: darkgreen;
    border-width: 5px;    
     z-index: 3; 
    background-color: rgba(95, 132, 132, 0.9);
	-moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
}

.inzoom {
	position: fixed;
	  top: 1%;
	 border-color: darkgreen;
    border-width: 5px;  
     z-index: 3; 
    background-color: rgba(95, 132, 132, 0.9);
	-moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
	left: 2%;  
}

.outzoom {
	position: fixed;
	  top: 1%;
	 border-color: darkgreen;
    border-width: 5px;   
     z-index: 3; 
    background-color: rgba(95, 132, 132, 0.9);
	-moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
	left: 8%;	
}


@media (orientation : portrait) and  (max-width: 640px) { 
div#patreon	{
	right: 15px;
	width: 68%;	
	}

img#img_logo_play {
	position: absolute;
	top: 5px;
	right: 0px;	
	left: 5px;  /*depende del novedades*/
    }
	
div#Novedades {
	right: 8px;	
	}  


div#engine_b4w {

	top: 89%;
	left: 7%;
}

div#engine_b4w p {
	
	top: 49%;
	left: 7%;
}


div#engine_verge3d {
	right: 7%;
	top: 85%;

}

 div#engine_verge3d p {
    right: 7%;
	top: 56%;
	
 }
 
 
 div#tuits_timeline {
	right: 89%;
	top: 95%;

}
 
}

@media (max-width: 645px) and  (orientation : landscape) { 
div#patreon	{
	right: 2px;
	width: 120px;		
	}
}