/* #gigs-header img {display:block;max-width:100%;height:auto;margin:auto;
		border-radius:1rem;padding:0;}
#gigs-header  {font-size:2rem;text-align:center;}*/
#past {text-align:right;font-style:italic;padding-right:1rem;max-width:1000px;
				margin:auto;text-shadow: 0 0 8px #000, 0 0 6px #000, 0 0 4px #000;}

/* jquery.balancetext.js plugin looks for elements with class named "balance-text" */
.balance-text {text-wrap: balanced;}  /* Apply (proposed) CSS style using JS plugin*/
.even {background-color:#666;}
.odd { background-color:#333;}
#gig_wrapper {	background-color:black;
				border-radius:1rem;
				padding:0.5rem;
				max-width:1000px;
				margin:auto;
}
.gig {display:flex;justify-content:flex-start;
		align-items:flex-start;flex-wrap:nowrap;align-content:center;
		margin-bottom:1rem;padding:0.3rem;border-radius:0.3rem;}
.date_col,.venue_col,.comments_col {text-align:center;}

@media (min-width:601px)
{
	.gig {flex-direction:row;}
	.date_col,.venue_col,.comments_col {min-width:200px;}
	.date_col,.venue_col {width:33%;}
	.comments_col {width:34%;}
	.date_comma:before {content:",";}
}

@media (max-width:600px)
{
	.gig {flex-direction:column;}
	.date_col,.venue_col,.comments_col {width:100%;}
	.date_comma:before {content:",";}
	.venue,.date {font-weight:bold;}
}




/*

<div id="gig_wrapper">  COLUMNS NOWRAP/WRAP

<div class="gig odd"> ROW/COLUMN
	<div class="date_col">
		<div class="date"> </div>
		<div class="time"> </div>
	</div>
	<div class="venue_col">
		<div class="venue balance-text"><a href="http://groovininnewfairfield.com" target="_blank">Groovin' in New Fairfield</a></div>
		<div class="city_line"><span class="city">New Fairfield</span><span class="state">, CT</span></div>
		<div class="street">New Fairfield Senior Center</div>
		<div class="cross">33 Rt. 37</div>
		<div class="phone_price_line"><span class="price"> $10</span></div>
	</div>
	<div class="comments_col">
		<div class="title">Chris Trapper, Matt Turk with special guest Jacob Bernz</div>
	</div>
</div>

	.date {order:1;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
	.time{order:2;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
	.venue {order:3;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
	.city_country {order:4;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;
		display:flex;flex-direction:row;justify-content:flex-start;
		align-items:center;flex-wrap:wrap;align-content:center;}
			.city {order:1;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
			.state {order:2;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
			.zip {order:3;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
			.country {order:4;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
	.street {order:5;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
	.cross {order:6;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
	.phone {order:7;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
	.tickets {order:8;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;}
	.title {order:9;flex-grow:0; flex-shrink:1; flex-basis:auto;align-self:auto;
			font-weight:bold;font-size:110%;text-align:center;}
	.comments {order:10;flex-grow:0; flex-shrink:1; flex-basis:auto;
		align-self:auto;text-align:center;}

}
@media (min-width:501px)
{
	#gig_wrapper_wide {min-width:501px;max-width:1000px;margin:auto;
		background-color:black;border-radius:1rem;padding:0.5rem ;}
	#gig_wrapper_narrow {display:none}
	.gig {display:flex;flex-direction:row;justify-content:space-between;
		align-items:flex-start;flex-wrap:wrap;align-content:center;
		margin-bottom:1rem;padding:0.3rem;border-radius:0.3rem;}


	.triope {width:calc(100% * (1/3) - 2px);}

	.date_col {width:33%;order:1;}
	.venue_col {width:33%;order:2;}
	.comments_col {width:33%;order:3;}

	.date {width:100%;font-weight:bold;}
	.time {width:100%;font-size:0.9rem;}

	.venue {width:100%;font-weight:bold;}
	.city_line {width:100%;}
	.city {}
	.state {}
	.zip {}
	.country {}
	.street,.cross {width:100%;font-size:0.9rem;}
	.phone_price_line {width:100%;font-size:0.9rem;}
	.phone {}
	.tickets {}
	.street {width:100%;}
	.cross {width:100%;}

	.title {width:100%;font-weight:bold;}
	.comments {width:100%;}

	.date_comma:before {content:",";}
}
*/