#loading {
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 9999;
    display: none;
    background-color: rgba(0,0,0,0.4);
}

/***********************************
 loading logo LG lugar de gente
***********************************/

.loading-logo {
    width: 30px;
    height: 30px;
    margin: 175px auto;
    position: relative;
}

.ball {
    background: rgba( 0, 255, 0, .5);
    border-radius: 50%;
    float: left;
    position: absolute;
	
}

.ball-1 {
    background: #891f23;

	animation-name: ball-1;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: -0.1s;
}	

.ball-2 {
  
    background: #973222;
	
	animation-name: ball-2;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: .2s;
}

.ball-3 {
    background: #e76025;
	
	animation-name: ball-3;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: .4s;
}

.ball-4 {
    background: #e52926;
    
	animation-name: ball-4;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: .6s;
}

.ball-5 {
    background: #c74028;
    
	animation-name: ball-5;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: .8s;
}

.ball-6 {
    background: #eb8e22;
    	
	animation-name: ball-6;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: 1s;
	
}

.ball-7 {
    background: #359bd5;
   
	animation-name: ball-7;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: 1.2s;
}

.ball-8 {
    background: #ff9f0e;
    
	animation-name: ball-8;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: 1.4s;
}

.ball-9 {
    background: #fcd20d;
   
	animation-name: ball-9;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: 1.6s;	
}

.ball-10 {
    background: #0171bf;
	
	animation-name: ball-10;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: 1.8s;
}

.ball-11 {
    background: #117cc0;
   
    animation-name: ball-11;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: 2s;
}

.ball-12 {
    background: #3b5fab;
    animation-name: ball-12;
	animation-duration: 5.5s;
	animation-iteration-count: infinite;
	animation-delay: 2.2s;
}

@keyframes ball-1{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0.2);
	}

	10%, 80%{
		z-index: 0;
		height: 6px;
		width: 6px;
		top: 1px;
		left: 30px;

		transform: scale(1);
	}

	100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}

@keyframes ball-2{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 70%{
		z-index: 0;
		height: 12px;
		width: 12px;
		top: 9px;
		left: 24px;
		transform: scale(1);
	}

	80%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}

@keyframes ball-3{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 70%{
		z-index: 0;
		height: 19px;
		width: 19px;
		top: 23px;
		left: 18px;
		transform: scale(1);
	}

	80%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}

@keyframes ball-4{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 65%{
		z-index: 9;
		height: 22px;
		width: 22px;
		top: 31px;
		left: 31px;
		transform: scale(1);
	}

	70%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}

@keyframes ball-5{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 55%{
		z-index: 10;
		height: 14px;
		width: 14px;
		top: 20px;
		left: 32px;
		transform: scale(1);
	}

	    75%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}




@keyframes ball-6{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 55%{
		z-index: 9;
		z-index: 9;
		height: 24px;
		width: 24px;
		top: 32px;
		left: 2px;
		transform: scale(1);
	}

	65%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}

@keyframes ball-7{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 50%{
		z-index: 12;
		z-index: 1;
		height: 35px;
		width: 35px;
		top: 65px;
		left: 10px;
		transform: scale(1);
	}

	60%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}

@keyframes ball-8{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 45%{
		z-index: 10;
		height: 34px;
		width: 34px;
		top: 47px;
		left: 27px;
		transform: scale(1);
	}

	50%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}
		
@keyframes ball-9{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 38%{
		z-index: 11;
		height: 32px;
		width: 32px;
		top: 38px;
		left: 8px;
		transform: scale(1);
	}

	45%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}

@keyframes ball-10{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 28%{
		z-index: 13;
		height: 23px;
		width: 23px;
		top: 67px;
		left: 32px;
		transform: scale(1);
	}

	40%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}		
	
@keyframes ball-11{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;;
		transform: scale(0);
	}

	10%, 22% {
		z-index: 12;
		height: 12px;
		width: 12px;
		top: 47px;
		left: 34px;
		transform: scale(1);
	}

	35%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}
}	

@keyframes ball-12{
	0%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}

	10%, 15%{
		z-index: 12;
		height: 26px;
		width: 26px;
		top: 56px;
		left: 0px;
		transform: scale(1);
	}

	35%, 100%{
		height: 0px;
		width: 0px;
		top: 64px;
		left: 29px;
		transform: scale(0);
	}	
}		

/***********************************
loading Circle
***********************************/

.circleTransparent {
    margin: 300px auto;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 10px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.9);
    animation: spin 1s infinite linear;
}
    
.circleBlank {
    margin: 300px auto;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 10px solid rgba(0, 0, 0, 0.1);
    border-top-color: rgba(0, 0, 0, 0.25);
    animation: spin 1s infinite linear;
}

@keyframes spin { 
    100% { 
    transform: rotate(360deg); 
    } 
}