/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

[hidden], template {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a {
    background: 0 0;
}

    a:focus {
        outline: thin dotted;
    }

    a:active, a:hover {
        outline: none;
    }

b, strong {
    font-weight: 700;
}

small {
    font-size: 88.8888%;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

/* Viewport resizing */
@-webkit-viewport {
    width: device-width;
    zoom: 0.5;
}

@-moz-viewport {
    width: device-width;
    zoom: 1.0;
}

@-ms-viewport {
    width: device-width;
    zoom: 1.0;
}

@-o-viewport {
    width: device-width;
    zoom: 1.0;
}

@viewport {
    width: device-width;
    zoom: 1.0;
}

/**
 * Box model adjustments
 * `border-box`... ALL THE THINGS - http://cbrac.co/RQrDL5
 */

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Add a bottom margin to elements that typically need it */
address,
blockquote,
dl,
fieldset,
figure,
form,
legend,
menu,
ol,
p,
pre,
summary,
table,
ul {
    margin: 0 0 1em;
}

::-moz-selection {
    background: #4DDAE1; /* 1 */
    text-shadow: none; /* 2 */
    color: #fff;
}

::selection {
    background: #4DDAE1; /* 1 */
    text-shadow: none; /* 2 */
    color: #fff;
}

    /* Change `background` for text selections when browser is unfocused */
    ::selection:window-inactive {
        background: #dedede;
    }

/* Remove `background` on images when selected */
img::selection {
    background: transparent;
}

img::-moz-selection {
    background: transparent;
}

html {
    font-size: 100%;
    height: 100%;
}

/* main */

html,
body {
    height: 100%;
}

body {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.325em;
    font-weight: 300;
    text-align: center;
    line-height: 1.3;
    color: #fff;
    min-height: 100%;
    overflow-x: hidden;
    position: relative;
	background: #000;

}

#wrap:before	{
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url("../img/bg-orange.jpg") no-repeat center center;
	/*background: url("../img/bg.jpg") no-repeat center center;*/
	background-size: cover;
	opacity: 0.5;
	z-index: -1;
}

section{
	position: relative;
	height: auto;
}

div.inner	{
	margin: 0 auto;
	padding: 0 2em;
	max-width: 50em;
}

img.logo	{
	margin: 0;
	padding: 3em 0 0.5em;
	display: inline-block;
}

p	{
	color: #d9d9d9;
}

p .btn	{
	margin-left: 0.35em;
}

a {
    text-decoration: none;
    color: #E1884D;
    transition: color 150ms ease-out;
    -webkit-transition: color 150ms ease-out;
    -moz-transition: color 150ms ease-out;
    -ms-transition: color 150ms ease-out;
    -o-transition: color 150ms ease-out;
}

    a:hover {
        color: #4DDAE1;
    }

    a:focus {
        outline: none;
    }

/* buttons */

.btn	{
	height: 2.5em;
	line-height: 2.25em;
	border: thin solid #E1884D;
	padding: 0 0.65em;
	display: inline-block;
	
	vertical-align: middle;
    transition: border 150ms ease-out;
    -webkit-transition: border 150ms ease-out, color 150ms ease-out;
    -moz-transition: border 150ms ease-out, color 150ms ease-out;
    -ms-transition: border 150ms ease-out, color 150ms ease-out;
    -o-transition: border 150ms ease-out, color 150ms ease-out;
}
.btn:hover	{

	color: #4DDAE1;
	border-color: #4DDAE1;
}
.light	{
	font-weight: 200;
}	

.inline {
    display: inline-block;
    width: auto;
}

.align-center	{
	text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

em	{
	font-weight: 300;
	font-style: normal;
}

h1,
h2,
h3,
h4 {
    margin: 0.5em 0;
    font-weight: 400;
    line-height: 1.3;
	position: relative;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2.125em;
}

h3 {
    font-size: 1.75em;
}

h4	{
    font-size: 1.25em;
}

/* Clear floats */
.clear {
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
    width: 0;
    height: 0;
}

/* Clearfix to contain floats */

.cf:before,
.cf:after {
    display: table; /* 1 */
    content: " "; /* 2 */
}

.cf:after {
    clear: both;
}

img {
    vertical-align: middle; /* 1 */
    -ms-interpolation-mode: bicubic;
	max-width: 100%;
}

header	{
	padding: 0 0 1em;
}

p.more	{
	margin-top: 1.5em;
	padding: 1em 0;
	background: rgba(0,0,0,0.25);
	border: thin solid rgba(255,255,255,0.05);
	border-left: 0;
	border-right: 0;
}

#games {}

#games h1,
#games h2,
#games h3	{
	padding: 0.5em 0;
	margin: 0;
}

#games ul	{
	list-style: none;
	margin: 0;
	padding: 0 0 2em;
	line-height: 1.5;
}
#games ul > li	{
	width: 25%;
	float: left;
    color: #E1884D;
}	

/* sticky footer */

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

#wrap {
	min-height: 100%;
}

#main {
	overflow:auto;
	padding-bottom: 12em; /* must be same height as the footer */
}  

footer {
	position: relative;
	margin-top: -12em; /* negative value of footer height */
	height: 12em;
	clear: both;
} 

footer div.inner	{
	padding-top: 1.5em;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/* Opera Fix */
body:before {/* thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/* center height */

.vertical {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.fadein {
    -webkit-animation: fadein 400ms ease-in-out;
    -moz-animation: fadein 400ms ease-in-out;
    -ms-animation: fadein 400ms ease-in-out;
    -o-animation: fadein 400ms ease-in-out;
    animation: fadein 400ms ease-in-out;
}

@keyframes fadein {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

@-ms-keyframes fadein {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 37.5em) {
	#games ul > li	{
		width: 100%;
		float: none;
	}	
	.btn	{
		margin-top: 1em;
		width: 100%;
	}
}