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

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


/* ----- escena 1 ----- */
/*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: 200vh;
opacity: 0.0;	
}

.grp-anim1-4,
.grp-anim1-5
{
top: 40px;
left: -2vw;	
}

.grp-anim1-6
{
top: 2vw;
}


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

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

.grp-anim2-5 img{
will-change: transform;
}

.grp-anim2-7 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;	
left: -2vw;	
opacity: 0.0;	
}
.grp-anim2-8 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}

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

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

.grp-anim4-3{	
z-index: 2;
}
.grp-anim4-3 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim4-4 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}

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

.grp-anim5-4 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim5-5 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim5-6 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim5-7 img{	
top: 90vh;	
left: -2vw;	
opacity: 0.0;	
}


/* ----- escena 6 ----- */
/*tipo formación escenario*/
.blq-anim6{
height: 400vh !important;		
}
.grp-anim6-1,
.grp-anim6-2,
.grp-anim6-3,
.grp-anim6-4,
.grp-anim6-5,
.grp-anim6-6,
.grp-anim6-7,
.grp-anim6-8,
.grp-anim6-9,
.grp-anim6-10,
.grp-anim6-11,
.grp-anim6-12,
.grp-anim6-13
{	
width: 100%;
height: 100vh;
}

.grp-anim6-2,
.grp-anim6-3,
.grp-anim6-4,
.grp-anim6-5,
.grp-anim6-6,
.grp-anim6-7,
.grp-anim6-8,
.grp-anim6-9,
.grp-anim6-10{	
opacity: 0.0;
}

.grp-anim6-3,
.grp-anim6-4,
.grp-anim6-5,
.grp-anim6-6,
.grp-anim6-7,
.grp-anim6-8{	
left: 10vw;
}

.grp-anim6-11 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim6-12 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim6-13 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}

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

.grp-anim7-5 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim7-6 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim7-7 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}

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

.grp-anim8-3 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 2vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim8-4 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim8-5 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim8-6 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim8-7 img{
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}

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

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

.grp-anim10-1{	
z-index: 0;	
opacity: 0.9;	
}
.grp-anim10-2{	
z-index: 6;	
opacity: 0.9;	
}
.grp-anim10-3{	
z-index: 7;
opacity: 0.9;
}
.grp-anim10-4{	
z-index: 8;	
}
.grp-anim10-5{	
z-index: 9;	
}
.grp-anim10-6{	
z-index: 10;	
}

.grp-anim10-7 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim10-8 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim10-9 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim10-10 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}

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

.grp-anim11-1 img,
.grp-anim11-2 img,
.grp-anim11-3 img,
.grp-anim11-4 img,
.grp-anim11-5 img,
.grp-anim11-6 img,
.grp-anim11-7 img{	
will-change: transform;	
}



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

.grp-anim12-2,
.grp-anim12-3,
.grp-anim12-4{	
opacity: 0;
}

.grp-anim12-3{	
will-change: transform;	
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);	
transform-origin: center;
}


/* ----- escena 10 ----- */
/*tipo formación escenario*/
.blq-anim13{
height: 300vh !important;		
}
.grp-anim13-1,
.grp-anim13-2,
.grp-anim13-3,
.grp-anim13-4,
.grp-anim13-5,
.grp-anim13-6,
.grp-anim13-7,
.grp-anim13-8,
.grp-anim13-9,
.grp-anim13-10
{	
width: 100%;
height: 100vh;
}
.grp-anim13-2,
.grp-anim13-3,
.grp-anim13-4,
.grp-anim13-5,
.grp-anim13-6,
.grp-anim13-7,
.grp-anim13-8,
.grp-anim13-9
{	
opacity: 0;
}
.grp-anim13-9{
left: 2vw;	
opacity: 0;
}

.grp-anim13-10 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}

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

.grp-anim14-1 img,
.grp-anim14-2 img,
.grp-anim14-3 img,
.grp-anim14-4 img{	
will-change: transform;	
}


/* ----- escena 15 ----- */
/*tipo formación escenario*/
.blq-anim15{	
overflow: visible !important;	
height: 120vh;	
}
.grp-anim15-1,
.grp-anim15-2,
.grp-anim15-3,
.grp-anim15-4,
.grp-anim15-5,
.grp-anim15-6
{	
width: 100%;
height: 100vh;
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
}

/* ----- escena 16 ----- */
/*tipo formación escenario*/
.blq-anim16{	
overflow: visible !important;	
height: 100vh;	
}
.grp-anim16-1
{	
width: 100%;
height: 100vh;
/*left: -90vw;*/	
}
.grp-anim16-1 img
{	
opacity: 0.0;	
}


/* ----- escena 17 ----- */
/*tipo formación escenario*/
.blq-anim17{
height: 200vh !important;		
}
.grp-anim17-1,
.grp-anim17-2,
.grp-anim17-3,
.grp-anim17-4,
.grp-anim17-5,
.grp-anim17-6
{	
width: 100%;
height: 100vh;
}
.grp-anim17-2,
.grp-anim17-4
{	
opacity: 0;
}
.grp-anim17-2{
z-index: 1;	
left: 2vw;
}
.grp-anim17-4{	
z-index: 2;		
left: -2vw;
}
.grp-anim17-3{	
z-index: 4;		
}
.grp-anim17-5{	
z-index: 4;		
}
.grp-anim17-6{	
z-index: 4;		
}

.grp-anim17-3 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim17-5 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}
.grp-anim17-6 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;	
}

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

.blq-color{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50%;
z-index: 0;	
}

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

.grp-anim18-1{
opacity: 0.9;
z-index: 0;	
}
.grp-anim18-2{
z-index: 1;	
}
.grp-anim18-3{
z-index: 2;	
}
.grp-anim18-4{
z-index: 3;	
}
.grp-anim18-5{
z-index: 4;	
}
.grp-anim18-6{
z-index: 5;	
}
.grp-anim18-6 img{
will-change: transform;	
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);	
transform-origin: center;	
top: 25vh;		
left: -2vw;	
opacity: 0.0;		
}


/* ----- escena 19 ----- */
/*tipo formación escenario*/
.blq-anim19{	
overflow: visible !important;	
height: 200vh;	
background-color: var(--am-100);	
margin-top: -10px;
}
.grp-anim19-1,
.grp-anim19-2{	
width: 100%;
height: 100vh;
}

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

/* ----- escena 20 ----- */
/*tipo formación escenario*/
.blq-anim20{	
height: 150vh;	
}
.grp-anim20-1,
.grp-anim20-2{	
width: 100%;
height: 100vh;
}
.grp-anim20-2{	
opacity: 0;
}

/* ----- escena 21 ----- */
/*tipo formación escenario*/
.blq-anim21{	
height: 100vh;
background-color: var(--am-100);	
}
.grp-anim21-1{	
width: 100%;
height: 100vh;
}

/* ----- escena 22 ----- */
/*tipo formación escenario*/
.blq-anim22{	
height: 100vh;
background-color: var(--am-100);	
}
.grp-anim22-1{	
width: 100%;
height: 100vh;
}

@media only screen and (orientation:portrait){
	
	
/* ------------------------- */
	
/*opción legibilidad móvil (sin animación gsap)	*/
/*.main-anim {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: flex-start;	
flex-direction: row;	
overflow: auto;
width: 100vw;
height: 100vh;	
}
.article-apt {
min-width: 100vw;
}	
.article{
min-width: 100vw;
max-height: 100vh;		
}	
.blq-anim{ 
min-width: 200vw !important;	
height: 100vh;		
max-height: 100vh;		
}
.grp-anim{ 
top: 0px !important;	
left: 0px !important;	
transform: none !important;	
height: 100vh;		
max-height: 100vh;	
}
.grp-anim picture img {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%) !important;		
-webkit-transform: translateX(-50%) translateY(-50%) !important;		
transform: translateX(-50%) translateY(-50%) !important;
}*/
	
/* ------------------------- */	
	
}