:root {
	--darkestColor:	#202529;
	--medium1Color:	#363D42;
	--medium2Color:	#505A61;
	--accentColor:		#40CFFF;
	--whitestColor:	#A1B4C4;
	
	--ginzaColor: #ff9500;
	--marunouchiColor: #f62e36;
	--hibiyaColor: #b5b5ac;
	--tozaiColor: #009bbf;
	--chiyodaColor: #00bb85;
	--yurakuchoColor: #c1a470;
	--hanzomonColor: #8f76d6;
	--nambokuColor: #00ac9b;
	--fukutoshinColor: #9c5e31;
}  





  
html, body {
	width: 100%;
	margin: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: var(--darkestColor);
	font-family: Verdana, sans-serif;
	color: var(--whitestColor);
}

a {
	color: var(--accentColor);
}

hr {
    height: 2px;
    border-width: 0;
    background-color: var(--whitestColor);
    margin: 20px 0px;
}

h3 {
	margin-top: 5px;
	color: var(--accentColor);
}

h4 {
	color: var(--accentColor);
}

p {
	font-size: 80%;
}

span {
	color:white;
}



.clearfix {
	clear: both;
}



/* DIV CLASSES */

.header {
	background-color: var(--medium1Color);
	margin: 0px;
	position: sticky;
	top: 0;
	width: 100%;
}

.header a {
	color: var(--whitestColor);
	text-decoration: none;
}



.titleBar {
	display: block;
	box-sizing: border-box;
	height: 34px;
	padding: 5px 10px;
}


.title {
	margin-top: 3px;
	float: left;
	font-size: 100%;
}


.navMenu {
	float: right;
}






.bankContainer {
	box-sizing: border-box;
	/* height: 45px; */
	width: 100%;
	background-color: var(--medium2Color);
	padding: 5px 10px;
	color: white;
	font-size: 90%;
	/* line-height: 140%; */
	clear: both;
}

.bank {
	width: 50%;
}
.bank.left {
	float: left;
}  
.bank.right {
	float: right;
}

.bank .description {
	color: var(--whitestColor);
}




.ticketPriceContainer {
	box-sizing: border-box;
	background-color: var(--medium1Color);
	padding: 8px 10px 7px;
	/* color: white; */
	font-size: 90%;
}







.main {
	display: inline-block;
	margin: 10px;
	/* box-sizing: border-box; */
	background-color: var(--medium1Color);
	padding: 10px;
	clear: both;
}

/* small phone screen */
@media screen and (max-width: 440px) {
	.main {
		margin: 10px 0px;
	}
}





.main.lines {
	padding: 10px 0px 10px 10px;
}


/* 3 columns */
.lineContainer {
	display: inline-block;
	float:left;
	box-sizing: border-box;
	/* height: 160px; */
	max-width: 33.33%;
	min-width: 33.33%;
	padding-right: 10px;
	margin: 10px 0px;
	/* margin-right: -10px; */
}

/* 400 px min, 10px center gutter, 20px on each side of window */

/* 2 columns */
@media screen and (max-width: 1260px) {
	.lineContainer {
		max-width: 50%;
		min-width: 50%;
		/* padding-right: 10px; */
		/* margin-right: -5px; */
	}
}

/* 1 column */
@media screen and (max-width: 850px) {
	.lineContainer {
		min-width: 100%;
		max-width: 100%;
	}
}


.line	{
	border: 1px solid var(--accentColor);
	/* background-color: var(--medium2Color); */
	/* border-radius: 0px 0px 10px 10px; */
	width: 100%;
	box-sizing: border-box;
	display: inline-block;
	float: left;
	/* margin: 15px 0px; */
}


.lineHead {
	background-color: var(--accentColor);
	color: white;
	font-weight: bold;
	/* margin: -10px -10px 10px -10px; */
	padding: 5px 10px;
}

.lineIcon {
	background-color: white;
	color: black;
	font-family: 'Lato', sans-serif;
	width: fit-content;
	border-radius: 15px;
	margin: -1px;
	padding: 1px 5px;
	font-size: 100%;
	display: inline;
	float: right;
}

.bodyItem {
	/* background-color: var(--medium2Color); */
	max-width: 30%;
	min-width: 25%;
	/* height: 130px; */
	margin: 7px 10px;
	font-size: 84%;
	overflow:hidden;
}
.bodyItem.one {float:left;}
.bodyItem.two {float:none; overflow:hidden; margin: 7px auto 7px;}
.bodyItem.three {float:right;}

/* super small phone screen */
@media screen and (max-width: 400px) {
	.bodyItem .accent {
	letter-spacing: -1px;
	}
}


#endMessage {
    display: none;
    text-align: center;
    clear: both;
}









.main.prestige {
	text-align: center;
}

.prestigeContainer {
	max-width: 640px;
	margin: 0px auto;
}


.shop {
	border: 1px solid var(--accentColor);
	width: 100%;
	max-width: 1260px;
	margin: 20px auto 0px;
	box-sizing: border-box;
	text-align: left;
	/* display: inline-block; */
	/* float: left; */
}

.shopHead {
	background-color: var(--accentColor);
	color: white;
	font-weight: bold;
	padding: 5px 10px;
}

.shopBank {
	background-color: var(--medium1Color);
	/* color: black; */
	/* border-radius: 15px; */
	margin-top: -1px;
	margin-right: -5px;
	padding: 1px 5px;
	font-size: 100%;
	display: inline;
	float: right;
}

.shopBank #prestige {
	color: white;
}

.shopInner {
	margin: 10px;
}

.lineContainer.upgrade {
    display: inline-block;
    height: 90px;
    /* min-height: 200px; */
    /* max-height: 200px; */
}







.main.options {
	text-align: center;
}

.optionsContainer {
	max-width: 640px;
	margin: 0px auto;
}







/* INLINE CLASSES */

.accent {
	color: var(--accentColor);
	font-weight: bold;
}

.description {
	font-size: 80%;
	margin: 2px 0;
	font-style: italic;
}

.maxStock {
	/* font-size: 80%; */
	color: var(--whitestColor);
	/* font-style: italic; */
}










/* BUTTON CLASSES */

.button {
	display: inline-block;
	background-color: var(--medium1Color);
	border: 1px solid var(--accentColor);
	margin: 5px 0px 0px;
	padding: 4px 10px;
	color: var(--whitestColor);
	font-weight: bold;
}

.button.nav {
	background-color:var(--medium2Color);
	border: none;
	margin: 0px;
	padding: 2px 25px;
}

@media screen and (max-width: 850px) {
	.button.nav {
		padding: 2px 10px;
	}
}

.button.nav.active {
	background-color:var(--accentColor);
	color: var(--darkestColor);
}

.button.nav.highlight {
	background-image: linear-gradient(to right, #fc00ff 0%, #00dbde  100%);
	color: white;
}


.button.price {
	background-color:var(--medium2Color);
	border: none;
    margin: 0px 3px;
	padding: 2px 6px;
    min-width: 20px;
	font-weight: normal;
}
@media screen and (max-width: 440px) {
	/* #setPriceButton { */
		/* display:none; */
	/* } */
    .button.price {
        margin: 0px 6px;
    }
}


.button.buyAll {
	background-color:var(--medium2Color);
    display: block;
	border: none;
    margin: 0px;
    padding-right: .5%;
    padding-left: .5%;
    width: 33%;
	font-weight: normal;
}







.button.buy {
	padding: 5px 1px;
	width: 74%;
	height: 30px;
	float: left;
	font-size: 80%;
	line-height: 100%;
	overflow: hidden;
}

.button.buy.max {
	padding: 3px 1px;
	width: 24%;
	background-color:var(--accentColor);
	border: none;
	color: white;
	font-size: 75%;
	line-height: 100%;
	float: right;
}









.button.prestige {
	background-image: linear-gradient(to right, #fc00ff 0%, #00dbde  51%, #fc00ff  100%);
	/* margin: 10px; */
	border: none;
	padding: 5px 20px;
	text-align: center;
	font-size: 90%;
	text-transform: uppercase;
	transition: 0.5s;
	background-size: 200% auto;
	color: white;            
	/* border-radius: 10px; */
	/* display: block; */
}

.button.prestige:hover {
	background-position: right center; /* change the direction of the change here */
	color: #fff;
	text-decoration: none;
	box-shadow: 0 0 50px 10px #eee;
	letter-spacing: 3px;

}
         


















.footer {
	width: 100%;
	margin: 10px auto;
	color: var(--medium2Color);
	text-align: center;
	font-size: 80%;
}

.footer a {
	color: var(--medium2Color);
}









#ginza { --accentColor: var(--ginzaColor); }
#marunouchi { --accentColor: var(--marunouchiColor); }
#hibiya { --accentColor: var(--hibiyaColor); }
#tozai { --accentColor: var(--tozaiColor); }
#chiyoda { --accentColor: var(--chiyodaColor); }
#yurakucho { --accentColor: var(--yurakuchoColor); }
#hanzomon { --accentColor: var(--hanzomonColor); }
#namboku { --accentColor: var(--nambokuColor); }
#fukutoshin { --accentColor: var(--fukutoshinColor); }

#ginzaBody { display:none; } 

#marunouchiHead { display:none; }
#marunouchiBody { display:none; }

#hibiyaHead { display:none; }
#hibiyaBody { display:none; }

#tozaiHead { display:none; }
#tozaiBody { display:none; }

#chiyodaHead { display:none; }
#chiyodaBody { display:none; }

#yurakuchoHead { display:none; }
#yurakuchoBody { display:none; }

#hanzomonHead { display:none; }
#hanzomonBody { display:none; }

#nambokuHead { display:none; }
#nambokuBody { display:none; }

#fukutoshinHead { display:none; }
#fukutoshinBody { display:none; }  



/* #upgrade1 { display:none; } */
/* #upgrade2 { display:none; } */
/* #upgrade3 { display:none; } */
/* #upgrade4 { display:none; } */
/* #upgrade5 { display:none; } */
/* #upgrade6 { display:none; } */
/* #upgrade7 { display:none; } */













#linesTab { display: block; }
#prestigeTab { display: none; }
#optionsTab { display: none; }