u { display: none; }
* { margin: 0; padding: 0; }
header#main { display: block; }
a img { border-style: none; }

body {
	font-family: 'Montserrat',arial,sans-serif;
	background-color: #777;
	background: linear-gradient(135deg, #999 0%, #333 100%);
	color: #333;
	height: 100vh;
	}

p {
	padding-top: 0.5em;
	line-height: 1.5;
	}

ol { margin: 0.5em 0 0.5em 1em; }

.img {
	text-align: center;
	font-size: 90%;
	}
.right {
	float: right;
	margin: 0 0 0.5em 1em;
	}
.left {
	float: left;
	margin: 0 1em 0.5em 0;
	}
 .full { width: 100%; }

.hide { display: none; }
.cleft { clear: left; }
.cright { clear: right; }
.cboth { clear: both; }
	

	/* =========================================================================
	// HEADER
	/* ========================================================================= */

	h4.accordian-toggle { display: none; }
	
	a#homelink {
		display: block;
		position: fixed; z-index: 3;
		top: 2px; right: 2px;
		width: 20vw;
		}
	a#homelink img { width: 100%; }
	#animate {
		position: relative;
		width: 40vw;
		}
	
	h1 {
		top: 12vh;
		font-size: 2.7vh;
		}
	
	header { height: 7vh; width: auto; }
	header nav ul {
		margin-top: 1vh;
		display: block;
		width: auto;
		padding: 0 0.5vw;
		}
	header nav ul li {
		width: 10vw;
		margin-right: 0.5vw;
		display: inline-block;
		vertical-align: top;
		}
	header nav ul li.index {
		margin-top: 0.5vw;
		width: 3vw;
    	}
	header nav ul li:not(.facebook) a {
		display: block;
		width: 100%;
		height: auto;
		font-size: 1.7vh;
		padding: 1.5vh 0 1.5vh;
		text-align: center;
		text-decoration: none;
		font-weight: 700;
		color: #333;
		
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		
		/* default fallback */
		background: rgb(255, 255, 255) transparent;
		/* nice browsers */
		background: rgba(255, 255, 255, 0.8);
		}
	
	header nav ul li.about a, header nav ul li.photos a { background-color: #e25327; color: #fff; }
	header nav ul li.music a, header nav ul li.dates a { background-color: #ffa600; }
	header nav ul li.videos a { background-color: #d3d32a; }
	header nav ul li.contact a { background-color: #000; }
	header nav ul li.contact a { color: #fff; }
	
	header nav ul li.highlight a { background-color: #fff; color: #000; }
	
	header nav ul li.index a {
		background-color: transparent;
		padding: 0;
		}
	header nav ul li.index a::before {
		content: "\f015";
		font: 200% fontawesome;
		color: #fff;
		}
	
	header nav ul li.facebook {
		width: 3vw;
		height: 2vw;
		position: relative; left: 1vw; top: -2px;
		}
	header nav ul li.facebook a {
		width: 100%;
		height: 100%;
		}
	header nav ul li.facebook a::before {
		content: "\f082";
		font: 280% fontawesome;
		color: #fff;
		}

@media screen and (max-width: 1090px) {
	header { height: 11vh; }
  	header nav ul li a { padding: 2.5vh 0 2.5vh; }
	header nav ul { position: relative; top: 2vh; }
	}

@media screen and (max-width: 760px) {

	header nav ul {
		margin-top: 6vh;
		position: relative; z-index: 2;
		display: none;
		}
	header nav ul, header nav ul li, .accordion-toggle { width: 100%; }
	header nav li a {
		width: 100%;
		height: 9vh;
		margin-bottom: 0;
		display: block;
		text-align: center;
		color: #fff;
		text-decoration: none;
		padding: 0.5em 0;
		/* default fallback */
		background: rgb(51, 102, 153) transparent;
		/* nice browsers */
		background: rgba(51, 102, 153, 0.6);
		/* IE 6/7 */
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44336699, endColorstr=#44336699);
		/* IE8 */    
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#44336699, endColorstr=#44336699)";
		}
	header nav ul li.index {
		margin-top: 0.5vw;
		width: 100%;
    	}
	h4.accordian-toggle {
		display: block;
		width: 100vw;
		height: 3vw;
		padding: 15px 0;
		position: absolute; top: 0; left: 0;
		border-width: 0;
		cursor: pointer;
		text-align: center;
		background-color: #335166;
		color: #fff;
		}
	a#homelink {
		display: block;
		position: fixed; z-index: 3;
		top: 2px; right: 2px;
		width: 40vw;
		}
	a#homelink img { width: 100%; }
	#animate {
		position: relative;
		width: 80vw;
		}
	}
	
	/* =========================================================================
	// ARTICLE
	/* ========================================================================= */

article {
	animation: fadeIn 5s;
	-webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;
	width: 85vw;
	margin: 5vh auto 30vh;
	padding: 2vh 2vw;
	font-size: 14px;
	background-color: #d3d32a;
	border-color: #d3d32a;
	border-width: 6px;
	border-style: solid;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	box-shadow:
		0 0 0 6px #e25327,
		0 0 0 12px orange;
	}

article section {
	top: 0;
	column-count: 2;
	column-gap: 3vw;
	}
	
#music article {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    }

h1 {
	margin: 0 auto 1em;
	padding: 0.3vh 1vw;
	font-size: 120%;
	font-weight: 700;
	color: #d3d32a;
	background-color: #000;
	}

p {
	padding-bottom: 1em;
	line-height: 1.5;
	}

#index article {
	width: 48vw;
	margin: 6vw 0 0 44vw;
	overflow: initial
	}
#index aside {
	position: absolute; top: 17vh; left: 2vw;
	width: 40vw;
  		}
#index aside img {
	width: 100%;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	}
	
#about aside { position: absolute; top: 15vh; left: 0; }
#photos article p {
	text-align: center;
	font-weight: 700;
	}
#parent-edit article { top: 10vh; width: 60%; }

#contact article { margin-top: 6vw; }
#dates article {
	margin-top: 6vw;
	width: 60vw;
	height: 40vw;
	margin-left: 30vw;
	overflow: auto;
	}
#dates aside {
	position: absolute; top: 20vh; left: 1vw;
	width: 25vw;
	height: 15vw;
	background-color: #d3d32a;
	border-color: #d3d32a;
	border-width: 6px;
	border-style: solid;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	box-shadow:
	0 0 0 6px #e25327,
	0 0 0 12px orange;
  	}
    
#dateSelector { text-align: center; }

#datedgigslist div { padding: 1em; }
  		
#dates article section {
	column-count: 1;
	column-gap: 1vw;
	}

@media screen and (max-width: 1090px) {
    
	#index aside, #dates aside {
		position: static;
		width: 86vw;
		margin: 4vw auto 5vw;
		}
	#dates aside { height: 13vw }
	#index article, #dates article {
		position: static;
		width: 83vw;
		margin: 2vw auto 0;
		height: auto;
		}
    }

@media screen and (max-width: 760px) { #dates aside { height: 20vw; } }

	/* =============================================================================
	// #GALLERY
	/* ============================================================================= */

#photos div.sample {
	display: inline-block;
	margin: 1vw 1.3vw 0;
	width: 24vw;
	height: 16vw;
	box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
	}
#photos div.sample a {
	display: block;
	width: 24vw;
	height: 16vw;
	overflow: hidden;
	}
#photos div.sample img { width: 100%; height: 100%; }
	

/* =============================================================================
// FOOTER
/* ============================================================================= */

footer {
	position: fixed; z-index: 10;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	}
footer div { font-size: 85%; line-height: 1; }

footer p { margin-bottom: 1em; }
footer h4 {
	background-color: #999;
	border: none;
	cursor: pointer;
	width: 100vw;
	padding: 0.2em 0;
	color: #bbb;
	font-weight: 400;
	font-size: 100%;
	/* default fallback */
	background: rgb(75, 75, 75) transparent;
	/* nice browsers */
	background: rgba(75, 75, 75, 0.8);
	}

ul#social {
	list-style: none;
	padding: 0.5em 0;
	}
ul#social li {
	display: inline-block;
	vertical-align: top;
	}

ul#social li a { text-decoration: none; }
ul#social li a:link { color: #c60; }
ul#social li a:hover,
ul#social li a.fa:hover { color: yellow; }
ul#social li a:visited { color: yellow; }

ul#social li img {
	height: 40px;
	float: left;
	margin-left: 0.5em;
	}

.accordian-tail { display: none; }

	
	/* =========================================================================
	// PARTICULAR
	/* ========================================================================= */
	
	#index article .accordian-head::after { display: none; }
	#index article  .accordian-tail { display: block; }
	}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}