h1 {
	font-family:		Georgia, serif;
	font-size: 			9.6em;
	line-height: 		1.0em;
	color: 				#FFFFFF;
	/*text-shadow: 		0px 4px 4px #000000;*/
}

h2 {
	font-family:		Times New Roman, serif;
	font-size:			3.2em;
	color:				#000000;
	line-height:		1.0em;
	background-color: 	#FFFFFF;
	padding:			8px;

	box-sizing:			border-box;

	border-left:		2px solid #000000;
	border-right:		2px solid #000000;
	border-top:			2px solid #000000;
	border-bottom:		2px solid #000000;
}

body {
	margin:				0px;
	padding:			0px;
	font-family:		Arial;
	background-color:	#FFFFFF;
	font-size:			10px;	/*base for all em font sizes*/
	line-height:		1.5em;
	color:				#000000;
}

.DIV_FLEX_HEADER {
	display:			flex;
	position:			relative;
	flex-wrap:			wrap;
	justify-content:	center;
	box-sizing:			border-box;
	top:				0px;
	height:				fit-content;

	background-color:	#FFFFFF;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		4px solid #000000;
	border-right:		4px solid #000000;
	border-top:			4px solid #000000;
	border-bottom:		0px solid #000000;

}

.DIV_FLEX_BODY {
	display:			flex;
	position:			relative;
	flex-wrap:			wrap;
	justify-content:	center;
	box-sizing:			border-box;
	top:				0px;
	height:				fit-content;

	background-color:	#FFFFFF;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		4px solid #000000;
	border-right:		4px solid #000000;
	border-top:			4px solid #000000;
	border-bottom:		0px solid #000000;

}

.DIV_FLEX_FOOTER {
	display:			flex;
	position:			relative;
	flex-wrap:			wrap;
	justify-content:	center;
	box-sizing:			border-box;
	top:				0px;
	height:				fit-content;

	background-color:	#FFFFFF;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		4px solid #000000;
	border-right:		4px solid #000000;
	border-top:			4px solid #000000;
	border-bottom:		4px solid #000000;

}

.DIV_header_logo {
	display:			flex;
	justify-content:	center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	transparent;


	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #CCCCCC;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #CCCCCC;
	border-bottom:		0px solid #CCCCCC;

	box-sizing:			border-box;

	text-align:			center;

	font-weight:		normal;
	font-size:			6.4em;
	line-height:		1.5em;
	color:				#000000;
	/*text-shadow:		0px 4px 8px #000000;*/
}

.DIV_header_logo img {
	max-width: 80%;
}

.DIV_header_url {
	display:			flex;
	justify-content:	center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	transparent;


	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #CCCCCC;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #000000;
	border-bottom:		0px solid #000000;

	box-sizing:			border-box;

	text-align:			center;
	font-family:		Courier;
	font-weight:		normal;
	font-style:			italic;
	font-size:			1.6em;
	line-height:		1.5em;
	color:				#999999;
	/*text-shadow:		0px 4px 8px #000000;*/
}

.DIV_header_tagline {
	display:			flex;
	justify-content:	center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	transparent;


	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #CCCCCC;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #000000;
	border-bottom:		0px solid #000000;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		normal;
	font-size:			3.2em;
	line-height:		1.5em;
	color:				#333333;
/*	text-shadow:		0px 2px 4px #000000;*/
}


.DIV_body_intro_container {
	display:			flex;
	justify-content:	center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	#FFFFFF;


	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #CCCCCC;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #000000;
	border-bottom:		0px solid #000000;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		normal;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#333333;
/*	text-shadow:		0px 2px 4px #000000;*/
}


.DIV_header_002B {
	display:			flex;
	justify-content:	center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	#FFFFFF;


	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #CCCCCC;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #000000;
	border-bottom:		8px solid #CCCCCC;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		normal;
	font-size:			3.2em;
	line-height:		1.5em;
	color:				#999999;
/*	text-shadow:		0px 2px 4px #000000;*/
}



.t_cola {
	color: #996633;
}

.t_fruity_1 {
	color: #FF3333;
}

.t_fruity_2 {
	color: #FF9933;
}

.t_fruity_3 {
	color: #33CC33;
}

.t_fruity_4 {
	color: #CC00CC;
}

.t_unique {
	color: #993366;
}

.t_variations {
	font-size:		1.0em;	/*in a container with 2.4em already*/
	color:			#999999;
	font-style:		italic;
}

.flex_pad {
	display:			flex;
	justify-content:	center;
	align-items:		center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	transparent;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		4px;
	padding-bottom:		4px;

	border-left:		0px solid #FFFF00;
	border-right:		0px solid #FFFF00;
	border-top:			0px solid #FFFF00;
	border-bottom:		0px solid #FFFF00;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#000000;
}

.flex_pad_vote_data {
	display:			flex;
	justify-content:	center;
	/*align-items:		center;*/
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	#FFFFFF;

	margin-left:		auto;
	margin-right:		auto;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #FFFF00;
	border-right:		0px solid #FFFF00;
	border-top:			0px solid #FFFF00;
	border-bottom:		0px solid #FFFF00;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#FFFFFF;
}



.block_pad_intro {
	display:			block;
	justify-content:	center;
	align-items:		center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	transparent;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		32px;
	padding-right:		32px;
	padding-top:		32px;
	padding-bottom:		32px;

	border-left:		0px solid #FFFF00;
	border-right:		0px solid #FFFF00;
	border-top:			0px solid #FFFF00;
	border-bottom:		0px solid #FFFF00;

	box-sizing:			border-box;

	text-align:			left;
	font-weight:		normal;
	font-size:			1.0em;
	line-height:		1.5em;
	color:				#000000;
}

.block_pad_timer {
	display:			block;
	justify-content:	center;
	align-items:		center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	#FFFFFF;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		32px;
	padding-right:		32px;
	padding-top:		32px;
	padding-bottom:		32px;

	border-left:		0px solid #FFFF00;
	border-right:		0px solid #FFFF00;
	border-top:			0px solid #FFFF00;
	border-bottom:		0px solid #FFFF00;

	box-sizing:			border-box;

	text-align:			left;
	font-weight:		normal;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#333333;
}

.voting_data_total_votes {
	display:			block;
	position:			relative;

	top:				0px;
	height:				fit-content;
	width:				fit-content;

	background-color:	#FFFFFF;

	margin-left:		auto;
	margin-right:		auto;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		8px;
	padding-right:		8px;
	padding-top:		8px;
	padding-bottom:		8px;

	border-left:		2px solid #000000;
	border-right:		2px solid #000000;
	border-top:			2px solid #000000;
	border-bottom:		2px solid #000000;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			0.66em;	/*in a container with a em of 2.4*/
	line-height:		1.0em;
	color:				#000000;
}

.space_bar_32 {
	display:			flex;
	justify-content:	center;
	align-items:		center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				32px;
	width:				100%;

	background-color:	#FFFFFF;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #CCCCCC;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #FFFF00;
	border-bottom:		0px solid #FFFF00;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#000000;
}

.space_bar_256_bottom {
	display:			flex;
	justify-content:	center;
	align-items:		center;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				256px;
	width:				100%;

	background-color:	#FFFFFF;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #CCCCCC;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #FFFF00;
	border-bottom:		4px solid #000000;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#000000;
}

.bar_graph_container {
	display:			flex;
	justify-content:	left;
	/*align-items:		center;*/
	position:			relative;

	flex-wrap:			nowrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	#FFFFFF;

	margin-left:		10%;
	margin-right:		10%;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		2px solid #000000;
	border-right:		2px solid #000000;
	border-top:			2px solid #000000;
	border-bottom:		0px solid #000000;

	box-sizing:			border-box;

	text-align:			center;
	font-family:		Arial;
	font-size:			0.66em;
	line-height:		1.0em;
	color:				#000000;
}

.bar_graph_bottom {
	border-bottom:		2px solid #000000;
}
.bar_graph {
	display:			flex;
	justify-content:	left;
	align-items:		left;
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;

	height:				32px;
	width:				10%;

	background-color:	#FF0000;

	margin-left:		0px;
	margin-right:		0px;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		2px solid #000000;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #FFFF00;
	border-bottom:		0px solid #FFFF00;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#000000;
}

.countdown_timer {
	position:			relative;
	display:			block;
	top:				0px;
	width:				fit-content;
	margin-top:			0px;
	margin-left:		auto;
	margin-right:		auto;
	margin-bottom:		0px;
	padding:			8px;

	background-color:	#FFCCCC;
	border:				4px solid #000000;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			1.0em;	/*in 2.4em container*/
	line-height:		1.5em;
	color:				#000000;
}

.connected_bar {
	position: 			relative;
	display: 			block;
	top: 				0px;
	height: 			fit-content;
	width: 				fit-content;
	margin-top: 		0px;
	margin-left: 		auto;
	margin-right: 		auto;
	margin-bottom: 		32px;
	padding: 			8px;
	color: 				#FFFFFF;
	font-size: 			12px;
	font-family: 		Courier;
	line-height: 		16px;
	background-color: 	#333333;
}

.canvas_wrapper_pie {
	display:			flex;
	justify-content:	center;
	/*align-items:		center;*/
	position:			relative;

	flex-wrap:			wrap;
	top:				0px;
	height:				fit-content;
	width:				100%;

	background-color:	transparent;

	margin-left:		auto;
	margin-right:		auto;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #FFFF00;
	border-right:		0px solid #FFFF00;
	border-top:			0px solid #FFFF00;
	border-bottom:		0px solid #FFFF00;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#FFFFFF;
}

.canvas_pie {
	display:			flex;
	justify-content:	center;
	align-items:		center;
	position:			relative;

	flex-wrap:			nowrap;
	top:				0px;
	height:				fit-content;
	width:				33%;

	background-color:	#FFFFFF;

	margin-left:		auto;
	margin-right:		auto;
	margin-top:			0px;
	margin-bottom:		0px; 

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		0px solid #CCCCCC;
	border-right:		0px solid #CCCCCC;
	border-top:			0px solid #FFFF00;
	border-bottom:		0px solid #FFFF00;

	box-sizing:			border-box;

	text-align:			center;
	font-weight:		bold;
	font-size:			2.4em;
	line-height:		1.5em;
	color:				#000000;
}

.soda_button {
	display:			inline-block;
	margin:				8px;
	padding:			16px;
	height:				fit-content;
	width:				fit-content;


	border:				4px solid #FFCCCC;
	box-sizing:			border-box;
	border-radius:		16px;


	text-align:			center;
	font-weight:		bold;
	font-size:			2.4em;
	line-height:		0em;
	color:				#FFFFFF;

	background-color:	#333333;
	box-shadow:			0px 4px 8px #333333;

	cursor:				not-allowed;
}

.soda_button:hover {
	box-shadow:			0px 2px 4px #333333;
}

.soda_button:active {
	box-shadow:			0px 2px 4px #333333;
}

.soda_button img {
	height:		32px;
	width:		64px;
}

.voting_data {
	display:			flex;
	position:			relative;

	top:				0px;
	height:				fit-content;
	width:				fit-content;

	background-color:	#FFFFFF;

	margin-left:		auto;
	margin-right:		auto;
	margin-top:			2px;
	margin-bottom:		2px; 

	padding-left:		0px;
	padding-right:		24px;
	padding-top:		0px;
	padding-bottom:		0px;

	border-left:		2px solid #000000;
	border-right:		2px solid #000000;
	border-top:			2px solid #000000;
	border-bottom:		2px solid #000000;

	box-sizing:			border-box;

	text-align:			center;
	text-shadow:		0px 1px 2px #000000;
	font-family:		Arial;
	font-weight:		bold;
	font-size:			0.66em;
	line-height:		2.0em;
	color:				#FFFFFF;
}
.voting_data img {

	vertical-align: 	middle;

	margin-left:		auto;
	margin-right:		auto;
	margin-top:			0px;
	margin-bottom:		0px;

	padding-left:		0px;
	padding-right:		0px;
	padding-top:		0px;
	padding-bottom:		0px;
}

/*SODA BUTTON BACKGROUND COLORS*/
.bg_7up				{background-color:	#00AE43;}
.bg_aw				{background-color:	#E5672D;}
.bg_barqs			{background-color:	#B2B9BD;}
.bg_canada_dry		{background-color:	#006634;}
.bg_coke			{background-color:	#CB322D;}
.bg_crush			{background-color:	#F5821F;}
.bg_dr_pepper		{background-color:	#7C0023;}
.bg_fanta			{background-color:	#FD8204;}
.bg_mello_yello		{background-color:	#FDEF00;}
.bg_mt_dew			{background-color:	#08703D;}
.bg_mug				{background-color:	#673B1C;}
.bg_pepsi			{background-color:	#0062A8;}
.bg_pibb			{background-color:	#A23129;}
.bg_rc				{background-color:	#00539A;}
.bg_schweppes		{background-color:	#2A5527;}
.bg_sprite			{background-color:	#02A04C;}
.bg_squirt			{background-color:	#F6DF60;}
.bg_starry			{background-color:	#FAE400;}
.bg_sunkist			{background-color:	#F48A00;}
.bg_surge			{background-color:	#B2D234;}

/*SODA BUTTON BORDER COLORS*/
.bc_7up				{border-color:	#00AE43;}
.bc_aw				{border-color:	#E5672D;}
.bc_barqs			{border-color:	#B2B9BD;}
.bc_canada_dry		{border-color:	#006634;}
.bc_coke			{border-color:	#CB322D;}
.bc_crush			{border-color:	#F5821F;}
.bc_dr_pepper		{border-color:	#7C0023;}
.bc_fanta			{border-color:	#FD8204;}
.bc_mello_yello		{border-color:	#FDEF00;}
.bc_mt_dew			{border-color:	#08703D;}
.bc_mug				{border-color:	#673B1C;}
.bc_pepsi			{border-color:	#0062A8;}
.bc_pibb			{border-color:	#A23129;}
.bc_rc				{border-color:	#00539A;}
.bc_schweppes		{border-color:	#2A5527;}
.bc_sprite			{border-color:	#02A04C;}
.bc_squirt			{border-color:	#F6DF60;}
.bc_starry			{border-color:	#FAE400;}
.bc_sunkist			{border-color:	#F48A00;}
.bc_surge			{border-color:	#B2D234;}

/*SODA TEXT COLORS*/
.t_7up				{color:	#00AE43;}
.t_aw				{border-color:	#E5672D;}
.t_barqs			{border-color:	#B2B9BD;}
.t_canada_dry		{border-color:	#006634;}
.t_coke				{border-color:	#CB322D;}
.t_crush			{border-color:	#F5821F;}
.t_dr_pepper		{border-color:	#7C0023;}
.t_fanta			{border-color:	#FD8204;}
.t_mello_yello		{border-color:	#FDEF00;}
.t_mt_dew			{border-color:	#08703D;}
.t_mug				{border-color:	#673B1C;}
.t_pepsi			{border-color:	#0062A8;}
.t_pibb				{border-color:	#A23129;}
.t_rc				{border-color:	#00539A;}
.t_schweppes		{border-color:	#2A5527;}
.t_sprite			{border-color:	#02A04C;}
.t_squirt			{border-color:	#F6DF60;}
.t_starry			{border-color:	#FAE400;}
.t_sunkist			{border-color:	#F48A00;}
.t_surge			{border-color:	#B2D234;}





/*MEDIA SCALING*/

@media (max-width: 1000px) {
body {font-size: 10px}
}

@media (max-width: 900px) {
body {font-size: 9px}
}

@media (max-width: 800px) {
body {font-size: 8px}
}

@media (max-width: 700px) {
body {font-size: 7px}
}

@media (max-width: 600px) {
body {font-size: 6px}
}