.pre-loader
	{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999999;
		background-color: rgba(0,0,0,0.7);
	}
	.loader {
	  position: relative;
	  width: 150px;
	  height: 200px;
	  top: 30%;
	  left: 48%;
	  
	}
	.loader__bar {
	  position: absolute;
	  bottom: 0;
	  width: 25px;
	  height: 50%;
	  
	  -webkit-transform-origin: center bottom;
	          transform-origin: center bottom;
	  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	}
	.loader__bar:nth-child(1) {
	  left: 0px;
	  background: #9400D3;
	  -webkit-transform: scale(1, 0.2);
	          transform: scale(1, 0.2);
	  -webkit-animation: barUp1 4s infinite;
	          animation: barUp1 4s infinite;
	}
	.loader__bar:nth-child(2) {
	  left: 30px; 
	  background: #00FF00;
	  -webkit-transform: scale(1, 0.4);
	          transform: scale(1, 0.4);
	  -webkit-animation: barUp2 4s infinite;
	          animation: barUp2 4s infinite;
	}
	.loader__bar:nth-child(3) {
	  left: 60px;
	  background: #FFFF00;
	  -webkit-transform: scale(1, 0.6);
	          transform: scale(1, 0.6);
	  -webkit-animation: barUp3 4s infinite;
	          animation: barUp3 4s infinite;
	}
	.loader__bar:nth-child(4) {
	  left: 90px;
	  background: #FF7F00;
	  -webkit-transform: scale(1, 0.8);
	          transform: scale(1, 0.8);
	  -webkit-animation: barUp4 4s infinite;
	          animation: barUp4 4s infinite;
	}
	.loader__bar:nth-child(5) {
	background: #FF0000;
	  left: 120px;
	  -webkit-transform: scale(1, 1);
	          transform: scale(1, 1);
	  -webkit-animation: barUp5 4s infinite;
	          animation: barUp5 4s infinite;
	}
	.loader__ball {
	  position: absolute;
	  bottom: 25px;
	  left: 0;
	  width: 25px;
	  height: 20px;
	  background: #a81f31;
	  border-radius: 50%;
	  -webkit-animation: ball 4s infinite;
	          animation: ball 4s infinite;
	}
	
	@-webkit-keyframes ball {
	  0% {
	  	   	    -webkit-transform: translate(0, 0);
	  	   	            transform: translate(0, 0);
	  	   	  }
	  	   	  5% {
	  	   	    -webkit-transform: translate(15px, -22px);
	  	   	            transform: translate(15px, -22px);
	  	   	  }
	  	   	  10% {
	  	   	    -webkit-transform: translate(30px, -15px);
	  	   	            transform: translate(30px, -15px);
	  	   	  }
	  	   	  17% {
	  	   	    -webkit-transform: translate(45px, -42px);
	  	   	            transform: translate(45px, -42px);
	  	   	  }
	  	   	  20% {
	  	   	    -webkit-transform: translate(60px, -35px);
	  	   	            transform: translate(60px, -35x);
	  	   	  }
	  	   	  27% {
	  	   	    -webkit-transform: translate(75px, -62px);
	  	   	            transform: translate(75px, -62px);
	  	   	  }
	  	   	  30% {
	  	   	    -webkit-transform: translate(90px, -55px);
	  	   	            transform: translate(90px, -55px);
	  	   	  }
	  	   	  37% {
	  	   	    -webkit-transform: translate(105px, -82px);
	  	   	            transform: translate(105px, -82px);
	  	   	  }
	  	   	  40% {
	  	   	    -webkit-transform: translate(120px, -75px);
	  	   	            transform: translate(120px, -75px);
	  	   	  }
	  	   	  50% {
	  	   	    -webkit-transform: translate(120px, 0);
	  	   	            transform: translate(120px, 0);
	  	   	  }
	  	   	  57% {
	  	   	    -webkit-transform: translate(105px, -22px);
	  	   	            transform: translate(105px, -22px);
	  	   	  }
	  	   	  60% {
	  	   	    -webkit-transform: translate(90px, -15px);
	  	   	            transform: translate(90px, -15px);
	  	   	  }
	  	   	  67% {
	  	   	    -webkit-transform: translate(75px, -42px);
	  	   	            transform: translate(75px, -42px);
	  	   	  }
	  	   	  70% {
	  	   	    -webkit-transform: translate(60px, -35px);
	  	   	            transform: translate(60px, -35px);
	  	   	  }
	  	   	  77% {
	  	   	    -webkit-transform: translate(45px, -62px);
	  	   	            transform: translate(45px, -62px);
	  	   	  }
	  	   	  80% {
	  	   	    -webkit-transform: translate(30px, -55px);
	  	   	            transform: translate(30px, -55px);
	  	   	  }
	  	   	  87% {
	  	   	    -webkit-transform: translate(15px, -82px);
	  	   	            transform: translate(15px, -82px);
	  	   	  }
	  	   	  90% {
	  	   	    -webkit-transform: translate(0, -75px);
	  	   	            transform: translate(0, -75px);
	  	   	  }
	  	   	  100% {
	  	   	    -webkit-transform: translate(0, 0);
	  	   	            transform: translate(0, 0);
	  }
	}
	
	@keyframes ball {
	   0% {
	   	    -webkit-transform: translate(0, 0);
	   	            transform: translate(0, 0);
	   	  }
	   	  5% {
	   	    -webkit-transform: translate(15px, -22px);
	   	            transform: translate(15px, -22px);
	   	  }
	   	  10% {
	   	    -webkit-transform: translate(30px, -15px);
	   	            transform: translate(30px, -15px);
	   	  }
	   	  17% {
	   	    -webkit-transform: translate(45px, -42px);
	   	            transform: translate(45px, -42px);
	   	  }
	   	  20% {
	   	    -webkit-transform: translate(60px, -35px);
	   	            transform: translate(60px, -35x);
	   	  }
	   	  27% {
	   	    -webkit-transform: translate(75px, -62px);
	   	            transform: translate(75px, -62px);
	   	  }
	   	  30% {
	   	    -webkit-transform: translate(90px, -55px);
	   	            transform: translate(90px, -55px);
	   	  }
	   	  37% {
	   	    -webkit-transform: translate(105px, -82px);
	   	            transform: translate(105px, -82px);
	   	  }
	   	  40% {
	   	    -webkit-transform: translate(120px, -75px);
	   	            transform: translate(120px, -75px);
	   	  }
	   	  50% {
	   	    -webkit-transform: translate(120px, 0);
	   	            transform: translate(120px, 0);
	   	  }
	   	  57% {
	   	    -webkit-transform: translate(105px, -22px);
	   	            transform: translate(105px, -22px);
	   	  }
	   	  60% {
	   	    -webkit-transform: translate(90px, -15px);
	   	            transform: translate(90px, -15px);
	   	  }
	   	  67% {
	   	    -webkit-transform: translate(75px, -42px);
	   	            transform: translate(75px, -42px);
	   	  }
	   	  70% {
	   	    -webkit-transform: translate(60px, -35px);
	   	            transform: translate(60px, -35px);
	   	  }
	   	  77% {
	   	    -webkit-transform: translate(45px, -62px);
	   	            transform: translate(45px, -62px);
	   	  }
	   	  80% {
	   	    -webkit-transform: translate(30px, -55px);
	   	            transform: translate(30px, -55px);
	   	  }
	   	  87% {
	   	    -webkit-transform: translate(15px, -82px);
	   	            transform: translate(15px, -82px);
	   	  }
	   	  90% {
	   	    -webkit-transform: translate(0, -75px);
	   	            transform: translate(0, -75px);
	   	  }
	   	  100% {
	   	    -webkit-transform: translate(0, 0);
	   	            transform: translate(0, 0);
	  }
	}
	@-webkit-keyframes barUp1 {
	  0% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	  40% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	  50% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	  90% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	  100% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	}
	@keyframes barUp1 {
	  0% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	  40% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	  50% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	  90% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	  100% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	}
	@-webkit-keyframes barUp2 {
	  0% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	  40% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	  50% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	  90% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	  100% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	}
	@keyframes barUp2 {
	  0% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	  40% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	  50% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	  90% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	  100% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	}
	@-webkit-keyframes barUp3 {
	  0% {
	    -webkit-transform: scale(1, 0.6);
	            transform: scale(1, 0.6);
	  }
	  100% {
	    -webkit-transform: scale(1, 0.6);
	            transform: scale(1, 0.6);
	  }
	}
	@keyframes barUp3 {
	  0% {
	    -webkit-transform: scale(1, 0.6);
	            transform: scale(1, 0.6);
	  }
	  100% {
	    -webkit-transform: scale(1, 0.6);
	            transform: scale(1, 0.6);
	  }
	}
	@-webkit-keyframes barUp4 {
	  0% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	  40% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	  50% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	  90% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	  100% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	}
	@keyframes barUp4 {
	  0% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	  40% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	  50% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	  90% {
	    -webkit-transform: scale(1, 0.4);
	            transform: scale(1, 0.4);
	  }
	  100% {
	    -webkit-transform: scale(1, 0.8);
	            transform: scale(1, 0.8);
	  }
	}
	@-webkit-keyframes barUp5 {
	  0% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	  40% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	  50% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	  90% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	  100% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	}
	@keyframes barUp5 {
	  0% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	  40% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	  50% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	  90% {
	    -webkit-transform: scale(1, 0.2);
	            transform: scale(1, 0.2);
	  }
	  100% {
	    -webkit-transform: scale(1, 1);
	            transform: scale(1, 1);
	  }
	}
	
	.loader--text {
	  position: absolute;
	  top: 100%;
	  left: 0;
	  right: 0;
	  width: 6rem;
	  margin: auto;
	  
	}
	.loader--text:after {
	  content: "Loading";
	  color: white;
	  font-weight: bold;
	  animation-name: loading-text;
	  animation-duration: 3s;
	  animation-iteration-count: infinite;
	}
	.loader--text .logoutText:after {
	  content: "Logging Off";
	  color: white;
	  font-weight: bold;
	  animation-name: loading-text;
	  animation-duration: 3s;
	  animation-iteration-count: infinite;
	}	
			
	@keyframes loading-text {
	  0% {
	    content: "Loading";
	  }
	  25% {
	    content: "Loading.";
	  }
	  50% {
	    content: "Loading..";
	  }
	  75% {
	    content: "Loading...";
	  }
	}