/*----------para llamar fuentes---------*/

@font-face {
	font-family: 'firasans-Light-webfont';
	src: url('../fonts/firasans-Light-webfont.eot');

}




@font-face {
	font-family: 'firasans-regular-webfont';
	src: url('../fonts/firasans-regular-webfont.eot');
	src: url('../fonts/firasans-regular-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/firasans-regular-webfont.woff') format('woff'), url('../fonts/firasans-regular-webfont.ttf') format('truetype'), url('../fonts/firasans-regular-webfont.svg#cabndwebbold') format("svg");
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-stretch: normal;
}


@font-face {
	font-family: 'firasans-bold-webfont';
	src: url('../fonts/firasans-bold-webfont.eot');
	src: url('../fonts/firasans-bold-webfont.woff') format('embedded-opentype'), url('../fonts/firasans-bold-webfont.woff') format('woff'), url('../fonts/firasans-regular-webfont.ttf') format('truetype'), url('../fonts/firasans-bold-webfont') format("svg");
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-stretch: normal;
}


@font-face {
	font-family: 'firasans-ExtraBold-webfont';
	src:url('../fonts/FiraSans-ExtraBold_gdi.eot');
	src: url('../fonts/firasans-ExtraBold_gdit.eot@#iefix') format('embedded-opentype'), url('../fonts/FiraSans-ExtraBold_gdi.woff') format('woff'), url('../fonts/FiraSans-ExtraBold_gdi.ttf') format('truetype'), url('../fonts/firasans-regular-webfont.svg#cabndwebbold') format("svg");
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-stretch: normal;
}



/*---------------termino de llamar fuentes--------------------*/



.oacontext{
    box-shadow: 0 0 3px #666;
}

.contenido .menu.menuFases {
    left: 50%;
    margin-left: -60px;
    width: 120px;
}

/***
 *  termina transiciones y estilo en el menu principal
 *
 */

.contenido .fase {
   /* background-color: #e5e7e4;*/
	box-shadow:12px 12px 11px #333333;

}

/**********************
 * portada
 ***********/

.contenido .portada {
    background-color: #E5E7E4;
}
/*
.tituloPortada{
  color: #0a3e3e;
    font-size: 2.7em;
    font-weight: bold;
    left: 31.7%;
    position: relative;
    text-shadow: -1px 3px 0.3px #fafaf9;
    top: -38px;
    transform: translateZ(5px);
    z-index: 900;
}*/
.tituloPortada{
  /* background: none repeat scroll 0 0 red;*/
  color: #0a3e3e;
    font-size: 2.7em;
    font-weight: bold;
    left: 33.7%;
    position: absolute;
    text-shadow: -1px 3px 0.3px #fafaf9;
    top: -68px;
    font-family: 'firasans-ExtraBold-webfont';
}

/**********************
 * ejercicios
 ***********/

.contenido .ejercicios {
    background-color: #D3D3ff;
}

/**********************
 * conclusiones
 ***********/

.contenido .conclusiones {
    background-color: #ffD3ff;
}

/********
 * general
 */
.contenido .botones.botonesPortada {
    height: 100%;
    position: relative;
    width: 100%;
}


.contenido .botones{
    width: 150px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.contenido .boton {
    border-radius: 3px;
    color: #034148;
   /* display: block;*/
    font-weight: bold;
    outline: medium none;
    padding-left:52px;
    padding-top: 2px;
    text-align: center;
    text-decoration: none;
    width: 180px;
	text-shadow: -2px 3px 2px #999;
}

.contenido .boton.cerrarfloresFloreros2retro3, .contenido .boton.cerrarfloresFloreros3retro3,
.contenido .boton.cerrarfloresFloreros3retro2{
    display: inline;
    padding-left: 0;    
}

.contenido .boton.cerrarfloresFloreros3retro1,  .contenido .cerrarfloresFloreros4Retro_1, 
.contenido .cerrarfloresFloreros2retro2, span.cerrarfloresFloreros4Respuesta{
    display: block;
}

.contenido .dummydiv {
    border: 2px solid green;
    width: 300px;
    height: 700px;
    margin: auto;
}
.contenido .testDiv {
    border:1px solid #666;
    width: 80%;
    margin: auto;
}



/* 
 * ========================================
 * Estilos para el div.screenSizeReference 
 */
.displayWidthReference {
	font-size: 11px; /*pixel fallback*/
    font-size: 0.6875rem; /*11px / 16px*/
	position: absolute;
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	left: 0px;
	bottom: 20px;
	right: 0px;
	text-align: center;
}
.displayWidth {
    border: solid 1px black;
}
.gt1280 {
	background-color: yellow;
}

/* nuevo oxidacion*/


/* contador grande */

.numero_atomico{
    color: #2C3846;
    font-size: 2em;
    line-height: 200px;
    text-align: center;
    top: 80px;
    font-weight: bold;
}
.contadorUC .fondoConta{
    background-image: url("../img/principal/contadores/grande/base_abajo.png");
    width: 248px;
    height: 212px;
}

/*
.contaDer:before {
    background: none repeat scroll 0 0 #c5c6c5;
    border: 2px solid #8b9aa8;
    content: "";
    display: block;
    height: 100px;
    left: 36px;
    position: absolute;
    top: -16px;
    width: 43px;
    z-index: -2;
}
*/
/*
.contaDer:after {
    background-image: url("../img/principal/union.png");
    content: "";
    display: block;
    height: 100px;
    left: 36px;
    position: absolute;
    top: -39px;
    width: 47px;
    z-index: -2;

}

 */

.numero_atomico.conta_1{
	background-image: url("../img/principal/contadores/grande/incremento-1.png");
	background-position: 1px 2px;
    background-repeat: no-repeat;
    height: 212px;
    width: 248px;
}

.numero_atomico.conta_2{
    background-image: url("../img/principal/contadores/grande/incremento-2.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
    height: 212px;
    width: 248px;
}

.numero_atomico.conta_3{
	background-image: url("../img/principal/contadores/grande/incremento-3.png");
	background-position: 1px 2px;
    background-repeat: no-repeat;
    height: 212px;
    width: 248px;
}

.numero_atomico.conta_4{
	background-image: url("../img/principal/contadores/grande/incremento-4.png");
	background-position: 1px 2px;
    background-repeat: no-repeat;
    height: 212px;
    width: 248px;
}

.numero_atomico.conta_5{
	background-image: url("../img/principal/contadores/grande/incremento-5.png");
	background-position: 1px 2px;
    background-repeat: no-repeat;
    height: 212px;
    width: 248px;
}



.numero_atomico.conta_6{
	background-image: url("../img/principal/contadores/grande/incremento-6.png");
	background-position: 1px 2px;
    background-repeat: no-repeat;
    height: 212px;
    width: 248px;
}

.numero_atomico.conta_7{
	background-image: url("../img/principal/contadores/grande/incremento-7.png");
	background-position: 1px 2px;
    background-repeat: no-repeat;
    height: 212px;
    width: 248px;
}

.numero_atomico.conta_8{
	background-image: url("../img/principal/contadores/grande/incremento-8.png");
	background-position: 1px 2px;
    background-repeat: no-repeat;
    height: 212px;
    width: 248px;
}

.contadorFase1{
    left: 486px;
    top: 290px;
}

.contadorFase2{
    left: 486px;
    top: 345px;
}

.tapaConta{
    position: relative;
    top: -212px;
    z-index: 20;
}


/* contador covalente */

.covalente .numero_atomico{
    color: #2C3846;
    font-size: 2em;
     line-height: 119px;
    text-align: center;
    top: 80px;
    font-weight: bold;
}
.contadorUC .fondoConta.covalente{
    background-image: url("../img/principal/contadores/covalente/base_abajo.png");
    width: 125px;
    height: 125px;
}

.covalente .numero_atomico.conta_1{
    background-image: url("../img/principal/contadores/covalente/incremento-1.png");
    background-position: -2px 0;
    background-repeat: no-repeat;
   width: 125px;
    height: 125px;
}

.covalente .numero_atomico.conta_2{
    background-image: url("../img/principal/contadores/covalente/incremento-2.png");
    background-position: -2px 0;
    background-repeat: no-repeat;
  width: 125px;
    height: 125px;
}

.covalente .numero_atomico.conta_3{
    background-image: url("../img/principal/contadores/covalente/incremento-3.png");
    background-position: -2px 0;
    background-repeat: no-repeat;
    width: 125px;
    height: 125px;
}

.covalente .numero_atomico.conta_4{
    background-image: url("../img/principal/contadores/covalente/incremento-4.png");
    background-position: -2px 0;
    background-repeat: no-repeat;
   width: 125px;
    height: 125px;
}

.covalente .numero_atomico.conta_5{
    background-image: url("../img/principal/contadores/covalente/incremento-5.png");
    background-position: -2px 0;
    background-repeat: no-repeat;
   width: 125px;
    height: 125px;
}



.covalente .numero_atomico.conta_6{
    background-image: url("../img/principal/contadores/covalente/incremento-6.png");
    background-position: -2px 0;
    background-repeat: no-repeat;
    width: 125px;
    height: 125px;
}

.covalente .numero_atomico.conta_7{
    background-image: url("../img/principal/contadores/covalente/incremento-7.png");
    background-position: -2px 0;
    background-repeat: no-repeat;
   width: 125px;
    height: 125px;
}

.covalente .numero_atomico.conta_8{
    background-image: url("../img/principal/contadores/covalente/incremento-8.png");
    background-position: -2px 0;
    background-repeat: no-repeat;
     width: 125px;
    height: 125px;
}

.contadorUC.contaIzq{
    left: 410px;
	z-index:7;
   
}

.contadorUC.contaDer{
    left: 207px;
    z-index: 32;
}

.tapaConta.covalente{
    left: -2px;
    position: relative;
    top: -125px;
    z-index: 20;
}


/* contador litio */

.contaTres{
position: absolute;
left: 0;
top: 0;

}


.litio .numero_atomico{
    color: #2C3846;
    font-size: 2em;
     line-height: 104px;
    text-align: center;
    top: 80px;
    font-weight: bold;
}
.contadorUC .fondoConta.litio{
    background-image: url("../img/principal/contadores/litio/base_abajo.png");
    width: 107px;
    height: 107px;
}

.litio .numero_atomico.conta_1{
    background-image: url("../img/principal/contadores/litio/incremento-1.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
 width: 107px;
    height: 107px;
}

.litio .numero_atomico.conta_2{
    background-image: url("../img/principal/contadores/litio/incremento-2.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
width: 107px;
    height: 107px;
}

.litio .numero_atomico.conta_3{
    background-image: url("../img/principal/contadores/litio/incremento-3.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
width: 107px;
    height: 107px;
}

.litio .numero_atomico.conta_4{
    background-image: url("../img/principal/contadores/litio/incremento-4.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
   width: 107px;
    height: 107px;
}

.litio .numero_atomico.conta_5{
    background-image: url("../img/principal/contadores/litio/incremento-5.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
 width: 107px;
    height: 107px;
}



.litio .numero_atomico.conta_6{
    background-image: url("../img/principal/contadores/litio/incremento-6.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
   width: 107px;
    height: 107px;
}

.litio .numero_atomico.conta_7{
    background-image: url("../img/principal/contadores/litio/incremento-7.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
    width: 107px;
    height: 107px;
}

.litio .numero_atomico.conta_8{
    background-image: url("../img/principal/contadores/litio/incremento-8.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
width: 107px;
    height: 107px;
}

.tapaConta.litio{
   position: relative;
    top: -106px;
    z-index: 20;
}

.litio.contadorUC{
    height: 100px;
    position: absolute;
    width: 100px;
}

.contaTres .contadorUC.conta_5_0{
    left: -20px;
    top: 91px;   
    left:-10px;
    top: 91px;  
	 
    left: -20px;
    top: 91px;   
}

.contaTres .contadorUC.conta_5_1{
    left: 331px;
    top: 191px;
	left: 350px;
}

.contaTres .contadorUC.conta_5_2{
    left: 662px;
    top: 318px;
   
}

.contaCuatro .contadorUC.conta_6_0{
    left: 146px;
    top: 260px;
   
}

.contaCuatro .contadorUC.conta_6_1{
    left: 405px;
    top: 260px;
}

.contaCuatro .contadorUC.conta_6_2{
   left: 654px;
   top: 260px;
   
}

.contaCuatro .contadorUC.conta_6_3{
    left: 311px;
    top: 422px;
   
}




/* fin de contadores */

.mensaje_inf {
    display:none;
    background-color: #f9f9f9;
    border: 3px solid ##8B8B8B;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #333333;
    width: 369px;
    font-size: 0.9em;
    left: 160px;
    padding: 24px;
    position: absolute;
    text-align: justify;
    top: 98px;
    z-index: 500;
}

.canvasClass{
 /*background-color: #D9D0DB;*/
	
}

.contadorUC{
    height: 212px;
    position: absolute;
    width: 248px;
}





.olaNumOxi{
	color: #fff;
    padding: 82px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate3d(0px, -50%, 0px); /*W3C*/
    -webkit-transform: translate3d(0px, -50%, 0px); /*Safari y Chrome*/
    -o-transform: translate3d(0px, -50%, 0px); /*Opera*/
    width: 84%;
    z-index: 1000;
}

.floresFloreros4Nucleo.tooltip.tooltip-effect-2{
    left: 438px;
    top: 235px;
}

/* =================================== */

/* 
 * ==========================
 * === Responsive 
 * ==========================
 */

/* estilos aplican en width < 1280px  (Android 10" landscape) */
@media screen and (max-width: 1280px) {
	
	/* ====================================
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * Los que siguen son solo de ejemplo
	 * ====================================
	 */
	
	.displayWidth {
		background: none;
	}
	.w1280 {
		display: inline-block;
		background-color: yellow;
	}

}

/* estilos aplican en width < 1024px  (iPad landscape) */
@media screen and (max-width: 1024px) {

	/* ====================================
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * Los que siguen son solo de ejemplo
	 * ====================================
	 */
	
	.displayWidth {
		background: none;
	}
	.w1024 {
		display: inline-block;
		background-color:  yellow;
	}

}

/* estilos palican width < 768px (iPad, Android portrait)*/
@media screen and (max-width: 768px) {
	/* ====================================
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * Los que siguen son solo de ejemplo
	 * ====================================
	 */
	
	.header .nombre_objeto {
		font-size: 20px; /* pixel fallback */
		font-size: 1.25rem;
	}
	
	.displayWidth {
		background: none;
	}
	.w768 {
		display: inline-block;
		background-color:  yellow;
		

	}
}



/*-----------------AQUI COMENZO A MODIFICAR ANTONIETA--------------------*/

.contenido .btn-icono[data-params="menuPrincipal;.oacontext"] {
    border: medium solid white;
    margin: 0 5px;
    top: 90%;
   
}


.materia {
    margin: -8px -10px -8px -8px;
   
}


.perspectivaFlores1 {
	background-image:url("../img/principal/florencia.png");
    height: 700px;
    background-repeat: no-repeat;
	background-size:100%;
	}




.perspectivaPortada{
 /*   background-image: url("../img/principal/floreria.png");*/
    background-repeat: no-repeat;
    height: 518px;
    width: 390px;
    position: relative;
	background-size:100%;
}

.perspectivaFlores1, .contenido .perspectivaPortada.testDiv{
   /*height: 100%;*/
   min-height: 650px;
   position: relative;
	
}

img.imgPortada{
    width: 100%;
  /*  height:100%*/
}



.botonEntrar{
    color: #ffffff;
    font-size: 1.4em;
    font-weight: bold;
    left: 56.8%;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: 2px 2px 3px #595959;
    top: 53.2%;
}



.botonumeroDeOxidacion{
    border-radius: 3px;
    color: #4f4f4f;
    display: block;
    height: 54px;
    position: absolute;
    text-decoration: none;
    top: 50%;
    width: 83px;
}

.botonReglas{
	top: 31.2%;
    left: 89%;
    border-radius: 3px;
    color: #4f4f4f;
    display: block;
    height: 69px;
    position: absolute;
    text-align: right;
    text-decoration: none;
    width: 94px;
    
    }



.botonAsignar {  
    border-radius: 3px;
    color: #4f4f4f;
    display: block;
    height: 69px;
    left: 89%;
    position: absolute;
    text-align: right;
    text-decoration: none;
    top: 58.2%;
    width: 108px;

}



.contenido .botonGeneral {
    background-color: #ffd3ff;
    border: 1px solid #000;
    border-radius: 3px;
    display: block;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    width: 170px;
}
	

.nombreIonCompu.nomIoncloro_1{	
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #ffffff transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 10px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    visibility: visible;
    width: 0;
}


.tooltip-content {
   /* background-image: url("../img/principal/globos_realimentacion/globo_simetrico.png");
    background-repeat: no-repeat;
    color: #034148;
    cursor: default;
    font-size: 1.1em;
    height: 226px;
    line-height: 1.4;
    margin: 0 0 20px -180px;
    opacity: 0;
    padding-left: 71px;
    padding-right: 25px;
    padding-top: 77px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    top: -664.9%;
    width: 289px;
    z-index: 9999;*/
	
    background-image: url("../img/principal/globos_realimentacion/globo_muyBien.png");
    background-repeat: no-repeat;
    color: #034148;
    cursor: default;
    font-size: 1.1em;
    height: 246px;
    line-height: 1.4;
    margin: 0 0 20px -180px;
    opacity: 0;
    padding-left: 43px;
    padding-right: 23px;
    padding-top: 46px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    top: -664.9%;
    width: 247px;
    z-index: 9999;


}

.oacontext {
    font-family: 'firasans-regular-webfont';
}

.bienvFlor .tooltip-content {
    background: url("../img/principal/globo_florencia.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #034148;
    font-size: 1.2em;
    height: 240px;
    left: 400px;
    padding-left: 65px;
    padding-right: 10px;
    padding-top: 54px;
    text-align: -moz-left;
    top: -243px;
    width: 309.7px;
	}



.pedidoFlorOn {
    background-image: url("../img/principal/postit.png");
    font-size: 1.65em;
    font-weight: bold;
    height: 146px;
    left: 57%;
    line-height: 1.2em;
    padding-left: 40px;
    padding-top: 11px;
    position: relative;
    top: 48%;
    width: 137px;
}


.pedidoFlorOff {
	background-image: url("../img/principal/cliente.png");
    height: 522px;
    left: 30%;
    position: relative;
    top: 8%;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s; 
    width: 457px;
}


div.cs-skin-underline {
    color: #fff;
    font-size: 1em;
    text-align: center;
}



.menuPrinAbierto .menuPrinAbiertoActivo{
	box-shadow: 5px 4px 4px #b7b8b7;
	}


.cs-select{
	box-shadow: 5px 4px 4px #b7b8b7;
	}

.dialogFlor{
    display: block;
    font-weight: bold;
    left: 95px;
    margin: auto;
    position: relative;
    top: 2px;
    cursor: pointer;
    }

.floresFloreros_2 .tituloFase {
    font-size: 1.2em;
	color:#034148;
	font-weight:bold;
	width:100px;

}

.dialogFlorX{
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    height: 15px;
    left: 276px;
    position: relative;
    top: -177px;
    width: 10px;
    cursor: pointer;
    }

.botonSigPostitOculto, .ejerAsignaOculto, .nomOculto, .tituloOculto, .divoct{
    display: none;
}

.opacarDiv{
    opacity: 0;
}

.pedidoFlorOn .botonSigPostitOn.botonSigPostit{
    color: #1a2744;
    font-size: 0.8em;
    height: auto;
    position: relative;
    text-shadow: 0 1px 2px #595959;
    width: 70px;
    top: 73%;
	left: 59%;
   /* opacity: 0;*/
}
.conclusion_der::after{
    background-image: url("../img/principal/images/conclusion-estados.png");
    content: "";
    display: block;
    height: 216px;
    left: 0;
    position: absolute;
    top: -139px;
    width: 216px;

}

.conclusion_der {
    float: left;
    margin-top: 150px;
    position: relative;
    width: 449px;
    color: #034148;
}
pedidoFlorOff .botonSigPostitff.botonSigPostit{
    -webkit-transition: 5s ease 0s;
    -moz-transition: 5s ease 0s;
    -o-transition: 5s ease 0s;
    transition: 5s ease 0s;
    opacity: 1;
}

.boldHola{
    font-weight: bold;
	margin-left:10px;
    margin-left: 36px;
		}



/*.textorv {
    font-size: 1.4em;
    padding: 1px;
}
*/


.instruccionesEjer{
	font-size: 1.3em;
	color:#034148;
	
	/*background: none repeat scroll 0 0 gray;*/
    color: #034148;
    font-size: 1.3em;
    height: auto;
    width: 90%;
	}


.ochoFlores{
	font-weight:bold;
	}



.realiza{
	font-size: 1em;
    font-weight: bold;
	}


.realiza1{
	font-weight:bold;
	}

.contenido .testDiv {
    border: medium none;
    margin: -6px auto auto;
    width: 78.2%;;
	
}


.floresFloreros_4 .cambioAnima{
	font-size:3em;
	font-weight:bold;
	}

.floresFloreros3retro3 .tooltip-content, .floresFloreros3retro2 .tooltip-content, .floresFloreros4Respuesta .tooltip-content{
    background-image: url("../img/principal/globos_realimentacion/globo_simetrico.png");
    color: #034148;
    padding-left: 42px;
    padding-top: 71px;
    width: 323px;
}

.open-button2{
     color: white;
    display: inline;
    font-weight: bold;
    position: absolute;
    right: 44px;
    top: 19px;
    cursor: pointer;
}



.floresFloreros_3 .realiza3{
	}




.floresFloreros_2 .tooltip-content{
    background-image: url("../img/principal/globos_realimentacion/globo_simetrico.png");
    color: #034148;
    padding-left:36px;
    padding-top: 71px;
    width: 318px;
  
	}

.tooltipActivo.floresFloreros4NombreComp_1{
   height: 0;
    left: 729px;
    top:0;
   

}


.introOpaco{
    background: none repeat scroll 0 0 rgba(227,227,227, 0.8);
    height: 116%;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 5000;
    /*background: purple;*/
}

.headerVentanaFase6{
    background: none repeat scroll 0 0 #3494cd;
    box-shadow: -6px 5px 6px #b8babc;
    color: white;
    left: 9%;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 22%;
    width: 525px;
    z-index: 5002;
}

.headerVentanaFase6 span{
    display: block;
}

.bodyVentanaFase6{
    background: none repeat scroll 0 0 white;
    box-shadow: -6px 5px 6px #b8babc;
    height: 28%;
    left: 10%;
    padding: 27px 15px;
    position: absolute;
    top: 30%;
    width: 500px;
    z-index: 5001;
}

.siguienteVentanaFase6Off{
    /*background: none repeat scroll 0 0 #3494cd;*/
    /*box-shadow: 5px 4px 4px #b7b8b7;*/
    color: white;
    left: 138px;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 363px;
    width: 150px;
     /* translateZ */
    transform: translateZ(5px);
    -webkit-transform: translateZ(5px);
    -ms-transform: translateZ(5px);
    cursor: pointer;
	
 
}


.siguienteVentanaFase6On{
	background-image: url("../img/principal/FLECHAS/flecha_azul_03.png");
    color: #1f2a4c;
    font-size: 1.3em;
    font-weight: bold;
    height: 64px;
    left: 595px;
    line-height: 48px;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    text-shadow: 2px 2px 7px #595959;
    top: 471px;
    cursor: pointer;
    -webkit-transition-delay: 0s, 0.5s;
    -moz-transition-delay: 0s, 0.5s;
    -o- transition-delay: 0s, 0.5s;
     transition-delay: 0s, 0.5s;

    -webkit-transition-duration: 0.5s, 1s;
    -moz-transition-duration: 0.5s, 1s;
    -o-transition-duration: 0.5s, 1s;
     transition-duration: 0.5s, 1s;

    -webkit-transition-property: top, left;
    -moz-transition-property: top, left;
    -o-transition-property: top, left;
     transition-property: top, left;
/*

    transition-delay: 0s, 0.5s;
    transition-duration: 0.5s, 1s;
    transition-property: top, left;

*/

    width: 271px;
}

.introOpaco .bodyVentanaFase6{
    opacity: 1;
}


.bodyVentanaFase6:after{
	background-image:url(../img/principal/tablas/lineas_introducion.png);
	width:300px;
	height:300px;
	position:relative;
	}




/*  estilo tablas */

.introOpaco7_intro{
    /*background: none repeat scroll 0 0 rgba(227,227,227, 0.8);*/
    background: url("../img/principal/tablas/lineas_introducion.png") no-repeat scroll 0 0 rgba(167,181,180, 0.8);
    height: 116%;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 100;
}

.headerVentanaFase7_intro{
    background: none repeat scroll 0 0 #3494cd;
    color: white;
    left: 9%;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 26%;
    width: 525px;
    z-index: 1;
	box-shadow: -5px 7px 7px #888f91;
}

.headerVentanaFase7_intro span{
    display: block;
    font-weight: bold;
}

.bodyVentanaFase7_intro{
    background: none repeat scroll 0 0 white;
    height: 28%;
    left: 10%;
    padding: 27px 15px;
    position: absolute;
    top: 31%;
    width: 500px;
    z-index: 1;
	box-shadow: -10px 7px 9px #989da0;
}

.siguienteVentanaFase7_introOff{
   /* background: none repeat scroll 0 0 #3494cd;*/
    box-shadow: 5px 4px 4px #b7b8b7;
    color: white;
    left: 138px;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 363px;
    width: 150px;
    cursor: pointer;
}


.siguienteVentanaFase7_introOn{
   
    box-shadow: 5px 4px 4px #b7b8b7;
    color:#1F2A4C;
    left: 50%;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    width: 150px;
    cursor: pointer;
    -webkit-transition-delay: 0s, 0.5s;
    -moz-transition-delay: 0s, 0.5s;
    -o- transition-delay: 0s, 0.5s;
     transition-delay: 0s, 0.5s;

    -webkit-transition-duration: 0.5s, 1s;
    -moz-transition-duration: 0.5s, 1s;
    -o-transition-duration: 0.5s, 1s;
     transition-duration: 0.5s, 1s;

    -webkit-transition-property: top, left;
    -moz-transition-property: top, left;
    -o-transition-property: top, left;
     transition-property: top, left;
	
	background-image:url(../img/principal/FLECHAS/flecha_azul_03.png);
    background-repeat: no-repeat;
    font-size: 1.4em;
    font-weight: bold;
    height: 63px;
    left: 46.7%;
    line-height: 2.1;
    text-shadow:2px 2px 7px #595959;
    top: 63.9%;
    width: 270px;

}

.introOpaco .bodyVentanaFase7_intro{
    opacity: 1;
}

.imgTablaGral{
    height: 100%;
    left: 5%;
    position: absolute;
    top: 0;
}

.imgTabla7{
    height:0;
    position: absolute;
    top: -100px;
    width: 0%;    
    opacity: 0;
}

.showimgTabla7{
    height: auto;
    position: absolute;
    width: 99%;
    top:0px;
    z-index: 100;
    opacity: 1;
    margin-left: 6%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
}

.showTabla_hidrogeno{
    height: 116%;
    position: absolute;
    top: -100px;
    width: 95%;
    margin: auto;
    z-index: 100;
}

span.tablasToltipActivo{
    width: 100px;
    height: 90px;
}

.cerrarTabla7_1, .cerrarTabla7_2, .cerrarTabla7_3, .cerrarTabla7_4, .cerrarTabla7_5, .cerrarTabla7_6{
  color: #034148;
    font-size: 1.3em;
    font-weight: bold;
    padding: 7px 15px;
    position: absolute;
    right: -2px;
    text-align: center;
    top: 81px;
    z-index: 149;
    cursor: pointer;
}

.tablas7_1a.tooltipActivo{
    left: 40%;
    top: 36%;
}

.tablas7_1b.tooltipActivo{
    left: 85%;
    top: 29%;
}

.tablas7_1a .tooltip-content {
    background: url("../img/principal/tablas/hidrogeno_metales_03.png") no-repeat scroll 0 0 rgba(255, 0, 0, 0);
    color: #034148;
    font-size: 1.2em;
    height: 240px;
    padding-left: 58px;
    padding-right: 10px;
    padding-top: 39px;
    text-align: -moz-left;
    width: 184px;
}

.tablas7_1b .tooltip-content {
    background: url("../img/principal/tablas/hidrogeno_no_metales_03.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #034148;
    font-size: 1.2em;
    height: 240px;
    padding-left: 57px;
    padding-right: 10px;
    padding-top: 43px;
    text-align: -moz-left;
    width: 165.7px;
}

.animacionAsignar_8 span span.negritasSpan{
    font-weight: bold;
    display: inline;
    position: relative;
}

.animacionAsignar_8 span span.naranjaSpan{
    font-weight: bold;
    display: inline;
    position: relative;
    color: #F7A201;
}

.animacionAsignar_8 span span.rosaSpan{
    font-weight: bold;
    display: inline;
    position: relative;
    color: #DF3456;
}


.spanH_1, .spanH_2{
     font-size: 0;
     font-weight: bold;
     text-shadow: 2px 2px #ff0000;
     color: #fff;
     position: relative;
     z-index: 100;
}

.spanH_1{
    left: 38%;
    top: 42%;
}

.spanH_2{
    left: 81%;
    top: 31%;
}

/*litio*/

.showTabla_litio{
    height: 116%;
    position: absolute;
    top: -100px;
    width: 95%;
    z-index: 100;
    margin: auto;
}

.imgTabla7_2{
    height:0;
    position: absolute;
    top: -100px;
    width: 0%;    
    opacity: 0;
}

.showimgTabla7_2{
    height: auto;
    position: absolute;
    width: 99%;
    top:0px;
    z-index: 100;
    opacity: 1;
    margin-left: 6%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
}

.tablas7_2a .tooltip-content {
    background: url("../img/principal/tablas/litio_tooltip.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #034148;
    font-size: 1.2em;
    height: 240px;
    padding-left: 65px;
    padding-right: 10px;
    padding-top: 39px;
    text-align: -moz-left;
    width: 277px;
}

.tablas7_2a.tooltipActivo{
    left: 34%;
    top: 42%;
}

.spanL_1{
    color: #fff;
    font-size: 0;
    font-weight: bold;
    left: 12%;
    position: relative;
    text-shadow: 2px 2px #ff0000;
    top: 68%;
    z-index: 100;
}

/*oxigeno*/

.showTabla_Oxigeno{
    height: 116%;
    position: absolute;
    top: -100px;
    width: 95%;
    margin: auto;
    z-index: 100;
}

.imgTabla7_3{
    height:0;
    position: absolute;
    top: -100px;
    width: 0%;    
    opacity: 0;
}

.showimgTabla7_3{
    height: auto;
    position: absolute;
    width: 99%;
    top:0px;
    z-index: 100;
    opacity: 1;
    margin-left: 6%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
}

.tablas7_3a .tooltip-content {
    background: url("../img/principal/tablas/oxigeno_tooltip.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #034148;
    font-size: 1.2em;
    height: 246px;
    padding-left: 39px;
    padding-right: 10px;
    padding-top: 78px;
    text-align: -moz-left;
    width: 254.7px;
}

.tablas7_3a.tooltipActivo{
     left: 86%;
     top: 55%;
}

.spanO_1{
    left: 5%;
    top: 68%;
     font-size: 0;
     font-weight: bold;
     text-shadow: 2px 2px #ff0000;
     color: #fff;
     position: relative;
     z-index: 100;
}

/*fluor*/

.showTabla_Fluor{
    height: 116%;
    position: absolute;
    top: -100px;
    width: 95%;
    margin: auto;
    z-index: 100;
}

.imgTabla7_4{
    height:0;
    position: absolute;
    top: -100px;
    width: 0%;    
    opacity: 0;
}

.showimgTabla7_4{
    height: auto;
    position: absolute;
    width: 100%;
    top:0px;
    z-index: 100;
    opacity: 1;
    margin-left: 7%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
}

.tablas7_4a .tooltip-content {
    background: url("../img/principal/tablas/fluor_toopltip.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #034148;
    font-size: 1.2em;
    height: 240px;
    padding-left: 37px;
    padding-right: 10px;
    padding-top: 79px;
    text-align: -moz-left;
    width: 341px;
}

.tablas7_4a.tooltipActivo{
    left: 85%;
    top: 55%;
}

.spanF_1{
    color: #fff;
    font-size: 0;
    font-weight: bold;
    left: 93%;
    position: relative;
    text-shadow: 2px 2px #ff0000;
    top: 74%;
    z-index: 100;
}

/*cloro*/

.showTabla_Cloro{
    height: 116%;
    position: absolute;
    top: -100px;
    width: 95%;
    margin: auto;
    z-index: 100;
}

.imgTabla7_5{
    height:0;
    position: absolute;
    top: -100px;
    width: 0%;    
    opacity: 0;
}

.showimgTabla7_5{
    height: auto;
    position: absolute;
    width: 99%;
    top:0px;
    z-index: 100;
    opacity: 1;
    margin-left: 6%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
}

.tablas7_5a .tooltip-content {
    background: url("../img/principal/tablas/globo_cloro.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #034148;
    font-size: 1.1em;
    height: 240px;
    padding-left: 44px;
    padding-right: 10px;
    padding-top: 32px;
    text-align: -moz-left;
    width: 300.7px;
}

.tablas7_5a .tooltip-content span.spanCloro {
   padding-left: 0;
   padding-right: 61px;
   padding-top: 57px;
}

.tablas7_5a.tooltipActivo{
    left: 53%;
    top: 41%;
}

.tablas7_5b .tooltip-content {
    background: url("../img/principal/tablas/cloro_con_oxigeno.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #034148;
    font-size: 1.2em;
    height: 240px;
    padding-left: 34px;
    padding-right: 10px;
    padding-top: 77px;
    text-align: -moz-left;
    width: 255px;
}

.tablas7_5b.tooltipActivo{
    left: 86%;
    top: 77%;
}

.spanCl_1{
    color: #fff;
    font-size: 0;
    font-weight: bold;
    left: 89%;
    position: relative;
    text-shadow: 2px 2px #5BB030;
    top: 19%;
    z-index: 100;
}

.spanCl_2{
   color: #fff;
    font-size: 0;
    font-weight: bold;
    left: 77%;
    position: relative;
    text-shadow: 2px 2px #009a93;
    top: 19%;
    z-index: 100;
}

.imgTabla7_5_llave{
    left: 81.7%;
    top: 28.5%;
    height:0;
    position: absolute;
}

.imgTabla7_5_llaveON{
    height: 30%;
    position: absolute;
    z-index: 100;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;    
}

/*berilio*/

.showTabla_Berilio{
    height: 116%;
    position: absolute;
    top: -100px;
    width: 95%;
    margin: auto;
    z-index: 100;
}

.imgTabla7_6{
    height:0;
    position: absolute;
    top: -100px;
    width: 0%;    
    opacity: 0;
}

.showimgTabla7_6{
    height: auto;
    position: absolute;
    width: 99%;
    top:0px;
    z-index: 100;
    opacity: 1;
    margin-left: 6%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
}

.tablas7_6a .tooltip-content {
    background: url("../img/principal/tablas/berilio_realimentacion.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #034148;
    font-size: 1.2em;
    height: 240px;
    padding-left: 65px;
    padding-right: 10px;
    padding-top: 39px;
    text-align: -moz-left;
    width: 324.7px;
}

.tablas7_6a.tooltipActivo{
    left: 39%;
    top: 45%;
}

.spanBe_1{
    left: 14.5%;
    top: 68%;
    font-size: 0;
    font-weight: bold;
    text-shadow: 2px 2px #ff0000;
    color: #fff;
    position: relative;
    z-index: 100;
}

.spanHOnOxi{
    font-size: 3.5em;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;  

}

.spanHOn{
    font-size: 3.5em;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  
}

.respuestafloresFloreros2retro3.siguienteDisable, .respuestafloresFloreros3retro3.siguienteDisable, .respuestafloresFloreros5retro3.siguienteDisable, .respuestafloresFloreros6retro3.siguienteDisable{
    opacity: 0;
}

.botones8 .siguienteDisable, .botones8 .anteriorDisable, .botones9 .anteriorDisable, .botones10 .anteriorDisable,
.botones7 .anteriorDisable, .botones10 .anteriorDisable, .botones11 .anteriorDisable, .botones12 .anteriorDisable{
    opacity: 0;
    top: 500px;
}

.respuestafloresFloreros2retro3, .respuestafloresFloreros3retro3, .respuestafloresFloreros5retro3, .respuestafloresFloreros6retro3{
   left: 90%;
    opacity: 1;
    position: absolute;
    top: 90%;
    z-index: 999;
}

.botonAnterior.anteriorDisable{
    opacity: 0;
}

.botonAnterior{
    background-image: url("../img/principal/images/VOLVER_03_03.png");
    background-repeat: no-repeat;
    height: 55px;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 75%;
    width: 200px;
    z-index: 999;
	padding: 7px 10px 10px 58px;
	color: white;
    font-weight: bold;
}

/*  seccion 3 */

.introOpaco8_intro{
    /*background: none repeat scroll 0 0 rgba(227,227,227, 0.8);*/
    background: url("../img/principal/tablas/linea_asignar_introduccion.png") no-repeat scroll 0 0 rgba(167,181,180, 0.8);
    height: 116%;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 100;
}

.headerVentanaFase8_intro{
    background: none repeat scroll 0 0 #3494cd;
    box-shadow:-5px 7px 7px #888f91;
    color: white;
    left: 9%;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 26%;
    width: 525px;
    z-index: 1;
}

.headerVentanaFase8_intro span{
    display: block;
    font-weight: bold;
}

.bodyVentanaFase8_intro{
    background: none repeat scroll 0 0 white;
    height: 28%;
    left: 10%;
    padding: 27px 15px;
    position: absolute;
    top: 31%;
    width: 500px;
    z-index: 1;
	box-shadow:-10px 7px 9px #888f91;
	
}

.siguienteVentanaFase8_introOff{
    /*background: none repeat scroll 0 0 #3494cd;*/
    /*box-shadow: 5px 4px 4px #b7b8b7;*/
    color: white;
    left: 138px;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 363px;
    width: 150px;
    cursor: pointer;
}


.siguienteVentanaFase8_introOn{
    /*background: none repeat scroll 0 0 #3494cd;*/
    /*box-shadow: 5px 4px 4px #b7b8b7;*/
    color: white;
    left: 50%;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 64%;
    width: 150px;
/*

    transition-property: top, left;
    transition-duration: 0.5s, 1s;
    transition-delay: 0s, 0.5s;

*/
    -webkit-transition-delay: 0s, 0.5s;
    -moz-transition-delay: 0s, 0.5s;
    -o- transition-delay: 0s, 0.5s;
     transition-delay: 0s, 0.5s;

    -webkit-transition-duration: 0.5s, 1s;
    -moz-transition-duration: 0.5s, 1s;
    -o-transition-duration: 0.5s, 1s;
     transition-duration: 0.5s, 1s;

    -webkit-transition-property: top, left;
    -moz-transition-property: top, left;
    -o-transition-property: top, left;
     transition-property: top, left;
    cursor: pointer;


}

.introOpaco .bodyVentanaFase8_intro{
    opacity: 1;
}

.animacionAsignar_8{
    height: 500px;
    position: relative;
    width: 748px;
 /*   background: #7C6182;*/
    margin: auto;
    top: 30px;
}

.animacionAsignar_8 span{
    display: block;
    position: absolute;
}


.formulaAsigna8_1{  
    font-size: 6.3em;
    font-weight: bold;
    left: 249px;
    text-shadow: -4px 2px 3px #989b9c;
    top: 32%;
}

.animacionAsignar_8 span.formulaAsigna8_1 span, .asigaFormula span.formulaAsigna9_1 span{
    position: relative;
    display: inline;
}

.parentesisCerrar {
    color: #fff;
    height: 127px;
    top: 0;
    width: 41px;
    z-index: 1;
}

.letra2SuperIndice{
    color: #fff;
    height: 35px;
    left: -3%;
    top: -27%;
    width: 75px;
    position: relative;
}



.animaBox8_1{
    opacity: 0;
    right: 0;
    top: 30px;
    width: 170px;
   
}

.animaBox8_2:before {
   background-image: url("../img/principal/formula/cargaTotal.png");
    background-repeat: no-repeat;
    content: "";
    height: 0;
    left: -42px;
    position: absolute;
    top: -11px;
    width: 0;
    -webkit-transition:  all 0.2s 0.5s;
    -moz-transition:  all 0.2s 0.5s;
    -o-transition:  all 0.2s 0.5s;
    transition:  all 0.2s 0.5s;
}

.animaBox8_2_ON:before  {
    height: 85px;
    width: 326px;
}

.animaBox8_3:before {
   background-image: url("../img/principal/formula/abajo der.png");
    background-repeat: no-repeat;
    content: "";
    height: 0;
    left: -35%;
    position: absolute;
    top: -88%;
    width: 0;
    -webkit-transition: all 0.2s 0.5s;
    -moz-transition:  all 0.2s 0.5s;
    -o-transition:  all 0.2s 0.5s;
    transition:  all 0.2s 0.5s;

}

.animaBox8_3_ON:before {
    height: 62px; 
    width: 320px;
}

.animaBox8_4:before {
    background-image: url("../img/principal/formula/linea-abajo_01.png");
    background-repeat: no-repeat;
    content: "";
    height: 0;
    left: 0;
    padding: 1px;
    position: absolute;
    top: 26px;
    width: 0;
    -webkit-transition: all 0.2s 0.5s;
    -moz-transition:  all 0.2s 0.5s;
    -o-transition:  all 0.2s 0.5s;
    transition:  all 0.2s 0.5s;

}

.animaBox8_4_ON:before {
     height: 217px;
    width: 527px;
}

.animaBox8_5:before {
    background-image: url("../img/principal/formula/1izquierda.png");
    background-repeat: no-repeat;
    bottom: -19px;
    content: "";
    position: absolute;
    width: 0;
    -webkit-transition: all 0.2s 0.5s;
    -moz-transition:  all 0.2s 0.5s;
    -o-transition:  all 0.2s 0.5s;
    transition:  all 0.2s 0.5s;

}

.animaBox8_5_ON:before {
    height: 152px;
    width: 327px;
}

.asigaOxidacion.asigaOxidacionAnima{
    top:63%;
    left: -7%;
}

.asigaOxidacion.asigaOxidacionAnima span{
    margin-left: 30px;
}

.animaBox8_2{
   opacity: 0;
    right: -17px;
    top: 118px;
    width: 179px;
}

.animaBox8_3{
     opacity: 0;
    right: -6px;
    top: 365px;
    width: 219px;
}


.animaBox8_4{
    left: 0;
    opacity: 0;
    top: 79%;
    width: 266px;
}


.animaBox8_5{
    left: 0;
    opacity: 0;
    top: 0;
    width: 200px;
}


/*svg*/

.animaBox8_1a_ON .animaLinea8_1a {
    stroke-dashoffset: 0;
    -webkit-transition: all 3s linear 0s;
    -moz-transition:   all 3s linear 0s;
    -o-transition:   all 3s linear 0s;
    transition:  all 3s linear 0s;

}
.animaLinea8_1a{
    stroke-dasharray: 580;
    stroke-dashoffset: 580;
}

.animaBox8_1b{
    width: 244px;
    position: relative;
    height: auto;
    left: -47px;
}

.animaBox8_1b_ON .animaLinea8_1b {
    stroke-dasharray: 9;
    stroke-dashoffset: 0;
    -webkit-transition: all 2s linear 0s;
    -moz-transition:   all 2s linear 0s;
    -o-transition:  all 2s linear 0s;
    transition:  all 2s linear 0s;
}
.animaLinea8_1b{
    /*stroke-dasharray: 9;*/
    stroke-dasharray: 780;
    stroke-dashoffset: 780;
}




.animaBox8_1c{
    height: auto;
    left: -55px;
    position: relative;
    top: 90px;
    width: 244px;
    opacity: 0;
}

.animaBox8_1c.animaBox8_1c_ON {
    opacity: 1;
     -webkit-transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}



.animaBox8_2_ON .animaLinea8_2 {
    stroke-dashoffset: 0;
    -webkit-transition: all 1s linear 0s;
    -moz-transition:   all 1s linear 0s;
    -o-transition:  all 1s linear 0s;
    transition:  all 1s linear 0s;

}
.animaLinea8_2{
    stroke-dasharray: 3800;
    stroke-dashoffset: 3800;
}

/*animación de la primera solucion aniones*/

.introOpaco9_intro{
    /*background: none repeat scroll 0 0 rgba(227,227,227, 0.8);*/
    background: url("../img/principal/tablas/lineas_introducion.png") no-repeat scroll 0 0 rgba(167,181,180, 0.8);
    height: 116%;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 100;
}

.headerVentanaFase9_intro{
    background: none repeat scroll 0 0 #3494cd;
    box-shadow: 5px 4px 4px #b7b8b7;
    color: white;
    left: 9%;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 26%;
    width: 41%;
    z-index: 1;
}

.headerVentanaFase9_intro span{
    display: block;
    font-weight: bold;
}

.bodyVentanaFase9_intro{
    background: none repeat scroll 0 0 #4A8ECB;
    height: 28%;
    left: 10%;
    padding: 27px 15px;
    position: absolute;
    top: 31%;
    width: 39%;
    z-index: 1;
}

.siguienteVentanaFase9_introOff{
    background: none repeat scroll 0 0 #7abcbf;
    box-shadow: 5px 4px 4px #b7b8b7;
    color: white;
    left: 36%;
    opacity: 0;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 49%;
    width: 150px;
    z-index: 800;
    cursor: pointer;
}


.siguienteVentanaFase9_introOn{
    opacity: 1;
    -webkit-transition: opacity 0.5s linear 0s;
    -moz-transition:   opacity 0.5s linear 0s;
    -o-transition:  opacity 0.5s linear 0s;
    transition:  opacity 0.5s linear 0s;

}

.introOpaco10_fin{
    /*background: none repeat scroll 0 0 rgba(227,227,227, 0.8);*/
    background: url("../img/principal/tablas/lineas_introducion.png") no-repeat scroll 0 0 rgba(167,181,180, 0.8);
    height: 116%;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 100;
}

.siguienteVentanaFase10_finOff{
    background: none repeat scroll 0 0 #7abcbf;
    box-shadow: 5px 4px 4px #b7b8b7;
    color: white;
    left: 36%;
    opacity: 0;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 49%;
    width: 150px;
    z-index: 800;
    cursor: pointer;
}

.siguienteVentanaFase10_finOn{
    opacity: 1;
    -webkit-transition: opacity 0.5s linear 0s;
    -moz-transition:   opacity 0.5s linear 0s;
    -o-transition:  opacity 0.5s linear 0s;
    transition:  opacity 0.5s linear 0s;

}

.introOpaco11_intro{
    /*background: none repeat scroll 0 0 rgba(227,227,227, 0.8);*/
    background: url("../img/principal/tablas/lineas_introducion.png") no-repeat scroll 0 0 rgba(167,181,180, 0.8);
    height: 116%;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 100;
}

.siguienteVentanaFase11_introOff{
     color: white;
    left: 138px;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 363px;
    width: 150px;
    cursor: pointer;
}

.siguienteVentanaFase11_introOn{
    background-image: url("../img/principal/FLECHAS/flecha_blanca_03.png");
    background-repeat: no-repeat;
    font-size: 1.4em;
    font-weight: bold;
    height: 63px;
    left: 46.7%;
    line-height: 2.1;
    text-shadow: 2px 2px 3px #595959;
    top: 64.1%;
    width: 270px;
    -webkit-transition: top 0.5s linear 0s, left 1s linear 0.5s;
    -moz-transition:  top 0.5s linear 0s, left 1s linear 0.5s;
    -o-transition:  top 0.5s linear 0s, left 1s linear 0.5s;
    transition:  top 0.5s linear 0s, left 1s linear 0.5s;
    cursor: pointer;
}

.introOpaco .bodyVentanaFase9_intro{
    opacity: 1;
}

.asigaFormula{
    position: relative;
    width: 100%;
    min-width: 748px;
    height: 40%;
  /*  background: #7C6182;*/
}

/* Anima expliacion aniones*/

span.spanOpacity_0, .ecuacionOxidacion11 span.spanOpacity_0{
    opacity: 0;
}

.signoAsigna9_1{
    opacity: 0;
    right: -20px;
    top: 42px;
    width: 25%;
}


.signoAsigna9_1:before{
   background-image: url("../img/principal/formula/cargaTotal.png");
    background-repeat: no-repeat;
    content: "";
    height: 0;
    left: -43px;
    padding: 1px;
    position: absolute;
    top: -11px;
    width: 0;
    -webkit-transition:  all 0.2s 0.5s;
    -moz-transition:   all 0.2s 0.5s;
    -o-transition:   all 0.2s 0.5s;
    transition:   all 0.2s 0.5s;
}

.signoAsigna9_1_ON:before{
    height: 85px; 
    width: 320px;
}

.ecuacionOxidacion .explica9_2{
    left: 66%;
    top: -29%;
    width: 28%;
    opacity: 0;
}

.explica9_2:before {
    background-image: url("../img/principal/formula/cargaTotal.png");
    background-repeat: no-repeat;
    content: "";
    height: 0px;
    left: -25%;
    padding: 1px;
    position: absolute;
    top: -9%;
    width: 0px;
    -webkit-transition:  all 0.2s 0.5s;
    -moz-transition:   all 0.2s 0.5s;
    -o-transition:   all 0.2s 0.5s;
    transition:   all 0.2s 0.5s;
}

.explica9_2_ON:before {
    height: 62px;
    width: 320px;
}


.letraParentesis.formCom_3{
    left: 31%;
}

.nombreAsigna9_1:before{
    background-image: url("../img/principal/formula/1izquierda.png");
    background-repeat: no-repeat;
    content: "";
    height: 0px;
    left: -14.4%;
    padding: 1px;
    position: absolute;
    width: 0px;
    top: -22px;
    -webkit-transition:  all 0.2s 0.5s;
    -moz-transition:   all 0.2s 0.5s;
    -o-transition:   all 0.2s 0.5s;
    transition:   all 0.2s 0.5s;
}

.nombreAsigna9_1_ON:before{
    height: 136px;
    width: 254px;
}

.nombreAsigna9_1{
   font-size: 1em;
   left: 10%;
   padding-bottom: 30px;
   top: 14%;
   width: 25%;
   opacity: 0;
}

.asigaFormula span{
    display: block;
    position: absolute;
}

.formulaAsigna9_1{  
    color: #153346;
    font-size: 6.3em;
    font-weight: bold;
    text-shadow: -4px 2px 3px #989b9c;
    left: 38%;
    top: 40%;
}

.factorOxiAzul.cuadro9_1:before{
    content: "Estado de oxidación del nitrógeno";
    font-size: 10px;
    height: auto;
    left: -27px;
    padding: 1px;
    position: absolute;
    top: 0px;
    color: #f7a201;
    width: 174%;
    opacity: 0;
     -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}

.factorOxiAzul.cuadro9_1_ON:before{
   top: 65px;
   opacity: 1;
}

.factorOxiAzul.cuadro9_2:before{
    content: "Estado de oxidación del oxígeno";
    font-size: 10px;
    height: auto;
    left: -27px;
    padding: 1px;
    position: absolute;
    top: 0px;
    color: #153346;
    width: 174%;
    opacity: 0;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}


.letraTres.unoAnima{
    font-size: 78px;
    font-weight: bold;
    height: auto;
    left: 47%;
    padding: 1px;
    position: absolute;
    top: -224px;
    width: auto;
    -webkit-transition: all 0.5s ease 1s;
    -moz-transition: all 0.5s ease 1s;
    -o-transition: all 0.5s ease 1s;
    transition: all 0.5s ease 1s;
}

.letraTres.unoAnima_ON{   
    font-size: 60px;
    height: auto;
    left: 16%;
    top: 19px;
    font-weight: normal;
}

.tresAnima.letraUno:after {
   background: transparent;
    content: "";
    display: block;
   
}

.spanRenglon_1, .spanRenglon_2, .spanRenglon_3{
    display: block;


}

.tresAnima.letraUno{
    font-size: 78px;
    font-weight: bold;
    height: auto;
    left: 41.7%;
    padding: 1px;
    position: absolute;
    top: -224px;
    width: auto;
    background: transparent;
    color: #153346;
    -webkit-transition: all 0.5s ease 1s;
    -moz-transition: all 0.5s ease 1s;
    -o-transition: all 0.5s ease 1s;
    transition: all 0.5s ease 1s;
}

.tresAnima_ON.letraUno{
    left: 33%;
    top: 11px;
    
   }

.factorOxiAzul.cuadro9_2_ON:before{
   opacity: 1;
   top: 65px;
}


.asigaOxidacion{
    position: relative;
    width: 100%;
    min-width: 748px;
    height: 20%;
/*    background: #7A99BF;*/
}

.asigaOxidacion span{
    display: block;
    position: absolute;
}

.asigaOxidacion input{
    display: block;
    position: absolute;
}


.cuadro9_1{  
  background: none repeat scroll 0 0 #7e7abf;
    height: 60px;
    left: 43%;
    top: 25%;
    width: 60px;
}

.cuadro9_2{
    background: none repeat scroll 0 0 #7e7abf;
    height: 60px;
    left: 56.5%;
    top: 25%;
    width: 60px;
}

.cuadroAnima8_1{  
  background: none repeat scroll 0 0 #7e7abf;
    height: 60px;
    left: 42%;
    top: 25%;
    width: 60px;
}

.cuadroAnima8_2{
    background: none repeat scroll 0 0 #7e7abf;
    height: 60px;
    left: 54%;
    top: 25%;
    width: 60px;
}

.asigaOxidacion .llave9_1{
 /*  background: none repeat scroll 0 0 #fff;*/
    height: 60px;
    left: 6%;
    top: 25%;
  
}

.asigaOxidacion10 .llave9_1{
 
    left: 12px;
 
  
}

.ecuacionOxidacion .llave9_2 {
 /*   background: none repeat scroll 0 0 #fff;*/
    height: 60px;
    left: 6%;
    top: 25%;
}


.ecuacionOxidacion{
    position: relative;
    width: 100%;
    min-width: 748px;
    height: 20%;
   /* background: #7E7ABF;*/
}

.ecuacionOxidacion span{
  
    position: absolute;
    text-align: center;

}



.llaveRenglon1,.llaveRenglon2, .llaveRenglon3, .llaveRenglon4, .llaveRenglon5, .llaveRenglon6, .llaveRenglon7, .segundaLlave1 {
	color: #153346;
    font-size: 5.4em;
    font-weight: bold;
    text-shadow: -4px 2px 3px #989b9c;
	}

.asigaOxidacion span.llaveRenglon7{
   right: -39px;
    top: -50%;
    }

.ecuacionOxidacion span.segundaLlave1{
     left: 109%;
    top: -59%;
    }


.asigaOxidacion10 span.llaveRenglon1{
    left: 123%;
    top: -222%;
    color: #153346;
    font-size: 5.4em;
    font-weight: bold;
    text-shadow: -4px 2px 3px #989b9c;
	}

.asigaOxidacion10 span.llaveRenglon2{
	font-size: 5.4em;
    font-weight: bold;
    left: 123%;
    top: -222%;
	}
/*
.segundaLlave1{
	font-size: 5.4em;
    font-weight: bold;
	
	}
*/
.ecuacionOxidacion10 span.SegundaLlave2{
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    font-size: 5.4em;
    font-weight: bold;
    left: 103%;
    top: -132%;
	text-shadow:-4px 2px 3px #989b9c;
	color: #153346;
	}

.factorOxiAzul{
    background: none repeat scroll 0 0 #00a5b2;
    border: medium solid white;
    box-shadow: -1px 2px 8px #325c60 inset;
    color: white;
    font-size: 2.3em;
    height: 60px;
    opacity: 0.94;
    text-align: center;
    width: 60px;
}


.cuadro10_1_3, .cuadro10_2_3, .cuadro10_3_3, .cuadro10_4_3, .cuadro9_3, .cuadro9_9{
	font-weight:bold;
	color:#f7a201;
    font-size: 2.3em;
	}



.ecuacionOxidacion10 .llave9_2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    font-size: 1.2em;
    left: 0;
    top: 39%;
    width: 100px;
}
/*
.ecuacionOxidacion .llave9_2{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    font-size: 1.2em;
    left: 5%;
    top: 39%;
    width: 100px;
}

*/


div.ecuacionOxidacion2{
  /*  background: none repeat scroll 0 0 #00ff00;*/
    height: 100px;
    min-width: 748px;
    width: 100%;

}

div.ecuacionOxidacion2 span{
  /*  background: none repeat scroll 0 0 yellow;*/
    display: inline;
    float: left;
    height: 45px;
    left: 21%;
    margin: 2px;
    position: relative;
    text-align: center;
    top: 28%;
    width: 45px;
}

div.ecuacionOxidacion2 .factorOxiAzul {
    background: none repeat scroll 0 0 #00a5b2;
    border: medium solid white;
    box-shadow: -1px 2px 8px #325c60 inset;
    color: white;
    font-size: 2.3em;
    height: 60px;
    opacity: 0.94;
    text-align: center;
    width: 60px;
    
  /*  display: inline;
    float: left;
     position: relative;
     margin: 2px;
        top: 28%;*/
}

span.llavesRenglon{
    font-size: 2em;
}

.testDiv.cuadrojercicios_9{
   position: relative;
   height: 600px;
   width: 100%;
   background: black;

}

/*ejer 10*/

.asigaFormula10{
    position: relative;
    width: 100%;
    min-width: 748px;
    height: 38%;
}

.asigaFormula10 span{
    display: block;
    position: absolute;
}

.formulaAsigna10, .formulaAsigna11{  
    /*background: none repeat scroll 0 0 white; comente el color blanco que puso yess*/
      color: #153346;
    font-size: 6.3em;
    font-weight: bold;
    left: 37.5%;
    padding-left: 104px;
    text-shadow: -4px 2px 3px #989b9c;
    top: 60.5%;
    width: 22.6%;
}

.letra2Subindice{
    color: #fff;
    height: 35px;
    left: 10%;
    top: 2%;
    width: 75px;
	}
	
.letraParentesisCerrar{
	color: #fff;
    height: 127px;
    left: 225px;
    top: 0;
    width: 41px;
    z-index: 1;
	}	
	
	
.letraParentesis{
	color:#FFF;
    left: -7%;
	}

.letraCr{
	color:#F7A201;
    left: 10%;
	
	}

.letraCr.letraCr_2 {
    left: 1%;
}

.letraCr.letraCr_3 {
    left: 1%;
}

.letraCr:after{
    background-image: url("../img/principal/formula/sombra_anion.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 96px;
    left: -94px;
    position: absolute;
    top: 71%;
    width: 406px;
    
	}


.nombreAsigna10{
   font-size: 1em;
    left: 7px;
    top: 29%;
    width: 25%;
    color: #034148;
}

.cuadrojercicios_10{
    margin-top: 30px;
}

.nombreAsigna10:before, .nombreAsigna11:before{
    background-image: url("../img/principal/formula/1izquierda.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 136px;
    left: -14.4%;
    padding: 1px;
    position: absolute;
    width: 254px;
    top: -42px;
}


.signoAsigna10:before{
    background-image: url("../img/principal/formula/cargaTotal.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 85px;
    left: -59px;
    padding: 1px;
    position: absolute;
    top: -5px;
    width: 320px;
}




.letraAnion{
	font-weight:bold;
	font-size:1.3em;
    color: #034148;
    }



.signoAsigna10{
   right: -8px;
    top: 23px;
    width: 25%;
}

.asigaOxidacion10{
    height: 20%;
    left: 0;
    min-width: 748px;
    position: relative;
    top: 5%;
    width: 100%;
   /* background: #7A99BF;*/
}

.asigaOxidacion10 span{
    display: block;
    /*left: 6.3%;*/
    position: absolute;
    top: 45%;
	font-size: 1.2em;
}

.asigaOxidacion10 input{
    display: block;
    position: absolute;
}

.asigaOxidacion10 div.botonVerifica10, .asigaOxidacion11 div.botonVerifica11{
    background-image: url("../img/principal/formula/verificarBoton.png");
    color: #fff;
    cursor: pointer;
    display: block;
    height: 77px;
    left: 82%;
    line-height: 4;
    position: absolute;
    text-align: center;
     top: 49px;
    width: 132px;
}


.cuadro10_1{  
    background: none repeat scroll 0 0 #00a5b2;
    border: medium solid white;
    color: white;
    font-size: 2.3em;
    height: 60px;
    left: 40%;
    text-align: center;
    top: 25%;
    width: 60px;
	box-shadow:-1px 2px 8px #325c60 inset;
    opacity: 0.94;
}

.cuadro10_1:before{
    background-image:"url(../img/principal/formula/cromo_texto.png)";
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 60px;
    left: 1%;
    padding: 1px;
    position: relative;
    top: 107%;
    width: 320px;
}



.cuadro10_2{
    background: none repeat scroll 0 0 #00a5b2;
    border: medium solid white;
    height: 60px;
    top: 25%;
    width: 60px;
	left: 51%;
	box-shadow: -1px 2px 14px #325c60 inset;
    opacity: 0.94;
}



.ecuacionOxidacion10{
    height: 20%;
    left: 0;
    min-width: 748px;
    position: relative;
    top: 46px;
    width: 100%;
}

.ecuacionOxidacion10 span{
    
    display: inline;
    float: left;
    height: 45px;
    left: 20%;
    margin: 2px;
    position: absolute;
    text-align: center;
    top: 28%;
    width: 45px;
}



.ecuacionOxidacion10 .explica10{
    
    left: 66%;
    top: -48%;
    width: 28%;
}

div.ecuacionOxidacion2_10_1{
    width: 100%;
    min-width: 748px;
    height: 100px;
}


div.ecuacionOxidacion2_10_1 .factorOxi{
    background: none repeat scroll 0 0 #00a5b2;
    border: medium solid white;
    display: inline;
    float: left;
    font-size: 2.2em;
    height: 60px;
    left: 21%;
    margin: 2px;
    padding-top: 5px;
    position: relative;
    text-align: center;
    top: 28%;
    width: 60px;
}


div.ecuacionOxidacion2_10_1 .factorOxi, div.ecuacionOxidacion2 .factorOxi{
    background: none repeat scroll 0 0 #00a5b2;
    border: medium solid white;
    display: inline;
    float: left;
    font-size: 2.2em;
    height: 60px;
    left: 21%;
    margin: 2px;
    padding-top: 5px;
    position: relative;
    text-align: center;
    top: 28%;
    width: 60px;
}






.factorOxi.cuadro10_1_6{
	color: #153346;
	font-weight: bold;
	}

.factorOxi.cuadro10_1_5, .factorOxi.cuadro10_2_5,
.factorOxi.cuadro10_3_5, .factorOxi.cuadro10_4_5, .factorOxi.cuadro9_5{
	color:#FFF;
	}




.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_1_3, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_2_3,
.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_3_3, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_4_3, 
.ecuacionOxidacion2 .factorOxi.cuadro9_3, .ecuacionOxidacion2 .factorOxi.cuadro9_9{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: -moz-use-text-color;
    border-image: none;
    border-style: none none solid;
    border-width: medium;
    padding-right: 1px;
    right: 2%;
    width: 31px;
	}


.factorOxi.cuadro10_1_1a.limpiaSpan{
    -moz-box-shadow:-1px 2px 14px #325C60 inset;
    -webkit-box-shadow:-1px 2px 14px #325C60 inset;
    box-shadow:-1px 2px 14px #325C60 inset;
    opacity: 0.94;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 94);
    filter: alpha(opacity = 94);
     color: white;

}


.factorOxi.cuadro10_1_1b.limpiaSpan{
    -moz-box-shadow:-1px 2px 14px #325C60 inset;
    -webkit-box-shadow:-1px 2px 14px #325C60 inset;
    box-shadow:-1px 2px 14px #325C60 inset;
    opacity: 0.94;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 94);
    filter: alpha(opacity = 94);
    color: #fff;
	}
	
	
.factorOxi.cuadro10_1_11.limpiaSpan, .factorOxi.cuadro10_2_11.limpiaSpan,
.factorOxi.cuadro10_3_11.limpiaSpan, .factorOxi.cuadro10_4_11.limpiaSpan{
	color: #153346;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    color: #153346;
    border-color: -moz-use-text-color;
    width: 35px;
	}	
	
	

.factorOxi.cuadro10_1_10.limpiaSpan, .factorOxi.cuadro10_2_10.limpiaSpan,
.factorOxi.cuadro10_3_10.limpiaSpan, .factorOxi.cuadro10_4_10.limpiaSpan,
.factorOxi.cuadro9_9.limpiaSpan{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    width: 35px;
	color: #f7a201;
    border-color: -moz-use-text-color;
	}


.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_1_12, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_2_12,
.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_3_12, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_4_12{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    font-size: 3.3em;
    font-weight: bold;
    padding-right: 1px;
    right: 2%;
    text-shadow: -1px 1px 3px #595959;
    top: 19%;
    width: 31px;
	color:#fff;
	}


span.resCorrecta_10.factorOxi{
	  background: url("../img/principal/formula/anion_correcto.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #fff;
    font-size: 3.3em;
    font-weight: bold;
    height: 122px;
    line-height: 1.5;
    text-shadow: -1px 1px 3px #595959;
    top: 0;
    width: 108px;
	}


span.resCorrecta_10.factorOxi.cuadroResAnima{
    line-height: 4.5;
    }

span.resCorrecta_10 span{
    line-height: 0.1;
}
/*span.resCorrecta_10.cuadro12_2_16.factorOxi,
span.resCorrecta_10.cuadro12_3_16.factorOxi, span.resCorrecta_10.cuadro12_4_16.factorOxi,
span.resCorrecta_10.cuadro12_5_16.factorOxi, span.resCorrecta_10.cuadro12_6_16.factorOxi{
    background: url("../img/principal/formula/anion_correcto.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #fff;
    font-size: 3.3em;
    font-weight: bold;
    height: 208px;
    left: 313px;
    line-height: 2.5;
    text-shadow: -1px 1px 3px #595959;
    top: -118px;
    width: 188px;
    }
*/
span.resCorrecta_10.cuadro12_6_16.factorOxi, span.resCorrecta_10.cuadro12_1_16.factorOxi,
span.resCorrecta_10.cuadro12_2_16.factorOxi,
span.resCorrecta_10.cuadro12_3_16.factorOxi, span.resCorrecta_10.cuadro12_4_16.factorOxi,
span.resCorrecta_10.cuadro12_5_16.factorOxi, span.resCorrecta_10.cuadro12_6_16.factorOxi {
   background: url("../img/principal/formula/anion_correcto.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #fff;
    font-size: 3.3em;
    font-weight: bold;
    height: 122px;
    line-height: 2.5;
    text-shadow: -1px 1px 3px #595959;
    top: 0;
    width: 108px;
    }

span.resCorrecta_10 span{
   line-height: 1.1;

}

span.resCorrecta_10.cuadro12_1_16.factorOxi span, span.resCorrecta_10.cuadro12_2_16.factorOxi span,
span.resCorrecta_10.cuadro12_3_16.factorOxi span, span.resCorrecta_10.cuadro12_4_16.factorOxi span,
span.resCorrecta_10.cuadro12_5_16.factorOxi span, span.resCorrecta_10.cuadro12_6_16.factorOxi span{ 
  padding-left: 17px;
}



.factorOxi.cuadro10_1_Sig.limpiaSpan, .factorOxi.cuadro10_2_Sig.limpiaSpan,
.factorOxi.cuadro10_3_Sig.limpiaSpan, .factorOxi.cuadro10_4_Sig.limpiaSpan{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #fff;
    font-size: 3.3em;
    font-weight: bold;
    padding-right: 1px;
    right: 2%;
    text-shadow: -1px 1px 3px #595959;
    top: 19%;
    width: 31px;
	}
	

.cuadro10_2{
	color: white;
    font-size: 2.4em;
    text-align: center;
	}



.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_1_6, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_2_6,
.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_3_6, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_4_6,
.ecuacionOxidacion2 .factorOxi.cuadro9_6, .ecuacionOxidacion2 .factorOxi.cuadro9_10, .ecuacionOxidacion2 .factorOxi.cuadro9_12{
	 -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: -moz-use-text-color;
    border-image: none;
    border-style: none none solid;
    border-width: medium;
	width: 31px;
    padding-right: 1px;
    right: 2%;
	}
	
	
.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_1_5, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_2_5,
.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_3_5, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_4_5,
.ecuacionOxidacion2 .factorOxi.cuadro9_5{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    text-shadow:-1px 1px 3px #595959;
    font-size: 3.3em;
    font-weight: bold;
    padding-right: 1px;
    right: 2%;
    top: 19%;
    width: 31px;
	}


.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_1_8, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_2_8,
.ecuacionOxidacion2_10_1 .factorOxi.cuadro10_3_8, .ecuacionOxidacion2_10_1 .factorOxi.cuadro10_4_8,
.ecuacionOxidacion2 .factorOxi.cuadro9_8, .ecuacionOxidacion2 .factorOxi.cuadro9_11{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color:#FFF;
    font-size: 3.3em;
    font-weight: bold;
    padding-right: 1px;
    right: 2%;
    top: 19%;
    width: 31px;
	text-shadow:-1px 1px 3px #595959;
	}




.animacionResolver9_1, .ejer10_1, .ejer10_2, .ejer10_3, .ejer10_4, .animacionResolver11, .ejer11_1, .ejer11_2, .ejer11_3, .ejer11_4, .ejer11_5, .ejer11_6{
    height: 600px;
    margin: auto;
    position: relative;
    width: 750px;

}


.contentNombreComp_1{
    color: white;
    font-weight: bold;
    height: 216px;
    left: -60px;
    line-height: 28px;
    padding-left: 13px;
    padding-top: 7px;
    text-align: center;
    width: 271px;
	font-size: 1em;
}

.posNombreComp_1.tooltipActivo {
    left: 77%;
    position: absolute;
    top: 53%;
}


.contentNombreComp_5{
    height: 216px;
    width: 271px;
    left: -60px;
}

.posNombreComp_5.tooltipActivo {
   left: 52%;
   position: absolute;
   top: 7%;
   z-index: -2;
   /*font-weight:bold;
   color:#FFF;
   font-size:1.2em;
   text-align:center;*/
   
   
}

.letraParentesisCerrar.formCom_3 {
    left: 109%;
}

.letraParentesis.formCom_3 {
     left: 32%;
}

.letraUno.formCom_3, .letraUno.formCom_4{
    left: -12%;
}


.letra2Subindice.formCom_3 {
    left: 337px;
    top: 10px;
}

.formCom_4.letraParentesis {
    left: 32%;
}

.letraParentesisCerrar.formCom_4 {
    left: 94%;
}

.letra2Subindice.formCom_4 {
    left: 194px;
    top: 159px;
}

.letraUno.formCom_5{
    left: -18%;
}

.letraDos.formCom_5{
    left: 20%;
}

.letraTres.formCom_5{
    left: 76%;
}



.formulaAsigna11 {
   left: 41%;
    top: 97px;
}

.floresFloreros4NombreComp_1.formCom_3{
	 font-weight:bold;
   color:#FFF;
   font-size:1.2em;
   text-align:center;
	}

.contentNombreComp_6{
    color: white;
    font-size: 1.3em;
    font-weight: bolder;
    height: 216px;
    left: -60px;
    padding-left: 120px;
    padding-top: 24px;
    width: 271px;
}


.posNombreComp_6.tooltipActivo {
    left: 77%;
    position: absolute;
    top: 53%;
}

span.nombreCompuestos{
    background-image: url("../img/principal/nombreCompuesto.png");
}





/*------------DIA VIERNES------------*/


.siguienteVentanaFase8_introOn{
	background-image: url("../img/principal/FLECHAS/flecha_azul_03.png");
	background-image:url(../img/principal/FLECHAS/flecha_blanca_03.png);
	background-repeat:no-repeat;
    font-size: 1.4em;
    font-weight: bold;
    height: 63px;
    left: 46.7%;
    width: 270px;
	line-height: 2.1;
	text-shadow: 2px 2px 3px #595959;
	top: 64.1%;
    cursor: pointer;
	}

.siguienteVentanaFase8_introOff ventanaFase8_intro siguienteVentanaFase8_introOn{
	background-color:none;
	}



.floresFloreros_3 .tooltip-content {
     background-image: url("../img/principal/globos_realimentacion/globo_muyBien.png");
    background-repeat: no-repeat;
    color: #034148;
    cursor: default;
    font-size: 1.1em;
    height: 246px;
    line-height: 1.4;
    margin: 0 0 20px -180px;
    opacity: 0;
    padding-left: 44px;
    padding-right: 23px;
    padding-top: 55px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    top: -664.9%;
    width: 258px;
    z-index: 9999;
}


.floresFloreros3true .tooltip-content{
	background-image: url("../img/principal/globos_realimentacion/globo_muyBien.png");
    padding-left: 30px;
    padding-top: 38px;
    text-align: center;
    width: 275px;
	padding-left: 20px;
   
	}



.floresFloreros2retro4 .tooltip-content{
    background-image: url("../img/principal/globos_realimentacion/globo_simetrico.png");
    padding: 50px 51px 51px 41px;
    width:305px;
	 text-align: center;
   }
   


.cerrarfloresFloreros2retro4 .contenido .boton{
	padding-left:76px;
	}   
   
   

.floresFloreros2retro1 .tooltip-content{
	background-image:url("../img/principal/globos_realimentacion/globo_simetrico.png");
    padding-left: 45px;
    padding-top:53px;
    width:311px;
	height: 270px;
	}

.floresFloreros3retro1 .tooltip-content{
	background-image:url("../img/principal/globos_realimentacion/globo_simetrico.png");
    padding-left: 45px;
    padding-top:57px;
     width: 310px;
	}
	
.ok1, .ok2{
	font-weight:bold;
	padding-left: 99px;
    text-align: center;
	}	
	
	
.ok2{
	padding-left: 16px;
	}	
		

.bien{
	font-weight: bold;
    padding-left: 126px;
    text-align: center;
	}
	
.ok3{
	 font-weight: bold;
    height: auto;
    margin-top: 5px;
    padding-left: 68px;
    position: relative;
    top: 5%;
    width: 50px;
	text-shadow:-1px 2px 2px #C3CACF;
	}
			
	
.floresFloreros2retro2 .tooltip-content{
	background-image: url("../img/principal/globos_realimentacion/globo_simetrico.png");
    padding-left: 55px;
   /* padding-top: 100px;*/
    width: 300px;
	}
	
.floresFloreros3retro4 .tooltip-content{
	background-image: url("../img/principal/globos_realimentacion/muy_bien_gemelos.png");
    padding-bottom: 48px;
    padding-right: 48px;
    text-align: center;
    width: 285px;
	}
	
	
.floresFloreros4Retro_1 .tooltip-content {
	background-image: url("../img/principal/globos_realimentacion/muy_bien_gemelos.png");
    padding-bottom: 48px;
    padding-right: 48px;
    text-align: center;
    width:283px;
	padding-top: 42px;
	padding-left: 47px;
	}	
	
	
.bien4{
	font-weight: bold;
    padding-left:5px;
    text-align: center;
	}
	
.cerrarfloresFloreros4Retro_1{
	width:200px;
	height:20px;
	position:relative;
	/*top:-7%;*/
	font-weight: bold;
	text-shadow: -1px 2px 2px #c3cacf;
    cursor: pointer;
	}	
	
	
.floresFloreros4true .tooltip-content{
	background-image: url("../img/principal/globos_realimentacion/muy_bien_gemelos.png");
    left: 1660%;
   /* line-height: 28px;*/
    padding-right: 70px;
    top: -1022%;
    width: 266px;
	text-align: center;
    padding-top: 41px;
	}
	
	

.ok3Covalente{
    font-weight: bold;
    text-align: center;
	padding-left:left: 4%;
}

		
.floresFloreros4true .open-button{
	font-size: 1.1em;
    font-weight: bold;
    height: 20px;
    left: 2%;
    position: relative;
    text-shadow: -1px 2px 2px #c3cacf;
    top: -8%;
    width: 200px;
	}	
	
.floresFloreros4Retro_2	.tooltip-content{
	background-image: url("../img/principal/globos_realimentacion/muy_bien_gemelos.png");
    padding: 49px 36px 150px;
    text-align: center;
    width: 307px;
	
	}
	
	
.cerrarfloresFloreros4Retro_2 .tooltip-content{
	left: 27%;
	width:200px;
	height:20px;
	position:relative;
	top:-7%;
	font-weight: bold;
	text-shadow: -1px 2px 2px #c3cacf;
    cursor: pointer;
	
	}
	
	
	
.cerrarfloresFloreros4Retro_2{
   font-weight: bold;
    height: 20px;
    padding-left:1px;
    position: relative;
    text-align: center;
    top: 22px;
    width: 198px;
	text-shadow: -1px 2px 2px #c3cacf;
    cursor: pointer;
	}
	
.recuerda{
	font-weight:bold;
	/*padding-left: 99px;*/
    text-align: center;
	}	
	
	
.floresFloreros4Nucleo .tooltip-content{
	background-image: url("../img/principal/globos_realimentacion/nucleo_ventana.png");
    color: white;
    font-size: 1em;
    height: 300px;
    padding-left: 101px;
    padding-top: 7px;
    width: 286px;
	line-height:23px;
	top: -834.9%;
	left: 598%;
	}

.floresFloreros4Electron .tooltip-content{
    background-image: url("../img/principal/globos_realimentacion/electrones.png");
    color: white;
    left: 780%;
    line-height: 22px;
    padding-left: 100px;
    padding-top: 8px;
    top: -910%;
    width: 307px;
    } 
	
.floresFloreros3true .contenido .boton{
	padding-left: 62px;
	}

	
.cerrarfloresFloreros4Nucleo{
    background: none repeat scroll 0 0 #74b2b8;
    color: #fff;
    font-size: 1.3em;
    padding: 10px;
    position: absolute;
    right: -9px;
    top: 1px;
	cursor: pointer;
    }
	
.NumerOxidacion{
	font-weight:bold;
	}	

	

	
.cerrarfloresFloreros4Electron{
    background: none repeat scroll 0 0 #74b2b8;
    color: #fff;
    font-size: 1.3em;
    padding: 10px;
    position: absolute;
    right: 11px;
    top: 1px;
    cursor: pointer;
}
	
.floresFloreros4DefAtomo .tooltip-content{
    background-image: url("../img/principal/globos_realimentacion/basal.png");
    color: white;
    line-height: 22px;
    padding-left: 85px;
    padding-top: 42px;
    width: 307px;
	
	}
span.floresFloreros4DefAtomo{
    left: 28%;
    top: 50%;
}
	
.cerrarfloresFloreros4DefAtomo{
	background: none repeat scroll 0 0 #74b2b8;
    color: #fff;
    font-size: 1.3em;
    padding: 10px;
    position: absolute;
    right: -13px;
    top: 17px;
    cursor: pointer;
	}	
	
.floresFloreros4Iones .tooltip-content{
    background-image: url("../img/principal/globos_realimentacion/recuadroYflecha.png");
    color: white;
    height: 600px;
    line-height: 23px;
    padding-left: 24px;
    padding-right: 112px;
    padding-top: 11px;
    width: 333px;
    font-size: 1em;
	}	

span.floresFloreros4Iones{
    left: 70%;
    top: 54%
}
	
	
	
	
.floresFloreros4Iones .boton{
    text-shadow: 2px 2px 3px #cbcbcb;
	padding-left: 292px;
    padding-top: 66px;

}

.tooltip-content .continuafase5{
   left: 48px;
    position: relative;
    top: 90px;

}
	
	
.contadorFase1:before{
    background-image:url(../img/principal/contadores/contador.png);
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 50px;
    left:73%;
    position: relative;
    top: 60%;
    width: 130px; 
	}
	
.contadorFase2:before{
	background-image:url(../img/principal/contadores/contador.png);
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 50px;
    left:73%;
    position: relative;
    top: 60%;
    width: 130px; 
	}
	
.contadorFase2 {
    top: 270px;
}

.divEstrategias .estrategias{
  background: #4A6B7E;
  background-image: -webkit-linear-gradient(top, #4A6B7E, #4C748A);
  background-image: -moz-linear-gradient(top, #4A6B7E, #4C748A);
  background-image: -ms-linear-gradient(top, #4A6B7E, #4C748A);
  background-image: -o-linear-gradient(top, #4A6B7E, #4C748A);
  background-image: linear-gradient(to bottom, #4A6B7E, #4C748A);
  -webkit-border-radius: 7;
  -moz-border-radius: 7;
  border-radius: 7px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 6px 16px 6px 16px;
  border: sólido #fff 2px;
  text-decoration: none;
  border-style: solid;
  border-color: #fff;
  border-width: 2px;
  position: relative;
  top: 18px;
    z-index: 50;
}

.divEstrategias .estrategiasClick{
  background: none repeat scroll 0 0 #c2c2cc;
  border-color: #e6e6f2;
  color: #e6e6f2;
  text-decoration: none;
}
	

/*experiemento para covalente, este sobreescribe*/
.divEstrategias .animacionCompuestos{
  /*  background: none repeat scroll 0 0 #A2A1BF;*/
    height: 90%;
    position: absolute;
    width: 100%;
    border-top: 2px solid #153346;
    top: 25px;
}

.divEstrategias{
    text-align: center;
}

.estrategiaOn{
    background: none repeat scroll 0 0 red;
}

/*animacion asigna estrategia 1*/

.asigaFormula11{
    position: relative;
    width: 100%;
    min-width: 748px;
    height: 40%;
  /*  background: #7C6182;*/
}

.asigaFormula11 span{
    display: block;
    position: absolute;
 /*   color: #034148;*/
}

.formulaAsigna11 .letraUno:before{  
    content: "2";
    display: block;
    font-size: 0.8em;
    height: auto;
    left: 57px;
    position: absolute;
    top: 29%;
    width: 70px;
   /* z-index: -1;*/
    -webkit-transition: all 1s ease 0.5s;
    -moz-transition: all 1s ease 0.5s;
    -o-transition: all 1s ease 0.5s;
    transition: all 1s ease 0.5s;

}

.formulaAsigna11 .letraUno_ON:before{  
    font-size: 0.4em;
    left: -192px;   
    top: 203%;   
}

.formulaAsigna11 .letraUnoBis_ON:before{  
    font-size: 0.4em;
    left: -190px;
    top: 203%;
}


.formulaAsigna11 .letraDos:before{  
    content: "1";
    font-size: 0.8em;
    opacity: 0;
    height: auto;
    left: 27px;
    position: absolute;
    top: 29%;
    width: 70px;
    -webkit-transition: opacity 0.5s linear 0s, font-size 1s linear 0.5s, top 1s linear 0.5s, left 1s linear 0.5s;
    -moz-transition:  opacity 0.5s linear 0s, font-size 1s linear 0.5s, top 1s linear 0.5s, left 1s linear 0.5s;
    -o-transition:  opacity 0.5s linear 0s, font-size 1s linear 0.5s, top 1s linear 0.5s, left 1s linear 0.5s;
    transition:  opacity 0.5s linear 0s, font-size 1s linear 0.5s, top 1s linear 0.5s, left 1s linear 0.5s;
}

.formulaAsigna11 .letraDos_ON:before{  
    font-size: 0.4em;
    left: -181px;
    opacity: 1;
    top: 203%;
}

.formulaAsigna11 .letraTres:before{  
    content: "4";
    font-size: 0.8em;
    height: auto;
    left: 59px;
    position: absolute;
    top: 29%;
    width: 70px;
    -webkit-transition: all 1s ease 0.5s;
    -moz-transition: all 1s ease 0.5s;
    -o-transition: all 1s ease 0.5s;
    transition: all 1s ease 0.5s;

}

.formulaAsigna11 .letraTres_ON:before{  
    font-size: 0.4em;
    left: -126px;
    top: 203%;
}



.asigaOxidacion11 .asigna_1a:before{  
    content: "Estado de oxidación del hidrógeno";
    font-size: 0.3em;
    opacity: 0;
    height: auto;
    left: -19px;
    position: absolute;
    top: 0%;
    width: 100px;
    z-index: -1;
    color: #123772;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.asigaOxidacion11 .asigna_1a_ON:before{  
    top: 108%;
    opacity: 1;
}

.asigaOxidacion11 .asigna_2a:before{  
    content: "Estado  de oxidación del azufre";
    font-size: 0.3em;
    height: auto;
    opacity: 0;
    left: -19px;
    position: absolute;
    top: 0%;
    width: 100px;
    z-index: -1;
    color: #E40B77;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.asigaOxidacion11 .asigna_2a_ON:before{  
    top: 108%;
    opacity: 1;
}

.asigaOxidacion11 .asigna_3a:before{  
    content: "Estado de oxidación del oxígeno";
    font-size: 0.3em;
    height: auto;
    left: -19px;
    opacity: 0;
    position: absolute;
    top: 0%;
    width: 100px;
    z-index: -1;
    color: #F5A101;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.asigaOxidacion11 .asigna_3a_ON:before{  
    top: 108%;
    opacity: 1;
}

.asigaOxidacion11 .asigna_1b:before{  
    content: "Estado de oxidación del hidrógeno";
    font-size: 0.3em;
    height: auto;
    left: -19px;
    opacity: 0;
    position: absolute;
    top: 0%;
    width: 100px;
    z-index: -1;
    color: #123772;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

div.ventana.ventanaAnima.ventanaAniones{
    left: 72%;
}



div.ventana.ventanaAnima:before{  
    background: none repeat scroll 0 0 #24637E;
    color: #fff;
    content: "Número de oxidación del onión sulfato";
    font-size: 1em;
    height: auto;
    left: -209px;
    padding: 6px;
    position: absolute;
    top: 492px;
    width: 217px;
    z-index: -1;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

div.ventana.ventanaAnima:after{  
    color: #fff;
    content: "-2";
    font-size: 2.5em;
    height: auto;
    left: -48px;
    opacity: 0;
    padding: 6px;
    position: absolute;
    top: 497px;
    width: auto;
    z-index: -1;
    -webkit-transition: opacity 1s linear 1s, color 1s linear 3s, top 1s linear 2s, left 1s linear 2s;
    -moz-transition:  opacity 1s linear 1s, color 1s linear 3s, top 1s linear 2s, left 1s linear 2s;
    -o-transition:  opacity 1s linear 1s, color 1s linear 3s, top 1s linear 2s, left 1s linear 2s;
    transition:  opacity 1s linear 1s, color 1s linear 3s, top 1s linear 2s, left 1s linear 2s;
}

div.ventana.ventanaAnima_ON:after{  
    opacity: 1;
    left: -204px;
    top: 268px;
    
}

.asigaOxidacion11 .asigna_1b_ON:before{  
    content: "Estado de oxidación del hidrógeno";
    font-size: 0.3em;
    height: auto;
    left: -19px;
    opacity: 0;
    position: absolute;
    top: 0%;
    width: 100px;
    z-index: -1;
    color: #123772;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.asigaOxidacion11 .asigna_1b_ON:before{  
    top: 108%;
    opacity: 1;
}

.asigaOxidacion11 .asigna_2b:before{  
    content: "Estado de oxidación del anión sulfato";
    font-size: 0.3em;
    height: auto;
    left: -19px;
    opacity: 0;
    position: absolute;
    top: 0%;
    width: 100px;
    z-index: -1;
    color: #F5A101;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.asigaOxidacion11 .asigna_2b_ON:before{  
    top: 108%;
    opacity: 1;
}

.formulaAsigna11 .letraUno.formCom_1{  
   left: -19px;
}


.formulaAsigna11 .letraDos.formCom_1{  
   left: 24%
}

.formulaAsigna11 .letraTres.formCom_1:before, .formulaAsigna11 .letraUno.formCom_2:before, .formulaAsigna11 .letraTres.formCom_2:before,
.formulaAsigna11 .letraUno.formCom_3:before, .formulaAsigna11 .letraTres.formCom_3:before,
.formulaAsigna11 .letraUno.formCom_4:before, .formulaAsigna11 .letraTres.formCom_4:before,
.formulaAsigna11 .letraUno.formCom_5:before, .formulaAsigna11 .letraTres.formCom_5:before,
.formulaAsigna11 .letraUno.formCom:before, .formulaAsigna11 .letraTres.formCom:before{  
    content: "";
    display: none;
}

.formulaAsigna11 .letraTres.formCom_1{  
   left: 76%
}

.nombreAsigna11{
   left: 10px;
   top: 29%;
   width: 25%;
   color: #034148;
}

.signoAsigna11{
   background: none repeat scroll 0 0 #a07abf;
   left: 71%;
   top: 38%;
   width: 25%;
}

.asigaOxidacion11{
    position: relative;
    width: 100%;
    min-width: 748px;
    height: 20%;
    top: -20px;
   /* background: #7A99BF;*/
}

.formulaAsigna11 .sinBefore:before, .formulaAsigna11.animaComp_2 span.sinBefore:before{
    content: "";
    display: block;

}

div.ecuacionOxidacion11 .factorOxiAzul {
    background: none repeat scroll 0 0 #00a5b2;
    border: medium solid white;
    box-shadow: -1px 2px 8px #325c60 inset;
    color: white;
    font-size: 2.3em;
    height: 57px;
    opacity: 0.94;
    text-align: center;
    top: 17%;
    width: 57px;
}

div.ecuacionOxidacion11 span {
   display: inline;
    float: left;
    height: 45px;
    left: 13%;
    margin: 2px;
    position: relative;
    text-align: center;
    top: 28%;
    width: 45px;
}

.ecuacionOxidacion11 .factorOxi.factorUno{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #123772;
    color: #123772;
    border-image: none;
    border-style: none none solid;
    border-width: medium;
    padding-right: 1px;
    right: 2%;
    width: 31px;
    font-size: 2.2em;
}
.ecuacionOxidacion11 .factorOxi.factorDos{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #e40b77;
    color: #e40b77;
    border-image: none;
    border-style: none none solid;
    border-width: medium;
    padding-right: 1px;
    right: 2%;
    width: 31px;
    font-size: 2.2em;
}

.ecuacionOxidacion11 .factorOxi.factorTres{
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #f7a201;
    color: #f7a201;
    border-image: none;
    border-style: none none solid;
    border-width: medium;
    padding-right: 1px;
    right: 2%;
    width: 31px;
    font-size: 2.2em;
}

.ecuacionOxidacion11 .factorOxi.simbolosSum{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    font-size: 3.3em;
    font-weight: bold;
    padding-right: 1px;
    right: 2%;
    text-shadow: -1px 1px 3px #595959;
    top: 19%;
    width: 31px;
    color: #fff;
}


.asigaOxidacion11 span, 
.asigaOxidacion11 input{
    position: absolute;
  /*  background: none repeat scroll 0 0 #BF84A3;*/
    display: inline;
    float: left;
    height: 60px;
    left: 40%;
    margin: 2px;
    position: relative;
    text-align: center;
    top: 28%;
    width: 60px;
}
/*
.asigaOxidacion11 div{
    background: none repeat scroll 0 0 white;
    display: block;
    left: 70%;
    position: absolute;
    top: 20%;
    cursor: pointer;
}
*/
.asigaOxidacion11 .factorOxiAzul{
    margin-right: 45px;
}

.asigaOxidacion11 .llave11_1{
   /* background: none repeat scroll 0 0 #fff;*/
    height: 60px;
    left: -16%;
    width: 100px;
}

.asigaOxidacion11 .llave11_1.llave11_1b{
    height: 60px;
    left: -23%;
    width: 100px;
}

.llave11_1 span{
    left: 81%;
    top: -90%;
}


.asigaOxidacion11 .llave11_1Anima1 {
    height: 60px;
    left: -15px;
    position: absolute;
    width: 100px;
}

.ecuacionOxidacion span.segundaLlave2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #153346;
    font-size: 5.4em;
    font-weight: bold;
    left: 90%;
    text-shadow: -4px 2px 3px #989b9c;
    top: -132%;
}
.ecuacionOxidacion11{
    position: relative;
    width: 100%;
    min-width: 748px;
    height: 20%;

}



.formulaAsigna11.animaComp_2 .letraTresBis:before {
    content: "4";
    font-size: 0.8em;
    height: auto;
    left: 119px;
    position: absolute;
    top: 29%;
    width: 70px;
    -webkit-transition: all 1s ease 0.5s;
    -moz-transition: all 1s ease 0.5s;
    -o-transition: all 1s ease 0.5s;
    transition: all 1s ease 0.5s;
}

.formulaAsigna11.animaComp_2 .letraTresBis_ON:before {
    font-size: 0.5em;
    left: -167px;
    top: 196%;
}


.ecuacionOxidacion11 span{
 /*   background: none repeat scroll 0 0 yellow;*/
    display: inline;
    float: left;
    height: 60px;
    left: 20%;
    margin: 2px;
    position: absolute;
    text-align: center;
    top: 28%;
    width: 60px;
}



.ecuacionOxidacion .llave11_2{
 /*   background: none repeat scroll 0 0 #fff;*/
    left: -13px;
    top: 24%;
    width: 100px;
    z-index: 800;
}

.ecuacionOxidacion .explica11{
    left: 6%;
    top: -28%;
    width: 30%;
}

.ecuacionOxidacion .explica11.explica11b{
    left: -31%;
    top: 9%;
    width: 30%;
}



div.ecuacionOxidacion11{
/*    background: none repeat scroll 0 0 #00ff00;*/
   height: 100px;
   margin: auto;
   min-width: 748px;
   width: 75%;

}


.explica11:before {
    background-image: url("../img/principal/formula/explica.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 97px;
    left: 9.6%;
    padding: 1px;
    position: relative;
    top: 196%;
    width: 315px;
}

div.ecuacionOxidacion11 .factorOxi{
    background: none repeat scroll 0 0 yellow;
    display: inline;
    float: left;
    height: 45px;
    left: 13.3%;
    margin: 2px;
    position: relative;
    text-align: center;
    top: 28%;
    width: 45px;
}



.testDiv.cuadrojercicios11{
   position: relative;
   height: 600px;
   width: 100%;
   background: black;

}


.letraUno{
    color:#123772;
    left: -7%;    
}

.letraDos{
    color:#E40B77;
    left: 42%;    
}

.letraTres{
    color:#F7A201;
    left: 67%;    
}

.letraTres.letraTresBis{
    color:#F7A201;
    left: 36%;    
}

.letraTres.animaForm{
    left: -12%;    
}

.animaForm.letraUno{
    left: -4%;    
}

.animaForm.letraParentesis{
    left: 0;    
}

.animaForm.parentesisCerrar{
    left: -16%;    
}

.animaForm.letra2SuperIndice{
    left: -23%;
    top: 1%;  
}

.llave11_1a span{
    left: 76%;
    top: -94%;
}

.letraUno:after{
    background-image: url("../img/principal/formula/sombra_anion.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 96px;
    left: -94px;
    position: absolute;
    top: 71%;
    width: 406px;
  
    }


/*
.contaDos .contaDer:after {
    background-image:url(../img/principal/contadores/covalente.png);
    content: "";
    display: block;
    height: 47px;
    left:91px;
    position: absolute;
    top:19%;
    width: 161px;
    z-index: -2;
	background-repeat:no-repeat;
}
	
.contaDos .contadorUC.contaDer {
    left: 254px;
}	
	
.contaDos .contadorUC.contaIzq {
    left:381px;
}*/
	
	/*
.contaDos .contadorUC.contaDer:after {
    background-image: url("../img/principal/union.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 135px;
    left:38px;
    position: absolute;
    top: -18%;
    width: 161px;
    z-index: -2;
}
	*/
/*.canvasClass .floresFloreros_4Canvas:after {
    background-image: url("../img/principal/union.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 135px;
    left: 38px;
    position: absolute;
    top: -18%;
    width: 161px;
    z-index: -2;
	}	
	*/
	
/*.contaDos .contadorUC.contaIzq:after {
    background-image: url("../img/principal/union.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 61px;
    left: 32px;
    position: absolute;
    top: -20%;
    width: 47px;
    z-index: 0;
}
*/
	
	
	
	
.animacion.noCovalente .contaDos .contadorUC.contaIzq:after, .animacion.noCovalente .contaDos .contadorUC.contaDer:after{
	background-image: url("../img/principal/union_rebajada.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 61px;
    left: 32px;
    position: absolute;
    top: -20%;
    width: 47px;
    z-index: 0;
	}
	
.animacion.covalente .contaDos .contadorUC.contaIzq:after{
    background-image: url("../img/principal/contadores/covalente.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 47px;
    left: -119px;
    position: absolute;
    top: 18%;
    width: 161px;
    z-index: -2;
	}
	
	
.floresFloreros4Iones .boton:after{
	background-image: url("../img/principal/FLECHAS/flecha_blanca_03.png");
    background-repeat: no-repeat;
    color: #fff;
    height: 100px;
    padding-left: 129px;
    padding-top: 22px;
    position: relative;
    text-shadow: 2px 2px 3px #595959;
    top: 3%;
    width: 170px;
    z-index: -1;
	}	
	
	

	
.nombreIonCompu{
    font-size: 1.1em;
    font-weight: bold;
    height: 100px;
    padding-left: 129px;
    padding-top: 22px;
    position: absolute;
    width: 170px;
    z-index: 881;
	color: #0a3e3e;
	}
	

.nombreIonCompu.nomIonSodio{
  left: 20%;
  top: 79%;
  
}


.textorv {
   color: #0a3e3e;
   }	

	
.nombreIonCompu.nomIoncloro{
  left: 36%;
  top: 79%;
  }	

.nombreIonCompu.nomIoncalcio{
  background-color: #c3c3c3;
  padding-left: 2px;
  padding-top: 2px;
  width: 54px;
  height: 26px;
  -moz-border-bottom-colors: none;
  -moz-border-top-colors: none;
  border-image: none;
  border-style: none solid;
  border-width: medium 2px;
  border-color:#8091A0;
  left: 2.3%;
  top: 35.5%;
}

.nombreIonCompu.nomIoncalcio.classNomIon{
  left: 2.3%;
  top: 35.5%;
}
    
.nombreIonCompu.nomIoncloro_1{
     -moz-border-bottom-colors: none;
    -moz-border-top-colors: none;
    background-color: #c3c3c3;
    border-image: none;
    border-style: none solid;
    border-width: medium 2px;
    height: 20.5px;
    left: 51.8%;
    padding: 1.8px;
    top: 50.7%;
    width: 40px;
	border-color:#8091A0;
  }   
.nombreIonCompu.nomIoncloro_1.classNomIon{
  left: 51.8%;
  top: 51.5%;
}

.nombreIonCompu.nomIoncloro_2{
  left: 74.2%;
  top: 47%;
}   
.nombreIonCompu.nomIoncloro_2.classNomIon{
  left: 70.3%;
  top: 39.5%;
}

.nombreIonCompu.nomIonnitro{
    height: 30px;
    left: 34.5%;
    padding: 1px;
    top: 62.6%;
    width: 83px;
    z-index: 0;
}   





.contaCuatro .contadorUC.conta_6_3:after{
    background-image: url("../img/principal/contadores/nitrogeno.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 71px;
    left: -55px;
    position: absolute;
    top: 82.9%;
    width: 130px;
    z-index: 0;
}	
	


.nombreIonCompu.nomIonlitio_1{
    height: 20px;
    left: 24.5%;
    padding: 1px;
    top: 24.2%;
    width: auto;
}
    
.nombreIonCompu.nomIonlitio_2{
    height: 20px;
    left: 57.8%;
    padding: 1px;
    top: 24.4%;
    width: auto;
}   

.nombreIonCompu.nomIonlitio_3{
    height: 20px;
    left: 91.2%;
    padding: 1px;
    top: 24.3%;
}  

.nombreIonCompu.nomIonlitio_1.classNomIon,.nombreIonCompu.nomIonlitio_2.classNomIon, .nombreIonCompu.nomIonlitio_3.classNomIon{
    top: 21.1%;
    font-size: 1em;
}

.nombreIonCompu.nomIonlitio_1.classNomIon{
    left: 23.1%;
}

.nombreIonCompu.nomIonlitio_2.classNomIon{
    left: 56.8%;
}

.nombreIonCompu.nomIonlitio_3.classNomIon{
    left: 90%;
}

.nombreIonCompu.classNomIon{
    top: 63%;
    width: auto;
    font-size: 1em;
}



.formulaIonCompu{
    height: auto;
    padding-left: 145px;
    padding-top: 22px;
    position: absolute;
    width: 170px;
    z-index: 881;
	color:#0a3e3e;
	font-weight:bold;
	
}

.formulaIonCompu.formIonSodio{
  left: 21%;
  top: 74%;
}
    
.formulaIonCompu.formIoncloro{
  font-weight: bold;
  top: 73.9%;
  left: 34%;
}

.formulaIonCompu.formIoncalcio{
    font-size: 1.2em;
    font-weight: bold;
    height: 1px;
    left: 0.9%;
    padding: 23px;
    top: 27%;
    width: 21px;
  }
  
    
.formulaIonCompu.formIoncloro_1{
    /*background: none repeat scroll 0 0 red; este era el que estaba tapando al electron por eso no servia*/
    font-size: 1.2em;
    height: 35px;
    left: 52%;
    padding-left: 1px;
    padding-top: 1px;
    top: 47.4%;
    width: 36px;
}
.formulaIonCompu.formIoncloro_2{
    color: #0a3e3e;
    font-size: 1.1em;
    left: 74%;
    margin-left: 145px;
    padding-left: 0;
    top: 43.7%;
  
}


.formulaIonCompu.formIonnitro{
    font-size: 1.3em;
    height: 20px;
    left: 46.5%;
    padding: 1px;
    top: 60.3%;
    width: 20px;
}



.formulaIonCompu.formIonlitio_1{
    color: #0a3e3e;
    font-size: 1.3em;
    height: 23px;
    left: 24.9%;
    padding-left: 0;
    padding-top: 10px;
    position: absolute;
    top: 26.8%;
    width: 20px;
    z-index: 881;
	}
    
	
.formulaIonCompu.formIonlitio_2{
    color: #0a3e3e;
    font-size: 1.3em;
    height: 23px;
    left: 24.9%;
    padding-left: 0;
    padding-top: 10px;
    position: absolute;
    top: 26.8%;
    width: 20px;
    z-index: 881;
    left: 59.4%;

}


.formulaIonCompu.formIonlitio_3{
    height: 20px;
    left: 92.4%;
    padding: 1px;
    top: 27.8%;
    width: 20px;
	font-size: 1.3em;
    position: absolute;
    width: 20px;
    z-index: 881;
}



.cambioAnima{
	    font-size: 1.3em;
	}
	
	
	
.floresFloreros5Instruccion .tooltip-content{
    padding-left: 80px;
    padding-right: 123px;
    padding-top: 70px;
    text-align: left;
    top: -664.9%;
    width: 176.6px;
}
	
.floresFloreros5Instruccion .tooltipActivo .tooltip-content {
	background:red;
}	

.tooltip-content.floresFloreros5Retro_2Dial, .tooltip-content.ecuacionOxidacion_12_RespuestaDial{
    background-image: url("../img/principal/globos_realimentacion/globo_simetrico.png");
    background-repeat: no-repeat;
    color: #034148;
    cursor: default;
    font-size: 1.1em;
    height: 246px;
    line-height: 1.4;
    margin: 0 0 20px -180px;
    opacity: 0;
    padding-left: 46px;
    padding-right: 23px;
    padding-top: 59px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    top: -664.9%;
    width: 306px;
    z-index: 9999;
}

.tooltip-content.retro_2DialEX{
    background-image: url("../img/principal/globos_realimentacion/globo_simetricoEX.png");
    background-repeat: no-repeat;
    color: #034148;
    cursor: default;
    font-size: 1.3em;
    height: 309px;
    line-height: 1.3;
    margin: 0 0 20px -180px;
    opacity: 0;
    padding-left: 36px;
    padding-top: 60px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    top: -664.9%;
    width: 441px;
    z-index: 9999;
}

.tooltip-content.floresFloreros5Retro_2DialGde, .tooltip-content.ecuOxi12_1_retro1Cof2,
.tooltip-content.ecuOxi12_2_retro1Cof1, .tooltip-content.ecuOxi12_5_retro1Cof2{
    background-image: url("../img/principal/globos_realimentacion/globo_simetrico.png");
    background-repeat: no-repeat;
    color: #034148;
    cursor: default;
    font-size: 1em;
    height: 251px;
    line-height: 1.4;
    margin: 0 0 20px -180px;
    opacity: 0;
    padding-left: 46px;
    padding-right: 29px;
    padding-top: 54px;
    pointer-events: none;
    position: absolute;
    text-align: left;
    width: 309px;
    z-index: 9999;
}	
	

.contaCuatro .contadorUC.conta_6_0:after{
	background-image: url("../img/principal/union_rebajada_litio1.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 24px;
    left: 22px;
    height: 61px;
    left: 26px;
    position: absolute;
    width: 47px;
    z-index: 0;
	top: -27%;
}	

/*fase 12*/
.introOpaco12_intro{
    /*background: none repeat scroll 0 0 rgba(227,227,227, 0.8);*/
    background: url("../img/principal/tablas/lineas_introducion.png") no-repeat scroll 0 0 rgba(167,181,180, 0.8);
    height: 116%;
    position: absolute;
    top: -100px;
    width: 100%;
    z-index: 100;
}

.headerVentanaFase12_intro{
    background: none repeat scroll 0 0 #3494cd;
    box-shadow: 5px 4px 4px #b7b8b7;
    color: white;
    left: 9%;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 26%;
    width: 41%;
    z-index: 1;
}

.headerVentanaFase12_intro span{
    display: block;
    font-weight: bold;
}

.bodyVentanaFase12_intro{
    background: none repeat scroll 0 0 #4A8ECB;
    height: 28%;
    left: 10%;
    padding: 27px 15px;
    position: absolute;
    top: 31%;
    width: 39%;
    z-index: 1;
}

.siguienteVentanaFase12_introOff{
    background: none repeat scroll 0 0 #7abcbf;
    box-shadow: 5px 4px 4px #b7b8b7;
    color: white;
    left: 36%;
    opacity: 0;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    top: 49%;
    width: 150px;
    z-index: 800;
    cursor: pointer;
}


.siguienteVentanaFase12_introOn{
    opacity: 1;
    -webkit-transition: opacity 0.5s ease 0s;
    -moz-transition: opacity 0.5s ease 0s;
    -o-transition: opacity 0.5s ease 0s;
    transition: opacity 0.5s ease 0s;

}




.contaCuatro .contadorUC.conta_6_1:after {
    background-image: url("../img/principal/union_rebajada_litio1.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 51px;
    left: 25px;
    position: absolute;
    top: -27%;
    width: 47px;
    z-index: 0;
}


.contaCuatro .contadorUC.conta_6_2:after {
    background-image: url("../img/principal/union_rebajada_litio1.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 54px;
    left: 25px;
    position: absolute;
    top: -27%;
    width: 47px;
    z-index: 0;
}



	
	

.contaTres:after {
    background-image: url("../img/principal/union.png");
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    height: 91px;
    left: 17px;
    position: relative;
    top: 152px;
    width: 47px;
    z-index: -15;
	
}
	
	
.contaTres .contadorUC.conta_5_1:after {
	background-image: url("../img/principal/union.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 111px;
    left: 29px;
    position: absolute;
    top: 82%;
    width: 47px;
    z-index: -1;
}
	

.contaTres .contadorUC.conta_5_2:after {
    background-image: url("../img/principal/union_rebajada.png");/*union rebajada en cloro cuando interactuan 3 atomos*/
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 60px;
    left: 22px;
    position: absolute;
    top: -38%;
    width: 47px;
    z-index: 0;
}
	
.tooltip-content.contentNombreComp_5.nombreCompuestos{ /*esta clase me la puso yess para el compuesto*/
	color:#FFF;
	font-weight:bold;
	font-size: 1.1em;
	line-height: 1.4;
    margin: 0 0 50px -180px;
	padding-right: 23px;
	padding-top: 20px;
	padding-left:120px;
	}
	
.tooltip-content.floresFloreros5Retro_2	{
	background-image:url(../img/principal/globos_realimentacion/globo_simetrico.png);
	 width: 297px;
	}
	
	
.cerrarfloresFloreros5Instruccion{
	color: white;
    font-weight: bold;
    height: 30px;
    position: absolute;
    right: 84px;
    top: 19px;
    width: 30px;
    cursor: pointer;
	}	


	
.floresFloreros5True .tooltip-content{
	   padding-left:36px;
	   width: 255px;
	}
	
	

.floresFloreros5True .tooltip-content .ok1{
	padding-left: 80px;
	}	
	
	

.floresFloreros5True.contenido .boton{
	padding-left:39px;
	} 	

.cerrarfloresFloreros5Respuesta, .centrarSpanNegritas, .cerrarfloresFloreros6_X, .cerrarVerSig_10 , .cerrarVerSig_12{
    display: block;
    font-weight: bold;
    text-align: center;
}

.tooltip-content.floresFloreros6Retro_2{
    padding-left: 39px;
    padding-top: 42px;
    width: 245px;

}

.cerrarDial_5{
    position: absolute;
    right: 86px;
    top: 20px;
    cursor: pointer;
}

.cerrarDial_5Gde{
      color: white;
    font-weight: bold;
    position: absolute;
    right: 30px;
    top: 20px;
    cursor: pointer;
}
	
.cerrarEcuOxi_10{
    color: white;
    font-weight: bold;
    position: absolute;
    right: 45px;
    top: 20px;
    cursor: pointer;
}

.cerrarEcuOxi_10.cerrarecuacionOxidacion_12_explicacion2{
    color: #034148;
    font-weight: bold;
    position: absolute;
    right: 18px;
    top: 35px;
    cursor: pointer;
}
	

.contenido.asigna, header, .foother{	
  background: -webkit-radial-gradient(#F0F0F1, #A7B1B7); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(#F0F0F1, #A7B1B7); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(#F0F0F1, #A7B1B7); /* For Firefox 3.6 to 15 */
  background: radial-gradient(#F0F0F1, #A7B1B7); /* Standard syntax */
  }
  
  
.contenido, header, .foother{
	background:#e5e7e4;
	}
  
  
.floresFloreros_10 .contenido.asigna, header.asigna, .foother{
   /*background: radial-gradient(#f0f0f1, #BCC4C8) repeat scroll 0 0 rgba(0, 0, 0, 0);
   
  background: -webkit-linear-gradient(#ABB5BB, #BCC4C8); /* For Safari 5.1 to 6.0 */
  /*background: -o-linear-gradient(#ABB5BB, #BCC4C8); /* For Opera 11.1 to 12.0 */
  /*background: -moz-linear-gradient(#ABB5BB, #BCC4C8); /* For Firefox 3.6 to 15 */
  /*background: linear-gradient(#ABB5BB, #BCC4C8); /* Standard syntax */
  background-image:url(../img/principal/formula/FondoHeaderUltimo.png);

}
	  
  

.contenido .ventana.ventanaAniones{
    background-image: url("../img/principal/formula/tablaDeAniones.png");
    background-repeat: no-repeat;
/*    border: 1px solid #000;
    box-shadow: 0 2px 3px #666666;*/
    height: 633px;
    left:245px;
    margin: auto;
    padding: 20px;
    position: absolute;
    right: 0;
    top: 3px;
    width:307px;
    z-index: 55;
	background-color:none;
    -webkit-transition: all 200ms linear 0s;
    -moz-transition: all 200ms linear 0s;
    -o-transition: all 200ms linear 0s;
    transition: all 200ms linear 0s;


}

.contenido .ventana.ventanaAniones .btn-close {
    background: none repeat scroll 0 0 #f5f5f6;
    border-radius: 0;
    color: #046b6b;
    font-weight: bold;
    height: 26px;
    position: absolute;
    right: 21px;
    text-align: center;
    text-decoration: none;
    top: 83px;
    width: 26px;
    z-index: 45;
    box-shadow: 0 0 0 #000000;
}



.verTablaAnion.boton{
    background-image: url("../img/principal/formula/boton_tablaDeAniones.png");
    background-repeat: no-repeat;
    height: 92px;
    left: 88%;
    padding-left: 29px;
    padding-top: 57px;
    position: absolute;
    top: 6%;
    width: 89px;
    z-index: 5;
    color: #fff;
	}

.verTablaAnion span{
    font-size: 12px;
    left: 39px;
    line-height: 1;
    position: absolute;
    top: 68px;
    width: 57%;
}

.correcciones{
    color: red;
}

.botonSiguiente_gral{
    background-image: url("../img/principal/continua.png");
    background-repeat: no-repeat;
    color: white;
    font-weight: bold;
    height: 37px;
    opacity: 1;
    padding: 4px 32px 10px 8px;
    position: absolute;
    right: 95px;
    top: 75%;
    width: 200px;
    z-index: 999;
    cursor: pointer;
}

.botonSiguiente_gral.botonSiguiente_gral_7, .botonSiguiente8.botonSiguiente_gral, .botonSiguiente_gral.botonSiguiente_gral_8{
    right: -103px;
}

.botonAnterior.botonAnterior_7{
    right: 95px;
    top: 82%;
}

/*
.botonVerifica11.botonVerifica12_1{
    background-image: url("../img/principal/formula/verificarBoton.png");
    height: 60px;
    position: relative;
    width: 129px;
	}
*/


.tooltip-content.clearfix.tablas7_2a_2 span.dialogosSpan{
    display: inline-block;
    left: 20px;
    position: relative;
    top: 10px;
    width: 237px;
}

.tooltip-content.clearfix.tablas7_6a_2 span.dialogosSpan{
     display: inline-block;
    left: 20px;
    position: relative;
    top: 10px;
    width: 255px;
}

.tooltip-content.clearfix.tablas7_4a_2 span.dialogosSpan{
     display: inline-block;
    left: 20px;
    position: relative;
    top: 10px;
    width: 255px;
}

.cerrarecuacionOxidacion_1_VER, .cerrarecuacionOxidacion_1_Respuesta,
.cerrarecuacionOxidacion_12_VER, .cerrareecuacionOxidacion_12_Respuesta,
.verAnimacion_4, .btnStyle{
    border: 1px solid gray;
    border-radius: 17px;
    padding-left: 20px;
    padding-right: 20px;
    top: 30px;
    width: 67px;
    background: #ebf3eb none repeat scroll 0 0;
    border: 0.5px solid #7a9aaf;
    box-shadow: 1px 0 3px 1px #aaa79d;
    cursor: pointer;
    color: #163346;
    text-align: center;
}

.verAnimacion_4{
    margin: auto;
}

.cerrarecuacionOxidacion_1_VER, .cerrarecuacionOxidacion_1_Respuesta{
    position: relative;
}


.conclusion_izq {
    float: left;
    margin-left: 10%;
    width: auto;
}



.imgConclu{

     width: 300px;
}
/* 
 * ==========================
 * === Responsive 
 * ==========================
 */

/* estilos aplican en width < 1280px  (Android 10" landscape) */
@media screen and (max-width: 1280px) {
    
    /* ====================================
     * Incluir aqui los estilos
     * a los elementos que cambiaran. 
     * Los que siguen son solo de ejemplo
     * ====================================
     */
    
    .displayWidth {
        background: none;
    }
    .w1280 {
        display: inline-block;
        background-color: yellow;
    }

}

/* estilos aplican en width < 1024px  (iPad landscape) */
@media screen and (max-width: 1024px) {

    /* ====================================
     * Incluir aqui los estilos
     * a los elementos que cambiaran. 
     * Los que siguen son solo de ejemplo
     * ====================================
     */
    
    .displayWidth {
        background: none;
    }
    .w1024 {
        display: inline-block;
        background-color:  yellow;
    }

}

/* estilos palican width < 768px (iPad, Android portrait)*/
@media screen and (max-width: 768px) {
    /* ====================================
     * Incluir aqui los estilos
     * a los elementos que cambiaran. 
     * Los que siguen son solo de ejemplo
     * ====================================
     */
    
    .header .nombre_objeto {
        font-size: 20px; /* pixel fallback */
        font-size: 1.25rem;
    }
    
    .displayWidth {
        background: none;
    }
    .w768 {
        display: inline-block;
        background-color:  yellow;
    }

    /*Nuevo 27 marzo*/


    img.imgPortada {
        /*height: 100%;*/
        left: 10px;
        position: relative;
        top: 133px;
        width: 100%;
    }


.contenido .btn-icono[data-params="menuPrincipal;.oacontext"] {
    
    top: 86%;
}

.contenido .fase {
    min-height: 1024px;
   
}

.tituloPortada {
    color: #0a3e3e;
    font-family: 'firasans-ExtraBold-webfont';
    font-size: 1.8em;
    font-weight: bold;
    left: 30.7%;
    position: absolute;
    text-shadow: -1px 3px 0.3px #fafaf9;
    top: 70px;
    z-index: 100;
}


.botonEntrar {
    
    font-size: 1.1em;
    left: 58%;    
    top: 51.6%;
}

.botonAsignar {
    top: 54.7%;
    width: 108px;
    left: 90%;
}

.botonumeroDeOxidacion {
   
    top: 50%;
}


.botonReglas {
   
    left: 90%;
   
    top: 37.2%;
   
}


}/*fin del query*/