@import url(http://fonts.googleapis.com/css?family=Allerta);
@import url(http://fonts.googleapis.com/css?family=Exo+2:400,200);
@import url(http://fonts.googleapis.com/css?family=Courgette);

  * {
        margin: 0px;
        padding: 0px;
      }

	  
body:hover p{
letter-spacing: 1px;
left: 15%;
line-height: 14px;
top: 20%;
margin-top: 125px;
}	  

body:hover #iletisim{opacity: 1; -webkit-transition: all 1s ease 1s !important;
-moz-transition: all 1s ease 1s !important;
-o-transition: all 1s ease 1s !important;
transition: all 1s ease 1s !important;}
	  
	  
body:hover #muzik{opacity:0.5; z-index:99;}
	  

body{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
	background: url('../data/stars.jpg') 0% 0% repeat;
    z-index: -1;
    -webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 100s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	
	 -ms-animation-name: MOVE-BG;
	-ms-animation-duration: 100s;
	-ms-animation-timing-function: linear;
	-ms-animation-iteration-count: infinite;
	
	-o-animation-name: MOVE-BG;
	-o-animation-duration: 100s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;
	
	-moz-animation-name: MOVE-BG;
	-moz-animation-duration: 100s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;

}

@-webkit-keyframes MOVE-BG {
from {background-position: 0% 0%}
to {background-position: 187% 100%}
}

@-ms-keyframes MOVE-BG {
from {background-position: 0% 0%}
to {background-position: 187% 100%}
}

@-o-keyframes MOVE-BG {
from {background-position: 0% 0%}
to {background-position: 187% 100%}
}

@-moz-keyframes MOVE-BG {
from {background-position: 0% 0%}
to {background-position: 187% 100%}
}
@keyframes MOVE-BG {
from {background-position: 0% 0%}
to {background-position: 187% 100%}
}

div#shell {
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
      }
	  
	img#mount{
	width:809px;
	height:271px;
	position:fixed;
	bottom:-20px;
	margin-top:-193px;
	margin-left: auto;
	margin-right: auto;
	left: 0 !important;
	right: 0 !important;
	z-index:1;
	}	  
	
	img#mount2{
	position:fixed;
	bottom:-20px;
	margin-top:-193px;
	z-index:2;
	margin-left: auto;
	margin-right: auto;
	left: -250px !important;
	right: 0 !important;
	}
	
	img#moon{
z-index: 0;
top: 0 !important;
position: absolute;
left: -175px !important;
	}	
	
	#moon-alan{
position: fixed;
bottom: -40px;
left: 0;
width: 328px;
height: 328px;
	}
	
	#smal-moon-alan{
position: fixed;
top: 0px;
right: 10%;
width: 100px;
height: 100px;
	}	
	
	img#moon2{
margin-top: 150px;
	}	
	
#muzik{position:absolute; background:#000; width:100%; height:20px; 
opacity:0;
-moz-transition: all 200ms ease 0ms !important;
-o-transition: all 200ms ease 0ms !important;
transition: all 200ms ease 0ms !important;}
	
	img#astron{
top: 0 !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
	}
	
	
	#ostron-alan{
	width: 134px;
height: 88px;
right: 100px;
position: absolute;
top: 40%;
	}
	
	
#icerik {
	position:absolute;
	top:20%;
	left:	15%;
}
	
h1{color: #fff;
font-family: 'Allerta', sans-serif;
font-weight: normal;
letter-spacing: 1px;
font-size: 56px;
text-shadow: 2px 2px 0px #000; */}
	
h2{color: #eee;
font-size: 16px;
padding: 20px 0;
letter-spacing: 7px;
font-family: 'Exo 2', sans-serif;
font-weight: 100;
}	

p{
left:-15%;
position:fixed;
font-size: 14px;
color: #ccc;
font-family: 'Exo 2', sans-serif;
font-weight: 100;
letter-spacing: 400px;
width: 340px;
line-height: 160px;
top:0%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}	
#pek-yakinda{
position: absolute;
left: 40%;
top: 48%;
font-family: Courgette, cursive;
font-size: 18px;
color: #ccc;
letter-spacing: 5px;
}
#iletisim{opacity: 0;}

.iletisim{padding: 7px 15px;
border: solid 1px #ccc;
color: #ccc;
font-family: 'arial';
font-weight: 100;
font-size: 12px;
text-decoration: none;
cursor: pointer;
z-index: 99999;
position: absolute;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;-webkit-transition: all 3s ease;
-moz-transition: all 200ms ease 0ms !important;
-o-transition: all 200ms ease 0ms !important;
transition: all 200ms ease 0ms !important;
}
	
.iletisim:hover{background:mediumspringgreen; border-color:mediumspringgreen; color:#000;}	
	
.don{
  animation: don linear 150s;
  animation-iteration-count: 99;
  transform-origin: ;
  -webkit-animation: don linear 150s;
  -webkit-animation-iteration-count: 99;
  -webkit-transform-origin: ;
  -moz-animation: don linear 150s;
  -moz-animation-iteration-count: 99;
  -moz-transform-origin: ;
  -o-animation: don linear 150s;
  -o-animation-iteration-count: 99;
  -o-transform-origin: ;
  -ms-animation: don linear 150s;
  -ms-animation-iteration-count: 99;
  -ms-transform-origin: ;
}

@keyframes don{
  0% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes don{
  0% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes don {
  0% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes don {
  0% {
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes don {
  0% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}	

	
	



.don2{
  animation: don2 linear 90s;
  animation-iteration-count: 999;
  transform-origin: ;
  -webkit-animation: don2 linear 90s;
  -webkit-animation-iteration-count: 999;
  -webkit-transform-origin: ;
  -moz-animation: don2 linear 90s;
  -moz-animation-iteration-count: 999;
  -moz-transform-origin: ;
  -o-animation: don2 linear 90s;
  -o-animation-iteration-count: 999;
  -o-transform-origin: ;
  -ms-animation: don2 linear 90s;
  -ms-animation-iteration-count: 999;
  -ms-transform-origin: ;
}

@keyframes don2{
  0% {
    left:280px;
    top:150px;
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    left:-280px;
    top:-100px;
    opacity:1;
    transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes don2{
  0% {
    left:280px;
    top:150px;
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    left:-280px;
    top:-100px;
    opacity:1;
    -moz-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes don2 {
  0% {
    left:280px;
    top:150px;
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    left:-280px;
    top:-100px;
    opacity:1;
    -webkit-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes don2 {
  0% {
    left:280px;
    top:150px;
    opacity:1;
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    left:-280px;
    top:-100px;
    opacity:1;
    -o-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes don2 {
  0% {
    left:280px;
    top:150px;
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    left:-280px;
    top:-100px;
    opacity:1;
    -ms-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

.astron{
  animation: animationFrames linear 25s;
  animation-iteration-count: 5;
  transform-origin: ;
  -webkit-animation: animationFrames linear 25s;
  -webkit-animation-iteration-count: 5;
  -webkit-transform-origin: ;
  -moz-animation: animationFrames linear 25s;
  -moz-animation-iteration-count: 5;
  -moz-transform-origin: ;
  -o-animation: animationFrames linear 25s;
  -o-animation-iteration-count: 5;
  -o-transform-origin: ;
  -ms-animation: animationFrames linear 25s;
  -ms-animation-iteration-count: 5;
  -ms-transform-origin: ;
}

@keyframes animationFrames{
  0% {
    transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    -moz-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    -webkit-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    -o-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
  100% {
    -ms-transform:  rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg) ;
  }
}