@charset "utf-8";
/* CSS Document */

@import 'tooltip.css';

html            		   { height:100%; margin:0; padding:0; background:transparent;}
body                          { height:100%; margin:0; overflow:hidden; background-color:#fff; font-family:"Bookman Old Style",Arial,sans-serif; color:#543127;}

/* * * * * *  resets  * * * * * */

input, select, textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

/* * * * * *  layout  * * * * * */
.contenedor {
	position:relative; width:100%;
}
.contenedor img {
	width:100%; height:auto; 
}
.botoneraGeneral {
	position:absolute; 
}
.botonGeneral {
	box-sizing:border-box; display:inline-block; position:relative; height:5.6vw; width:5.25vw; background:url(../img/bot_opcion.png) left / 700% 100% no-repeat; font-size:1.7vw; line-height:4.7;
}
.botonGeneral span {
	margin-left:6%;
}
.botonGeneral:hover {
	background-position:right; cursor:pointer;
	transition: background-position .8s steps(6,start);
}
.botonGeneral:hover:after {
	box-sizing:border-box; position:absolute; left:-6%; bottom:6vw; z-index:1; min-width:8em; padding:10% 30% 13%; line-height:1.1em; background: url(../img/fondoTooltip.png) 0 / 100% 100%;
}
#boton4_6:hover:after {
	left:-40%; min-width:6.5em;
}
#boton5_6:hover:after {
	min-width:5em;
}
.botonAyuda {
	position:absolute; top:61%; left:90%; height:7vw; width:7vw; background:url(../img/bot_ayuda.png) left / 200% 100% no-repeat;
}
.botonAyuda:hover {
	background-position:right; cursor:pointer;
}
.deshabilitado {
	opacity:0.33;
}
div.deshabilitado:hover {	
	background-position:left; cursor:default;
}

.barco{
	position:absolute; top:46%; left:64%; height:27.6vw; width:29vw; background:url(../img/barco.png) center / contain no-repeat; transform-origin:40% 75%;
	animation:navegar 2s ease-in-out infinite;
}

/* * * coordenadas de las botoneras * * */
.botoneraGeneral:nth-child(2) {
	top:42%; left:17%; 
}
.botoneraGeneral:nth-child(3) {
	top:64%; left:17%; 
}
.botoneraGeneral:nth-child(4) {
	top:12%; left:64%; 
}
.botoneraGeneral:nth-child(5) {
	top:35%; left:64%; 
}
.botoneraGeneral:nth-child(6) {
	top:89%; left:62%; 
}

/* * * * * *  media  * * * * * */
@media screen and (min-aspect-ratio:1024/768) {
	body {
		text-align:center;
	}
	.contenedor {
		display:inline-block; width:auto; height:100%;
	}
	.contenedor img {
		width:auto; height:100%; 
	}
	.botonGeneral {
		height:7.46vh; width:7vh; font-size:2.2vh; text-align:left;
	}
	.botonGeneral:hover:after {
		bottom:8vh; 
	}
	.botonAyuda {
		 height:9.2vh; width:9.2vh;
	}
	.barco {
		 height:40vh; width:42.5vh;
	}
}
	/* * * * * *  animaciones  * * * * * */
@keyframes navegar {
	0% {transform:translateX(0) rotateZ(-1deg);}
	50% {transform:translateX(8px) rotateZ(1deg);}
	100% {transform:translateX(0) rotateZ(-1deg);}

}