#botonera{
    bottom:1%;
    position:absolute;
    z-index:5;
}
.custom_background{
    width:93.4%;
    position:absolute;
    left:3.3%;
    top:15.9%;
}

.btn_cerrar, .btn_cerrar_2{
    position:absolute;
    top: 9%;
    right: 23.6%;
    width:5%;
    z-index:4;
}

.btn_cerrar_2{
    top:5%;
    right:16%;
}

.btn_cerrar:hover, .btn_cerrar_2:hover{
    cursor:pointer;
    opacity:0.85;
    width:5.5%;
}

.popup{
    position:absolute;
    z-index:2;
    background:rgba(0, 0, 0, 0.75);
    left:3.4%;
    top:15.6%;
    width:93.3%;
    height:81%;
}

.popup_img{
    width:55%;
    margin-left:20%;
    margin-top:5%;
}


#lineas{
    position:Absolute;
    width: 80%;
    left: 9.5%;
    top: 30%;
}

#reproduccion{
    position:Absolute;
    width:25%;
    height:10%;
    background:#D88344;
    border-radius:10px;
    left:33%;
    top:20%;
}

#reproduccion p{
    margin:0;
    padding:0;
    color:white;
    font-size:2.2em;
    line-height:2.2em;
    text-align:center;
}

#descripcion{
    position:absolute;
    width:25%;
    height:10%;
    background:#E9BDF4;
    border-radius:10px;
    left: 52.5%;
    top: 33%;
    
}

#descripcion p{
    margin:0;
    padding:0;
    color:#A417C6;
    font-size:1.45em;
    padding:2%;
}

#rep_sexual{
    position:absolute;
    width: 23%;
    height: 10%;
    background:#B9F4A8;
    border-radius:10px;
    left: 6.5%;
    top: 52%;
    
}

#rep_sexual p{
    margin:0;
    padding:0;
    color:#237C0A;
    font-size:1.8em;
    padding:2%;
    text-align:center;
}

#rep_asexual{
    position:absolute;
    width: 23%;
    height: 10%;
    background:#D8D584;
    border-radius:10px;
    left: 63.5%;
    top: 52%;
    
}

#rep_asexual p{
    margin:0;
    padding:0;
    color:#827F0D;
    font-size:1.8em;
    padding:2%;
    text-align:center;
}

#animal{
    position:absolute;
    width: 12%;
    height: 10%;
    background:#BECAF4;
    border-radius:10px;
    left: 4.5%;
    top: 74%;
    
}

#animal p{
    margin:0;
    padding:0;
    color:#0F36A3;
    font-size:2em;
    line-height:2.3em;
    text-align:center;
}

#vegetal{
    position:absolute;
    width: 12%;
    height: 10%;
    background:#F7A4AB;
    border-radius:10px;
    left: 22.5%;
    top: 74%;
    
}

#vegetal p{
    margin:0;
    padding:0;
    color:#AA0E0E;
    font-size:2em;
    line-height:2.3em;
    text-align:center;
}

#biparticion{
    position:absolute;
    width: 12%;
    height: 10%;
    background:#F4CEA4;
    border-radius:10px;
    left: 36.5%;
    top: 74%;
    
}

#biparticion p{
    margin:0;
    padding:0;
    color:#9B5510;
    font-size:2em;
    line-height:2.3em;
    text-align:center;
}

#fragmentacion{
    position:absolute;
    width: 16%;
    height: 10%;
    background:#B4DDEF;
    border-radius:10px;
    left: 49.5%;
    top: 74%;
    
}

#fragmentacion p{
    margin:0;
    padding:0;
    color:#065172;
    font-size:2em;
    line-height:2.3em;
    text-align:center;
}

#gemacion{
    position:absolute;
    width: 16%;
    height: 10%;
    background:#AFE89E;
    border-radius:10px;
    left: 66.5%;
    top: 74%;
    
}

#gemacion p{
    margin:0;
    padding:0;
    color:#237C0A;
    font-size:2em;
    line-height:2.3em;
    text-align:center;
}

#esporulacion{
    position:absolute;
    width: 12%;
    height: 10%;
    background: #E9C2F2;
    border-radius:10px;
    left: 83.5%;
    top: 74%;
    
}

#esporulacion p{
    margin:0;
    padding:0;
    color: #57056B;
    font-size: 1.7em;
    line-height:2.7em;
    text-align:center;
}

#contenedor_opciones div:not(.exclude):hover{
    cursor:pointer;
    opacity:0.95;
}


#rep_sexual:hover{
     -webkit-box-shadow: 0px 4px 0px 1px #237C0A;
    -moz-box-shadow: 0px 4px 0px 1px #237C0A;
    box-shadow: 0px 4px 0px 1px #237C0A;
}

#rep_asexual:hover{
     -webkit-box-shadow: 0px 4px 0px 1px #B2B206;
    -moz-box-shadow: 0px 4px 0px 1px #B2B206;
    box-shadow: 0px 4px 0px 1px #B2B206;
}

#animal:hover{
     -webkit-box-shadow: 0px 4px 0px 1px #0F36A3;
    -moz-box-shadow: 0px 4px 0px 1px #0F36A3;
    box-shadow: 0px 4px 0px 1px #0F36A3;
}

#vegetal:hover{
     -webkit-box-shadow: 0px 4px 0px 1px #AA0E0E;
    -moz-box-shadow: 0px 4px 0px 1px #AA0E0E;
    box-shadow: 0px 4px 0px 1px #AA0E0E;
}

#biparticion:hover{
     -webkit-box-shadow: 0px 4px 0px 1px #9B5510;
    -moz-box-shadow: 0px 4px 0px 1px #9B5510;
    box-shadow: 0px 4px 0px 1px #9B5510;
}

#fragmentacion:hover{
     -webkit-box-shadow: 0px 4px 0px 1px #065172;
    -moz-box-shadow: 0px 4px 0px 1px #065172;
    box-shadow: 0px 4px 0px 1px #065172;
}

#gemacion:hover{
     -webkit-box-shadow: 0px 4px 0px 1px #237C0A;
    -moz-box-shadow: 0px 4px 0px 1px #237C0A;
    box-shadow: 0px 4px 0px 1px #237C0A;
}

#esporulacion:hover{
    -webkit-box-shadow: 0px 4px 0px 1px #57056B;
    -moz-box-shadow: 0px 4px 0px 1px #57056B;
    box-shadow: 0px 4px 0px 1px #57056B;
}

.cuaderno{
    position:absolute;
    width:93.3%;
    left:3.4%;
    top:15.6%;
    height:80.9%;
    z-index:4;
    border-radius:20px;
    background:rgba(0, 0, 0, 0.7);
    display:none;
}


.cuaderno img:first-of-type{
    width:70%;
    position:absolute;
    top:4%;
    left:15%;
}

#ayuda{
    margin:0 -2px;
    width:70px;
    height:60px;
    background: #64b238;
    position: absolute;
    color:#FFF;
    font-size:3em;
    text-align:center;
    line-height:60px;
    border-radius:10px 10px 0 0;
    z-index:1;
    bottom:3.6%;
    left:47%;

}

#ayuda:active {
    background: #006633;
    transform:scaleY(0.8);
}

#ayuda:hover{
    background: #79C84F;
    cursor:pointer;
}