/**********************/
/*                    */
/* Reset & Global     */
/*                    */
* {
	padding:0;
	margin:0;
	list-style:none;
	outline:none;
	font-family:'Roboto',sans-serif;
}

img {
	width: 100%;
	margin: 0 auto;
	max-width: 470px;
}

/**********************/
/*                    */
/* Main Layout.   	  */
/*                    */
#content {
	height: 100vh;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows: 402px 76px minmax(280px,1fr) 1fr 86px;
	grid-gap: 0;
	grid-template-areas:
		"header header header"
		"featured_headline featured_headline featured_headline" 
		"featured_article_one featured_article_two featured_article_three" 
		"upcoming_shows_content upcoming_shows_content upcoming_shows_content" 
		"footer footer footer";
}

header {
	grid-area:header;
	display:flex;
	flex-direction:row;
	align-items:flex-end;
}

#featured_headline {
	grid-area:featured_headline;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

#featured_article_one {
	grid-area:featured_article_one;
}

#featured_article_two {
	grid-area:featured_article_two;
}

#featured_article_three {
	grid-area:featured_article_three;
}

.featured_article {
	padding:10px;
	text-align: center;
}

#upcoming_shows_content {
	grid-area:upcoming_shows_content;
}

#upcoming_shows_content {
	display: grid;
	grid-template-columns: 1fr minmax(300px, 2.8fr) minmax(300px, 2.8fr) 1fr;
	grid-template-rows: 62px 172px 172px 1fr 1fr 40px;
	grid-column-gap: 15px;
	grid-row-gap: 15px;
	grid-template-areas: ". shows_title tickets_title ."   ". shows_area early_bird_ticket_area ."   ". shows_area regular_ticket_area ." " . show_area . ." ". show_area . .";
}

#shows_area {
	grid-area: shows_area;
}

#ticket_area {
	grid-area: ticket_area;
}

#shows_title {
	grid-area: shows_title;
}

#tickets_title {
	grid-area: tickets_title;
}

#early_bird_ticket_area {
	grid-area: early_bird_ticket_area;
}

#regular_ticket_area {
	grid-area: regular_ticket_area;
}

footer {
	grid-area:footer;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

/**********************/
/*                    */
/* Individual layout  */
/*                    */
header {
	background-image:url(/images/jaguar-etype.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center 30%;
}

nav {
	display:flex;
	flex-direction:row;
	align-items:stretch;
	width:100%;
}

nav {
	display:flex;
	flex-direction:row;
	align-items:flex-end;
	justify-content:center;
}

nav #logo {
	flex:13;
	padding:5px 20px;
	color:#fff;
	font-family:'Roboto Slab',serif;
	font-weight:300;
	font-size:60px;
	text-shadow:0 0 8px rgba(0,0,0,1);
}

nav a {
	flex:1;
	padding:15px;
	color:white;
	opacity: 0.8;
	font-family:'Roboto Slab',serif;
	text-decoration:none;
	letter-spacing: 1px;
}


#featured_headline h2,
#show_area h2,
#ticket_area h2 {
	margin: 0 0 7px 0;
	font-family:'Roboto Slab',serif;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 23px;
	color: black;
	opacity: 0.8;
}

.fancy {
	line-height:.5;
	text-align:center;
}

.fancy span {
	display:inline-block;
	position:relative;
}

.fancy span:before,.fancy span:after {
	content:"";
	position:absolute;
	height:5px;
	border-bottom:2px solid #000;
	border-top:0px solid #000;
	top:0;
	width:20px;
}

.fancy span:before {
	right:100%;
	margin-right:15px;
}

.fancy span:after {
	left:100%;
	margin-left:15px;
}

.featured_article .footer {
	width: 100%;
	margin: -4px auto 0;
	max-width: 470px;
}

.featured_article .footer .description {
	background-color: #eee;
	border: 1px solid #ccc;
	line-height: normal;
	text-align: left;
	color: #333;
	padding: 2.5px 10px;
}

footer {
    background-color: #333333;
}

footer p {
    color: white;
    padding: 15px;
    opacity: 0.7;
    font-size: 12px;
    flex: 17;
}

footer i {
    flex: 1;
    text-align: center;
    color: white;
    font-size: 38px!important;
    opacity: 0.8;
}

#tickets_title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-transform: uppercase;
    margin: 0 0 2px 0;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.5px;
    font-family: 'Roboto Slab',serif;
}

#shows_title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-transform: uppercase;
    margin: 0 0 2px 0;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.5px;
    font-family: 'Roboto Slab',serif;
}

#shows_area > ul {
    display: flex;
    flex-direction: column;
}

#shows_area > ul > li {
    display: flex;
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 6px;
    margin-top: -1px;
}

#shows_area .date_area {
    flex: 1;
    max-width: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #d0d0d0;
}

#shows_area .date_area .month {
    color: #d80101;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 1px;
    margin-bottom: 3px;
    line-height: 12px;
}

#shows_area .title_area {
    flex: 1;
    padding: 0 15px;
    margin: 3.7px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.title_area h6 {
    font-size: 17px;
    line-height: 19px;
    opacity: 0.8;
}

.title_area p {
    font-size: 15px;
    opacity: 0.7;
    color: black;
}

.date_area .day {
    font-size: 25px;
    font-family: 'Roboto Slab',serif;
    padding-bottom: 2px;
    line-height: 25px;
}

#early_bird_ticket_area {
    display: flex;
    flex-direction: column;
    padding: 30px;
    align-items: center;
    background-color: #eee;
    border: 1px solid #ccc;
    margin-top: -1px;
}

#regular_ticket_area {
    display: flex;
    flex-direction: column;
    padding: 30px;
    align-items: center;
    background-color: #eee;
    border: 1px solid #ccc;
    opacity: 0.6;
}

#early_bird_ticket_area h5,
#regular_ticket_area h5 {
    font-size: 26px!important;
    color: #333;
    line-height: 25px;
    margin: 0 0 6px 0;
}

#early_bird_ticket_area p,
#regular_ticket_area p {
    font-size: 15px;
    color: #333;
    margin: 0 0 16px 0;
}

#early_bird_ticket_area button,
#regular_ticket_area button {
    padding: 10px 50px 8px;
    background: linear-gradient(0deg,#3e9a58 0%,#79c56c 100%);
    box-shadow: 0 4px 0 0 #308426;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 19px;
    line-height: normal;
    border: none;
    border-radius: 2px;
}

#regular_ticket_area button {
    background: linear-gradient(0deg,#7c847e 0%,#b0b7af 100%);
    box-shadow: 0 4px 0 0 #636b62;
}

nav#mobile {
    display: none;
}