:root {
  --purple: #2a1e4b;
  --green: #20db79;
}   
    
@keyframes bounce {
    0%, 20%, 50%, 80%, 100%  { transform:translateY(0);-webkit-transform:translateY(0);  }
    40%  {transform:translateY(-30px);-webkit-transform:translateY(-30px);}
    60%  {transform:translateY(-15px);-webkit-transform:translateY(-15px);}
}


	
	body {
/*
		background-color: #23008c;
		color:white;
*/
	}
	
	.container-fluid {
    	padding: 0px;
	}
	
	@media (max-width: 797px) {
	    body { 
	        padding-left: 0px;
	        padding-right: 0px;
	    }
	}
	
	section {
		padding:40px;
	}
	
	section div.section-wrap {
		width:100%;
		max-width: 1200px;
		margin:0 auto;
	}
	
	section a {
		color: var(--green);
		text-decoration: none;
	}
	
	section a:hover {
		color: var(--green);
		text-decoration: underline;
	}
	
	#main {
		background-color:  var(--purple);
		width:100%;
		overflow: hidden;
		position: relative;
/* 		z-index: -101; */
		text-align: center;
		top:0;
		padding: 0;
		min-height: 600px;
	}

	#main video {
	    -webkit-transform: translateX(-50%) translateY(-50%);
	    -moz-transform: translateX(-50%) translateY(-50%);
	    -ms-transform: translateX(-50%) translateY(-50%);
	    -o-transform: translateX(-50%) translateY(-50%);
	    transform: translateX(-50%) translateY(-50%);
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    min-width: 100%;
	    min-height: 100%;
	    width: auto;
	    height: auto;
	    z-index: 1;
	}
  
	#main .overlay {

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2a1e4b+0,2a1e4b+25,2a1e4b+90,2a1e4b+100&0.5+0,0+25,0+90,0.5+100 */
	background: -moz-linear-gradient(top,  rgba(42,30,75,0.5) 0%, rgba(42,30,75,0) 25%, rgba(42,30,75,0) 90%, rgba(42,30,75,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(42,30,75,0.5) 0%,rgba(42,30,75,0) 25%,rgba(42,30,75,0) 90%,rgba(42,30,75,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(42,30,75,0.5) 0%,rgba(42,30,75,0) 25%,rgba(42,30,75,0) 90%,rgba(42,30,75,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#802a1e4b', endColorstr='#802a1e4b',GradientType=0 ); /* IE6-9 */


		position: absolute;
		top:0;left:0;bottom:0;right:0;
		z-index: 10;
	}
	
	
	#main .logo {
		top:45px;
		position: absolute;
		z-index: 20;
		left:50%;
		width: 100%;
		display: none;
	}
	
	#main .logo img {
		max-width: 100%;
		position: relative;
		left:-50%;
		width: 200px;
	}
	
	#main .game-logo {
		bottom:180px;
		position: absolute;
		z-index: 20;
		left:50%;
		width: 100%;
	}
	
	#main .game-logo img {
		max-width: 90%;
		position: relative;
		left:-50%;
		width: 300px;
	}
	
	#main .main-store-btns {
		position: absolute;
		bottom:100px;
		text-align: center;
		left:0;right:0;
		width:100%;
		z-index: 200;
	}
	
	#main .main-store-btns img {
		margin:0 10px;
		height:60px;
		max-width: 40%;
	}
	
	#main .more-games {
		position: absolute;
		height:70px;
		bottom:0;left:0;right:0;
		width: 100%;
		line-height: 70px;
		color:white;
		z-index: 12;
		/* background-color: rgba(42,30,75,0.3); */
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		opacity: 1;
	}

	#main .more-games.showing {
		opacity: 1;
	}
	
	#main .more-games.hiding {
		opacity: 0;
	}
	
	.bounce {
	  animation:bounce 2s infinite;
	  -webkit-animation:bounce 2s infinite;
	}
	
	#divider {
		background-color: var(--green);
	}
	
	#scroll {
		background-color: var(--green);
		color: var(--purple);
		padding: 0; height:70px;text-align: center;line-height: 70px;
	}
	
	h1 { font-family: 'Varela Round', sans-serif;font-weight: bold; }
	
	.umbrella-nav {
		font-family: 'Varela Round', sans-serif;
		font-size: 23px;
		height:70px;width:100%;
		position: absolute;
		top:0;left:0;right:0;
 		background-color: rgba(0,0,0,0.3);
		z-index: 500;
		text-align: center;
		
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	
	.umbrella-nav ul {
		list-style: none;
		padding:0;
	}
	
	.umbrella-nav ul li {
		display: inline-block;
		line-height: 70px;
	}
	
	.umbrella-nav a,.umbrella-nav a:visited {
		color:white;
		text-decoration: none !important;
		margin:0 20px;
	}
	
	.umbrella-nav a:hover, .umbrella-nav a:active {
		text-decoration: none;
		color: var(--green);
	}
	
	.nav-clear {
		background-color: none;
		position: absolute;
		border:none;
	}
	
	.nav-top, .nav-clear .nav-top  {
		display: inline-block;
	}
	
	.nav-top li, .nav-clear .nav-top li  {
		line-height: 70px;
	}
	
	.nav-scroll {
		background-color: var(--purple);
		position: fixed;
/* 		border-bottom: 6px solid var(--green); */
	}
	
	.nav-scroll .nav-top  {
		display: inline-block;
	}
	
	.nav-scroll li {
		line-height: 80px;
	}
	
	nav .logo {
		width: 110px;
		margin-top: -20px;
	}
	
	nav .badge {
		font-size: 11px;
		background-color: var(--green);
		
	}
	
	#games {
		background-color: #544283;
		color:white;
	}
	
	.game {
		margin-bottom: 20px;
	}
	
	.game-banner {
		position: relative;
		background-position: center center;
		background-size: cover;
		height: 200px;
		overflow: hidden;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	
	.game img {
		
	}
	
	.game-store-btns {
		margin-top:0px;
		background-color: black;
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
		padding: 12px;
		text-align: center;
	}
	
	.game-store-btns small {
		display: none;
	}
	
	.game-store-btns img {
		width:32%;
/* 		float: left; */
		margin: 0 1.3%;
	}
	
	.game-store-btns .unavailable img {
		opacity: 0.3;
	}
	
	#contact {
		background-color: var(--purple);
		color:white;
		text-align: center;
		font-size: 14px;
		color:#a892b7;
	}
	
	#contact a {
		color: var(--green);
		text-decoration: none;
	}
	
	#contact a:hover {
		color: white;
		text-decoration: none;
	}

	
	.cta-btn {
		display: inline-block;
		padding:10px 20px;
		border: 2px solid var(--green);
		color: var(--green) !important;
		font-size: 30px;
		border-radius: 10px;
		margin-top: 10px;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	
	.cta-btn:hover {
		color: white !important;
		background-color:  var(--green);
		text-decoration: none;
	}
	
	
	.text-center-xs {
    	text-align: center;
	}
	
	.comingsoon {
		display: block;
		text-align: center;
		color:#ccc;
		font-size: 11px;
	}
	

	
	/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .text-center-sm {
        text-align: center;
    }
    
    .full-width-sm {
		width:100%;
	}
	
	#main .logo {
		top:30px;
		width:140px;
		display: block;
	}
	
	#main .game-logo {
		top:120px;
	}
	
	#main .game-logo img {
		width: 600px;
	}
	
	#main .main-store-btns {
		bottom:50px;
	}
	
	.umbrella-nav {
		font-size: 	14px;
		letter-spacing: -1px;
		height:40px;
	}
	
	.umbrella-nav ul li {
		line-height: 40px;
		font-weight: bold;
	}
	
	nav .badge {
		display: none;
	}
	
	.umbrella-nav a,.umbrella-nav a:visited {
		margin:0 10px;
	}
	
	.nav-top {
		display: none !important;
	}
	
	#main .more-games {
		height: 40px;
		line-height: 40px;
	}
	
	#main .more-games img {
		height:20px !important;
	}
	
	#main .main-store-btns img {
		height:auto;
		max-width: 40%;
	}

	
}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
    .text-center-md {
        text-align: center;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
    .text-center-lg {
        text-align: center;
    }
}