/*
==============================================
barAnimation
==============================================
*/

.bar-container {
    height: 15px;
    overflow: hidden;
    position: relative;
    width: 21px;
	margin-left: 10px;
}

.bar-animation {
    animation-direction: alternate;
    animation-duration: 450ms;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: linear;
    background-color: rgb(0, 0, 0);
    bottom: 0px;
    display: inline-block;
    height: 1px;
    position: absolute;
    transform-origin: center bottom;
    width: 3px;
    background-color: #fff;
}	
	
.bar-animation:nth-child(1) {
    animation-delay: 0ms;
    animation-name: bar-up-down;
    left: 0px;
}

.bar-animation:nth-child(2) {
    animation-delay: 271ms;
    animation-name: bar-up-down;
    left: 6px;
}

.bar-animation:nth-child(3) {
    animation-delay: 542ms;
    animation-name: bar-up-down;
    left: 12px;
}

.bar-animation:nth-child(4) {
    animation-delay: 818ms;
    animation-name: bar-up-down;
    left: 18px;
}


@keyframes bar-up-down {
	0% {
    transform: scale(1, 0.1);
	}

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



/*
==============================================
fadeAnimation
==============================================
*/

.fadein{
	animation:1s ease 0.5s normal forwards 1 fadein;
	-webkit-animation:1s ease 0.5s normal forwards 1 fadein; opacity:0;
	}
	@keyframes fadein{from{opacity:0}to{opacity:1}
	}
	@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}
}