/*CODIGO DIV APARECE*/

body {  /* webkit adjacent sibling bug fix */
	-webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
	from {padding:0;} 
	to {padding:0;} 
}

div.css3droppanel { /* Main wrapper for push down panel */
		width: 100%;
		position: relative;
		margin: 0;
		margin-bottom: 1em; /* margin with rest of content on page */
		}


div.css3droppanel > div { /* Content DIV DIV inside wrapper */
     		width: 87.7%;
		height: 10px; /* initial height of content when hidden. Should be same height as bottom bar (see div.css3droppanel:after) */
		padding: 5px;
		-moz-box-sizing: border-box; /* ensure any padding and border declared inside content DIV doesn't increase DIV's declared dimensions */
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		background: #c9c9c9; /* background of content DIV */
		position: relative;
		opacity: 0;
    -moz-transition: all 0.2s ease-in-out 0.1s;  /* CSS3 transition of UL state. Last 0.1s specifies delay before animation */
    -o-transition: all 0.2s ease-in-out 0.1s; /* instead of ease-in-out, also try cubic-bezier(0.25, 0.1, 0.25, 1.4) instead */
    -webkit-transition: all 0.2s ease-in-out 0.1s;
    transition: all 0.2s ease-in-out 0.1s;
		}

div.css3droppanel:after { /* Add bottom bar beneath wrapper */
		content: '';
		display: block;
		bottom: 0;
		position: absolute;
		width: 88%;
		height: 10px;
		box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;
		background: #5a1619; /* dark redish background and its gradient versions */
		background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));
		background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
		background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
		background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
		background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
		}


div.css3droppanel input[type="checkbox"] { /* style invisible checkbox element used to toggle state of push down panel */
		position: absolute;
		right: 50px; /* right position of checkbox */
		width: 60px; /* width of checkbox */
		height: 42px; /* height of checkbox */
		bottom: -34px; /* bottom offset of checkbox */
		z-index: 10;
		cursor: pointer;
		opacity: 0;
		}

div.css3droppanel input[type="checkbox"]:checked ~ div { /* when checkbox is checked, expand content within wrapper */
		height: 250px; /* height of content to expand to. Scrollbar will be shown if content overflows this height */
		opacity: 1;
		overflow: auto;
		}

div.css3droppanel label { /* style label that's positioned below wrapper's bottom bar, and will toggle checkbox when interacted with */ 
		position: absolute;
		right: 80px; /* right position of label */
		width: 60px; /* width of label */
		height: 42px; /* height of label */
		bottom: -34px; /* bottom offset of label */
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
		cursor: pointer;
		z-index: 5;
		background: #5a1619; /* dark redish background and its gradient versions */
		background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));
		background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
		background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
		background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
		background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
		box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;
		}

div.css3droppanel label:hover { /* style of label when mouse rolls over it */
		box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;
		}

div.css3droppanel label:after { /* generated down arrow */
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border: 12px solid transparent;
		border-color: white transparent transparent transparent;
		top: 18px;
		left: 18px;
		box-shadow: 0 0 7px gray inset;
		}
/*FIN CODIGO APARECE*/
.cientifico{font-family: arial, sans-serif;
color: #BF0000;
font-size: 14px;
font-weight: bold;}

.lista{font-family: arial, sans-serif;
color: #112CF7;
font-size: 14px;
font-weight: bold;}
		.fondo {
				  background-image: url(http://www.granada.org/inet/warboles.nsf/PlazaGracia_Pl.gif);
				  width: 590px;
				  height: 738px;
				}
			
		/*Parte superior Imagen*/	
		#puntoolmo00{ position: absolute;
						margin-left: 46px;
						margin-top: 144px; }
		#puntoolmo01{ position: absolute;
						margin-left: 46px;
						margin-top: 209px; }
		/*Parte debajo Imagen*/				
		#puntoolmo02{ position: absolute;
						margin-left: 36px;
						margin-top: 302px; }
		#puntoolmo03{ position: absolute;
						margin-left: 36px;
						margin-top: 338px; }
		#puntoolmo04{ position: absolute;
						margin-left: 36px;
						margin-top: 373px; }
		/*Parte inferior Imagen*/				
		#puntoolmo05{ position: absolute;
						margin-left: 34px;
						margin-top: 457px; }
		#puntoolmo06{ position: absolute;
						margin-left: 34px;
						margin-top: 485px; }
		#puntoolmo07{ position: absolute;
						margin-left: 34px;
						margin-top: 528px; }
		#puntoolmo08{ position: absolute;
						margin-left: 34px;
						margin-top: 560px; }
		#puntoolmo09{ position: absolute;
						margin-left: 34px;
						margin-top: 593px; }


		/*Parte superior Imagen*/
		#puntoplatano00{ position: absolute;
						margin-left: 200px;
						margin-top: 144px; }
		#puntoplatano01{ position: absolute;
						margin-left: 260px;
						margin-top: 144px; }
		
		/*Parte superior Imagen*/
		#puntofalsaacacia00{ position: absolute;
						margin-left: 410px;
						margin-top: 144px; }
		#puntofalsaacacia01{ position: absolute;
						margin-left: 215px;
						margin-top: 220px; }
		#puntofalsaacacia02{ position: absolute;
						margin-left: 265px;
						margin-top: 210px; }
		#puntofalsaacacia03{ position: absolute;
						margin-left: 422px;
						margin-top: 210px; }
	

		/*Parte debajo Imagen*/
		#puntofalsaacacia04{ position: absolute;
						margin-left: 73px;
						margin-top: 305px; }
		#puntofalsaacacia05{ position: absolute;
						margin-left: 211px;
						margin-top: 295px; }
		#puntofalsaacacia06{ position: absolute;
						margin-left: 266px;
						margin-top: 308px; }
		#puntofalsaacacia07{ position: absolute;
						margin-left: 73px;
						margin-top: 365px; }
		#puntofalsaacacia08{ position: absolute;
						margin-left: 228px;
						margin-top: 355px; }
		#puntofalsaacacia09{ position: absolute;
						margin-left: 276px;
						margin-top: 362px; }
	

		/*Parte debajo Imagen*/
		#puntofalsaacacia10{ position: absolute;
						margin-left: 73px;
						margin-top: 435px; }
		#puntofalsaacacia11{ position: absolute;
						margin-left: 228px;
						margin-top: 455px; }
		#puntofalsaacacia12{ position: absolute;
						margin-left: 276px;
						margin-top: 448px; }
		#puntofalsaacacia13{ position: absolute;
						margin-left: 286px;
						margin-top: 508px; }
	

		/*Parte superior Imagen*/	
		#puntoadelfa00{ position: absolute;
						margin-left: 44px;
						margin-top: 185px; }

		#puntoadelfa01{ position: absolute;
						margin-left: 44px;
						margin-top: 229px; }

		#puntoadelfa02{ position: absolute;
						margin-left: 265px;
						margin-top: 190px; }
		#puntoadelfa03{ position: absolute;
						margin-left: 265px;
						margin-top: 230px; }

		/*Parte debajo Imagen*/	
		#puntoadelfa04{ position: absolute;
						margin-left: 36px;
						margin-top: 283px; }
		#puntoadelfa05{ position: absolute;
						margin-left: 36px;
						margin-top: 320px; }
		#puntoadelfa06{ position: absolute;
						margin-left: 36px;
						margin-top: 356px; }
		#puntoadelfa07{ position: absolute;
						margin-left: 36px;
						margin-top: 393px; }
		#puntoadelfa08{ position: absolute;
						margin-left: 236px;
						margin-top: 373px; }

		/*Parte inferior Imagen*/	
		#puntoadelfa09{ position: absolute;
						margin-left: 34px;
						margin-top: 443px; }
		#puntoadelfa10{ position: absolute;
						margin-left: 34px;
						margin-top: 469px; }
		#puntoadelfa11{ position: absolute;
						margin-left: 34px;
						margin-top: 500px; }
		#puntoadelfa12{ position: absolute;
						margin-left: 34px;
						margin-top: 514px; }
		#puntoadelfa13{ position: absolute;
						margin-left: 34px;
						margin-top: 543px; }
		#puntoadelfa14{ position: absolute;
						margin-left: 34px;
						margin-top: 576px; }
		#puntoadelfa15{ position: absolute;
						margin-left: 234px;
						margin-top: 435px; }
		#puntoadelfa16{ position: absolute;
						margin-left: 221px;
						margin-top: 472px; }
		

		/*Triangulo suelto dcha */
		#puntoadelfa17{ position: absolute;
						margin-left: 456px;
						margin-top: 410px; }
		#puntoadelfa18{ position: absolute;
						margin-left: 456px;
						margin-top: 425px; }
		#puntoadelfa19{ position: absolute;
						margin-left: 451px;
						margin-top: 437px; }



		/*Parte superior Imagen*/	
		#puntodurillo00{ position: absolute;
						margin-left: 412px;
						margin-top: 232px; }

		/*Parte debajo Imagen*/	
		#puntoviburno00{ position: absolute;
						margin-left: 404px;
						margin-top: 337px; }


		/*Parte inferior Imagen Cuadrante Izda Superior*/	
        #puntopalmera00{ position: absolute;
						margin-left: 78px;
						margin-top: 517px; }
		#puntopalmera01{ position: absolute;
						margin-left: 75px;
						margin-top: 577px; }
		#puntopalmera02{ position: absolute;
						margin-left: 125px;
						margin-top: 510px; }
		#puntopalmera03{ position: absolute;
						margin-left:165px;
						margin-top: 510px; }
		#puntopalmera04{ position: absolute;
						margin-left: 221px;
						margin-top: 517px; }
		#puntopalmera05{ position: absolute;
						margin-left: 209px;
						margin-top: 551px; }


		/*Parte inferior Imagen Cuadrante Dcha Superior*/	

		#puntopalmera06{ position: absolute;
						margin-left: 375px;
						margin-top: 510px; }		
		#puntopalmera07{ position: absolute;
						margin-left: 420px;
						margin-top: 510px; }
		#puntopalmera08{ position: absolute;
						margin-left: 450px;
						margin-top: 470px; }
		#puntopalmera09{ position: absolute;
						margin-left: 450px;
						margin-top: 515px; }
		#puntopalmera10{ position: absolute;
						margin-left: 445px;
						margin-top: 545px; }

	/*Parte inferior Imagen Cuadrante Dcha Superior*/

		#puntonaranjo00{ position: absolute;
						margin-left: 397px;
						margin-top: 510px; }
		#puntonaranjo01{ position: absolute;
						margin-left: 450px;
						margin-top: 490px; }

		/*Parte inferior Imagen Cuadrante Dcha ultimo*/	
		#puntonaranjo02{ position: absolute;
						margin-left: 463px;
						margin-top: 631px; }


		/*Parte inferior Imagen Cuadrante Izda Superior*/
		#puntoespinofuego00{ position: absolute;
						margin-left: 203px;
						margin-top: 570px; }
		#puntoespinofuego01{ position: absolute;
						margin-left: 228px;
						margin-top: 570px; }

		/*Parte inferior Imagen Cuadrante Dcha ultimo*/	
		#puntoespinofuego02{ position: absolute;
						margin-left: 203px;
						margin-top: 630px; }

		/*Parte inferior Imagen Cuadrante Dcha ultimo*/	
		#puntochopo00{ position: absolute;
						margin-left: 223px;
						margin-top: 630px; }
		#puntochopo01{ position: absolute;
						margin-left: 258px;
						margin-top: 630px; }
		#puntochopo02{ position: absolute;
						margin-left: 293px;
						margin-top: 630px; }
		#puntochopo03{ position: absolute;
						margin-left: 333px;
						margin-top: 630px; }
		#puntochopo04{ position: absolute;
						margin-left: 363px;
						margin-top: 630px; }
		#puntochopo05{ position: absolute;
						margin-left: 413px;
						margin-top: 630px; }
		#puntochopo06{ position: absolute;
						margin-left: 443px;
						margin-top: 630px; }



		/*Parte inferior Imagen Cuadrante Dcha Superior*/		
		#puntoespinojerusalem00{ position: absolute;
						margin-left: 313px;
						margin-top: 510px; }
		#puntoespinojerusalem01{ position: absolute;
						margin-left: 353px;
						margin-top: 510px; }
		#puntoespinojerusalem02{ position: absolute;
						margin-left: 465px;
						margin-top: 550px; }


		/*Parte inferior Imagen Cuadrante Iqda Inferior*/		
		#puntoespinojerusalem03{ position: absolute;
						margin-left: 53px;
						margin-top: 659px; }
		#puntoespinojerusalem04{ position: absolute;	
						margin-left: 100px;
						margin-top: 654px; }
		#puntoespinojerusalem05{ position: absolute;
						margin-left: 140px;
						margin-top: 654px; }
		#puntoespinojerusalem06{ position: absolute;
						margin-left: 100px;
						margin-top: 670px; }
		#puntoespinojerusalem07{ position: absolute;
						margin-left: 140px;
						margin-top: 670px; }
		
		/*Animaciones iconos */	
		.anima {
		    height: 20px;
		    width: 20px;
		    margin: 15px 0;
		    -webkit-transition: all 1s ease;
		    -moz-transition: all 1s ease;
		    -o-transition: all 1s ease;
		}
 
		 .anima:hover {
			  height: 30px;
			  width: 30px;
			  margin-left: -50px;
			}


		 .pequeanima {
		    height: 16px;
		    width: 16px;
		    margin: 15px 0;
		    -webkit-transition: all 1s ease;
		    -moz-transition: all 1s ease;
		    -o-transition: all 1s ease;
		}
 
		 .pequeanima:hover {
			  height: 20px;
			  width: 20px;
			  margin-left: -50px;