body {
	margin: 0 auto;
	max-width: 56em;max-width: 60em;
	padding: 0;
}

div, figure, figcaption, h1, h2, p, ul, li { margin:0;padding:0;border:0; }



.container { 
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-gap: 0;
	grid-column-gap: 0;
	background:transparent;
	position:relative;
}    

.stripes {grid-column:1 / 6;  min-height:.75em; display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-gap: 0;
}

.stripes div:nth-of-type(1) {background:#fff02a;}
.stripes div:nth-of-type(2) {background:#ea148c;}
.stripes div:nth-of-type(3) {background:#00a453;}
.stripes div:nth-of-type(4) {background:#00afec;}
.stripes div:nth-of-type(5) {background:#eb212e;}


a {text-decoration:none; color:#000;}
a:hover {text-decoration:underline;color:#ea148c;}
a:active {color:#00a453;}


img {width:100%;height:auto;}


@font-face {
font-family: Tex-R;
src: url('fonts/TeX-Gyre-Adventor/texgyreadventor-regular.otf')  format('truetype');
}

@font-face {
font-family: Tex;
src: url('fonts/TeX-Gyre-Adventor/texgyreadventor-bold.otf')  format('truetype');
}

@font-face {
font-family: Tex-Italic;
src: url('fonts/TeX-Gyre-Adventor/texgyreadventor-bolditalic.otf')  format('truetype');
}

body {font-family: Tex; line-height: 1.25rem;}



.nav { grid-column: 1 / 6;  background:transparent; position:relative; }


.nav {
	display: grid;
	grid-template-columns: repeat(12, [col] 1fr );
	grid-template-rows: auto;
	grid-gap: 1em;
	grid-row-gap: .5em;
	padding-bottom:.5em;
}

#head h1 { grid-column: 1 / 6; }

ul { padding:.5em 0; margin: 0 0 0 auto;  grid-row:2; }
li { display: inline-block; padding: .5em 0; }


.nav a {margin-left:.25em; font-size:1.25em; }
.nav a.off { text-decoration: line-through; }



#head h1 {font-family: Tex;font-size:2.8em;margin-left:0;line-height:.8em;letter-spacing:-.075em;}

#head h1 i {font-style:normal;}

#head h1 a { color:#000;  }

#head h1 span { display: block; white-space: nowrap; }

#head h1 span:nth-of-type(1) { line-height:.7em; margin-left:0; font-size:1.25em; margin-left:.05em; }

#head h1 span:nth-of-type(1) i:nth-of-type(1) { text-transform: lowercase !important; }

#head h1 span:nth-of-type(2) { font-size:1.5em; }

#head h1 span:nth-of-type(2) i:nth-of-type(1) { font-size:.75em; }

#head h1 span:nth-of-type(2) var i { font-size:1em; color:#f00; }

#head h1 span:nth-of-type(2) var i:nth-of-type(3) { text-transform: uppercase !important; font-size:.75em; }

#head h1 span:nth-of-type(3) { font-family: Tex-Italic; line-height:1em; margin-left:.9em; letter-spacing:-.75px; }

#head h1 small i { text-transform: lowercase !important; }

#head h1 i:hover, #head h1 var i:hover  { font-size:2em !important; }

h1 {perspective: 360px;padding-left:1em;}
h1 span {transform: rotateY(-10deg);}
h1 span:nth-of-type(2) {transform: rotateY(15deg);}
h1 span:nth-of-type(3) {transform: rotateY(25deg);}




div.triangle {
	grid-column: 1 / 6; 
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-gap: 0; 
}


div.triangle div {
position:absolute; right:0;top:-1em;
height:0;width:0;
border-style: solid;
border-width: 0 0 25em 16em;
border-color: transparent transparent #a5a5a5 transparent;
background:transparent !important;
z-index: -10;
}

h2 { 
text-transform: uppercase;
font-family: Tex-Italic; font-size:2em; line-height:1.0; margin: .125 0 .25 0;
grid-column: 1 / 9; 
}


.content { grid-column: 1 / 6; padding-top:.25em; }


.gig { grid-column: 1 / 6; padding:20px; }

.gig:nth-of-type(5n+1), figure {background:#fff02a;}  /* yellow */
.gig:nth-of-type(5n+2) {background:#ea148c;}	/* pink */
.gig:nth-of-type(5n+3) {background:#00a453;}	/* green */
.gig:nth-of-type(5n+4) {background:#00afec;}	/* blue */
.gig:nth-of-type(5n+5) {background:#eb212e;}	/* red */




.gig { display: grid;
     grid-template-columns: 240px auto;
     grid-auto-rows: auto;
     grid-gap: 4px;
     grid-column-gap: 20px;
}

.gig p {background:#fff;line-height:1.5em; margin-bottom:.25em;}
       
.gig img {grid-column: 1/ 3;}
.gig figcaption {grid-column: 1 / 3;}


.gig-future, .gig-title { text-transform: uppercase; }

.gig-blurb:before { content: "• ";}
.gig-blurb:after { content: " •";}

#foot { font-size:.75em; }


/* For devices larger than 400px */
@media (min-width: 400px) {
	#head h1 {grid-row:1;}
	ul { padding-top:0; padding-right:0; grid-column: 1 / 13; grid-row: 2;}
	
	
	#foot ul { margin-right:0;padding-top:1em; padding-bottom:0;}
	#foot a { font-size:.95em; }
		
	div.triangle div { border-width: 0 0 24em 48em; }

	h2 { font-size:3em; }
	
	.gig img {grid-row: 1; grid-column: 1 / 2; }
	.gig figcaption {grid-column: 2 / 3; }

}