@font-face {
    font-family: 'tradebold';
    src: url('fonts/trade_gothic_bold_condensed_no._20-webfont.eot');
    src: url('fonts/trade_gothic_bold_condensed_no._20-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/trade_gothic_bold_condensed_no._20-webfont.woff') format('woff'),
         url('fonts/trade_gothic_bold_condensed_no._20-webfont.ttf') format('truetype'),
         url('fonts/trade_gothic_bold_condensed_no._20-webfont.svg#tradegothicbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

a{ text-decoration: none;  }


/************************* **************************/

#panel1{ background: url(../img/fondo.png) no-repeat center center; }
#panel2, #panel3{ background: url(../img/fondo1.jpg) no-repeat center center; }

#panel5{
	background: url(../img/f4.png) no-repeat center center;
}

#animacion1, #animacion2, #animacion3{
	padding: 8px 0 0 12px;
	
}

#escenario1{
	background: url(../img/escenario1.png) no-repeat center center;
	width: 716px;
	height: 353px;
	position: absolute;
	top: 45px;
	left: 40px;
	padding-top: 70px;
}
#escenario2{
	background: url(../img/escenario2.png) no-repeat center center;
	width: 716px;
	height: 353px;
	position: absolute;
	top: 45px;
	left: 40px;
	padding-top: 70px;
}
#escenario3{
	background: url(../img/escenario3.png) no-repeat center center;
	width: 716px;
	height: 353px;
	position: absolute;
	top: 45px;
	left: 40px;
	padding-top: 70px;
}


.btn_red{	
	background: url(../img/boton_truco.png) no-repeat center center;
	width: 140px;
	height: 38px;
	text-align: center;
	line-height: 35px;
	font-family: 'trade', Arial, Helvetica, sans-serif;
  	font-size: 12px;
	font-weight: bold;
	color: #fdebec;
  	text-shadow: #672226 1px 2px 3px;
	cursor: pointer;	
}

.btn_red:hover{	
	background: url(../img/boton_truco2.png) no-repeat center center;
}

.btn_azul{ background: url(../img/boton2.png) no-repeat center center; }
.btn_celeste{ background: url(../img/boton.png) no-repeat center center; }
.btn_azul, .btn_celeste{
	width: 140px;
	height: 38px;
	text-align: center;
	line-height: 37px;
	font-family: 'trade', Arial, Helvetica, sans-serif;
  	font-size: 16px;
	color: #fdebec;
	cursor: pointer;	
}


.line{
	padding-top: 7px;
	line-height: 13px;
}

/*** PANEL 1 ***/
#panel1 #texto{
	position: absolute;
	width: 360px;
	left: 365px;
	top: 100px;
}
#panel1 #texto h2{
	font-family: 'tradebold', Arial, Helvetica, sans-serif;
  	font-size: 32px;
  	line-height: 30px;
	font-weight: 700;
  	color: #222222 !important;
  	text-shadow: #FFFFFF 0px 1px 0px;	
	padding-bottom: 10px;
}
#panel1 #texto p{
	font-family: 'trade', Arial, Helvetica, sans-serif;
  	font-size: 16px;
  	line-height: 18px;
  	color: #222222 !important;
  	text-shadow: #FFFFFF 0px 1px 0px;	
}


#boton_truco1, #boton_truco2, #boton_truco3{
	position: absolute;
	top: 439px;
}
#boton_truco1{ left: 114px; }
#boton_truco2{ left: 332px; }
#boton_truco3{ left: 550px; }

#boton_tadicional{
	position: absolute;
	top: 232px;
	left: 332px;
}






#botonera{
	position: absolute;
	right: 75px;
	top: -15px;
}



.base_trucos{
	background: url(../img/base_trucos.png) no-repeat center center;
	width: 100%;
	height: 100%;
}

.base_trucos h2{
	font-family: 'trade', Arial, Helvetica, sans-serif;
  	font-size: 20px;
  	line-height: 18px;
	font-weight: 400;
  	color: #fff;
  	text-shadow: #FFFFFF 0px 1px 0px;	
	position: absolute;
	top: 10px;	
	left: 220px;
}




#nro1{
	background: url(../img/1.png) no-repeat center center;
	position: absolute;
	top: 29px;
	left: 132px;
	width: 16px;
	height: 46px;
}

#nro2{
	background: url(../img/2.png) no-repeat center center;
	position: absolute;
	top: 27px;
	left: 129px;
	width: 30px;
	height: 47px;
}

#nro3{
	background: url(../img/3.png) no-repeat center center;
	position: absolute;
	top: 27px;
	left: 129px;
	width: 29px;
	height: 48px;
}

/*
#vaso{
	background: url(../img/vaso.png) no-repeat center center;
	position: absolute;
	top: 240px;
	left: 175px;
	width: 372px;
	height: 131px;
	z-index: 0;
}
*/


#peso{
	background: url(../img/peso.png) no-repeat center center;
	position: absolute;
	top: 200px;
	left: 340px;
	width: 59px;
	height: 118px;
	z-index: 5;
}





/*** TRUCO 2 ***/
#botella{
	background: url(../img/botella.png) no-repeat center center;
	position: absolute;
	top: 225px;
	left: 475px;
	width: 42px;
	height: 146px;
	z-index: 10;
}

#soporte{
	background: url(../img/soporte.png) no-repeat center center;
	position: absolute;
	top: 218px;
	left: 488px;
	width: 21px;
	height: 22px;
	z-index: 15;
}


/*** PASOS ***/


.modal{
	background: url(../img/pasos.png) no-repeat center center;
	width: 373px;
	height: 309px;
	position: absolute;
	font-family: 'trade', Arial, Helvetica, sans-serif;
	z-index: 100;
	left: 170px;
	top: 17px;
	padding: 100px 40px 0 40px;
	font-size: 13px;
	line-height: 17px;
	display: none;
	-moz-transform-origin: top;
	-webkit-transform-origin: top;
	-moz-animation: swinging 3s infinite ease-in-out;
	-webkit-animation: swinging 3s infinite ease-in-out;
}

@-webkit-keyframes swinging {
    0% {-webkit-transform: rotate(-2deg);}
    50% {-webkit-transform: rotate(2deg);}
    100% {-webkit-transform: rotate(-2deg);}
}

@-moz-keyframes swinging {
    0% {-moz-transform: rotate(-2deg);}
    50% {-moz-transform: rotate(2deg);}
    100% {-moz-transform: rotate(-2deg);}
}

.modal p{ color: #222; padding-bottom: 10px;}
.modal h2{
	font-size: 13px;
	color: #222;
}
.modal span{
	font-size: 13px;
	color: #222;
}

.modal ol{
	list-style-type:  none;
	display: block;
}
.modal ol li{ 
	color: #000;
	padding-bottom: 13px;
}


/** ICONOS **/
.cl{ clear: both; }
.icon{
	float: left;
	width: 60px;
	height: 67px;
	margin-right: 12px;
}
#panel4 p{ float: left; width: 300px; padding-top: 13px; }
#icon_frenos{
	background: url(../img/icono_frenos.png) no-repeat center center;
}
#icon_patines{
	background: url(../img/icono_patines.png) no-repeat center center;
}
#icon_mantel{
	background: url(../img/icono_mantel.png) no-repeat center center;
}

.btn_cerrar{
	background: url(../1nterfaz/graphics/cerrar.png) no-repeat center center;
	width: 41px;
	height: 35px;
	position: absolute;
	top: 43px;
	right: 9px;
	z-index: 0;
	cursor: pointer;
}

#flecha{
	position: absolute;
	left: 364px;
	top: 330px;
	pointer-events: none;
}