@charset "UTF-8";
/* CSS Document */

.main-anim {	
overflow: hidden;
}
.pin-spacer {
overflow: visible !important;
background-color: var(--bn-100);	
}

/*.blq-anim {
margin-top: -200px !important;	
background-color: rgba(255,0,238,0.2);	
}*/

/* ----- escena 1 / escena 2 ----- */
/*tipo formación escenario*/
.blq-anim1{
height: 400vh !important;		
}
.grp-anim1-1,
.grp-anim1-2,
.grp-anim1-3,
.grp-anim1-4,
.grp-anim1-5,
.grp-anim1-6
{	
width: 100%;
height: 100vh;
opacity: 0.0;	
}

/*tipo formación escenario + personajes*/
/*.blq-anim2{
height: 350vh !important;		
}*/
.grp-anim2-1,
.grp-anim2-2,
.grp-anim2-3,
.grp-anim2-4,
.grp-anim2-5,
.grp-anim2-6,
.grp-anim2-7,
.grp-anim2-8,
.grp-anim2-9,
.grp-anim2-10,
.grp-anim2-11,
.grp-anim2-12,
.grp-anim2-13,
.grp-anim2-14,
.grp-anim2-15,
.grp-anim2-16
{
width: 100%;
height: 100vh;
opacity: 0.0;	
}

.grp-anim2-15{
top: 150px;
z-index: 101;	
}

.grp-anim2-7,
.grp-anim2-8,
.grp-anim2-9,
.grp-anim2-10,
.grp-anim2-11,
.grp-anim2-12,
.grp-anim2-13,
.grp-anim2-14,
.grp-anim2-16
{
left: 40px;
}

/* ----- escena 3 ----- */
/*tipo formación escenario*/
.blq-anim3{
height: 250vh !important;		
}
.grp-anim3-1,
.grp-anim3-2,
.grp-anim3-3,
.grp-anim3-4,
.grp-anim3-5,
.grp-anim3-6{
width: 100%;
height: 300vh;
/*opacity: 0.0;*/	
}

.grp-anim3-1{
opacity: 1.0;	
}
.grp-anim3-2,
.grp-anim3-3,
.grp-anim3-4,
.grp-anim3-5,
.grp-anim3-6{
opacity: 0.0;	
}

.grp-anim3-2{
left: 100px;	
}

.grp-anim3-3,
.grp-anim3-4,
.grp-anim3-5,
.grp-anim3-6{
top: 40px;	
left: 40px;
}

/* ----- escena 4 ----- */
/*tipo formación escenario*/
.blq-anim4{
z-index: 202;		
overflow: visible !important;	
height: 100vh;	
}
.grp-anim4-1,
.grp-anim4-2,
.grp-anim4-3{	
width: 100%;
height: 100vh;
}

/* ----- escena 5 ----- */
/*tipo formación escenario*/
.blq-anim5{
overflow: visible !important;	
height: 100vh;	
}
.grp-anim5-1,
.grp-anim5-2,
.grp-anim5-3{
	
width: 100%;
height: 100vh;
}
.grp-anim5-3{
top: -50vh;
}

/* ----- escena 6 ----- */
/*tipo formación escenario*/
.blq-anim6{
overflow: visible !important;	
height: 100vh;	
}
.grp-anim6-1,
.grp-anim6-2{
	
width: 100%;
height: 100vh;
}


/* ----- escena 7a ----- */
/*tipo formación escenario*/
.blq-anim7a{
height: 150vh !important;	
}
.grp-anim7-2,
.grp-anim7-3,
.grp-anim7-4{
width: 100%;
height: 150vh;
opacity: 0.0;
}
.grp-anim7-3,
.grp-anim7-4{
top: 20vh;
}

/* ----- escena 7b ----- */
.blq-anim7b{
overflow: visible !important;	
height: 50vh !important;		
}
.grp-anim7-1{
top: -20vh;	
width: 100%;
height: 100vh;
}

/* ----- escena 8 ----- */
/*tipo formación escenario*/
.blq-anim8{
height: 250vh !important;		
}
.grp-anim8-1{
width: 100%;
height: 100vh;
}
.grp-anim8-2,
.grp-anim8-3,
.grp-anim8-4,
.grp-anim8-5{
width: 100%;
height: 300vh;
opacity: 0.0;
}

.grp-anim8-4{
top: 80px;	
}

.grp-anim8-3,
.grp-anim8-4,
.grp-anim8-5{
top: 40px;	
}

/* ----- escena 9 ----- */
/*tipo formación escenario*/
.blq-anim9{
overflow: visible !important;	
height: 100vh;	
}
.grp-anim9-1,
.grp-anim9-2{
width: 100%;
height: 100vh;
}
.grp-anim9-1{
left: -20vw;
}
.grp-anim9-2{
top: 20vh;
}

/* ----- escena 10 ----- */
/*tipo formación escenario*/
.blq-anim10{
height: 250vh !important;		
}
.grp-anim10-1{
width: 100%;
height: 100vh;
}
.grp-anim10-2,
.grp-anim10-3,
.grp-anim10-4,
.grp-anim10-5,
.grp-anim10-6{
width: 100%;
height: 300vh;
opacity: 0.0;
}

.grp-anim10-4{
top: 80px;	
}

.grp-anim10-3,
.grp-anim10-4,
.grp-anim10-5,
.grp-anim10-6
{
top: 40px;	
}


/* ----- escena 11 ----- */
/*tipo formación escenario*/
.blq-anim11{
height: 150vh !important;		
}
.grp-anim11-1{
width: 100%;
height: 100vh;
}
.grp-anim11-2,
.grp-anim11-3{
width: 100%;
height: 200vh;
opacity: 0.0;
}

.grp-anim11-2,
.grp-anim11-3
{
top: 40px;	
}


/* ----- escena 12 ----- */
/*tipo formación escenario*/
.blq-anim12{
height: 250vh !important;		
}
.grp-anim12-1{
width: 100%;
height: 100vh;
}
.grp-anim12-2,
.grp-anim12-3,
.grp-anim12-4{
width: 100%;
height: 300vh;
opacity: 0.0;
}

.grp-anim12-2{
left: 40px;	
}
.grp-anim12-3{
left: -40px;	
}
.grp-anim12-4{
top: -10px;	
}


/* ----- escena 13 ----- */
/*tipo formación escenario*/
.blq-anim13a{
overflow: visible !important;	
height: 100vh;	
}
.blq-anim13b{
overflow: visible !important;	
height: 70vh;	
}
.grp-anim13-1,
.grp-anim13-2,
.grp-anim13-3,
.grp-anim13-4,
.grp-anim13-5{	
width: 100%;
height: 100vh;
}

.grp-anim13-2{	
top: 5vh;
}
.grp-anim13-3{	
top: calc(5vh + 10px);
}


/* ----- escena 14 ----- */
/*tipo formación escenario*/
.blq-anim14{
overflow: visible !important;	
height: 140vh;	
}

.grp-anim14-1,
.grp-anim14-2,
.grp-anim14-3,
.grp-anim14-4,
.grp-anim14-5{	
width: 100%;
height: 100vh;
}

.grp-anim14-2{	
top: 5vh;
}
.grp-anim14-4{	
top: 5vh;
}
.grp-anim14-5{	
top: calc(5vh + 10px);
}

/* ----- escena 15 ----- */
/*tipo formación escenario*/
.blq-anim15{
overflow: visible !important;	
height: 100vh;	
}

.grp-anim15-1,
.grp-anim15-2,
.grp-anim15-3,
.grp-anim15-4,
.grp-anim15-5{	
width: 100%;
height: 100vh;
}

.grp-anim15-2{	
top: 5vh;
left: 0px;	
}
.grp-anim15-2 img{
left: -5vw;	
opacity: 0.0;	
}
.grp-anim15-4{	
top: 5vh;
z-index: 10;	
}
.grp-anim15-4 img{
left: -5vw;	
opacity: 0.0;	
}
.grp-anim15-5{	
top: 0vh;
z-index: 10;	
}


/* ----- escena 16 ----- */
/*tipo formación escenario*/

.blq-anim15 + .cnf + .pin-spacer{
background-color: var(--ng-100);	
}
.blq-anim16{
height: 150vh !important;
background-color: var(--ng-100);	
}

.grp-anim16-1,
.grp-anim16-2,
.grp-anim16-3,
.grp-anim16-4,
.grp-anim16-5,
.grp-anim16-6
{	
width: 100%;
height: 100vh;
opacity: 0.0;	
}

/* ----- escena 17 ----- */
/*tipo formación escenario*/
.blq-anim17{
height: 150vh !important;	
}

.grp-anim17-1,
.grp-anim17-2,
.grp-anim17-3,
.grp-anim17-4,
.grp-anim17-5,
.grp-anim17-6,
.grp-anim17-7{	
width: 100%;
height: 100vh;
}

.grp-anim17-2,
.grp-anim17-3,
.grp-anim17-4,
.grp-anim17-5,
.grp-anim17-7{	
opacity: 0.0;	
}

.grp-anim17-1,
.grp-anim17-6{	
z-index: 1;
}
.grp-anim17-2,
.grp-anim17-3,
.grp-anim17-4,
.grp-anim17-5,
.grp-anim17-7{	
z-index: 1;	
}

.grp-anim17-7{	
top: 10vh;
left: 2vw;	
}


/* ----- escena 18 ----- */
/*tipo formación escenario*/
.blq-anim18{
overflow: visible !important;	
height: 100vh;	
}

.grp-anim18-1,
.grp-anim18-2,
.grp-anim18-3,
.grp-anim18-4{	
width: 100%;
height: 100vh;
}

.grp-anim18-3{	
/*top: 5vh;*/
left: 0px;	
}
.grp-anim18-3 img{
left: -5vw;	
opacity: 0.0;	
}
.grp-anim18-4{	
/*top: 5vh;*/
z-index: 10;	
}
.grp-anim18-4 img{
left: -5vw;	
opacity: 0.0;	
}


/* ----- escena 19 ----- */
/*tipo formación escenario*/
.blq-anim19{
overflow: visible !important;	
height: 100vh;	
}
.grp-anim19-1,
.grp-anim19-2,
.grp-anim19-3{	
width: 100%;
height: 100vh;
}
.grp-anim19-3{	
top: 10vh;	
left: 0px;	
}
.grp-anim19-3 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 60vh;	
opacity: 0.0;	
}


/* ----- escena 20 ----- */
/*tipo formación escenario*/
.blq-anim20{
overflow: visible !important;	
height: 100vh;	
}
.grp-anim20-1,
.grp-anim20-2,
.grp-anim20-3,
.grp-anim20-4,
.grp-anim20-5,
.grp-anim20-6
{	
width: 100%;
height: 100vh;
}

.grp-anim20-2 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 60vh;	
opacity: 0.0;	
}
.grp-anim20-3 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 60vh;	
opacity: 0.0;	
}

.grp-anim20-5{	
top: 10vh;
}
.grp-anim20-5 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 60vh;	
opacity: 0.0;	
}
.grp-anim20-6{	
top: 10vh;		
}
.grp-anim20-6 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 60vh;	
opacity: 0.0;	
}


/* ----- escena 21 ----- */
/*tipo formación escenario*/
.blq-anim21{
overflow: visible !important;	
height: 100vh;	
}
.grp-anim21-1,
.grp-anim21-2,
.grp-anim21-3,
.grp-anim21-4
{	
width: 100%;
height: 100vh;
}

.grp-anim21-3 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 60vh;	
opacity: 0.0;	
}
.grp-anim21-4 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 60vh;	
opacity: 0.0;	
}


/* ----- escena 22 ----- */
/*tipo formación escenario*/
.blq-anim22{
overflow: visible !important;	
height: 70vh;	
}
.grp-anim22-1,
.grp-anim22-2,
.grp-anim22-3,
.grp-anim22-4,
.grp-anim22-5
{	
width: 100%;
height: 100vh;
}

.grp-anim22-4 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 30vh;	
opacity: 0.0;	
}
.grp-anim22-5 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 20vh;	
opacity: 0.0;	
}

/* ----- escena 23 ----- */
/*tipo formación escenario*/

.blq-anim22 + .cnf-top + .pin-spacer{
background-color: var(--ng-100);
}
.blq-anim23{
height: 250vh !important;
background-color: var(--ng-100);	
}
.grp-anim23-1,
.grp-anim23-2,
.grp-anim23-3,
.grp-anim23-4,
.grp-anim23-5,
.grp-anim23-6
{	
width: 100%;
height: 100vh;
opacity: 0.0;	
}

/* ----- escena 24 ----- */
/*tipo formación escenario*/
.blq-anim24{
height: 200vh !important;		
}
.grp-anim24-1,
.grp-anim24-2,
.grp-anim24-3,
.grp-anim24-4
{	
width: 100%;
height: 100vh;
}
.grp-anim24-2,
.grp-anim24-3,
.grp-anim24-4
{	
width: 100%;
height: 100vh;
opacity: 0.0;	
}

.grp-anim24-1 img{
will-change: transform;		
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);	
transform-origin: center;	
opacity: 0.0;	
}
.grp-anim24-2
{	
left: -2vw;	
}
.grp-anim24-3,
.grp-anim24-4
{	
top: -2vh;	
}

/* ----- escena 25 ----- */
/*tipo formación escenario*/
.blq-anim25{
overflow: visible !important;	
height: 100vh !important;		
}
.grp-anim25-1,
.grp-anim25-2,
.grp-anim25-3,
.grp-anim25-4,
.grp-anim25-5,
.grp-anim25-6
{			
width: 100%;
height: 100vh;
}


.grp-anim25-1 img{	
will-change: transform;	
}
.grp-anim25-2 img{	
will-change: transform;	
}
.grp-anim25-3 img{	
will-change: transform;	
}
.grp-anim25-4 img{	
will-change: transform;	
}
.grp-anim25-5 img{	
will-change: transform;	
}

.grp-anim25-6 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 30vh;	
opacity: 0.0;	
}

/* ----- escena 26 ----- */
/*tipo formación escenario*/
.blq-anim26{
/*overflow: visible !important;*/	
height: 200vh !important;		
}
.grp-anim26-1,
.grp-anim26-2,
.grp-anim26-3,
.grp-anim26-4
{			
width: 100%;
height: 100vh;
}

.grp-anim26-2,
.grp-anim26-3,
.grp-anim26-4
{	
width: 100%;
height: 100vh;
opacity: 0.0;	
}

.grp-anim26-1 img{
will-change: transform;		
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);	
transform-origin: center;	
opacity: 0.0;	
}

.grp-anim26-2{	
left: -2vw;	
}
.grp-anim26-3{	
left: -2vw;	
}
.grp-anim26-4{	
left: -2vw;	
}

/* ----- escena 27 ----- */
/*tipo formación escenario*/
.blq-anim27{
height: 200vh !important;		
}
.grp-anim27-1,
.grp-anim27-2,
.grp-anim27-3,
.grp-anim27-4,
.grp-anim27-5,
.grp-anim27-6,
.grp-anim27-7
{			
width: 100%;
height: 100vh;
}

.grp-anim27-2,
.grp-anim27-3,
.grp-anim27-4,
.grp-anim27-5,
.grp-anim27-6,
.grp-anim27-7
{			
opacity: 0;
}
.grp-anim27-6{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
}
.grp-anim27-7{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
}

/* ----- escena 28 ----- */
/*tipo formación escenario*/
.blq-anim28{
overflow: visible !important;	
height: 100vh !important;		
}
.grp-anim28-1,
.grp-anim28-2,
.grp-anim28-3,
.grp-anim28-4,
.grp-anim28-5,
.grp-anim28-6,
.grp-anim28-7
{			
width: 100%;
height: 100vh;
}
.grp-anim28-2 img{
will-change: transform;		
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;		
left: -1vw;	
top: 30vh;	
opacity: 0.0;	
}

/* ----- escena 29 ----- */
/*tipo formación escenario*/
.blq-anim29{
overflow: visible !important;	
height: 200vh !important;		
}
.grp-anim29-1{			
will-change: transform;		
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);	
transform-origin: center;
left: -25vw;	
top: 40vh;	
width: 100%;
height: 100vh;	
}

/* ----- escena 30 - 31 ----- */
/*tipo formación escenario*/
.blq-anim30{
height: 200vh !important;		
}
.grp-anim30-1,
.grp-anim30-2,
.grp-anim30-3,
.grp-anim30-4,
.grp-anim30-5,
.grp-anim30-6,
.grp-anim30-7,

.grp-anim31-1,
.grp-anim31-2,
.grp-anim31-3,
.grp-anim31-4,
.grp-anim31-5,
.grp-anim31-6,
.grp-anim31-7
{			
width: 100%;
height: 100vh;
}

.grp-anim30-1,
.grp-anim30-2,
.grp-anim30-3,
.grp-anim30-4,
.grp-anim30-5,
.grp-anim30-6
{			
opacity: 0;	
}


.grp-anim31-1,
.grp-anim31-2,
.grp-anim31-3,
.grp-anim31-4,
.grp-anim31-5,
.grp-anim31-6,
.grp-anim31-7
{			
will-change: transform;	
-moz-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);	
transform-origin: center;	
opacity: 0;
top: 2vh;		
}