html{ 
	height:100%;
	background-color: #000;
}

body{

	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	color: #ccc;
	
	background: linear-gradient(45deg, rgba(40,40,40,1) 0%, rgba(23,48,82,1) 100%);
	background-size: 400%;
	z-index: -1;
	animation: bganimate 20s linear infinite;
	-webkit-animation: bganimate 20s linear infinite;
	box-shadow: inset 0px 0px 60px 20px rgba(0,0,0,0.4);
	
	min-height:100%; 
	padding:0px; 
	margin:0px; 
	position:relative;
}

@keyframes bganimate {
	0%
	{
		background-position: 0 0;
	}
	50%
	{
		background-position: 100% 0;
	}
	100%
	{
		background-position: 0 0;
	}
}

#header{
	#background-color:rgba(50,50,50,.8);
	text-align:center;
}

#footer{ 
	position:fixed;
	bottom:0; 
	width:100%; 
	height:25px; 
	text-align:left;
	color:rgba(255,255,255,.6);
	font-size: 12px;
	margin-left: 6px;
}

#wrapper{   
	text-align: center; 
	margin-left: 15%; 
	margin-right: 15%;
}

/* 
========================
	  FADEPIC (CHOU-FLEUR)
========================
*/

#fadepic{
	position: absolute;
	top: 0;
	left: 0;
	animation: animpic 10s 10s linear infinite;
	-webkit-animation: animpic 10s linear infinite;
}

@keyframes animpic {
	0%
	{
		opacity: 0;
		max-width: 5%;
	}
	45%
	{
		opacity: 0;
		max-width: 15%;
	}
	50%
	{
		opacity: 0.8;
		max-width: 20%;
	}
	55%
	{
		opacity: 0;
		max-width: 5%;
	}
	100%
	{
		opacity: 0;
		max-width: 5%;
	}
}


/* 
========================
	  WAVES
========================
*/
.box {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  
  #transform: rotate(80deg); 
}

.wave {
  position: absolute;
  opacity: .05;
  top: -50%;
  left: 20%;
  width: 60%;
  height: 60%;

  border-radius: 75%;
}


.wave.-one {
  animation: rotate 7000ms infinite linear;
  opacity: .1;
  background: #0af;
}

.wave.-two {
  animation: rotate 3000ms infinite linear;
  opacity: .1;
  background: black;
}

.wave.-three {
  animation: rotate 7500ms infinite linear;
  background-color: #77daff;
}


@keyframes rotate {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

/* BLUR */
#blurtxt {
	color: transparent;
	animation: blur 10s ease-out infinite;
	-webkit-animation: blur 10s ease-out infinite;
}

@keyframes blur {
	0%		{text-shadow:  0 0 100px #ddd; opacity:0;}
	5%		{text-shadow:  0 0 90px #ddd;}
	15%		{opacity: 1;}
	20%		{text-shadow:  0 0 1px #ddd;}
	80%		{text-shadow:  0 0 1px #ddd;}
	85%		{opacity: 1;}
	95%		{text-shadow:  0 0 90px #ddd;}
	100%	{text-shadow:  0 0 100px #ddd; opacity:0;}
}

@-webkit-keyframes blur {
	0%		{text-shadow:  0 0 100px #ddd; opacity:0;}
	5%		{text-shadow:  0 0 90px #ddd;}
	15%		{opacity: 1;}
	20%		{text-shadow:  0 0 1px #ddd;}
	80%		{text-shadow:  0 0 1px #ddd;}
	85%		{opacity: 1;}
	95%		{text-shadow:  0 0 90px #ddd;}
	100%	{text-shadow:  0 0 100px #ddd; opacity:0;}
}

/* 
========================
	  STARFIELD
========================
*/
#space, .stars {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stars {
	background-image:
		radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
		radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
	background-repeat: repeat;
	background-size: 200px 200px;
	animation: zoom 5s infinite;
	opacity: 0;
}

.stars:nth-child(1) {
  background-position: 50% 50%;
  animation-delay: 0s;
}
.stars:nth-child(2) {
  background-position: 20% 60%;
  animation-delay: 1s;
}
.stars:nth-child(3) {
  background-position: -20% -30%;
  animation-delay: 2s;
}
.stars:nth-child(4) {
  background-position: 40% -80%;
  animation-delay: 3s;
}
.stars:nth-child(5) {
  background-position: -20% 30%;
  animation-delay: 4s;
}

/*
.chou {
	background-image:url("pics/chou_field.png");
	background-repeat: round;
	background-size: 800px 400px;
}
*/

@keyframes zoom {
  0% {
	opacity: 0;
	transform: scale(0.2);
	animation-timing-function: ease-in;
  } 
  60% {
	opacity: 1;
	transform: scale(1.1);
	animation-timing-function: linear;
  }
  100% {
	opacity: 0;
	transform: scale(2);
  }
}

/* 
========================
	  NEON
========================
*/
.neon {
	color: #fff;
	text-shadow:
	0 0 2px #fff,
	0 0 4px #fff,
	0 0 8px rgba(0,255,255,.6),
	0 0 12px rgba(0,255,255,.6),
	0 0 16px rgba(0,255,255,.4),
	0 0 18px rgba(0,255,255,.2),
	0 0 20px rgba(0,255,255,.1);
}

/* 
========================
	  BUTTON (COMMON)
========================
*/

.btn {
	line-height: 50px;
	height: 50px;
	text-align: center;
	width: 200px;
	max-width: 80%;
	cursor: pointer;
	border: none;
	background: none;
	background-color: transparent;
	color: #CCC;
	font-family: 'Oswald', sans-serif;
	margin: 2px;
}	

/* 
========================
	  BUTTON ONE
========================
*/
.btn-one {
	transition: all 0.3s;
	position: relative;
}
.btn-one span {
	transition: all 0.3s;
}
.btn-one::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: rgba(255,255,255,0.5);
	border-bottom-color: rgba(255,255,255,0.5);
	transform: scale(0.1, 1);
}
.btn-one:hover span {
	letter-spacing: 2px;
}
.btn-one:hover::before {
	opacity: 1;	
	transform: scale(1, 1);	
}
.btn-one::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.3s;
	background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
	opacity: 0;	
	transform: scale(0.1, 1);
}


/* 
========================
	  BUTTON TWO
========================
*/
.btn-two {
	transition: all 0.5s;
	position: relative;	
}
.btn-two span {
	z-index: 2;	
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;	
}
.btn-two::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.5s;
	border: 1px solid rgba(255,255,255,0.2);
	background-color: rgba(255,255,255,0.1);
}
.btn-two::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.5s;
	border: 1px solid rgba(255,255,255,0.2);
	background-color: rgba(255,255,255,0.1);
}
.btn-two:hover::before {
  transform: rotate(-45deg);
  background-color: rgba(255,255,255,0);
}
.btn-two:hover::after {
  transform: rotate(45deg);
  background-color: rgba(255,255,255,0);
}


/* 
========================
	  BUTTON THREE
========================
*/
.btn-three {
	transition: all 0.5s;
	position: relative;
}
.btn-three::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255,255,255,0.1);
	transition: all 0.3s;
}
.btn-three:hover::before {
	opacity: 0 ;
	transform: scale(0.5,0.5);
}
.btn-three::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border: 1px solid rgba(255,255,255,0.5);
	transform: scale(1.2,1.2);
}
.btn-three:hover::after {
	opacity: 1;
	transform: scale(1,1);
}