/* 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,
b, 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 { background-color: #fff; font-size: 1.3rem; /* =14px */
	color: #333333;
}

.hidden {
	display: none;
}


.grafo {
	width: 320px;
	height: 382px;
	background-image: url(../images/fondo_ibex_sp.png);
	background-repeat: no-repeat;
    background-position: left;
    background-origin: initial;
    z-index: 2;
}

.rect {
	width: 64px;
	height: 273px;
	background-color: #eceedf;

	position: absolute;
	left: 914px;
	top: 95px;
	z-index: 1;
}

/*RAYAS HORIZONTALES*/

.hr {
  width: 320px;
  height: .5px;
  background-color: #dbdbdb;
  margin-left: 0%;
  margin-right: 0%
}


/*
.hr2 {
  position: absolute;
  left: 10px;
  top: 630px;
  padding-top: 700px;
  width: 900px;
  height: .5px;
  background-color: #dbdbdb;
  margin-left: 0%;
  margin-right: 0%
}

*/


/*Tipografías*/

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

}

.titnor {
	font-family: "verdana","arial", sans-serif;
	font-style: normal;
	font-size: 1.3rem;
	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: 1.4rem;
	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.8rem;
	font-weight: bold;
	line-height: 130%	
}

.tapa {
	width: 365px;
	height: 46px;
	background-color: #ffffff;
	position: absolute;
	left:596px;
	top: 60px;
}


.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 {
	font-family: "verdana", "arial", sans-serif;
	font-style: normal;
	font-size: 13px;
	font-weight: normal;
	line-height: 115%;
	color: #75999c;	
}

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

.txtbold {
	font-family: "verdana", "arial", sans-serif;
	font-style: bold;
	font-size: 13px;
	font-weight:bold;
	line-height: 115%;
	color: #53777a;
}

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

.boton {
	font-size: 0.7rem;
	font-family: "verdana", "arial", sans-serif;
	font-weight: normal;
	text-align: center;
	color: #ffffff;
}

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

}

.txtpie {
	font-size: 0.6rem;
	font-family: "verdana", "arial", sans-serif;
	font-weight: bold;
	font-style: normal;
	line-height: 110%;
	color: #333;
	/*background-color: #fff;*/
}


.txtgris1 {
	color:#999999;
}

/*POSICIONAMIENTO*/
/*.hr1 {
	position: absolute;
	top: 10px;
}
*/
.titgr {
	position: absolute;
	left: 10px;
	top: 20px;
}
.subtit1 {
	position: absolute;
    left: 10px;
    top: 25px;
}

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

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

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


.grafo {
	position: absolute;
	left: 5px;
	top: 52px;
}

.txtn0 {
    width: 310px;	
	position: absolute;
    left: 5px;
    top: 502px;
}

.txtn1{
	width: 310px;
	position: absolute;
    left: 5px;
    top: 565px;
}

.txtn2 {
    width: 425px;	
	position: absolute;
    left: 222px;
    top: 442px;
}

.txtn3 {
    width: 660px;	
	position: absolute;
    left: 222px;
    top: 442px;
}

.txtn4{
	width: 625px;
	position: absolute;
    left: 340px;
    top: 442px;
}

.txtn5 {
    width: 880px;	
	position: absolute;
    left: 25px;
    top: 442px;
}

.txtbd1 {
	width: 310px;
	position: absolute;
    left: 5px;
    top: 548px;
}

.txtbd2 {
	width: 400px;
	position: absolute;
    left: 222px;
    top: 423px;

	/*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%*/
}

.txtbd5 {
	width: 400px;
	position: absolute;
    left: 25px;
    top: 423px;
}

.foto {
	position: absolute;
    left: 10px;
    top: 422px;
}

.foto1 {
	position: absolute;
    left: 25px;
    top: 410px;
}

/*Botones*/
.bot {
	width: 19px;
	height: 15px;
	padding-top: 3px;
	padding-bottom: 1px;
	background-color: #d68a45;
	border-style: solid;
	border-width: 0px;
	border-color: #333333;
	border-radius: 50%;
	box-shadow:2px 2px 4px #999999;
	position: absolute;
	/*left: 95px;
    top: 310px;*/
	cursor: pointer;
	z-index: 900;

	/*font-size: 1rem;
	font-family: "verdana", "arial", sans-serif;
	font-weight: bolder;
	text-align: center;*/
}

.pie {
	position: absolute;
	left: 43px;
	top: 507px;
	z-index: 100;
}

.firma1 {
	position: absolute;
    left: 15px;
    top: 434px;
}

.firma2 {
	position: absolute;
    left: 5px;
    top: 692px;
}

.firma3 {
	position: absolute;
    left: 5px;
    top: 708px;
}

/*
.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;
}
*/
#bt_1 {
	left: 46px;
    top: 194px;
     transition-duration: 0.6s;
}
  
#bt_2 {
	left: 60px;
    top: 214px;
    transition-duration: 0.6s;
}

#bt_3 {
	left: 66px;
    top: 171px;
    transition-duration: 0.6s;
}

#bt_4 {
	left: 149px;
    top: 192px;
    transition-duration: 0.6s;
}

#bt_5 {
	left: 173px;
    top: 352px;
    transition-duration: 0.6s;
}

#bt_6 {
	left: 176px;
    top: 317px;
    transition-duration: 0.6s;
}

#bt_7 {
	left: 213px;
    top: 265px;
    transition-duration: 0.6s;
}

#bt_8 {
	left: 213px;
    top: 285px;
    transition-duration: 0.6s;
}

#bt_9 {
	left: 213px;
    top: 305px;
    transition-duration: 0.6s;
}

#bt_10 {
	left: 213px;
    top: 325px;
    transition-duration: 0.6s;
}

#bt_11 {
	left: 213px;
    top: 345px;
    transition-duration: 0.6s;
}

#bt_12 {
	left: 241px;
    top: 265px;
    transition-duration: 0.6s;
}

#bt_13 {
	left: 241px;
    top: 285px;
    transition-duration: 0.6s;
}

#bt_14 {
	left: 241px;
    top: 305px;
    transition-duration: 0.6s;
}

#bt_15 {
	left: 281px;
    top: 251px;
    transition-duration: 0.6s;
}

#bt_16 {
	left: 283px;
    top: 216px;
    transition-duration: 0.6s;
}

#bt_17 {
	left: 285px;
    top: 191px;
    transition-duration: 0.6s;
}

#bt_18 {
	left: 292px;
    top: 167px;
    transition-duration: 0.6s;
}

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

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

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

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

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

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

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

#bt_7:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}
#bt_8:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}
#bt_9:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}
#bt_10:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}
#bt_11:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}
#bt_12:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}
#bt_13:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}
#bt_14:hover {
    transform: scale(1.5, 1.5);
    transition-duration: 0.6s;
}

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

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

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

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




/*otras imágenes*/

/*otras imágenes*/
@keyframes animatio{
  from { opacity: 1;}
  25% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  to { opacity: 0; }
}





.dedo {
	width: 226px;
	height: 78px;
	position: absolute;
	left: 46px;
    top: 423px;
    z-index: 4;

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

  -webkit-animation: animatio 6s infinite; /* Safari 4+ */
  -moz-animation:    animatio 6s infinite; /* Fx 5+ */
  -o-animation:      animatio 6s infinite; /* Opera 12+ */
  animation:         animatio 6s infinite; /* IE 10+, Fx 29+ */


/*



.dedo {
	width: 228px;
	height: 74px;
	position: absolute;
	left: 723px;
    top: 436px;

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

    background-color: #ffffff;
}

*/