*{ margin: 0; padding: 0;}

body 
{
	overflow: hidden;
}

#clouds{
	z-index:1900;
	padding: 100px 0;

	position:fixed;
	top:0px;
	left:0px;
}

.cloud {
	width: 200px; height: 60px;
	background: #fff;
	
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
}

.cloud:before, .cloud:after 
{
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after
{
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

.x1
{
	opacity: 0.9;
	
	-webkit-animation: moveclouds 46s linear infinite;
	-moz-animation: moveclouds 46s linear infinite;
	-o-animation: moveclouds 46s linear infinite;
}

.x2
 {
	left: 200px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; 
	
	-webkit-animation: moveclouds 55s linear infinite;
	-moz-animation: moveclouds 55s linear infinite;
	-o-animation: moveclouds 55s linear infinite;
}

.x3
{
	left: -250px; top: -200px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; 
	
	-webkit-animation: moveclouds 70s linear infinite;
	-moz-animation: moveclouds 70s linear infinite;
	-o-animation: moveclouds 70s linear infinite;
}

.x4
{
	left: 470px; top: -250px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; 
	
	-webkit-animation: moveclouds 76s linear infinite;
	-moz-animation: moveclouds 76s linear infinite;
	-o-animation: moveclouds 76s linear infinite;
}

.x5
{
	left: -150px; top: -150px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; 
	
	-webkit-animation: moveclouds 96s linear infinite;
	-moz-animation: moveclouds 96s linear infinite;
	-o-animation: moveclouds 96s linear infinite;
}

@-webkit-keyframes moveclouds
{
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

@-moz-keyframes moveclouds
{
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

@-o-keyframes moveclouds
{
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

@keyframes moontrack
{	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@-webkit-keyframes moontrack
{	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@-moz-keyframes moontrack
{	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@-o-keyframes moontrack
{	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@keyframes suntrack
{	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@-webkit-keyframes suntrack
{	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@-moz-keyframes suntrack
{	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@-o-keyframes suntrack
{	
  from { transform: rotate(.15turn); }
  to { transform: rotate(-.85turn); }
}

@keyframes sunpulse
{ 
   from { box-shadow: 0 0 100px #ff0, 0 0 100px #ff0; }
  to { box-shadow: 0 0 50px #ff0, 0 0 75px #ff0;  }
}

@-webkit-keyframes sunpulse
{ 
   from { box-shadow: 0 0 100px #ff0, 0 0 100px #ff0; }
  to { box-shadow: 0 0 50px #ff0, 0 0 75px #ff0;  }
}

@-moz-keyframes sunpulse
{ 
   from { box-shadow: 0 0 100px #ff0, 0 0 100px #ff0; }
  to { box-shadow: 0 0 50px #ff0, 0 0 75px #ff0;  }
}

@-o-keyframes sunpulse
{ 
   from { box-shadow: 0 0 100px #ff0, 0 0 100px #ff0; }
  to { box-shadow: 0 0 50px #ff0, 0 0 75px #ff0;  }
}

@keyframes planeresize
{
	from
	{
		width:0px;
		height:0px;
		left:0px;
		top:300px;
	}
	to
	{
		width:512px;
		height:100px;
		left:100%;
		top:0px;
	}
}

@-webkit-keyframes planeresize
{
	from
	{
		width:0px;
		height:0px;
		left:0px;
		top:300px;
	}
	to
	{
		width:512px;
		height:100px;
		left:100%;
		top:0px;
	}
}

@-moz-keyframes planeresize
{
	from
	{
		width:0px;
		height:0px;
		left:0px;
		top:300px;
	}
	to
	{
		width:512px;
		height:100px;
		left:100%;
		top:0px;
	}
}

body {
  margin: 0;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: #000;
  background-image: url('starfield_stock_1.jpg'); 
  background-size:100% 100%;
}

.sun {
  z-index:1000;
  width: 15vw;
  height: 15vw;
  background: #ff0;
  background: radial-gradient(ellipse at center, #f90 0%,#fc0 60%,#ff0 100%);
  border-radius: 100%;
  position: fixed;
  bottom: -7vw;
  right: 2vw;
  transform-origin: -30vw 2vw;
  animation: suntrack 96s infinite forwards linear, sunpulse 2s alternate infinite; 
 
  -webkit-animation: suntrack 96s infinite forwards linear, sunpulse 2s alternate infinite;
  
  -moz-animation: suntrack 96s infinite forwards linear, sunpulse 2s alternate infinite;
 }

.moon {
  z-index:1000;
  width: 15vw;
  height: 15vw;
  background-image: url('moon8.png');
  position: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90%;
  border-radius: 100%;
  bottom: -7vw;
  right: 2vw;
  transform-origin: -30vw 2vw;
  animation: moontrack 96s infinite forwards linear;
  animation-delay:48s;
  
  -webkit-animation: moontrack 96s infinite forwards linear;
  -webkit-animation-delay:48s;
  
  -moz-animation: moontrack 96s infinite forwards linear;
  -moz-animation-delay:48s;
  
  opacity: 1;
}

#plane
{
	z-index:1930;
	position:fixed;
	background-image:url('plane.png');
	background-size:100% 100%;
	animation-name: planeresize;
	animation-duration: 30s;
	animation-iteration-count:1;
	animation-direction: normal;
	animation-timing-function:ease-in;
	animation-delay:44s;
	
	-webkit-animation-name: planeresize;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count:1;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-delay:44s;
	
	-moz-animation-name: planeresize;
	-moz-animation-duration: 30s;
	-moz-animation-iteration-count:1;
	-moz-animation-direction: normal;
	-moz-animation-timing-function: ease-in;
	-moz-animation-delay:44s;
}

#cityscape
{
	z-index:1900;
	position:fixed;
	bottom:190px;
	left:0px;
	width:100%;
	height:200px;
	background-size:400px 100%;
	background-image:url('cityscape.png');
	background-repeat:x-repeat;
}

#building
{
    z-index:1940;
	position:fixed;
	bottom:86px;
	right:0px;
	width:521px;
	height:413px;
	background-size:100% 100%;
	background-image:url('buildings.png');
	background-repeat:no-repeat;
}

#tree1
{
    z-index:1950;
	position:fixed;
	bottom:141px;
	right:505px;
	width:125px;
	height:125px;
	background-size:100% 100%;
	background-image:url('tree.png');
	background-repeat:no-repeat;
}

#tree2
{
    z-index:1960;
	position:fixed;
	bottom:106px;
	right:390px;
	width:200px;
	height:200px;
	background-size:100% 100%;
	background-image:url('tree.png');
	background-repeat:no-repeat;
}

#tree3
{
    z-index:1970;
	position:fixed;
	bottom:56px;
	right:200px;
	width:300px;
	height:300px;
	background-size:100% 100%;
	background-image:url('tree.png');
	background-repeat:no-repeat;
}

#ground
{
	  z-index:1500;
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	height:200px;
	background-color:#1C2841;
}

#logo
{
	z-index:2200;
	position:absolute;
	bottom:160px;
	left:160px;
	width:400px;
	height:110px;
	background-image:url('sensocontas.png');
	background-size:400px 75px;
	
	background-repeat: no-repeat;
}

#logobackground1
{
	z-index:2000;
	position:absolute;
	left:120px;
	bottom:160px;
	width:480px;
	height:150px;
	background-color:#999999;
}

#logobackground2
{
    z-index:2100;
	position:absolute;
	left:130px;
	bottom:170px;
	width:460px;
	height:130px;
	background-color:#ffffff;
}


.one-edge-shadow {
	-webkit-box-shadow: 0 16px 6px -6px #111111;
	   -moz-box-shadow: 0 16px 6px -6px #111111;
	        box-shadow: 0 16px 6px -6px #111111;
}

#contactos
{
	z-index:2000;
	position: absolute;
	left:160px;
	bottom:25px;
	font-family:Arial;
	font-size:10px;
	color:#ffffff;
}

#brevemente
{
	z-index:2000;
	position: absolute;
	right:30px;
	bottom:30px;
	font-family:Arial;
	font-size:12px;
	color:#ffffff;
	text-align:center;
}
