/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

html {
	width: 100%;
	height: 100%;
	background: #000;
 }

body {
	font-family: 'Source Sans Pro', sans-serif;	font-style: normal;
	font-size: 1em;
	line-height: 1.5;
	color: #fff;
}

h1 {
	font-family: 'creativersebold', sans-serif;
	text-transform: uppercase;
	font-size: 4em;
	color: #fff;
	line-height: 1.125;
	margin: 0 0 .5em 0;
	padding: 0;
	font-weight: 200;
	letter-spacing: 3px;
}

h2 {
	font-family: 'Source Sans Pro', sans-serif;	
	font-size: 2.5em;
	line-height: 1.125;
	margin: 0 0 .5em 0;
	padding: 0;
}

h3 {
	font-family: 'Source Sans Pro', sans-serif;	
	font-size: 2.5em;
	margin: 0 0 .5em 0;
	padding: 0;
}

h4 {
	font-family: 'Source Sans Pro', sans-serif;	
	font-size: 1.5em;
	line-height: 1.125;
	margin: 0 0 .5em 0;
	padding: 0;
}

h5 {
	font-family: 'Source Sans Pro', sans-serif;	
	font-size: 1.5em;
	line-height: 1.125;
	margin: 0 0 .5em 0;
	padding: 0;
}

p {
	margin: 0 0 1em 0;
	font-size: 1.125em;
}

img {
	max-width: 100%;
}

a {
	outline: none;
	text-decoration: none;
	color: #fff;
	-o-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
	-ms-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
	-moz-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
	-webkit-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
	transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out, opacity .2s ease-in-out;
}

a:hover {
	color: #dcdcdc;
}

a:focus{
    outline:0;
}

::-moz-selection {
    background: #ffdb98;
    text-shadow: none;
}

::selection {
    background: #ffdb98;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}


/* ==========================================================================
   NAV STYLES
   ========================================================================== */

#mobileheader {
	display: none;
}

header {
	position: relative;
	z-index: 10;
	width: 100%;
	background: rgba(18,8,17,1);
	background: -moz-linear-gradient(rgba(40, 40, 40, 1) 10%, rgba(0, 0, 0, 1) 100%);
	background: -webkit-gradient(color-stop(10%, rgba(40, 40, 40, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
	background: -webkit-linear-gradient(rgba(40, 40, 40, 1) 10%, rgba(0, 0, 0, 1) 100%);
	background: -o-linear-gradient(rgba(40, 40, 40, 1) 10%, rgba(0, 0, 0, 1) 100%);
	background: -ms-linear-gradient(rgba(40, 40, 40, 1) 10%, rgba(0, 0, 0, 1) 100%);
	background: linear-gradient(rgba(40, 40, 40, 1) 10%, rgba(0, 0, 0, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#000000', GradientType=1);
	/*box-shadow: 
		0px 3px 0px rgb(39, 92, 218),
		0px 5px 0px rgb(91, 80, 212);*/
}

.headerContainer {
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 6.75em;
	margin: 0 auto;
	font-weight: 400;
}

.logo {
	margin-top:-1em;
}

.logo a.smallLogo {
	display: none;
}

.desktopNav {
	position: absolute;
	width: 90%;
	margin: 0 5%;
}

.mediafaq {
	position: absolute;
	right: 170px;
	top: 2.75em;
}

.mediafaq a {
	color: #fff;
	margin-right: 1em;
	font-family: 'creativersebold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.625em;
}

.mediafaq a:hover {
	color: #ae8fdd;
}	

.social {
	position: absolute;
	right: 0;
	top: 1.5em;
	font-size: 1.75em;
}

.social a {
	color: #fff;
	margin-left: 1em;
}

.social a:hover {
	color: #ae8fdd;
}	

.mobileNav {
	display: none;
}


@media screen and (max-width: 1200px) {

/* ==========================================================================
   SMALLER SCREEN NAV
   ========================================================================== */
	
	.mediafaq {
		right:120px;
	}
	.mediafaq a {
		font-size:1.5em;
		margin-right:.9em;
	}
	.social {
		right:-16px;
		top:1.75em;
		font-size:1.55em;
	}
}



@media screen and (max-width: 1024px) {

/* ==========================================================================
   MOBILE/TOUCH NAV
   ========================================================================== */

	.desktopNav {
		display: none;
	}
	
	.logo {
		text-align: left;
		margin-left: 5%;
	}

	.mobileNav {
		display: block;
		float: right;
		text-align: right;
		margin: 2em 5% 0 0;
	}	

	.mobileNav p {
		display: block;
		font-family: 'creativersebold', sans-serif;
		text-transform: uppercase;		
		background: #5e50d4;
		font-size: 1.75em;
		border-radius: 2em;
		padding: .1em 1em;
		border: 4px solid #FFF;
		text-shadow: 
			0 1px 0 #a2a5cc,
			0 2px 0 #6c6da7,
			0 3px 0 #545597,
			0 5px 10px rgba(0,0,0,.25);
	}
	
	.mobileNav #trigger-overlay:hover p, .mobileNav #trigger-overlay:hover p .icon-menu {
		cursor: pointer;
		background: #34236A;
		-o-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
		-ms-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
		-moz-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
		-webkit-transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out;
		transition: color .2s ease-in-out, border .2s ease-in-out, background .2s ease-in-out, opacity .2s ease-in-out;
	}

	.mobileNav #trigger-overlay:active p, .mobileNav #trigger-overlay:active p .icon-menu {
		box-shadow: 0px 3px 0px rgba(0,0,0,.4);
		-o-transition: box-shadow .1s ease-in-out;
		-ms-transition: box-shadow .1s ease-in-out;
		-moz-transition: box-shadow .1s ease-in-out;
		-webkit-transition: box-shadow .1s ease-in-out;
		transition: box-shadow .1s ease-in-out;
	}
}

@media screen and (max-width: 740px) {
	.logo {
		margin-left: 5%;
		width: 340px;		
	}
	.mobileNav {
		margin: 2.25em 5% 0 0;
	}

	.mobileNav p {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 640px) {
	.logo {
		margin-left: 5%;
		width: 320px;		
	}
	.mobileNav {
		margin: 2.45em 5% 0 0;
	}	

	.mobileNav p {
		font-size: 1.375em;
		border: 3px solid #FFF;
	}	
}

@media screen and (max-width: 520px) {
	.headerContainer {
		height: 4.85em;
	}
	.logo a.smallLogo {
		display: inherit;
	}
	.logo {
		width: 100%;
		text-align: center;
		margin: 0;
		margin-top:-.5em;
	}
	.mobileNav {
		margin: 0 0 0 0;
	}
	.mobileNav p {
		position: absolute;
		z-index: 15;
		font-size: 1.125em;
		border: 2px solid #FFF;
		padding: .1875em .5em;
		right: 2%;
		top: 1.75em;
	}
	.hideme {
		display: none;
	}
}


/* ==========================================================================
   FULLSCREEN MENU
   ========================================================================== */

/* Overlay style */

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 101;
	background: rgba(72,73,143,1);
	background: -moz-linear-gradient(rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgb(199, 182, 217,1) 100%);
	background: -webkit-gradient(color-stop(0%, rgba(56,38,72,1)), color-stop(60%, rgba(144,96,226,1)), color-stop(100%, rgba(199, 182, 217,1)));
	background: -webkit-linear-gradient(rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgba(199, 182, 217,1) 100%);
	background: -o-linear-gradient(rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgba(199, 182, 217,1) 100%);
	background: -ms-linear-gradient(rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgba(199, 182, 217,1) 100%);
	background: linear-gradient(rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgba(199, 182, 217,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#382648', endColorstr='#C7B6D9', GradientType=1);
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(/img/cross.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

/* Menu style */
.overlay nav {
	position: absolute;
	width: 100%;
	text-align: left;
	left: 0;
	top: 50%;
	height: 60%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.overlay ul {
	list-style: none;
	width: 90%;
	padding: 0 0 0 10%;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.overlay ul li {
	display: block;
	height: 20%;
	height: calc(100% / 6);
	min-height: 54px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.overlay ul li a {
	font-family: 'creativersebold', sans-serif;
	text-transform: uppercase;		
	font-size: 2.75em;
	font-weight: 200;
	display: block;
	color: #fff;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
	text-shadow: 
		0 1px 0 #a2a5cc,
		0 2px 0 #888cba,
		0 3px 0 #6c6da7,
		0 4px 0 #6263a2,
		0 5px 0 #545597,
		0 3px 5px rgba(0,0,0,.2);
}

.overlay ul li a:active,
.overlay ul li a:focus {
	color: rgba(230,230,230,.88);
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
	text-shadow: 0 1px 0 #8e5428,
               0 2px 0 #855028,
               0 3px 0 #7a4925,
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.overlay ul li a span {
	margin-right: .25em;
}

/* Effects */
.overlay-scale {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
	transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}

.overlay-scale.open {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);	
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
}

@media screen and (max-width: 600px) {
	.overlay .overlay-close {
		width: 40px;
		height: 40px;
	}
	.overlay ul li a {
		width: 100%;
		font-size: 2em;
	}
}

@media screen and (max-width: 450px) {
	.overlay ul li a {
		width: 100%;
		font-size: 1.5em;
	}
}


/* ==========================================================================
   VIDEO HERO
   ========================================================================== */

.videoStill {
	display: none;
}

.video {
	position: relative;
	width: 100%;
	height: 950px;
	text-align: center;
}

@media screen and (max-width: 1650px) {
	.video  {
		margin-top:-100px;
	}
}

@media screen and (max-width: 1200px) {
	.video  {
		height: 700px;
		margin-top:0px;
	}
}

@media screen and (max-width: 900px) {
	.video  {
		display: none;
	}
	.videoStill {
		display: inherit;
		width: 100%;
		background-image: url(/img/temple.jpg);
		background-position: center top !important;
		background-size: 100% auto !important;
		background-repeat: no-repeat;
		height: 700px;
	}
}

@media screen and (max-width: 900px) {
	.videoStill {
		height: 650px;
	}
}

@media screen and (max-width: 768px) {
	.videoStill {
		height: 540px;
	}
}

@media screen and (max-width: 600px) {
	.videoStill {
		height: 450px;
	}
}

@media screen and (max-width: 500px) {
	.videoStill {
		height: 390px;
	}
}

@media screen and (max-width: 430px) {
	.videoStill {
		height: 290px;
	}
}


/* ==========================================================================
   GET THE GAME
   ========================================================================== */

.getTheGameContainer {
	position: relative;
	width: 100%;
}

.getTheGame {
	position: absolute;
	width: 100%;
	height: 1000px;
	margin: -8em 0 0 0;
}

@media screen and (max-width: 2100px) {
	.getTheGame {
		margin: -7em 0 0 0;
	}
}

@media screen and (max-width: 1500px) {
	.getTheGame {
		margin: -5em 0 0 0;
	}
}

.blocksBackground {
	background-position: center top !important;
	background-size: 100% auto !important;
	background-repeat: no-repeat;
	opacity: 1;
}
.height1000px {
	height: 1000px;
}
.getTheGameButton {
	position: absolute;
	top: -125px;
	left: 50%;
}

.getTheGameButton a {
	position: absolute;
	width: 440px;
	margin-left: -226px;
	top: 0;
	display: block;
	z-index: 1;
	color: #fff;
	text-align: center;
	font-family: 'creativersebold', sans-serif;
	text-transform: uppercase;		
	background: #5e50d4;
	border-radius: 1em;
	font-size: 2.75em;
	padding: .25em 0;
	letter-spacing: 1px;
	border: 6px solid #FFF;
	box-shadow:	0px 7px 0px rgba(53,35,106,1);
	text-shadow: 
		0 1px 0 #a2a5cc,
		0 2px 0 #888cba,
		0 3px 0 #6c6da7,
		0 4px 0 #6263a2,
		0 5px 0 #545597,
		0 1px 3px rgba(0,0,0,.3),
		0 3px 5px rgba(0,0,0,.25),
		0 5px 10px rgba(0,0,0,.2),
		0 10px 10px rgba(0,0,0,.2);	
	}

.getTheGameButton a:hover {
	box-shadow: 
		0px 6px 0px rgba(53,35,106,.9),
		0 18px 20px rgba(0,0,0,.5),
	    inset 2px 0 20px #554191,
	    inset -2px 0 20px #554191;
	border-radius:.9em;
	font-size: 2.95em;
	padding:.2em 0;
	-o-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
	-ms-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
	-moz-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
	-webkit-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
	transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
}

.getTheGameButton a:active {
	box-shadow: 
		0px 6px 0px rgba(53,35,106,.9),
		0 12px 15px rgba(0,0,0,.8),
	    inset 10px 0 30px #A66FFF,
	    inset -10px 0 30px #A66FFF;
	-o-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
	-ms-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
	-moz-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
	-webkit-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
	transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out;
}

@media screen and (max-width: 1024px) {
	.getTheGameButton {
		top: 60px;
	}
	.getTheGameButton a {
		width: 380px;
		font-size: 2.25em;
		border: 5px solid #FFF;
		margin: -100px 0 0 -195px;
		padding: .25em 0;
	}
	.getTheGameButton a:hover {
		font-size: 2.25em;
	}
}

@media screen and (max-width: 500px) {
	.getTheGameButton {
		top: 60px;
	}
	.getTheGameButton a {
		width: 280px;
		font-size: 1.75em;
		margin: 0 0 0 -145px;
	}
	.getTheGameButton a:hover {
		font-size: 1.75em;
	}
}


/* ==========================================================================
   MESSAGING
   ========================================================================== */

.messaging {
	position: relative;
	width: 100%;
	max-width: 740px;
	text-align: center;
	margin: 14em auto 0 auto;
}

.messaging h1 {	
	text-shadow: 
		0 1px 0 #a2a5cc,
		0 2px 0 #888cba,
		0 3px 0 #6c6da7,
		0 4px 0 #6263a2,
		0 5px 0 #545597,
		0 6px 0 #41428b,
		0 6px 1px rgba(0,0,0,.1),
		0 0 5px rgba(0,0,0,.1),
		0 1px 3px rgba(0,0,0,.3),
		0 3px 5px rgba(0,0,0,.2),
		0 5px 10px rgba(0,0,0,.25),
		0 10px 10px rgba(0,0,0,.2),
		0 20px 20px rgba(0,0,0,.15);
}

.messaging p {
	font-size: 1.4375em;
	font-weight:600;
}

@media screen and (max-width: 1024px) {
	.messaging {
		width: 80%;
		max-width: none;
		margin: 10em 10% 0 10%;
	}
	.messaging h1 {
		font-size: 3em;
	}
	.messaging p {
	font-size: 1.25em;
	}
}

@media screen and (max-width: 740px) {
	.messaging {
		width: 88%;
		margin: 10em 6% 0 6%;
	}
}

@media screen and (max-width: 640px) {
	.messaging h1 {
		font-size: 2.8em
	}
	.messaging p {
		font-size: 1.125em;
	}
}

@media screen and (max-width: 640px) {
	.messaging {
		margin: 6em 6% 0 6%;
	}
}


/* ==========================================================================
   HIGHLIGHT BOXES
   ========================================================================== */

.highlightBoxesContainer {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 6em auto 0 auto;
}

.highlightBoxesContainer * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 0;
	min-width: 0;
}

.highlightBoxes {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 1.25em;
}

.highlightBoxes.justify-edge {
    padding: 1.25em 0;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}

.box {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-moz-box-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
	background: #ccc;
	padding: 1.5em 1.5em 1.75em 1.5em;
	margin: .5em;
	background: rgba(72,73,143,1);
	background: -moz-linear-gradient(bottom, rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgb(199, 182, 217,1) 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(56,38,72,1)), color-stop(60%, rgba(144,96,226,1)), color-stop(100%, rgba(199, 182, 217,1)));
	background: -webkit-linear-gradient(bottom, rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgba(199, 182, 217,1) 100%);
	background: -o-linear-gradient(bottom, rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgba(199, 182, 217,1) 100%);
	background: -ms-linear-gradient(bottom, rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgba(199, 182, 217,1) 100%);
	background: linear-gradient(to top, rgba(56,38,72,1) 0%, rgba(144,96,226,1) 60%, rgba(199, 182, 217,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C7B6D9', endColorstr='#382648', GradientType=1 );
}

.box img {
	margin: -6.25em 0 0 0;
}

.box h1 {
	font-size: 1.875em;
	letter-spacing: 0.02em;
	margin:0 auto;
}

.box h2 {
	font-family: 'creativersebold', sans-serif;
	font-size:1.25em;
	margin:0 auto;
	letter-spacing:.15px;
}

.boxLeft {
	width:45%;
	float:left;
	padding-top:1em;
}

.boxRight {
	width:45%;
	float:right;
	padding-top:1em;
}

input[type=text] {
	width: 100%;
	padding: 10px 12px;
	margin: 4px 0;
	box-sizing: border-box;
}

input[type=email] {
	width: 100%;
	padding: 10px 12px;
	margin: 4px 0;
	box-sizing: border-box;
}

input[type=button], input[type=submit], input[type=reset] {
	font-family: 'creativersebold', sans-serif;
	color: white;
	padding: 14px 32px;
	letter-spacing:.5px;
	text-decoration: none;
	margin-top:17px;
	font-size:1.25em;
	cursor: pointer;
	background: #5e50d4;
	border-radius: 1em;
	border: 2px solid #FFF;
}

@media screen and (max-width: 1280px) {
	.highlightBoxesContainer {
		width: 92%;
		max-width: none;
		margin: 6em 4% 0 4%;
	}
}

@media screen and (max-width: 740px) {
	.highlightBoxes {
    	display: inline;
	}
	.box {
  		margin: 2em .5em .5em .5em;
	}
	.boxLeft {
		width:100%;
		float:none;
	}

	.boxRight {
		width:100%;
		float:none;
	}
}

@media screen and (max-width: 640px) {
	.box h1 {
		font-size:1.65em;
	}
	.box p {
  		font-size: 1em;
	}
}


/* ==========================================================================
   Get The Game Button 2
   ========================================================================== */

.bottom {
	position: absolute;
	width: 100%;
	height: 400px;
	margin: 80px 0 0 0;
}

.blocksBackgroundBottom {
	background-image: url(/img/blocksBackgroundBottom.jpg);
	background-position: center bottom !important;
	background-size: 100% auto !important;
	background-repeat: no-repeat;
	opacity: .67;
	max-height: 500px;
	overflow: hidden;
	border-bottom: 3px solid rgba(255,255,255,.75);
}

.height500px {
	height: 500px;
}

.getTheGameButton2 {	
	position: absolute;
	top: 0;
	width: 440px;
	margin-left: -220px;
	left: 50%;
}

.getTheGameButton2 img {	
	position: absolute;
	text-align: center;
	z-index: 50;
}

.getTheGameButton2 a {
	position: absolute;
	width: 440px;
	top: 280px;
	display: block;
	z-index: 100;
	color: #fff;
	text-align: center;
	font-family: 'creativersebold', sans-serif;
	text-transform: uppercase;		
	background: #5e50d4;
	border-radius: 1em;
	font-size: 2.75em;
	padding: .25em 0;
	letter-spacing: 1px;
	border: 6px solid #FFF;
	box-shadow:	0px 7px 0px rgba(53,35,106,1);
	text-shadow: 
		0 1px 0 #a2a5cc,
		0 2px 0 #888cba,
		0 3px 0 #6c6da7,
		0 4px 0 #6263a2,
		0 5px 0 #545597,
		0 1px 3px rgba(0,0,0,.3),
		0 3px 5px rgba(0,0,0,.25),
		0 5px 10px rgba(0,0,0,.2),
		0 10px 10px rgba(0,0,0,.2);	
	}	
	
.getTheGameButton2 a:hover {
	box-shadow: 
		0px 6px 0px rgba(53,35,106,.9),
		0 18px 20px rgba(0,0,0,.8),
	    inset 2px 0 20px #554191,
	    inset -2px 0 20px #554191;
	border-radius:.9em;
	font-size: 2.95em;
	padding:.2em 0;
	-o-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out, font-size .1s ease-in-out;
	-ms-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out, font-size .1s ease-in-out;
	-moz-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out, font-size .1s ease-in-out;
	-webkit-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out, font-size .1s ease-in-out;
	transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out,  font-size .1s ease-in-out;
}	

.getTheGameButton2 a:active {
	box-shadow:
		0px 6px 0px rgba(53,35,106,.9),
		0 18px 20px rgba(0,0,0,.8),
	    inset 10px 0 30px #A66FFF,
	    inset -10px 0 30px #A66FFF;
	-o-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out, font-size .1s ease-in-out;
	-ms-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out, font-size .1s ease-in-out;
	-moz-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out, font-size .1s ease-in-out;
	-webkit-transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out, font-size .1s ease-in-out;
	transition: box-shadow .1s ease-in-out, background .1s ease-in-out, text-shadow .1s ease-in-out,  font-size .1s ease-in-out;
}	


@media screen and (max-width: 1024px) {
	.bottom {
		margin: 40px 0 0 0;
	}
	.blocksBackgroundBottom {
	  background-size: 150% auto !important;
	}
	.getTheGameButton2 {
		top: 0px;
	}
	.height500px {
		height: 400px;
	}
}

@media screen and (max-width: 540px) {
	.getTheGameButton2 {
		top: 0;
		width: 280px;
		margin: 0 0 0 -140px;
	}
	.getTheGameButton2 a {
		position: absolute;
		padding: .25em 0;
		font-size: 1.75em;
		width: 280px;
		top: 180px;
		border: 4px solid #FFF;
		box-shadow: 0px 5px 0px rgba(53,35,106,.9);
		text-shadow: 
			0 1px 0 #a2a5cc,
			0 2px 0 #888cba,
			0 3px 0 #6c6da7,
			0 4px 0 #6263a2,
			0 5px 0 #545597,
			0 1px 3px rgba(0,0,0,.3),
			0 3px 5px rgba(0,0,0,.25),
			0 5px 10px rgba(0,0,0,.2),
			0 10px 10px rgba(0,0,0,.2);	
	}
	.height500px {
		height: 360px;
	}
	.getTheGameButton2 a:hover {
		font-size: 1.75em;
	}
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
	width: 84%;
	padding: 600px 8% 130px 8%;
	margin: 1.75em auto 0 auto;
	font-size: .8125em;
	max-width: 1200px;
	font-weight: 400;
	color: #ccc;
	line-height: 1.5;
	z-index:101;
}

.footerTop {
	width: 100%;
	float: left;
	margin: 0 0 2em;
	display: block;
}

.footerLogo {
	width: 50%;
	float: left;
}

.footerLinks {
	width: 50%;
	float: left;
	text-align: right;
	padding-top: 1.5em;
}

.footerLinks a {
 	color: #fff;
 	font-size: 1.25em;
 	text-transform: uppercase;
 	letter-spacing: 1px;
 	margin-left: 2em;
}

.footerLinks a:hover {
 	color: #b6b8d9;
}

.copyright {
	width: 100%;
	float: left;
	text-align: center;
	font-size: .9375em;
	opacity: .67;
}

@media screen and (max-width: 1024px) {
	footer {
		width: 84%;
		padding: 500px 8% 200px 8%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 740px) {	
	.footerLogo {
	  width: 100%;
	  text-align: center;
	}
	.footerLinks {
	  width: 100%;
	  text-align: center;
	 	padding-top: 1.5em;
	}
	.footerLinks a {
	  margin: 0 3%;
	}
}

@media screen and (max-width: 740px) {	
	footer {
		padding: 460px 8% 200px 8%;
	}
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

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

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}