@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

* {
	padding: 0;
	margin: 0;
	font-family: 'Open Sans',Helvetica, Arial;
	font-weight: 400;
}

body
{
	/*
	background: #000037;
	background: -webkit-canvas(bgCanvas) fixed, #000037;*/
	background : url(../images/bg.png) fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;

}
/*#33AAFF*/
/* ##### Header ##### */
#header
{
	background: #3498db;
	margin: 0;
	box-shadow: 0 0 15px #666666;
	height: 188px;
	border-bottom: 7px solid #2980b9;
}
h1
{
	color: #fff;
	text-align: center;
	font-size: 36px;
	padding: 0px;
	font-family: 'Press Start 2P';
	animation: neon 1s alternate infinite;
	-webkit-animation: neon 1s alternate infinite;
}

#menu {
	margin: 0 auto;
	width: 1000px;
}
#menu .item {
	display: inline-block;
	height: 35px; width: 170px;
	padding:12px;
	text-align: center;

	transition: background 0.4s;
	-webkit-transition: background 0.4s;
}
#menu .item:hover
{

	background: #fff;

}
#menu a
{
	margin: 0px; display: block; width: 100%; height: 100%;
	color: inherit;
}


#submenu1 {
	position: absolute;
	top:140px;
	margin-left: -15px;
	background: #3498db;
	display: none;
	opacity: 0;
	transition:opacity 0.4s;
	-webkit-transition:opacity 0.4s;
	
}

#presentation:hover #submenu1 {
	display: block;
	opacity: 1;
}

.subitem
{
	display: block;
	width: 200px;
	padding-top: 20px;
	padding-bottom: 20px;
	transition:background 0.4s;
	-webkit-transition:background 0.4s;
}
.subitem:hover
{
	background: #fff;
}

/* ##### Main ##### */
nav
{
	width: 70%;
	margin: 20px auto;
	font-size: 14px;
	padding: 15px;
	color: #000000;
}

nav p
{
	background: #ffffff;
	box-shadow: 0 0 7px #888888;
	padding: 15px;
}
nav #p
{
	background: #ffffff;
	box-shadow: 0 0 7px #888888;
	padding: 15px;
}

h2
{
	margin: 10px;
	font-family: 'Roboto Slab';
}

#videogame
{
	
}

#screen
{
	display: block;
	width: 600px;
	margin: 0 auto;
	text-align: center;
	border: solid 15px #222;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 0 15px #555;
}
#mute
{
	position: absolute;
	height: 70px; width: 70px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	background-color: #333;
	border: 2px solid #fff;
	opacity: 0.8;
}

#screenfoot
{
	height: 40px; width: 100px;
	background-color: #222;
	margin: 0 auto;
	margin-bottom: -10px;
}

#screenfoot2
{
	height: 30px; width: 180px;
	background-color: #222222;
	margin: 0 auto;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}

#download
{
	margin: 40px auto;
	display: block;
	background: #3498db;
	text-align: center;
	padding: 20px;
	height: 55px; width:280px;
	font-size: 36px;
	border: 4px solid #2980b9;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	transition: background 0.4s, box-shadow 0.4s;
	-webkit-transition: background 0.4s, box-shadow 0.4s;
}
#download:hover
{
	background: #54A8fb;
	box-shadow: 0 0 20px #54A8fb;
}

/* ##### Footer ##### */
footer
{
	background: #3498db;
	margin-top: 45px;
	box-shadow: 0 0 12px #777;
	font-size: 13px;
	text-align: center;
	padding: 10px 0;
}
#allrights
{
	width: 650px;
	margin: 30px auto;
	margin-top: 5px;
}
#twitterLink
{
	position: absolute;
	top: 210px;
	right: 22px;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
}
#twitterLink:hover 
{
	opacity: 1;
}

a {
	text-decoration: none;
	color: #fff;
}

#fbLink
{
	position: absolute;
	top: 265px;
	right: 33px;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
}
#fbLink:hover
{
	opacity: 1;
}

::selection 
{
	background : #3498db;
	color : #fff;
}

#overlay
{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	text-align: center;
	z-index: 42;

}
.imagetoclick
{
	margin: 25px 0;
	border: 5px solid #2980b9;
	border-radius: 7px;
	box-shadow: 0 0 12px #888888;
	transition: box-shadow 0.4s;
	-webkit-transition: box-shadow 0.4s;
	-moz-transition: box-shadow 0.4s;
}
.imagetoclick:hover
{
	box-shadow: 0 0 25px #777777;
}

@keyframes neon 
{
	from {text-shadow : 0 0 0 #ffffff;}
	to {text-shadow : 0 0 10px #ffffff;}
}
@-webkit-keyframes neon
{
	from {text-shadow : 0 0 0 #ffffff;}
	to {text-shadow : 0 0 10px #ffffff;}
}