/*AQUÍ COMIENZAN LOS ESTILOS PC*/
nav{width: 600px;
	position: fixed;
	bottom: 20px;
	left: 50%;
	margin-left: -300px;
	z-index: 2000}

#bolita_uno {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1);}
#bolita_dos {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1)}
#bolita_tres {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1)}
#bolita_cuatro {width: 50px;
				height: 50px;
				float: left;
				margin-left: 10px;
				transform: scale(1)}
#bolita_cinco {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1)}
#bolita_seis {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1)}
#bolita_siete {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1)}
#bolita_ocho {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1)}
#bolita_nueve {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1)}
#bolita_diez {width: 50px;
			height: 50px;
			float: left;
			margin-left: 10px;
			transform: scale(1)}
.clasebolita {-webkit-animation-name:agrandar_bolita;
			-webkit-animation-duration:0.5s;
			-webkit-animation-iteration-count:1;
			-webkit-animation-fill-mode:forwards}
@-webkit-keyframes agrandar_bolita {
	0%{transform: scale(1)}
	100%{transform: scale(1.5)}
}

.flecha_der{font-size: 3em;
    		position: absolute;
    		top: 45%;
    		right:2.5%;
    		z-index: 2000}
.flecha_izq{font-size: 3em;
    		position: absolute;
    		top: 45%;
    		left: 2.5%;
    		z-index: 2000}
a{text-decoration: none;
  color:black}

#uno {width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    overflow: hidden}
#dos {width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    background-color:white;
    overflow: hidden}
#tres {width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 200%;
    background-color:white;
    overflow: hidden}
#cuatro {width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0;
    	left: 300%;
    	background-color:white;
    	overflow: hidden}
#cinco {width: 100%;
    	height: 100%;
   		position: absolute;
    	top: 0;
    	left: 400%;
    	background-color:white;
    	overflow: hidden}
#seis {width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 500%;
    background-color:white;
    overflow: hidden}
#siete {width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0;
    	left: 600%;
    	background-color:white;
    	overflow: hidden}
#ocho {width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 700%;
    background-color:white;
    overflow: hidden}
#nueve {width: 100%;
    	height: 100%;
    	position: absolute;
    	top: 0;
    	left: 800%;
    	background-color:white;
    	overflow: hidden}
#diez {width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 900%;
    background-color:white;
    overflow: hidden}

/*ESCENA UNO*/
#coffin{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 999}
#titulo{position: absolute;
		bottom: 25%;
		left: 25%;
		right: 25%;
		z-index: 1000;
		background-color:rgba(0,0,0,0.61);
    	-webkit-animation-name:mover_titulo;
    	-webkit-animation-duration:2s;
    	-webkit-animation-iteration-count:1;
    	-webkit-animation-fill-mode:forwards}
#titulo h2{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:2vw;
			text-align: center;
    		line-height: 30px}
@-webkit-keyframes mover_titulo{
	0%{transform: scale(0)}
    100%{transform: scale(1)}
}
#texto_celular{display: none}
#texto_celular p{font-family: 'Gloria Hallelujah', cursive}
#foto_rotar{display: none}

/*ESCENA DOS*/
#paisaje{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 999}
.televisor{width: 100%;
   		height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 1001}
.risas{width: 100%;
    height: 100%;
    top:0;
    left: 0;
    position: absolute;
    z-index: 1002;
    opacity: 0}
.clase_risas{-webkit-animation-name:mover_risas;
			-webkit-animation-duration:2s;
    		-webkit-animation-iteration-count:1;
    		-webkit-animation-fill-mode:forwards;
    		-webkit-animation-delay: 3s}
@-webkit-keyframes mover_risas{
	0%{transform: scale(0);
		opacity: 0}
    100%{transform: scale(1);
		opacity: 1}
}
.persona_riendo{width: 100%;
    			height: 100%;
    			top: 0;
    			left: 0;
    			position: absolute;
    			z-index: 1001}
#bailando{width: 400px;
        height: 120px;
        top: 45%;
        left: 5.5%;
        position: absolute;
        z-index: 1000}
#mensaje1{position: absolute;
		bottom: 60%;
		left: 30%;
		right: 30%;
		z-index: 1002;
		background-color:rgba(0,0,0,0.61)}
#mensaje1 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:2em;
			text-align: center;
   			line-height: 38px}

/*ESCENA TRES*/
#calle{width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 999}
.publico{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 1000}
.ataud{width: 100%;
   	height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1001}
.clase_ataud{-webkit-animation-name:mover_ataud;
   			-webkit-animation-duration:9.5s;
    		-webkit-animation-iteration-count:1;
    		-webkit-animation-fill-mode:forwards}
@-webkit-keyframes mover_ataud{
    0%{top: 0;
        left: 0}
    33%{top: 0;
        left: -65%}
    66%{top: 0;
        left: -40%}
    100%{top: 0;
        left: -95%}
}
#mensaje2{position: absolute;
		bottom: 60%;
		left: 30%;
		right: 30%;
		z-index: 1002;
		background-color:rgba(0,0,0,0.61)}
#mensaje2 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:2em;
			text-align: center;
   			line-height: 38px}

/*ESCENA CUATRO*/
.mapaghana{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
   		position: absolute;
    	z-index: 1001;
    	opacity: 0}
.clase_mapaghana{-webkit-animation-name:mover_mapaghana;
    			-webkit-animation-duration:3s;
   			 	-webkit-animation-iteration-count:1;
    			-webkit-animation-fill-mode:forwards;
    			-webkit-animation-delay: 4s}
@-webkit-keyframes mover_mapaghana{
    0%{opacity: 0}
    100%{opacity: 1}
}
.avion{width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1002}
.clase_avion{-webkit-animation-name:mover_avion;
    		-webkit-animation-duration:3s;
    		-webkit-animation-iteration-count:1;
    		-webkit-animation-fill-mode:forwards;
    		-webkit-animation-delay: 6s}
@-webkit-keyframes mover_avion{
    0%{top: 0;
       left: 0;
       transform: scale(1)}
    100%{top: 25%;
        left: 5%;
        transform: scale(0)}
}
#mensaje3{position: absolute;
		bottom: 60%;
		left: 30%;
		right: 30%;
		z-index: 1002;
		background-color:rgba(0,0,0,0.61)}
#mensaje3 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:2em;
			text-align: center;
    		line-height: 38px}
.maparesponsive{display: none}

/*ESCENA CINCO*/
#video_tumbas{width: 100%;
        	height: 100%;
        	top: 0;
        	left: 0;
        	position: absolute;
        	z-index: 1000}
#video_tumbas video {height: 100%;
					object-fit: cover}
#mensaje4{position: absolute;
		bottom: 60%;
		left: 15%;
		right: 15%;
		z-index: 1002;
		background-color:rgba(0,0,0,0.61)}
#mensaje4 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:1.5em;
			text-align: center;
   			line-height: 38px}

/*ESCENA SEIS*/
.bandera{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 999}
.benjamin{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 1000}
.burbuja{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 1001;
    	opacity: 0}
.clase_burbuja{-webkit-animation-name:mover_burbuja;
    		-webkit-animation-duration:2s;
    		-webkit-animation-iteration-count:1;
    		-webkit-animation-fill-mode:forwards}
@-webkit-keyframes mover_burbuja{
    0%{opacity: 0;
       transform: scale(0)}
    100%{opacity: 1;
        transform: scale(1)}
}

/*ESCENA SIETE*/
.vestimenta{width: 100%;
    		height: 100%;
    		top: 0;
    		left: 0;
    		position: absolute;
    		z-index: 1000}
#mensaje5{position: absolute;
		bottom: 70%;
		left: 20%;
		right: 40%;
		z-index: 1002;
		background-color:rgba(0,0,0,0.61)}
#mensaje5 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:1.5em;
    		text-align: left;
    		line-height: 38px}
#mensaje6{position: absolute;
		bottom: 35%;
		left: 40%;
		right: 20%;
		z-index: 1002;
		background-color:rgba(0,0,0,0.61)}
#mensaje6 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:1.5em;
    		text-align: right;
    		line-height: 38px}

/*ESCENA OCHO*/
#festival{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 999}
.confeti{width: 100%;
    	height: 100%;
    	top: 0;
    	left: 0;
    	position: absolute;
    	z-index: 1000;
    	opacity: 0}
.clase_confeti{-webkit-animation-name:mover_confeti;
    		-webkit-animation-duration:6s;
    		-webkit-animation-iteration-count:1;
    		-webkit-animation-fill-mode:forwards}
@-webkit-keyframes mover_confeti{
    0%{top: 0;
       left: 0;
       opacity: 1}
    50%{top: -30%;
        left: 0;
        opacity: 1}
    100%{top: 0;
        left: 0;
        opacity: 0}
}
.muchedumbre{width: 100%;
    		height: 100%;
    		top: 0;
   			left: 0;
    		position: absolute;
    		z-index: 1001}
.personajes1{width: 100%;
    		height: 100%;
    		top: 0;
    		left: 0;
    		position: absolute;
    		z-index: 1003}
.clase_personajes1{-webkit-animation-name:mover_personajes1;
    			-webkit-animation-duration:6s;
    			-webkit-animation-iteration-count:1;
    			-webkit-animation-fill-mode:forwards}
@-webkit-keyframes mover_personajes1{
    0%{top: 0;
       left: 0}
    25%{top: 18%;
        left: 0}
    50%{top: 0;
        left: 0}
    75%{top: 18%;
        left: 0}
    100%{top: 0;
        left: 0}
}
.personajes2{width: 100%;
    		height: 100%;
    		top: 0;
    		left: 0;
    		position: absolute;
    		z-index: 1002}
.clase_personajes2{-webkit-animation-name:mover_personajes2;
    			-webkit-animation-duration:6s;
    			-webkit-animation-iteration-count:1;
   				-webkit-animation-fill-mode:forwards}
@-webkit-keyframes mover_personajes2{
    0%{top: 0;
       left: 0}
    25%{top: -18%;
        left: 0}
    50%{top: 0;
        left: 0}
    75%{top: -18%;
        left: 0}
    100%{top: 0;
        left: 0}
}
#mensaje7{position: absolute;
		bottom: 60%;
		left: 20%;
		right: 20%;
		z-index: 1004;
		background-color:rgba(0,0,0,0.61)}
#mensaje7 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:1.5em;
			text-align: center;
    		line-height: 38px}

/*ESCENA NUEVE*/
#paneo{width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 999}
#mensaje8{position: absolute;
		bottom: 30%;
		left: 15%;
		right: 15%;
		z-index: 1000;
		background-color:rgba(0,0,0,0.61)}
#mensaje8 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:1.5em;
			text-align: center;
    		line-height: 38px}

/*ESCENA NUEVE*/
#mensaje9{position: absolute;
		bottom: 20%;
		left: 15%;
		right: 15%;
		z-index: 1002;
		background-color:rgba(0,0,0,0.61)}
#mensaje9 p{font-family: 'Gloria Hallelujah', cursive;
			color: #FFFFFF;
			font-size:1em;
			text-align: center;
    		line-height: 38px}
/*TERMINAN ESTILOS PC*/

/*AQUÍ COMIENZAN LOS ESTILOS CELULAR VERTICAL*/
@media only screen and (max-width: 500px) {
	#texto_celular{display: block;
                position: absolute;
                top: 0;
                font-size: 2em;
                color: black;
                width: 100%;
                z-index: 1000;
                text-align: center}
    #foto_rotar{display: block;
                width: 100%;
                height: 100%;
                z-index: 1001}
   	#coffin{display: none}
    #titulo{display: none}
	.flecha_der{display: none}
}

/*AQUÍ COMIENZAN ESTILOS CELULAR HORIZONTAL*/
@media only screen and (max-width: 830px) {
	nav{display: none}
    
	#mensaje1{width: 400px;
    		position: absolute;
    		left: 50%;
    		margin-left: -200px;
    		bottom: 250px;
    		text-align: center;
    		z-index: 1002;
    		background-color: rgba(0, 0, 0, 0.5)}
	#mensaje1 p{font-size: 0.8em}
    
	.televisor{display: none}
    
	#bailando{top: 45%;
        	left: 5.5%;
        	width: 230px;
        	height: 90px;}
    
	#mensaje2{width: 400px;
			position: absolute;
			bottom: 60%;
			left: 50%;
   			margin-left: -200px;
    		text-align: center;
			z-index: 1002;
			background-color:rgba(0,0,0,0.61)}
    #mensaje2 p{font-size:0.8em}
    
	#mensaje3{width: 400px;
    		position: absolute;
   			bottom: 60%;
    		left: 50%;
    		margin-left: -200px;
    		text-align: center;
    		z-index: 1002;
    		background-color:rgba(0,0,0,0.61)}
    #mensaje3 p{font-size:0.8em}
    
	#mensaje4{width: 500px;
    		position: absolute;
    		bottom: 50%;
    		left: 50%;
    		margin-left: -250px;
    		text-align: center;
    		z-index: 1002;
    		background-color:rgba(0,0,0,0.61);}
    #mensaje4 p{font-size:0.7em} 
    
	#mensaje5{width: 400px;
    		position: absolute;
    		bottom: 65%;
    		left: 50%;
    		margin-left: -200px;
    		text-align: center;
    		z-index: 1002;
    		background-color:rgba(0,0,0,0.61);}
    #mensaje5 p{font-size:0.7em} 
    
	#mensaje6{width: 400px;
    		position: absolute;
    		bottom: 10%;
    		left: 50%;
    		margin-left: -200px;
    		text-align: center;
    		z-index: 1002;
    		background-color:rgba(0,0,0,0.61);}
    #mensaje6 p{font-size:0.7em} 
    
	#mensaje7{width: 500px;
    		position: absolute;
    		bottom: 55%;
    		left: 50%;
    		margin-left: -250px;
    		text-align: center;
    		z-index: 1002;
    		background-color:rgba(0,0,0,0.61);}
    #mensaje7 p{font-size:0.7em}
    
	#mensaje8{width: 500px;
    		position: absolute;
    		bottom: 30%;
    		left: 50%;
    		margin-left: -250px;
    		text-align: center;
    		z-index: 1002;
    		background-color:rgba(0,0,0,0.61);}
    #mensaje8 p{font-size:0.7em} 
    
	#mensaje9{width: 400px;
    		position: absolute;
    		bottom: 20%;
   		 	left: 50%;
    		margin-left: -200px;
    		text-align: center;
    		z-index: 1002;
    		background-color:rgba(0,0,0,0.61);}
    #mensaje9 p{font-size:0.8em} 
    
	.mapaghana{display: none}
    .maparesponsive{display: block;
    				width: 100%;
    				height: 100%;
    				top: 0;
    				left: 0;
    				position: absolute;
    				z-index: 1001;
    				opacity: 0}
    .clase_maparesponsive{-webkit-animation-name:mover_maparesponsive;
    					-webkit-animation-duration:3s;
    					-webkit-animation-iteration-count:1;
    					-webkit-animation-fill-mode:forwards;
    					-webkit-animation-delay: 4s}
	@-webkit-keyframes mover_maparesponsive{
		0%{opacity: 0}
    	100%{opacity: 1}
	}
}