.loading
{	
	z-index:1000;		
	position: fixed;	
	transition: opacity 1.0s ease-in-out;	
	pointer-events:none;
	
	/* Animation init values */
	opacity: 0;
	
	/* Responsivity dependency */
	height:10vh;
	width:10vh;
	left:calc( 50% - 5vh );
	top:45vh;
}

.loading_caption
{
	position:absolute;	
	top:110%;
	left:calc(50% - 50vw);
	width:100vw;
	text-align:center;
	text-transform:uppercase;
	font-stretch: condensed;
	
	/* Variables */
	color:var(--color-normal);
	font-weight:var(--weight-normal);
	
	/* Responsivity dependency */
	font-size:0.5em;
	letter-spacing: -0.05em;
	
}

.loading_container
{
	z-index:1001;
	position:absolute;
	animation: loading-scale 4s infinite ease !important;
	transform-origin:50% 50%;
	top:0;
	left:0;
	width:100%;
	height:100%;	
}

.loading_grey
{	
	z-index:2;
	position: absolute;
	height:80%;
	width:80%;
	left:10%;
	top:10%;
	
		
	background-image: url("../../images/includes/rb_icon_bamboo_grey.png");
	background-position:bottom center;
	background-size:contain;
	background-repeat:no-repeat;
}


.loading_icon 
{
	z-index:1;
	transform-origin: 50% 50%;
	display: block;
	height:100%;
	width:100%;
	left:0;
	top:0;
	position: absolute;
	
	animation: loading-rotate 4s infinite ease !important;
	
	/* Variables */
	background-color:#101010;
	border-radius:1vh;
	
	box-shadow: 0em 0.05em 0.3em rgba(10,10,10,0.6);
}

.loading_red
{
	z-index:3;
	height:80%;
	width:80%;
	left:10%;
	bottom:10%;
	position: absolute;
	
	animation: loading-red 4s infinite ease-in !important;
	background-position:bottom center;
	background-size:contain;
	background-repeat:no-repeat;
	
	/* Variables */
	background-image: url("../../images/includes/rb_icon_bamboo_red.png");
}

.loading.is-loading
{
	opacity:1;
}

@keyframes loading-scale 
{
		0% {
			transform: scale(1);
		}
		
		5%
		{
			transform: scale(1.1) rotateZ(-2deg);
		}
		
		25%
		{
			transform: scale(1);
		}
		
		30%
		{
			transform: scale(1.1) rotateZ(-2deg);
		}
		
		50%
		{
			transform: scale(1);
		}
		
		55%
		{
			transform: scale(1.1) rotateZ(-2deg);
		}
		
		75%
		{
			transform: scale(1);
		}
		
		80% 
		{
			transform: scale(1.1) rotateZ(-2deg);
		}

		100% 
		{
			transform: scale(1);
		}
}

@keyframes loading-red
{
		0% {
			opacity:1;
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
		
		5%
		{
			opacity:0;
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
		
		6%
		{
			opacity:0;
			clip: rect(10vh, 10vh, 10vh, 0vh);
		}
		
		7%
		{
			opacity:1;
			clip: rect(10vh, 10vh, 10vh, 0vh);
		}
		
		25% {
			opacity:1;
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
		
		30%
		{
			opacity:0;
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
		
		31%
		{
			opacity:0;
			clip: rect(10vh, 10vh, 10vh, 0vh);
		}
		
		32%
		{
			opacity:1;
			clip: rect(10vh, 10vh, 10vh, 0vh);
		}
		
		50% 
		{
			opacity:1;
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
		
		55%
		{
			opacity:0;
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
		
		56%
		{
			opacity:0;
			clip: rect(10vh, 10vh, 10vh, 0vh);
		}
		
		57%
		{
			opacity:1;
			clip: rect(10vh, 10vh, 10vh, 0vh);
		}
		
		75% 
		{
			opacity:1;
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
		
		80%
		{
			opacity:0;
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
		
		81%
		{
			opacity:0;
			clip: rect(10vh, 10vh, 10vh, 0vh);
		}
		
		82%
		{
			opacity:1;
			clip: rect(10vh, 10vh, 10vh, 0vh);
		}
		
		
		
		100% 
		{
			clip: rect(0vh, 10vh, 10vh, 0vh);
		}
}
@keyframes loading-rotate 
{
		0% {
			transform: scale(1) rotate(0deg);
		}
		
		5%
		{
			transform: scale(1) rotate(-90deg);
		}
		
		25%
		{
			transform: scale(1) rotate(-90deg);
		}
		
		30%
		{
			transform: scale(1) rotate(-180deg);
		}
		
		50%
		{
			transform: scale(1) rotate(-180deg);
		}
		
		55%
		{
			transform: scale(1) rotate(-270deg);
		}
		
		75%
		{
			transform: scale(1) rotate(-270deg);
		}
		
		80% {
			transform: scale(1) rotate(-360deg);
		}

		100% {
			transform: scale(1) rotate(-360deg);
		}
}