@font-face{
	font-family: "Harabara";
	font-style:normal;
	font-weight:normal;
	src:url(../css/fonts/Harabara.ttf);}

::selection {
	background:rgba(0, 0, 0, 0.8);
	color:#CF0;}

a{
	text-decoration: none;}

body{
	background: black url(../images/pattern.png) repeat top left; 
	color:#FFF;
	font:16px 'PT Sans Narrow', sans-serif;
	height:100%;
	left:0;
	margin:0;
	overflow: hidden;
	position:absolute;
	text-align:right;
	text-transform:none;
	top:0;
	width:100%;}

/*--------inicio del codigo de minimenu ---------*/
.mb_menu{
	position:absolute;
	top: 74%;
	right:50px;
	z-index:11;}

.mb_menu > a{
	background-color:rgba(0,0,0,.7);
	font-size: 1.3em;
	margin-left:5px;
	display:inline-block;
	width:4.7em;
	height:4.7em;
	color:#fff;
	line-height:5em;
	list-style: none;
	text-align:center;
	text-transform:uppercase;
	outline:none;
	-webkit-transition: all 0.5s ease-in;
	-moz-transition:all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-transition: all 0.5s ease-in;}

.mb_menu > a span {
	font-size: .5em;
	line-height: 1em;
	text-transform: uppercase;
	text-align: center;}

.mb_menu > a:hover{
	color:#000;
	background-color:rgba(255, 255, 255,.9);}

.mb_menu > a:active {
	background-color:rgba(0,0,0,.7);
	color:#CF0;}

.mb_menu > a p {
	margin-top: 10px;
	text-align: center;}

#facebook, #reprod{
	background: rgba(0,0,0,0.7);
	display: none;
	position: absolute;
	text-align: center;
	vertical-align: right;
	z-index: 10;}

#facebook{
	left: 0px;
	max-height:90%;	
	max-width: 42%;
	margin: .5em;
	overflow-y: scroll;
	padding: 1em;}

#facebook .fb-comments{
	background:rgba(255, 255, 255, .5);
	height: 100%;
	width: 100%;
	} 

#reprod{
	right: 50px;
	height: 60px;
	padding: .5em;
	top:62%;
	width: 295px;}

/*--------fin del codigo de la minimenu---------*/
#container {
	bottom:0;
	height: 18%;
	overflow: hidden;
	position:absolute;
	width:100%;}

#container  h1 {
display: inline-block;}

#container  h1 {
	font-family: "Harabara";
	font-size:3.6em;
	letter-spacing:2px;	
	line-height:60px;
	margin-top: .8em;
	margin-right: 50px;
	text-shadow:0 3px 3px rgba(0,0,0,.8);
	vertical-align: middle;}

.ie h1 {
	filter: dropshadow
	(color=#000000, offx=0, offy=3);
	padding-bottom:12px;}

h2 {
	text-shadow:0 2px 2px #000;}

.ie h2 {
	filter: dropshadow(color=#000000, offx=0, offy=3);}

h3 {
	font-size:25px;
	margin:0.2em 0;
	text-shadow:0 2px 2px #000;}

.ie h3 {
	filter: dropshadow(color=#000000, offx=0, offy=3);}

h4 {
	margin-bottom:5px;
	text-transform:none;}

#home {
background: transparent url(../images/pattern.png) repeat top left;}

#overlay {
	display:none;
	background:url(../images/alpha.png);
	background:rgba(0, 0, 0, 0.8) url();
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:999;}

#credits {
	display:none;
	z-index:1000;	
	position:fixed;
	top:50%;
	left:50%;
	width:600px;
	height:220px;
	margin-left:-300px;
	margin-top:-110px;}

	#credits div {
		float:left;}

	#credits div.last {
		width:290px;
		text-align:left;
		padding-left:10px;
		margin-left:10px;
		border-left:1px dotted #CCC;}

	#credits div.first {
		width:280px;
		text-align:right;}

	#credits h4, #credits p {
		margin:0 0 10px 0;}

.bg {
	background: transparent url(../images/pattern.png) repeat top left;
	height: 100%;
	z-index: 5000;
	width: 100%;}

.icons{
	display: inline-block;
	color: white;
	margin: .3em;}
	
	.icons:hover{
		color:#CF0;
		-webkit-transition:all .5s ease-out;}

/*breakpoints para el RWD 320 480 600 768 1024 1200*/

@media screen and (max-width: 1200px) {
	body {
		background:#80D4FF;
		font-size:1em;
	}

}
@media screen and (max-width: 1024px) {
	body{
		background:#E3DC8D;
		
	}
	h1{
		font-size:3em;}
		
}
@media screen and (max-width: 768px) {
	body{
		background:#E3B18D;
		}
	h1{
		font-size:2em;}
}
@media screen and (max-width: 600px) {
	
	body{
		background:#C5B0D5;
		font-size:.8em;
	}

h1{
		font-size:1em;}
}
@media screen and (max-width: 480px) {
	body{
		background:violet;
		font-size: .6em;
	}
h1{
		font-size:0.8em;}
}
@media screen and (max-width: 320px) {
	body{
		background:orange;
	}
	nav li a{
	margin: 0em;
	padding:.8em .1em;
}
h1{
		font-size:0.5em;}
}