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

/*********************controles de resposividad horizontal*/

@media print body {
	font-family: Arial, Helvetica, sans-serif;
        }
        
a {
	outline: none;
	text-decoration: none;
}
 .header{
 	text-align: justify;
	 margin: 0 auto;
  width: 1280px;
    position: relative;
	padding-top: 8px;
	font-family: Verdana, Geneva, sans-serif;
}

.header img {
	border: 0;
}	
.header .unam {
	float: left;
	text-align: center;
	overflow: hidden;
	transition: all 200ms linear 200ms;
	-webkit-transition: all 200ms linear 200ms;
	margin: 0 8px;
}
.header .botones_encabezado {
	border-bottom: 3px solid #118e38;
	margin-left: 7%;
	margin-top: 1%;
	text-transform: uppercase;
	width: 50%;
}
.header .materia {
	color: #118e38;
	width: 134px;
	height: 50px;
	position: absolute;
	top: 16px;
	left:57%;
}
.header .nombre {
	color: #118e38;
	height: 50px;
	left: 42%;
	position: absolute;
	top: 28%;
}
.btn-close {
	display:none;
	visibility: hidden;
}

.menuPrincipal{
	visibility: hidden;
}
.ventanaFC {
	padding-left:20px;
	margin-top:120px;
	border-left: 5px solid #c0c0c0;
	color: #463D47;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
}
.contenido .ventanaFC.creditos {
	display: none;
}


/*******principio de formato de objeto*/
.contenido .portada .contenedorEstatico{
	position:relative;
	display:block;
	left:120px;
    top: 115px;
}


.contenido .portada .titulo {
      display: inline-block;
    height: 538px;
    text-shadow: 4px 2px 0 #F4ECEC;
    width: 606px;
}
.contenido .portada .titulo .parteuno {
	font-size: 5em;
	font-weight: normal;
	display: inline-block;
	color: #585B57;
}
.contenido .portada .titulo .partedos {
	 color: #3D413C;
    font-size: 3em;
    font-weight: normal;
    left: 159px;
    position: relative;
    top: -17px;
}
.contenido .portada .titulo .partetres {
	 background: url("../img/red_line.png") no-repeat scroll center top rgba(0, 0, 0, 0);
    color: #2D2F2C;
    display: inline-block;
    font-family: Helvetica,Arial,Verdana,Geneva,sans-serif;
    font-size: 1.56em;
    font-weight: normal;
    line-height: 55px;
    text-indent: 256px;
    width: 771px;
}
.contenido .r_verde {
  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.nitro {
	color:#8F5272;
    display: inline-block;
    font-size: 1.5em;
    height: 135px;
    line-height: 142px;
    width: 135px;
    background: #E4B5E4; /* Old browsers */

}
.contenido .r_verde.ox {
    color: #1A3601;
    display: inline-block;
    font-size: 1em;
    height: 60px;
    line-height: 60px;
    width: 60px;
   background: #237100; /* Old browsers */
	
}
.contenido .r_verde:after {
    border-radius: 50%;
    color: #FFFFFF;
    content: "";
    position: absolute;
}
.contenido .r_verde.nitro:after {
  background: #8F5272;
    box-shadow: 5px 0 5px #454545;
    color: #EBC4E2;
    content: "7";
    font-size: 0.28em;
    height: 40px;
    line-height: 40px;
    right: -6px;
    top: 9px;
    width: 40px;
}
.contenido .r_verde.ox:after {
      background: none repeat scroll 0 0 #82DC4D;
    box-shadow: 5px 0 5px #454545;
    color: #1C4E0A;
    content: "49";
    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;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	overflow: hidden;
}
.contenido .portada .cta-block.build-promo {

	background:#F7F7F7;
}

.contenido .portada .particula1 {
	left: 55px;
    position: absolute;
    top: 42%;
}
.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%;
}
/*************** pagina*/
/****page breaker */
.portada {
	page-break-before: always;
    border:1px solid green;}
.faseComic {
	page-break-before: always;
	border:1px solid red;
	}
.comic img {
	display: block;
	border:1px solid blue;
	}
.ejercicios_1 {
	page-break-before: always;
	border:1px solid purple;
	}
.ejercicios_2 {
	page-break-before: always;
	border:1px solid orange;
}
.contenedorBotones{
	display: none;
}
.innerDrag > img {
    display: block;
    margin:auto;
   }
   
.faseComic .comic .innerDrag img {
    margin-bottom: 350px;
}


.tutilointerior{
	display: none;
}
.botones .sigComic {
	display:none;
}
.instrucciones {
	
    color: #1F3D56;
    font-size: 0.8em;
    text-align: center;
    text-indent: 32px;
}
.contenido .instruccionesintro{
	display:none;
}
.contenido .menuDes{
	visibility: hidden;
	display:none;
}
.instruccionesintro > a {
    color: #25556F;
    text-decoration: none;
}
.instruccionesintro {
	 background: url("../img/bullet_instrucciones.png") no-repeat scroll 20px center rgba(0, 0, 0, 0);
    border-left: 5px solid #BBD3ED;
    color: #25556F;
    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;
}
/****fin*/

/**** centro*/

.centro > label {
	 display:inline-block;
    text-align: center;
    vertical-align: top;
    font-size: 2em;
    display: inline-block;
    height: 260px;
    width: 183px;
    line-height: 260px;
       background: none repeat scroll 0 0 rgba(245, 245, 245, 0.77);
    border: 2px solid #999792;
    box-shadow: 0 1px 9px #292A2C;
    color: #3D3B34;
    text-align: center;
    text-shadow: 3px 1px 1px #F8F8F8;
}
.centro > div {
    float:right;
    margin: 10px auto;
}
.centro .ventana_res{
	 display:none;
}
.centro > img {
    display: inline-block;
}
.centro {
    display: block;
    border: 1px solid black;
    width: 70%;
    margin: auto;
    margin-bottom:60px;
    margin-top:60px;
    position:relative;
}
.centro:before{
	content:"Escribe aquí el simbolo del elemento";
	position:absolute;
	display: block;
	color:#454545;
	top:1px;
	right:0;
	width:200px;
	height:25px;
}
.centro .ventana_res> span{
	display: none;
}
.centro .ventana_res .resaltadoAyuda.respuesta{
	display: block;
	font-size: 2.5em;
	background: #B1EAAA;
	text-align:center;
}

.nombreEjercicio a {
    margin-right:6px;
    margin-left:6px;
    text-decoration:none;
}
.contenido .nombreEjercicio {
   background: none repeat scroll 0 0 #F5F5F5;
    border-bottom: 1px solid #DADADA;
    border-top: 1px solid #E1E1E1;
    height: 84px;
    margin: 10px auto 20px;
  
    text-align: center;
    width: 781px;
}

.contenido .botonCambio {
    color:#000;
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    font-family:Arial, Helvetica, sans-serif;
    line-height: 84px;
    padding-left: 3px;
    padding-right: 3px;
    position: relative;
    text-align: center;
   }


/****fin*/

.contenido .meyer{
	display:none;
}
.contenido .tuboEns{
	display:none;
}
.contenido .btnAct input {
	display:none;
}
.contenido .siguiente{
	display: none;
}
.contenido .contenedorCentro .btn_1 {
	text-indent:-9999px;
	
}
.contenido .circuloElemento:before {
    position: absolute;
    text-indent: 0;
    display:inline-block;
    top:0px;
    left:0px;
}
.contenido .circuloElemento.btn_0:before {
    content: "Na"
    }
.contenido .circuloElemento.btn_1:before {
	content: "Cl";
}

/**** circuloElemento ****/
.contenido .circuloElemento {
	font-size:0.8em;
    display: inline-block;
    float: left;
    margin: 10px 5px;
    position: relative;
    height: 80px;
    width: 74px;
    line-height:36px;
    border:1px solid #454545;
}
.contenido .circuloElemento:before {
    display: inline-block;
    position: absolute;
    text-indent: 0;
    top:35px;
    left:30px
    line-height:5px;
    font-size:2.5em;
}
/* elemntos por color */
.contenido .circuloElemento.btn_0:before {
    content: "Na"
    }
.contenido .btn_0 {
	background:#92C788;
	color:#214820;
}
.contenido .circuloElemento.btn_1:before {
	content: "Cl";
}
.contenido .btn_1 {
	background:#ECC45C;
	color:#553D14;
}
.contenido .circuloElemento.btn_2:before {
	content: "H";
}
.contenido .btn_2 {
	background:#93D2F4;
	color:#366275;
}
.contenido .circuloElemento.btn_3:before {
	content: "O";
}
.contenido .btn_3 {
	background:#24356C;
	color:#CEDAF1;
}
.contenido .circuloElemento.btn_4:before {
	content: "Ag";
}
.contenido .btn_4 {
	background:#7D7F7D;
	color:#2A2A2B;
}
.contenido .circuloElemento.btn_5:before {
	content: "N";
}
.contenido .btn_5 {
	background:#D15068;
	color:#5F1D27;
}
.contenido .circuloElemento.btn_6:before {
	content: "C";
}
.contenido .btn_6 {
	background:#553D14;
	color:#ECC45C;
}
.contenido .circuloElemento.btn_7:before {
	content: "Uup";
}
.contenido .btn_7  {
	background:#A17DB7;
	color:#322050;
}
/*elemnto por tamaño actividad 1 */

.contenido .contentodo{
	display:none;
}
.contenido .ligaCompuestos{
	display:inline-block;
   margin-right:25px;
	margin:left:25px;
	   width: 280px;
	   float :right;

}
.contenido .ligaCompuestos a,
.contenido .formulaComp {
    border: 1px solid #C6B9B9;
    color: #2A4955;
    display: block;
    font-size: 0.95em;
    height: 50px;
    line-height: 37px;
  
	margin-top:40px;
    position: relative;
    text-decoration: none;
 
    text-align:center;
}
.contenido .formulaResultado{
	 margin-right:450px;
	margin:left:25px;
	   width: 200px;
}
.contenido .MezcladorSaturado{
	display:none;
}
.contenido .ejerBloqueado{
	display:none;
}