/* LOGO NAVBAR */

 .app-logo {
	height: 80px;
	white-space: nowrap;
	text-align: center;
	margin-bottom: 10px;
}


/* MAX HEIGHT FOR THE LOGO */

.app-logo img {
	vertical-align: middle;
	max-height: 80px;
	opacity:1;
}

.app-title a, .app-title a:active, .app-title a:hover, .app-title a:visited {
	color: #224E8F;
	text-decoration: none;
	
}

.app-title {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 32px;
	-webkit-animation:fadeToGrey ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeToGrey ease-in 1;
    animation:fadeToGrey ease-in 1;
    opacity: 0.4;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value */
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

#clouds {
	overflow:visible;
	padding:0;
	position:relative;
}

* {
	margin:0;
	padding:0;
}

.cloud2 {
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	background:#f2f9fe;
	background:linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
	background:-webkit-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
	background:-moz-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
	background:-ms-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
	background:-o-linear-gradient(top,#f2f9fe 5%,#d6f0fd 100%);
	border-radius:100px;
	height:120px;
	margin:120px auto 20px;
	position:relative;
	width:350px;

}

.cloud2:after {
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
	background:#f2f9fe;
	border-radius:100px;
	content:'';
	height:100px;
	left:50px;
	position:absolute;
	top:-50px;
	width:100px;
	z-index:-1;
}

.cloud2:before {
	-moz-border-radius:200px;
	-webkit-border-radius:200px;
	background:#f2f9fe;
	border-radius:200px;
	content:'';
	height:180px;
	position:absolute;
	right:50px;
	top:-90px;
	width:180px;
	z-index:-1;
}

.copyarea{
	position:fixed;
	left:50%;
	top:35%;
	z-index: 2;
}

.copy {
	overflow:visible;
	position:relative;
	top:-50;
	left:-50%;
	text-align: center;
}

.logo,.teaser,.info {
	opacity:0;  /* make things invisible upon start */
	white-space:nowrap;
			
    -webkit-animation:fadeToGrey ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeToGrey ease-in 1;
    animation:fadeToGrey ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value */
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

}

.logo {
	color:#777;
	font-size:96px;
	white-space:nowrap;
	-webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    animation-duration:3s;
    margin-bottom: 100px;
}

.teaser {
	margin-top: 30px;
	color:#888;
	font-size:48px;
 	white-space:nowrap;
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    animation-duration:3s;
    
    -webkit-animation-delay:3s;
    -moz-animation-delay:3s;
    animation-delay:3s;
}

.info {
	color:#666;
	font-size:24px;
 	white-space:nowrap;
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    animation-duration:3s;
    
    
    -webkit-animation-delay:6s;
    -moz-animation-delay:6s;
    animation-delay:6s;
    
	padding-bottom: 50px;
}

.x1 {
	-moz-animation:moveclouds 25s linear infinite;
	-moz-transform:scale(1.0);
	-o-animation:moveclouds 25s linear infinite;
	-webkit-animation:moveclouds 25s linear infinite;
	-webkit-transform:scale(1.0);
	left:100px;
	opacity:.4;
	top:-100px;
	transform:scale(1.0);
}

.x2 {
	-moz-animation:moveclouds 40s linear infinite;
	-moz-transform:scale(0.9);
	-o-animation:moveclouds 40s linear infinite;
	-webkit-animation:moveclouds 40s linear infinite;
	-webkit-transform:scale(0.9);
	left:400px;
	opacity:.5;
	top:-280px;
	transform:scale(0.9);
}

.x3 {
	-moz-animation:moveclouds 50s linear infinite;
	-moz-transform:scale(0.8);
	-o-animation:moveclouds 50s linear infinite;
	-webkit-animation:moveclouds 50s linear infinite;
	-webkit-transform:scale(0.8);
	left:-175px;
	opacity:.6;
	top:-280px;
	transform:scale(0.8);
	
	
}

.x3-opposite {
	-moz-animation:moveclouds-opposite 60s linear infinite;
	-moz-transform:scale(0.75);
	-o-animation:moveclouds-opposite 60s linear infinite;
	-webkit-animation:moveclouds-opposite 60s linear infinite;
	-webkit-transform:scale(0.75);
	left:0px;
	opacity:.65;
	top:-280px;
	transform:scale(0.75);
	margin-top: 40px;

}

.x4 {
	-moz-animation:moveclouds 70s linear infinite;
	-moz-transform:scale(0.7);
	-o-animation:moveclouds 70s linear infinite;
	-webkit-animation:moveclouds 70s linear infinite;
	-webkit-transform:scale(0.7);
	left:500px;
	opacity:.7;
	top:-280px;
	transform:scale(0.7);
}

.x5 {
	-moz-animation:moveclouds 85s linear infinite;
	-moz-transform:scale(0.6);
	-o-animation:moveclouds 85s linear infinite;
	-webkit-animation:moveclouds 85s linear infinite;
	-webkit-transform:scale(0.6);
	left:-150px;
	opacity:.8;
	top:-280px;
	transform:scale(0.6);
}

.x6 {
	-moz-animation:moveclouds 90s linear infinite;
	-moz-transform:scale(0.5);
	-o-animation:moveclouds 90s linear infinite;
	-webkit-animation:moveclouds 90s linear infinite;
	-webkit-transform:scale(0.5);
	left:330px;
	opacity:.9;
	top:-280px;
	transform:scale(0.5);
}

@-webkit-keyframes moveclouds {
	0% {
		margin-left:1500px;
	}
	
	100% {
		margin-left:-1000px;
	}
}

@-moz-keyframes moveclouds {
	0% {
		margin-left:1500px;
	}
	
	100% {
		margin-left:-1000px;
	}
}

@-o-keyframes moveclouds {
	0% {
		margin-left:1500px;
	}
	
	100% {
		margin-left:-1000px;
	}
}

@-webkit-keyframes moveclouds-opposite {
	0% {
		margin-left:-1000px;
	}
	
	100% {
		margin-left:1500px;
	}
}

@-moz-keyframes moveclouds-opposite {
	0% {
		margin-left:-1000px;
	}
	
	100% {
		margin-left:1500px;
	}
}

@-o-keyframes moveclouds-opposite {
	0% {
		margin-left:-1000px;
	}
	
	100% {
		margin-left:1500px;
	}
}


@-webkit-keyframes fadeToGrey { from { opacity:0; } to { opacity:0.4; } }
@-moz-keyframes fadeToGrey { from { opacity:0; } to { opacity:0.4; } }
@keyframes fadeToGrey { from { opacity:0; } to { opacity:0.4; } }