/***
 * sirven como referencia para
 * transiciones y estilo en el menu principal en caso de que exista
 *
 */

/*************************
 *tipografia de apoyo
 */
@font-face {
	font-family: 'OpenSans-Light-webfont';
	src: url('../fonts/OpenSans-Light-webfont.eot');
	src: url('../fonts/OpenSans-Light-webfontd41d.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Light-webfont.svg#cabndwebbold') format("svg");
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'OpenSans-Regular-webfont';
	src: url('../fonts/OpenSans-Regular-webfont.eot');
	src: url('../fonts/OpenSans-Regular-webfontd41d.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Regular-webfont.svg#cabndwebbold') format("svg");
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'OpenSans-Semibold-webfont';
	src: url('../fonts/OpenSans-Semibold-webfont.eot');
	src: url('../fonts/OpenSans-Semibold-webfonteotd41d.html?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'), url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Semibold-webfont.svg#cabndwebbold') format("svg");
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
	font-stretch: normal;
}
 
@font-face {
	font-family: 'arimo-regular';
	src: url('../fonts/arimo-regular.eot');
	src: url('../fonts/arimo-regulard41d.eot?#iefix') format('embedded-opentype'), url('../fonts/arimo-regular.woff') format('woff'), url('../fonts/arimo-regular.ttf') format('truetype'), url('../fonts/arimo-regular.svg#cabndwebbold') format("svg");
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-stretch: normal;
}
/*
ARITMO
 http://www.fontsquirrel.com/fonts/open-sans?q%5Bterm%5D=open+sans&q%5Bsearch_check%5D=Y

 Apache License v2.00

 This license can also be found at this permalink: http://www.fontsquirrel.com/license/open-sans

 Apache License
 Version 2.0, January 2004
 http://www.apache.org/licenses/

 */
/**********************************************/
body {
	background: #b6b8b3; /* Old browsers */
	background: -moz-linear-gradient(0deg, #E0E0E0 16%, #CFCFCF 61%, #F5F5F5 86%, #FFFFFF 98%) repeat scroll 0 0 rgba(255, 255, 255, 0); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(16%,#E0E0E0), color-stop(61%,#CFCFCF), color-stop(86%,#F5F5F5), color-stop(98%,#FFFFFF)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg, #E0E0E0 16%,#CFCFCF 61%,#F5F5F5 86%,#FFFFFF 98%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg,  #E0E0E0 16%,#CFCFCF 61%,#F5F5F5 86%,#FFFFFF 98%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg,  #E0E0E0 16%,#CFCFCF 61%,#F5F5F5 86%,#FFFFFF 98%); /* IE10+ */
	background: linear-gradient(0deg, #E0E0E0 16%, #CFCFCF 61%, #F5F5F5 86%, #FFFFFF 98%) repeat scroll 0 0 rgba(255, 255, 255, 0); /* W3C */
}
.contenido {
	font-family: Arial, Helvetica, sans-serif;
}

.ventana.ventanaFC.creditos {
    bottom: 0;
    height: 292px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 196px;
}

.ventana.ventanaFC.fichaDidactica {
    bottom: 0;
     height: 381px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 196px;
}
/*********************controles de resposividad horizontal*/
.contenido .responsivohorizontal {
	height: 697px;
	margin: auto;
	position: relative;
	width: 1024px;
}

/*******principio de formato de objeto*/
.contenido .btn-icono {
	height: 38px;
	background-position: center center;
	display: inline-block;
	text-indent: -9999px;
	text-align: left;
	width: 38px;
}

.contenido .btn-icono:hover {
	opacity: 1;
}

.contenido .fase.conmenu {

}

.contenido .menuPrincipal.left .ocultar-btn {
	height: 44px;
	position: absolute;
	width: 44px;
}
.contenido .menuPrincipal.left.oculto {
	transform: scale(0,1) translate3d(0,0,0);
	-webkit-transform: scale(0,1) translate3d(0,0,0);
	-ms-transform: scale(0,1) translate3d(0,0,0);
	width: 0;
}
.contenido .menuPrincipal .ocultar-btn {
	background-image: url("../img/general/menuPrincipal.png");
	background-position: 1px 0;
	background-repeat: no-repeat;
	display: block;
	left: 2px;
	text-align: center;
	text-indent: -9999px;
	top: -64px;
}

.contenido .menuPrincipal .ocultar-btn span {
	display: block;
	line-height: 12px;
	margin: -6px auto 0;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
}
.contenido .menuPrincipal.left .innerMenu {
	background: none repeat scroll 0 0 rgba(164, 207, 165, 0.47);
	border: 1px solid #225234;
	height: 178px;
	width: 46px;
}
.contenido .menuPrincipal .innerMenu:after {
	background: url("../img/general/pico.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	content: "";
	height: 22px;
	left: 15px;
	position: absolute;
	top: -15px;
	width: 16px;
}
.contenido .menuPrincipal.left .innerMenu.oculto {
	height: 0px;
	opacity: 0;
	transition: 200ms linear;
	-webkit-transition: 200ms linear;
	width: 56px;
}
.contenido .menuPrincipal.left .innerMenu.oculto + .ocultar-btn {
}
.contenido .menuPrincipal .innerMenu > a {
	display: block;
	height: 41px;
	margin-bottom: 15px;
	margin-left: 2px;
	margin-top: 15px;
	text-indent: -3000px;
	width: 41px;
}
.contenido .menuPrincipal.left .menu-inicio {
	background: url("../img/general/home.png") no-repeat;
}
.contenido .menuPrincipal.left .menu-vinculoC {
	background: url("../img/general/vinculo.png") no-repeat;
}
.contenido .menuPrincipal.left .menu-creditos {
	background: url("../img/general/creditos.png") no-repeat;
}

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

 /*****************MENU DE OBJETO********************************************************************/

/* el menu mide el lado azul
 * 200px de largo
 * cada recuadro mide 40px
 *
 *
 * el menu verde
 * 80px de largo
 * cada recuadro mide 40px
 */

.contenido .ulMenu {
	margin: 0;
	padding: 0;
}
.contenido .liMenu {
	color: #25556F;
	float: left;
	height: 40px;
	overflow: hidden;
	text-align: center;
	width: 150px;
}
.contenido .ulMenu p {
	height: 40px;
	margin: 0;
}
.contenido .menuDes {
	line-height: 40px;
	position: absolute;
	right: 127px;
	top: 2px;
	z-index: 50;
	-webkit-transform: translatez(2px);
    -moz-transform: translatez(2px);
    -ms-transform: translatez(2px);
    -o-transform: translatez(2px);
    transform: translatez(2px);
}

.contenido .liMenu a {
	background-position: 9px center;
	color: #2D5F95;
	display: block;
	height: 42px;
	text-align: left;
	text-decoration: none;
	text-indent: 49px;
}
/*Menu Color Classes*/

.contenido .green {
	background: #C5DFF8;
	border-right: 5px solid #0E61B8;
}
.contenido .yellow {
	background: none repeat scroll 0 0 #C4E6CB;
	border-left: 5px solid #529D59;
}
.contenido .green a {
	border-bottom: 2px solid #B6D5F5;
}
.contenido .yellow  a {
	border-bottom: 2px solid #B9DCAC;
}
.contenido .green a:hover {
	background-color: #84C8FF;
}
.contenido .yellow a:hover {
	background-color: #8ACB72;
}
/***************FIN MENU DE OBJETO*/
.contenido .fase {
	background: #F7F7F7;
	box-shadow: -1px 37px 21px -8px #B1B1B1;
}
/**********************
 * portada
 ***********/
.contenido .portada .contenedorEstatico {
	position: absolute;
	right: 97px;
	top: 235px;
}

.contenido .portada {
	background: #F7F7F7;
}

.enportada {
	background: #F7F7F7;
}
.contenido .portada .titulo {
	color: #3D413C;
	display: inline-block;
	font-weight: normal;
	left: -19px;
	margin-top: 33px;
	position: relative;
	width: 680px;
}
.contenido .portada .titulo .parteuno {
	color: #3D413C;
	font-size: 2.4em;
	font-weight: normal;
	left: 78px;
	position: relative;
}
.contenido .portada .titulo .partetres {
	background: url("../img/red_line.png") no-repeat scroll right top rgba(0, 0, 0, 0);
    color: #2D2F2C;
    display: inline-block;
    font-family: Helvetica,Arial,Verdana,Geneva,sans-serif;
    font-size: 1.56em;
    left: 331px;
    line-height: 55px;
    position: relative;
    top: 9px;
}
.contenido .r_verde {
	font-size: 1em;
	height: 60px;
	line-height: 60px;
	width: 60px;
	border: 3px solid #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 0 5px #454545;
	font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
	padding: 4px;
	position: relative;
	text-align: center;
	text-shadow: 2px 0 3px rgba(255, 254, 254, 0.41);
}
.contenido .r_verde.azufre {
	color: #999799;;
	display: inline-block;
	background: #2D2D2D; /* Old browsers */
	background: -moz-linear-gradient(0deg,  #5F5C5C 21%,  #030203 71%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(21%, #5F5C5C), color-stop(71%, #030203)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg, #5F5C5C 21%, #030203 71%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg, #5F5C5C 21%, #030203 71%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg, #5F5C5C 21%, #030203 71%); /* IE10+ */
	background: linear-gradient(0deg, #5F5C5C 21%,  #030203 71%); /* W3C */
}
.contenido .r_verde.nitrogeno {
	 color: #5F1D27;
	display: inline-block;
	background: #D15068;/* Old browsers */
	background: -moz-linear-gradient(0deg, #D15068 21%, #DE9FAC 71%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(21%, #D15068), color-stop(71%,#DE9FAC)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg, #D15068 21%, #DE9FAC 71%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg, #D15068 21%,#DE9FAC 71%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg, #D15068 21%,#DE9FAC 71%); /* IE10+ */
	background: linear-gradient(0deg, #D15068 21%, #DE9FAC 71%) repeat scroll 0 0 rgba(0, 0, 0, 0); /* W3C */
}
.contenido .r_verde.flour {
	color: #6F4911;
	display: inline-block;
	background: #237100; /* Old browsers */
	background: -moz-linear-gradient(0deg, #C1B51D 21%, #F9EB35 71%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(21%, #C1B51D), color-stop(71%,#F9EB35)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg, #C1B51D 21%, #F9EB35 71%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg, #C1B51D 21%,#F9EB35 71%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg, #C1B51D 21%,#F9EB35 71%); /* IE10+ */
	background:  linear-gradient(0deg, #C1B51D 21%, #F9EB35 71%) repeat scroll 0 0 rgba(0, 0, 0, 0);/* W3C */
}
.contenido .r_verde:after {
	border-radius: 50%;
	color: #FFFFFF;
	content: "";
	position: absolute;
}
.contenido .r_verde.azufre:after {
	background: none repeat scroll 0 0 #999799;
	box-shadow: 5px 0 5px #454545;
	color: #252824;
	content: "16";
	font-size: 0.4em;
	height: 27px;
	line-height: 27px;
	right: -8px;
	top: -4px;
	width: 27px;
}
.contenido .r_verde.nitrogeno:after {
	background: none repeat scroll 0 0  #5F1D27;
	box-shadow: 5px 0 5px #454545;
    color: #F1B7C8;
	content: "9";
	font-size: 0.4em;
	height: 27px;
	line-height: 27px;
	right: -8px;
	top: -4px;
	width: 27px;
}
.contenido .r_verde.flour:after {
	 background: none repeat scroll 0 0 #6F4911;
	box-shadow: 5px 0 5px #454545;
	color: #F5EE4A;
	content: "7";
	font-size: 0.4em;
	height: 27px;
	line-height: 27px;
	right: -8px;
	top: -4px;
	width: 27px;
}

/*****************************************PARTICULA*/
.contenido .portada .cta-block {
	background: none repeat scroll 0 0 #FFFFFF;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
	overflow: hidden;
}
.contenido .portada .cta-block.build-promo {

	background: #F7F7F7;
}

.contenido .portada .particula1 {
	left: 55px;
	position: absolute;
	top: 49%;
}
.contenido .portada .particula2 {
	left: 200px;
	position: absolute;
	top: 533px;
}
.contenido .portada .particula3 {
	left: 491px;
	position: absolute;
	top: 102px;
}
.contenido .portada .particula4 {
	left: 779px;
	position: absolute;
	top: 97%;
}
.contenido .portada .cta-block.build-promo .particula1, .particula3, .particula5 {
	-webkit-animation: animate-bot 3s ease-in-out infinite;
	-moz-animation: animate-bot 3s ease-in-out infinite;
	-ms-animation: animate-bot 3s ease-in-out infinite;
	-o-animation: animate-bot 3s ease-in-out infinite;
	animation: animate-bot 3s ease-in-out infinite;
}

.contenido .portada .cta-block.build-promo .particula2, .particula4 {
	-webkit-animation: animate-bot 5s ease-in-out infinite;
	-moz-animation: animate-bot 5s ease-in-out infinite;
	-ms-animation: animate-bot 5s ease-in-out infinite;
	-o-animation: animate-bot 5s ease-in-out infinite;
	animation: animate-bot 5s ease-in-out infinite;
}

@-webkit-keyframes animate-bot{
from {
	margin-top: -120px;
}
50%{margin-top:-110px;}
to {
	margin-top: -120px;
}
}
@-moz-keyframes
animate-bot {from{
	margin-top: -120px;
} 50%{margin-top:-110px;}
to {
	margin-top: -120px;
}}
@-ms-keyframes
animate-bot {from{
	margin-top: -120px;
} 50%{margin-top:-110px;}
to {
	margin-top: -120px;
}}
@-o-keyframes
animate-bot {from{
	margin-top: -120px;
} 50%{margin-top:-110px;}
to {
	margin-top: -120px;
}}
.animate-bot-key from {
	margin-top: -120px;
}

@-webkit-keyframes animate-cloud{
from {
	background-position: 630px 100%;
}
to {
	background-position: 394px 100%;
}
}
@-moz-keyframes
animate-cloud {from{
	background-position: 1024px 100%;
}
to {
	background-position: 0 100%;
}}
@-ms-keyframes
animate-cloud {from{
	background-position: 1024px 100%;
}
to {
	background-position: 0 100%;
}}
@-o-keyframes
animate-cloud {from{
	background-position: 1024px 100%;
}
to {
	background-position: 0 100%;
}}
.animate-cloud-key from {
	background-position: 1024px 100%;
}

.contenido .portada .contenedorBotones {
	border-left: 4px solid #B5C8DC;
	float: right;
	height: 199px;
	width: 24%;
}
.contenido .portada .contenedorBotones a {
	color: #40453D;
	color: #505355;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 114px;
	text-align: left;
	text-indent: 101px;
}
.contenido .portada .contenedorBotones .btnIntroduccion {
	background: url("../img/intro.png") left center no-repeat;
}

.contenido .portada .contenedorBotones .btnEjercicios {
	background: url("../img/ejercicios.png") left center no-repeat;
}
/*faseComic*/
.contenido .faseComic .comic {
	position: absolute;
	left: 0px;
	top: 50px;
	overflow: hidden;
	width: 1024px;
	height: 600px;
}
.contenido .faseComic .comic .ui-draggable {
	border: 0px solid #fff;
}

.contenido .faseComic .comic .hud {
	position: absolute;
	left: 0px;
	top: 234px;
	width: 1024px;
	height: 32px;
}

.contenido .faseComic .comic .innerContainer {
	position: absolute;
	top: 0px;
}

.contenido .faseComic .comic .innerDrag {
	position: absolute;
	left: 0px;
	top: 0px;
}

.contenido .faseComic .comic .innerDrag img {
	display: block;
	float: left;
}

.contenido .faseComic .comic .hud .dirNav {
	background: url("../img/comic/hud.png") no-repeat scroll 0 0 rgba(143, 203, 133, 0.39);
	border: 5px solid rgba(95, 170, 76, 0.58);
	border-radius: 50%;
	cursor: pointer;
	height: 32px;
	padding: 0;
	position: absolute;
	text-indent: -10000px;
	width: 32px;
	z-index: 10;
}

.contenido .faseComic .comic .hud .dirNav.left {
	left: 5px;
	background-position: 0 0;
}

.contenido .faseComic .comic .hud .dirNav.left:hover {
	background-position: 0 -32px;
	border: 5px solid rgba(95, 170, 76, 0.38);
	border-radius: 50%;
}

.contenido .faseComic .comic .hud .dirNav.right {
	background-position: -96px 0;
	right: 5px;
}
.contenido .faseComic .comic .hud .dirNav.right:hover {
	background-position: -96px -32px;
}
/*fin fase comic*/
/************INTRUCCIONES***********/
.contenido .instrucciones.ventana:after {
	background-image: url("../img/cinta_azul.png");
	box-shadow: 3px 2px 5px #000000;
	content: "";
	height: 29px;
	left: -3px;
	position: absolute;
	top: -23px;
	width: 495px;
}
.contenido .instrucciones.ventana {
	background: url("../img/instrucciones_man.png") no-repeat scroll left bottom #CFCFCF;
	border: 1px solid #C8C3C3;
	box-shadow: 0 0 13px #000000;
	padding-bottom: 35px;
	text-align: center;
	text-indent: 0;
	min-height: 225px;
}

/*formato de instrucciones*/
.contenido .instrucciones {

	background: url("../img/bullet_instrucciones.png") no-repeat scroll left center rgba(0, 0, 0, 0);
	color: #1F3D56;
	display: inline-block;
	font-size: 0.8em;
	text-align: center;
	text-indent: 32px;
}

.contenido .instrucciones .textoIns {
	display: block;
	left: 162px;
	position: relative;
	text-align: left;
	width: 294px;
}
.contenido .instrucciones .tituloIns {
	color: #4D7EB1;
	font-size: 2.6em;
	text-shadow: 0 2px 5px #D5DCE4;
}
.contenido .instrucciones .expIns {
	color: #112233;
	display: inline-block;
	font-size: 1.2em;
	width: 294px;
}
.contenido .instrucciones .realtadoIns {
	color: #FFFFFF;
	font-size: 2em;
	text-shadow: 0 1px 7px #024558;
}
.contenido .instrucciones .realtadoconclucion {
	color: #FBFBFB;
	display: block;
	font-size: 1.3em;
	margin-top: 33px;
	text-shadow: 0 0 5px #25849F;
}
/********
 * general
 */
.contenido .botones {
	bottom: 5px;
	position: absolute;
	right: 5px;
	width: 150px;
}

.contenido .boton {
	background-color: #ffD3ff;
	border-radius: 3px;
	border: solid 1px #000;
	display: block;
	outline: none;
	text-decoration: none;
	text-align: center;
}

.contenido .dummydiv {
	border: 2px solid green;
	width: 300px;
	height: 700px;
	margin: auto;
}
/* -----------------  */
.contenido .barra_arriba {
	background: #F7F7F7;
	color: #25556F;
	display: block;
	height: 40px;
	line-height: 40px;
	margin-bottom: 41px;
}
.contenido .barra_arriba .tutilointerior a {
	color: #25556F;
	text-decoration: none;
}
.contenido .barra_arriba .tutilointerior {
	float: left;
	margin-left: 87px;
}
.contenido .barra_arriba .tutilointerior label {
	display: inline-block;
}
.contenido .tituloA1:after {
	bottom: -11px;
	content: "";
	height: 15px;
	left: 0;
	position: absolute;
	width: 192px;
}
.contenido .tituloA1 {
	font-size: 1.25em;
	text-indent: 48px;
	position: relative;
	line-height: 40px;
}
.contenido .fondoteoria {
	background: url("../img/btn_intro_teoria.png") no-repeat scroll 9px center #84C8FF;
}
.contenido .fondoejercicios {
	background: url("../img/bullet_ejercicio.png") no-repeat scroll 9px center #8ACB72;
}
.contenido .tituloA1.fondointro, .contenido .fondointro {
	background: url("../img/bullet_intro.png") center left no-repeat;
}
.contenido .simbolo .tituloA1, .contenido .fondosimbolo {
	background: url("../img/btn_intro_simbolo.png") center left no-repeat;
}
.contenido .nombre .tituloA1, .contenido .fondonombre {
	background: url("../img/btn_intro_nombre.png") center left no-repeat;
}
.contenido .formula .tituloA1, .contenido .fondoformula {
	background: url("../img/btn_intro_formula.png") center left no-repeat;
}
.contenido .ejercicios .tituloA1 {
	background: url("../img/bullet_ejercicio.png") center left no-repeat;
}
.contenido .ejercicios_1 .tituloA1, .contenido .fondoejercicios_1 {
	background: url("../img/btn_ejercicio_elementos.png") center left no-repeat;
}
.contenido .ejercicios_2 .tituloA1, .contenido .fondoejercicios_2 {
	background: url("../img/btn_ejercicio_compuestos.png") center left no-repeat;
}

.contenido .barra_arriba .instruccionesintro {
	background: url("../img/bullet_instrucciones.png") no-repeat scroll 20px center rgba(0, 0, 0, 0);
	border-left: 5px solid #BBD3ED;
	color: #25556F;
	display: inline-block;
	font-size: 1.2em;
	height: 39px;
	line-height: 38px;
	margin: auto auto auto 23px;
	text-align: center;
	text-indent: 22px;
	vertical-align: top;
	width: 241px;
}

.contenido .barra_arriba .instruccionesintro > a {
	color: #25556F;
	text-decoration: none;
}
.contenido .menuInterno {
	border-left: 4px solid #B5C8DC;
	display: inline-block;
	margin-right: 30px;
	padding-left: 17px;
}
.contenido .menuInterno a {
	color: #7B93A7;
	display: inline-block;
	font-size: 1.11em;
	height: 40px;
	line-height: 38px;
	text-align: center;
	text-indent: 49px;
	width: 141px;
}

.invisibleE {
	display: none;
}
.contenido .visible:before {
	background: none repeat scroll 0 0 #FBFBE3;
	border: 1px solid #C8C6C6;
	color: #555349;
	content: "Coloca las letras aquí";
	display: block;
	height: 18px;
	left: 58px;
	padding: 5px;
	position: absolute;
	text-align: center;
	top: -15px;
	
}
.contenido .visible {
	margin: -14px auto 4px;
	position: relative;
}
/**********************
 * ejercicios
 ***********/

.contenido .ejercicios {
	background-color: #D3D3ff;
}
/**********************
 * ejercicios1
 ***********/
.contenido .meyer:before {
	border-bottom: 1px dotted #079CF8;
	border-left: 1px dotted #0C96C4;
	content: "";
	height: 76px;
	left: 155px;
	position: absolute;
	top: 504px;
	width: 215px;
}
.contenido .meyer:after {
	background: #D5EAF8;
	border: 2px solid #A0CBEA;
	color: #49687E;
	content: "Mayúsculas";
	display: block;
	font-size: 1em;
	left: 94px;
	line-height: 16px;
	padding: 6px;
	position: absolute;
	text-align: center;
	top: 524px;
}
.contenido .meyer {
	background: url("../img/vasodepresipitados.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	display: inline-block;
	float: left;
	height: 324px;
	margin-left: 14px;
	margin-right: 76px;
	width: 284px;
}
.contenido .meyer .contenedorCentrado {
	float: left;
	margin: 28px auto auto 48px;
	width: 186px;
}
.contenido .tuboEns:before {
	border-bottom: 1px dotted #13B000;
	border-right: 1px dotted #14B300;
	content: "";
	height: 76px;
	position: absolute;
	right: 154px;
	top: 504px;
	width: 215px;
}
.contenido .tuboEns:after {
	background: none repeat scroll 0 0 #CCEDCA;
	border: 2px solid #658463;
	color: #547B51;
	content: "Minúsculas";
	right: 94px;
	display: block;
	font-size: 1em;
	line-height: 16px;
	padding: 6px;
	position: absolute;
	text-align: center;
	top: 524px;
}
.contenido .tuboEns {
	background: url("../img/tubo_ensayo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	float: left;
	height: 324px;
	margin-left: 73px;
	width: 284px;
}
.contenido .tuboEns .contenedorCentrado {
	height: 124px;
	margin: 82px 48px auto;
	width: 186px;
}
.contenido .floating {
	animation-name: floating;
	-webkit-animation-name: floating;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}

@-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}
.contenido .ui-draggable {
	border: 3px dashed rgba(41, 34, 34, 0.34);
	border-radius: 6px;
	color: rgba(47, 46, 48, 0.95);
	float: left;
	font-weight: bold;
	height: 39px;
	margin: 8px;
	text-align: center;
	text-shadow: 3px 0 1px #B7AEAE;
	width: 39px;
}
.contenido .contenedorCentrado .ui-draggable {
	font-size: 1.625em;
	line-height: 39px;
}
.contenido .ui-widget-content.clonsoltado.ui-draggable {
	display: inline-block;
	font-size: 1em;
	margin: 0;
}
.contenido .clonsoltado {
	border: 6px solid rgba(255, 255, 255, 0.34);
	border-radius: 5%;
	box-shadow: 6px 4px 5px rgba(38, 44, 50, 0.63);
	display: inline-block;
	float: left;
	font-size: 1em;
	font-weight: bold;
	height: 47px;
	line-height: 47px;
	margin: 0;
	text-align: center;
	width: 47px;
}
.contenido .contenedorCentral {
	background-color: rgba(232, 232, 232, 0.27);
	border-bottom: 1px solid #C8C6C6;
	border-right: 1px dotted #D0CACA;
	border-left: 1px dotted #D0CACA;
	border-top: 1px solid #C8C6C6;
	line-height: 18px;
	padding: 37px 2px 2px;
	text-align: center;
	width: 273px;
}
.contenido .azul {
	background-color: rgba(157, 213, 248, 0.52);
	border: 1px solid #5794D5;
	color: #043971;
	text-shadow: 0 0 0;
}
.contenido .azul:hover {
	background-color: #9DD5F8;
}
.contenido .verde {
	background-color: rgba(159, 251, 135, 0.56);
	border: 1px solid #297B0E;
	color: #103D01;
	text-shadow: 0 0 0;
}
.contenido .verde:hover {
	background-color: #97E183;
}
/*
 .contenido .morado {
 background-color: rgba(173, 150, 213, 0.75);
 }
 .contenido .morado:hover {
 background-color: #B659FB;
 }
 .contenido .rojo {
 background-color: rgba(197, 79, 83, 0.66);
 }
 .contenido .rojo:hover {
 background-color: #f2969a;
 }
 .contenido .amarillo {
 background-color: rgba(244, 243, 149, 0.63);
 }
 .contenido .amarillo:hover {
 background-color: #f3faa0;
 }
 .contenido .gris {
 background-color: rgba(112, 108, 118, 0.68);
 }
 .contenido .gris:hover {
 background-color: #9EF288;
 }

 .contenido .aguamarina {
 background-color: rgba(117, 201, 215, 0.62);
 }
 .contenido .aguamarina:hover {
 background-color: #62FBF8;
 }

 .contenido .rosa {
 background-color: rgba(232, 164, 237, 0.52);
 }
 .contenido .rosa:hover {
 background-color: #e8a4ec;
 }
 .contenido .naranja {
 background-color: rgba(249, 154, 71, 0.63);
 }
 .contenido .naranja:hover {
 background-color: #fa9b47;
 }
 .contenido .moorado {
 background-color: rgba(174, 81, 242, 0.63);
 }
 .contenido .moorado:hover {
 background-color: #A631FC;
 }
 .contenido .cafe{
 background-color: rgba(132, 86, 28, 0.75);
 }
 .contenido .cafe:hover {
 background-color: #84561C;
 }
 */
.contenido .imagenElemento {
	background-color: #E0E0FF;
	box-shadow: 0 0 5px #454545;
	display: block;
	height: 250px;
	margin: auto;
	position: relative;
	width: 250px;
}
.contenido .cuidado {
	background-color: #fff;
}

.contenido .focusL {
	background-color: #FFFF00;
	border-style: dotted;
	border-width: 1px;
	border-color: red;
}

.contenido .ui-draggable-dragging {
	width: 60px;
	height: 60px;
}
.contenido .siguiente {
	color: #004B0E;
	display: block;
	font-size: 2em;
	height: 30px;
	margin: 8px 8px 8px -4px;
	text-align: center;
}
.contenido .siguiente .acentoSig {
	background: none repeat scroll 0 0 #004B0E;
	border: 1px solid #717173;
	box-shadow: 0 0 2px #090909;
	color: #FFFFFF;
	padding: 3px;
}
.contenido .ejercicios_2 .contenedorCentro {
	position: relative;
	top: 29px;
}
.contenido .nombreEjercicio {
	background: none repeat scroll 0 0 #F5F5F5;
	border-bottom: 1px solid #FCD53E;
	border-top: 1px solid #FCD53E;
	height: 116px;
	margin: 10px auto 20px;
	position: relative;
	text-align: center;
	width: 962px;
}
.contenido .nombreEjercicio:after {
	background: #F8EE95;
	border: 1px solid #C8B726;
	color: #443408;
	content: " Elementos";
	display: block;
	height: 22px;
	left: 428px;
	padding: 4px;
	position: absolute;
	top: -30px;
	width: 102px;
}
.contenido .centro {
	float: left;
	margin: auto;
	width: 282px;
}
.contenido .nombreEjercicio input {
	border: none;
}
.contenido .botonCambio {
	border: 1px solid rgba(116, 112, 112, 0.35);
	border-radius: 12px;
	box-shadow: 0 0 5px #BBB3B3;
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	height: 27px;
	line-height: 28px;
	margin: 21px 15px auto;
	padding-left: 27px;
	padding-right: 9px;
	position: relative;
	text-align: center;
}

/***********************************CAMBIO DE OPACIDAD DE BACKGROUND****************/
.contenido .botonCambio.botonSodio {
	background: rgba(145, 198, 136, 0.07);
}
.contenido .botonCambio.botonCloro {
	background: rgba(237, 197, 92, 0.17);
}
.contenido .botonCambio.botonHidrogeno {
	background: rgba(146, 210, 244, 0.22);
}
.contenido .botonCambio.botonOxigeno {
	background: rgba(36, 52, 108, 0.21);
}
.contenido .botonCambio.botonPlata {
	background: rgba(125, 128, 125, 0.32);
}
.contenido .botonCambio.botonNitrogeno {
	background: rgba(183, 95, 110, 0.19);
}
.contenido .botonCambio.botonCarbono {
	background: rgba(122, 70, 36, 0.19);
}
.contenido .botonCambio.botonUnunpentium {
	background: rgba(160, 125, 183, 0.38);
}
.contenido .botonCambio.botonHierro {
	background: rgba(180, 214, 251, 0.6);
}
.contenido .botonCambio.botonAntimonio {
	background: rgba(11, 61, 113, 0.11);
}
.contenido .botonCambio.botonAzufre {
	background: rgba(16, 15, 16, 0.06);
}
.contenido .botonCambio.botonPotasio {
	background: rgba(244, 167, 80, 0.38);
}
.contenido .botonCambio.botonFosforo {
	background: rgba(245, 77, 26, 0.38);
}
.contenido .botonCambio.botonNiquel {
	background: rgba(249, 249, 115, 0.38);
}
/****** clases para indicar la actividad de boton de elemtnto*****************************************
 */
.contenido .botonActivo_Na {
	background: #91C689;
}
.contenido .botonActivo_Cl {
	background: #EDC55C;
}
.contenido .botonActivo_H {
	background: #92D2F4;
}
.contenido .botonActivo_O {
	background: #24346C;
}
.contenido .botonActivo_Ag {
	background: #7D807D;
}
.contenido .botonActivo_N {
	background: #B75E6D;
}
.contenido .botonActivo_C {
	background: #7A4624;
}
.contenido .botonActivo_Uup {
	background: #A07DB7;;
}
.contenido .botonActivo_Fe {
	background: #3F81C3;
}
.contenido .botonActivo_Sb {
	background: #363C55;
}
.contenido .botonActivo_S {
	background: #2D2D2D;
}
.contenido .botonActivo_K {
	background: #F08318;
}
.contenido .botonActivo_P {
	background: #E84142;
}
.contenido .botonActivo_Ni {
	background: #FFD502;
}
/*
 FIN*/
/****** clases para indicar SIGUEINTE BOTON al usuario de boton de elemtntos************************
 */

.pulse {
	animation-name: pulse;
	-webkit-animation-name: pulse;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}

@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}

/***********formato de los elementos */
.contenido .botonCambio.fmtSO {
	color: #214820;
	width: 65px;
}
.contenido .botonCambio.fmtCl {
	color: #553d14;
}
.contenido .botonCambio.fmtHi {
	color: #366275;
}
.contenido .botonCambio.fmtOx {
	color: #5A6984;
}
.contenido .botonCambio.fmtPl {
	color: #2A2A2B;
}
.contenido .botonCambio.fmtN {
	color: #5F1D27;
}
.contenido .botonCambio.fmtCa {
	color: #AE844D;
}
.contenido .botonCambio.fmtUup {
	color: #322050;
}
.contenido .botonCambio.fmtFe {
	color: #284563;
}
.contenido .botonCambio.fmtSb {
	color: #697F88;
}
.contenido .botonCambio.fmtS {
	color: #999799;
}
.contenido .botonCambio.fmtK {
	color: #C4521A;
}
.contenido .botonCambio.fmtP {
	color: #7D1D0A;
}
.contenido .botonCambio.fmtNi {
	color: #9A7D0B;
}
/******AFTER*****/
.contenido .pulse:after {
	background: #F28181;
	border-radius: 10px;
	box-shadow: 0 0 5px #000000;
	color: #8C2018;
	content: "Toca aquí para continuar";
	display: inline-block;
	font-size: 0.8em;
	height: 33px;
	left: -20px;
	line-height: 16px;
	padding: 2px;
	position: absolute;
	top: -41px;
	width: 129px;
}
/******before*/
.contenido .botonCambio:before {
	background: none repeat scroll 0 0 #FCF9F9;
	border: 1px solid;
	border-radius: 50px;
	content: "?";
	display: inline-block;
	left: -19px;
	line-height: 38px;
	position: absolute;
	top: -7px;
	width: 37px;
}
.contenido .botonCambio.fmtSO:before {
	color: #92C788;
}
.contenido .botonCambio.fmtCl:before {
	color: #ecc45c;
}
.contenido .botonCambio.fmtHi:before {
	color: #93d2f4;
}
.contenido .botonCambio.fmtOx:before {
	color: #24356c;
}
.contenido .botonCambio.fmtPl:before {
	color: #7d7f7d;
}
.contenido .botonCambio.fmtN:before {
	color: #AE820B;
}
.contenido .botonCambio.fmtCa:before {
	color: #7a4724;
}
.contenido .botonCambio.fmtUUU:before {
	color: #a17db7;
}
.contenido .botonCambio.fmtFe:before {
	color: #284563;
}
.contenido .botonCambio.fmtSb:before {
	color: #697F88;
}
.contenido .botonCambio.fmtS:before {
	color: #999799;
}
.contenido .botonCambio.fmtK :before {
	color: #C4521A;
}
.contenido .botonCambio.fmtP :before {
	color: #7D1D0A;
}
.contenido .botonCambio.fmtNi:before {
	color: #9A7D0B;
}
/**** circuloElemento ****/
.contenido .circuloElemento {
	border-radius: 50%;
	box-shadow: 0 0 5px #000;
	text-shadow: 0 0 2px #000;
	margin: 0 9px;
	display: inline-block;
	position: relative;
	float: left;
	text-indent: -9999px;
	height: 50px;
	width: 50px;
}
.contenido .molecula.circuloElemento:before {
	content: attr(data-comp);
}
.contenido .circuloElemento.btn_Uup:before {
     font-size: 1.5em;
    left: 4px;
    top: 11px;
}
/* elemntos por color */

.contenido .btn_Na {
	background: #92C788;
	color: #214820;
}

.contenido .btn_Cl {
	background: #DECD9F;
	color: #553D14;
}

.contenido .btn_H {
	background: #93D2F4;
	color: #366275;
}

.contenido .btn_O {
	background: #24356C;
	color: #CEDAF1;
}

.contenido .btn_Ag {
	background: #7D7F7D;
	color: #2A2A2B;
}

.contenido .btn_N {
	background: #D15068;
	color: #5F1D27;
}

.contenido .btn_C {
	background: #553D14;
	color: #ECC45C;
}

.contenido .btn_Uup {
	background: #90C6C0;
	color: #322050;
}

.contenido .btn_Fe {
	background: #3F81C3;
	color: #284563;
}

.contenido .btn_Sb {
	background: #363C55;
	color: #697F88;
}

.contenido .btn_S {
	background: #2D2D2D;
	color: #999799;
}

.contenido .btn_K {
	background: #F08318;
	color: #C4521A;
}
.contenido .btn_P {
	background: #E84142;
	color: #7D1D0A;
}

.contenido .btn_Ni {
	background: #FFD502;
	color: #9A7D0B;
}
.contenido .btn_Signo {
	 background: #F5E5E5;
    border: 2px dashed #F25E68;
    display: inline-block;
    height: 99px;
    line-height: 95px;
}
.contenido .parentesis{
    color: #F42222;
    font-weight: bold;
}
/*elemnto por tamaño actividad 1 */

.contenido .circuloElemento.caracterUnaMicra:before {
	left: 7px;
}
.contenido .circuloElemento.caracterDosMicra:before {
	left: 8px;
}
.contenido .circuloElemento.caracterCincoMicra:before {
	left: 9px;
}
.contenido .circuloElemento.caracterSeisMicra:before {
	left: 11px;
}
.contenido .circuloElemento.caracterSieteMicra:before {
	left: 13px;
}
.contenido .circuloElemento.caracterOchoMicra:before {
	left: 15px;
}

/*fin de elementos*/
.contenido .suelta {
	border: 3px dashed #4E6881;
	border-radius: 20%;
	display: inline-block;
	font-size: 1.8em;
	height: 50px;
	width: 50px;
}

.contenido .ejercicios_1 .btnAct {
	display: inline-block;
	margin: auto 390px;
	width: 421px;
}
.contenido .ejercicios_2 .btnAct {
    display: inline-block;
    margin-left: 24px;
    margin-top: 5px;
     width: 245px;
    float: left;
}
.contenido .btnAct input {
	border: 5px solid rgba(245, 241, 148, 0.4);
	box-shadow: 0 0 5px #000000;
	color: #E6E4E4;
	font-size: 1em;
	font-weight: bold;
	line-height: 33px;
	text-align: center;
	text-shadow: 0 0 5px #323030;
	width: 100px;
	height: 45px;
}
.contenido .botonVerifica:hover {
	background: none repeat scroll 0 0 #0A841D;
	border-color: #20965D;
}
.contenido .botonVerifica {
	background: none repeat scroll 0 0 #569D4D;
	margin: 10px;
}
.contenido .botonLimpiar:hover {
	background: none repeat scroll 0 0 #305B9F;
	border-color: #3798FE;
}
.contenido .botonLimpiar {
	background: none repeat scroll 0 0 #4B85E1;
	margin: 10px;
}
.contenido .nombreElemento {
	background: none repeat scroll 0 0 rgba(245, 245, 245, 0.77);
	border: 2px solid #999792;
	box-shadow: 0 1px 9px #292A2C;
	color: #3D3B34;
	display: block;
	font-size: 2.2em;
	height: 45px;
	left: 0;
	margin: auto;
	position: relative;
	text-align: center;
	text-shadow: 3px 1px 1px #F8F8F8;
	top: -146px;
	width: 257px
}
.contenido .sueltaMay, .contenido .sueltaMin, .contenido .sueltaMin2 {
	box-shadow: 5px 5px 15px #454D47 inset;
	left: 103px;
	margin-left: 5px;
	margin-right: 5px;
}
.contenido .sueltaMay {
	background: none repeat scroll 0 0 #99D5F1;
	border: 1px dashed #4988CC;
}
.contenido .sueltaMin, .contenido .sueltaMin2 {
	background: none repeat scroll 0 0 #AEE489;
	border: 1px dashed #28A014;
}
.contenido .cuadroElem {
	width: 230px;
	height: 150px;
	position: absolute;
	top: 150px;
	left: 680px;
	background-color: #E0E0FF;
	display: none;
}

.contenido .respuesta.visible {
	display: block;
	margin: 20px auto 4px;
	width: 146px;
}
.contenido .sueltaMay.respuesta {
	left: 103px;
	margin-left: 5px;
	margin-right: 5px;
}
.contenido .suelta.respuesta {
	border: 5px solid #2e4626;
	border-radius: 50%;
	box-shadow: 1px 1px 10px 5px #6F6969;
	display: inline-block;
	font-size: 1.8em;
	height: 50px;
	width: 50px;
}
.contenido .respuesta {
	background-color: #99EF9B;
	border: 5px solid #2E4626;
	border-radius: 50%;
	box-shadow: 1px 1px 10px 5px #6F6969;
	color: #2E4626;
	display: inline-block;
	font-size: 1.8em;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 50px;
}
.contenido .respuesta:nth-child(1) {
	background-color: #67D1F4;
	border-color: #083E76;
	color: #0A6785;
}

.contenido .respuesta:nth-child(2), .contenido .respuesta:nth-child(3) {
	background-color: #B2EBA3;
	border-color: #297B0E;
	color: #103D01;
}
.contenido .sueltaMin.respuesta {
	left: 185px;
	margin-left: 5px;
	margin-right: 5px;
}
.contenido .suelta.respuesta {
	border-radius: 50%;
	box-shadow: 1px 1px 10px 5px #6F6969;
	display: inline-block;
	font-size: 1.8em;
	height: 50px;
	width: 50px;
}

/**********************
 * ejercicios2
 ***********/

.contenido .instrucciones.ventana.ejerBloqueado:after {
	background-image: url("../img/cinta_azul.png");
	box-shadow: 3px 2px 5px #000000;
	content: "";
	height: 29px;
	left: -3px;
	position: absolute;
	top: -23px;
	width: 995px;
}
.contenido .instrucciones.ventana.ejerBloqueado {
	background: url("../img/instrucciones_man.png") no-repeat scroll left bottom #CFCFCF;;
	border: 1px solid #C8C3C3;
	box-shadow: 0 0 13px #000000;
	height: 549px;
	left: 16.3%;
	min-height: 225px;
	padding-bottom: 35px;
	text-align: center;
	text-indent: 0;
	top: 243px;
	width: 951px;
}
/*elemnto tamaño actividad 2*/

.respuestaCompuestos {
	float: left;
}
.respuestaImg {
	position: absolute;
	right: 32px;
}
.contenido .depositaMolecula .circuloElemento {
	 float: none;
    height: 28px;
    margin: 0px;
    width: 28px;
}
.contenido .depositaMolecula .circuloElemento:before {
	content: attr(data-comp);
	display: block;
	font-size: 0.5em;
	font-weight: bold;
	left: 38%;
	line-height: 13px;
	text-align: center;
	text-shadow: 0 0 0;
}
.contenido .contenedorCentro .ui-draggable {
	border: 0px;
	font-weight: normal;
	text-align: center;
	text-shadow: 0 0 0;
	 display: inline-block;
    position: relative;
}
.contenido .contenedorCentro .ui-draggable .circuloElemento:before {
	display: inline-block;
	position: absolute;
	text-indent: 0;
}
.contenido .circuloElemento .mezclador {
	margin: 4px;
}

.contenido .depositaMolecula .circuloElemento:before {
    content: attr(data-comp);
    display: block;
    font-size: 0.5em;
    font-weight: bold;
    left: 38%;
    line-height: 13px;
    text-align: center;
    text-shadow: 0 0 0;
}
.contenido .circuloElemento.caracterOchoMicra:before {
    left: 15px;
}
.contenido .circuloElemento:before {
    content: attr(data-name);
    display: inline-block;
    font-size: 1.8em;
    position: absolute;
    text-indent: 0;
    top: 8px;
}
.contenido .depositaMolecula .verticalMezclador > div {
    display: block;
    margin: 8px auto auto;
}
.contenido .horizontalMezclador {
	 margin: 3px auto;
}
.contenido .horizontalMezclador .circuloElemento {
	 display: inline-block;
    position: relative;
}
.contenido .horizontalMezclador .mezclaCompuestos {
	position: relative;
}
.contenido .horizontalMezclador div:nth-child(1) {
	  left: 0px;
	   top: 4px;
}
.contenido .horizontalMezclador div:nth-child(2) {
	 left: -13px;
    top: 4px;
}
.contenido .horizontalMezclador div:nth-child(3) {
	 left: 42px;
    top: -30px;
}
.contenido .horizontalMezclador div:nth-child(4) {
    left: -34px;
    top: 9px;
}
.contenido .horizontalMezclador div:nth-child(5) {
	 left: 21px;
   top: -25px;
}
.contenido .horizontalMezclador div:nth-child(6) {
	 left: 7px;
    top: -25px;
    z-index: 2;
}

.contenido .horizontalMezclador div:nth-child(7) {
	left: 0;
    top: -21px;
	
}
.contenido .horizontalMezclador div:nth-child(8) {
	left: -15px;
    top: -20px;
}

/*COMPÚESTOS PARA ARMAR*/
.contenido .ligaCompuestos:before {
	border: 1px solid #C7A2EA;
	content: "";
	height: 449px;
	left: 28px;
	position: absolute;
	top: 232px;
	width: 266px;
}
.contenido .ligaCompuestos:after {
	background: none repeat scroll 0 0 #DAC9EA;
	border: 1px solid #C7A2EA;
	border-radius: 12px;
	clear: both;
	color: #6C1A74;
	content: "Resuelve estos compuestos";
	display: block;
	height: 37px;
	left: -4px;
	padding: 5px;
	position: relative;
	text-align: center;
	top: -473px;
	width: 156px;
}
/* no contestado*/
.contenido  .ligaCompuestos {
	float: left;
    height: 395px;
    margin-left: 49px;
    margin-right: 13px;
    margin-top: 64px;
    width: 235px;
}
/*color que se le asignarapara indicar al usuario que esta contestando esta parte*/
.contenido .ligaCompuestos .azulFondo {
	background: #77BEDE;
}
/* va a brillar para que indicar que es el proximo que deverian contestar */
.contenido .ligaCompuestos .greenFondo {
	background: #9AD7AE;
}
/*color que se le asignara una vez que este bien contestado*/
.contenido .ligaCompuestos .redFondo {
	background: #F7AFA0;
}

/* lo contestaron mal*/
.contenido .ligaCompuestos .redFondo:before {
	background: url("../img/ico42x42_red.png");
}
/*lo contestaron bien*/
.contenido .ligaCompuestos .greenFondo:before {
	background: url("../img/ico42x42_green.png");
}
/*no lo han contestado*/
.contenido .ligaCompuestos .grayFondo:before {
	background: url("../img/ico42x42.png");
}
/************** estado general del boton*/
.contenido .ligaCompuestos a:before {
	border: 2px solid #CACCCD;
	border-radius: 50%;
	content: "";
	height: 42px;
	left: -17px;
	position: absolute;
	top: -8px;
	width: 42px;
}
/************** estado de boton para indicar que estan contestando este  */
.contenido  .ligaCompuestos a .editando:before {
	background-color: #FFFFFF;
	border: 2px solid #2E8FC2;
	border-radius: 50%;
	content: "";
	height: 42px;
	left: -17px;
	position: absolute;
	top: -3px;
	width: 42px;
}
/************** estado de boton para indicar que ya contestaron bien este */
.contenido  .ligaCompuestos a .contestadobien:before {
	background-color: #FFFFFF;
	border-radius: 50%;
	content: "";
	height: 42px;
	left: -17px;
	position: absolute;
	top: -3px;
	width: 42px;
}
.contenido  .ligaCompuestos a {
	background-color: #E7E1E1;
	border: 1px solid #C7A2EA;;
	border-bottom-right-radius: 25px;
	border-top-right-radius: 25px;
	box-shadow: 0 0 5px 5px #D5CCCC;
	color: #2A4955;
	display: block;
	font-size: 0.95em;
	height: 33px;
	line-height: 37px;
	margin-bottom: 20px;
	margin-top: 20px;
	position: relative;
	text-decoration: none;
	text-indent: 37px;
	text-shadow: 0 0 5px #000000;
	width: 222px;
}

.contentodo {
	
}
.contenido .centroCompuesto {
	float: left;
	width: 317px;
}
.contenido .tituloComp {

	padding: 10px;
}

.contenido .tituloComp .etiquetaForma {
	background: #C8BCCB;
	border-top-right-radius: 25px;
	color: #462365;
	display: block;
	font-size: 1.2em;
	padding: 3px;
	text-align: center;
}
.contenido .tituloComp .etiquetacompuesto {
	background: #77BEDE;
	border-bottom-right-radius: 25px;
	color: #053C63;
	display: block;
	font-size: 1.5em;
	padding: 3px;
	text-align: center;
}
.contenido .formaEsteCompuesto {
	background-color: #E1D3F9;
	border: 3px solid #C7A2EA;
	box-shadow: 0 0 11px #B8B2B2 inset;
	display: block;
	height: 84px;
	line-height: 70px;
	text-align: center;
	width: 291px;
	font-size: 3em;
}
.contenido .formaEsteCompuesto .sinRespuesta {
	background: none repeat scroll 0 0 rgba(231, 231, 231, 0.42);
	border: 1px dashed #454545;
	box-shadow: 0 0 3px #000000;
	color: #807777;
	padding: 3px 3px 16px;
}
.rClNa, .rH2O, .rAgNO3, .rFeO, .rCO2, .r_NH4_2SO4, .rNi_CO_4{
	   background: none repeat scroll 0 0 rgba(108, 255, 89, 0.42);
    border: 1px solid #12BC04;
    box-shadow: 0 0 3px #000000;
    color: #14870E;
    padding: 3px 3px 16px;
}
.contenido .descripcionComp {
	border-top: 12px solid #44423F;
	border-bottom: 6px solid #5E8C9C;
	box-shadow: 0 0 5px #000;
	padding: 10px;
}

.contenido .depositaMolecula:after {
	background: #F8EE95;
	border: 1px solid #C8B726;
    color: #443408;
    content: "Arrastra los elementos aquí";
    display: block;
    height: 36px;
    left: 117px;
    padding: 5px;
    position: relative;
    text-align: center;
    top: -535px;
    width: 153px;
}
.contenido .depositaMolecula:before {
	  border-bottom: 2px dotted #F2CC36;
    border-left: 2px dotted #F2CC36;
    border-top: 2px dotted #F2CC36;
    content: "";
    display: block;
    height: 62px;
    position: absolute;
    right: 71px;
    top: 203px;
    width: 133px;
}
.contenido .depositaMolecula {
	background: url("../img/microscopio_2.png") no-repeat;
    display: inline-block;
    height: 428px;
    margin-top: 30px;
    width: 381px;
}
.contenido .depositaMolecula .suelta {
	background:#F9E69A;
	  border: 1px solid #827846;
    border-radius: 50%;
    box-shadow: 0 0 20px #E6A647 inset;
    height: 60px;
    margin-left: 28px;
    margin-top: -57px;
    width: 60px;
    z-index: 0;
}
.contenido .depositaMolecula .saleMol {
	background-image: url("../img/botedebasura.png");
	  bottom: 81px;
    height: 76px;
    left: 301px;
    position: relative;
    width: 60px;
}
.contenido .depositaMolecula .saleMol:hover {
	background-image: url("../img/botedebasura_abierto.png");
}
.contenido .sueltaMolecula_1 {
	margin: auto;
}
.contenido .formulaComp > span {
	 border-radius: 12px;
    display: block;
    margin: 1px auto;
    width: 89px;
}
.contenido .formulaComp {
    font-size: 1.25em;
    text-align: center;
    text-shadow: 2px 2px 2px #3F3B73;
}

.contenido .mezclador {
	 box-shadow: 0 0 13px #2B2727;
    display: inline-block;
    height: 396px;
    margin-left: 20px;
    width: 78px;
}
.elemMezclador {

}

.selectNum {

}
.contenido .formulaResultado {
	    background: none repeat scroll 0 0 #FFFFFF;
    border: 6px solid #78A7D9;
    border-radius: 25px;
    box-shadow: 0 0 18px #8C8282 inset;
    float: left;
    height: 192px;
    margin-left: 18px;
    margin-top: 165px;
    width: 241px;
}

.contenido .formulaResultado .formulaComp.rCorrecta {
	margin-top: 41px;
}

.contenido .formulaResultado .formulaComp.rCorrecta span {
   border-radius: 0;
height: 63px;
line-height: 63px;
margin: 0;
width: 44px;
}

.contenido .formulaResultado .formulaComp.rCorrecta > span {
    display: inline-block;
}
/*
.contenido .formulaResultado .formulaComp.rCorrecta .signo > span
 {
  border-radius: 0;
    font-size: 1.2em;
    margin: -3px;
   }
   */
.contenido .moverMolecula {
	animation-name: moverMolecula;
	-webkit-animation-name: moverMolecula;
	animation-duration: 1.6s;
	-webkit-animation-duration: 1.6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	visibility: visible !important;
}

@keyframes moverMolecula{
0% {
transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}

@-webkit-keyframes moverMolecula {

0% {
-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
opacity: 0.2;
}
30% {
-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
opacity: 1;
}
45% {
-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
60% {
-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
opacity: 1;
}
75% {
-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
opacity: 1;
}
90% {
-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
opacity: 1;
}
}

/**********************
 * REALIMENTACIONES
 ***********/
/***********************/
.contenido .realimentacion.ventana:before {
	box-shadow: 3px 2px 5px #000000;
	content: "";
	height: 29px;
	left: -3px;
	position: absolute;
	top: -23px;
	width: 353px;
}
.contenido .realimentacion.ventana:after {
	content: "";
	height: 58px;
	left: 41%;
	position: absolute;
	top: -50px;
	width: 61px;
}

.contenido .realimentacion.ventana {
	border: 1px solid #C8C3C3;
	box-shadow: 0 0 13px #000000;
	width: 309px;
	left: 48.3%;
	padding-bottom: 35px;
	text-align: center;
}

.contenido .realimentacion.ropOrtunidadUno.ventana:after {
	background-image: url("../img/realimentacion_uno.png");
}
.contenido .realimentacion.ropOrtunidadDos.ventana:after {
	background-image: url("../img/realimentacion_dos.png");
}
.contenido .realimentacion.ropOrtunidadTres.ventana:after {
	background-image: url("../img/realimentacion_tres.png");
}
.contenido .realimentacion.ropOrtunidadBien.ventana:after {
	background-image: url("../img/realimentacion_bien.png");
}
.contenido .realimentacion.ropOrtunidadUno.ventana:before, .contenido .realimentacion.ropOrtunidadDos.ventana:before, .contenido .realimentacion.ropOrtunidadTres.ventana:before {
	background-image: url("../img/realimentacion_cinta.png");
}
.contenido .realimentacion.ropOrtunidadBien.ventana:before {
	background-image: url("../img/realimentacion_cinta_bien.png");
}
.contenido .realimentacion.ventana .btn-close, .contenido .instrucciones.ventana .btn-close {
	border: 3px solid #3B3B3C;
	color: #3B3B3C;
	line-height: 33px;
	text-shadow: 0 0 5px #6F6A6A;
}
.contenido .realimentacion.ropOrtunidadUno.ventana .btn-close, .contenido .realimentacion.ropOrtunidadDos.ventana .btn-close, .contenido .realimentacion.ropOrtunidadTres.ventana .btn-close {
	background-color: #FEC11E;
}
.contenido .realimentacion.ropOrtunidadBien.ventana .btn-close {
	background-color: #00D481;
}

.contenido .realimentacion .reasltadoPuntajeUno {
	color: #3A3434;
	font-size: 1.2em;
	text-shadow: 0 0 5px #6F5B1B;
	display: block;
}
.contenido .realimentacion .reasltadoPuntajeDos {
	color: #4E4A4A;
	font-size: 1.25em;
	text-shadow: 0 0 5px #884C09;
	display: block;
}
.contenido .realimentacion .reasltadoPuntajeTres {
	 font-family: "arimo-regular",Times,serif;
	color: #231E1E;
	font-size: 1.25em;
	text-shadow: 0 0 5px #DC2012;
	display: block;
}
.contenido .realimentacion .reasltadoPuntajeBien {
	color: #4D4848;
	font-size: 1.3em;
	text-shadow: 0 0 5px #086D0E;
	display: block;
}
.contenido .realimentacion .resaltadoAyuda {
	color: #184D0F;
	font-weight: bold;
	text-shadow: 0 0 5px #6AC6FF;
	font-style: italic;
}
.contenido .realimentacion.ventana.btn-close {
	border: 2px solid #A37633;
	border-radius: 50%;
	bottom: -19px;
	box-shadow: 0 0 5px #AB8E5C;
	color: #92660F;
	font-weight: bold;
	height: 33px;
	left: 43%;
	line-height: 33px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 0 5px #FFEABA;
	width: 33px;
	z-index: 45;
}
.contenido .realimentacion .versalita{
	font-style:italic;
}
/**********************
 /*COMCLUCION*/
/***********************/

.contenido .ventana.instrucciones.ayudaInstruccionesEj1 {
	bottom: 0;
	height: 202px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 451px;
}
.ayudaInstrucciones.instrucciones.ventana {
	bottom: 0;
	height: 194px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 453px;
}

.contenido .instrucciones.ventana .btn-close {
	background-color: #2493CF;
}
.contenido .ventana.instrucciones.ayudaconclucion {
	height: 324px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 451px;
}