html {
	height: 100%;
	overflow-x: hidden;
}

* {
 	margin: 0px;
	padding: 0px;
        box-sizing: border-box;
        font-family: 'Lato', sans-serif;
}

body {
	background-color: #000000;
	margin: 0;
	padding-top: 91px;
}

.left {
 	float: left;
	width: auto;
	margin-right: 10px;
}

.right {
 	float: right; 
	width: auto;
	margin-left: 10px;
}

.center {
 	display: block;
	text-align: center;
	margin: 10px;
}

.anchor { 
	padding-top: 75px;
	margin-top: -75px; 
	z-index: 50;        
}  

/**********************************************************/
/*                       HEADER                           */
/**********************************************************/

/* Center the Header */
#main, #logo, .site_content, .site_content_index #footer {
	margin-left: auto; 
	margin-right: auto;
}

/* Sets the header background and height */
header {
	background-color: #191919;
	height: 100px;
}

/* Big Name Logo (Logo 1) and Subtitle (Logo 2) */
#logo {
	position: relative;
	max-width: 80%;
	width: 80%;
        font-family: 'Poiret One', sans-serif;
}

#logo h1 {
	display: block;
	margin: .2em 0 0 0;
	text-align: center;
	/*letter-spacing: .2em;*/
	font-weight: normal; 
	font-size: 358%;
	color: #FFFFFF;        
        font-family: 'Poiret One', sans-serif;
}

.title-highlight {
    color: #F26A29;
    font-family: 'Poiret One', sans-serif;
}

#hidden {
	display: none;
}

#branding {
	float: left;
}

#logo h2 {
	display: block;
	text-align: center;
	letter-spacing: .35em;
	font-weight: normal; 
	font-size: 90%;
	color: #FFFFFF;
}

#logo h1 a, #logo h2 a {
	text-decoration: none;
	color: #FFFFFF;
}

@media screen and (min-width: 768px) {
.anchor-box {
	background-color: transparent;
	background-color: #000000; 
	color: #fff; 
	padding-top: 17px;
	padding-bottom: 10px;
	margin-right: -35px;
	margin-left: -35px;
}

}

@media screen and (min-width: 320px) and (max-width: 767px) {
.spacer {
        width: 100%;
	height: 40px;
}  

.anchor-box {
	background-color: transparent;
	background-color: #333a56; 
	color: #fff; 
	margin-right: -21px;
	margin-left: -21px;
}

}

@media screen and (min-width: 480px) and (max-width: 767px) {
/* Resize width */
#logo {
	position: relative;
	max-width: 90%;
	width: 90%;
	
  }
/* Resize font for mobile */
#logo h1 {
	display: block;
	margin: .2em 0 0 0;
	text-align: center;
	/*letter-spacing: .2em;*/
	font-weight: normal; 
	font-size: 200%;
	color: #FFF;
	padding-top: .1875em;
}

#logo h2 {
 	display: block;
	text-align: center;
	letter-spacing: .35em;
	font-weight: normal; 
	font-size: 85%;
	color: #FFF;
	padding-top: .1875em;
}

header {
	height: 60px;
}

body {
	padding-top: 60px;
}

}

@media screen and (min-width: 320px) and (max-width: 479px) {
/* Resize width */
#logo {
	position: relative;
	max-width: 95%;
	width: 95%;
	
  }
/* Resize font for mobile */
#logo h1 {
	display: block;
	margin: 0 auto;
	text-align: center;
	letter-spacing: .2em;
	font-weight: normal; 
	font-size: 155%;
	color: #FFF;
	padding-top: .5em;
}

#logo h2 {
 	display: block;
	text-align: center;
	letter-spacing: .35em;
	font-weight: normal; 
	font-size: 70%;
	color: #FFF;
	padding-top: 1em;
}

header {
	height: 60px;
}

body {
	padding-top: 60px;
}

}

/**********************************************************/
/*                     NAVIGATION                         */
/**********************************************************/


/* Positions nav and content */
.container, .site_content, .site_content_index {
	position: relative; 
}

/* Fixes nav on scroll */  
header, .container-scrolled {
	position: fixed;
	text-align: center;
        left: 0;
	right: 0;
	width: 100%;
	top: 0;
}

/* Nav container to center and set width */
.container {
	margin: 0 auto;
	z-index: 150;
	height: 60px;
	margin-bottom: -60px;
}

/* Background-color to the nav container. */
nav { 
	padding: .5em 0 .5em 0;
	/*background-color: #e8e8e8;*/
	/*border-bottom: .2em solid #F26A29;*/
        background-color: rgba(0,0,0,0.6);
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	text-align:center;
}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	text-align: center;
}

/* Styling the links */
nav ul li a, nav ul ul li a {
	display:block;
	padding:0 12px;	
	color:#FFF;
	letter-spacing: 0.1em;
        font-size: 1.15em;
	line-height: 40px;
	text-decoration:none;
	text-align: center;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
        /*font-family: 'Poiret One', sans-serif;*/ 
}

/* Background color change on Hover */
nav a:hover, nav li.selected a, nav li.selected a:hover { 
	background-color: #F26A29; 
	color: #fff;
}
	
nav li .down a {
	display: block;
}

nav .scroll {
	display: inline-block;
}

nav ul ul a{	
	font-size: 1em;
}

nav ul li.icon {
	display: none;
}

@media screen and (min-width: 320px) and (max-width: 1023px) {
 
nav ul li:not(:nth-child(-n+0)) {
	display: none;
}
  
nav ul li.icon {
	display:inline-block;
	text-align: center;
	color: #FFF;
	color: #fff;
	/*background-color: #e8e8e8;*/
}
  
}

/* The "responsive" class is added when the user clicks on the "menu" icon - for mobile support*/
@media screen and (min-width: 320px) and (max-width: 1023px) {
nav ul.responsive {
	position: relative;
	text-align:center;
	/*background-color: #e8e8e8;*/
        background-color: rgba(0,0,0,0.6);
}

nav ul.responsive li.icon {
	display:inline;
    text-align: center;
}

nav ul.responsive li {
    display:inline;
}

 nav ul.responsive li a {
	display: block;
    padding:0 20px;	
	letter-spacing: 0.2em;
}

/* Display Dropdowns on Hover */
nav li .down a {
	display:block;
	margin: 10px 0 -10px 0;
}

nav .scroll {
	display: block;
	width: 100%;
}

}

/**********************************************************/
/*                         BODY                           */
/**********************************************************/


/* Sets the position + display + formating for the body container */
.site_content { 
	font-size: 1em;
	margin: .1em auto .1em auto;
	padding: 4em 1.3em 0em 1.3em;
	background-color: #f7f5e6;
} 

.site_content_index { 
	font-size: 1em;
	margin: .1em auto .1em auto;
	padding: 2em 1.3em 0em 1.3em;
	background-color: #f7f5e6;
} 

/* Padding for the page content */
#content { 
	padding: .8em .8em .8em .8em;  
}

 /* Body Tag fonts */
p, h1, h2, h3, h4, h5, h6 { 
        color: #FFFFFF;
}

/* Font + margin + letter spacing for Body Tags */
p { 
	font-size: 1.250em;
	margin: 0 0 1em 0;
	line-height: 1.75em;
}

.list {
	padding: .5em 0 1em 0;
}

.list p {
	margin: 0 0 .5em 0;
}

h1, h2, h3 {
	font-size: 1.5em;
	margin: 0 0 .6em 0;
	letter-spacing: .05em;
}

h4, h5 {
	font-size: 1.250em;
	margin: 0 0 1em 0;
	line-height: 1.75em;
}

h6 {
	font-size: 1.125em;
	margin: 0 0 .2em 0;
}

h3 {
	text-align: center;
}

#read-bio {
	margin-bottom: 2em;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
	
/* Sets the position + display + formating for the body container */
.site_content { 
	height: 100%;
	font-size: 1em;
	position: relative;
	width: auto;
	margin: .1em auto .1em auto;
	padding: 2em .7em 1em .7em;
	background-color: #f7f5e6;
} 

.site_content_index { 
	font-size: 1em;
	margin: .1em auto .1em auto;
	padding: 2em 1.3em 1em 1.3em;
	background-color: #f7f5e6;
} 

/* Padding for the page content */
#content { 
	padding: 0;  
}

/* Font + margin + letter spacing for Body Tags */
/* Change fonts for mobile. Margin + line hieght for p. */
p { 
	font-size: 1.125em;
	margin: 0 0 1em 0;
	line-height: 1.75em;
}

h1, h2, h3 {
	font-size: 1.375em;
	margin: 0 0 .6em 0;
	letter-spacing: .05em;
}

h4, h5 {
	font-size: 1.125em;
	margin: 0 0 1em 0;
	line-height: 1.75em;
}

h6 {
	font-size: 1em;
	margin: 0 0 .2em 0;
}

.vertical {
	display: none;
}

.horizontal {
	visibility: hidden;
	margin-bottom: 20px;
	margin-top: 20px;
}

}

/* Text Title Lines on Right & Left */
@media screen and (min-width: 768px) {

h3.lines {
	overflow: hidden;
	text-align: center;
}

.anchor-box h3.lines:before, .anchor-box h3.lines:after {
	background-color: #fff;
}

h3.lines:before, h3.lines:after {
	background-color: #000;
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 50%;
}

h3.lines:before {
	right: 0.5em;
	margin-left: -50%;
}

h3.lines:after {
	left: 0.5em;
	margin-right: -50%;
}

.horizontal {
	display: none;
}

}

/**********************************************************/
/*                         FOOTER                         */
/**********************************************************/


/* Footer (Entire Bottom under the Body) */
footer {
	height: 102px;
	background-color: #191919;
}

footer a:link {
    color: #FFFFFF;
    text-decoration: none;
}

footer a:hover {
    color: #F26A29;
    text-decoration: none;
}

footer h3 {
   font-weight: normal; 
   font-size: 100%;
}

#footer { 
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: inline;
	background-color: #191919;
        font-weight: normal; 
        font-size: 80%;
	margin: .3em auto .3em auto;
	max-width: 80%;
}

/* Social Media Icons + Mailing List Button */
#social_media {
	display: block;
	text-align: center;
	clear: both;
	color: #848484;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

#social_media li {
    display: inline-block;
	text-align: center;
    text-decoration: none;
	margin: 1em 1.5em 1em 1.5em;
}

.social_media_music {
	display: block;
	position: relative;
	text-align: center;
	clear: both;
	color: #848484;
	text-transform: uppercase;
	letter-spacing: 2em;
}

.social_media_music li {
    display: inline-block;
	text-align: center;
    text-decoration: none;
	margin: 2em .5em 2em .5em;
}


/* Text lines underneath Social Media Icons*/
ul#btmtext {
	position: relative;
    display: block;
    text-align: center; 
	clear: both;
	list-style: none;
}

ul#btmtext li h6 {
	display:inline-block;
	text-align: center;
	color: #848484;
}
  
ul#btmtext li h6 {
	display: inline-block;
	color:#848484;
        font-weight: normal; 
        font-size: 80%;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.2em;
	margin: .4em auto 1em auto;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
#footer { 
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: inline;
	background-color: #333a56;
        font-weight: normal; 
        font-size: 75%;
	margin: .3em auto .3em auto;
	max-width: 90%;
}

ul#btmtext li h6 {
        font-weight: normal; 
        font-size: 58%;
}

#social_media li {
    display: inline-block;
	text-align: center;
    text-decoration: none;
	margin: 1em 0em 1em .7em;
}

.social_media_music li {
	margin: .5em 0em .5em 0em;
}

}

.social-links {

		a {
                        font-size: 30px; 
			display: inline-block;
			width: 64px;

			background-size: 55% 55%;
			background-repeat: no-repeat;
			color: white;
			margin: 0 5px;
			@include em(20);
			line-height: 20px;

			&:hover{
				background-size: 55% 55%;
				background-repeat: no-repeat;
			}
		}
	}


/**********************************************************/
/*                        BUTTONS                         */
/**********************************************************/


.pagesbar { 
	display: block; 
	text-align: center;
	clear: both;
	height: 30%;
} 

ul.pages, ul.pages li {
	display: inline-block;
	width: 100%;
	margin: 0; 
	padding: 0;
	list-style: none;
}

ul.pages li a { 
	display: inline-block;
	letter-spacing: 0.2em;
	font-weight: bold;
	font-size: 1em;
	margin: .5em 0 1.5em 0;
	padding: .6em 1.2em .6em 1.2em;
	text-align: center;
	color: #000;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
	border-style: solid;
	border-width: .2em;
	border-color: #333a56; 
	height: 100%;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

ul.pages li a:hover, ul.pages li.selected a, ul.pages li.selected a:hover { 
	color: #fff;
	background-color: #52658f;
}

ul.pages p {
	text-align: left;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
ul.pages li a {
    letter-spacing: 0.2em;	
	font-size: .9em;
}

}

.pagesbar-music { 
	display: block; 
	text-align: center;
	clear: both;
	height: 30%;
} 

ul.pages-music , ul.pages-music li {
	display: inline-block;
	width: 100%;
	margin: 0; 
	padding: 0;
	list-style: none;
}

ul.pages-music li a { 
	display: inline-block;
	letter-spacing: 0.2em;
	font-weight: bold;
	font-size: 1em;
	margin: .5em 0 0 0;
	padding: .6em 1.2em .6em 1.2em;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
	border-style: solid;
	border-width: .2em;
	border-color: #fff; 
	height: 100%;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

ul.pages-music li a:hover, ul.pages-music li.selected a, ul.pages-music li.selected a:hover { 
	color: #fff;
	background-color: #f26a29;
}

ul.pages-music  p {
	text-align: left;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
ul.pages-music li a {
    letter-spacing: 0.2em;	
	font-size: .9em;
	margin: .5em 0 1.25em 0;
}

}

/**********************************************************/
/*                         CONTACT                        */
/**********************************************************/


.form_settings {
	display: block; 
	text-align: center;
	padding: 20px 0 20px 0;
}

.form_settings input, .form_settings textarea { 
	width: 50%;
	padding: .625em;
	margin: .6em 0 .6em 0;	
  	font-weight: bold;
	font-size: 1.15em;
	border: 2px solid #FFF; 
	background: #FFF; 
	color: #000;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	resize: none;
}
  
.form_settings .submit { 
	letter-spacing: .35em;
  	font-weight: bold;
	font-size: 1.15em;
	width: 25%; 
        min-width: 200px; 
	text-align: center;
	margin: 1em 0 .5em 0;
	padding: .6em 0 .6em 0;
	cursor: pointer; 
	text-transform: uppercase;
	background: transparent;
	border-color: #FFF;
	color: #FFF;
}
  
.form_settings .submit:hover { 
	background-color: #f26a29;
	color: #fff;
}

@media screen and (max-width:640px) {
.form_settings {
	display: block; 
	text-align: center;
	padding: 40px 0 40px 0;
}

.form_settings input, .form_settings textarea { 
	width: 100%;
	padding: .625em; 
	margin: .6em 0 .6em 0;
  	font-weight: bold;
	font-size: 1em;
	border: 2px solid #000000 ; 
	background: #FFF; 
	color: #000;
	resize: none;
}
  
.form_settings .submit { 
	letter-spacing: .35em;
  	font-weight: bold;
	font-size: 1em;
	width: 50%; 
	text-align: center;
	margin: .6em 0 .6em 0;
	padding: .6em 0 .6em 0;
	cursor: pointer; 
	text-transform: uppercase;
	background: transparent;
	border-color: #FFF;
	color: #FFF;
}
  
.form_settings .submit:hover { 
	background-color: #f26a29;
	color: #fff;
}

}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 75px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0); /* Transparent */
}

/* Modal Content */
.modal-content {
    background-color: #F26A29;
    margin: auto;
    padding: 10px;
    border: 2px solid;
    width: 70%;
    animation-name: animatetop;
    animation-duration: 0.4s
}


.modal-content-success {
    background-color: #2db744;
}

/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.modal-content p {
    color: #FFF;
}

/* The Close Button */
.close, .close_error {
    color: #FFF;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close, .close_error {
    margin-top: -12px;
}


.close:hover, .close_error:hover, .close:focus, .close_error:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/*** Bottom button ***/
.go-btm {
	display: inline-block;
	margin: 30px 0 0 0;
	font-size: 1.15em;
	color: white;
	border: .094em solid white;
	border-radius: 2em;
	text-decoration: none;
	background-color: rgba(51,58,86);
	font-size: 1.15em;
	padding: .875em 1.188em .875em 1.188em;
}

#go-btm a {
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

.go-btm:hover {
	background-color: #52658f;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
.go-btm {
	margin: 15px 0 0 0;
}

}

/**********************************************************/
/*                         HOME                           */
/**********************************************************/


.hero {
	background-image: url("../pictures/banners/home-banner.jpg");
	height: 760px;
	z-index: 100;
	/*margin-bottom: -46px;*/
	/*border-bottom: .2em solid #333a56;*/
}

.contact-hero {
	background-image: url("../pictures/banners/contact-banner.jpg");
	height: 760px;
	z-index: 100;
	/*margin-bottom: -46px;*/
	/*border-bottom: .2em solid #333a56;*/
}

.hero, .contact-hero {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

#overlay {
    height: 760px;
}

#contact-overlay {
    height: 760px;
}

#overlay, #contact-overlay {
    position: sticky;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
}

.hero-text {
	width: 80%;
	text-align: center;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -42%);
	color: white;
}

.hero-text img {
	margin-bottom: 10px;
        height:260px;
}


.contact-hero-text {
	width: 80%;
	text-align: center;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -42%);
	color: white;
}

.contact-hero-text a {
	text-decoration: none;
        color: white;
}


.contact-hero-text a:hover { 
	color: #F26A29; 
}


@media screen and (min-width: 320px) and (max-width: 767px) {
#home {
	padding-top: .5em;
}

.hero {
	background-image: url("../pictures/banners/home-banner.jpg");
	height: 600px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	/*margin-bottom: -56px;*/
}

.contact-hero {
	background-image: url("../pictures/banners/contact-banner.jpg");
	height: 600px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	/*margin-bottom: -56px;*/
}

#overlay {
    position: sticky;
    width: 100%;
    height: 600px;
    background-color: rgba(0,0,0,0.6);
}

#contact-overlay {
    position: sticky;
    width: 100%;
    height: 600px;
    background-color: rgba(0,0,0,0.6);
}

.hero-text {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text img {
        max-height:240px;
}

.contact-hero-text {
	width: 1o0%;
	text-align: center;
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
}

}



/**********************************************************/
/*                    AUDIO PLAYER                        */
/**********************************************************/


.audioplayer {
	display:inline-block;
	width: 100%;
	height: 60px;
	margin: 20px auto 40px auto;
	border: .0625em solid #333a56; 
	border-radius: 20px;
}

#audio-players h4 {
	text-align: center;
	margin: 10px auto -10px auto;
}

.playbutton {
	width: 60px;
	height: 60px;
	border: none;
	outline: none;
	cursor:pointer;
}

.play {
	background: url(../pictures/images/play.png);
}

.pause {
	background: url(../pictures/images/pause.png);
}

.play, .pause {
	background-size: 50% 50%;
	background-repeat: no-repeat;
	background-position: center;
}

.timeline {
	height: auto;
	margin: -45px 35px auto 75px;
	border-radius: 15px;
	background-color: #52658f; 
}

.playhead {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: 1px;
	/*background-color: #e8e8e8;*/
	cursor: pointer;
}

/**********************************************************/
/*                         SHOWS                          */
/**********************************************************/


table {
    border-collapse: collapse;
    width: 100%;
	margin: 2em auto 2em auto;
}

td, th {
    border: 1px solid #e8e8e8;
    font-size: 1.250em;
	margin: 0 0 .6em 0;
	line-height: 1.75em;
	padding: 25px;
	text-align: center;
}

tr:nth-child(even) {
    background-color: #f7f5e6;
}

tr:nth-child(odd) {
    background-color: #e8e8e8;
}

.shows-text {
	margin-top: 1.5em;
	margin-bottom: .5em;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
td, th {
    font-size: 1.125em;
	margin: 0 0 .6em 0;
	line-height: 1.75em;
}

}

/**********************************************************/
/*                         VIDEOS                         */
/**********************************************************/


@media screen and (min-width:641px) {
#device {
    margin: 0 auto;
    width: 50%;
    padding: 10px 0 10px 0;
}

}

/* Margin for videos */
.video {
	position:relative;
	padding: 2.25em 0em 0em 0em;
        background-color: #000000; 
}

.video h2 {
        margin: 0 0 .6em .3em;
        color: #848484;
}

.youtube-player {
    position: relative;
    padding-bottom: 56.23%;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
}
    
.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}
    
.youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
    
.youtube-player img:hover {
	filter: brightness(75%);
    -webkit-filter: brightness(75%);
}
    
.youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("../pictures/images/youtube-play.png") no-repeat;
    cursor: pointer;
}

@media screen and (max-width:640px) {
.wrapper {
	width:100%;
	height:100%;
	margin:0 auto;
}

}

/**********************************************************/
/*                       FLEXBOXES                        */
/**********************************************************/


@media screen and (min-width: 768px) {
.flexbox-video {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 36px 0 0 0;
}

.flexbox-video > div {
	width: 50%;
	padding: 20px;
        background-color: #000000; 
}

}


@media screen and (min-width: 320px) and (max-width: 767px) {
.flexbox-video {
    padding: 40px 0 0 0;
}

.flexbox-video > div {
	padding: 15px;
        background-color: #000000; 
}
}





.music-text {
    max-width: 600px;
}

.music-text h2 {
    text-align: left;
    font-size: 200%;
    margin: 0 0 .3em 0;
}


.music-text h3 {
    text-align: left;
    font-size: 110%;
    color: #F26A29; 
}


.music-text li {
    text-align: left;
    font-size: 110%;
    color: #FFF;  
    list-style: none;
}

.music-text p {
    font-size: 1.250em;
    margin: 0 0 1em 0;
    line-height: 1.25em;
    color: #848484;
    font-style: italic;
}

.track-time {
    font-size: 75%;
    color: #848484;
}


@media screen and (min-width: 768px) {
.flexbox-music {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 36px 0 0 0;
}

.flexbox-music > div {
	width: 50%;
        max-height: 724px;
	padding: 40px 20px 0 20px;
        background-color: #000000; 
        z-index: 100;
        position: relative;
}

.flexbox-music img {
    max-width: 80%;
    max-height: 80%;
    float: right;
}

}



@media screen and (min-width: 768px) {
.flexbox-about {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 36px 0 0 0;
}

.flexbox-about > div {
	width: 50%;
        /*max-height: 724px;*/
	padding: 30px 20px 0 20px;
        background-color: #000000; 
        z-index: 100;
        position: relative;
        text-align: justify;
}

.flexbox-about img {
    width: 100%;
    max-width: 600px;;
    max-height: 100%;
    padding-bottom: 10px;
}

.about-text-left p {
    max-width: 600px;
}

.about-text-right p {
    max-width: 600px;
}

}

.about-text-left h2 {
    text-align: left;
    font-size: 200%;
    margin: 0 0 .3em 0;
    float: right;
}


.about-text-left h3 {
    text-align: left;
    font-size: 110%;
    color: #F26A29; 
    float: right;
}


.about-text-left li {
    text-align: left;
    font-size: 110%;
    color: #FFF;  
    list-style: none;
    float: right;
}

.about-text-left p {
    font-size: 1.250em;
    margin: 0 0 1em 0;
    line-height: 1.25em;
    color: white;
    font-style: normal;
    float: right;
}

.about-text-left img {
    float: right;
}

.about-text-right h2 {
    text-align: left;
    font-size: 200%;
    margin: 0 0 .3em 0;
    float: left;
}


.about-text-right h3 {
    text-align: left;
    font-size: 110%;
    color: #F26A29; 
    float: left;
}


.about-text-right li {
    text-align: left;
    font-size: 110%;
    color: #FFF;  
    list-style: none;
    float: left;
}

.about-text-right p {
    font-size: 1.250em;
    margin: 0 0 1em 0;
    line-height: 1.25em;
    color: white;
    font-style: normal;
    float: left;
}


.about-text-right img {
    float: left;
}







@media screen and (min-width: 320px) and (max-width: 767px) {
.flexbox-music {
    padding: 60px 0 0 0;
}

.flexbox-music > div {
	padding: 15px;
        background-color: #000000; 
        z-index: 100;
        position: relative;
}

.flexbox-music img {
    max-width: 100%;
    max-height: 100%;
}
}



@media screen and (min-width: 320px) and (max-width: 767px) {
.flexbox-about {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 60px 0 0 0;
}

.flexbox-about > div {
	padding: 15px;

        z-index: 100;
        position: relative;
        text-align: left;
}

.flexbox-about img {
    width: 360px;
    /*max-width: 100%;*/
    /*max-height: 100%;*/
    background-color: rgba(0,0,0,0);
    padding-bottom: 10px;
}
}


@media screen and (min-width: 1024px) {

.flexbox-shows {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flexbox-shows > div {
	min-width: 33%;
}

}

@media screen and (min-width: 480px) and (max-width: 1023px) {
.flexbox-shows {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flexbox-shows > div {
	min-width: 50%;
}
	
}

div li.hide { 
	display:none; 
}

/**********************************************************/
/*                         PHOTOS                         */
/**********************************************************/


.grid {
	display: flex;
	flex-wrap: wrap;
	margin: 1.5em 0 1.5em 0;
}


.grid_item {
	background: #ebebeb;
	display: inline-block;
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-moz-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid_link {
	display: block;
	color: black;
	position: relative;
	overflow: hidden;
	border: 4px solid #f7f5e6;
	padding: 1em;
}

.tile {
	font-size: 1.25em;
	color: white;
	letter-spacing: 0.2em;
	line-height: 1.25em;
	font-weight: bold;
	width: 80%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0,0,0,0.6);
}

@media all and (min-width: 320px) and (max-width: 640px) {
.tile {
	font-size: 1.125em;
	color: white;
	width: 100%;
}

}

.a {
	background-image: url("../pictures/gallery/light-show.jpg");
	background-size: cover;
}

.b {
	background-image: url("../pictures/gallery/synth.jpg");
	background-size: cover;
}

.c {
	background-image: url("../pictures/gallery/singing.jpg");
	background-size: cover;
}

.d {
	background-image: url("../pictures/gallery/guitar.jpg");
	background-size: cover;
}

.e {
	background-image: url("../pictures/gallery/bass.jpg");
	background-size: cover;
}

.f {
	background-image: url("../pictures/gallery/concert.jpg");
	background-size: cover;
}

.g {
  	background-image: url("../pictures/blog/song.jpg");
  	background-size: cover;
}

.h {
  	background-image: url("../pictures/blog/edm.jpg");
  	background-size: cover;
}

.i {
  	background-image: url("../pictures/blog/eq.jpg");
  	background-size: cover;
}

.j {
  	background-image: url("../pictures/merch/logo.jpg");
  	background-size: cover;
}

.k {
  	background-image: url("../pictures/merch/thankful.jpg");
  	background-size: cover;
}

.l {
  	background-image: url("../pictures/merch/peace.jpg");
  	background-size: cover;
}


@media all and (max-width: 320px) {
.span {
    width: 100%;
}
  
.span .grid_link {
    padding-bottom: 80%;
}

}

@media all and (min-width: 321px) and (max-width: 480px) {
.span {
    width: 49.545252%;
}

.span .grid_link {
    padding-bottom: 80%;
}

}

@media all and (min-width: 481px) {
.span {
    width: 33%;

}

.span .grid_link {
    padding-bottom: 80%;
}

}