/*
ANIMO POSITION 
RELATIVE TO VIEWPORT 
LEVEL 1 ABS
1ST ANIMATION-LEVEL (X-Y AXIS RELATIVE TO THE VIEWPORT)
*/
.animo-position {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:transparent;
	backface-visibility:hidden;
	z-index:899;
}
.animo-position-x {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:transparent;
	backface-visibility:hidden;
	z-index:899;
}
.moving-position {
	position:relative;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:transparent;
	backface-visibility:hidden;
	z-index:899;
}


/* 
ANIMO WRAPPER 
ABSOLUTE TO THE LEVEL 1 POSITION
LEVEL 2 ABS
2ND ANIMATION-LEVEL (SCALE AND MICRO POSITIONING)
*/
.animo-wrapper {
	position:absolute;
	bottom:0;
	left:0;
	transition: opacity .5s linear 0s;
    opacity:0;
    z-index:900;
}

.fadein .animo-wrapper {
    opacity:1;
}

.fadein4s .animo-wrapper {
    opacity:1;
    transition:opacity 4s linear 0s;
}

.animo-wrapper.blocksize {
	width:100%;
	height:100%;
}
/*
ANIMO CONTAINER
RELATIVE TO THE LEVEl 2
LEVEL 3 REL
*/

.animo-container {
	position:relative;
	z-index:901;
}
.animo-wrapper.blocksize .animo-container {
	width:100%;
	height:100%;
}

/*
DEFAULT ANIMO CLASS TO WRAP THE ANIMO IMAGE
LEVEL 4 ABS TO THE LEVEL 3 BY DEFAULT 
CAN BE RELATIVE WHEN BG-IMAGE IS OVERFLOWING
*/
.animo {
    position: absolute;
	background-color:transparent;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
	display:inline-block;
	backface-visibility: none;
}

/*GLITCH ANIMATION NEEDS HIGHER Z-INDEX*/
.glitch {
    z-index:998;
    /*FADE IN* (important) */
    /*transition: opacity .5s linear 0s;*/
    /*opacity:0;*/
}
/*WELL I DONT KNOW*/
.animo-inner-pos {
    position: absolute;
}