/* CSS Document */

@font-face {
    font-family: "avian";
	src: url('../fonts/avian.ttf');
}



body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url('../img/fondo1.jpg');
	min-width:100px;
	max-width:100%;
}

/* ------  autoajustar imagenes  ------ */

.container .one.colum,
.container .one.colums {width: 40px;}
.container .two.colums {width: 100px;}
.container .three.colums {width: 160px;}
.container .four.colums {width: 220px;}
.container .five.colums {width: 280px;}
.container .six.colums {width: 340px;}
.container .seven.colums {width: 400px;}
.container .eight.colums {width: 460px;}
.container .nine.colums {width: 520px;}
.container .ten.colums {width: 580px;}

.ten-din-img {width:100%;}

/* ------  autoajustar imagenes  ------ */

.width {
	min-width:100px; /*Anchura minima*/
	max-width:1100px; /*Anchura maxima*/
}

.width2 {
	min-width:100px; /*Anchura minima*/
	max-width:700px; /*Anchura maxima*/
}

.width3 {
	min-width:100px; /*Anchura minima*/
	max-width:350px; /*Anchura maxima*/
}

.transparent {
	width:1100px;
	background-image: url('../img/transparent.png');
}

.fondo1 {
	background-image: url('../img/patterns1.jpg');
}

.fondo2 {
	background-image: url('../img/patterns2.jpg');
}

.fondo3 {
	background-image: url('../img/patterns3.jpg');
}

.line1 {
	width:auto;
	height:2px;
	margin:8px 15px 8px 15px;
	background-image: url('../img/line1.png');
}

.line2 {
	width:auto;
	height:2px;
	margin:4px 15px 4px 15px;
	background-image: url('../img/line2.png');
}

.line3 {
	width:auto;
	margin:6px;
	background-image: url('../img/fondo4.png');
}


/* ------  posiciones  ------ */

.left {
	float:left;
}

.right {
	float:right;
}

/* ------  posiciones  ------ */




/* ------  header  ------ */
.header {
	width:100%;
	height:auto;
	background-image: url('../img/fondo2.jpg');
	padding:4px 0px 4px 0px;
	border-bottom: 3px solid #000000;
}


.logo {
	width:145px;
	height:46px;
	background-image: url('../img/logo.png');
	float:left;
}



/* ------  header  ------ */


/* ------  botones  ------ */
.boxboton {
	padding:15px 6px 15px 6px;
}

.boton {
	width:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	background-image: url('../img/btn.png');
	background-color:#ff8a00;
	color:#ffffff;
	text-align:left;
	text-decoration:none !important;
	text-shadow:1px -1px 1px #982e00;
	padding:7px 20px 7px 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:10px 0px 10px 10px;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
.boton:hover { background-color:#ffb400; }
.boton:active { background-color:#ffb400; background-image: url('../img/btn2.png');}


.boton1 {
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	background-image: url('../img/btn.png');
	background-color:#00d01d;
	color:#ffffff;
	text-align:center;
	text-decoration:none !important;
	text-shadow:1px -1px 1px #006802;
	padding:7px 20px 7px 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:10px 0px 10px 10px;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
.boton1:hover { background-color:#00e130; }
.boton1:active { background-color:#00e130; background-image: url('../img/btn2.png');}

.form {
	padding:0px 7px 2px 0px;
	margin:0px 7px 2px 0px;
}

.form2 {
	padding:0px 15px 0px 7px;
	mmargin:0px 15px 0px 15px;
}

.forma {  /* campos de texto */
	width:100%;
	height:auto;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size: 16px;
	color:#0066FF;
	background-color:#FFFFFF;
	border: 1px solid #2580f3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin:6px 7px 6px 0px;
	padding:6px 3px 6px 3px;
}


@-moz-document url-prefix() {
  select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
  }
}

select { 
	color: #09C;
	/*overflow: hidden;*/ 
	background:url('../img/arrow3_1.png') no-repeat right #ffffff;
	-webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
	-moz-user-select: none;
  	-webkit-user-select: none;
  	-ms-user-select: none;
}
.forma2 select {
	height:30px;
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	/*font-weight:bold;*/
	font-size: 16px;
	text-align:left;
	color:#0066FF;
	background-color:#ffffff;
	text-decoration:none !important;
	line-height:1;
   -webkit-appearance: none !important;
   /*border: 0 none;*/
  	overflow: hidden;
	 border: 1px solid #2580f3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin:9px 5px 6px 0px;
	padding:4px 8px 6px 3px;
}



.flecha1 {
	width:15px;
	height:16px;
	background-image: url('../img/flecha1.png');
}


/* ------  BOTONES  ------ */

/* columnas generales*/
#contenedorG{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	width: auto;
	margin:0 auto;
	resize: both;
	overflow: auto;
}

.item-G {
	-webkit-flex: 1 0 110px;
	flex: 1 0 220px;
	margin: 4px;
	padding:4px;
	background-image: url('../img/fonacc.png');
	/*background-color:#f7f8f8;*/
	text-decoration:none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #d5d4d4;
}
/*.item-G:hover {
	background-color:#eff2f5;
}

/* columnas generales */

/* ------  portada  ------ */
.content{
	position:fixed;
	width:100%;
	height:1000px;
}

.secfoto0, .secfoto1, .secfoto2 .secfoto3 {
	display:block;
	position:absolute;
}

.secfoto1 {
	width:100%;
	height:800px;
	background: url('../img/foto0.jpg') top center;
	top:0px;
	left:0%;
	position:absolute;
	z-index:-1;
}

.secfoto2 {
	width:100%;
	height:800px;
	background: url('../img/foto1.jpg') top center;
	top:0px;
	left:0%;
	position:absolute;
	z-index:-1;
}

.seccion00 {  /* esto es para la primera foto de la portada */
	height:550px;
	padding: 70px 10px 20px 10px;
}

.seccion01 { /* esto es para los espacios con contenido */
	height:500px;
	padding: 5px 10px 5px 10px;
	background-image: url('../img/patterns1.jpg');
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

.alterno {
	width:221px;
	height:92px;
	background-image: url('../img/b-bingo.png');
	background-repeat:no-repeat;
	float:left;
}

.fleinicio {
	width:82px;
	height:16px;
	background-image: url('../img/flecha-inicio.png');
	color:#ffffff;
	text-align:center;
	padding-top:70px;
	margin-top:300px;
}

.fleiniciot {
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	font-weight:bold;
	text-decoration:none;
	color:#ffffff;
	text-shadow:1px -1px 1px #000000;
	text-align:center;
	padding-top:70px;
}

.b-bingo {
	width:160px;
	height:92px;
	background-image: url('../img/b-bingo.png');
	background-repeat:no-repeat;
	float:left;
}

.b-loteria {
	width:167px;
	height:92px;
	background-image: url('../img/b-loteria.png');
	background-repeat:no-repeat;
	float:left;
}

.b-loteria-menor {
	width:167px;
	height:92px;
	background-image: url('../img/b-loteria-menor.png');
	background-repeat:no-repeat;
	float:left;
}

.trans2 {
	width:450px;
	background-image: url('../img/transparent.png');
}

.logo-inicio {
	float:left;
	margin:20px 5px 25px 5px;
}


.welcome {
	font-family:Roboto-Light;
	font-size:25px;
	text-align:center;
	color:#FFCC00;
	margin:15px 0px 15px 0px;
	text-shadow:1px 1px 2px #000000;
}

.texblanco {
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#ffffff;
	text-shadow:1px -1px 1px #000000;
	text-align:left;
	padding-left:5px;
}


.box {
	min-width:260px;
	height:auto;
	background-image: url('../img/fondo3.jpg');
	padding:7px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:20px 6px 20px 6px;
	border: 1px solid #6d6d6d;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.boxmensaje {
	max-width:360px;
	min-width:180px;
	height:auto;
	background-image: url('../img/fondo1.jpg');
	padding:7px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:20px 6px 20px 6px;
	border: 1px solid #6d6d6d;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.titm {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#FFFFFF;
	text-shadow:1px 1px 2px #000000;
}

.titm2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFFFFF;
	text-shadow:1px 1px 2px #000000;
}



.check1 {
	width:50px;
	height:44px;
	background-image: url('../img/check1.png');
}


.premio1 {
	width:105px;
	height:71px;
	background-image: url('../img/premios.png');
}


.ganador1 {
	max-width:435px;
	height:auto;
	border: 1px solid #ffffff;
}


/* ------  portada  ------ */

/* ------  tarjetas  ------ */
.tar1 {
	width:270px;
	height:33px;
	background-image: url('../img/tar1.png');
	background-repeat:no-repeat;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:20px;
	text-shadow:1px -1px 2px #000000;
	padding:165px 0px 0px 15px;
	float:left;
}

.tar2 {
	width:270px;
	height:33px;
	background-image: url('../img/tar2.png');
	background-repeat:no-repeat;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:20px;
	text-shadow:1px 1px 2px #000000;
	padding:165px 0px 0px 15px;
	float:left;
}

.tar3 {
	width:270px;
	height:33px;
	background-image: url('../img/tar3.png');
	background-repeat:no-repeat;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:20px;
	text-shadow:1px 1px 2px #000000;
	padding:165px 0px 0px 15px;
	float:left;
}


.precio {
	width:235px;
	height:137px;
	background-image: url('../img/precio.png');
	background-repeat:no-repeat;
	margin:5px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:20px;
	text-shadow:1px 1px 2px #000000;
	padding:8px 0px 0px 5px;
	float:left;
}

.l {
	width:200px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:17px;
	text-shadow:1px -1px 2px #000000;
	padding:8px 0px 0px 38px;
	float:left;
}

.n {
	width:84px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:36px;
	text-align:center;
	text-shadow:1px -1px 2px #000000;
	padding:0px 0px 0px 10px;
	float:left;
}


/* ------  tarjetas  ------ */




/* ------  premio ilustracion   ------- */

.premio {
	width:294px;
	height:109px;
	background-image: url('../img/premio.png');
	margin:5px;
}
.premio1 {
	width:294px;
	height:109px;
	background-image: url('../img/premio1.png');
	margin:5px;
}
.premio2 {
	width:294px;
	height:109px;
	background-image: url('../img/premio2.png');
	margin:5px;
}
.premio3 {
	width:294px;
	height:109px;
	background-image: url('../img/premio3.png');
	margin:5px;
}

.texpremio {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
	color:#ffd440;
	text-shadow:1px 1px 2px #000000;
	padding:20px 0px 0px 110px;
}

/* ------  premio ilustracion   ------- */

/* ------  tarjeta  ------- */

.tarjeta {
	width:294px;
	height:109px;
	background-image: url('../img/tarjeta.png');
	margin:5px;
}

.texcard {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
	color:#ffd440;
	text-shadow:1px 1px 2px #000000;
	padding:5px 0px 0px 110px;
}

.btncard {
	text-align:center;
	padding:10px 0px 0px 110px;
}



/* ------  tarjeta  ------- */


/* -----  Reloj  ----- */

.reloj {
	width:294px;
	height:109px;
	background-image: url('../img/reloj.png');
	margin:5px;
}

.texclock {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
	color:#ffd440;
	text-shadow:1px 1px 2px #000000;
	padding:20px 0px 0px 110px;
}

.contador {
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	font-weight:bold;
	text-align:center;
	color:#FFFFFF;
	text-shadow:1px 1px 2px #000000;
	margin:7px 0px 0px 110px;
}



/* -----  Reloj  ----- */



/* -----  Reloj  ----- */

.reloj {
	width:294px;
	height:109px;
	background-image: url('../img/reloj.png');
	margin:5px;
}

.texclock {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#ffd440;
	text-shadow:1px 1px 2px #000000;
	padding:20px 0px 0px 110px;
}

.contador {
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	font-weight:bold;
	color:#FFFFFF;
	text-shadow:1px 1px 2px #000000;
	margin:7px 0px 0px 110px;
}



/* -----  Reloj  ----- */


/* ------  contenido  ------ */

.contenido {
	width:100%;
	min-height:500px;
}

.areatexto {
	padding:10px 6px 20px 6px;
	background-image: url('../img/fondo1.png');
	background-color:#eeeded;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #ffffff;
	margin:2px;
}

.titulo1 {
	font-family:Roboto-Light, Arial, Helvetica, sans-serif;
	font-size:30px;
	color:#044496;
	text-shadow:1px 1px 2px #f8f8f8;
	text-align:left;
}

.titulo2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:bold;
	color:#312f3c;
	text-shadow:1px 1px 1px #f8f8f8;
	margin:5px;
	text-align:left;
}

.parrafo1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:17px;
	color:#312f3c;
	text-shadow:1px 1px 1px #f8f8f8;
	margin:5px;
	text-align:left;
}

.parrafo2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#312f3c;
	text-shadow:1px 1px 1px #f8f8f8;
	margin:5px;
	text-align:left;
}

.margen {
	padding:2px 5px 2px 6px;
}

.margen2 {
	padding:2px 5px 2px 15px;
}

/* ------  contenido  ------ */


/* -----  compra de numeros -----*/
.billete {
	width:275px;
	height:auto;
	background-color:#7e7b7b;
	padding:5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:5px;
	border: 2px solid #000000;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	float:left;
}

.compra {
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:left;
	color:#ffec14;
	text-shadow:1px 1px 2px #000000;
	background-image: url('../img/compra.png');
	background-repeat:no-repeat;
	padding: 0px 0px 3px 6px;
}


.numero {
	height:28px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:28px;
	font-weight:bold;
	text-align:center;
	color:#FFFFFF;
	text-shadow:1px 1px 2px #000000;
}




.letras {
	height:17px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	text-align:center;
	color:#FFFFFF;
	text-shadow:1px 1px 2px #000000;
}

.caja {
	width:41px;
	height:50px;
	padding:1px;
	border: 1px solid #8b8a8a;
	text-align:center;
	float:left;
}

.caja:hover {
	background-image: url('../img/caja.png');
	background-color:#008ce5;
}

.btncompra {
	width:43px;
	height:50px;
	padding:1px;
	background-image: url('../img/btn-comprar1.png');
	text-decoration:none;
	text-align:center;
	margin-left:2px;
	float:left;
}

.btncompra:hover {
	background-image: url('../img/btn-comprar2.png');
}

.c-loto {
	width:236px;
	height:100px;
	background-image: url('../img/compra-loteria.jpg');
	margin:3px 5px 3px 5px;
	border: 2px solid #000000;
	float:left;
}

.c-loto2 {
	width:236px;
	height:100px;
	background-image: url('../img/compra-loteria2.jpg');
	margin:3px 5px 3px 5px;
	border: 2px solid #000000;
	float:left;
}

/* -----  compra de numeros -----*/



/* -----  compra de cartones BINGO  ------ */

.c-bingo {
	width:236px;
	height:100px;
	background-image: url('../img/compra-bingo.jpg');
	margin:3px 5px 3px 5px;
	float:left;
	border: 2px solid #000000;
}

.cartones {
	width:115px;
	height:78px;
	background-image: url('../img/cartones.png');
	background-repeat:no-repeat;
	margin:3px;
	padding:7px 0px 3px 7px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:35px;
	font-weight:bold;
	text-decoration:none;
	color:#FFFF00;
	text-shadow:2px 2px 4px #000000;
	float:left;
}


.costo {
	width:100px;
	margin:9px 0px 0px 3px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:35px;
	text-decoration:none;
	color:#ffffff;
	text-shadow:2px 2px 4px #000000;
	float:left;
}

.lps {
	margin:9px 5px 0px 3px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	text-decoration:none;
	color:#ffffff;
	text-shadow:1px 1px 2px #000000;
	float:left;
}

.compra2 {
	width:auto;
	text-decoration:none;
	background-color:#4e3f3f;
	padding:3px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin:10px;
	border: 2px solid #000000;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
	float:left;
}
.compra2:hover {
	background-color:#499d32;
	border: 2px solid #bfe4b6;
}
/* -----  compra de cartones BINGO  ------ */


/* ------  footer  ------ */

.footer {
	width:100%;
	background-image: url('../img/footer.jpg');
	padding:8px 0px 4px 0px;
	border-top: 2px solid #000000;
}

.footer-section {
	width:100%;
	
}


.texfooter {
	height:17px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	color:#ffe400;
	text-shadow:1px 1px 2px #000000;
}


.credito {
	height:17px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	color:#bcbcbc;
	text-shadow:1px 1px 2px #000000;
}

/* ------  footer  ------ */