@charset "utf-8";
html, body {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	font-size: 14px;
	background: #fff;
	font-family: Tahoma;
	
}
html {
	
	background-image: url('../img/1.jpg');
	background-repeat: no-repeat;
	background-size: 1920px 1080px;
	background-size:cover;
	background-attachment:fixed;
}
.clear {
	clear: both;
}
/**/
.title{
	position: absolute;
	width: 154px;
	height: 122px;
	top: 139px;
	left: 123px;
	
	color: #fff;
	font-size: 40px;
	
	background-image: url('../img/logo.png');
	background-repeat: no-repeat;
	background-size: contain;
}

.is_canvas{
	position: absolute;
	width: 400px;
	height: 400px;
	top: 50%;
	left: 50%;
	margin-top: -150px;
	margin-left: -200px;
	border: 2px solid #009cbd;
	border-radius: 500px;
}
.ship {
	position: absolute;
	width: 96px;
	height: 96px;
	/* This is the point we rotate the object around */
	top: 50%;
	left: 50%;
	
	margin-top: -48px;
	margin-left: -48px;
	
	z-index: 3;
	/*
	 * CSS Please is your friend for ensuring cross browser syntax */
	-webkit-animation: orbit 14s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: orbit 14s linear infinite; /* Firefox 5-15 */
         -o-animation: orbit 14s linear infinite; /* Opera 12+ */
            animation: orbit 14s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
	
	
	
}
@-webkit-keyframes orbit {
	from { 	-webkit-transform: rotate(0deg) translateX(200px); }
	to   {  -webkit-transform: rotate(360deg) translateX(200px); }
}
@-moz-keyframes orbit {
	from { 	-moz-transform: rotate(0deg) translateX(200px); }
	to   {  -moz-transform: rotate(360deg) translateX(200px); }
}
@-o-keyframes orbit {
	from { 	-o-transform: rotate(0deg) translateX(200px); }
	to   {  -o-transform: rotate(360deg) translateX(200px); }
}
@keyframes orbit {
	from { 	transform: rotate(0deg) translateX(200px); }
	to   {  transform: rotate(360deg) translateX(200px); }
}

.yellow_sun {
	position: absolute;
	width: 54px;
	height: 54px;
	/* This is the point we rotate the object around */
	top: 50%;
	left: 50%;
	
	margin-top: -27px;
	margin-left: -27px;
	
	background-color: #ffff00;
	border-radius: 100px;
	
	z-index: 1;
	/*
	 * CSS Please is your friend for ensuring cross browser syntax */
	-webkit-animation: orbit 40s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: orbit 40s linear infinite; /* Firefox 5-15 */
         -o-animation: orbit 40s linear infinite; /* Opera 12+ */
            animation: orbit 40s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
	
	
	
}
@-webkit-keyframes orbit {
	from { 	-webkit-transform: rotate(0deg) translateX(200px); }
	to   {  -webkit-transform: rotate(360deg) translateX(200px); }
}
@-moz-keyframes orbit {
	from { 	-moz-transform: rotate(0deg) translateX(200px); }
	to   {  -moz-transform: rotate(360deg) translateX(200px); }
}
@-o-keyframes orbit {
	from { 	-o-transform: rotate(0deg) translateX(200px); }
	to   {  -o-transform: rotate(360deg) translateX(200px); }
}
@keyframes orbit {
	from { 	transform: rotate(0deg) translateX(200px); }
	to   {  transform: rotate(360deg) translateX(200px); }
}
.blue_planet {
	position: absolute;
	width: 30px;
	height: 30px;
	/* This is the point we rotate the object around */
	top: 50%;
	left: 50%;
	
	margin-top: -15px;
	margin-left: -15px;
	
	background-color: #009cbd;
	border-radius: 100px;
	
	z-index: 2;
	/*
	 * CSS Please is your friend for ensuring cross browser syntax */
	-webkit-animation: orbit 30s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: orbit 30s linear infinite; /* Firefox 5-15 */
         -o-animation: orbit 30s linear infinite; /* Opera 12+ */
            animation: orbit 30s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
	
	
	
}
@-webkit-keyframes orbit {
	from { 	-webkit-transform: rotate(0deg) translateX(200px); }
	to   {  -webkit-transform: rotate(360deg) translateX(200px); }
}
@-moz-keyframes orbit {
	from { 	-moz-transform: rotate(0deg) translateX(200px); }
	to   {  -moz-transform: rotate(360deg) translateX(200px); }
}
@-o-keyframes orbit {
	from { 	-o-transform: rotate(0deg) translateX(200px); }
	to   {  -o-transform: rotate(360deg) translateX(200px); }
}
@keyframes orbit {
	from { 	transform: rotate(0deg) translateX(200px); }
	to   {  transform: rotate(360deg) translateX(200px); }
}
.text {
	display:block;
	position:absolute;
	right: 20px;
	bottom: 20px;
	color: #FFF;
	font-size: 16px;
}