@keyframes mistmovement1 {
	0% { top:90%; }
	25% { top:88%;}
	50% { top:86%;}
	/* end */
	75% { top:80%;}
	100% {top:88%;}
  
	0%{ opacity:0; }
	10% { opacity:0.8;}
	35%{ opacity:0.7;}
	/* end */
	60%{opacity:0.4;}
	70%{ opacity:0;}
	100%{opacity:0;}
  
	0% { left:90%; }
	25%{ left:50%;}
	50% { left:20%;}
	70% { left:-10%;}
	/* return */
	100% {left:80%;}
	  
		0%{width:250px; height:200px;}
		70%{width:350px; height:350px;}
		100%{width:250px; height:200px;}
}

.mist{
animation-name:mistmovement1;
animation-duration:24s;
animation-iteration-count: infinite;
animation-timing-function: linear;
overflow:hidden;
position:fixed;
z-index:500;
top:80%;
left:80%;
width:250px;
height:200px;
}

@keyframes mistmovement2 {
	0% { top:80%; }
	25% { top:78%;}
	50% { top:72%;}
	/* end */
	75% { top:66%;}
	100% {top:62%;}
  
	0%{ opacity:0; }
	10% { opacity:0.8;}
	35%{ opacity:0.7;}
	/* end */
	65%{opacity:0.4;}
	70%{ opacity:0;}
	100%{opacity:0;}
  
	0% { left:90%; }
	25%{ left:50%;}
	50% { left:20%;}
	70% { left:-10%;}
	/* return */
	100% {left:32%;}
	  
		0%{width:650px; height:200px;}
		70%{width:850px; height:350px;}
		100%{width:650px; height:200px;}
}

.mist2long{
animation-name:mistmovement2;
animation-duration:20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay:4s;
overflow:hidden;
position:fixed;
z-index:501;
top:80%;
left:80%;
width:250px;
height:400px;
}

@keyframes mistmovement3 {
	
	0% { top:90%; }
	25% { top:88%;}
	50% { top:86%;}
	/* end */
	75% { top:82%;}
	100% {top:88%;}
	/*
	0% { top:80%; }
	25% { top:78%;}
	50% { top:72%;}
	/* end 
	75% { top:66%;}
	100% {top:64%;}*/
  
	0%{ opacity:0; }
	10% { opacity:0.8;}
	35%{ opacity:0.7;}
	/* end */
	65%{opacity:0.4;}
	70%{ opacity:0;}
	100%{opacity:0;}
  
	0% { left:90%; }
	25%{ left:50%;}
	50% { left:20%;}
	70% { left:-10%;}
	/* return */
	100% {left:32%;}
	  
		0%{width:350px; height:200px;}
		70%{width:450px; height:350px;}
		100%{width:350px; height:200px;}
}

.mist3{
animation-name:mistmovement3;
animation-duration:24s;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity:0%;
animation-delay:8s;
overflow:hidden;
position:fixed;
z-index:501;
top:80%;
left:80%;
width:250px;
height:400px;
}

@keyframes mistmovement4 {
	0% { top:80%; }
	25% { top:78%;}
	50% { top:72%;}
	/* end */
	75% { top:66%;}
	100% {top:64%;}
  
	0%{ opacity:0; }
	10% { opacity:0.8;}
	35%{ opacity:0.7;}
	/* end */
	65%{opacity:0.4;}
	70%{ opacity:0;}
	100%{opacity:0;}
  
	0% { left:90%; }
	25%{ left:50%;}
	50% { left:20%;}
	70% { left:-10%;}
	/* return */
	100% {left:32%;}
	  
		0%{width:650px; height:200px;}
		70%{width:850px; height:350px;}
		100%{width:650px; height:200px;}
}

.mist4long{
animation-name:mistmovement4;
animation-duration:24s;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity:0%;
animation-delay:12s;
overflow:hidden;
position:fixed;
z-index:501;
top:80%;
left:80%;
width:250px;
height:400px;
}

@keyframes mistmovement5s {
	0% { top:90%; }
	25% { top:88%;}
	50% { top:86%;}
	/* end */
	75% { top:92%;}
	100% {top:92%;}
  
	0%{ opacity:0; }
	10%{opacity:0;}
	20% { opacity:0.8;}
	45%{ opacity:0.7;}
	/* end */
	65%{opacity:0.4;}
	70%{ opacity:0;}
	100%{opacity:0;}
  
	0% { left:90%; }
	25%{ left:50%;}
	50% { left:20%;}
	70% { left:-10%;}
	/* return */
	100% {left:32%;}
	  
		0%{width:350px; height:200px;}
		70%{width:450px; height:350px;}
		100%{width:350px; height:200px;}
}

.mist5s{
animation-name:mistmovement5s;
animation-duration:28s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay:1s;
opacity:0%;
animation-delay:4s;
overflow:hidden;
position:fixed;
z-index:501;
top:80%;
left:80%;
width:250px;
height:400px;
}

@keyframes mistmovement6s {
	0% { top:90%; }
	25% { top:88%;}
	50% { top:86%;}
	/* end */
	75% { top:82%;}
	100% {top:92%;}
  
	0%{ opacity:0; }
	10%{opacity:0;}
	20% { opacity:0.8;}
	45%{ opacity:0.7;}
	/* end */
	65%{opacity:0.4;}
	70%{ opacity:0;}
	100%{opacity:0;}
  
	0% { left:90%; }
	25%{ left:50%;}
	50% { left:20%;}
	70% { left:-10%;}
	/* return */
	100% {left:32%;}
	  
		0%{width:350px; height:200px;}
		70%{width:450px; height:350px;}
		100%{width:350px; height:200px;}
}

.mist6s{
animation-name:mistmovement6s;
animation-duration:20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay:6s;
opacity:0%;
overflow:hidden;
position:fixed;
z-index:501;
top:80%;
left:80%;
width:250px;
height:400px;
}

@keyframes mistmovement7 {
	0% { top:90%; }
	25% { top:88%;}
	50% { top:86%;}
	/* end */
	75% { top:82%;}
	100% {top:92%;}
  
	0%{ opacity:0; }
	10% { opacity:0.8;}
	35%{ opacity:0.7;}
	/* end */
	65%{opacity:0.4;}
	70%{ opacity:0;}
	100%{opacity:0;}
  
	0% { left:90%; }
	25%{ left:50%;}
	50% { left:20%;}
	70% { left:-10%;}
	/* return */
	100% {left:32%;}
	  
		0%{width:350px; height:200px;}
		70%{width:450px; height:350px;}
		100%{width:350px; height:200px;}
}

.mist7{
animation-name:mistmovement3;
animation-duration:24s;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity:0%;
animation-delay:18s;
overflow:hidden;
position:fixed;
z-index:501;
top:80%;
left:80%;
width:250px;
height:400px;
}

@keyframes mistmovement8s {
	0% { top:90%; }
	25% { top:88%;}
	50% { top:86%;}
	/* end */
	75% { top:82%;}
	100% {top:92%;}
  
	0%{ opacity:0; }
	10%{opacity:0;}
	20% { opacity:0.8;}
	45%{ opacity:0.7;}
	/* end */
	65%{opacity:0.4;}
	70%{ opacity:0;}
	100%{opacity:0;}
  
	0% { left:90%; }
	25%{ left:40%;}
	50% { left:10%;}
	70% { left:-10%;}
	/* return */
	100% {left:32%;}
	  
		0%{width:350px; height:200px;}
		70%{width:450px; height:350px;}
		100%{width:350px; height:200px;}
}

.mist8s{
animation-name:mistmovement8s;
animation-duration:20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity:0%;
animation-delay:2s;
overflow:hidden;
position:fixed;
z-index:501;
top:80%;
left:80%;
width:250px;
height:400px;
}

.mist, .mist2long, .mist3, .mist4long, .mist5s, .mist6s, .mist7, .mist8s{
	z-index:-600;
}