#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{
    display:none;
}

.popup, .pista{
    position:absolute;
    z-index:20;
    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%;
}

#popup_1{
    display:block;
}

.section{
    position:absolute;
    width:93.5%;
    height:68%;
    top:28%;
    left:3.3%;
}

#section_2{
    display:none;
}


.container_header{
    position:absolute;
    width:50%;
    height:10%;
    left:45%;
    top:17%;
}

#descripcion{
    width:70%;
    margin-left:0%;
}

.container_header div{
    height: 100%;   
    display:inline-block;
    position:absolute;
    background:#64B238;
    border-radius:10px;
}

.number:hover{
    cursor:pointer;
    opacity:0.85;
}

#number_1{
    left:73%;
}

#number_2{
    left:86.5%;
}

#descripcion i{
    position:absolute;
    color:white;
    top:41%;
    left:86%;
    font-size:2.6em;
}

.container_header p, .container_header h3, container_header i{
    margin:0;
    color:white;
    font-size:1.8em;
}

.container_header p{
    padding:0% 0% 0% 2%;
}

.number h3{
    font-size:4em;
    text-align:center;
}

.number{
    width:12%;
}

.section img{
    position:absolute;
    width:30%;
    left:35%;
    top:10%;
}

.actividad div{
    display:inline-block;
    width:30%;
    height:40%;
    margin-top:10%;
    border-radius:10px;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    transition:all 0.5s ease;
}

.actividad div:hover{
    cursor:pointer;
    opacity:0.7;
    width:30.5%;

}

.actividad div:nth-child(1), .actividad div:nth-child(3){
    margin-right:32%;
    margin-left:4%;
}


.actividad p{
    color:white;
    font-size:3em;
    margin:0;
    padding:4% 0 4% 0;
    text-align:center;
}

.oviparo{
    background:#DD730A;
}

.gemacion, .fragmentacion{
    background:#A004A0;
}

.polinizacion{
   background:#3CBC0D; 
}

.asexual{
    background:#D8D584;
}

.esporulacion{
    background:#1049AD;  
}

.sexual{
    background:#72C457;
}

.biparticion{
    background:#DD801B;
}

.viviparo{
    background:#F7A4AB;
}

#estrella{
    width:26%;
    left:36%;
}

#number_1{
    background:#006633;
}

.pregunta{
    font-size:2em;
    margin:1.6% 0 0 0;
}

.respuesta *{
    display:inline-block;
    margin-left:1.5%;
}

.input_respuesta{
    border:none;
    font-size:2.5em;
    padding:0.5%;
    color:#006633; 
}

#section_2{
    left:5%;
    top:32%;
}

.btn_pista{
    width:10%;
    height:10%;
    background:#F9082B;
    border-radius:10px;
    text-align:center;
    border-bottom:solid 5px #A30423;
}

.btn_pista:hover, #verificar:hover{
    cursor:pointer;
    opacity:0.75;
}

.btn_pista:active, #verificar:active{
    transform:scaleY(0.9);
    -ms-transform:scaleY(0.9);
    -moz-transform:scaleY(0.9);
    -webkit-transform:scaleY(0.9);
    
}
.btn_pista p{
    color:white;
    margin:0;
    font-size:2em;
    line-height:2em;
}

.correcto{
    position:absolute;
    width:8% !important;
    display:none;
    z-index:10;
}

#correcto_1, #correcto_2{
    top:22%;
    left:29%;
}

#correcto_3{    
    top:67%;
    left:94%;  
    width:6% !important;
}

#correcto_4{
    top:22%;
    left:90%;
}

#popup_2, #popup_3{
    display:none;
}

#popup_3 img:first-of-type{
    width:80%;
    margin-left:10% !important;
}

#btn_cerrar_3{
    right:12%;
}

.ayuda, #verificar{
    margin:0 -2px;
    width:75px;
    height:65px;
    background: #64b238;
    position: absolute;
    color:#FFF;
    font-size:3em;
    text-align:center;
    line-height:60px;
    border-radius:10px 10px 0 0;
    z-index:1;
   
}

#ayuda_1{
    bottom:0.4%;
    left:63%;
}

#ayuda_2{
    left:56%;
    bottom:6%;
}

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

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



.pista img:first-of-type{
    width:90%;
    margin-left:5%;
    margin-top:2%;
}

.btn_cerrar_pista{
    top:3%;
    right:5%;
}

.pista{
    display:none;
}

#verificar{
    width:20%;
    border-radius:10px 10px 0 0;
    bottom:6%;
    left:35%;
}

#verificar p{
    margin:0;
}

#popup_4 img:first-of-type{
    width:65%;
}

#btn_cerrar_4{
    left:52%;
}