/*
===================================================
	����
===================================================
*/

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.animsition, .animsition-overlay {
    position: relative;
    opacity: 0;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	    height: auto !important;
    animation-duration: 750ms;
    opacity: 1;
}

.stars {
    background: #000 url(../img/stars.png) repeat top center;
    z-index: -10;
}
.stars, .twinkling, .clouds {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;

}
.twinkling {
    background: transparent url(../img/twinkling.png) repeat top center;
    z-index: -9;
    -moz-animation: move-twink-back 200s linear infinite;
    -ms-animation: move-twink-back 200s linear infinite;
    -o-animation: move-twink-back 200s linear infinite;
    -webkit-animation: move-twink-back 200s linear infinite;
    animation: move-twink-back 200s linear infinite;

}
.clouds {
    background: transparent url(../img/clouds.png) repeat top center;
    z-index: -8;
    -moz-animation: move-clouds-back 200s linear infinite;
    -ms-animation: move-clouds-back 200s linear infinite;
    -o-animation: move-clouds-back 200s linear infinite;
    -webkit-animation: move-clouds-back 200s linear infinite;
    animation: move-clouds-back 200s linear infinite;
}

/*
===================================================
	����
===================================================
*/

.lines {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	display:block;
	z-index: -3;
}
.lines .line {
	position: absolute;
	width: 1px;
	height: 100%;
	top: 0;
	left: 50%;
	/*background: rgba(255, 255, 255, 0.1);*/
	overflow: hidden;
	transform:skew(-17deg,-17deg);
}
.lines .line::after {
    content: '';
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #00fff5 100%);
    animation: run 7s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.lines .line:nth-child(1) {
	margin-left: -25%;
	transform:skew(-15deg,-15deg);
}
.lines .line:nth-child(1)::after {
	animation-delay: 1.5s;
}
.lines .line:nth-child(3) {
	margin-left: 30%;
	transform:skew(18deg,18deg);
}
.lines .line:nth-child(3)::after {
	animation-delay: 2s;
}
    
@keyframes run {
	0% {top: -50%;}
	30% {top: -50%;}
	100% {top: 110%}
}