@font-face {
	font-family: "Pixel";
	src: url(fonts/PixelOperator.ttf);
}
@font-face {
  font-family: "Cyber";
  src: url(fonts/CyberWolf.woff);
}

html{
    cursor: url(/img/res/cursor/cursor.png), default;
}
body{
	background:#030002 !important;
	font-family: Pixel;
	margin: 0;
}
h1{
	color:white;
	text-align:center;
	font-size:70px;
	margin-bottom: 0.50em
}
h2{
	margin-top: 0;
	color: DeepPink;
}
a{
    cursor: url(/img/res/cursor/pointer.png), default;
	color: orange;
	text-decoration: none;
}
a:hover{
	text-decoration: underline overline;
}
img.mascota{
	height: 450px;
	margin: auto;
	margin-top: 30px;
	display: block;
}
div.ban{
	color: #AAA;
	border: transparent 0px solid;
	max-width: 700px;
	margin: 20px auto;
}
.boardlist{
	word-spacing: 0px;
	text-align: center;
	color:white;
	margin-right: 20px; /*Cuadrar mascota*/
}
.boardlist > span{
	margin: 0 2px;
}
#footer{
	margin-top: 80px;
}
.unimportant{
    margin-top: 20px;
    text-align: center;
    color: #888 !important;
    font-size: 16px;
}
#separadorfooter{
	max-width: 750px;
	width: 80vw;
	margin: auto;
	border-top: 1px solid;
	padding: 5px;
}
/*Contacto*/
textarea{
	width: 100%;
	background: #333333;
	color: #CCCCCC;
	border: #666666 1px solid;
}

/*Pills*/
div.redpill {
	position:absolute;
	width: 70px;
	height: 20px;
	border-radius:12px;
	background-color: red;
	margin-left:-80px;
	z-index:-4;
	margin-top:300px;
	animation-name: redpill;
	animation-duration: 10s;
	animation-iteration-count:10;
}
div.bluepill {
	position:absolute;
	width: 70px;
	height: 20px;
	border-radius:12px;
	background-color: blue;
	margin-left:calc(100% - 80px);
	z-index:-4;
	margin-top:475px;
	opacity:0;
	animation-name: bluepill;
	animation-duration: 19s;
	animation-iteration-count:5;
}
div.yellowpill {
	position:absolute;
	width: 70px;
	height: 20px;
	border-radius:12px;
	background-color: yellow;
	margin-left:-80px;
	z-index:-4;
	margin-top:570px;
	animation-name: yellowpill;
	animation-duration: 16s;
	animation-iteration-count:7;
}
@keyframes redpill {
	0%	 {margin-left:-80px;
		 opacity:0.9;}
	33% {margin-left:50%;
		 opacity:0;}
	100% {margin-left:-80px);
		 opacity:0;}
}
@keyframes bluepill {
	0%	 {margin-left:calc(100% - 80px);
		 opacity:1;}
	0.01%	 {margin-left:calc(100% - 80px);
			 opacity:0;}
	9.99%	 {margin-left:calc(100% - 80px);
			 opacity:0;}
	10%	 {margin-left:calc(100% - 80px);
		 opacity:0.9;}
	33%  {margin-left:45%;
		 opacity:0;}
	100% {margin-left:calc(100% - 80px);
		 opacity:0;}
}
@keyframes yellowpill {
	0%	 {margin-left:-80px;
		 opacity:0.9;}
	33% {margin-left:50%;
		 opacity:0;}
	100% {margin-left:-80px);
		 opacity:0;}
}

/*Slicer*/
#header {
	position: relative;
	z-index: 1;
}
#headerbar {
	width: 100%;
	left: 0;
	top: 0;
	height: 25px;
	background-color: #000;
	box-shadow: 0px 1px #FFF, 0px 2px #000;
}
#headerfade_left {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
#headernews {
	width: 100%;
	font-family: Cyber;
	font-size: 16px;
	letter-spacing: -4px;
	color:#FFF
}
#headernews p {
	display: inline;
	position: relative;
	top: -5px;
}
#headerlogo {
	position: absolute;
	left: 0;
	top: 25px;
	height: 9vw;
}

/*Loader*/
.word {
	top: 6em;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
	position: absolute;
	color: Plum;
	font-size: 3.7em;
	height: 2.5em;
	line-height: 2.5em;
	text-shadow: 0 0 10px #BEA0DD, 0 0 5px rgba(100, 255, 100, 0.5);
	font-family: monospace;
  }
  .word span {
	display: inline-block;
	transform: translateX(100%) scale(0.9);
	transition: transform 500ms;
  }
  .overlay {
	background: radial-gradient(#200015, #000000);
	background-image: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
	background-size: 1000px 2px;
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
  }
  #contentloader {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background-image: radial-gradient(ellipse 50% 40%,#330022, #030002);
	  z-index: 10000;
	  transition: 1s;
  }
  #loaderlogo{
	  position: absolute;
	  top: -5.5em;
	  bottom: 0;
	  right: 0;
	  left: 0;
	  margin: auto;
	  height: 330px;
	  animation: zoom;
	  animation-play-state: paused;
	  animation-duration: 4s;
	  -webkit-animation-fill-mode: forwards;
  }
  @keyframes zoom {
	  0%   {transform: scale(0.9);}
	  100% {transform: scale(1);}
  }
  .destroyedloader {
	  opacity: 0;
	  pointer-events: none;
	  transition: 0.5s !important;	
  }
  
  div.loaderQuote {
	  position:absolute;
	  color:white;
	  font-size:2em;
	  right:-80px;
	  z-index:-4;
  }
  @keyframes loaderQuotes {
	  0%	 {margin-right:-10%;
		   opacity:0.9;}
	  85% {margin-right:95%;
		   opacity:0;}
	  100% {margin-right:-10%;
		   opacity:0;}
  }