@charset "utf-8";
/* CSS Document */
html,
html * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: arial, sans-serif;
	font-size: 1vw;
	background: #3a3255;
	color: #FFFFFF;
}

img {
    max-width: 100%;
    max-height: 100%;
}

img.header {
    height: 100%;
    width: 40%;
	padding: 0.75%
}

img.ldCover {
    height: 100%;
    width: 40%;
	padding: 0.75%
}

img.cegH1 {
    height: 4%;
    width: 13.5%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.cegH2 {
    height: 4%;
    width: 11.3%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.cegH3 {
    height: 4%;
    width: 8.6%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.cegP {
    height: 4%;
    width: 7.2%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.cegChoices {
    height: 100%;
    width: 46%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.banner {
	height: 10%;
    width: 10%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.playTP {
	height: 10%;
    width: 10%;
	vertical-align: text-top;
	padding-top: 0.1%;
}


img.SignUp {
    height: 4%;
    width: 13.5%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.MailingList {
    height: 8%;
    width: 27%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.PaulImage {
	max-height: 100%;
	max-width: 100%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

img.LD {
	max-height: 100%;
	max-width: 100%;
	vertical-align: text-top;
	padding-top: 0.1%;
}
img.Location {
	max-height: 100%;
	max-width: 100%;
	vertical-align: text-top;
	padding-top: 0.1%;
}

.logo {
font-family: 'Luckiest Guy', sans-serif;
	font-size: 250%;
	letter-spacing: 0.03em;
	line-height: 0.7em;
}

.logoE {
	font-size: 150%;
	line-height: 0.85em;
}

.logoTag {
font-family: 'Luckiest Guy', sans-serif;
font-size: 200%;
letter-spacing: 0.04em;
line-height: 0.9em;
}

.logoLinks {
font-family: 'Luckiest Guy', sans-serif;
	font-size: 100%;
	letter-spacing: 0.07em;
	text-align: center;
}

.logoInline {
font-family: 'Luckiest Guy', sans-serif;
	font-size: 80%;
	letter-spacing: 0.07em;
	color: #F6D100;
	font-weight:normal; 
	
}

.availableOn {
	font-size: .5em;
}



/* The sidebar menu */
.sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 19em; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #3a3255; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
	overflow-y: hidden; /* Disable horizontal scroll */
    padding: 1em;
}

/* The navigation menu links */
.sidenav a {
    padding: 0.1vw 0vw 0.1vw 2vw;
    text-decoration: none;
    font-size: 2.5em;
    color: #818181;
    display: block;
	    text-shadow: 0.12em 0.06em #000000;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

.einstein {
    max-height: 60%;
    width: 100%;
}

/* The sidebar menu */
.topimage {
    display: inline-block;
    flex-direction: column;
	text-align: center;
	width: 100%;
	height: 14em;
	font-size: 2em;
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 0; /* Stay on top */
    top: 0%; /* Stay at the top */
    left: 0%;
    background-color: #3a3255; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
	overflow-y: hidden; /* Disable horizontal scroll */
    padding: 0% 0% 0% 0%;
}

.topimage a:link {color:#F6D100;}
.topimage a:visited {color:#F6D100;}
.topimage a:hover {color:#FFFF00;}
.topimage a:active {color:#818181;}


.topimage h1 {	
    line-height: 1.4em;
	font-size: 500%;
	letter-spacing: 0.07em;
}


/* Style page content */
.main {
    display: inline-block;
    flex-direction:column;
	width: 100%;
	height: 100%;
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	top: 16em;
    left: 19em;
	padding:  1% 19em 1% 0%;
	font-size: 1em;
	overflow-y: scroll;
}

.main2 {
    display: inline-block;
    flex-direction:column;
	width: 100%;
	height: 100%;
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	top: 15.5em;
    left: 0em;
	padding:  1% 1% 1% 1%;
	font-size: 1em;
	overflow-y: scroll;
}

.main a:link {color:#818181;}
.main a:visited {color:#818181;}
.main a:hover {color:#F6D100;}
.main a:active {color:#818181;}

.main2 a:link {color:#818181;}
.main2 a:visited {color:#818181;}
.main2 a:hover {color:#F6D100;}
.main2 a:active {color:#818181;}

.choices a:link {color:#FFFFFF;}
.choices a:visited {color:#FFFFFF;}
.choices a:hover {color:#F6D100;}
.choices a:active {color:#FFFFFF;}

.main3 {
    display: inline-block;
    flex-direction:column;
	width: 100%;
	height: 100%;
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	top: 7.75em;
    left: 0em;
	padding:  1% 1% 1% 1%;
	font-size: 2em;
	overflow-y: scroll;
}

.main3 a:link {color:#F6D100;}
.main3 a:visited {color:#F6D100;}
.main3 a:hover {color:#FFFF00;}
.main3 a:active {color:#F6D100;}


.bannerBox {
	font-family: 'Luckiest Guy', sans-serif;
	font-size: 2.5em;
	background-color: #000000;
    display: inline-block;
    flex-direction: column;
	text-align: center;
	width: 11em;
	height: 4em;
	padding: 0.2%;
  	border-radius: 0.75em;
	box-shadow: 0em 0em 1em 0em #fff;
	margin: 0.5em
}

.bannerBox a:link {color:#818181;}
.bannerBox a:visited {color:#818181;}
.bannerBox a:hover {color:#F6D100;}
.bannerBox a:active {color:#818181;}


.bannerGame {
	font-size: 3em;
	background-color: #000000;
    display: inline-block;
    flex-direction: column;
	text-align: center;
	width: 15em;
	height: 8em;
	padding: 0.2%;
  	border-radius: 1em;
	box-shadow: 0em 0em 1em 0em #fff;
	margin: 0.5em
}

.bannerGame a:link {color:#818181;}
.bannerGame a:visited {color:#818181;}
.bannerGame a:hover {color:#F6D100;}
.bannerGame a:active {color:#818181;}

.gameImage {
    width:50%;
    text-align:center;
}

.bannerHolder {
    width:100%;
    text-align:center;
}


.getItHolder {
    width:100%;
    text-align:center;
}

.getIt {
	font-size: 0.5em;
	background-color: #000000;
    display: inline-block;
    flex-direction: column;
	text-align: center;
	width: 30%;
	padding: 0%;
}

.bannerDemo {
	font-size: 2em;
	background-color: #000000;
    display: inline-block;
    flex-direction: column;
	text-align: center;
	width: 8em;
	height: 5.5em;
	padding: 0% 1% 0.5% 1%;
  	border-radius: .5em;
	box-shadow: 0em 0em 1em 0em #fff;
	margin: 0.5em
}

.bannerDemo a:link {color:#818181;}
.bannerDemo a:visited {color:#818181;}
.bannerDemo a:hover {color:#F6D100;}
.bannerDemo a:active {color:#818181;}

.wipHolder {
	font-size: 1em;
    width:100%;
    text-align:left;
    background-color: #3a3255; /* Black */
	padding: 1% 1% 1% 1%;
}

.wip {
	font-size: 4em;
	background-color: #000000;
    display: inline-block;
    flex-direction: column;
	text-align: center;
	width: 4em;
	height: 2.35em;
	padding: 1% 1% 1% 1%;
  	border-radius: .15em;
}

.wipText {
	font-size: 1em;
    display: inline-block;
    flex-direction: column;
	text-align: left;
	vertical-align: top;
	width: 30em;
	height: 2.35em;
	margin: -1% 0% 0% 0%;
	padding: 1% 0% 1% 0%;
}



.banner {
/*    border: 1rem ridge #877BB1;
    padding: 2rem;
*/    
	background-color: #3a3255;
    display: inline-block;
    flex-direction: column;
	width: 19em;
	height: 19em;
	padding: 1% 0.5% 2% 0.5%
}

.playTP {
/*    border: 1rem ridge #877BB1;
    padding: 2rem;
*/    
	background-color: #3a3255;
    display: inline-block;
    flex-direction: column;
	width: 19em;
	height: 9em;
	padding: 0%;
}



.choices {
/*    border: 1rem ridge #877BB1;
    padding: 2rem;
*/    
	background-color: #3a3255;
    display: inline-block;
    flex-direction: column;
	width: 33%;
	height: 15%;
	padding: 0%;
}

.choices h1 {
	text-align: center;
}
a, u {
    text-decoration: none;
}
/* When you mouse over the navigation links, change their color */
.choices :hover {
    color: #F6D100
}

.topmenu {
/*    border: 1rem ridge #877BB1;
    padding: 2rem;
*/
	font-size: 1.5em;
	background-color: #3a3255;
    display: inline-block;
    flex-direction: column;
	width: auto;
	height: auto;
	padding: 0.15em 0.5em;
}

.topmenu h3 {
	text-align: center;
}
/*.topmenu a {
    padding: 1% 0% 1% 10%;
    text-decoration: none;
    font-size: 2em;
    color: #818181;
    display: block;
}

*//* When you mouse over the navigation links, change their color */
.topmenu :hover {
    color: #F6D100
}


/*
@media screen and (max-width : 3455px ){
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
	

	
}

*/.PromoImage {
    display: inline-block;
    flex-direction:column;
	width: 16em;
	height: 10em;
	font-size: 1em;
	overflow: hidden;
}

.PromoText {
    display: inline-block;
    flex-direction:column;
	padding-left: 1em;
	width: 60em;
	height: 10em;
	font-size: 1em;
	overflow: hidden;
}

.StoryBookImage {
    display: inline-block;
    flex-direction:column;
	width: 16em;
	height: 13em;
	font-size: 1em;
	overflow: hidden;
}

.StorybookText {
    display: inline-block;
    flex-direction:column;
	padding-left: 1em;
	width: 60em;
	height: 13em;
	font-size: 1em;
	overflow: hidden;
}

.ShaderImage {
    display: inline-block;
    flex-direction:column;
	width: 16em;
	height: 11em;
	font-size: 1em;
	overflow: hidden;
}

.ShaderText {
    display: inline-block;
    flex-direction:column;
	padding-left: 1em;
	width: 60em;
	height: 11em;
	font-size: 1em;
	overflow: hidden;
}

.PDImage {
    display: inline-block;
    flex-direction:column;
	width: 16em;
	height: 20em;
	font-size: 1em;
	overflow: hidden;
}

.PDText {
    display: inline-block;
    flex-direction:column;
	padding-left: 1em;
	width: 60em;
	height: 20em;
	font-size: 1em;
	overflow: hidden;
}

.EmptySpace {
    display: inline-block;
    flex-direction:column;
	padding-left: 1em;
	width: 100%;
	height: 20em;
	font-size: 1em;
	overflow: hidden;
	text-align: left;
	padding: 2em;
}

.EventDate {
    display: inline-block;
    flex-direction:column;
	width: 6em;
	height: 6em;
	font-size: .5em;
	overflow: hidden;
	background-color: white;
	color: red;
	vertical-align: top;
	text-align: center;
	padding-bottom: 2;
}

.EventDate h1 {
	color: black;
	font-size: 5em;
}

.EventDetail {
    display: inline-block;
    flex-direction:column;
	width: 34em;
	height: 4.5em;
	font-size: 1em;
	overflow: hidden;
	padding-left: 2em;
}

.PaulImage {
    display: inline-block;
    flex-direction:column;
	float: left;
	width: 14.6em;
	height: 20em;
	font-size: 1em;
	overflow: hidden;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	
}

.LD {
    display: inline-block;
    flex-direction:column;
	width: 68em;
	height: 28em;
	font-size: 1em;
	overflow: hidden;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	
}

.Location {
    display: inline-block;
    flex-direction:column;
	width: 68em;
	height: 27em;
	font-size: 1em;
	overflow: hidden;
	padding-right: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	
}

.Bullet {
    display: inline-block;
    flex-direction:column;
	width: 40em;
	height: 13em;
	font-size: 1.5em;
	overflow: hidden;
	padding-left: 2em;
}