@import url('https://fonts.googleapis.com/css?family=Overpass');

body {
  margin-top: 0;
  margin-left: 0;
  padding: 0;
  border:0;
}

/* ---------------------------------- */


#base{
	position:absolute;
	width:100%;
	z-index:1;
	}

	
#cont_img_1 {
	position:absolute;
	z-index:2;
	}
	
#cont_img_2 {
	position:absolute;
	z-index:3;
	}
	
#cont_img_3 {
	position:absolute;
	z-index:4;
	}
	
#cont_img_4 {
	position:absolute;
	z-index:5;
	}
		
#cont_img_5 {
	position:absolute;
	z-index:6;
	}

#cont_img_6 {
	position:absolute;
	z-index:7;
	}

#rollover {
	position:absolute;
	z-index:8;
	}

#cotas{
	position:absolute;
	width:100%;
	z-index:9;
	}

#texto_rev {
	position:absolute;
	text-align: left;
	font-size: 1.2em;
	line-height: 1.4em;
	width:25%;
	height:50%;
	right: 20px;
    top:2%;
	z-index:10;
}

#lineaTexto {
	position:absolute;
	font-family: 'Overpass', sans-serif;
	font-weight: 200;
	line-height: 35px;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 2px solid #f0f0f0;
	text-align: center;
	font-size: 1.4em;
	background-color: #6c6c6c;
	color: white;
	width:30%;
	z-index:11;
	left: 50%;
	bottom: 12%;
	transform: translate(-50%, 0%);
}

#numerosBut{
	position:absolute;
	width:100%;
	z-index:20;
}

#numer_1 {
	position: absolute;
	background-image: url(numero_1.png);
	background-repeat: no-repeat;
	background-position: left top;
	left: 32%;
	top: 17%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	}

#numer_2 {
	position: absolute;
	background-image: url(numero_2.png);
	background-repeat: no-repeat;
	background-position: left top;	
	left: 54%;
	top: 23%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	}

#numer_3 {
	position: absolute;
	background-image: url(numero_3.png);
	background-repeat: no-repeat;
	background-position: left top;	
	left: 43%;
	top: 28%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	}

#numer_4 {
	position: absolute;
	background-image: url(numero_4.png);
	background-repeat: no-repeat;
	background-position: left top;	
	left: 70%;
	top: 71%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	}

#numer_5 {
	position: absolute;
	background-image: url(numero_5.png);
	background-repeat: no-repeat;
	background-position: left top;	
	left: 70%;
	top: 30%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	}

#numer_6 {
	position: absolute;
	background-image: url(numero_6.png);
	background-repeat: no-repeat;
	background-position: left top;	
	left: 80%;
	top: 83%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	}

/* ---------------------------------- */
/* ------------MATERIALES------------- */

#menu_MAT{ 
	display: block;
	position: absolute;
	background: rgba(0,0,0,.7);
	z-index: 20;
	}
	
.BUT_MAT{
	display: inline-block;
}

.BUT_MAT:hover {
   opacity: .8;
}

#BUT_01{
	background: url(BUT_A.png);
	background-size: 100%;
	}
	
#BUT_02{
	background: url(BUT_B.png);
	background-size: 100%;
	}
	
#BUT_03{
	background: url(BUT_C.png);
	background-size: 100%;
	}
	
#BUT_04{
	background: url(BUT_D.png);
	background-size: 100%;
	}

#BUT_05{
	background: url(BUT_E.png);
	background-size: 100%;
	}
	
#BUT_06{
	background: url(BUT_F.png);
	background-size: 100%;
	}
	
#BUT_07{
	background: url(BUT_G.png);
	background-size: 100%;
	}
	
#BUT_08{
	background: url(BUT_H.png);
	background-size: 100%;
	}
	
#BUT_09{
	background: url(BUT_I.png);
	background-size: 100%;
	}
	
#BUT_10{
	background: url(BUT_J.png);
	background-size: 100%;
	}
	
#BUT_11{
	background: url(BUT_K.png);
	background-size: 100%;
	}
	
#BUT_12{
	background: url(BUT_L.png);
	background-size: 100%;
	}

	
/* ---------------------------------- */


#cargando {
	position:absolute;
	background: url(15.gif) no-repeat left;
	background-size: 100%;
	width: 8%;
	height: 12px;
	right: 12%;
    top:15%;
	z-index:900;
	}


/* ---------------------------------- */
/* ----------MENU---------------------*/

#menu_OPC{ 
	display: block;
	position: absolute;
	top: 2%;
	right: 2%;
	width: 5%;
	height: 100%;
/*	background: rgba(0,0,0,.7);
*/	z-index:25;
}

.BUT_OPC{
	display: inline-block;
}

.BUT_OPC:hover {
   opacity: .8;
}

#guardarComb {
	background: url(agregar_combinacion.png);
	background-size: 100%;
}

#mostrarComb {
	background: url(mostrar_combinacion_numeros.png);
	background-size: 100%;
}

#mostrarCotas {
	background: url(mostrar_cotas.png);
	background-size: 100%;
}

#enviarCorreo {
	background: url(envio_mail.png);
	background-size: 100%;
}

/* ----------CAJA COMBINACIONES---------- */

#cajaComb {
	position:absolute;
	width: 100%;
	height: 22%;
	top: 50%;
	background-color: #000000;
	transform: translate(0%, -50%);
	z-index:120;
}


#cerrar_BUT {
	position:absolute;
	background: url(cerrar_BUT.png) no-repeat left top; 
	width: 40px;
	height: 40px;
	top: 2%;
	right: 2%;
	z-index:130;
}

#cerrar_BUT:hover {
	-webkit-filter: invert(1) hue-rotate(180deg) contrast(2);
	filter: invert(1) hue-rotate(180deg) contrast(2);
}

.loadDesact {
	position: absolute;
	background: url(loadComb.png) no-repeat left top; 
	width: 35px;
	height: 35px;
	top: 0px;
	right: 0px;
	z-index:131;
}

.loadAct:hover {
	-webkit-filter: invert(1) hue-rotate(180deg) contrast(2);
	filter: invert(1) hue-rotate(180deg) contrast(2);
}

.loadAct {
	position: absolute;
	background: url(loadComb.png) no-repeat left top; 
	width: 35px;
	height: 35px;
	top: 0px;
	right: 0px;
	z-index:132;
}


#deleteComb {
	position: absolute;
	background: url(deleteComb.png) no-repeat left top; 
	width: 35px;
	height: 35px;
	top: 35px;
	right: 0px;
	z-index:133;
}

#deleteComb:hover {
	-webkit-filter: invert(1) hue-rotate(180deg) contrast(2);
	filter: invert(1) hue-rotate(180deg) contrast(2);
}


/* ----------NAVEGACION ESCENAS---------- */


#but_volver {
	position:absolute;
	background: url(BUT_volver.jpg) no-repeat left;
	width: 80px;
	height: 20px;
	right: 20px;
	bottom: 15%;
	z-index: 50;
}

#but_volver:hover {
   opacity: .8;
}


/* ----------BOTON HD---------- */


#testHD {
	position:absolute;
	background: url(HD_BUT.png) no-repeat left top;
	width: 85px;
	height: 23px;
	left:30px;
	top:30px;
	z-index:32;
	}


/* ----------RESTRICCION LANSCAPE---------- */

#fondoLanscape {
	position:absolute;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: .85;
	z-index:99;
	}

#fondoLanscape_2 {
	position:absolute;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: .85;
	z-index:500;
	}

#pictoLandscape {
	position:absolute;
	background: url(picto_landscape.png) no-repeat left;
	width: 90px;
	height: 90px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index:550;
	}

@media (orientation: portrait) {
	#fondoLanscape_2 {display: block;}
	#pictoLandscape {display: block;}

}

@media (orientation: landscape) {
	#fondoLanscape_2 {display: none;}
	#pictoLandscape {display: none;}

}

/* ---------------------------------- */

/* 
.container {
  left:5%;
  top:15%;
  position: absolute;
  width:100%;
  max-width:200px;
  z-index: 65;
}

ul {
  list-style: none;
  padding: 5 0 0 0;
  margin-left: 10px;
  background:#858585;
  border-radius:3px;
  max-height: 0;
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
  visibility: hidden;
  opacity:0;
  transform: translateY(100%)
}

li a {
  padding:12px 0;
  display: block;
  transition:.25s
}
li a:hover {
  background: #ff6666;
}

.active{
  background: #424242;
}

a {
  color:#fff;
  text-transform:uppercase;
  text-decoration: none;
}
i {
  padding:10px;
  background: #424242;
  border-radius:3px;
  color:#fff;
  text-transform:uppercase;
  transition:.25s;
  animation: 1.25s bounce infinite;
}

i:hover {
  cursor:pointer;
  background: #858585;
  animation-play-state: paused;
}



ul.open {
  max-height: 480px;
  visibility: visible;
  opacity:1;
  transform:rotate(0);
}

@keyframes bounce {
  0% {margin-top:0;}
  50% {margin-top:-15px; margin-bottom:15px;}
  100% {margin-top:0;}
}


/* ---------------------------------- */	


#canvas_1 {
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index:15;
}

#canvas_2 {
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index:15;
}