/**********************FUENTES***************************************/
html{
  height: 100%;
}

@font-face {
    font-family: 'ambrosia_demoregular';
    src: url('../fonts/ambrosia-demo-webfont.eot');
    src: url('../fonts/ambrosia-demo-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ambrosia-demo-webfont.woff2') format('woff2'),
         url('../fonts/ambrosia-demo-webfont.woff') format('woff'),
         url('../fonts/ambrosia-demo-webfont.ttf') format('truetype'),
         url('../fonts/ambrosia-demo-webfont.svg#ambrosia_demoregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    font-stretch:normal;

}


@font-face {
    font-family: 'allerbold';
    src: url('../fonts/aller_bd-webfont.eot');
    src: url('../fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aller_bd-webfont.woff2') format('woff2'),
         url('../fonts/aller_bd-webfont.woff') format('woff'),
         url('../fonts/aller_bd-webfont.ttf') format('truetype'),
         url('../fonts/aller_bd-webfont.svg#allerbold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    font-stretch:normal;

}




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




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




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



/**********************TERMINA FUENTES***************************************/

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

.oacontext .header{
background: rgba(184,225,240,0.89);
background: -moz-linear-gradient(top, rgba(184,225,240,0.89) 0%, rgba(184,225,240,0.88) 0%, rgba(249,245,213,0.88) 85%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(184,225,240,0.89)), color-stop(0%, rgba(184,225,240,0.88)), color-stop(85%, rgba(249,245,213,0.88)));
background: -webkit-linear-gradient(top, rgba(184,225,240,0.89) 0%, rgba(184,225,240,0.88) 0%, rgba(249,245,213,0.88) 85%);
background: -o-linear-gradient(top, rgba(184,225,240,0.89) 0%, rgba(184,225,240,0.88) 0%, rgba(249,245,213,0.88) 85%);
background: -ms-linear-gradient(top, rgba(184,225,240,0.89) 0%, rgba(184,225,240,0.88) 0%, rgba(249,245,213,0.88) 85%);
background: linear-gradient(to bottom, rgba(184,225,240,0.89) 0%, rgba(184,225,240,0.88) 0%, rgba(249,245,213,0.88) 85%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1f0', endColorstr='#f9f5d5', GradientType=0 );


height:114px;

	}

.contenido .fase.conmenu {

}

.contenido .fase:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

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

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

.contenido.clearfix {
    background: rgba(251,251,244,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(251,251,244,1) 0%, rgba(251,251,244,1) 27%, rgba(248,244,211,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(251,251,244,1)), color-stop(27%, rgba(251,251,244,1)), color-stop(100%, rgba(248,244,211,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(251,251,244,1) 0%, rgba(251,251,244,1) 27%, rgba(248,244,211,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(251,251,244,1) 0%, rgba(251,251,244,1) 27%, rgba(248,244,211,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(251,251,244,1) 0%, rgba(251,251,244,1) 27%, rgba(248,244,211,1) 100%);
background: radial-gradient(ellipse at center, rgba(251,251,244,1) 0%, rgba(251,251,244,1) 27%, rgba(248,244,211,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbf4', endColorstr='#f8f4d3', GradientType=1 );
 font-family:'allerregular' ;

 
}

.clearfix:after {
    content: "";
    display: block;
    height: 0px;
    clear: both;
    visibility: visible;
}


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



.contenido .tooltip-content img {
    display: block;
    float: left;
   height:auto;
    margin-right: 0;
    position: none;
    width: auto;
}



.contenido .portada .imagen_mulato > img {
    border: 1px solid #3a2700;
    border-radius: 10px;
    height: auto;
    max-width: 575px;
    padding: 6px;
    width: 100%;
}


.contenido .portada .imagen_mulato {
    display: inline-block;
    margin-left: 5%;
    position: relative;
    top: -29px;
    width: 40%;
}


.contenido .portada .box.bg-1 {
    position: relative;
   
    top: 25px;
}


.contenido .portada .texto {
     display: inline-block;
    position: relative;
    top: -66px;
    width: 45%;
}


.contenido .portada .boton_bocina {
    display: inline-block;
    position: absolute;
    top: 104px;
    width: 58px;
    height: 57px;
    background-image: url("../img/portada/bocina.png");
    cursor: pointer;
}

.contenido .portada .boton_bocina a{
  display: none;
}

.contenido .portada .boton_bocina .mejs-button{
  width: 58px;
  height: 57px;
  opacity: 0;
}

.contenido .fase.portada .imagen_mulato > p {
    color: #894a03;
    font-size: 0.9em;
    width: 100%;
}


.fase.portada span {
    color: #ab5b01;
}

.fase.portada span.capital{
	color:#2b1201;
}

.contenido .portada h1{
	 background-image: url("../img/portada/acento_letras.png");
    background-position: 372px 4px;
    background-repeat: no-repeat;
    color: #603813;
    font-family: "ambrosia_demoregular",Helvetica;
    font-size: 3em;
    margin-left: 15%;
    padding-top: 26px;
    width: 500px;

    }


.contenido .fase.portada p {
      color: #2b1201;
    display: inline-block;
    font-size: 1em;
    margin-left: 3%;
   
    margin-bottom: 0;
}

.contenido .btn-icono.btn-menu{
	 background-image: url("../img/portada/menu_principal.png");
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    height: 76px;
    top: 87%;
    width: 71px;
}

.contenido .btn-icono {
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;    
   }
   
.contenido .menu{
	 background: none;
    bottom: 19px;
    left: 85px;
   width: 20%;
  text-align: left;
}

/**********************
 * mendel y los chicharos
 ***********/


.contenido .exposicion1 .tooltip-text{
    border-radius: 6px;
    color: #000;
    font-size: 1.2em;
}


.contenido .exposicion1 .bg-1 .button.siguiente {
    top: -13%;
}



.contenido .fase.exposicion1{
 background-image: url("../img/mendel_chicharos/planta_chicharos.png");	
  background-position: right center;
     background-repeat: no-repeat;
     
}

.contenido .fase.actualidad{
  background-image: url("../img/mendel_actualidad/cromosoma.png");  
  background-position: left 252px;
     background-repeat: no-repeat;
}


.contenido .tooltip-content.clearfix.chicharos_todos {
    bottom: -121px;
    left: -606px;
    padding-left: 50px;
    right: auto;
    width: 463px;
    
}

.contenido .tooltip-content.clearfix.chicharos_todos::before {
    left: 512px;
    top: 436px;
}


.contenido .partes_gralChicharos {
    display: inline-block;
   
}

.contenido .partes_gralChicharos .columna {
     float: left;
    margin-right: 30px;
    width: 38%;
}


.contenido .partes_gralChicharos .columna.dos {
    margin-top: 9%;
}


.contenido .partes_gralChicharos .texto {
    color: #b86609;
    display: block;
}

.contenido .exposicion2 .tooltip-item {
   border: none;
  float: left;
  margin: 0;
  padding: 0;
    display: inline-block;
}

.contenido .partes_chicharo.semilla {
 border: 1px solid #324f01;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px;
    text-align: center;
    width: 100%;
}

.contenido .semilla .tipo_flor {
     color: #326a06;
    display: block;
}


.contenido .ejemplosChicharos {
    display: inline-block;
}






.contenido .partes_chicharo.flor .tooltip-item > img {
    padding-left: 7px;
  padding-top: 7px;
}


.contenido .exposicion2 .tipo_flor {
   border-radius: 6px;
    color: #324f01;
    float: left;
    font-size: 1.3em;
    margin-left: 42%;
    vertical-align: bottom;
}






.contenido .tooltip-content-image::after {
    border: 1px solid #324f01;
    bottom: -16px;
    content: "";
    position: absolute;
    right: -45px;
    -moz-transform: rotate(37deg);
    -webkit-transform: rotate(37deg);
    transform: rotate(37deg);
    width: 50px;
}

.contenido .tooltip-content-image.axial_alta {
    top: -43px;
}

.contenido .tooltip-content-image.terminal_alta{
    left: 16px;
    top: -45px;
}

.contenido .tooltip-content-image.axial_baja{
    left: -104px;
    top: 71px;
   }
    
   .contenido .tooltip-content-image.terminal_baja {
   top: 70px;
  }
    
    .contenido .tooltip-content-image.vaina_verde{
      height: 35px;
    left: 17px;
    top: -33px;
    width: 56px;	
    }
    
    .contenido .tooltip-content-image.vaina_arrugada{
    height: 35px;
    left: 17px;
    top: 24px;
    width: 82px;		
   
   }
    .contenido .tooltip-content-image.vaina_apretada{
    height: 35px;
    left: 17px;
    top: -25px;
    width: 82px;
    }
    
    .contenido .tooltip-content-image.vaina_amarilla{
    height: 35px;
    left: 17px;
    top: 36px;
    width: 72px;		
    }


.contenido .tooltip-content-image.semilla_verde{
	   height: 35px;
    left: 54px;
    width: 56px;
}

.contenido .tooltip-content-image.semilla_arrugada{
	    height: 35px;
    left: 54px;
    width: 82px;
}

.contenido .tooltip-content-image.semilla_lisa{
	    height: 35px;
    left: 70px;
    top: -42px;
    width: 40px;
}

.contenido .tooltip-content-image.semilla_amarilla{
	  height: 35px;
    left: 64px;
    width: 72px;
}
/**********************
 *actualidad
 ***********/
.contenido .fase.mendelA.fases{
color:#280026;
}


.contenido .fase.mendelA.fases .titulo {
    color: #44023f;
}


.contenido .fase.actualidad:after {
    background-image: url("../img/mendel_actualidad/cromosoma2.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    bottom: 0;
    content: "";
    height: 385px;
    left: 192px;
    position: absolute;
    width: 545px;
}

.contenido .fase.fases.mendelA .titulo::before {
    background: url("../img/general/menu.png") no-repeat scroll -59px -147px;
    height: 56px;
    -moz-transform: rotate(172deg);
    -webkit-transform: rotate(172deg);
    transform: rotate(172deg);
    width: 57px;
   }
   
.contenido .fase.fases.mendelA .titulo::after {    
    border-color: #b252bf;
    -moz-box-shadow: 2px 2px 1px 0 rgba(177, 82, 191, 0.2); 
    -webkit-box-shadow: 2px 2px 1px 0 rgba(177, 82, 191, 0.2);
    -o-box-shadow: 2px 2px 1px 0 rgba(177, 82, 191, 0.2);  
    box-shadow: 2px 2px 1px 0 rgba(177, 82, 191, 0.2);    
}


.contenido .ejemploActualidad .button.siguiente {
    display: inline-block;
}

.contenido .fase.ejemploActualidadHibrido p.instrucciones {
    width: 65%;
}

.contenido .ejemploActualidadHibrido .ejercicioAlelosHibridos {
   
    height: 589px;
   
}


.contenido .ejemploActualidad .botonesFenotiposHibridos .blanco {
    left: 128px;
}


.contenido .animacionPunnett p {
    background-color: rgba(164, 176, 166, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 10px;
    margin-left: 21px;
    padding: 5px;
    width: 80%;
}


.contenido .animacionPunnett .primerPaso::after {
    background-image: url("../img/mendel_actualidad/reginald_punnett.png");
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.64);
    border-radius: 16px;
    content: "";
    height: 188px;
    padding: 2px;
    position: absolute;
    right: 25px;
    top:66px;
    width: 148px;
}


.contenido .animacionPunnett p.segundoPaso{
  -webkit-transform: translate3d(0,20px,0);
  -moz-transform: translate3d(0,20px,0);
  -o-transform: translate3d(0,20px,0);
  transform: translate3d(0,20px,0);
  opacity: 0;
  transition: all 1s;
}

.contenido .animacionPunnett p.segundoPaso.muestra{
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}


.contenido .mendelProbabilidad .button.button--winona.button--border-thin.button--round-s {
    left: 19%;
    margin-left: 4%;
    margin-bottom: 16px;
      font-size: 1.5em;
}

.contenido .mendelProbabilidad .bg-1 .button.siguiente {
    bottom: -109px;
}

.contenido .mendelProbabilidad .button.button--winona.button--border-thin.button--round-s .acento {
     color: #516d0e;
    font-size: 0.85em;
    font-weight: 100;
    margin-right: 2px;
}




/*******dominancia****/


.contenido .fase.domA.fases .titulo::before {
    background-position:  -116px -147px;
    height: 59px;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
    width: 57px;
    left: -65px;
}

.contenido .domA h3 {
    color: #5e3002;
}

.contenido .fase.domA.fases .titulo::after {
    border-color: #845935;
    -moz-box-shadow: 2px 2px 1px 0 rgba(132, 89, 53, 0.23);
    -webkit-box-shadow: 2px 2px 1px 0 rgba(132, 89, 53, 0.23);
    -o-box-shadow: 2px 2px 1px 0 rgba(132, 89, 53, 0.23);
    box-shadow: 2px 2px 1px 0 rgba(132, 89, 53, 0.23);
}

.contenido .domA {
	color:#2B2215;
}

	.contenido .fase.domA p.instrucciones {
    color: #6b3601;
}


.contenido .domA .derecha {
    border-collapse: collapse;
    font-family: "ambrosia_demoregular";
    font-size: 1.8em;
}




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

.contenido .fase.ejer.fases .titulo::before {
     background-position: -174px -32px;
    height: 56px;
    left: -46%;
    -moz-transform: rotate(121deg);
    -webkit-transform: rotate(121deg);
    transform: rotate(121deg);
}

.contenido .fase.ejer.fases .titulo::after{
 border-color: #036777;
 -moz-box-shadow: 2px 2px 1px 0 rgba(3, 102, 119, 0.21);
 -webkit-box-shadow: 2px 2px 1px 0 rgba(3, 102, 119, 0.21);
 -o-box-shadow: 2px 2px 1px 0 rgba(3, 102, 119, 0.21);
 box-shadow: 2px 2px 1px 0 rgba(3, 102, 119, 0.21);
}





.contenido .fase.ejer.fases .titulo::before {
    background: rgba(0, 0, 0, 0) url("../img/general/menu.png") no-repeat scroll -172px -144px;
    left: -47%;
    top: -19px;
    -moz-transform: rotate(124deg);
    -webkit-transform: rotate(124deg);
    transform: rotate(124deg);
    
}

.contenido .ejer h3  {
    color: #01484c;
}

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

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

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



/*****
 *experimentos 
 */
 
 

.contenido .padreUno.padres_flores {
    margin: 1% 18% 1% 20%;
}




.contenido .seleccionExperimentos h2 a::before, .contenido .seleccionEjercicios h3.bullets a::before {
    border: 1px solid #3d2c7a;
    border-radius: 50px;
    content: "";
    height: 20px;
    left: -30px;
    position: absolute;
    width: 20px;
    top:1px;
}

.contenido .seleccionEjercicios h3.bullets a::before{
	border: 1px solid #095152;
}

.contenido .seleccionExperimentos h2 a::after, .contenido .seleccionEjercicios h3.bullets a::after{
    background-color: #554299;
    border-radius: 30px;
    content: "";
    height: 18px;
    left: -28px;
    position: absolute;
    top: 3px;
    width: 18px;
}

.contenido .seleccionEjercicios h3.bullets a::after{
	background-color: #095152;
}

.contenido .seleccionExperimentos h2 a{
      border-bottom: 1px solid rgba(78, 26, 164, 0.39);
    color: #350a7b;
    display: inline-block;
    font-family: "ambrosia_demoregular";
    font-size: 1em;
    font-weight: normal;
    margin-left: 69%;
    padding-bottom: 1px;
    position: absolute;
    top: 70px;
}

 .contenido .seleccionEjercicios h3.bullets > a:hover {
     color: #119b9d;
}


 .contenido .seleccionEjercicios h3.bullets a {
    border-bottom: 1px solid rgba(26, 103, 164, 0.39);
    color: #095152;
    display: inline-block;
    margin-left: 69%;
    padding-bottom: 1px;
 }


.contenido .seleccionEjercicios h3.bullets a{
    margin-left: 0;
    position: relative;
    top: 0;
}

.contenido .seleccionExperimentos h2 a:hover{
	color: #560A7B;
	
}

.contenido .seleccionEjercicios h3.bullets a:hover{
	color: #119b9d;
}

.contenido .seleccionExperimentos h2 a:hover:after {
	background-color: #813580;
}

.contenido .seleccionEjercicios h3.bullets a:hover:after{
	background-color: #119b9d;
}

.contenido .fase.experimentos.fases {
    color: #14012d;
}


 .contenido .fase.experimentos.fases .titulo::before {
     background-position: -172px -88px;
    height: 57px;
    left: -61px;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 59px;
}


.contenido .experimentos p.instrucciones::after {
    border-color: rgba(91, 64, 160, 0.14);
}


.contenido .experimentos.fase p.instrucciones {
	border-color: #5A40A0;
	color:#433582;
}

.contenido .fase.experimentos.fases .titulo {
    color: #3d2c7a;
}

.contenido .experimentos h2 {
    color: #5e5082;
    margin-left: 5%;
}

.contenido .fase.experimentos.fases .titulo::after{
	border-color:#3D2C7A;
	-moz-box-shadow: 0 2px 1px 0 rgba(91, 64, 160, 0.28);
	-webkit-box-shadow: 0 2px 1px 0 rgba(91, 64, 160, 0.28);
	-o-box-shadow: 0 2px 1px 0 rgba(91, 64, 160, 0.28);
	box-shadow: 0 2px 1px 0 rgba(91, 64, 160, 0.28);
	
}

.contenido .experimentos .instrucciones.Dos {
    margin-top: 65px;
}

.contenido .fase.experimentos.fases.experimentoLibre p.instrucciones {
    text-align: center;
    width: 20%;
}

.contenido .fase.experimentos.fases.experimentoLibre p.instrucciones.dos{
	width: 55%;
}

.contenido .experimentoLibre .offspringF2, .contenido .experimentoLibre .offspring{
    border: 1px solid #5a40a0;
    border-radius: 10px;
    color: #5e3c88;
    font-size: 1.05em;
    margin: auto;
    position: relative;
    top: -54px;
    width: 90%;
}

/*
.contenido .experimentoLibre .offspring-next{
    width: 20%;
    margin: auto;
    border-radius: 10px;
    border: 1px solid #5A40A0;
}*/

.contenido .experimentoLibre .offspringF2 .plantitaLibre, .contenido .experimentoLibre .offspring .plantitaLibre, .contenido .experimentoGuiado .filial .plantitaGuiada, .contenido .experimentoGuiado .filial .plantitaGuiadaExtra,
.contenido .experimentoGuiado .filial2 .plantitaGuiadaExtra, .contenido .experimentoGuiado .filial2 .plantitaGuiada{
    margin: auto;
    display: inline-block;
    max-width: 12%;
}

.contenido .experimentoLibre .offspringF2 .plantitaLibre .florHijo, .contenido .experimentoLibre .offspring .plantitaLibre .florHijo, .contenido .experimentoGuiado .filial .plantitaGuiada .florHijo,
.contenido .experimentoGuiado .filial2 .plantitaGuiada .florHijo, .contenido .experimentoGuiado .filial .plantitaGuiadaExtra .florHijo, .contenido .experimentoGuiado .filial2 .plantitaGuiadaExtra .florHijo{
    width: 60%;
}

.contenido .experimentoLibre .offspringF2 .plantitaLibre .florHijoChicharo, .contenido .experimentoLibre .offspring .plantitaLibre .florHijoChicharo, .contenido .experimentoGuiado .filial .plantitaGuiada .florHijoChicharo,
.contenido .experimentoGuiado .filial2 .plantitaGuiada .florHijoChicharo, .contenido .experimentoGuiado .filial .plantitaGuiadaExtra .florHijoChicharo, .contenido .experimentoGuiado .filial2 .plantitaGuiadaExtra .florHijoChicharo{
    width: 30%;
}

.contenido .flores-elegir {
    border: 1px solid #5a40a0;
    border-radius: 10px;
    margin-left: 5%;
    width: 90%;
}


.contenido .padres_flores_1, .contenido .padres_flores_2 {
    display: inline-block;
    margin-bottom: 1%;
    margin-left: 10%;
    margin-top: 1%;
}


.contenido .parentalesExpLibre > h2 {
    font-size: 1.4em;
    text-align: center;
}



/******Ejercicios*****/



.contenido .ejer p.instrucciones::after {
    border-color: rgba(18, 96, 103, 0.15);
}

.contenido .fase.ejer p.instrucciones  {
    border-color: #036777;
     color: #024863;
}

.contenido .fase.ejer p.instrucciones-1::after {
    border: 1px solid rgba(87, 108, 17, 0.14);
    content: "";
    display: inline-block;
    margin-top: 5px;
}



.contenido .fase.ejer p.instrucciones-1{
	border:1px solid #036777;
     color: #024863;  
    border-radius: 10px;
    margin-left: 28px;
    padding: 5px 5px 9px;
    width: 93%;
}


.contenido .fase.ejer p.instrucciones-1 > span {
    font-weight: bold;
    
}

/********
 * general
 */
/**/

.contenido .conclusiones .titulo {
     border-bottom: 1px solid rgba(132, 93, 4, 0.38);
    color: #5e3002;
    font-family: "allerregular";
    font-size: 1.5em;
    margin-left: 7%;
}


.contenido .conclusion-1, .contenido .conclusion-2 {
    
    border-bottom: solid 1px #965603;
    display: block;
    margin: auto auto 33px;
    padding-right: 7px;
    width: 90%;
}


.contenido .conclusion-1 li, .contenido .conclusion-2 li, .contenido .conclusion-3 li {
   background-image: url("../img/dominancia/bullet.png");
    background-position: -2px top;
    background-repeat: no-repeat;
    color: #482901;
    list-style-type: none;
    margin-bottom: 28px;
    margin-left: 3%;
    padding-left: 5px;
   
}


.contenido .resultante1 .droppable.ui-droppable {
    margin-top: 30px;
}


.contenido .content_drop_P .droppable, .contenido .content_drop_H .droppable {
    margin: 0;
}

.contenido .aleloR.resultante1 {
    top: 37px;
}

.contenido .aleloR.resultante2 {
    top: 19px;
}


.contenido .aleloR.resultante3 {
    top: 4px;
}


.contenido .aleloR.resultante4 {
    top: -3px;
}


.contenido .animacionPunnett .todo .box.bg-1 {
    display: block;
    margin-bottom: 195px;
}



.contenido .animacionPunnett .todo {
    
    display: block;
   
    width: 100%;
       border: 1px solid rgba(234, 234, 234, 0.01);
   
}



.contenido .titulo-plantas span {
    color: #834d99;
}

.contenido .titulo-plantas {
    color: #4e046d;
    font-size: 1.1em;
    margin-left: 44%;
}



.contenido .experimentoLibre .instrucciones span {
    color: #37076d;
    font-weight: bold;
}

   
   
.contenido .cruza-guiada .instrucciones, .contenido .instrucciones-fase-1, .contenido .experimentoLibre .instrucciones {
     border: 1px solid #5a40a0;
    border-radius: 11px;
    padding: 5px;
    width: 75%;
    margin-left: 20px;
   }
   
   
.contenido .experimentoLibre .flores-elegir {
    position: relative;
    top: -199px;
}
   


.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.a {
      margin-left: -55px;
}


.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.d::before {
     height: 34px;
    left: 0;
    top: -32px;
    -moz-transform: rotate(77deg);
     -webkit-transform: rotate(77deg);
      transform: rotate(77deg);
    width: 75px;
}



.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.c::before {
   height: 48px;
    left: 46px;
    top: -42px;
    -moz-transform: rotate(133deg);
    -webkit-transform: rotate(133deg);
    transform: rotate(133deg);
    width: 25px;
}


.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.b::before {
       height: 48px;
    left: 57px;
    top: -43px;
    -moz-transform: rotate(140deg);
     -webkit-transform: rotate(140deg);
      transform: rotate(140deg);
    width: 24px;
}

.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #5b3f01 -moz-use-text-color -moz-use-text-color #5b3f01;
    border-image: none;
    border-radius: 50%;
    border-style: solid none none solid;
    border-width: 1px medium medium 1px;
    content: "";
    height: 65px;
    position: absolute;
      right: 77px;
    top: -52px;
    -moz-transform: rotate(18deg);
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);    
        right: 94px;
    top: -52px;
    width: 22px;
}


.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes {
    display: inline-block;
    position: relative;
    width: 116px;
}



.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes span {
	 margin-left: -4%;
    margin-right:4%;
    border: 1px solid #5B3F01;
    border-radius: 50%;
    color: #41024c;
    display: inline-block;
    font-size: 2.2em;
    height: 40px;
    padding: 5px;
    text-align: center;
    width: 40px;
}	

.contenido .mapaExperimentoCompleto .generacionF2.dos span {
    margin-left: -4%;
    margin-right: 10%;
    border: 1px solid #005B8E;
    border-radius: 50%;
    color: #41024c;
    display: inline-block;
    font-size: 2.2em;
    height: 40px;
    padding: 5px;
    text-align: center;
    width: 40px;
}

.contenido .mapaExperimentoCompleto .parental.dos span.recesivo::before {
      background-image: url("../img/ejercicios/chicharos/partes/linea_roja.png");
    content: "";
    height: 93px;
    left: -102px;
    position: absolute;
    top: -7px;
    width: 127px;
}







.mapaExperimentoCompleto .generacionF1.dos::after {
    border-left: 1px solid #005b8e;
    border-radius: 55%;
    border-right: 1px solid #005b8e;
    border-top: 1px solid #005b8e;
    bottom: -9px;
    content: "";
    display: block;
    height: 20px;
    left: -7px;
    position: absolute;
    width: 290px;
}

.contenido .mapaExperimentoCompleto .generacionF1.dos::before {
    border-left: 1px solid #ad02b2;
    border-radius: 55%;
    border-right: 1px solid #ad02b2;
    border-top: 1px solid #ad02b2;
    content: "";
    display: block;
    height: 20px;
    left: 23px;
    position: absolute;
    top: -12px;
    width: 224px;
}
.contenido .mapaExperimentoCompleto .generacionF1.dos {
    position: relative;
}



.contenido .mapaExperimentoCompleto  .generacionF1.dos span{
border: 1px solid #AD02B2;
    border-radius: 50%;
    color: #41024c;
    display: inline-block;
    font-size: 2.2em;
    height: 40px;
    margin-right: 3%;
    padding: 5px;
    text-align: center;
    width: 40px;
     margin-bottom: 31px;
}


   
   
.contenido .mapaExperimentoCompleto .tablaExperimento {
    margin-left: 36%;
    width: 60%;

}
	
	

.contenido .mapaExperimentoCompleto .parental.dos .recesivo, 
.contenido .mapaExperimentoCompleto .generacionF2.dos .recesivo, 
.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes span.recesivo  {
    color: #7960BA;
}


.contenido .mapaExperimentoCompleto .parental.dos span {
     border: 1px solid #EF0606;
    border-radius: 50%;
    color: #41024c;
    display: inline-block;
    font-size: 2.5em;
    height: 50px;
    margin-left: 36px;
    margin-right: 3%;
    padding: 5px;
    text-align: center;
    width: 50px;
    position: relative;
}
	
.contenido .leccion {
    margin-top: 50px;
}



	.contenido .preguntasPunnett .correcto.ventana .btn-close {
    top: 61px;
   }
	
	.contenido .preguntasPunnett .correcto.ventana span.bien{
		 color: #324f01;
    font-size: 1.5em;
    left: 45%;
    position: absolute;
    top: 41px;
	}
	
.contenido .preguntasPunnett .correcto.ventana span{
	 color: #603813;
    font-size: 1em;
    left: 0;
    position: relative;
    top: 0;
}
	
.contenido .preguntasPunnett .correcto.ventana ul li {
    list-style-type: none;
}

	
.contenido .preguntasPunnett .correcto.ventana {
    padding-left: 134px;
    padding-right: 91px;
}


.contenido .incorrecto.ventana .btn-close, .contenido .incorrecto.ventana {	
background-color: #E56A6A;
}

.contenido .correcto.ventana, .contenido .correcto.ventana .btn-close{
background-color: #f6f9ea;	
}
	

.contenido .ventana .btn-close {
    border: 2px solid #324f01;
    border-radius: 70% 14%;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    font-family: "ambrosia_demoregular";
    font-size: 2.5em;
    height: 18px;
    padding: 13px;
    top: 6px;
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
    width: 37px;
    
}

.contenido .ventana.ventanaFC.creditos span {
    left: auto;
    position: relative;
    top: 0;
}


.contenido .ventanaFC.creditos .info ul.columna span {
    color: #243e00;
    font-size: 1em;
}


.contenido .ventanaFC.creditos .entidad{
	border:none;
}

.contenido .ventanaFC .btn-close, 
.contenido .ventana.ventanaFC.creditos .btn-close,
.contenido .ventana.ventanaFC.bibliografia {
     background: #f4f0d7 none repeat scroll 0 0;
    color:#445f03;
     right: 68px;
}

.contenido .ventanaFC .leyenda {
    font-size: 0.8em;
    padding: 14px 55px 0 50px;
}

.ventana.ventanaFC.fichaDidactica, .contenido .ventana.ventanaFC.creditos, .contenido .ventana.ventanaFC.bibliografia {
    background: #f4f0d7 none repeat scroll 0 0;
}


.contenido .ventanaFC .titulo {
       border-bottom: 1px solid #2b4e02;
    color: #445f03;
    font-family: "allerregular";
    font-size: 1rem;
    margin: 10px auto 0;
    padding: 5px 10%;
    text-align: center;
    text-transform: uppercase;
    width: 28%;
}
.contenido .ventanaFC .info h4{
	color: #482502;
}
.contenido .ventanaFC .info {
    font-family: "allerregular";
    padding-left: 44px;
    padding-right: 10px;
     color: #482502;
}

	
.contenido .ventana .leyenda > span {
    font-size: 1.1em;
    left: auto;
    position: relative;
    top: auto;
}
	
.contenido .ventana span {
    color: #324f01;
    font-size: 1.5em;
    left: 45%;
    position: absolute;
    text-align: center;
    top: 46px;
}
	
.contenido .ventana {
    border: 2px solid #324f01;
    border-radius: 56%;
    bottom: 137px;
    padding: 60px;
    top: auto;
     max-width: 700px;
}


.contenido .ventana::after {
    background-image: url("../img/rama.png");
    bottom: -143px;
    content: "";
    height: 173px;
    position: absolute;
    right: -39px;
    width: 270px;
}
	
.contenido .mapaGeneraciones .tooltip-content.clearfix {
    margin-left: -83px;
}


.contenido .mapaGeneraciones .tooltip-content.clearfix::before {
    left: 108px;
    top: 110px;
    width: 31px;
}


.contenido .puraSub.vio::before, .contenido .puraSub.blanca::before {
     border: 1px solid #ef0606;
    border-radius: 50%;
    content: "Puro";
    height: 35px;
    left: -53px;
    padding-top: 15px;
    position: absolute;
    top: 0;
    width: 50px;
}

.contenido .aleloE.parentalm1 {
    background-image: url("../img/mendel_actualidad/cromosoma3.png");
   }
	
.contenido .puraSub.vio img, .contenido .puraSub.blanca img {
   position: relative;
    top: 13px;
}

	
.contenido .puraSub.vio, .contenido .puraSub.blanca, 
.contenido .genHibrido {
    border: 1px solid #ef0606;
    border-radius: 50%;
    content: "";
    height: 120px;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 120px;
     margin-right: 10%;
}


.contenido .exposicion1 ol li {
    margin-bottom: 34px;
    margin-left: 42px;
    line-height: 30px;
}


.contenido .genHibrido::before {
    border: 1px solid #ad02b2;
    border-radius: 50%;
    content: "Híbrido";
    height: 40px;
    left: -63px;
    padding-top: 20px;
    position: absolute;
    top: 0;
    width: 60px;
}

.contenido .genHibrido {
    border: 1px solid #ad02b2;
   display: inline-block;
    position: relative;
}


.contenido .genHibrido > img {
    position: relative;
    top: 13px;
}


.contenido .parentales.uno::before {
    background-image: url("../img/ejercicios/chicharos/partes/linea_roja.png");
    content: "";
    height: 93px;
    left: 48%;
    position: absolute;
    top: 93px;
    width: 127px;
}
.contenido .parentales.uno {
    position: relative;
    top: 10px;
}

	.contenido .parentales {
       color: #ef0606;
    margin-right: 31.5%;
    width: 100%;
}
	
.contenido .puraSub {
    border: 1px solid #ef0606;
    border-radius: 50%;
    color: #7b2bc0;
    display: inline-block;
    height: 35px;
    padding-top: 15px;
    text-align: center;
    width: 50px;
  position: relative;
}


.contenido .generacionF3 {
    color: #5b3f01;
    display: inline-block;
    position: relative;
    top: 8px;
    width: 100%;
}



.contenido .generacionF3.dos {
    margin-bottom: 174px;
}




.contenido .generacionF2 {
     color: #005b8e;
    margin-right: 6.5%;
    width: 100%;
    
}


.contenido .generacionF2.uno::before {
    background-image: url("../img/ejercicios/chicharos/partes/linea_azul.png");
    content: "";
    height: 80px;
    left: 28%;
    position: absolute;
    top: -35px;
    width: 593px;
}
.contenido .generacionF2.uno {
    position: relative;
    top: 17px;
}

	
.contenido .generacionF1 {
    color: #ef0606;
}


.contenido .generacionF1 {
    color: #ad02b2;
    margin-right: 40%;
    margin-top: 6%;
    width: 100%;
}


.contenido .droppable.genF2 {
    border: 1px solid #005b8e;
    height: 40px;
    margin-left: 8%;
    padding: 20px 0 0;
    text-align: center;
    width: 60px;
}


.contenido .opciones-generacion {
    text-align: right;
    width: 100%;
}

.contenido .opciones-generacion .hibrido, .contenido .opciones-generacion .pura {
    background-color: rgba(80, 3, 118, 0.31);
    border: 1px solid rgba(119, 13, 135, 0.64);
    border-radius: 10px;
    color: #6304a0;
    margin-right: 3%;
    padding: 5px;
    text-transform: uppercase;
}


.contenido .opciones-generacion .pura {
    margin-right: 5%;
}

.contenido .droppable.genF2.blanca::after{
	background-image: url("../img/mendel_chicharos/planta_partes/blancaCh.png");
}

.contenido .droppable.genF2:after{
	      background-image: url("../img/mendel_chicharos/planta_partes/moradaCh.png");
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid #005b8e;
    border-radius: 50%;
    content: "";
    display: block;
    height: 84px;
    left: 59px;
    position: absolute;
    top: 16px;
    width: 84px;
}

.contenido .instriccion {
    color: #320170;
    display: block;
    margin-top: 12px;
}

.contenido .contenedor_generaciones {
     border: 1px solid #392a70;
    border-radius: 15px;
    margin: auto;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-top: 2%;
    width: 94%;
}


.contenido .instruccionesExp {
   color: #2b002a;
    margin: 50px auto 0;
    width: 90%;
}
	
.contenido .relacion-input {
    display: inline-block;
    margin: 20px 0 137px 28%;
    width: 50%;
}


.contenido .variedadesInput {
    border: 1px solid #5a40a0;
    border-radius: 50px;
    color: #53037a;
    font-size: 3em;
    height: 80px;
    padding: 5px;
    width: 80px;
    text-align: center;
}


.contenido .relacion-input > span {
    color: #5e0484;
    font-size: 2.5em;
}


.contenido .tablaCaracteristicas .important{
    font-size: 1.3em;
}

.contenido .tablaCaracteristicas .instrucciones {
     border-color: #8e3a85;
    color: #190133;
    width: 90%;
}


.contenido .tablaCaracteristicas .tooltip-item, .contenido .mapaGeneraciones .tooltip-item {
	 color: #53037a;
	 border: 1px solid #8e3a85;
}
.contenido .tablaCaracteristicas .tooltip-text, .contenido .mapaGeneraciones .tooltip-text{
    color: #300362;
    font-size: 1.15em;
}


.contenido .tablaCaracteristicas .tooltip-content.clearfix::before, .contenido .mapaGeneraciones .tooltip-content.clearfix::before{
    border: 1px solid #14012d;
    
}

.contenido .tablaCaracteristicas .tooltip-content, .contenido .mapaGeneraciones .tooltip-content{
	 border: 1px solid #14012d;
}


.contenido .empty .droppable.tallos {
	 
    display: inline-block;
    height: 141px;
    left: 31px;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    top: 37px;
    width: 148px;
	}	

.contenido .empty .droppable.axiales {
   
    display: inline-block;
    height: 141px;
    left: 0;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    top: 1px;
    width: 148px;
}


 .contenido .res.greenSeed, .contenido .clonegreenSeed{
 background-image: url("../img/mendel_chicharos/planta_partes/chicharos_verdeL.png");
    background-repeat: no-repeat;
    height: 41px;
    width: 39px;
    display: inline-block;
    text-indent: -9999px;
    
}

.contenido .dom.roundSeed, .contenido .cloneroundSeed{
 background-image: url("../img/ejercicios/chicharos/partes/lisa.png");
    background-repeat: no-repeat;
    height: 41px;
    width: 43px;
    display: inline-block;
    text-indent: -9999px;
    
}


.contenido .res.ruggedSeed, .contenido .cloneruggedSeed{
	 background-image: url("../img/mendel_chicharos/planta_partes/chicharo_VerdeA.png");
    background-repeat: no-repeat;
    height: 41px;
    width: 43px;
    display: inline-block;
     text-indent: -9999px;
    
}

.contenido .dom.yellowSeed, .contenido .cloneyellowSeed{
	 background-image: url("../img/mendel_chicharos/planta_partes/chicharo_amarilloL.png");
    background-repeat: no-repeat;
    height: 39px;
    width: 42px;
    display: inline-block;
     text-indent: -9999px;
   
}

.contenido .dom.swollenPod, .contenido .cloneswollenPod{
	 background-image: url("../img/ejercicios/chicharos/partes/vaina.png");
    background-repeat: no-repeat;
    height: 36px;
   width: 78px;
    display: inline-block;
     text-indent: -9999px;
}

 .contenido .dom.greenPod, .contenido .clonegreenPod{
	 background-image: url("../img/mendel_chicharos/planta_partes/vaina_a.png");
    background-repeat: no-repeat;
    height: 33px;
   width: 75px;
    display: inline-block;
     text-indent: -9999px;
}

.contenido .res.ruggedPod, .contenido .cloneruggedPod{
	background-image: url("../img/mendel_chicharos/planta_partes/vaina_arrugada.png");
    background-repeat: no-repeat;
    height: 27px;
    width: 82px;
    display: inline-block;
     text-indent: -9999px;
}


.contenido .res.yellowPod, .contenido .cloneyellowPod{
	background-image: url("../img/mendel_chicharos/planta_partes/vaina_amarilla.png");
    background-repeat: no-repeat;
    height: 37px;
    width: 79px;
    display: inline-block;
     text-indent: -9999px;
}

.contenido .dom.purple, .contenido .clonepurple{
	background-image: url("../img/mendel_chicharos/planta_partes/morada.png");
    background-repeat: no-repeat;
    height: 96px;
    width: 86px;
    display: inline-block;
    text-indent: -9999px;
}

.contenido .res.white, .contenido .clonewhite{
	background-image: url("../img/mendel_chicharos/planta_partes/blanca.png");
    background-repeat: no-repeat;
    height: 96px;
    width: 86px;
    display: inline-block;
     text-indent: -9999px;
}

 .contenido .dom.tall, .contenido .clonetall{
	background-image: url("../img//ejercicios/chicharos/partes/alta.png");
    background-repeat: no-repeat;
    height: 122px;
    width: 48px;
    display: inline-block;
     text-indent: -9999px;
}


.contenido .dom.axial,  .contenido .cloneaxial{
	background-image: url("../img/mendel_chicharos/planta_partes/axial_alta.png");
    background-repeat: no-repeat;
    height: 125px;
    width: 72px;
    display: inline-block;
     text-indent: -9999px;
}

.contenido .res.terminal, .contenido .cloneterminal{
	background-image: url("../img/mendel_chicharos/planta_partes/terminal_allta.png");
    background-repeat: no-repeat;
    height: 117px;
    width: 73px;
    display: inline-block;
     text-indent: -9999px;
}

.contenido .res.short.fin, .contenido .cloneshort{
	background-image: url("../img//ejercicios/chicharos/partes/baja.png");
    background-repeat: no-repeat;
    height: 92px;
   width: 48px;
    display: inline-block; 
    vertical-align: bottom;
     text-indent: -9999px;
}

.contenido .res.short.fin.oculto{
  display: none;
}

.contenido .empty .droppable {
    border: medium none;
    left: 0;
}



.contenido .caracteres td.items {
    border-right: medium none;
    width: 22%;
    text-align: center;
    border-bottom: medium none;
}


/*.contenido .empty.flor {
    bottom: 36px;
    left: -31px;
    position: relative;
}*/

.contenido .purpleTitle.uno {
    width: 17%;
}


.contenido .lilaT {
    color: #321a7e;
}


.contenido .leyMendel .bold {
    border: 1px solid #5033aa;
    border-radius: 10px;
    color: #1b0458;
    display: block;
    font-size: 1.05em;
    font-weight: normal;
    line-height: 37px;
    margin: 42px 2% 44px 1%;
    padding: 26px;
    text-align: left;
}

	.contenido .bold{
     font-size: 0.95em;
    font-weight: bold;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
}

.contenido .bold.resultado {
color: #14012d;
    font-family: "allerregular";
    font-size: 1.2em;
    font-weight: bold;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
    top: 0;
   }
	
	.contenido .caracteres td {
    border-bottom: 1px solid #5a40a0;
    border-right: 1px solid #5a40a0;
}
	
	.contenido .tabla_completa {
    border: 1px solid #5a40a0;
    border-radius: 10px;
    display: inline-block;
  margin: auto 24%;
}

.contenido .tabla_completa tr{
    height: 80px;
}

.tablaCaracteristicas .tabla_completa td.empty{
    text-align: center;
    cursor: pointer;
}

.tablaCaracteristicas .tabla_completa td.empty.seleccion-pendiente{
     background-color: #796bbe;
    color: #f8f1f1;
    font-size: 1.4em;
}


.contenido .caracteres td.fin {
    border-bottom: medium none;
}

.contenido .tablaCaracteristicas > p {
    margin-top: 56px;
}

.contenido .caracteres {
     border-collapse: collapse;
    display: block;
    margin: auto;
   width: 100%;
}

.contenido .opciones-caracteristicas{
       background-color: #edf1fe;
    border: 1px solid #392a70;
    border-radius: 20px;
    color: #6d03a9;
    font-size: 1.2em;
    left: 0;
    margin: auto;
    max-width: 80%;
    padding: 10px;
    position: fixed;
    right: 0;
    top: 13%;
    width: 800px;
    z-index: 100;
    -webkit-transform: translate3d(0, 0, 5px);
    -o-transform: translate3d(0, 0, 5px);
    -ms-transform: translate3d(0, 0, 5px);
    transform: translate3d(0, 0, 5px);
}

.contenido .opciones-caracteristicas p{
    max-width: 90%;
    margin: auto;
    text-align: center;
}

.contenido .opciones-caracteristicas span{
    margin: 5px;
}

.contenido .tablaCaracteristicas{
	z-index: 5;
}

.contenido .tablaCaracteristicas > p {
    margin-top: 30px;
}

.contenido .tablaCaracteristicas p.important{
    margin-top: 56px;
}


.contenido .purpleTitle, .contenido .purpleTitle.resultado {
    color: #392a70;
    font-family: allerregular;
    font-size: 1.05em;
    text-align: center;
    top: 0;
}


.contenido .expExp {
    margin-top: 52px;
}
	
	.contenido .parfDos {
    display: block;
    padding-bottom: 64px;
    padding-top: 25px;
    width: 75%;
}
	
.contenido .tooltip-content-image {
    border: 1px solid #324f01;
    border-radius: 8px;
    margin: 0 0 2px -84px;
    display: flex;
height: 59px;
width: 79px;
}


	
.contenido .lecturaTerminologia .derecha {
    float: right;
    position: absolute;
    right: 90px;
    top: 209px;
}
	
	


.contenido .izquierda.terminos {
     display: inline-block;
    font-size: 1em;
    margin-right: 8%;
    
    width: 42%;
}


	.contenido .tablaRasgos {
    border-collapse: collapse;
    color: #01353a;
    font-size: 1.03em;
}

.contenido .lecturaTerminologia .tablaRasgos td.firstCol{
	width: 20%;
}

.contenido .tablaRasgos tr {
    border-bottom: 1px solid rgba(16, 16, 16, 0.62);
    text-align: center;
}
	
.contenido .tablaRasgos td {
 padding: 10px 10px 23px;
 }
	
	.contenido .mid {
   border: 1px solid #036777;
    border-radius: 10px;
    color: #01353a;
    display: inline-block;
    float: left;
    height: auto;
    padding: 2px 4px 14px;
    
   }






.contenido .ejercicioMonstruo .todocont::after {
    clear: both;
    content: "";
    display: block;
}
	
.contenido .entrar {
    top: -40px;
}


	
.contenido .mendelProbabilidad .izquierda {
    display: inline-block;
    margin-left: 5%;
    width: 50%;
}


.contenido .mendelProbabilidad .probEventosResultado .izquierda {
    margin-left: 0;
    text-align: center;
    width: 32%;
}

	

.contenido .button.revisar.checaMonstruo:hover{
	    background-color: rgba(160, 208, 206, 0.56);
}

.contenido .button.revisar.checaMonstruo::before {
    border-bottom: 3px solid #01353a;
    border-left: 3px solid #01353a;
    border-radius: 1px;
    content: "";
    display: block;
    height: 15px;
    left: 6px;
    position: absolute;
    top: 13px;
    -moz-transform: rotate(-46deg);
    -webkit-transform: rotate(-46deg);
    transform: rotate(-46deg);
    width: 34px;
}


.contenido .button.revisar.checaMonstruo {
    background-color: rgba(204, 227, 226, 0.58);
    border: 1px solid #01353a;
    border-radius: 200px;
    bottom: 37%;
    font-size: 0;
    height: 50px;
    left: 46%;
    min-width: 50px;
    position: absolute;
    width: 50px;
}
	
	.contenido .ejemplo {
    color: #045d80;
}

.contenido .monstruoEntero {
    left:131px;
    position: absolute;
    top: 60px;
}


.contenido .monstruoCuernos {
    left: 104px;
    margin: auto;
    position: absolute;
    right: 0;
    top: 18px;
    z-index: 1;
}

.contenido .monstruoOrejas {
    left: 123px;
    margin: auto;
    position: absolute;
    right: 0;
    top: 71px;
    z-index: 1;
}

.contenido .monstruoOjos {
    left: 273px;
    margin: auto;
    position: absolute;
    top: 85px;
    z-index: 1;
}


.contenido .monstruoCompleto {
       border: 1px solid #036777;
    border-radius: 250px;
    height: 450px;
    margin-top: -89px;
    padding: 0;
    position: relative;
    width: 450px;
     text-align: center;
}


.contenido .lecturaTerminologia .monstruoCompleto {
    margin-top: 14px;
}



.contenido .ejercicioMonstruo .todocont {
    margin-left: 1%;
}

.contenido .tablaYmonstruo .letrasTabla {
    width: auto;
}

.contenido .letrasTabla {
       display: inline-block;
    float: left;
   
    margin-top: 41px;
    width: 168px;
}

	.contenido td.color.D {
    background-color: rgba(18, 96, 103, 0.35);
}

.contenido .rasgo td, .contenido .U{
    background-color: rgba(18, 96, 103, 0.19);
    border-radius: 1px;
}

.contenido .white.selected span{
background-color: rgba(108, 76, 41, 0.48);		
}

.contenido .white span:hover {
	background-color: rgba(133, 100, 62, 0.48);	
}
	
.contenido .white span {
	display: block;
  background-color: rgba(198, 156, 109, 0.35);
    border: 1px solid rgba(86, 44, 2, 0.38);
    border-radius: 8px;
    padding: 5px;
}	

.contenido .blue.selected span{
background-color:rgba(122, 178, 181, 0.68);	
}
	
.contenido .blue span:hover{
	 background-color: rgba(149, 207, 210, 0.68);	
}	
.contenido .blue span {
	display: block;
     background-color: rgba(197, 244, 247, 0.68);
    border: 1px solid rgba(1, 53, 58, 0.55);
    border-radius: 8px;
    padding: 5px;
}

.contenido .tablaMonstruo td {
    padding: 10px;
}

	
.contenido .tablaMonstruo tr {
    border-bottom: 1px solid rgba(16, 16, 16, 0.62);
    text-align: center;
}


	
.contenido .ejercicioMonstruo .izquierda{
     border: 1px solid #036777;
    border-radius: 10px;
    color: #01353a;
    display: inline-block;
    float: left;
    height: auto;
    padding: 4px;
    width: 41%;
   }
	
	.contenido .fase.ejer p.instrucciones.B {
    width: 45%;
}
	
	.contenido .fase.ejer p.instrucciones.A {
    width: 68%;
}
	
	.contenido .instrucciones-2 {
    border: 1px solid #037893;
    border-radius: 15px;
    display: inline-block;
    left: -22px;
    padding: 10px;
    position: relative;
    top: -94px;
    width: 30%;
    color: #024863;
}


.contenido .naranja {
    background-color: rgba(255, 101, 0, 0.12);
}

.contenido .verdeC {
    background-color: rgba(55, 173, 3, 0.13);
}

.contenido .cafeC {
    background-color: rgba(77, 54, 3, 0.15);
}

.contenido .melon {
    background-color: rgba(255, 152, 0, 0.12);
}

.contenido .rosa {
    background-color: rgba(247, 0, 0, 0.07);
}

.contenido .azul {
    background-color: rgba(0, 183, 255, 0.17);
}


.contenido .lila {
    background-color: rgba(155, 20, 255, 0.09);
}

.contenido .amarilloC {
    background-color: rgba(255, 245, 0, 0.07);
}

	
	
.contenido .tablaPunnetTodo .tablaPunnetC .tabla {
    width: 100%;
}


	



	
.contenido .tablaPunnetC .tabla td {
    border-bottom: 1px solid rgba(16, 16, 16, 0.11);
    border-right: 1px solid rgba(16, 16, 16, 0.11);
}
	
.contenido .C2, .contenido .C3, .contenido .C4, .contenido .C5 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}


.contenido .C2.Resp, .contenido .C3.Resp, .contenido .C4.Resp, .contenido .C5.Resp {
    color: #01353a;
    font-size: 1.2em;
    height: 50px;
    text-align: center;
    width: 109px;
}



.contenido .tablaPunnetTodo .imgTablaMadre {
    left: -56%;
    position: relative;
    top: 184px;
}

	
.contenido .tablaPunnetTodo .imgTablaPadre {
    left: 50%;
    position: absolute;
    top: 12px;
}
	
	
.contenido .tablaPunnetTodo {
        display: inline-block;
    margin-left: 22%;
    position: relative;
}


.contenido .tablaPunnetTodo.review-time{
    display: inline-block;
    float: left;
    margin-left: 10%;
    position: relative;
}
	
.contenido .tablaPunnetC {
    border: 1px solid #037893;
    border-radius: 15px;
    padding: 4px;
    width: 596px;
}

	
.contenido td.nl {
    background-color:rgba(18, 96, 103, 0.2);
    height: 50px;
    width: 50px;
}

.contenido .padreDos.C1.anima {
    background-color: rgba(18, 96, 103, 0.15);
    display: block;
    padding-left: 5px;
    text-align: left;
    width: 92px;
}
	
.contenido .renglonUno {
    background-color: rgba(18, 96, 103, 0.15);
}

.contenido .cruzaPerros .tabla {
    border-collapse: collapse;
    color: #025256;
    text-align: center;
    font-size: 1.5em;
}

	

.contenido .preguntaRepaso {
   float: right;
  margin-left: 5%;
  margin-top: 150px;
  width: 30%;
}

.preguntaRepaso.oculto:after {
  clear: both;
  content: "";
  display: block;
}


.contenido .circularInput {
      border: 1px solid #037893;
  border-radius: 90px;
  position: relative;
  color: #036777;
  display: inline-block;
  font-size: 3.2em;
  height: 80px;
  /* margin-left: 43%; */
  text-align: center;
  width: 80px;
  margin-bottom: 38px;
  top: -95px;
  left: 43px;
}	

.contenido .preguntaRepaso > p {
    border: 1px solid #037893;
    border-radius: 10px;
    color: #024863;
    display: inline-block;
    padding: 5px;
    width: 32%;
    vertical-align: 15px;
}


	
.contenido .cruzaPerros .instrucciones.Dos:after {
 border: medium none;
}

.contenido .cruzaPerros .instrucciones.Dos {
    display: inline-block;
    vertical-align: 70px;
    width: 25%;
}


	
.contenido .imagenes-perro {
    border: 1px solid #126068;
    border-radius: 15px;
    display: inline-block;
    margin-left: 2%;
    width: 66%;
}
	
.contenido .imagenConejos > p {
      background-color: rgba(191, 191, 191, 0.51);
    border: 1px solid rgba(116, 74, 12, 0.51);
    border-radius: 10px;
    color: #2b2215;
    font-family: "ambrosia_demoregular";
    font-size: 1.2em;
    margin-top: 50px;
    text-align: center;
}


.contenido .button.reload {
    background-image: url("../img/dominancia/recargar.png");
    background-position: 3px center;
    background-repeat: no-repeat;
    border: 1px solid #764f15;
    border-radius: 30px;
    height: 56px;
    left: 26%;
    max-width: 56px;
    min-width: 56px;
    padding: 1em;
    text-indent: -9999px;
    top: 5px;
}

.contenido .lecturaTerminologia .button.reload{
    float: none;
   
}




.contenido .tablaImagenesConejos {
      display: inline-block;
    margin: 5% 10% 7%;
   
   
}


.contenido .conejos .button.reload {
        left: 50%;
    bottom: -270px;
    top: auto;
}


.contenido .imagenConejos {
   display: inline-block;
    margin-left: 35px;
      background-color: rgba(227, 227, 227, 0.77);
    border: 1px solid #2b2215;
    border-radius: 90px;
    height: 180px;
    text-align: center;
    width: 180px;
     margin-bottom: 4px;
}


.contenido .superindex {
    font-size: 0.9em;
    position: relative;
    top: -10px;
}

.ventana span.superindex {
    font-size: 0.9em;
    position: relative;
    top: -10px;
    left: 0;
}

.contenido .imagenConejos > img {
    padding-top: 20px;
}

.contenido .tablaConejos button {
     background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #964a05;
    border-radius: 60px;
    color: #964a05;
    font-size: 1.1em;
    height: 70px;
    margin: 8px;
    padding-left: 11px;
    text-align: center;
    width: 70px;
}

.contenido .tablaConejos button:hover {
background-color: #E2D3C9;
}

.contenido .tablaConejos button.selected {
background-color: #E2D3C9;
}



.contenido .tablaConejos {
    border: 1px solid #964a05;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
}


.contenido .conejos p.instrucciones {
    width: 48%;
}



.contenido .alelos-conejos > li {
    list-style-type: none;
    margin-bottom: 15px;
    margin-left: 30px;
}
	
	.contenido .fase.ejer.fases .titulo {
    color: #036777;
}

.contenido .fase.cruzaPerros .preguntaRepaso{
     bottom: -84px;
    margin-bottom: 91px;
    position: relative;
}

.contenido .fase.cruzaPerros .preguntaRepaso .reviewQ{
    float: right;
  width: 35%;
  display: inline-block;
  opacity: 1;
  position: absolute;
  top: -15px;
  transition: all 0.5s;
}

.contenido .fase.cruzaPerros .preguntaRepaso .reviewQ.hide{
  opacity: 0;
  top: 80%;
}
	
.contenido .button.boton-sangre:hover:before, .contenido .button.boton-vaca:hover, .contenido .button.boton-dominancia:hover:before  {
	 background-color: rgba(49, 169, 4, 0.5);
	 border-color: rgba(49, 169, 4, 0.44);
	 
}

.contenido .button.boton-sangre:hover:after, .contenido .button.boton-vaca:hover:before, .contenido .button.boton-dominancia:hover:after {
	 background-color:rgba(118, 87, 4, 0.38)
	}
.contenido .button.boton-sangre:after {
	 background-color: #755704;
    border-radius: 19px;
    content: "";
    display: block;
    height: 25px;
    position: absolute;
    right: 17px;
    top: 12px;
    width: 25px;
}

.contenido .button.boton-sangre:before {
    background-color: rgba(118, 87, 4, 0.5);
    border: 1px solid rgba(118, 87, 4, 0.67);
    border-radius: 90px;
    content: "";
    display: block;
    height: 40px;
    left: 40px;
    min-width: 40px;
    padding: 0;
    position: absolute;
    top: 3px;
}



.contenido .button.boton-sangre {
     border: 1px solid #755704;
    border-radius: 15px;
    font-size: 1.7em;
    padding: 6px;
    text-align: left;
    top: 17px;
    min-width: 93px;
}

.contenido .izquierda li {
    color: #964a05;
    display: block;
    list-style-type: none;
}
	
	.contenido .izquierda {
      display: inline-block;
    margin-left: 1%;
    width: 20%;
     margin-bottom: 136px;
}
	
	.contenido .marron_claro.line {
    border-bottom: 1px solid #755704;
}


.contenido .marron_claro.line2 {
	border-right: 1px solid #755704;
}


.contenido .marron_claro {
    color: #964a05;
    font-size: 1.2em;
    text-align: center;
}
	

.contenido .glucoproteinas td.marron {
    background-color: rgba(70, 79, 3, 0.35);
    font-family: ambrosia_demoregular;
    font-size: 1.2em;
    padding: 5px;
    text-align: center;
}

.contenido .beige {
    background-color: rgba(208, 178, 133, 0.28);
}


.contenido .glucoproteinas {
     border-collapse: collapse;
    width: 100%;
    color: #674718;
}


.contenido .t_gluco {
    border: 1px solid #2b1a01;
    border-radius: 6px;
}

.contenido .glucoproteinas tr td {
  border-right: 1px solid #2b1a01;
    padding: 12px;
    text-align: center;
}


.contenido .textoc {
    margin-left: 11%;
    width: 80%;
}

.contenido .tsangre {
    border: 1px solid #755704;
    border-radius: 15px;
    display: inline-block;
    margin-left: 25%;
    margin-bottom: 127px;
}
.contenido .marron-oscuro {
     background-color: rgba(118, 87, 4, 0.22);
    color: #5e3002;
     padding: 20px;
}
	
	.contenido .marron {
    color: #6b3601;
    font-size: 1.05em;
}


	.contenido .autoBreed {
    background-color: rgba(75, 30, 132, 0.26);
    border: medium none;
    border-radius: 15px;
    color: #4a1e84;
    font-size: 1em;
    margin-left: 90px;
    padding: 5px;
}

.contenido .actParf {
    margin-right: 217px;
}



.contenido .finalEtapa-1, .contenido .experimentoLibre .instruccionesdos {
     color: #14002d;
    display: inline-block;
    font-size: 1.02em;
    position: relative;
    top: -176px;
    width: 50%;
}


.contenido .finalEtapa-1 span{
	color: #4a1e84;
}
.contenido .filial, .contenido .filial2 {
      border: 1px solid #5a40a0;
    border-radius: 20px;
    color: #5e3c88;
    display: inline-block;
    font-size: 1.05em;
    margin-left: 2%;
    position: relative;
    top: -181px;
    width: 95%;
}


.contenido .experimentoLibre .offspring {
    position: relative;
    top: -166px;
    color: #5e3c88;
    font-size: 1.05em;
}


.contenido .filial-autocruza {
      color: #5e3c88;
    display: inline-block;
    position: relative;
    text-align: center;
    top: -129px;
    width: 41%;
}



.contenido .instruccionesdos span {
    color: #510776;
}

.contenido .experimentoGuiado .filial-autocruza .plantitaGuiada, .contenido .filial-autocruza .plantitaLibre {
      border: 1px solid #5a40a0;
    border-radius: 10px;
    display: inline-block;
    margin-left: 29px;
    padding: 10px;
    width: 299px;
}


.contenido .plantitaGuiada .autoBreed {
    margin-left: 11px;
    margin-top: 14px;
}


.contenido .filial2 {
    margin-left: 5%;
    margin-top: 59px;
    width: 90%;
}

.contenido textarea {
    color: #620274;
    font-family: "allerregular";
    margin-left: 6%;
    font-size: .95em;
}


.contenido .instruccionesExperimento > span {
    color: #4e046d;
}


.contenido .filial > p {
    margin-left: 4%;
}



.contenido .caracteristicasCruza.dos {
    margin-bottom: 200px;
    vertical-align: top;
}


.contenido .caracteristicasCruzas {
    border-right: 1px solid #5a40a0;
    margin-left: 3%;
    margin-top: 52px;
    width: 55%;
     display: inline-block;
}


.contenido .chicharoDePlanta, .contenido .experimentoLibre .offspringF2 .plantitaLibre .florHijoChicharo, .contenido .experimentoLibre .offspring .plantitaLibre .florHijoChicharo, .contenido .experimentoGuiado .filial .plantitaGuiada .florHijoChicharo,
.contenido .experimentoGuiado .filial2 .plantitaGuiada .florHijoChicharo, .contenido .experimentoGuiado .filial .plantitaGuiadaExtra .florHijoChicharo, .contenido .experimentoGuiado .filial2 .plantitaGuiadaExtra .florHijoChicharo,
.contenido .filial-autocruza .florHijoChicharo{
    background-color: rgba(91, 64, 160, 0.04);
    border: 1px solid #5a40a0;
    border-radius: 10px;
    bottom: 108px;
    padding: 5px;
    position: relative;
}

.contenido .experimentoLibre .offspringF2 .plantitaLibre .florHijoChicharo, .contenido .experimentoLibre .offspring .plantitaLibre .florHijoChicharo, .contenido .experimentoGuiado .filial .plantitaGuiada .florHijoChicharo,
.contenido .experimentoGuiado .filial2 .plantitaGuiada .florHijoChicharo, .contenido .experimentoGuiado .filial .plantitaGuiadaExtra .florHijoChicharo, .contenido .experimentoGuiado .filial2 .plantitaGuiadaExtra .florHijoChicharo{
    bottom: 40px;
    left: 3%;
}


.contenido .caracteristicasCruza {
    display: inline-block;
    margin-left: 12%;
    margin-top: 31px;
}

.contenido .caracteristicasCruza .caracteristica {
	      background-image: url("../img/ejercicios/bullet_2.png");
   background-position: left center;
    background-repeat: no-repeat;
    padding-left: 36px;
    display: block;
}



.contenido .caracteristicasCruza .caracteristica:hover, .contenido .caracteristicasCruza .caracteristica.seleccionada{
	 background-image: url("../img/ejercicios/bullet_2_checked.png");
    
}


.contenido .cruza-guiada span {
    color: #4e046d;
}

.contenido .bg-1 .button.anterior {
    background-image: url("../img/general/anterior.png");
     border: medium none;
    /*bottom: -14px;*/
   	-webkit-box-shadow: none;
   	-moz-box-shadow: none;
   	-o-box-shadow: none;
    box-shadow: none;
    color: #000;
    font-size: 1.2em;
    height: 151px;
    left: -14px;
    width: 239px;
    float: none;
}



.contenido .bg-1 .button.anterior > span {
    display: block;
    font-family: "ambrosia_demoregular";
   
    position: relative;
    right: -71px;
    top: -40px;
    -moz-transform: rotate(-15deg);
     -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
}


.contenido .caracteristica {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #221756;
    display: block;
    font-family: "allerregular";
    font-size: 1em;
    margin-bottom: 35px;
    text-transform: uppercase;
}
.contenido input.hoja2{
	display:none;
}



.contenido .botonCruza, .contenido .cruza, .contenido .autoCruza {
    background-color: rgba(75, 30, 132, 0.26);
    border: medium none;
    border-radius: 10px;
    bottom: -45px;
    color: #4a1e84;
    font-size: 1.2em;
    padding: 5px;
    position: relative;
}

.contenido .autoCruza{
    bottom: 0;
}.contenido .botonCruza{
     right: 6%;
}

.contenido .cruza{
  left: 45%;
}

.contenido .cruza {
    bottom: 35px;
    right: 0;
}

.contenido .florPadreGuiado.flowerBreed {
    text-align: center;
    margin-left:11%;
   
}


.contenido .flores-padre {
  display: inline-block;
    margin: auto;
    width: 80%;
}

.contenido .padreS {
    border: 1px solid #5a40a0;
    border-radius: 10px;
    margin-left: 8%;
    text-align: center;
    width: 100%;
}


.contenido .experimentoLibre .cruza {
    left: 81%;
    top: -189px;
}

	
/**/

.contenido .opciones ul li {
    list-style-type: none;
    margin-bottom: 60px;
}


.contenido input.hoja{
	display:none;
}

.contenido input + label{
	      background-image: url("../img/ejercicios/bullet.png");
    background-repeat: no-repeat;
    display: block;
    height: 29px;
    padding-left: 33px;
}

.contenido input:checked + label{
	 background-image: url("../img/ejercicios/bullet_checked.png");
    
}

.contenido .opciones ul li{
    margin-bottom: 60px;
    list-style-type: none;
}

.contenido .opciones ul {
    margin-left: 4%;
    margin-top: 60px;
}


.contenido .experimentos .opciones {
    display: inline-block;
    margin-bottom: 40px;
    width: 100%;
}



.contenido .genotipoMonstruo {
	   border: 1px solid #036777;
    border-radius: 10px;
    color: #2b94ab;
    display: block;
    font-size: 1.6em;
    margin-bottom: 20px;
    margin-left: 19%;
    padding: 10px;
    text-align: center;
    width: 148px;
}


.contenido .ejercicioMonstruo .derecha {
    float: right;
    position: relative;
    right: 1%;
}


.contenido .tablaMonstruo {
    border-collapse: collapse;
    color: #01353a;
    font-size: 1.03em;
    width: 100%;
}

.contenido .botones-dominancia {
    margin-top: 40px;
}


.contenido .button.boton-dominancia.dos {
    margin-left: 32%;
}


.contenido .button.boton-vaca.dos {
    margin-left: 88%;
}

.vacas .canvas {
  font-family: tahoma;
}

.vacas .block {
  position: absolute;
  border: 1px solid #7DAB76;
  background-color: #BAFFB0;
  padding: 3px;
}
.vacas .connector {
  background-color: #FF9900;
}

.vacas .source-label, .middle-label, .destination-label {
  padding: 5px;
}

.vacas .canvas .connector.hide{
  opacity: 0;
}

.contenido .vacas-respuestas {
    position: relative;
    margin-left: auto;
   display:inline-block;
    margin-bottom: 147px;
    width: 95%;
     
}


.contenido .vacas-blanca-negra {
   margin: auto;
    width: 80%;
}

.contenido .vacas_pintas {
    max-width: 497px;
    width: 48%;
}

.contenido .vacas_grises {
    max-width: 497px;
    width: 48%;
}




.contenido .vacas #dominancia-intermediaEnd{
  margin-left: 20%;
}


.contenido .button.boton-vaca:before {
	 background-color: #755704;
    border-radius: 19px;
    content: "";
    display: block;
    height: 25px;
    position: absolute;
    right: 6px;
    top: 7px;
    width: 25px;
}

.contenido .button.boton-vaca {
     background-color: rgba(118, 87, 4, 0.5);
    border: 1px solid rgba(118, 87, 4, 0.67);
    border-radius: 90px;
    content: "";
    display: block;
    height: 40px;
    margin: auto auto auto 138px;
    min-width: 40px;
    padding: 0;
    text-indent: -9999px;
}

.contenido .botones-vaca {
    display: inline-flex;
    margin-left: 12%;
}

.contenido #dominancia-intermediaVaca{
 margin-left: 89%;
}


.contenido .button.boton-dominancia::before {
    background-color: rgba(118, 87, 4, 0.5);
    border: 1px solid rgba(118, 87, 4, 0.67);
    border-radius: 30px;
    content: "";
    display: block;
    height: 40px;
    position: absolute;
    right: 2px;
    top: 5px;
    width: 40px;
}
.contenido .button.boton-dominancia::after {
    background-color: #755704;
    border-radius: 19px;
    content: "";
    display: block;
    height: 25px;
    position: absolute;
    right: 10px;
    top: 14px;
    width: 25px;
}
.contenido .button.boton-dominancia {
      background-color: rgba(255, 227, 191, 0.57);
    border: 1px solid #c9b279;
    border-radius: 15px;
    color: #5e3002;
    font-size: 1em;
    padding-left: 0;
    padding-right: 50px;
}



.contenido #dominancia-intermediaEnd{
  margin-left: 28%;
}

.contenido #codominanciaEnd{
  margin-left: 28%;
}

.contenido .tablaExperimento .recesivo {
    text-transform: lowercase;
}


.contenido .fase.vacas p.instrucciones {
    color: #331a01;
    display: inline-block;
    font-family:"ambrosia_demoregular";
    font-size: 1.1em;
    height: 42px;
    padding-left: 21px;
    width: 64%;
}

.contenido .codominancia span, .contenido .dominancia-intermedia span {
    color: #301701;
    font-weight: bold;
}

.contenido .codominancia, .contenido .dominancia-intermedia {
   background-color: rgba(255, 227, 191, 0.37);
    border: 1px solid #8c7548;
    border-radius: 15px;
    float: left;
    margin-left: 6%;
    width: 40%;
}



.contenido .preguntasPunnett .respuestas .respuesta {
    border: 1px solid #5b036b;
    border-radius: 10px;
    display: block;
    height: auto;
    left: -100px;
    padding: 5px;
    position: absolute;
    width: auto;
}


.contenido p.respuesta {
    margin: 0 0 0 10px;
    padding: 0;
    width: 100%;
}


.contenido .divRespuestas {
   
    display: block;
    position: absolute;
    right: 74px;
    top: 53%;
    width: 15%;
}




.contenido .seleccionChicharos li {
    margin-left: 59px;
    display: inline-block;
}


.contenido .seleccionChicharos > ul {
     
    list-style-type: none;
    position: relative;
    top: -55px;

}

.contenido .seleccionChicharos {
   margin: auto;
    width: 553px;
} 



.contenido .semilla.clone{
  left: 25%;
    position: absolute;
    top: 10px;
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}

.contenido .semilla.liso-verde {
   
    background-position: -89px 0;
    
}

.contenido .semilla.rugoso-amarillo {
   
    background-position: -47px 0;
    
}

.contenido .semilla.rugoso-verde {
   
    background-position: -6px 0;
    
}


.contenido .imgTablaPadre {
    display: block;
    left: -231px;
    margin: auto;
    position: relative;
    top: 169px;
}


.contenido .imgTablaMadre {
    display: block;
    margin-bottom: 18px;
    margin-left: 49%;
    margin-top: auto;
}

.contenido .tablaImagenEj {
     margin: 50px auto 71px;
    width: 90%;
}


.contenido .preguntasPunnett .todo {
    display: inline-block;
   
    width:auto;
}


.contenido .preguntasPunnett .instrucciones {
    width: 55%;
}

.contenido .tablaImagenEj .tabla td{
    height: 50px;
}


.contenido .fase .reciordatorio p {
    margin-left: 10px;
}


.contenido .reciordatorio {
       background-color: rgba(68, 2, 63, 0.16);
    border-radius: 15px;
    float: right;
    padding: 5px;
    position: relative;
    right: 44px;
    top: -85px;
}


.contenido .instrucciones .violeta {
    font-size: 1em;
    color: #44023f;
}

.contenido .instrucciones {
     border: 1px solid #512402;
    border-radius: 15px;
    margin-left: 5%;
    margin-top: 31px;
    width: 90%;
}


.contenido .combinaciones-dihibridacion .todocont {
    margin: auto;
}

.contenido .imagen-combDihibridacion {
       border: 1px solid #151e00;
    border-radius: 10px;
    display: inline-block;
    
    margin-left: 21%;
    padding: 15px;
    width: 55%;
}



.contenido .imagen-combDihibridacion .imagenes {
    height: auto;
    max-width: 592px;
    width: 100%;
}

.contenido .cromaticas {
    color: #44023f;
    float: left;
    font-size: 1.2em;
    position: relative;
    right: -506px;
    top: -225px;
}

.contenido .cromMasc {
    position: relative;
    top: -220px;
}

.contenido .cromaticas > p {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.contenido .imagenes {
     float: left;
}


.contenido .genHeterocigota {
    color: #44023f;
    font-size: 1em;
    position: relative;
    top: -162px;
    width: 70%;
}


.contenido .imagen-dihibridacion{
	margin-left: 18%;
}

.contenido .dihibridacion-derecha {
	position: relative;
    right: -565px;
    text-align: center;
    top: -212px;
    width: 182px
}


.contenido .dihibridacion-izquierda {
    left: 0;
    position: relative;
    top: 146px;
}


.contenido .dihibridacion-arriba {
    left: -43px;
    /*margin: auto;*/
    position: relative;
    right: 0;
    top: 12px;
}


.contenido .cuadroPunnettTabla.Desh {
	border: 1px solid #430a3f;
    border-radius: 10px;
    left: -178px;
    margin-left: 537px;
    padding: 2px;
    position: relative;
    width: 197px;
}


.contenido .orientan {
    border: 1px solid #5b036b;
    border-radius: 10px;
    display: block;
    left: -8px;
    margin: auto;
    position: relative;
    top: 324px;
    width: 13%;
}

.contenido .diag.cromHom {
    left: 1px;
    margin: auto;
    top: 255px;
    width: 32%;
}


.contenido .diag.paresAlelos {
    margin: auto;
    position: absolute;
    right: -419px;
    top: 28%;
    width: 23%;

}


.contenido .diag.cromDup {
       left: -6px;
    margin: auto;
    top: 243px;
    width: 18%;
}




.contenido .combMeiosis {
      color: #44023f;
    display: inline-block;
    font-size: 1em;
    
    margin-top: 10px;
    width: 89%;
}


.contenido .background, .contenido .diag{
 background-color: rgba(164, 176, 166, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.56);
    border-radius: 15px;
       left: 3%;
    width: 82%;
    
    position:relative;
   }


.contenido .diagramaMeiosis-imagen > img {
    height: auto;
    max-width: 1021px;
    width: 100%;
}

.contenido .diagramaMeiosis-imagen {
    text-align: center;
}

.contenido .verde {
    color: #145402;
}

.contenido .amarillo {
    color: #b26304;
}


.contenido .violeta-light {
    color: #bc4bac;
}


.contenido .probHom {
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 99px;
    text-align: center;
    width: 100%;
}


.contenido .violetaGrande {
    color: #44023f;
    font-family: "ambrosia_demoregular";
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
}


.contenido .sumaProb .parrafo-left.tabla {
    color: #000;
    display: inline-block;
    font-family: "allerregular";
    font-size: 0.95em;
    margin-left: 4%;
    margin-top: 3%;
    padding: 0;
    text-align: left;
    width: 44%;
}



.contenido .parrafo-left.tabla {
    display: inline-block;
    margin-left: 4%;
    width: 41%;
}


.contenido .sumaProb .cuadroPunnettTabla {
    float: left;
    margin-left: 8%;
}


.contenido .probabilidadC {
    margin-top: 48px;
}
.contenido .letra-grande {
    font-size: 1.25em;
}

.contenido .centro {
    text-align: center;
}


.contenido .parrafosCentrales2 {
     position: relative;
    top: 20px;
}

.contenido .amarillo-light {
    color: #DDA84A;
}


.contenido .verdeG {
    color: #71934A;
}

.contenido .azulA{
	color:#4CABCC;
}
.contenido .naranjaN {
    color: #F76423;
    font-size: 1.2em;
}


.contenido .violeta {
    color: #692193;
    font-size: 1.2em;
}


.contenido .cafe {
    color: #603813;
    font-family: "ambrosia_demoregular";
    font-size: 1.4em;
}

.contenido .genotipoP {
    text-align: center;
}

.contenido .esquina {
    background-color: rgba(67, 10, 63, 0.22);
}

.contenido .renglonIzq {
    background-color: rgba(234, 204, 232, 0.69);
}

.contenido .multiplicaProb table, .contenido .sumaProb table, .contenido .dihibridacion table, .contenido .preguntasPunnett table{
	border-collapse: collapse;
}


.contenido .cuadroPunnettTabla {
    border: 1px solid #430a3f;
    border-radius: 10px;
    margin: auto;
    padding: 2px;
     width: 374px;
}

.contenido .cuadroPunnettTabla .renglonUno {
    background-color: #cbbeca;
    
   }
   
   .contenido .cuadroPunnettTabla .renglonDos, .contenido .cuadroPunnettTabla .renglonCuatro {
    background-color: rgba(247, 183, 127, 0.22);
    
   }
.contenido .multiplicaProb .tabla, .contenido .sumaProb .tabla, .contenido .dihibridacion .tabla{
    color: #44023f;
    font-family: "ambrosia_demoregular";
    font-size: 1.5em;
    margin: auto;
    text-align: center;
    width: 99%;
}

.contenido .preguntasPunnett table {
	width: 375px;
	color: #44023f;
    font-family: "ambrosia_demoregular";
    font-size: 1.5em;
    margin: auto;
    text-align: center;
}
.contenido .parrafosCentrales.background, .contenido .sumaProb .parrafosCentrales2{
	background-color: rgba(164, 176, 166, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 10px;
    margin: auto;
    width: 90%;
}
.contenido .enfasis {
    color: #44023f;
    font-weight: bold;
    text-align: center;
}

.contenido .gametos{
	color:#692193;
	font-style: oblique;
}
.contenido .parrafosAnimados {
    display: inline-block;
}


.contenido .parrafo-left.prob {
      margin-left: 76px;
    margin-top: 62px;
    text-align: center;
    width: 50%;
}


.contenido .parrafo-right.imagen {
    border: medium none;
    color: #000;
    font-family: "allerregular";
    font-size: 0.8em;
    width: 200px;
}


.contenido .parrafo-right {
    border: 1px solid #5b036b;
    border-radius: 10px;
    color: #603813;
    font-family: "ambrosia_demoregular";
    font-size: 1.5em;
    padding: 5px;
    text-align: center;
    width: 20%;
    float:left;
}


.contenido .parrafo-left{
  background-color: rgba(164, 176, 166, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.38);
    border-radius: 10px;
    margin-left: 21px;
    padding: 5px;
       float: left;
    width: 65%;
   }

.contenido h3 {
    color: #41024c;
    font-size: 1.4em;
    margin-left: 57px;
}


.contenido .tiposEventos > li {
background-image: url("../img/mendel_actualidad/bullet.png");
    background-position: 0 -5px;
    background-repeat: no-repeat;
    list-style-type: none;
    margin-bottom: 21px;
    padding-left: 31px;
}

.contenido .tiposEventos span {
    color: #44023f;
    font-weight: bold;
}


.contenido .conclusionFase{
 background-color: rgba(164, 176, 166, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.56);
    border-radius: 15px;
    margin: 52px auto;
    padding: 5px;
    width: 90%;
    
    
   }
   
   
.contenido .conclusionProb {
    color: #44023f;
    font-weight: bold;
    position: relative;
    text-align: center;
    top: 14px;
    width: 100%;
}



.contenido .divisor {
    color: #44023f;
    float: left;
    font-size: 0.95em;
    font-style: oblique;
    margin-left: 49px;
}

.contenido .resultado, .contenido .resultados {
    color: #603813;
    font-family: ambrosia_demoregular;
    font-size: 2.2em;
    position: relative;
    top: 9px;
}


.contenido .dividendo {
    color: #44023f;
    font-size: 0.95em;
    border-bottom: solid 1px #324F01;
    padding-bottom:2px;
}


.contenido .probEventosResultado {
    float: left;
    width: 100%;
}


.contenido .probEventosResultado .izquierda {
 
    left: 91px;
    top: -19px;
    width: 24%;

}


.contenido .probEventos {
    float: left;
}


.contenido .probEventosResultado .derecha{
	min-width: 42%;
	margin-right: 48px;
}

.contenido .izquierda.slideIn > p, .contenido .probEventosResultado .derecha {
    background-color: rgba(164, 176, 166, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.56);
    border-radius: 15px;
    padding: 5px;
}

.contenido .derecha.slideIn, .contenido .probEventosResultado .izquierda {
      border: 1px solid #5b036b;
    border-radius: 15px;
    margin-right: 48px;
    margin-top: 25px;
    padding: 10px;
}


.contenido .bg-1 .button.continueAnimation::before {
    border-bottom: 20px solid transparent;
    border-left: 40px solid #405903;
    border-top: 20px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: -9px;
    top: 12px;
    width: 0;
}
.contenido .bg-1 .button.continueAnimation {
    border: medium none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    font-size: 1.5em;
    left: 46%;
}


.contenido .botonesFenotiposHibridos .box.bg-1 button {
     border: 1px solid #8a388e;
    color: #000;
    font-family: "allerregular";
    font-size: 1.2em;
    margin-bottom: 10px;
    min-width: 66px;
    -webkit-box-shadow: -1px 0 0 1px rgba(80, 54, 84, 0.59);
    -moz-box-shadow: -1px 0 0 1px rgba(80, 54, 84, 0.59); 
    -o-box-shadow: -1px 0 0 1px rgba(80, 54, 84, 0.59);
    box-shadow: -1px 0 0 1px rgba(80, 54, 84, 0.59);   
}

.contenido .botonesFenotiposHibridos .box.bg-1 button.desactivado{
    opacity: 0.5;
}

.contenido .box.bg-1.clearfix {
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-bottom: 26px;
    position: relative;
    top: -25px;
    width: 85px;
}

.contenido .ejemploActualidadHibrido .box.bg-1.clearfix{
    top: 0;
}

.contenido .botonesFenotiposHibridos {
    display: inline-block;
    position: absolute;
   right: 27px;
    top: 70px;
}

.contenido .ejemploActualidadHibrido .cloneR1.aleloE.allSet.progenitorM1{
	 background-image: url("../img/mendel_actualidad/cromosoma4.png");
}

.contenido .cloneR3.allSet.aleloE.parentalm2{
    background-image: url("../img/mendel_actualidad/cromosoma3.png");
    left: 47px;
    }

.contenido .ejemploActualidadHibrido .cloneR3.allSet.aleloE.parentalm2{
    background-image: url("../img/mendel_actualidad/cromosoma6.png");
    left: 33px;
}

.contenido .ejemploActualidadHibrido .cloneR4.allSet.aleloE.parentalm2{
    background-image: url("../img/mendel_actualidad/cromosoma5.png");
    left: 44px;
}

 .contenido .cloneR4.allSet.aleloE.parentalm2{
    background-image: url("../img/mendel_actualidad/cromosoma3.png");
     top: 17px;
}

 .contenido .ajemploActualidadHibrido .cloneR3.aleloE.allSet.progenitorM1{
 	 left: 45px;
 }

 .contenido .cloneR2.aleloE.allSet.M1.aleloE.progenitorM1 {
    background-image: url("../img/mendel_actualidad/cromosoma6.png");
}



.contenido .cloneR1.aleloE::before,
.contenido .cloneR1.aleloE::after, 
.contenido .allSet.aleloE.progenitorM1::after, 
.contenido .cloneR2.aleloE::before, 
.contenido .cloneR2.aleloE::after,
.contenido .cloneR3.aleloE::after,
.contenido .cloneR3.aleloE::before,
.contenido .cloneR4.aleloE::after,
.contenido .cloneR4.aleloE::before, 
.contenido .cloneR3.allSet.aleloE.parentalm2:after,
.contenido .cloneR4.allSet.aleloE.parentalm2:after{
    border: medium none;
    background: none;
}

.contenido .cloneR1.aleloE, 
.contenido .cloneR2.aleloE, 
.contenido .cloneR3.aleloE, 
.contenido .cloneR4.aleloE  {
    top: 18px;
}


.contenido .aleloE:before{
 border: 1px solid #430c3f;
    border-radius: 50px;
    content: "";
    display: block;
    height: 65px;
    left: -23px;
    position: relative;
    top: -3px;
    width: 65px;
}

.contenido .ejemploActualidad .alelosPadresM .Mm::before {
    background-image: url("../img/mendel_actualidad/cromosoma_progenitor.png");
}


.contenido .aleloE{
	background-image: url("../img/mendel_actualidad/cromosoma5.png");
    background-repeat: no-repeat;
    width: 18px;
    height: 61px;
    text-indent: -9999px;
    display: block;
     color: rgba(249, 247, 231, 0);
}
.contenido .aleloE.parentalm2:after{
	background-image: url("../img/mendel_actualidad/linea_cromosomas.png");
   background-repeat: no-repeat;
    content: "";
    height: 59px;
    left: -142px;
    position: absolute;
    top: -35px;
    width: 122px;
}
.contenido .aleloE.parentalm2{
	background-image: url("../img/mendel_actualidad/cromosoma6.png");
	 position: relative;
    top: -9px;
}

.contenido .aleloE.progenitorM1:after{
	background-image: url("../img/mendel_actualidad/linea_cromosomas.png");
     background-repeat: no-repeat;
    content: "";
    height: 59px;
    left: -142px;
    position: absolute;
    top: 36px;
    width: 122px;
}
.contenido .aleloE.progenitorM1{
	background-image: url("../img/mendel_actualidad/cromosoma3.png");
	 position: relative;
    top: 29px;
}
.contenido .aleloE.progenitorM2{
	background-image: url("../img/mendel_actualidad/cromosoma6.png");
	position: relative;
    top: 21px;
}

.content_drop_P .droppable{
  position: relative;
}

.contenido .aleloE.cloneR1, .contenido .aleloE.cloneR2, .contenido .aleloE.cloneR3, .contenido .aleloE.cloneR4 {
   position: absolute;
    right: 34px;
    top: 18px;
}

.contenido .aleloE.cloneR1.progenitorM1, .contenido .aleloE.cloneR1.progenitorM2, .contenido .aleloE.cloneR2.progenitorM1, .contenido .aleloE.cloneR2.progenitorM2,
.contenido .aleloE.cloneR3.progenitorM1, .contenido .aleloE.cloneR3.progenitorM2, .contenido .aleloE.cloneR4.progenitorM1, .contenido .aleloE.cloneR4.progenitorM2{
    left: 31px;
    top: 17px;
}

.contenido .ejemploActualidadHibrido .aleloE.cloneR3.progenitorM1{
    left: 46px;
}

.contenido .contenedor_drag_P, .contenido .contenedor_drag_H {
    left: 332px;
    position: absolute;
    top: 83px;
}

.contenido .ejemploActualidad .aleloE.parentalm2 {
    background-image: url("../img/mendel_actualidad/cromosoma4.png");
   
}

.contenido .ejemploActualidad .aleloE.progenitorM1 {
    background-image: url("../img/mendel_actualidad/cromosoma6.png");
}


.contenido .realimentacion-chat {
    border: 1px solid #5b09aa;
    border-radius: 17px;
    margin-left: 2%;
    position: relative;
    top: -170px;
    width: 75%;
     font-size: 1.1em;
}


.contenido .contTodo {
    width: 100%;
}


.contenido .lecturaTerminologia .contTodo:before, .contenido .conejos .contTodo:before {
    display: block;
    content: "";
    clear: both;
}

.contenido .tooltip {
    z-index: auto;
}

.contenido .realimentacion-final {
  top: -130px;
  position: relative;
  width: 90%;
}


.contenido .ejemploActualidad .alelosPadresM .mm::before{

background-image: url("../img/mendel_actualidad/cromosoma_parental.png");
}


.contenido .alelosPadresM .Mm::before {
    background-image: url("../img/mendel_actualidad/cromosoma_ambos.png");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 114px;
    margin-left: 35px;
    width: 48px;
}
.contenido .alelosPadresM .Mm::after {
    border: 1px solid #430c3f;
    border-radius: 75px;
    content: "";
    display: block;
    height: 120px;
    position: relative;
    top: -150px;
    width: 120px;
}


.contenido .alelosPadresM .mm::before {
    background-image: url("../img/mendel_actualidad/cromosoma_ambos.png");
    background-repeat: no-repeat;
     content: "";
    display: block;
    height: 110px;
    margin-left: 35px;
    width: 53px;
}

.contenido .alelosPadresM .mm::after {
    border: 1px solid #430c3f;
    border-radius: 75px;
    content: "";
    display: block;
    height: 120px;
    position: relative;
    top: -145px;
    width: 120px;
}

.contenido .alelosPadresM {
     color: #44023f;
    font-size: 1.3em;
    left: 70px;
    position: absolute;
    text-align: center;
    top: 98px;
}

.contenido .alelosPadresM .Mm {
    position: relative;
    top: -73px;
}


.contenido .aleloP.progenitores {
      background-image: url("../img/mendel_actualidad/simboloM.png");
    background-position: 35px 28px;
    background-repeat: no-repeat;
    display: block;
    height: 77px;
    left: -9px;
    position: relative;
    top: 188px;
    width: 75px;
}

.contenido .aleloP.parentales:before {
     background-image: url("../img/mendel_actualidad/simboloH.png");
    background-position: 16px 28px;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 69px;
    left: 4px;
    position: absolute;
    top: -2px;
    width: 75px;
}



.contenido .alelosPadres {
    display: inline-block;
    left: 59px;
    position: absolute;
    top: 150px;
    -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
      transform: rotate(-90deg);
}

.contenido .aleloP.parentales {
    left: 91px;
    top: -5px;
}

.contenido .aleloP.progenitores {
    left: -111px;
    top: -29px;
}

.contenido .aleloP{
    color: #44023f;
    font-size: 1.2em;
    margin-bottom: 100px;
    
      position: relative;
}


.contenido .aleloR > p {
    display: inline-block;
    left: -15px;
    top: -25px;
    position: relative;
}

.contenido .droppable {
    border: 1px solid #430c3f;
    border-radius: 90px;
    display: inline-block;
    height: 20px;
    position: relative;
    vertical-align: middle;
    width: 20px;
}

/*

.contenido .ejemploActualidadHibrido .aleloR {
    left: -247px;
 }*/

.contenido .aleloR {
    color: #603813;
    font-size: 1.2em;
    /*left: -284px;*/
    position: relative;
    text-align: right;
}


.contenido .GenF1::before {
      background-image: url("../img/mendel_actualidad/llave.png");
    background-repeat: no-repeat;
    content: "";
    height: 393px;
    left: 5px;
    position: absolute;
    top: -281px;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 73px;
}
.contenido .GenF1 {
     color: #44023f;
    position: absolute;
    right: -37px;
    top: 228px;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


.contenido .todocont {
    margin-left: 21%;
}


.contenido .ejercicioAlelos, .contenido .ejercicioAlelosHibridos {
      border: 1px solid #151e00;
    border-radius: 20px;
    display: inline-block;
    height: 533px;
    max-height: 500px;
   /* margin-bottom: 132px;
    margin-left: 13%;*/
    position: relative;
    width: 715px;
}

.contenido .content_drop_H::before {  
    left: -121px;    
   }

 .contenido .content_drop_P::before {
    left: -121px;
}
 .contenido .content_drop_P:before, .contenido .content_drop_H:before {
 	 background-image: url("../img/mendel_actualidad/lineas_cromosomas2.png");
    background-repeat: no-repeat;
    content: "";
    height: 322px;    
    max-width: 129px;
    position: absolute;
    top: 110px;
    width: 100%;
 }

   .contenido .content_drop_P, .contenido .content_drop_H{
    display: inline-block;
    float: right;
    padding: 0;
    position: absolute;
    right: 103px;
    top: -20px;
}

.contenido .content_drop_H {
    right: 60px;
}

.contenido p.instrucciones::after {
    border: 1px solid rgba(87, 108, 17, 0.14);
    content: "";
    display: block;
    margin-top: 5px;
}

.contenido .fase p.instrucciones {
    border: 1px solid #512402;
    border-radius: 10px;
    color: #52054f;
    margin-left: 28px;
    padding: 5px 5px 9px;
    width: 93%;
}
.contenido .fase p {
    line-height: 1.5em;
    padding-right: 10px;
    padding-left: 30px;
}
.contenido .fase.fases .titulo {
  color: #603813;
    left: 10%;
    position: relative;
}
.contenido .fase.fases .titulo:before {
    background: url("../img/general/menu.png") no-repeat -0px -32px;
  left: -21%;
    position: absolute;
    top: -19px;
  width: 59px;
  height: 59px;
  content: "";
  -webkit-transform: rotate(149deg);
  -ms-transform: rotate(149deg);
  transform: rotate(149deg);
}

.contenido .fase.fases .titulo:after {
   content: "";
    height: 13px;
    left: -5%;
    position: absolute;
    top: 20px;
    width: 108%;
  border: solid 1px #324F01;
  border-radius: 10px;
  border-left: none;
  border-right: none;
  border-top: none;
  -webkit-box-shadow:2px 2px 1px 0px rgba(189,211,140,0.3);
-moz-box-shadow: 2px 2px 1px 0px rgba(189,211,140,0.3);
-o-box-shadow: 2px 2px 1px 0px rgba(189,211,140,0.3);
box-shadow: 2px 2px 1px 0px rgba(189,211,140,0.3);
}


.contenido .menuPlantas {
  background: url("../img/general/menu.png") no-repeat 0 0;
  height: 32px;
  position: absolute;
  right: 0;
  width: 231px;
  top: -94px;
}

.contenido .menuPlantas ul li{
list-style-type: none;
}



.contenido .btn-planta.planta-inicio > span::before {
    border-right: 1px solid #233501;
    content: "";
    height: 23px;
    left: 16px;
    position: absolute;
    top: -23px;
    width: 5px;
}

.contenido .btn-planta.planta-inicio > span {
    background-color: rgba(188, 211, 140, 0.43);
    border: 1px solid #233501;
    border-radius: 10px;
    color: #603813;
    left: 6px;
    padding: 5px;
    position: relative;
    top: 88px;
}


.contenido .menuPlantas .planta-inicio {
     background: url("../img/general/menu.png") no-repeat -0px -149px;
  top: -27px;
  right: 4px;
  width: 59px;
  height: 60px;
  position: absolute;
  text-indent: -9999px;
}

.contenido .menuPlantas .planta-inicio:hover {
     background: url("../img/general/menu.png") no-repeat -59px -32px;
  height: 59px;
  text-indent: 0;
}


.contenido .menuPlantas .planta-azul {
    background: url("../img/general/menu.png") no-repeat -173px -144px;
  top: -27px;
  right: 71px;
  width: 56px;
  height: 56px;
  position: absolute;
  text-indent: -9999px;
}

.contenido .menuPlantas .planta-azul:hover {
    background: url("../img/general/menu.png") no-repeat -175px -32px;
     text-indent: 0;
   }

.contenido .btn-planta.planta-azul > span::before {
    border-right: 1px solid #037893;
    content: "";
    height: 96px;
    left: 27px;
    position: absolute;
    top: -97px;
    width: 5px;
}

.contenido .btn-planta.planta-azul > span::after {
    border-bottom: 1px solid #037893;
    content: "";
    height: 1px;
    position: absolute;
    right: 39px;
    top: -98px;
    width: 3px;
}  


.contenido .btn-planta.planta-azul > span {
    background-color: rgba(130, 206, 231, 1);
    border: 1px solid #037893;
    border-radius: 5px;
    color: #025362;
    left: -36px;
    padding: 5px;
    position: relative;
    top: 130px;
    display: inline-block;
    z-index: 100;
}



.contenido .btn-planta.planta-rosa > span::before {
    border-right: 1px solid #8c7548;
    content: "";
    height: 28px;
    left: 56px;
    position: absolute;
    top: -28px;
    width: 5px;
}

.contenido .btn-planta.planta-rosa > span {
    background-color: rgba(255, 227, 191, 1);
    border: 1px solid #8c7548;
    border-radius: 15px;
    color: #2b2215;
    display: inline-block;
    left: -34px;
    padding: 5px;
    position: relative;
    text-align: center;
    top: 82px;
    width: 130px;
    z-index: 100;
}


.contenido .menuPlantas .planta-rosa {
     background: url("../img/general/menu.png") no-repeat -116px -147px;
  top: 28px;
  right: 62px;
  width: 57px;
  height: 56px;
  position: absolute;
  text-indent: -9999px;
}

.contenido .menuPlantas .planta-rosa:hover {
     background: url("../img/general/menu.png") no-repeat -116px -91px;
      text-indent: 0;
    }

.contenido .menuPlantas .planta-purpura {
   background: url("../img/general/menu.png") no-repeat -59px -147px;
  top: 22px;
  right: 132px;
  width: 57px;
  height: 58px;
  position: absolute;
  text-indent: -9999px;
}

.contenido .menuPlantas .planta-purpura:hover {
   background: url("../img/general/menu.png") no-repeat -59px -90px;
   text-indent: 0;
  }
  
  
.contenido .btn-planta.planta-purpura > span::before {
    border-right: 1px solid #bf3aa6;
    content: "";
    height: 29px;
    left: 44px;
    position: absolute;
    top: -30px;
    width: 5px;
}


 .contenido .btn-planta.planta-purpura > span {
 	 background-color: rgba(211, 140, 199, 1);
    border: 1px solid #bf3aa6;
    border-radius: 10px;
    color: #5F075E;
    left: -17px;
    padding: 5px;
    position: relative;
    text-align: center;
    top: 83px;
    width: 105px;
     display: inline-block;
     z-index: 100;
 }
  
  .contenido .btn-experimento.derecha > span {
      background-color: rgba(192, 192, 239, 0.81);
    border: 1px solid #5a40a0;
    border-radius: 15px;
    color: #3d2c7a;
    left: 90px;
    padding: 5px;
    position: relative;
    top: 76px;
    
}


.contenido .btn-experimento.derecha > span::before {
       border-right: 1px solid #5a40a0;
    content: "";
    height: 25px;
    position: absolute;
    right: 53px;
    top: -11px;
    -moz-transform: rotate(-42deg);
    transform: rotate(-42deg);
    transform: rotate(-42deg);
    width: 5px;   
}
 
 
.contenido .btn-experimento.izquierda > span::before{
    border-right: 1px solid #5a40a0;
    content: "";
    height: 25px;
    position: absolute;
    right: -10px;
    top: -11px;
    -moz-transform: rotate(48deg);
    -webkit-transform: rotate(48deg);
    transform: rotate(48deg);
    width: 5px;
}
.contenido .btn-experimento.izquierda > span {
    background-color: rgba(192, 192, 239, 0.81);
    border: 1px solid #5a40a0;
    border-radius: 15px;
    color: #3d2c7a;
    left: -116px;
    padding: 5px;
    position: relative;
    top: 96px;
}


  
/*.contenido .btn-planta.planta-violeta > span::before {
    border-bottom: 1px solid #5a40a0;
    content: "";
    height: 1px;
    position: absolute;
    right: 47px;
    top: -106px;
    width: 5px;
}*/
.contenido .btn-planta.planta-violeta > span::after {
    border-right: 1px solid #5a40a0;
    content: "";
    height: 81px;
    left: 45px;
    position: absolute;
    top: -81px;
    width: 5px;
}
  
  
.contenido .btn-planta.planta-violeta > span {
    background-color: rgba(192, 192, 239, 1);
    border: 1px solid #5a40a0;
    border-radius: 10px;
    color: #53069d;
    left: -22px;
    padding: 5px;
    position: relative;
    top: 142px;
    width: 100px;
    z-index: 100;
    display: inline-block;
}


  
.contenido .menuPlantas .planta-violeta {
  background: url("../img/general/menu.png") no-repeat -173px -88px;
  top: -25px;
  right: 164px;
  width: 57px;
  height: 56px;
  position: absolute;
  text-indent: -9999px;
}

.contenido .menuPlantas .planta-violeta:hover {
  background: url("../img/general/menu.png") no-repeat -118px -32px;
  text-indent: 0;
 }



.contenido .btn-planta.planta-marron > span::before {
    border-right: 1px solid #603813;
    content: "";
    height: 18px;
    left: 48px;
    position: absolute;
    top: -18px;
    width: 5px;
}

.contenido .btn-planta.planta-marron > span {
 background-color: #ffddbf;
    border: 1px solid #603813;
    border-radius: 15px;
    color: #552904;
    display: inline-block;
    left: -24px;
    padding: 5px;
    position: relative;
    text-align: center;
    top: 74px;
    width: 98px;
    z-index: 90;
}

.contenido .menuPlantas .planta-marron {
  background: url("../img/general/menu.png") no-repeat -0px -32px;
  top: 25px;
  right: 195px;
  width: 59px;
  height: 59px;
  position: absolute;
  text-indent: -9999px;
}

.contenido .menuPlantas .planta-marron:hover {
  background: url("../img/general/menu.png") no-repeat -0px -91px;
  text-indent: 0;
 }


.contenido .exposicion1 .bg-1 .button.siguiente {
    bottom: 14px;
}

.contenido .bg-1 .button.siguiente {
     background-image: url("../img/general/siguiente.png");
  border: none;
  color: #000;
  font-size: 1.25em;
  height: 151px;
  left: auto;
  width: 239px;
  /*bottom: -13px;*/
  right: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  float: none;
}

/*.box.bg-1.boxAnterior:before {
  clear: both;
  content: "";
  display: block;
}*/

.box.bg-1.boxAnterior {
  float: left;
    background: none;
}

.box.bg-1.boxSiguiente{
    float: right;
    background: none;
}

.contenido .bg-1 .button.siguiente:hover, .contenido .bg-1 .button.anterior:hover  {
color:#324F01;
}

.contenido .bg-1 .button.siguiente span {
      left: 18px;
  position: absolute;
  top: 30px;
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    
}

.contenido .bg-1 .button.siguiente span.over{
	color:#405903;
}

.contenido .chatFeedback {
    color: #41068c;
}


.contenido .experimentoGuiado .reload, .contenido .restartButton {
    background-color: rgba(255, 255, 255, 0);
    background-image: url("../img/ejercicios/arrow.png");
    background-position: 0 center;
    background-repeat: no-repeat;
    border: 1px solid #350584;
    border-radius: 50%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    display: block;
    height: 45px;
    left: 78%;
    max-width: 45px;
    min-width: 45px;
    position: relative;
    text-indent: -9999px;
    top: -186px;
    width: 45px;
}

.contenido .experimentoLibre .reload, .contenido .restartButton{
	top: 0;
}


.contenido .contenedor {
    position: relative;
    top: -172px;
}
.oacontext .contenido .menu.oculto {
  
     transform-origin: left center 0;
    -webkit-transform-origin: left center 0;
    -ms-transform-origin: left center 0;
    transform: scaleX(0) translate3d(0, 0, 1px); 
    -webkit-transform: scaleX(0) translate3d(0, 0, 1px); 
     -ms-transform: scaleX(0) translate3d(0, 0, 1px); 
}

.header .materia::before{
	background-position: -102px 0;
	border:none;
}

.header .materia .nombre {
    color: #118e38;
    font-family: 'allerregular', Helvetica;
    font-size: 1.2em;
    }
    
.contenido .fase h1{
	display: inline-block;
    font-family: "ambrosia_demoregular",Helvetica;
    margin-bottom: 0;
   
}

.contenido .fase h1 span{
	  font-size: 0.77em;
  letter-spacing: 3px;
	
}


.contenido .vaina .tipo_flor {
    left: 166px;
    top: 4px;
}


.contenido .tooltip-item{
	color:#327A03;
	font-weight: normal;
	border:1px solid #8E6C3A;
	  background: none;
  border-radius: 8px;
  line-height: 21px;
}




.contenido .exposicion2 .button.siguiente {
    bottom: -25px;
    width: 181px;
}


.contenido .tooltip-content{
	background-color: rgba(251, 255, 241, 0.94);
	border-radius: 10px;
	border: solid 1px #324F01;
	padding: 6px;
}

.contenido .exposicion2 .tooltip-content, .tooltip-content-image{
	background-color: rgba(255, 255, 255, 0.91);
	border:1px solid #324f01;
    color:#603813;
    font-size:1em;
    font-family: "ambrosia_demoregular",Helvetica;
}

.contenido .tooltip-content::after{
	border:none;
}

.contenido .tooltip-content.clearfix {
    margin-left: 84px;
    width: 250px;
}

.contenido .tooltip-content.clearfix:before {
      border: 1px solid #324f01;
    content: "";
    left: -49px;
    position: absolute;
    top: 99%;
    width: 55px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
}


.contenido .tooltip-content.clearfix.cruzada {
    bottom: -29px;
    left: auto;
    right: -138%;
    width: 200px;
}





.contenido .tooltip-content.clearfix.cruzada::before {
    left: -72px;
    top: 81px;
    width: 80px;
}




.contenido .tooltip-content.clearfix.g_mendel{
	 bottom: -172px;
    left: 113px;
    width: 500px;
}


.contenido .tooltip-content.clearfix.g_mendel:before {
	 top: 22%; 
	  left: -70px;
     width: 80px;
   
}


.contenido .tooltip-text {
    background-color: #f7fced;
    border-radius: 6px;
    color: #603813;
    font-size: 1.8em;
    padding: 5px;
}


.contenido .capital{
	font-size: 1.4em;
}    

.contenido .button--winona:hover,  .contenido button.selecto{
    background-color: #B8CE82;
    border: 1px solid #405903;;
    color: #405903;
}
.contenido .bg-1 .button {
   color: #405903;
    font-family: "ambrosia_demoregular",Helvetica;
    font-size: 2em;
    left: 84%;
    margin: 0;
    min-width: 98px;
    -webkit-box-shadow: 2px 1px 1px 2px rgba(184, 206, 130, 0.37);
-moz-box-shadow: 2px 1px 1px 2px rgba(184, 206, 130, 0.37);
-o-box-shadow: 2px 1px 1px 2px rgba(184, 206, 130, 0.37);
box-shadow: 2px 1px 1px 2px rgba(184, 206, 130, 0.37);
border: 1px solid #405903;
    border-radius: 10px;
}

.contenido .ejemploActualidadHibrido .bg-1 .button.eleccion{
    left: 0;
}

.contenido .cruzaPerros .calificaPerros{
    top: -100px;
    left: 50%;
}

/*.contenido .button--winona > span{
	padding: 0;
}*/
.contenido .botones {
    width: 150px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

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

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

.contenido .mendelProbabilidad .probEventos .izquierda, .contenido .mendelProbabilidad .probEventosResultado .izquierda{
	position: relative;
	float: left;
	-webkit-transform: translate3d(-10%, 0, 0);
	-moz-transform: translate3d(-10%, 0, 0);
	transform: translate3d(-10%, 0, 0);
	transition: all 1s;
	opacity: 0;
}

.contenido .mendelProbabilidad .probEventos .derecha, .contenido .mendelProbabilidad .probEventosResultado .derecha{
	position: relative;
	max-width: 330px;
	float: right;
	-webkit-transform: translate3d(10%, 0, 0);
	-moz-transform: translate3d(10%, 0, 0);
	transform: translate3d(10%, 0, 0);
	transition: all 1s;
	opacity: 0;
}

.contenido .mendelProbabilidad .probEventos .izquierda.slideIn, .contenido .mendelProbabilidad .probEventosResultado .izquierda{
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transition: all 1s;
	opacity: 1;
}

.contenido .mendelProbabilidad .probEventos .derecha.slideIn, .contenido .mendelProbabilidad .probEventosResultado .derecha{
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transition: all 1s;
	opacity: 1;
}

/*FASE CUADRO PUNNETT -> ANIMACION*/

.contenido .animacionPunnett .cuadroPunnett{
	
    bottom: 0;
    font-size: 1.9em;
    left: 0;
    margin: 0 auto;
   
    position: relative;
    right: 0;
    top: 0;
    width: 314px;
}

.contenido .animacionPunnett .cuadroPunnett .tabla {
    border: 1px solid #512402;
    border-radius: 10px;
     padding: 10px;
}

.contenido .padreUno, .contenido .padreDos{
    bottom: 0;
    left: 0;
    margin: 0 auto;
    position: relative;
    right: 0;
    top: 0;
  /*  width: 100px;*/
   }
   
  .contenido  .padreUno > span {
    font-size: 2em;
    position: relative;
    top: 25px;
}

 .contenido .padreDos > span {
     font-size: 2em;
    left: -198px;
    position: relative;
    top: 95px;
}


.contenido .animacionPunnett .padreUno{
	color: #9E44B4;
	text-align: center;
	
}

.contenido .animacionPunnett  .padreDos{
	color: #BF4FB7;
	text-align: center;
}
.conetnido .animacionPunnett .cuadroPunnett .padreUno{

}

.contenido .animacionPunnett .cuadroPunnett .padreDos{

}

.contenido .animacionPunnett .cuadroPunnett .tabla tr td{
	width: 100px;

}

.contenido .animacionPunnett .cuadroPunnett .renglonUno, .contenido .animacionPunnett .cuadroPunnett .renglonDos, .contenido .animacionPunnett .cuadroPunnett .renglonTres{

}

.contenido .animacionPunnett .cuadroPunnett .renglonUno .C2, .contenido .animacionPunnett .cuadroPunnett .renglonUno .C3, .contenido .animacionPunnett .cuadroPunnett .renglonDos .C2.padreUno, 
.contenido .animacionPunnett .cuadroPunnett .renglonDos .C3.padreUno, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C2.padreUno, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C3.padreUno{
	position: relative;
	top: -20px;
	opacity: 0;
	transition: all 1s;
}

.contenido .animacionPunnett .cuadroPunnett .renglonUno .C2.anima, .contenido .animacionPunnett .cuadroPunnett .renglonUno .C3.anima, .contenido .animacionPunnett .cuadroPunnett .renglonDos .C2.padreUno.anima, 
.contenido .animacionPunnett .cuadroPunnett .renglonDos .C3.padreUno.anima, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C2.padreUno.anima, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C3.padreUno.anima{
	top: 0px;
	opacity: 1;
}

.contenido .animacionPunnett .cuadroPunnett .renglonDos .C1, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C1, .contenido .animacionPunnett .cuadroPunnett .renglonDos .C2.padreDos, 
.contenido .animacionPunnett .cuadroPunnett .renglonDos .C3.padreDos, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C2.padreDos, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C3.padreDos{
	position: relative;
	left: -20px;
	opacity: 0;
	transition: all 1s;
}

.contenido .animacionPunnett .cuadroPunnett .renglonDos .C1.anima, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C1.anima, .contenido .animacionPunnett .cuadroPunnett .renglonDos .C2.padreDos.anima, 
.contenido .animacionPunnett .cuadroPunnett .renglonDos .C3.padreDos.anima, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C2.padreDos.anima, .contenido .animacionPunnett .cuadroPunnett .renglonTres .C3.padreDos.anima{
	left: 0px;
	opacity: 1;
}

.contenido .continueAnimation{
	transition: all 0.5s;
}

.contenido .imagenes-perro .perros-padres:after{
	content: "";
	clear: both;
}

.contenido .imagenes-perro .perros-padres .perro-padre, .imagenes-perro .perros-padres .perro-madre{
	max-width: 30%;
	margin: 3% 10%;
}


.contenido .imagenes-perro .perros-padres .perro-padre::before {
    color: #01353a;
    content: "NNLL";
    display: block;
    font-size: 1.5em;
    left: -40%;
    position: absolute;
    top: 42%;
}

.contenido .imagenes-perro .perros-padres .perro-padre{
	float: left;
    left: 77px;
    position: relative;
    
}


.contenido .imagenes-perro .perros-padres .perro-madre::before {
    color: #01353a;
    content: "nnll";
    display: block;
    font-size: 1.5em;
    right: 2%;
    position: absolute;
    top: 42%;
}

.temp{
  position: absolute;
  left: -173px;
}

.contenido .imagenes-perro .perros-padres .perro-madre{
	 float: right;
    position: relative;
    right: 7%;
	
}

.contenido .imagenes-perro .perros-padres img{
	max-width: 60%;
	 border: 1px solid #036777;
    border-radius: 15px;
    padding: 5px;
}

.contenido .imagenes-perro .perros-hijos{
	margin: 24% 0;
	position: relative;
	
}

.contenido .imagenes-perro .perros-hijos .hijo{
	display: inline-block;
	max-width: 25%;
	height: 100%;
	margin: 0 10%;
	content: "";
}

.contenido .imagenes-perro .perros-hijos .hijo img{
	position: absolute;
	max-width: 10%;
}

.contenido .imagenes-perro .perros-hijos .hijo:after {
      border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 30px solid #024b4f;
    bottom: -155px;
    content: "";
    height: 0;
    left: auto;
    margin-left: 28px;
    position: absolute;
    right: auto;
    width: 0;
}


.contenido .imagenes-perro .perros-hijos .hijo img.herencia:before{
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
	content:" ";
}

.contenido .imagenes-perro .perros-hijos .hijo img.herencia{
	border: 1px solid #036777;
    border-radius: 15px;
    opacity: 0;
    padding: 5px;
}

.contenido .imagenes-perro .perros-hijos .hijo img.herencia.muestra{
	transition: all 0.5s;
	opacity: 1;
}

.contenido .imagenes-perro .perros-hijos:after{
	content: "";
	clear: both;
}

.contenido .respuestas{
	position: relative;
}

.contenido .respuestas .respuesta{
	position: absolute;
	top: 0%;
	opacity: 1;
	/*padding: 2em 0;*/
	transition: all 1s;
}

.contenido .respuestas .respuesta.hide{
	top: 20px;
	opacity: 0;
}

.contenido .respuestas .respuesta.completed{

	top: -20px;
	opacity: 0;
}

.contenido .tablaImagen {
	margin-top: 13%;
}

.contenido .inputRespuesta{	
}

.contenido .inputRespuesta input{
	border-radius: 50%;
    height: 50px;
    left: -82px;
    padding: 10px;
    position: relative;
    text-align: center;
    top: 101px;
    width: 50px;
}

.contenido .experimentoGuiado .flores-padre div{
  display: inline-block;
}

#darkness {
  background:rgba(0, 0, 0, 0.5);
  display:none;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:5;
}

#windowClones .incorrecto, #windowClones .correcto{
  position: fixed;
}

.contenido .experimentoGuiado .plantitaGuiada, .contenido .experimentoGuiado .plantitaGuiadaExtra{
  display: inline-block;
}

/*.contenido .experimentoGuiado .flores-padre #florPadreDominantePuraP1, .contenido .resultadoFinalGuiado .padres #florPadreDominantePuraP1F{
  max-width: 100%;
  height: 246px;
  background: no-repeat;
  background-image: url("../img/ejercicios/chicharos/chicharos/AABBCCDDEEFFGG001.png");
}

.contenido .experimentoGuiado .flores-padre #florPadreRecesivaPuraP2, .contenido .resultadoFinalGuiado .padres #florPadreRecesivaPuraP2F{
  max-width: 100%;
  height: 173px;
  background: no-repeat;
  background-image: url("../img/ejercicios/chicharos/chicharos/AABBCCddeeffgg016.png");
}
/*FIN ANIMACION*/

/* 
 * ========================================
 * 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;
}

.droppable {
	width: 200px;
	height: 50px;
	padding: 2em;
	margin: 2em;
	border: dotted;
}

.preguntasPunnett .tablaImagen .tabla span.droppable{
	position: relative;
}


.contenido .semilla.liso-amarillo {
       background-image: url("../img/mendel_actualidad/chicharos.png");
    background-position: -127px center;
    display: block;
    height: 44px;
    text-indent: -9999px;
    width: 44px;
}

.contenido .semilla.liso-verde {
       background-image: url("../img/mendel_actualidad/chicharos.png");
    background-position: -88px center;
    display: block;
    height: 44px;
    text-indent: -9999px;
    width: 44px;
}

.contenido .semilla.rugoso-amarillo {
       background-image: url("../img/mendel_actualidad/chicharos.png");
    background-position: -44px center;
    display: block;
    height: 44px;
    text-indent: -9999px;
    width: 44px;
}

.contenido .semilla.rugoso-verde {
       background-image: url("../img/mendel_actualidad/chicharos.png");
    background-position: -3px center;
    display: block;
    height: 44px;
    text-indent: -9999px;
    width: 44px;
}


.preguntasPunnett .droppable{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: solid 1px;
  position: relative;
   text-align: center;
}

/*.contenido .cruzaPerros .bg-1 .button.anterior{
	left:-123px;
}*/

.cruzaPerros .tablaAutomatica{
    float: left;
	margin-top: 20px;
}

.cruzaPerros .tablaAutomatica .tabla span.selected{
	color: #FF0000;

}



.contenido .generacionF3 .imagenes {
    margin-bottom: 142px;
    margin-left: 24%;
}


.contenido .generacionF3 .imagenes > img {
    margin-right: 48px;
}


.contenido .generacionF3 .imagenes .blanca {
    left: 51px;
    margin-left: -58px;
    position: relative;
}


.contenido .mapaGeneraciones .instruccionesExp > p {
    margin-left: 0;
}


.contenido .seleccionExperimentos {
    position: relative;
    top: -123px;
}

.contenido .seleccionEjercicios{
    float: right;
  top: -133px;
  position: relative;
}

.contenido .seleccionEjercicios h3.bullets{
    display: block;
    position: relative;
    top: 10px;
    margin-right: 10%;
    font-family: "ambrosia_demoregular";
    font-weight: normal;
}


.contenido .cruzaPerros p.instrucciones-2 {
    display: inline-block;
    margin-left: 10%;
    margin-top: 119px;
    width: 80%;
}


.contenido .ejercicioMonstruo .derecha .button.reload {
    left: 0;
    top: 0;
}

                

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



/* 
 * ==========================
 * === 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
	 * ====================================
	 */
	
	.contenido .ejercicioMonstruo .derecha .button.reload {
    left: 0;
}


	.displayWidth {
		background: none;
	}
	.w1280 {
		display: inline-block;
		background-color: yellow;
	}

  .contenido .ejercicioMonstruo .derecha{
  	-webkit-transform: scale(0.9) translate3d(0, -70px, 0);
  	-moz-transform: scale(0.9) translate3d(0, -70px, 0);
    transform: scale(0.9) translate3d(0, -70px, 0);
  }



   

}

@media screen and (max-width: 1243px){

.contenido .cruzaPerros .calificaPerros{
    top: 20px;
}
}

@media screen and (max-width: 1208px){
	.contenido .fase.cruzaPerros .preguntaRepaso {
	    bottom: 0;
	    margin: 115px auto 0;
	    position: relative;
	    width: 85%;
	}
}


@media screen and (max-width: 1050px){
	.contenido .experimentoLibre .offspringF2 .plantitaLibre .florHijoChicharo, .contenido .experimentoLibre .offspring .plantitaLibre .florHijoChicharo, .contenido .experimentoGuiado .filial .plantitaGuiada .florHijoChicharo, .contenido .experimentoGuiado .filial2 .plantitaGuiada .florHijoChicharo, .contenido .experimentoGuiado .filial .plantitaGuiadaExtra .florHijoChicharo, .contenido .experimentoGuiado .filial2 .plantitaGuiadaExtra .florHijoChicharo {
    	width: 20%;
	}
}

@media screen and (max-width: 1136px) {
    .contenido .cruzaPerros .calificaPerros{
        top: -150px;
        left: 84%;
        right: 50%;
    }
}

@media screen and (max-width: 1121px) {

  


  

  .contenido .ejercicioMonstruo .derecha{
  	-webkit-transform: scale(0.8) translate3d(0, -70px, 0);
  	-ms-transform: scale(0.8) translate3d(0, -70px, 0);
  	-o-transform: scale(0.8) translate3d(0, -70px, 0);
    transform: scale(0.8) translate3d(0, -70px, 0);
       
  }



  .contenido .letrasTabla ul{
        padding-left:5px;
        position: relative;
        top: 24px;
    }
}

@media screen and (max-width: 1086px) {




}

/* 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
	 * ====================================
	 */
	
	
.contenido .fase.cruzaPerros .preguntaRepaso {
    bottom: 0;
    margin-bottom: 0;
    position: relative;
    width: 80%;
}


	
	.contenido .todocont {
    margin-left: 13%;
}


	
	.contenido .tooltip-content.clearfix.cruzada {
    bottom: -52px;    
    right: 255px;    
}
	.contenido .animacionPunnett p {
    width: 77%;
}


	.displayWidth {
		background: none;
	}
	.w1024 {
		display: inline-block;
		background-color:  yellow;
	}
	
	
/*.contenido .botonesFenotiposHibridos {
   
    right: 12px;
   }*/
   

  
  
  
.contenido .imagen-combDihibridacion {    
    margin-left: 13%;
    width: 69%;
}

.contenido .portada h1{
	background-position: 400px 4px;
}
.contenido .portada .texto {
   left: 1.5%;
    top: -66px;
    width: 39%;
}


.contenido .portada .boton_bocina {
    left: 59%;
    top: -6px;
}

.contenido .portada .boton_bocina{
  
}


.contenido .portada .imagen_mulato {
    left: 2%;
    top: -188px;
}


.contenido .fase.portada .imagen_mulato > p {
    margin-left: 6%;
    width: 504px;
}

.contenido .portada h1{
	 margin-left: 7%;
}


.contenido .portada .box.bg-1 {
   
    right: 0;
    
 }
 
 
.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.d::before {
   
    left: -13px;
     -moz-transform: rotate(58deg);
    -webkit-transform: rotate(58deg);
     transform: rotate(58deg);
  
}


.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.c::before {
   
    left: 28px;
    top: -35px;
    -moz-transform: rotate(137deg);
     -webkit-transform: rotate(137deg);
      transform: rotate(137deg);
}
 
}

@media screen and (max-width: 1098px){
	
	
	.contenido .lecturaTerminologia .button.reload {
	    float: left;
	    left: 16%;
	    top: 40px;
	}
	
	.contenido .lecturaTerminologia .derecha{
		 display: inline-block;
	    margin-right: 19%;
	    position: relative;
	    top: 20px;
	    width: 50%;
	}
	
	.contenido .izquierda.terminos{
		display: block;
		    font-size: 1em;
		    margin: 59px auto 0;
		    width: 80%;
	}
}

@media screen and (max-width: 988px){
	
}


@media screen and (max-width: 915px) {
	
	
	.contenido .monstruoCompleto {
   
    margin-top: 0;
   }
	
	.contenido .ejercicioMonstruo .izquierda {
   margin: auto;
    width: 80%;
}

.contenido .ejercicioMonstruo .box.bg-1 .checaMonstruo {
    left: 86%;
    position: absolute;
    right: auto;
    top: 32%;
}



.contenido .ejercicioMonstruo .derecha .button.reload {
    left: 0;
    top: -40px;
}


.contenido .ejercicioMonstruo .derecha {
    float: left;
    left: 23%;
    position: relative;
    top: 63px;
     -moz-transform:none;
      -webkit-transform:none;
    transform:none;
}


	.contenido .animacionPunnett .primerPaso::after {
    right: 5px;
   }
   
.contenido .imagen-dihibridacion{
	margin-left: 0;
}
   
   
.contenido .animacionPunnett p {
    width: 68%;
}
   
	.contenido .todocont {
    margin-left: 6%;
}
}

@media screen and (max-width: 862px){
	.contenido .conejos .button.reload {
	   	top: 25px;
	}



.contenido .fase.cruzaPerros .preguntaRepaso{
  float: right;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  width: 50%;
  bottom: 132px;
  right: 23%;
}

.contenido .circularInput {
  position: relative;
  top: -4px;
  left: -119px;
  float: right;
}

.contenido .tooltip-content.clearfix.cruzada {  
    right: -263px;
    
}


	.contenido .animacionPunnett p {
    width: 73%;
}
	
.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.c::before {
    left: 18px;
   }
   
   
.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.b::before {
   
    left: 47px;
   }
	
	.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.d::before {
    left: -24px;
   -moz-transform: rotate(46deg);
   -webkit-transform: rotate(46deg);
   transform: rotate(46deg);
}
	
	.contenido .portada {  
background-position: -40px 110px;
}

.contenido .ejercicioAlelos, .contenido .ejercicioAlelosHibridos {
margin-left: 3%;
}

.contenido .box.bg-1.clearfix {
    
    right: -89px;
  
}

.contenido #codominanciaEnd {
    margin-left: 17%;
}

.contenido .vacas_pintas {
    margin-left: 10px;
    width: 48%;
}


.contenido .vacas_grises {
    width: 48%;
}


.contenido .tablaImagenesConejos {
    margin: 5% 4% 7%;
}


.contenido .tabla_completa {
    margin: auto 3% 158px;
}

.contenido .droppable.genF2{
	 margin-left: 6.5%;
}


.contenido .generacionF2.uno::before {
    left: 18%;
}


.contenido .parentales.uno::before {    
    left: 55.5%;    
    top: 102px;
}


.contenido .generacionF1 {

    margin-top: 11%;
   }

.contenido .generacionF2 {
    margin-right: -1%;
    
   }
   
.contenido .generacionF3 .imagenes > img {
    margin-right: 6px;
}


.contenido .botonesFenotiposHibridos {
   
    right: 100px;
   }

.contenido .mendelProbabilidad .button.button--winona.button--border-thin.button--round-s {
   
    left: 9%;
   }
   
   
.contenido .diag.cromDup {  
    top: 287px;  
}

.contenido .diag.cromHom {   
    top: 293px;
}

.contenido .orientan {
    
    top: 300px;
    
}


   

   
   
.contenido .imagen-combDihibridacion {
    margin-left: 3%;
    width: 81%;
}

.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.a {
    margin-left: -49px;
}


.contenido .portada .texto {
    width: 95%;
}


.contenido .portada .imagen_mulato {
    left: 11%;
    top: -51px;
}


.contenido .portada .boton_bocina {
    left: 80%;
   
}

.contenido .tooltip-content.clearfix.chicharos_todos {
    
    left: 108px;
    
   }
   
   
.contenido .tooltip-content.clearfix.chicharos_todos::before {
    left: -50px;
    top: 373px;
}

.contenido .generacionF3 .imagenes {
    margin-left: 24%;
}

.contenido .imagenes-perro .perros-hijos .hijo::after {
    bottom: -123px;
    margin-left: 15px;

}

.contenido #dominancia-intermediaVaca {
    margin-left: 79%;
}


.contenido .vacas #dominancia-intermediaEnd {
    margin-left: 18%;
}


.contenido .fase.cruzaPerros .preguntaRepaso {
    margin-left: 20%;
    width: 58%;
}

.contenido .relacion-variedades {
    margin-top: -150px;
}

.contenido .relacion-variedades .tooltip-content.clearfix {
    margin-left: 2px;
}


}	
	
	

/* 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
	 * ====================================
	 */
	
	.contenido .todocont {
    margin-left:0;
}
.contenido .animacionPunnett p {
    width: 68%;
}	
	
.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.c::before {
    left: 10px;
    top: -42px;
}
	
.contenido .mapaExperimentoCompleto .generacionF3.dos .dominantes.d::before {
    left: -36px;
    
}
	
.contenido .portada .texto {
    width: 92%;
}


	.header .nombre_objeto {
		font-size: 20px; /* pixel fallback */
		font-size: 1.25rem;
	}
	
	.displayWidth {
		background: none;
	}
	.w768 {
		display: inline-block;
		background-color:  yellow;
	}
	
	.contenido .box.bg-1.clearfix {    
    right:-231px;
   }

   .contenido .ejemploActualidadHibrido .box.bg-1.clearfix{
    right: 0;
   }
   
   
.contenido .generacionF2 {
    margin-right: -7%;
}



.contenido .generacionF3 .imagenes {
    margin-left: 24%;
}


.contenido .generacionF3 .imagenes > img {
    margin-right: 11px;
}

.contenido .botonesFenotiposHibridos {
    right: 12px;
   }
   
.contenido .mendelProbabilidad .izquierda {
    
    width: 40%;
}

.contenido .mendelProbabilidad .button.button--winona.button--border-thin.button--round-s {
   
    left: 0%;
   }
   
 
.contenido .diag.cromDup {
    top: 265px;
     width: 31%;
}

.contenido .diag.cromHom {
    top: 266px;
}


.contenido .orientan {
    top: 272px;
}




   

.contenido .imagen-combDihibridacion {
    margin-left: 2%;
    width: 92%;
}

.contenido .tooltip-content.clearfix.chicharos_todos {
    bottom: 2px;
    left: -55px;
}

.contenido .tooltip-content.clearfix.chicharos_todos::before {
    left: 140px;
    top: 519px;
}


.contenido .tablaPunnetTodo {
    
    margin-left: 12%;
   }

.contenido .imagenes-perro .perros-hijos .hijo::after {

 bottom: -110px;

}


}