* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


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

reglas globales*/
html { font-size: 62.5% color: #333333; } 
body { font-size: 1.3rem; /* =14px */
	color: #333333;
	width: 900px;
	background-color: #fff;
}

.hidden {
	display: none;
}

/*contenedores de la imagen de fondo*/
/*
.peli {
	width:6702px;
	height:350px;
	background-image: url(../images/WEB_groficos.png);
	background-repeat: no-repeat;
	z-index: 1;
}
*/

.grafo {
	position: absolute;
	width: 900px;
	height: 837px;
}

.grafo_0 {
	background-image: url(../images/fondo.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
    z-index: 0;
}

.grafo_1 {
	background-image: url(../images/cont_1.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.grafo_2 {
	background-image: url(../images/cont_2.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.grafo_3 {
	background-image: url(../images/cont_3.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.grafo_4 {
	background-image: url(../images/cont_4.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.grafo_5 {
	background-image: url(../images/cont_5.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.grafo_6 {
	background-image: url(../images/cont_6.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.fle_1 {
	background-image: url(../images/f_1.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.fle_2 {
	background-image: url(../images/f_2.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.fle_3 {
	background-image: url(../images/f_3.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.fle_4 {
	background-image: url(../images/f_4.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.fle_5 {
	background-image: url(../images/f_5.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.fle_6 {
	background-image: url(../images/f_6.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.carreteras {
	width: 900px;
	height: 495px;
	background-image: url(../images/carreteras.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
}

.tapita {
	width: 70px;
	height: 63px;
	background-color: #fff;
	position: absolute;
	left: 598px;
	top:174px;
	z-index: 0;
	opacity: 0;

}

.mask_n {
	width: 53px;
	height: 36px;
	background-color: White;
	z-index: 2;
	opacity: 1;
	position: absolute;	
	left:697px;
	top:178px;
	z-index: 2;
}

/*máscaras para tapar .peli que sobra*/
.mask1 {
	width: 250px;
	height: 36px;
	background-color: White;
	z-index: 2;
	opacity: 0;
	position: absolute;
	left: 108px;
	top: 142px;
}
.mask2 {
	width: 250px;
	height: 36px;
	background-color: White;
	z-index: 2;
	opacity: 0;
	position: absolute;
	left: 108px;
	top: 178px;
}

.mask3 {
	width: 250px;
	height: 36px;
	background-color: White;
	z-index: 2;
	opacity: 0;
	position: absolute;
	left: 108px;
	top: 214px;
}

.mask4 {
	width: 250px;
	height: 36px;
	background-color: White;
	z-index: 2;
	opacity: 0;
	position: absolute;
	left: 108px;
	top: 250px;
}

.mask5 {
	width: 250px;
	height: 36px;
	background-color: White;
	z-index: 2;
	opacity: 0;
	position: absolute;
	left: 108px;
	top: 286px;
}

.mask6 {
	width: 250px;
	height: 36px;
	background-color: White;
	z-index: 2;
	opacity: 0;
	position: absolute;
	left: 108px;
	top: 323px;
}

/*RAYAS HORIZONTALES*/

.hr { 
  width: 900px;
  height: .5px;
  background-color: #dbdbdb;
  margin-left: 0%;
  margin-right: 0%
}
/*Tipografías*/

/*.peli {
	font-family: "verdana","arial", sans-serif;
	font-style: normal;
	font-size: 13rem;
	font-weight: bold;
	line-height: 110%	
}
*/

/*.titgr {
	font-family: "verdana","arial", sans-serif;
	font-style: normal;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 110%

}
*/

.titgr1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: normal;
	font-size: 2rem;
	font-weight: normal;
	line-height: 110%

}

.titgr2 {
	font-family: "arial", sans-serif;
	font-style: normal;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 110%;
	margin-bottom: 12px;
}


.titgr3 {
	font-family: "arial", sans-serif;
	font-style: normal;
	font-size: 18px;
	font-weight: bold;
	line-height: 110%;
	margin-bottom: 12px;
}


.titnor {
	font-family: "verdana","arial", sans-serif;
	font-style: normal;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 130%
}	

.tit1 {
	position: absolute;
    left: 10px;
    top: 13px;
}

.tit2 {
	font-size: 1.2rem;
	line-height: 110%;

	position: absolute;
    left: 350px;
    top: 425px;
}

.titpq {
	font-family: "verdana","arial", sans-serif;
	font-style: normal;
	font-size: 1rem;
	font-weight: bold;
	line-height: 130%
}

.titnor:before {
  	content: '■ ';
    position: relative;
    bottom: .1rem;
    color: #333333;
}

.subtit {
	font-family: "verdana","arial", sans-serif;
	font-style: normal;
	font-size: 0.7rem;
	font-weight: normal;
	line-height: 130%;
}



.claves1:before {
 	content: '■ ';
    position: relative;
    bottom: .1rem;
    color: #5377a;
}

.claves2:before {
 	content: '■ ';
    position: relative;
    bottom: .1rem;
    color: #d95b43;
}

.claves3:before {
 	content: '■ ';
    position: relative;
    bottom: .1rem;
    color: #eceedf;
}



.txtnor {
	/*width: 320px;
	position: absolute;
    left: 30px;
    top: 486px;*/

	width: 870px;
	font-family: "verdana", "arial", sans-serif;
	font-style: normal;
	font-size: 12px;
	font-weight: normal;
	line-height: 130%	
}

.txtpq {
	/*width: 320px;
	position: absolute;
    left: 30px;
    top: 486px;*/

	width: 870px;
	font-family: "verdana", "arial", sans-serif;
	font-style: normal;
	font-size: 11px;
	font-weight: normal;
	line-height: 130%	
}

.txtnornh {
	/*width: 320px;
	position: absolute;
    left: 30px;
    top: 486px;*/

	font-family: "verdana", "arial", sans-serif;
	font-style: normal;
	font-size: 0.7rem;
	font-weight: normal;
	line-height: 110%	
}

.txtbold {
	/*width: 300px;
	position: absolute;
    left: 30px;
    top: 467px;*/

	font-family: "verdana", "arial", sans-serif;
	font-style: bold;
	font-size: 0.8rem;
	font-weight:bold;
	line-height: 100%;
}

.txtbold2 {
	/*width: 300px;
	position: absolute;
    left: 30px;
    top: 467px;*/

	font-family: "verdana", "arial", sans-serif;
	font-style: bold;
	font-size: 0.8rem;
	font-weight:bold;
	line-height: 100%;
}

/*.txtnor2 {
	width: 83px;
	position: absolute;
    left: 843px;
    top: 226px;

	font-family: "verdana", "arial", sans-serif;
	font-style: normal;
	font-size: 0.7rem;
	font-weight: normal;
	line-height: 110%	
}*/




.txtfirma {
	font-size: 0.6rem;
	font-family: "verdana", "arial", sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 175%;
}


.txtgris1 {
	color:#999999;
}

.selected {
	opacity:0.5;
}





/*POSICIONAMIENTO*/
/*.hr1 {
	position: absolute;
	top: 10px;
}
*/

/*
.titgr2 {
	position: absolute;
	left: 6px;
	top: 12px;
}
*/
.tabla {
	position: absolute;
    left: 0px;
    top: 624px;	
}

.titulillo {
	position: absolute;
	left:10px;
	top:562px;
}

.subtitulillo {
	position: absolute;
	left:312px;
	top:572px;
}

.nota {
	position: absolute;
	left:10px;
	top:594px;
}


.subtit1 {
	position: absolute;
    left: 6px;
    top: 38px;
    width: 664px;
}

.claves1 {
	position: absolute;
    left: 10px;
    top: 92px;
}

.claves2 {
	position: absolute;
    left: 10px;
    top: 107px;
}

.claves3 {
	position: absolute;
    left: 10px;
    top: 122px;
}

#principal {
    position: relative;
    z-index: 1;
}

.parr{
	position: absolute;
	left: 0px;
	top:36px;
}

.grafoxy {
	position: absolute;
    left: 0px;
    top: 85px;
}

.peli {
	position: absolute;
	left: -31px;
	top: 155px;
}


.txtn1{
	width: 560px;
	position: absolute;
    left: 400px;
    top: 40px;
}

.txtn2 {
	position: absolute;
    left: 400px;
    top: 40px;
    width: 285px;
}

.txtn3 {
	position: absolute;
    left: 400px;
    top: 40px;
    width: 350px;
}

.titp {
	position: absolute;
	left: 10px;
	top: 351px;
}

.subtit2 {
	font-weight: bold;
	position: absolute;
	left: 564px;
    top: 18px;
}

.txtbd1 {
	width: 560px;
	position: absolute;
    left: 400px;
    top: 20px;
}

.txtbd2 {
	width: 300px;
	position: absolute;
    left: 664px;
    top: 20px;

	/*font-family: "verdana", "arial", sans-serif;
	font-style: bold;
	font-size: 0.8rem;
	font-weight:bold;
	line-height: 100%*/
}


.txtbd3 {
	width: 300px;
	position: absolute;
    left: 664px;
    top: 20px;

	/*font-family: "verdana", "arial", sans-serif;
	font-style: bold;
	font-size: 0.8rem;
	font-weight:bold;
	line-height: 100%*/
}

/*Botones*/

/*
.botonera {
	position: absolute;
	top: 44px;
}


.botonera2 {
	margin-top: 10px;
	position: absolute;
	top: 82px;
}
*/

.blanco {
	height: 38px;
	color: transparent;
}


.centrar{ margin: 0 auto;
}


.b1 {
	/*width: 264px;
	position: absolute;
	left: 10px;
    top: 88px;
    background-color: #542437;
    color:#ffffff;*/
    float: left;
    
}

.b2 {
	/*position: absolute;
    left: 288px;
    top: 88px;*/
    float: left;
    margin-left: 6px;
}

.b3 {
	/*left: 500px;
    top: 88px;*/
    float: left;
    margin-left: 6px;
}

.b4 {
    float: left;
    margin-left: 6px;
}

.b5 {
    float: left;
    margin-left: 6px;
}

.b6 {
    float: left;
    margin-left: 6px;
}

.b7 {
    float: left;
    margin-left: 6px;
}

.b8 {
    float: left;
    /*margin-left: 6px;*/
}

.b9 {
    float: left;
    margin-left: 6px;
}

.b10 {
    float: left;
    margin-left: 6px;
}


.b11 {
    float: left;
    margin-left: 6px;
}

.b12 {
    float: left;
    margin-left: 6px;
}

.b13 {
    float: left;
    margin-left: 6px;
}

.b14 {
    float: left;
    margin-left: 6px;
}

.b15 {
    float: left;
    /*margin-left: 6px;*/
}

.b16 {
    float: left;
    margin-left: 6px;
}

.b17 {
    float: left;
    margin-left: 6px;
}

.b18 {
    float: left;
    margin-left: 6px;
}

.b19 {
    float: left;
    margin-left: 6px;
}

.b20 {
    float: left;
    margin-left: 6px;
}

.b21 {
    float: left;
    margin-left: 6px;
}

.b22 {
    float: left;
    margin-left: 6px;
}



.firma1 {
	position: absolute;
    left: 6px;
    top: 596px;
}

.firma2 {
	position: absolute;
    left: 261px;
    top: 494px;
}

.firma3 {
	position: absolute;
    left: 10px;
    top: 797px;
}

/*
.botb {
	width: 26px;
	height: 26px;
	position: absolute;
	/*left: 95px;
    top: 310px;*/
	/*
	background-image: url(images/BT1.svg);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;

    cursor: pointer;
}

.botc {
	width: 26px;
	height: 26px;
	position: absolute;
	/*left: 95px;
    top: 310px;*/
    /*
	background-image: url(images/BT2.svg);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;

    cursor: pointer;
}
*/
#bt1 {
	left: 53px;
    top: 368px;
     transition-duration: 0.6s;
}
  
#bt2 {
	left: 144px;
    top: 451px;
    transition-duration: 0.6s;
}

#bt3 {
	left: 657px;
    top: 451px;
    transition-duration: 0.6s;
}

#bt4 {
	left: 882px;
    top: 265px;
    transition-duration: 0.6s;
}

#bt5 {
	left: 938px;
    top: 344px;
    transition-duration: 0.6s;
}

#bt6 {
	left: 677px;
    top: 673px;
    transition-duration: 0.6s;
}

#bt1:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}

 #bt2:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}

 #bt3:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}

 #bt4:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}

 #bt5:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}

#bt6:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}




/*otras imágenes*/


.dedo {
	width: 140px;
	height: 60px;
	position: absolute;
	left: 306px;
    top: 43px;

	background-image: url(../images/dedo_OK.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;

    /*background-color: #ffffff;*/
}
/*
.foto {
	position: absolute;
	left: 30px;
	top: 600px;
}
*/
#img0 {
	position: absolute;
	left: 512px;
	top: 22px;
}

#img1 {
	position: absolute;
	left: 758px;
	top: 21px;
}

#img2 {
	position: absolute;
	left: 699px;
	top: 20px;
}

#img3 {
	position: absolute;
	left: 691px;
	top: 18px;
}



#img5 {
	position: absolute;
	left: 690px;
	top: 25px;
}