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-image: url(../images/convulsions-temp.png);
	background-repeat: repeat;
	background-size: cover;
	background-position: 50% 6vh;
	color: #333;
	}


h1 {
	width: 85vw;
	position: relative; top: 21vh; left: 0; z-index: 1;
	margin: auto;
	padding: 0.3vh 1vw;
	font-size: 120%;
	font-weight: 700;
	color: #d3d32a;
	background-color: #000;
	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;
	}
@media screen and (min-width: 700px) {
	h1 { top: 25vh; }
  }

p {
	padding-top: 0.5em;
	line-height: 1.5;
	}
footer {
	width: 90%;
	margin: 0 auto;
	}
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);
	}

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
/* ========================================================================= */

	
a#homelink { display: none; }

/* =============================================================================
// NAV
/* ============================================================================= */


header nav ul {
	margin-top: 8vh;
	position: relative; z-index: 2;
	display: none;
	}
header nav ul, header nav li, .accordion-toggle { width: 100%; }
header nav li a {
	width: 100%;
	height: 9vh;
	margin-bottom: 0.2vh;
	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 li.index a::before {
	content: "\f015";
	font-family: fontawesome;
	}
header nav li.facebook a::before {
	content: "\f082";
	font-family: fontawesome;
	}
h4.accordian-toggle {
	width: 100vw;
	height: 20px;
	padding: 15px 0;
	position: absolute; top: 0; left: 0;
	border-width: 0;
	cursor: pointer;
	text-align: center;
	background-color: #335166;
	color: #fff;
	}

/* =============================================================================
// BODY
/* ============================================================================= */

#index aside {
	display: block;
	position: absolute; top: 60vh; left: 40vw;
	}

@media screen and (min-width: 500px) {
	#index aside { top: 65vh; }
  }

#datedgigslist div {
	text-align: center;
	margin-bottom: 3vh;
	}

article {
	animation: fadeIn 5s;
	-webkit-animation: fadeIn 5s;
  	-moz-animation: fadeIn 5s;
  	-o-animation: fadeIn 5s;
  	-ms-animation: fadeIn 5s;
	position: relative; top: 20vh; z-index: 2;
	width: 85vw;
    height: 56vh;
	margin: 5vh auto 30vh;
	padding: 2vh 2vw;
	font-size: 14px;
    overflow: auto;
	background-color: #d3d32a;
	border-color: orange;
	border-width: 6px;
	border-style: solid;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	box-shadow: 0 0 0 6px #e25327;
	}
@media screen and (min-width: 700px) {
	article { top: 25vh; }
  }

#index article {
	top: 25vh;
	width: 90vw;
	padding-bottom: 5vw;
	}
@media screen and (min-width: 500px) {
	#index article { top: 40vh; }
    #index aside { top: 70vh; }
  }
#index article p.accordian-head { cursor: pointer; }
#index article p.accordian-head::after {
	content: ' …more';
	color: #369;
	font-weight: 700;
	}

.playlist { text-align: center; }
.jp-audio { margin: auto; }

div.playlist h3 {
	background-color: #7a007c;
	color: #fff;
	text-align: center;
	width: 80%;
	margin: 2vw auto 1vw;
	height: 3em;
	border: 6px solid #7a007c;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	}

#photos div.sample {
	display: block;
	margin: 1vw 1.3vw 4vw;
	width: 81vw;
	height: 55vw;
	}
#photos div.sample a {
	display: block;
	width: 81vw;
	height: 54vw;
	overflow: hidden;
	box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
	}
#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; }

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; }


/* =============================================================================
// #TOP ARROW STYLE
/* ============================================================================= */


.cd-top.cd-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
	}
.cd-top.cd-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: .5;
	}
.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	/* image replacement properties */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: rgba(200, 200, 42, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;
	}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s;
	}
.cd-top.cd-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
	}
.cd-top.cd-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: .5;
	}
.no-touch .cd-top:hover {
	background-color: #e86256;
	opacity: 1;
	}


/* =========================================================================
// BUTTONS
/* ========================================================================= */

div.button { margin: 1em 0; }
a.button, span.button {
	display: block;
	text-align: center;
  		font-weight: 700;
  		font-size: 1.2em;
	padding: 0.3em;
	text-decoration: none;
	color: #036;
	background-color: #eff;
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	box-shadow:
		0 0 0 4px #ddd,
		0 0 0 9px #0090d3;
	}
a.button:active { background-color: #ddd; }
article a.button,
article span.button { width: 100%; }
#map aside span.button {
	position: relative; left: 6px; top: 6px;
	width: 93%;
	}
i.lmf { cursor: pointer; }
.venue-info {
	border: 1px solid #fff;
	padding: 1vw;
	margin-top: 1vw;
	display: none;
	}
	


/* =============================================================================
// #FORMS
/* ============================================================================= */

form div { padding: 0.5em; }

form div.textinput label,
form div.textinput input,
form div.textinput textarea,
form div.textinput span {
	font-size: 100%;
	display: inline-block;
	vertical-align: top;
	}
label {
	width: 20%;
	border-bottom: 1px solid #ccc;
	}
textarea { margin-bottom: 0.5em; }

form div.textinput input,
form div.textinput textarea {
	padding: 0.3em;
	border-color: #0090d3;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}
form div.submit input { margin-left: 20%; }
fieldset {
	background-color: #e3d3a3;
	margin-bottom: 1em;
	border-color: #0090d3;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	}
fieldset#blankfieldset { background-color: #f1f7e8; }
legend {
	margin-left: 30px;
	color: #fff;
	background-color: #666;
	padding: 2px;
	border-color: #999;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}

.styled select {
	background: transparent;
	width: 5em;
	font-size: 100%;
	overflow: hidden;
	height: 1.5em;
	position: relative; left: -2px; top: -2px;
	}
.styled.long select { width: 40em; }

.styled {
	display: inline-block;
	width: 3.9em;
	border-color: #0090d3;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow: hidden;
	background: url(../images/select-arrow.png) 96% / 20% no-repeat #efefef;
	}
.styled.long {
	width: 38.9em;
	background: url(../images/select-arrow.png) 98% / 2% no-repeat #efefef;
	}

select.notowned option.notowned { display: none; }


/* =============================================================================
// #TESTIMONIALS
/* ============================================================================= */



/* =============================================================================
// #SLIDESHOW
/* ============================================================================= */


#slideshow {
	float: right;
	margin-left: 40px;
	position: absolute;
	width: 260px;
	height: 380px;
	padding: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
	}

#slideshow > div {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	}

#slideshow > div img {
	width: 260px;
	max-height: 380px;
	}


/* =============================================================================
// FULL SCREEN
/* ============================================================================= */

@media screen and (min-width: 950px) {
	
	section { position: relative; }
	
	body { background-position: 0 0; }
	
	/* =========================================================================
	// 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: 30vh;
		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: 8vw;
		margin-right: 0.5vw;
		display: inline-block;
		vertical-align: top;
		}
	header nav ul li a {
		display: block;
		width: 100%;
		height: auto;
		font-size: 2.3vh;
		padding: 1vh 0 1vh;
		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, header nav ul li.contact a { background-color: #d3d32a; }
	
	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;
		position: relative; top: -0.5vw; left: 1vw;
		}
	header nav ul li.facebook a { width: 100%; heifht: 100%; }
	header nav ul li.facebook a::before {
	content: "\f082";
	font: 200% fontawesome;
	color: #000;
	}
	
	
	/* =========================================================================
	// BODY
	/* ========================================================================= */

	#index article, #about article, #music article, #photos article,  #contact article {
		top: 30vh;
		height: 40vh;
		width: 85vw;
		column-count: 2;
		column-gap: 3vw;
		}
	aside {
		display: block;
		width: auto;
		position: absolute; top: 20vh; left: 2vw;
		}
	#index article {
		position: relative; top: 30vh; z-index: 2;
		width: 50vw;
		margin-left: 40vw;
		}
	#index aside { position: absolute; top: 60vh; left: 2vw; }
	
	#about aside { position: absolute; top: 15vh; left: 0; }
	#about aside img { width: 40vw; }
	#photos article p {
		text-align: center;
		font-weight: 700;
		}
	#parent-edit article { top: 10vh; width: 60%; }
	#music article img {
		width: 100%;
		}


	/* =============================================================================
	// #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%; }
	
	
	
	/* =========================================================================
	// PARTICULAR
	/* ========================================================================= */
	
	#dateSelector {
		position: absolute; top: 2vh; right: 4vw;
		text-align: center;
		}
	
	div.playlist {
		width: 49%;
		display: inline-block;
		vertical-align: top;
		margin-bottom: 5vh;
		}
	div.jp-audio { margin: auto; }
	div.playlist h3 { font-size: 1.3vw; }
	
	#index article .accordian-head::after { display: none; }
	#index article  .accordian-tail { display: block; }
	}

@media screen and (min-width: 1200px) {
    article { height: 30vh; }
    }

@media screen and (min-width: 1800px) {
    article {
        font-size: 24px;
        height: 20vh;
        }
    }

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