/*

Theme Name: HEX Game

Theme URI: http://hex.mattheweugene.com/

Description: Microsite to promote HEX game

Version: 1.0

Author: Matty Mac

Author URI: http://mattheweugene.com

Text Domain: hex

*/





/*----------------------------

//	Basics

----------------------------*/



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

body{

	

	background:#010101 url(../../data/medias/bg.jpg);

	background-repeat:repeat-y;

	background-position:top center;

	background-attachment:fixed;

}

}





body

{

	color:#FFF;

	color:#8891a1;

	font:Arial, Helvetica, sans-serif;

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

	background:#010101 url(../../data/medias/bg4.jpg);

	background-repeat:no-repeat;

	background-position:top center;

	background-attachment:fixed;

	font-size:14px;

}



body h1, h2, h3, h4, h5, h6

{

	color:#d4deef;

}



html { height: 100%; }

body { min-height: 100%; }



h1, h2, h3, h4, h5, h6

{	

	font-family: 'Oswald', sans-serif;

	text-transform:uppercase;

	font-weight:400;

	line-height: 1.4;

	

	/*Serif Style

	font-family: 'Sorts Mill Goudy', serif;

	color:#d4deef;

	line-height: 1em; */

}



h1 a, h2 a, h3 a, h4 a, h5 a

{

	color:#c5cfe1;

}



h2

{

	font-size:30px;

	padding:12px 0 12px 0;

	letter-spacing: 0.05em;

}



h3

{

	font-size:24px;

	padding:10px 0 10px 0;

}



h4

{

	font-size:20px;

	padding:8px 0 8px 0;

	text-transform:capitalize;

}



h5

{

	font-size:18px;

	text-transform:capitalize;

	font-family: 'Oswald', sans-serif;

}



h5 .small

{

	font-size:10px;

	font-stretch:ultra-condensed;

}



strong

{

	font-weight: bold;

}



em

{

	font-style:italic;

}



p

{

	padding:0 0 15px 0;

}



a

{

	color:#99a3b5;

}



a:hover

{

	color:#FFF;

}



.left, #left

{

	float:left;

}



.right, #right

{

	float:right;

}



.clear, #clear

{

	overflow:hidden;

	height:1px;

	clear:both;

	width:100%;

}



#pageContainer

{

	overflow:hidden;

	width:880px;

	padding:20px;

	margin:0 auto;

}



#pageContent

{

	padding:20px 0 20px 10px;

	overflow:hidden;

	width:100%;

	text-align:left;

	line-height:18px;

}



.singlePage

{

	width:100%;

	overflow:hidden;

	text-align:left;

}



.singlePage img

{

	max-width:100%;

}



/*------------------------------

//	TOURNAMENT

------------------------------*/



.tourn {

    z-index: 0;

    position:absolute;

    padding-left:600px;

    margin-top: -95px;

	-webkit-transition: all 0.5s linear;

	-o-transition: all 0.5s linear;

	transition: all 0.5s linear;



}



.tourn:hover {

	-webkit-filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.80));

}

/*------------------------------

//	TOURNAMENT

------------------------------*/





#announcements, #headerArea, #mainFeatures

{

	overflow:hidden;

	clear:both;

}



.tab

{ 

        margin-left: 40px;

}



/*------------------------------

//	List Styles

------------------------------*/

#pageContent ul li, #pageContent ol li

{

	padding:0 0 .5em 1em;

	overflow:hidden;

}



#pageContent ul li

{

	list-style:disc;

	list-style-position:inside;

}



#pageContent ul.diamond {

  margin-left: 5px;

  padding-left: 1em;

  text-indent: -1em;

}



#pageContent ul.diamond li {

  list-style-image: url('../../wd-bullet1.png');

}



#pageContent ol li

{

	list-style:decimal;

	list-style-position:inside;

}





/*------------------------------

//	Front Page Announcements

------------------------------*/



#announcements

{

	text-align:left;

	padding: 20px 0 0 10px;

}



h2.pageTitle

{

	padding:0 0 15px 8px;

	color:#c5cfe1;

	letter-spacing: 0.05em

}



.box, .wallPaperContainer

{

	width:31.3%;

	padding:0 1% 10px 1%;

	margin:0 0 10px 0;

	overflow:hidden;

	background:none;

	float:left;

	text-align:left;

}



.box h2

{

	padding: 6px 0;

	font-size: 28px;

	letter-spacing: 0.07em;

	

}



.box h2 a

{

	color:#FFF;

	color:#c5cfe1; /*light yellow*/

	color:#000

	text-decoration:none;

}



.box h2 a:hover

{

	color:#99a3b5; /*bright yellow*/

	color:#FFF;

}



.box a

{

	text-decoration:none;

}



.boxImage, .box img

{

	max-width:100%;

	border:#8891a1 1px solid;

}



.boxImage:hover, .box img:hover

{

	border-color:#FFF;

}



.date

{

	display:block;

	padding:0 0 12px 0;

	/*color:#CCC;*/

}



.wallPaperContainer

{

	overflow:hidden;

	margin:25px 0 10px 0;

}



.wallPaperContainer ul

{

	margin: 15px 0 0 0;

}



.wallPaperContainer ul li

{

	list-style:none !important;

}



.wallPaperContainer ul li a

{

	text-decoration:none;

}



/*-------------------------

//	Main Features

-------------------------*/



#mainFeatures

{

	background:#333;

	background:none;

	padding: 0 4px 0 10px;

}



#mainFeatures .video

{

	width:603px;

	height:400px;

	/*border:#99a3b5 10px solid;*/

	background:#000 url(../../hextcg-video-bg.png);

}



.clientDownload

{

	width:862px;

	height:380px;

	border:#99a3b5 1px solid;

}



a.cssmouseover 

{

	display:block;

	width:862px;

	height:380px;

	border:#99a3b5 1px solid;

	background:#000 url(../../hex-beta-dl-hover.png);

	background-position:0px 0px;

}



a.cssmouseover:hover 

{

	background-position:0px -388px;

}



.largeVideo

{

	width: 873px;

	height: 500px;

	background: #000 url(../../hextcg-largeVideo-bg.png);

}	



.kickStartContainer

{

	width:240px;

	height:400px;

	overflow:hidden;

	background: none;

	text-align: right;

	background: url(../../hextcg-ks-bg.png);

}



.project-card-wrap

{

	width:300px;

}



/*-------------------------

//	Header

-------------------------*/



#headerArea

{

	background:#09F;

	background:none;

	position:relative;

	overflow: visible;

	margin: 0 0 0 -4px;

}



#navBg

{

	position:absolute;

	z-index:-1;

	top: -20px;

	left: 105px;

}



#logo

{

	width:259px;

	height:176px;

	float:left;

}



#logo img

{

	/*

	-webkit-animation-name: greenPulse;

	-webkit-animation-duration: 2s;

	-webkit-animation-iteration-count: infinite;

	*/

}



@-webkit-keyframes greenPulse {

from {  -webkit-box-shadow: 0 0 9px #333; }

50% { -webkit-box-shadow: 0 0 18px #91bd09; }

to {  -webkit-box-shadow: 0 0 9px #333; }

}



/*-------------------------

//	Navigation

-------------------------*/



nav {

	font-size: 18px;

	font-family: 'Oswald', sans-serif;

	text-transform: uppercase;

	font-weight: 400;

	overflow: visible;

	background: none; 

	padding: 0px;

	position: absolute;

	left: 251px;

	top: 56px;

    	z-index: 800;

	color:#c5cfe1;

	letter-spacing:0.15em;

}



nav ul ul {

	display: none;

}



	nav ul li:hover > ul {

		display: block;

	}





nav ul {

	list-style: none;

	position: relative;

	display: inline-table;

	white-space: nowrap;

}

	nav ul:after {

		content: "";

		clear: both; 

		display: block;

	}



	nav ul li {

		float: left;

	}

	

	nav ul ul li

	{

		/*background:url(../../menu-texture.jpg);*/

		font-size:14px;

		border:#000 solid 1px;

		border:none;

		letter-spacing:0.1em;

	}

	

		nav ul li:hover {

			/*background: #b87f16;*/

			background: #000;

			color:#fff !important;

		}

			nav ul li:hover a {

				color: #fff;

				color:#c5cfe1;

				/*background: url(../../menu-texture.jpg);*/

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

				/*border-bottom: #960 solid 2px;*/

			}

			

			nav ul li a:hover

			{

				color:#fff;

			}

		

		nav ul li a {

			display: block; 

			padding: 10px 10px;

			border: 1px solid black;

			color: #ffffff; 

			color:#c5cfe1;

			text-decoration: none;

		}

			

		

	nav ul ul {

		background: #000;

		padding: 0;

		margin:0;

		position: absolute; 

		top: 100%;

		top:38px;/*ie 7 fix */

	}

		nav ul ul li {

			float: none; 

			position: relative;

		}

			nav ul ul li a {

				/*padding: 10px;*/

				background:url(../../gradient-divider.jpg);

				background-position:bottom center;

				background-repeat:no-repeat;

				color: #fff;

				color:#c5cfe1;

			}	

				nav ul ul li a:hover {

					/*background: #b87f16;*/

					color:#fff;

				}

		

	nav ul ul ul {

		position: absolute; 

		left: 100%; 

		top:-1px;

		margin: 0 0 0 0px;

		/*border-right:#960 1px solid;*/

		/*border-top:#000 1px solid;*/

		border-bottom:#000 1px solid;

	}





/*-------------------------

//	Social Media

-------------------------*/



#socialContainer

{

	float: right;

	/*margin: -8px -15px 0 0;*/

	overflow:hidden;

}

	

#socialContainer img

{

	float:left;

	padding:0 10px 0 0;

}



#socialContainer a

{

	color:#d5921a;

}



#socialContainer a:hover

{

	color:#ffffff;

}



img#slackerBackerBanner

{

	margin:15px 0 25px 0;

	width:100%;

	border:#8891a1 1px solid;

}







/*-------------------------

//	Footer

-------------------------*/



#footerArea

{

	text-align:center;

	/*background:#111;*/

	overflow:hidden;

	padding:40px 0;

	font-size:12px;

}



#footerArea ul

{

	display:table;

	margin:0 auto;

	padding: 0 150px 0 150px; 

}



#footerArea ul li

{

	list-style-type:none;

	display:block;

	float:left;

	padding:20px 20px 0 0;

}



#footerArea ul li a

{

	text-decoration:none;

}



#footerArea ul li ul

{

	display: none;	

}



#footerLogo

{

	position:relative;

}



#footerLogo img

{

	position: absolute;

	top: -35px;

	left: -170px;

}



#footerArea ul li#firstitem {

	padding-left: 40px;

	}





/*-------------------------

//	Cards

-------------------------*/



.hexCardContainer

{

	overflow:hidden;

	width:900px;

	height:540px;

	background:url(../../autocard-bg.jpg);

	background-repeat:no-repeat;

	background-position:top center;

	

}



.hexCard

{

	float:left;

	overflow:hidden;

	position:relative;

	left: 135px;

	top: 34px

}



.cardDetails

{

	float:right;

	overflow:hidden;

	padding:41px 11px 0 0px;

	width:420px;

	float:right;

}



.cardAttribute

{

	overflow:hidden;

	margin:0 0 17px 0;

}



.cardThumbContainer

{

	width:119px;

	height:119px;

	position:relative;

	overflow:hidden;

	float:left;

}



.thumbBorder

{

	position:absolute;

	z-index:3;

}



img.cardThumb

{

	margin:0;

	position: relative;

	left: 12px;

	top: 12px;

}



.attributeDetails

{

	overflow:hidden;

	float:left;

	padding:8px 0 0 5px;

	color:#ffffff;

	width:190px;

	text-shadow: 5px 5px 3px #000, -5px -5px 3px #000;

	font-size:14px;

	font-family: 'Oswald', sans-serif;

	font-weight: 100;

}



.common, #common

{

	color:#818181;

}



.uncommon, #uncommon

{

	color:#66cc66;

}



.rare, #rare

{

	color:#3399cc;

}



.legendary, #legendary

{

	color:#c40e11;

}



/*-------------------------

//	Align right

-------------------------*/



#pageContent .alignright

{

	float: right !important;

	padding: 3px 3px 3px 3px;

	overflow: hidden;

	text-align: center;

	border: 1px solid #8891a1;

	border-radius: 4px;

	background: #000000;

	margin: 0 0 10px 10px;

}

	

.wp-caption-text

{

	font-size: 10px;

	font-style: italic;

	padding: 0 0 0 0;

}



/*-------------------------

//	Align left

-------------------------*/



#pageContent .alignleft

{

	float: left !important;

	padding: 3px 3px 3px 3px;

	overflow: hidden;

	text-align: center;

	border: 1px solid #8891a1;

	border-radius: 4px;

	background: #000000;

	margin: 0 10px 10px 0;

}





/*-------------------------

//	Donation Overlay

-------------------------*/



#overlay-wrap 

{

	position: fixed;

	width: 100%;

	height: 100%;

	background: url(../../bg-transparent.png);

	background-repeat: repeat;

	z-index: 9999;

	top: 0;

	left: 0;

	display: none;

}



#overlay {
	width: 470px;

	height: 426px;

	position: absolute;

	left: 50%;

	top: 50%;

	margin-top: -300px;

	margin-left: -235px;

	z-index: 10000;

}



#overlay .overlay-content {

	padding: 220px 0 0 0;

	background: url(../../logo-hex.png);

	background-position: top center;

	background-repeat: no-repeat;

}



#overlay .terms {

	height: 195px;

	overflow: auto;

	margin-bottom: 5px;

	padding: 20px;

	text-align: left;

	border: 1px solid;

	background: #000;

}



#must-accept

{

	color:#c5cfe1;

	text-align: center;

}



#overlayclose, #accept-terms

{

	font-size:24px;

	font-family: 'Oswald', sans-serif;

	font-weight: 100;

	text-decoration:none;

}



#overlayclose

{

	float:left;

	display:block;

}



#accept-terms

{

	float:right;

	display:block;

}



/*-------------------------

//	Block quote

-------------------------*/



#pageContent .blockquote

{

	width: 80%; 

	margin-left: auto; 

	margin-right: auto;

}



/*-------------------------

//	Mail Chimp Data Capture

-------------------------*/





#ns_widget_mailchimp-2

{

	/*

	position: absolute;

	right: 150px;

	top: -76px;

	*/

	text-align: center;

}



input.button

{

	background: #c5cfe1;

	border: none;

	padding: 2px 15px;

	color: #000;

	text-transform: uppercase;

	font-family: 'Oswald', sans-serif;

	font-size:16px;

	letter-spacing:2;

}



input#ns_widget_mailchimp-email-2

{

	border: none;

	padding: 6px;

	line-height: 2px;

	background: #ccc;

	font-weight: bold;

	color: #555

}



li#ns_widget_mailchimp-2

{

	list-style:none;

}



li.widget_ns_mailchimp

{

	display:block;

	margin:0;

	padding:0 20px;

}



.betaPopup

{

	position:absolute;

	width:0;

	height:0;

	overflow:hidden;

	background: url(../../bg-transparent.png);

	

	position: fixed;

	width: 100%;

	height: 100%;

	background: url(../../bg-transparent.png);

	background-repeat: repeat;

	z-index: 9999;

	top: 0;

	left: 0;

	display: none;

}



.betaContainer

{

	overflow: hidden;

	background: #000;

	margin: 55px auto;

	width: 35%;

	border: 3px solid #99a3b5;

	padding: 50px 0;

}



#closeBtn

{

	font-size: 24px;

	font-family: 'Oswald', sans-serif;

	font-weight: 100;

	text-decoration: none;

	width: 50%;

	overflow: hidden;

	cursor: pointer;

	text-align: center;

	margin: 20px auto;

	text-transform: uppercase;

	color: #99a3b5;

	clear: both;

}



#KSRewards

{

	border:none !important;

	outline:none !important;

}



area, a

{

	border:none !important;

	outline:none !important;

}



/*------------------------------

//	STORE & LOGIN 

------------------------------*/



#lgn_user, #lgn_pass, #lgn_totp, #reg_email, #reg_pass, #reg_pass1, #chp_oldp, #chp_newp, #chp_newp1 {

  display: block;

  margin: 3px 0px;

  width: 100%;

  height: 10px;

  appearance: none;

  box-shadow: none;

  border-radius: none;

  padding: 10px;

}



.bigblue {

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 2px;

  text-align: center;

  color: #0C5;

  font-size: 24px;

  font-weight: 600;

  background: #3071A9;

  border: 2px solid #3071A9;

  color: #FFF;

  transition: all 0.5s;

}



.bigblue:active { 

  text-decoration: none;

  color: #3071A9;

  border-color: #3071A9;

  background: #000;

}



.bigblue:hover { 

  text-decoration: none;

  color: #3071A9;

  border-color: #3071A9;

  background: #000;

}



.bigred {

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 2px;

  text-align: center;

  color: #0C5;

  font-size: 24px;

  font-weight: 600;

  background: #7F0000;

  border: 2px solid #7F0000;

  color: #FFF;

  transition: all 0.5s;

}



.bigred:active { 

  text-decoration: none;

  color: #7F0000;

  border-color: #7F0000;

  background: #000;

}



.bigred:hover { 

  text-decoration: none;

  color: #7F0000;

  border-color: #7F0000;

  background: #000;

}



#inputform {

  margin: -10px 0px 3px 0px;

  width: 218px;

  height:35px;

}



#resetform {

  margin: -10px 0px 3px 0px;

  width: 318px;

  height:35px;

}



#reg_submit_click {

  margin: -10px 0px 3px 0px;

  width: 218px;

  height:35px;

}



#chp_submit {

width: 107px;

height:35px;

font-size: 20px;

}



#chp_cancel {

left-margin: 110px;

width: 107px;

height:35px;

font-size: 20px;

}



#lgn_submit {

  margin: -10px 0px 3px 0px;

  width: 218px;

  height:35px;

}



/*------------------------------

//	STORE FORM

------------------------------*/



.form-style-9{

    max-width: 450px;

    background: rgba(250, 250, 250, 1);

    padding: 30px;

    margin: 0px auto;

    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);

    border-radius: 10px;

    border: 6px solid #305A72;

}

.form-style-9 h4 {

    color:black;

    font-weight:500;

    margin-top:-25px;

}

.form-style-9 h5 {

    color:#305A72;

    margin: 5px;

}

.form-style-9 ul{

    padding:0;

    margin:0;

    list-style:none;

}

.form-style-9 ul li{

    display: block;

    margin-bottom: 10px;

    min-height: 35px;

}

.form-style-9 ul li  .field-style{

    box-sizing: border-box; 

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box; 

    padding: 8px;

    outline: none;

    border: 1px solid #B0CFE0;

    -webkit-transition: all 0.30s ease-in-out;

    -moz-transition: all 0.30s ease-in-out;

    -ms-transition: all 0.30s ease-in-out;

    -o-transition: all 0.30s ease-in-out;



}.form-style-9 ul li  .field-style:focus{

    box-shadow: 0 0 5px #B0CFE0;

    border:1px solid #B0CFE0;

}

.form-style-9 ul li .field-split{

    width: 49%;

}

.form-style-9 ul li .field-full{

    width: 100%;

}

.form-style-9 ul li .align-left{

    float:left;

}

.form-style-9 ul li .align-right{

    float:right;

}

.form-style-9 ul li textarea{

    width: 100%;

    height: 100px;

}

.form-style-9 ul li span{

    margin: 8px 8px 0px 0px;

}

.bigblueform {

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 2px;

  text-align: center;

  color: #0C5;

  font-size: 24px;

  font-weight: 600;

  background: #3071A9;

  border: 2px solid #3071A9;

  color: #FFF;

  transition: all 0.5s;

}



.bigblueform:active { 

  text-decoration: none;

  color: #3071A9;

  border-color: #3071A9;

  background: #FFF;

}



.bigblueform:hover { 

  text-decoration: none;

  color: #3071A9;

  border-color: #3071A9;

  background: #FFF;

}



.bigredform {

  cursor: pointer;

  text-transform: uppercase;

  letter-spacing: 2px;

  text-align: center;

  color: #0C5;

  font-size: 24px;

  font-weight: 600;

  background: #7F0000;

  border: 2px solid #7F0000;

  color: #FFF;

  transition: all 0.5s;

}



.bigredform:active { 

  text-decoration: none;

  color: #7F0000;

  border-color: #7F0000;

  background: #FFF;

}



.bigredform:hover { 

  text-decoration: none;

  color: #7F0000;

  border-color: #7F0000;

  background: #FFF;

}



#savedcard {

  margin-left: 20px;

  width:45%;

}



#usenewcard {

  width:100%;

}



#paypal-button {

margin: 20px 0px;

}



#cancelpurchase {

margin-top:-12px;

margin-right:-20px;

}



/*------------------------------

//	STORE BUTTON TEST

------------------------------*/



.testbutton {

  display: inline-block;

  border-radius: 4px;

  background-color: #e1e1e1;

  border: none;

  text-decoration: none;

  color: #000;

  text-align: center;

  padding: 5px;

  min-width: 150px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 0px;

}



.testbutton span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}



.testbutton span:after {

  content: url(../../StashPlat_25.png);

  position: absolute;

  opacity: 0;

  top: -4px;

  right: -30px;

  left: -10px;

  transition: 0.5s;

}



.testbutton:hover {

  color: black;

}



.testbutton:hover span {

  padding-right: 30px;

  color: #e1e1e1;

}



.testbutton:hover span:after {

  opacity: 1;

  right: 0;

}



.VIPbutton {

  display: inline-block;

  border-radius: 4px;

  background-color: #e1e1e1;

  border: none;

  text-decoration: none;

  color: #000;

  text-align: center;

  padding: 5px;

  min-width: 150px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 0px;

}



.VIPbutton span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}



.VIPspan:after {

  content: url(../../Hex_VIPLogo_25.png);

  position: absolute;

  opacity: 0;

  top: -4px;

  right: -30px;

  transition: 0.5s;

}



.VIPbutton:hover {

  color: black;

}



.VIPbutton:hover span {

  padding-right: 30px;

  color: #e1e1e1;

}



.VIPbutton:hover span:after {

  opacity: 1;

  right: 0;

}

/*------------------------------

//	STORE BUTTON FORM

------------------------------*/



.form-style-1 {

  min-width: 600px;

  padding: 30px;

  margin: 0px auto;

}



.form-style-1 ul {

  padding: 0;

  margin: 0;

  list-style: none;



  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  

  justify-content: space-around;

}



.form-style-1 ul li {

  display: block;

  min-width: 200px;

  text-align: left;

}