.zoom-over{
	display:block;
	 -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.zoom-over:hover,
.zoom-over.active{
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1);	
}

.zoom-over-img{
	display: inline-block;	
}

.zoom-over-img img{
	 -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}

.zoom-over-img:hover img,
.zoom-over-img.active img{
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   -o-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1);	
}

.zoom-command{
	display:block;
	 -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
   -moz-transform: scale(.8);
   -webkit-transform: scale(.8);
   -o-transform: scale(.8);
   -ms-transform: scale(.8);
   transform: scale(.8);	
   opacity:0.7;    
}

.zoom-command:hover,
.zoom-command.active{
   -moz-transform: scale(1.0);
   -webkit-transform: scale(1.0);
   -o-transform: scale(1.0);
   -ms-transform: scale(1.0);
   transform: scale(1.0);
   opacity:1;	
}

.viewport{
	-webkit-backface-visibility: hidden;
	-webkit-transition: translate3d(0,0,0);
	-moz-backface-visibility: hidden;
	-moz-transition: translate3d(0,0,0);
	-ms-backface-visibility: hidden;
	-ms-transition: translate3d(0,0,0);
	-o-backface-visibility: hidden;
	-o-transition: translate3d(0,0,0);
	backface-visibility: hidden;
	transition: translate3d(0,0,0);
	
}

/*.viewport.ng-enter {
-webkit-animation: 0.5s fade-in;
-moz-animation: 0.5s fade-in;
-o-animation: 0.5s fade-in;
animation: 0.5s fade-in;
z-index: 100;

}

.viewport.ng-leave {
-webkit-animation: 0.5s fade-out;
-moz-animation: 0.5s fade-out;
-o-animation: 0.5s fade-out;
animation: 0.5s fade-out;
z-index:99;

}*/

@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fade-in {
from { opacity: 0; -moz-transform:scale(0)}
to { opacity: 1; -moz-transform:scale(1)}
}
@-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@-moz-keyframes fade-out {
from { opacity: 1; -moz-transform:scale(1)}
to { opacity: 0; -moz-transform:scale(0)}
}
@-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}


.nubes{
	-moz-animation: nubes 30s linear;
	-moz-animation-iteration-count: infinite;
	-webkit-animation: nubes 30s linear;
	-webkit-animation-iteration-count: infinite;
	-ms-animation: nubes 30s linear;
	-ms-animation-iteration-count: infinite;
	-o-animation: nubes 30s linear;
	-o-animation-iteration-count: infinite;
	animation: nubes 30s linear;
	animation-iteration-count: infinite;

	background-size: contain;
	background-image: url('../img/nubes-blur.png');
	width:150%;
	height:100%;
	min-height: 780px;
	margin-right:-200px;
}

@-moz-keyframes nubes
{
from {background-position: 0px top;}
to {background-position: -1100px top;}
}

@-webkit-keyframes nubes
{
from {background-position: 0px top;}
to {background-position: -1100px top;}
}

@-ms-keyframes nubes
{
from {background-position: 0px top;}
to {background-position: -1100px top;}
}

@-o-keyframes nubes
{
from {background-position: 0px top;}
to {background-position: -1100px top;}
}

@keyframes nubes
{
from {background-position: 0px top;}
to {background-position: -1100px top;}
}

.conversacion .personaje,
.conversacion .profesora,
.conversacion .chica{
	-moz-animation: hablando 4s steps(24) infinite;
	-ms-animation: hablando 4s steps(24) infinite;
	-webkit-animation: hablando 4s steps(24) infinite;
	-o-animation: hablando 4s steps(24) infinite;
	animation: hablando 4s steps(24) infinite;

}



@-moz-keyframes hablando {
   100% { background-position: -2880px; }
}

@-ms-keyframes hablando {
   100% { background-position: -2880px; }
}


@-webkit-keyframes hablando {
   100% { background-position: -2880px; }
}


@-o-keyframes hablando {
   100% { background-position: -2880px; }
}


@keyframes hablando {
   100% { background-position: -2880px; }
}

.escena,
#via-ejer9{
	-webkit-transition: all 0.8s ease;                  
    -moz-transition: all 0.8s ease;                 
    -o-transition: all 0.8s ease;   
    -ms-transition: all 0.8s ease;          
    transition: all 0.8s ease;
}

.escena.senderismo,
.escena.pueblo,
.escena.ciudad{
	background-position: center top; 

}

.escena.senderismo.animado,
.escena.pueblo.animado,
.escena.ciudad.animado,
.escena.saltando.animado{
	-moz-animation: scrollV 12s forwards;
	-ms-animation:  scrollV 12s forwards;
	-webkit-animation:  scrollV 12s forwards;
	-o-animation:  scrollV 12s forwards;
	animation:  scrollV 12s forwards;		
}

@keyframes scrollV {
   100% { background-position: center bottom; transform:scale(1.2); }
}

@-moz-keyframes scrollV {
   100% { background-position: center bottom; -moz-transform:scale(1.2); }
}

@-ms-keyframes scrollV {
   100% { background-position: center bottom; -ms-transform:scale(1.2);}
}


@-webkit-keyframes scrollV {
   100% { background-position: center bottom; -webkit-transform:scale(1.2);}
}


@-o-keyframes scrollV {
   100% { background-position: center bottom; -o-transform:scale(1.2);}
}


.escena.movimiento{
	-moz-animation: movimiento 22s forwards;
	-ms-animation:  movimiento 22s forwards;
	-webkit-animation:  movimiento 22s forwards;
	-o-animation:  movimiento 22s forwards;
	animation:  movimiento 22s forwards;
	
	background-position: left top;
			
}


@keyframes movimiento {
   100% { background-position: right bottom;  }
}

@-moz-keyframes movimiento {
   100% { background-position: right bottom;  }
}

@-ms-keyframes movimiento {
   100% { background-position: right bottom; }
}


@-webkit-keyframes movimiento {
   100% { background-position: right bottom; }
}


@-o-keyframes movimiento {
   100% { background-position: right bottom; }
}


.plano-flotante{
	-moz-animation: zoom 1s forwards;
	-ms-animation:  zoom 1s forwards;
	-webkit-animation:  zoom 1s forwards;
	-o-animation:  zoom 1s forwards;
	animation:  zoom 1s forwards;
}

@keyframes zoom {
   100% { transform:scale(1.3);  }
}

@-moz-keyframes zoom {
   100% { -moz-transform:scale(1.3);  }
}

@-ms-keyframes zoom {
   100% { -ms-transform:scale(1.3);  }
}


@-webkit-keyframes zoom {
   100% { -webkit-transform:scale(1.3);  }
}


@-o-keyframes zoom {
   100% { -o-transform:scale(1.3);  }
}



