* {margin: 0; padding: 0; outline: 0;}

a img {border:none;}



body, html {

	font-family: Helvetica, Arial, Verdana, sans-serif;

	color: #E0E0E0;

	font-size: 16px;

	background:#070c12;

	height:100%;

}



a {

	color:white;

	text-decoration: none;

}

a:hover {

  color: #DAF5FF;

}

h1, h2, h3 {

	line-height: .9em;

    padding-right: .3em;

    text-shadow: 1px 1px 1px rgba(0,0,0,.8);

}



h1 {

	font: italic 2.5em sans-serif;

	letter-spacing: -2px;

	line-height: 100%;

	padding: 0;

}



h1.title {

	font-size: 2.5em;

	font-weight: 700;

	color: #6a6a6a;

}



h2 {

	font: italic 1.5em sans-serif;

}



h3 {

	font-size: 20px;

	letter-spacing: -1px;

	line-height: 100%;

}

p {

	margin: 8px 0 15px 0;

}

ol, ul {

	list-style: none;

}

ul

{

	margin:0; padding:0;



}

.hr {

	box-shadow: 0px 0px 54px 0px rgba(107,238,255,1);

	margin: 0;

    border: 0;

    padding: 3px 0;

	background-color:#191225;

	clear:both;

}

hr {

    margin: 0;

    border: 0;

    padding: 3px 0;

	background-color: #211031;

    clear: both;

    box-shadow: 0px 0px 54px 0px rgb(62, 26, 66);

    /* background: url("../../images/layout/divider.0iJrz.gif") no-repeat top center; */

}

.section ul li {

	margin:0; padding:0;



}

.maincontainer {

	overflow: hidden;

}

.clear {

	clear: both;

}



.all-wrapper {

		width: 100%;

		z-index: 10;

		position: relative;

		margin: 0 auto;

		padding: 0;

}





.section {

	width: 100%;

	/*z-index: 10;

	position: relative;*/

	margin: 0 auto;

	padding: 0 0 20px 0;

    float:left;

}





.inner {

	max-width: 960px;

	margin: 0 auto;

	position: relative;

	min-height: 50px;

    margin: 1em auto;

	color: rgba(255,255,255,.9);

    display: block;

    font: 400 1.15em/1.5em Arial,sans-serif;

	text-shadow: 1px 1px 1px rgba(0,0,0,.5);

	text-align: center;

}

.characters {

    max-width: 960px;

    margin: 0 auto;

    position: relative;

    min-height: 50px;

    margin: 1em auto;

    color: rgba(255,255,255,.9);

    display: block;

    font: 400 1.15em/1.5em Arial,sans-serif;

    text-shadow: 1px 1px 1px rgba(0,0,0,.5);

    text-align: left;

}

.characters p {

	line-height: 1.1em;

}

.characters h3 {

	padding: 0 0 12px 0;

}

.characters h1 {

	padding: 0 0 12px 0;

}

.team a {

	text-decoration:underline;

}



/* This is the selector i used for my menu, it needs to be set as position:absolute; */



.navigation {

	position: absolute;

	height: 70px;

	z-index: 100;

	width:100%;

	margin: 0 auto;

	padding: 0;

	background-color: #000;

    background: rgb(0,0,0);

    background: rgba(0,0,0,.9);

	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),0 2px 8px rgba(0,0,0,0.5);

	box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),0 2px 8px rgba(0,0,0,0.5);

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	font-size: 0;

    overflow: hidden;

}



.navigation-wrapper {

	width:60%;

	margin:0 auto;

	height:70px;

    min-width: 300px;

}



.subMenu .inner {

	padding:0;

	font-weight: 400;

}



.subNavBtn {

	font-family: 'Open Sans', sans-serif;

	display: block;

	width: 20%;

    min-width: 100px;

	float: left;

	margin: 2px 0px 0 0;

	text-decoration: none;

	font-size: 14px;

	color: #d9d9d9;

	padding: 20px 15px;

	text-align: center;

	text-decoration: none;

	text-transform: uppercase;

	background-position: right -202px !important;

	color: #a4a4a4;

	display: inline-block;

	font-size: 14px;

	padding: 25px 10px 24px 10px;

	margin: 0 0 0 0px;

	line-height: normal;

}

.active {

	color:#fff;

}

.end {

	margin: 0;

}





/* SECTIONS */

.sTop {

	background:none;

	color:#3d3d3d;

	height: 736px;

}	



.s0 {

	/*background: url('../images/sectionbg.jpg') center top no-repeat;*/

	background: url('../images/FS_Screen_FrontPageGallery_2120x760_CampaignHall.jpg') center top no-repeat;

    background-size: 2102px;

	padding: 0;

	-webkit-background-size: cover;

	-moz-background-size: cover;

    background-size: cover;

	min-height: 100%;

}

.s1 {

	/*background: url('../images/sectionbg.jpg') center top no-repeat;*/

	z-index: -100;

	padding: 0;

}





.s2 {

	background: url('../images/SunkenTemple_BG.jpg') center top no-repeat;

	background-position: auto 29px;

	background-color:#07040B;

	-webkit-background-size: cover;

	-moz-background-size: cover;

    background-size: cover;

	min-height: 100%;

}





.s3 {

	min-height: 600px;

	background: url('../images/Dungeon_BG.jpg') center bottom no-repeat;

	background-color:#09060e;

	-webkit-background-size: cover;

	-moz-background-size: cover;

    background-size: cover;

	min-height: 100%;

}





.s4 {

	min-height: 600px;



}



.s5 {

	min-height: 200px;

}

.s6 {

	min-height: 600px;

	background: url('../images/sectionbg.jpg') center bottom no-repeat;

	z-index: -100;

	-webkit-background-size: cover;

	-moz-background-size: cover;

    background-size: cover;

	min-height: 100%;

}

.s7 {

	min-height: 550px;

	background: url('../images/gamebg.png') center bottom no-repeat;

	z-index: -100;

	background-color:#130c13;

	-webkit-background-size: cover;

	-moz-background-size: cover;

    background-size: cover;

	min-height: 100%;

}

.right {

	float: right;

    width: 100%;

    text-align: right;

}

.left {

	float: left;

    width: 100%;

    text-align: left;

}

.center {

	text-align:center;

	width:100%;

	margin: 0 auto;

}

/* HIDE STUFF */

/*

.navigation {

	display:none;

} 

.section {

	display:none;

} 

*/



/* BETADWARF */

.button-red {

	border-radius: 17px;

	-webkit-box-shadow: inset 0 2px 4px rgba(255,255,255,0.2),inset 0 1px 0 rgba(255,255,255,0.15),0 0 20px rgba(0,0,0,0.2),0 1px 3px rgba(0,0,0,0.3);

	box-shadow: inset 0 2px 4px rgba(255,255,255,0.2),inset 0 1px 0 rgba(255,255,255,0.15),0 0 20px rgba(0,0,0,0.2),0 1px 3px rgba(0,0,0,0.3);

	font-weight: 800;

	font-size: 32px;

	font-size: 3.2rem;

	letter-spacing: -1px;

	padding: 0 40px 20px 40px;

	text-shadow: 0 1px 3px rgba(0,0,0,0.2);

	background-color: #992e00;

	background-image: -webkit-linear-gradient(270deg, rgba(238,90,0,0.33), rgba(61,13,0,0.33));

	-webkit-box-shadow: inset 0 2px 4px rgba(255,255,255,0.2),inset 0 1px 0 rgba(255,255,255,0.15),0 2px 4px rgba(0,0,0,0.34);

	box-shadow: inset 0 2px 4px rgba(255,255,255,0.2),inset 0 1px 0 rgba(255,255,255,0.15),0 2px 4px rgba(0,0,0,0.34);

	color: #fff;

	text-decoration: none;

}

video {

	object-fit: contain;

}

.header-video {

	display: block;

	width: 1940px;

	height: 736px;

	max-width: 1940px;

	position: absolute;

	left: 50%;

	margin-left: -970px;

	-webkit-transition: opacity 2s;

	-moz-transition: opacity 2s;

	-o-transition: opacity 2s;

	transition: opacity 2s;

}

.topimage {

	background: url('../images/topimage.jpg') center top no-repeat;

	height:70px;

}

.topbg {

	background-size: auto 736px;

	padding-bottom: 0;

	height: 100%;

	overflow: hidden;

	position: relative;

}



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

  .topbg {

        background-size: auto 436px;

        background-color: #266a73;

  }

}



.header-wrapper {

	margin: 0 auto;

	position: relative;

	min-height: 50px;

	font-size: 18px;

	font-family: 'Open Sans', sans-serif;

	font-weight: 300;

	overflow: hidden;

    height: 736px;

	padding-bottom: 0;

	padding-top:60px;



}

.header-content {

	margin: 0 auto;

	max-width: 1000px;

	position: relative;

}

.banner-title {

	display: block;

	max-width: 608px;

	-webkit-background-size: contain;

	-moz-background-size: contain;

	-o-background-size: contain;

	background-size: contain;

	text-indent: -999em;

	margin: auto;

	padding-top: 20%;

	height: 0;

	width: auto;

}

.tagline {

	font-family: "Open Sans",sans-serif;

	font-weight:bold;

	font-size: 22px;

	text-align:center;

	color: #f1f3ee;

	text-decoration: none;

	/*text-shadow: 0 0 15px rgba(0,0,0,0.3),0 2px 4px rgba(0,0,0,0.2),0 0 5px rgba(0,0,0,0.3);*/

	/*Glow*/

	text-shadow: 0 0 16px #009cff;

}

.glow {

	color: #f1f3ee;

	/*Glow*/

	text-shadow: 0 0 16px #009cff;

}

.signupbutton {

	clear: left;

	float: left;

	width: 367px;

	height: 103px;

	display: inline;

	font-weight: 800;

	font-size: 26px;

	letter-spacing: -1px;

	text-shadow: 1px 1px 10px #000;

	color: #fff;

	text-decoration: none;

	cursor:pointer;



}

.signupbutton:hover {

	background-position:0 0px !important;

}



.topbannerborder {

	width:100%;

	background: url('../images/bannerborder.png') center top no-repeat;

	background-size: auto 90px;

	height: 90px;

	z-index: 500;

}



.gladdisplay {

	background: url("../images/volcobackturn.png") center center no-repeat;

	overflow:hidden;

    width: 800px;

    height: 439px;

	padding-left:100px;

	position:absolute;

	z-index:-1;

}

.shadow {

	background: url("../images/shadow.png") center center no-repeat;

	-webkit-background-size: 100% 100%;

	background-size: 100% 100%;

	bottom: 0;

	content: ' ';

	height: 100px;

	margin-left: 60px;

	opacity: 0.7;

	position: absolute;

	width: 450px;

	z-index: -1;

}

#partners {

	max-width:900px;

	margin: 0 auto;

	display: inline-block;

}

#partners li{

	display: inline-block;

	text-align: center;

    padding: 10px;

}

#partners ul{

	text-align: center;

}

#paybox {

	text-align:center;

	background: url("../images/paybg.png") center center no-repeat;

	-webkit-background-size: 100% 100%;

	background-size: 100% 100%;

	z-index: -1;

	height:573px;

}

h3.price {

	text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;

	font-size: 62px;

	letter-spacing: -2px;

	font-family: 'Open Sans', sans-serif;

	font-weight: 400;

	margin:0;

	padding:0;

}

.footer {

	text-align: center;

	width: 100%;

	min-height: 100%;

	height:100%;

	float: left;

	background: url("../images/Ghost_BG.jpg") top no-repeat;

	

	-webkit-background-size: cover;

	-moz-background-size: cover;

    background-size: cover;

	min-height: 100%;

}

.navigation-list li {

display: inline-block;

}

.social-media-icons li:first-child a {

margin-left: 0;

}

.social-media-icons a:hover {

opacity: 1;

}

.social-media-icons a.facebook {

background: url("../images/facebook.png") center center no-repeat;

background-color: #001B35;

}

.social-media-icons a.twitter {

background: url("../images/twitter.png") center center no-repeat;

background-color: #00393C;

}

.social-media-icons a.youtube {

background: url("../images/youtube.png") center center no-repeat;

background-color: #310000;

}

.social-media-icons a {

	display: inline-block;

	height: 50px;

	width: 50px;

	margin-left: 5px;

	opacity: 0.7;

	text-indent: -9999px;

	-webkit-transition: opacity 0.25s;

	transition: opacity 0.25s;



}

.btn-social {

    display: inline-block;

    width: 50px;

    height: 50px;

    border: 2px solid #fff;

    border-radius: 100%;

    text-align: center;

    font-size: 20px;

    line-height: 45px;

}



.btn:focus,

.btn:active,

.btn.active {

    outline: 0;

}

/* TEAM */



.box-one {

	float: left;

    margin-right: 4%;

	margin-bottom: 4%;

    width: 28%;

	height:540px;

    overflow:hidden;

}   

.box-one p {

	font-size: 0.8em;

	margin:0;

}



.teampic {

	overflow:hidden;

	height: 195px;

    width: 250px;

	border-radius: 5px;

}



.teamname {

	font-family: "Open Sans",sans-serif;

	font-weight:bold;

	font-size: 1em;

	color: #f1f3ee;

	text-decoration: none;

	/*Glow*/

	text-shadow: 0 0 16px #009cff;

	margin:0;

}

.box-two a {

	text-decoration:underline;

}

.box-two {

	float: left;

    margin-right: 4%;

	margin-bottom: 4%;

    width: 46%;

	/*height:360px;*/

}   

.box-two p {

	font-size: 0.8em;

	margin:0;

}



.box-three {

	float: left;

    margin-right: 3%;

	margin-bottom: 4%;

    width: 30%;

}   

.box-three p {

	margin:0;

}

.box-three a{

	margin:0;

}

.box-feature {

    float: left;

    width: 280px;

    height: 380px;

    text-align: center;

	margin-top: -25px;

}   

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

  .box-feature {

    width: 100%;

  }

}



.box-feature  h3 {

	margin-top:-20px;

}

.box-feature  p {

	margin:0;

	padding: 10px;

	line-height: 150%;

}

.box-feature  a{

	margin:0;

}



.featurewrap {

	max-width: 840px;

    margin: 0 auto;

}



/* FORMS */

	input:required {

		/* background:hsl(180, 50%, 90%); */

		border:1px solid #999;

	}

	.inputform label.success {

		background: #74A31F;

		font-size: 14px;

		opacity: 0.85;

	}

	.inputform label.error {

		background: #994646;

		font-size: 14px;

		opacity: 0.85;

	}

	.inputform label{

		-webkit-box-sizing: border-box;

		-moz-box-sizing: border-box;

		box-sizing: border-box;

		/* left: 50%; */

		margin: 222px 0;

		text-align: center;

		background: #994646;

		border-radius: 4px;

		-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.6);

		box-shadow: 0 2px 4px rgba(0,0,0,0.6);

		line-height: 17px;

		padding: 10px 15px;

		position: absolute;

		text-shadow: 0 1px 1px rgba(9, 9, 9, 0.8);

		width: 238px;

		z-index: 500;

		color: #FFFFFF;

		font-size: 14px;

	}



	#signup {width: 230px;margin:0 auto;margin-top:30px;}

	#signup form {display:block; position:relative; text-align:center; padding:10px 0 10px 3%;}



	#signup input {

		border: 1px solid #c0c0c0;

		-moz-border-radius: 5px;

		-webkit-border-radius: 5px;

		border-radius: 5px;

		font-family: "Lucida Sans Unicode", "Lucida Grande", "Arial", sans-serif;

		color: #afafaf;

	}

	#signup input[type=checkbox]{-webkit-appearance:checkbox;}

	#signup input[type=radio]{-webkit-appearance:radio;}

	#signup input:focus {border-color:#333;}

	#signup .button {clear:both; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}

	#signup .button:hover {background-color:#777;}

	#signup .small-meta {font-size: 11px;}

	#signup .nowrap {white-space:nowrap;}

	

	#signup .input {clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px;}

	#signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}

	* html #signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}

	#signup .input label {display:block; margin-bottom:3px;}

	#signup .input input {display:block; width:100%; padding:8px 3px; text-indent:2%;}

	#signup .input select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}

	

@keyframes fadeInUp {

    0% {

        opacity: 0;

        transform: translateY(20px)

    }

    100% {

        opacity: 1;

        transform: translateY(0)

    }

}

@keyframes fadeInDown {

    0% {

        opacity: 0;

        transform: translateY(-20px)

    }

    100% {

        opacity: 1;

        transform: translateY(0)

    }

}

@keyframes fadeIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



.navigation-list li {

    display: inline-block

}

section {

    padding: 0px 0;

    text-align: center

}

section .copy {

    display: inline-block;

    width: 66.66%

}

section .copy p {

    margin-bottom: 30px

}

section .copy p:last-child {

    margin-bottom: 0

}

section .separator {

    margin: 80px auto

}



.animated {

    animation-duration: 1s;

    animation-fill-mode: both

}

.animatedfast {

    animation-duration: 0.5s;

    animation-fill-mode: both

}

.animated.fade-in-down {

    animation-name: fadeInDown

}

.animated.fade-in-up {

    animation-name: fadeInUp

}

.animatedfast.fade-in {

    animation-name: fadeIn

}



#cards-showcase .copy {

    margin-bottom: 30px

}

#cards-showcase .cards-select {

    position: absolute;

    text-align: center;

    width: 240px;

    z-index: 10

}

#cards-showcase .cards-select:after {

    background-size: 100% 100%;

    bottom: -20px;

    content: ' ';

    display: block;

    height: 25px;

    left: 50%;

    opacity: 0.5;

    position: absolute;

    transform: translateX(-50%);

    width: 100%;

    z-index: -1

}

#cards-showcase .cards-select.cards-select-middle {

    width:100%;

    margin: 0 auto;

}

#cards-showcase .cards-select.cards-select-left {

    position: absolute;

	margin-left: -20px;

    margin: 0 auto;

}

#cards-showcase .cards-select.cards-select-right {

    position: absolute;

    right: 50px

}

#cards-showcase .cards-select li {

    border-radius: 8px;

    cursor: pointer;

    display: inline-block;

    margin: 6px;

    transition: box-shadow 0.5s;

	/*border: 1px solid #989898;*/

}

#cards-showcase .cards-select li.spells {

	background: url("../images/btspells.png") center center no-repeat;

	background-size: 200px 50px;

}



#cards-showcase .cards-select li.consumables {

	background: url("../images/btconsumables.png") center center no-repeat;

	background-size: 200px 50px;

}

#cards-showcase .cards-select li.upgrades {

    background: url("../images/btupgrades.png") center center no-repeat;

	background-size: 200px 50px;

}





#cards-showcase .cards-select li:hover .frame:after {

    opacity: 0.5

}

#cards-showcase .cards-select li.selected {

	box-shadow: 0 0 15px rgb(98, 199, 255);

	border: 1px solid #9BE3FF;

}

#cards-showcase .cards-select li.selected .frame:after {

    opacity: 1

}

#cards-showcase .cards-select .frame {

    background-size: 50px 200px;

    display: block;

    height: 50px;

    position: relative;

    width: 200px

}

#cards-showcase .cards-select .frame:after {

    background-size: 50px 200px;

    content: ' ';

    display: block;

    height: 50px;

    left: 0;

    opacity: 0;

    position: absolute;

    top: 0;

    transition: opacity 0.25s;

    width: 200px

}

#cards-showcase .card-display {

    height: 430px;

    margin-bottom: 60px;

    position: relative;

    width: 100%;

    z-index: 5;

}

#cards-showcase .card-display:after {

    background-size: 100% 100%;

    bottom: -150px;

    content: ' ';

    height: 500px;

    left: 0;

    position: absolute;

    width: 100%;

    z-index: -1

}

#cards-showcase .card-display .card-container {

    backface-visibility: hidden;

    transform: rotate(0);

    opacity: 0;

    position: absolute;

    visibility: hidden;

    width: 100%;

}

#cards-showcase .card-display .card-container.active {

    opacity: 1;

    visibility: visible;

    margin: 0 auto;

    width: 100%;

}

#cards-showcase .card-display .card-container .card {

    display: block;

    height: 448px;

    margin: 0 auto;

    position: relative;

    max-width: 690px;

    top: 60px;

}

#cards-showcase .card-display .card-container .card:after {

    background-size: 100% 100%;

    bottom: 0;

    content: ' ';

    height: 100px;

    left: 50%;

    margin-left: -225px;

    opacity: 0.7;

    position: absolute;

    max-width: 450px;

    z-index: -1

}

#cards-showcase .card-display .card-container .title {

    color: #9597b1;

    position: relative;

    top: 20px;

}



#cards-showcase .button {

    position: relative;

    z-index: 50

}





#cards-showcase .card-display .card-container.consumables .card {

    background: url("../images/3consumables.png") center center no-repeat;

    background-size: contain;

}

#cards-showcase .card-display .card-container.spells .card {

    background: url("../images/3spells.png") center center no-repeat;

    background-size: contain;

}

#cards-showcase .card-display .card-container.upgrades .card {

    background: url("../images/3upgrades.png") center center no-repeat;

    background-size: contain;

}

#cards-showcase .card-display .card-container .card:after {

    bottom: 8px;

    height: 160px;

    margin-left: -195px;

    width: 380px

}







/* PLUS */

#cards-showcase .card {

	    padding: 0;

}



.video-wrap .video-overlay {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}

.video-overlay-icon {

    width: 100%;

    height: 100%;

    position: absolute;

    display: table-cell;

    vertical-align: middle;

    background: url(../images/play-button.png) no-repeat center;

}

.video-wrap {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 10px;

    cursor: pointer;

    width:100%;

    max-width: 408px;

    height: 230px;

    margin: 0 auto;

	-webkit-box-shadow: 0px 0px 54px 0px rgba(107,238,255,1);

	-moz-box-shadow: 0px 0px 54px 0px rgba(107,238,255,1);

	box-shadow: 0px 0px 54px 0px rgba(107,238,255,1);

    border: 3px solid black;

}





.video-wrap h2 {

	font-size:3em;

}

.sectionscreenshots {

    padding-left: 0;

    padding-right: 0;

    position: relative;

}

.screenshots-wrapper {

	height: 100%;

    overflow: hidden;

    position: absolute;

    top: 0;

    width: 100%;

}

.screenshots {

	position: absolute;

    height: 100%;

    min-width: 100%;

    z-index: -1;

    top: 0;

    left: 0;

    right: 0;

    margin: 0 auto;

    opacity: 0;

    background-size: cover;

    background-position: center top;

    transition: all .3s linear;

}

.screenshots.active {

    opacity: 1;

}

.screenshot1 {

	background-image: url("../../longkernel.online/img/gamebg.png");

}

.screenshot2 {

	background-image: url("../../longkernel.online/img/teamphoto.jpg");

}	







#screens-showcase .copy {

    margin-bottom: 30px

}

#screens-showcase .screens-select {

    text-align: center;

    z-index: 10;

    padding-top: 30px;

}

#screens-showcase .screens-select:after {

    background-size: 100% 100%;

    bottom: -20px;

    content: ' ';

    display: block;

    height: 25px;

    opacity: 0.5;

    position: absolute;

    width: 100%;

    z-index: -1

}

#screens-showcase .screens-select.screens-select-left {

	top: 50px;

}



#screens-showcase .screens-select li {

    border-radius: 8px;

    cursor: pointer;

    display: inline-block;

    margin: 5px 5px;

    transition: box-shadow 0.5s;

	/*border: 1px solid #3A3A3A;*/

}

#screens-showcase .screens-select li{

    background: url("../images/btscreenn.png") center center no-repeat;

	background-size: 50px 50px;

}

#screens-showcase .screens-select li.selected{

    background: url("../images/btscreena.png") center center no-repeat;

	background-size: 50px 50px;

}



#screens-showcase .screens-select li:hover .frame:after {

    opacity: 0.5

}

#screens-showcase .screens-select li.selected {

	box-shadow: 0 0 15px rgb(98, 199, 255);

	border: 1px solid #9BE3FF;

}

#screens-showcase .screens-select li.selected .frame:after {

    opacity: 1

}

#screens-showcase .screens-select .frame {

    background-size: 50px 200px;

    display: block;

    height: 50px;

	width: 50px;

    position: relative;



}

#screens-showcase .screens-select .frame:after {

    background-size: 50px 200px;

    content: ' ';

    display: block;

    height: 50px;

    left: 0;

    opacity: 0;

    position: absolute;

    top: 0;

    transition: opacity 0.25s;

    width: 50px

}

#screens-showcase .screen-display {

    height: 760px;

    position: relative;

    width: 100%;

	/*margin-top: -80px;*/

}

#screens-showcase .screen-display:after {

    background-size: 100% 100%;

    bottom: -150px;

    content: ' ';

    height: 500px;

    left: 0;

    position: absolute;

    width: 100%;

    z-index: -1

}

#screens-showcase .screen-display .screen-container {

    opacity: 0;

    position: absolute;

    top: -30px;

    visibility: hidden;

    height: 100%;

    min-width: 100%;

    z-index: -1;

    top: 0;

    left: 0;

    right: 0;

    margin: 0 auto;

    opacity: 0;

    background-size: cover;

    background-position: center top;

}

#screens-showcase .screen-display .screen-container.active {

    opacity: 1;

    visibility: visible

}

#screens-showcase .screen-display .screen-container .screen{

    position: absolute;

    height: 100%;

    min-width: 100%;

	z-index: -1;

    top: 0;

    left: 0;

    right: 0;

    margin: 0 auto;

}

#screens-showcase .screen-display .screen-container .screen:after {

    background-size: 100% 100%;

    bottom: 0;

    content: ' ';

    height: 100px;

    opacity: 0.7;

    position: absolute;

    z-index: -1

}

#screens-showcase .screen-display .screen-container .title {

    color: #9597b1;

    position: relative;

    top: -50px;

}



#screens-showcase .button {

    position: relative;

    z-index: 50

}

#screens-showcase .screen-display .screen-container.one .screen{

    background: url("../images/FS_Screen_FrontPageGallery_2102x760_RavagerGarden2.jpg") center center no-repeat;

	background-size: 2102px;

}

#screens-showcase .screen-display .screen-container.two .screen{

    background: url("../images/FS_Screen_FrontPageGallery_2102x760_CampaignHall.jpg") center center no-repeat;

	background-size: 2102px;

}

#screens-showcase .screen-display .screen-container.three .screen{

    background: url("../images/FS_Screen_FrontPageGallery_2102x760_Sunken.jpg") center center no-repeat;

	background-size: 2102px;

}

#screens-showcase .screen-display .screen-container.four .screen{

    background: url("../images/FS_Screen_FrontPageGallery_2102x760_SoL.jpg") center center no-repeat;

	background-size: 2102px;

}

#screens-showcase .screen-display .screen-container.five .screen{

    background: url("../images/FS_Screen_FrontPageGallery_2102x760_Deckbuild.jpg") center center no-repeat;

	background-size: 2102px;

}

#screens-showcase .screen-display .screen-container.six .screen{

    background: url("../images/FS_Screen_FrontPageGallery_2102x760_Puffs.jpg") center center no-repeat;

	background-size: 2102px;

}

#screens-showcase .screen-display .screen-container.seven .screen{

    background: url("../images/FS_Screen_FrontPageGallery_2102x760_charselect.jpg") center center no-repeat;

	background-size: 2102px;

}

#screens-showcase .screen-display .screen-container .card:after {

    bottom: 8px;

    height: 160px;

}



#screens-showcase .screen{

	    padding: 0;

}

.welcome {

	 margin: 0 auto;

	 margin-top: 120px; 

     background-color: rgba(0, 0, 0, 0.4);

	 padding: 30px 0;

	 font: 400 1.15em/1.5em Arial,sans-serif;

}

.character-left {

    position: absolute;

    background: transparent url("../images/Camerabot_FacingRight.png") no-repeat;

    width: 350px;

    height: 313px;

	opacity:0;

	top:450px;

}	

.character-right {

    position: absolute;

    background: transparent url("../images/Camerabot_FacingLeft.png") no-repeat;

    width: 250px;

    height: 197px;

	opacity:0;

	top:0px;

    right:0;

}

.twitchbtn {

  background: #a200ff;

  background-image: -webkit-linear-gradient(top, #a200ff, #531ca6);

  background-image: -moz-linear-gradient(top, #a200ff, #531ca6);

  background-image: -ms-linear-gradient(top, #a200ff, #531ca6);

  background-image: -o-linear-gradient(top, #a200ff, #531ca6);

  background-image: linear-gradient(to bottom, #a200ff, #531ca6);

  -webkit-border-radius: 6;

  -moz-border-radius: 6;

  border-radius: 6px;

  font-family: Arial;

  color: #ffffff;

  font-size: 16px;

  padding: 10px 20px 10px 20px;

  text-decoration: none;

  border: 1px solid #421088;

  -webkit-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.75);

  -moz-box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.75);

  box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.75);

  margin: 0 auto;

}



.twitchbtn:hover {

  background: #bf00ff;

  background-image: -webkit-linear-gradient(top, #bf00ff, #650dd9);

  background-image: -moz-linear-gradient(top, #bf00ff, #650dd9);

  background-image: -ms-linear-gradient(top, #bf00ff, #650dd9);

  background-image: -o-linear-gradient(top, #bf00ff, #650dd9);

  background-image: linear-gradient(to bottom, #bf00ff, #650dd9);

  text-decoration: none;

}



#thesecret {

	width:600px;

	margin: 0 auto;

	text-align: center;

}



#stores {

	margin:0 auto;

	padding-top: 10px;

	max-width: 490px;

    text-align: center;

}



.unlock1 {

	background:url(../images/CommunityUnlock_Chest.png);

	width: 427px;

	height: 304px;

	margin-left: 180%;

	margin-top: 9px;

}

.unlock2 {

	background:url(../images/CommunityUnlock_DeathlyBrutus.png);

	width: 568px;

	height: 313px;

	margin-left: -56%;

}

.unlock3 {

	background:url(../images/CommunityUnlock_TinyDragon.png);

	width: 387px;

	height: 313px;

	margin-left: -10%;

}

.unlock4 {

	background:url(../images/CommunityUnlock_SoL.png);

	width: 503px;

	height: 313px;

	margin-left: 34%;

}

.unlock5 {

	background:url(../images/CommunityUnlock_Stormbringer.png);

	width: 420px;

	height: 313px;

	margin-left: 105%;

}

.hidden {

	visibility:hidden;

}

.shadowbg {

	background: transparent url("../images/shadowB.png") no-repeat center;

    background-size: 100% 100%;

    padding: 25px;

}

	    

























ol ,ul{

	margin:0;

    font-size: 1.2em;

    text-align: left;

}

a {

	color:#fff;

	text-decoration:underline;

}

a img {

	border:none;

}

a:focus,

a:hover,a:active {

  color: #E0E0E0;

  text-decoration:none;

}

h1,h2,h3 {

	text-shadow: 1px 1px 1px rgba(0,0,0,.5);

	letter-spacing:-1px;

}

h1 {

	font-size: 3em;

}

h2 {

	font-size:2em;

	font-weight: bold;

}

h3 {

	font-size:1.5em;

}

hr {

    margin: 0;

    border: 0;

    padding: 2px 0;

    clear: both;

    box-shadow: 0px 0px 54px 0px rgb(62, 26, 66);

    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(132, 99, 140, 0.75), rgba(0, 0, 0, 0));

}

.contentbox {

	padding: 44px 0 30px 0;

	margin: 0 auto;

	width:700px;

	text-align:center;

}

.bigcontentbox {

	margin: 0 auto;

	width:900px;

	text-align:center;

}

.blackbox {

	background-color: rgba(0, 0, 0, 0.4);

    border-radius: 8px;

    padding: 40px;

}

.glowblue {

    color: #f1f3ee;

    text-shadow: 0 0 16px #009cff;

}

.glowpurple {

    color: #F1EEF3;;

    text-shadow: 0 0 16px #C32DFF;

}

.boxglow {

	-webkit-box-shadow: 0px 0px 44px 0px rgba(107, 238, 255, 0.54);

    -moz-box-shadow: 0px 0px 44px 0px rgba(107, 238, 255, 0.54);

    box-shadow: 0px 0px 44px 0px rgba(107, 238, 255, 0.54);

}

#main {

	min-height: 100%;

}

#top {

	padding-top: 60px;

}

#topsection {

	background: url("../images/backgroundtop.jpg") top no-repeat;

}

#leveling {

	padding:0;

}

#twitchevent {

	background: url("../images/Dungeon_BG.jpg") top no-repeat;

	padding: 44px 0 30px 0;

	background-color: #08040D;

	height: 760px;

}

#twitchevent ul{

	 text-align: center;

    list-style-position: inside;

    padding: 10px 0 0 0;

	text-shadow: 1px 1px 1px rgba(0,0,0,.5);

	font-size: 1em;

}

#social {

    background: url("../images/backgroundtop.jpg") top no-repeat;

}

#winners {

	/*background: url('../../images/cosmic.jpg') top no-repeat;*/

	background: url("../images/CosmicCleaver_BG.jpg") top no-repeat;

	background-color:#000000;;

}

#faq {

	/*background: url('../../images/Ghost_BG.jpg') top no-repeat;*/

	background: url("../images/Ghost_BG.jpg") top no-repeat;

	background-color:#08070D;;

}



#price{

    width: 408px;

    margin: 0px auto;

    background-color: black;

    height: 70px;

	border:3px solid black;

}

#price h2, #price h3 {

	text-align:left;

	line-height:0px;

}

#price h2, #price h3 {

	text-align:left;

	line-height:0px;

}

#price h3 {

	font-size:1.8em;

	text-decoration: line-through;

	color:#626366;;

}

#price h2 {

	font-size:2.2em;

	line-height: 16px;

	font-weight:normal;

}

#pricediscount{

    float: left;

    height: 64px;

    padding: 4px;

    font-size: 3em;

	color: #a4d007;

    background-color: #4c6b22;

	width: 120px;

}

#twitch {

	width: 100px;

    margin-left: 280px;

    margin: 0 0 0 280px;

}

.statbox {

    width: 160px;

    padding: 20px 0;

    display: inline-block;

    color: #A5A5A5;

    background-color: rgba(0, 0, 0, 0.6);

    border-radius: 8px;

	/*-webkit-box-shadow: 0px 0px 44px 0px rgba(107, 238, 255, 0.54);

    -moz-box-shadow: 0px 0px 44px 0px rgba(107, 238, 255, 0.54);

    box-shadow: 0px 0px 44px 0px rgba(107, 238, 255, 0.54);*/

}

.topcontent h2 {

	width: 500px;

    margin: 0 auto;

    background-color: #272727;

    padding: 4px;

	border-top-left-radius: 6px;

    border-top-right-radius: 6px;

}

.topContributer ol , .races  ul{

	text-align: center; 

	list-style-position:inside;

	margin: 0;

    padding: 0;

}

.races li {

	list-style-type: none;

	text-align: center; 

}

.topcontent {

	padding: 24px 0 30px 0;

	margin: 0 auto;

	width:600px;

	text-align:center;

}

.topheader {

    cursor: pointer;

    font-weight: bold;

    margin-top: -10px;

    background-color: #161616;

	width: 500px;

    margin: 0 auto;

}



.topContributer, .races {

	display: none;

    padding: 20px 20px;

	width: 500px;

	margin: 0 auto; 

	background-color: #101010;

	border-bottom-left-radius: 6px;

    border-bottom-right-radius: 6px;

}

#logo {



	width:750px;

	height:268px;

	margin: 0 auto;

	margin-bottom: -70px;

}



#winners ul {

	margin-top: -20px;

	list-style-type:none;

	text-align: center;

	padding: 0;

	margin: 0;

	font-weight: bold;

}

#winners li {

	padding-top:20px;

}

#winners p{

	text-align: center;

	padding: 0;

	margin: 0;

	font-weight: normal;

	color:#9296C7;

}

#winners a {

	color: #9296C7;

	text-decoration:underline;

	font-weight: normal;

}



#social a {

	font-size:2em;

	font-weight:bold;

}

#subscribe {

	padding-top:20px;

	width:600px;

}

#faq ol {

	font-weight:bold;

	font-size: 1.2em;

	text-align: left;

	padding: 0;

}

#faq p   {

	font-weight:normal;

	margin: 0 0 1.5em 0;

}

#leveling ol {

	width: 500px;

    margin: 0em auto;

	padding:0;



}

.levelline {

	width: 100%; 

	height: 34px;

	text-align:center;

		cursor: default;

}

.levelline h3 {

	margin: 0;

    padding: 0.5em;

	font-size: 1em;

	letter-spacing: 0;

}



.levelindex {

    float: left;

    width: 3em;

    height: 95%;

    background-color: #30324E;

	border-radius: 6px;

}



.leveldescription {

	border-radius: 6px;

    height: 95%;

	margin-left: 56px;

}

.icurrent {

	background-color: rgba(121, 96, 28, 0.5);

	color: #AB8A34;

}

.ilocked {

	background-color: rgba(25,25,25,0.9);

	color:#969696;

}

.iunlocked {

	/*background-color: rgba(49, 76, 34, 0.9);*/

	background-color: #374E17;

	color:#a4d007;

}

.current {

	background-color: rgb(49, 40, 14);

	color: #AB8A34;



}

.locked {

	background-color: rgba(25,25,25,0.7);

	color:#969696;

}

.unlocked {

	/*background-color: rgba(34, 73, 76, 0.5);*/

	background-color: #324616;

	color:#a4d007;

}

.reachedindex {

	background-color: #324E30;

}

.reachedtext {

	background-color: #4B6D44;

}

.leveltext h3 {

	margin: 0;

    padding: 0.5em;

}

/*

.navigation {

    position: absolute;

    height: 70px;

    z-index: 100;

    width: 100%;

    margin: 0 auto;

    padding: 0;

    background-color: #000;

    background: rgb(0, 0, 0);

    background: rgba(0, 0, 0, .85);

    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),0 2px 8px rgba(0,0,0,0.5);

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),0 2px 8px rgba(0,0,0,0.5);

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    font-size: 0;



}*/



#backto {

	position: absolute;

    margin-top: -10px;

    padding-left: 18px;

    font-size: 8px;

    color: #6F6F6F;

}





.active {

    color: #fff;

}



#twitcheventimg {

	background-color:#333;

	background: url('../_images/twitchEvent.html') top no-repeat;

	width: 880px;

	height: 479px;

	margin:0 auto;

	border-radius: 12px;

}

#twitcheventimgpost {

	background-color:#333;

	background: url('../_images/twitchEventPost.html') top no-repeat;

	width: 880px;

	height: 479px;

	margin:0 auto;

	border-radius: 12px;

}

#betakeys {

    background-color: #489298;

    width: 50%;

    margin: 0 auto;

    margin-top: -3.2em;

    padding: 1em;

	border-radius: 6px;

    -webkit-box-shadow: 0px 0px 44px 0px rgba(0, 228, 255, 0.54);

    -moz-box-shadow: 0px 0px 44px 0px rgba(0, 228, 255, 0.54);

    box-shadow: 0px 0px 44px 0px rgba(0, 228, 255, 0.54);

}

#betakeys h1, #betakeys h2, #betakeys h3{

	display:inline;

    vertical-align: middle;

	 text-shadow: 0 0 4px #000;

	letter-spacing:normal;

}



.ribbon {

	display:inline-block;

	font-size: 2em;

	margin: 1em 0 0 0;

}



.ribbon:after, .ribbon:before {

	margin-top:0.5em;

	content: "";

	float:left;

	border:1.5em solid #30324E;

}



.ribbon:after {

	border-right-color:transparent;

}



.ribbon:before {

	border-left-color:transparent;

}



.ribbon p { 

	color:#fff;

	text-decoration:none;

	float:left;

	height:3.5em;

	overflow:hidden;

}



.ribbon span {

	background:#44476D;

	display:inline-block;

	line-height:3em;

    width: 420px;

	position:relative;

	margin-top:0;

	-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */

	-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */

	-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */

	-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */

	transition: background-color 0.2s, margin-top 0.2s;

}



.ribbon a:hover span {

	margin-top:0;

}



.ribbon span:before {

	content: "";

	position:absolute;

	top:3em;

	left:0;

	border-right:0.5em solid #25263C;

	border-bottom:0.5em solid #30324E;

}



.ribbon span:after {

	content: "";

	position:absolute;

	top:3em;

	right:0;

	border-left:0.5em solid #25263C;

	border-bottom:0.5em solid #30324E;

}

.boxcenter {

	width: 400px;

    margin: 0 auto;

	padding: 10px 0;

}



.boxbutton .btn-primary {

	padding: 0px 20px 10px;

    background-color: #6441A5;

    border-radius: 16px;

    color: #FFF;

    border: none;

}

.boxbutton .btn-primary:hover, .boxbutton .btn-primary a:hover {

	background: #4C3477;

}

.boxbutton .btn-primary:active, .boxbutton .btn-primary a:active {

	background: #4C3477;

}

.fancybutton {

	clear: left;

	width: 367px;

	height: 103px;

	font-weight: 800;

	font-size: 26px;

	letter-spacing: -1px;

	text-shadow: 1px 1px 10px #000;

	text-decoration: none;

	cursor:pointer;

	background: url('../images/bigbutton.png') bottom;

	border:0;

	color:#f1f3ee;

}

.fancybutton:hover {

	background-position:0 0px !important;

}

.fancybuttonsmall {

    clear: left;

    width: 250px;

    height: 70px;

    font-weight: 600;

    font-size: 22px;

    letter-spacing: -1px;

    text-shadow: 1px 1px 10px #000;

    text-decoration: none;

    cursor: pointer;

    background: url('../images/bigbutton.png') bottom;

    background-size: 250px;

    border: 0;

    color: #f1f3ee;

}

.fancybuttonsmall:hover {

	background-position:0 0px !important;

}

.boxbutton form a {

	text-decoration:none;

}

.btn:focus {

  outline: none;

}

.boxbutton .btn-primary a {

	background: none;

	border:none;

}

.progress-bar {

    background-color: #4c6b22;

	border-radius: 8px;

	color:#a4d007;

}

.progress {

    border-radius: 8px;

    height: 60px;

    width: 70%;

    background-color: rgba(0, 0, 0, 0.5);

    padding: 6px;

}

.progress p {

	padding: 0;

    position: absolute;

    text-align: center;

    width: 619px;

    /*text-shadow: 0 0 4px #000;*/

    font-size: 2em;

}

#mc_embed_signup {

    background: none;

    font: 14px Helvetica,Arial,sans-serif;

    padding: 0;

    border:none;

	margin: 0 auto;

}

#mc_embed_signup form {

    display: block;

    position: relative;

    /*padding: 10px 0 10px 3%;*/

}



#mc_embed_signup input.email {

    display: block;

    padding: 12px 0;

    margin: 0 4% 10px 0;

    text-indent: 5px;

    width: 60%;

    min-width: 130px;

    border-radius: 6px;

    margin: 20px auto;

}

#mc_embed_signup input {

    border: 1px solid #999;

    -webkit-appearance: none;

}

#mc_embed_signup .fancybutton {

	border: 0 none;

}

#mc_embed_signup .button {

    background-color: #6441A5;

    color: #FFF;

	font-size: 2em;

	font-weight: bold;

	letter-spacing:-1px;

	clear: both;

    border: 0 none;

    cursor: pointer;

    line-height: 32px;

    text-align: center;

    text-decoration: none;

    vertical-align: top;

    white-space: nowrap;

	margin: 0 auto;

	width: 300px;

	text-shadow: 1px 1px 1px rgba(0,0,0,.5);

	padding: 20px 0px;

    border-radius: 16px;

}

#mc_embed_signup input {

    border: 1px solid #999;

    -webkit-appearance: none;

}

#mc_embed_signup input.button {

    display: block;

}



/*=========================

  Icons

 ================= */



/* footer social icons */

ul.social-network {

	list-style: none;

	display: inline;

	margin-left:0 !important;

	padding: 0;

}

ul.social-network li {

	display: inline;

	margin: 0 5px;

}





/* footer social icons */

.social-network a {

	    background-color: #272727;

}

.social-network a.icoRss:hover {

	background-color: #F56505;

}

.social-network a.icoFacebook:hover {

	background-color:#3B5998;

}

.social-network a.icoTwitter:hover {

	background-color:#33ccff;

}

.social-network a.icoReddit:hover {

	background-color:#BD3518;

}

.social-network a.icoYoutube:hover {

	background-color:#BD3518;

}

.social-network a.icoVimeo:hover {

	background-color:#0590B8;

}

.social-network a.icoLinkedin:hover {

	background-color:#007bb7;

}

.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,

.social-network a.icoReddit:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoYoutube:hover i, .social-network a.icoLinkedin:hover i {

	color:#fff;

}

a.socialIcon:hover, .socialHoverClass {

	color:#44BCDD;

}



.social-circle li a {

	display:inline-block;

	position:relative;

	margin:0 auto 0 auto;

	-moz-border-radius:50%;

	-webkit-border-radius:50%;

	border-radius:50%;

	text-align:center;

	width: 50px;

	height: 50px;

	font-size:20px;

}

.social-circle li i {

	margin:0;

	line-height:50px;

	text-align: center;

}



.social-circle li a:hover i, .triggeredHover {

	-moz-transform: rotate(360deg);

	-webkit-transform: rotate(360deg);

	-ms--transform: rotate(360deg);

	transform: rotate(360deg);

	-webkit-transition: all 0.2s;

	-moz-transition: all 0.2s;

	-o-transition: all 0.2s;

	-ms-transition: all 0.2s;

	transition: all 0.2s;

}

.social-circle i {

	color: #fff;

	-webkit-transition: all 0.8s;

	-moz-transition: all 0.8s;

	-o-transition: all 0.8s;

	-ms-transition: all 0.8s;

	transition: all 0.8s;

}

.unlocktxt {

	font-weight:bold;

	color:#74A23A;

}

.locktxt {

	font-weight:bold;

	color:#907843;;

}



/* HOVER STYLES */

.toolpop {

    text-decoration:none;

    position:relative;

}

.toolpop span {

    display:none;

	left: -150px;

	top: 10px;

	padding:8px;

}

.toolpop:hover span {

    display:block;

	z-index:100;

}



.bartoolpop span {

    display:none;

	left: -180px;

	top: 0px;

}





.goalPointDetails {

    position: absolute;

	border-radius: 8px;

    z-index: 12;

    padding: 20px;

    background-color: #0f1215;

    border: solid #464646 1px;

	color: #A5A5A5;

    text-align: center;

    text-align: center;

    line-height: 20px;

}

.goalPointHover {

    position: absolute;

    display: block;

    left: 166px;

    top: -7px;

    width: 11px;

    height: 7px;

}

.tooltipimg {

	padding-top: 10px;

}



.footer {

	text-align: center;

	width: 100%;

	min-height: 100%;

	height:100%;

	float: left;

	background-color:#08070D;

}