*:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -moz-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
}
/*excepto para un mobil que  lo personaliza en media.css, el resto recurrian a esta */
#controls_container_rom {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 0;  /*imprescindible cambiar su valor 1 a 2 al incorporarse este codigo al de atlantida2 para poder recoger eventos click de mouseevent o mousedown*/
    pointer-events: none;
}
    .top-line {
        height: 100px;
        background: url("./interface/8.png") repeat-x;     /* imagen de fondo de los botones en vertical,
												creo solo se carga en un caso del media.css , cuando estamos den devices como un samsung galaxy sIII 
															auque lo he llegado a ver en mi huwaei no sabria ahora porque pues*/
        background-size: 100% 100%;
    }
    .bottom-line {
        height: 140px;
        background-color: #fff;
    }
        .button-container {
            display: table;
            margin: 0 auto;
            height: 130px;
        }
            .button {
                float: left;
                height: 100%;
                cursor: pointer;
                background-repeat: no-repeat;
                pointer-events: auto;
            }
                .data-button {
                    width: 130px;
                    height: 130px;
                    background-image: url("./interface/1_1.png");/*marco que rodea a cada load  scene cuando no esta accionada el boton por defecto*/
                    background-size: cover;
                }
                    .data-button:not(.delete-container):before {
                        content: "";
                        position: absolute;
                        width: 146px;
                        height: 146px;
                        margin: -8px 0 0 -8px;
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
                        .data-button#load-1:before {
                            background-image: url("./interface/1.png");
                        }
                        .data-button#load-2:before {
                            background-image: url("./interface/2.png");
                        }
                        .data-button#load-3:before {
                            background-image: url("./interface/3.png");
                        }
                        .data-button#load-4:before {
                            background-image: url("./interface/4.png");
                        }
                        .data-button#load-5:before {
                            background-image: url("./interface/5.png");
                        }
                    .data-button:active:not(.delete-container) {
                        background-image: url("./interface/1_2.png"); /*marco que rodea a cada load  scene accionado*/
                    }

                .delete-container {
                    cursor: default;
                    background-image: url("./interface/7_1.png");
                }
                    .delete-container.active {
                        background-image: url("./interface/7_2.png");
                    }
                    #delete {
                        margin: 25% auto 0;
                        cursor: pointer;
                        width: 60%;
                        height: 55%;
                    }
				
					
                .rot-button-container {
                    float: left;
                    width: 300px;
                    height: 130px;
                    background: url("./interface/2_1.png") no-repeat;  /*sin accionar estado por defecto de cualquier boton rotate, es una imagen con ambos botones*/
                    background-size: cover;
                    pointer-events: auto;
                }
                    .rotation-button {
                        width: 50%;
                        background-size: cover;
                    }
                        .rotation-button-left.active {
                            background-image: url("./interface/2_2.png");    /*  accionado boton rotate izq, es una imagen separada para cada boton, en este caso el izq*/
                        }
                        .rotation-button-right.active {
                            background-image: url("./interface/2_3.png");  /*  accionado boton rotate izq, es una imagen separada para cada boton, en este caso el derc*/
                            background-position: right;
                        }
                        .rotation-button>div {
                            width: 60%;
                            height: 50%;
                            margin: 20% 0 0 35%;
                        }
                        #rot-cw {
                            margin-left: 5%;
                        }