html, body {
	font-family: 'Raleway', sans-serif;
	font-size: 1em;
	line-height: 1.5;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #121212;
}

.shell, .content {
	max-width: 1020px;
	margin: 0 auto;
}

p { margin: 0 0 1em; }

a {
  text-decoration: none;
  color: inherit;
}

img { max-width: 100%; margin-bottom: 20px; }

.wrapper {
  overflow: hidden;
  *zoom: 1;
}

.clear,
.member:after {
	content: "";
    display: table;
    clear: both;
}

/* HEADER */
.header {
  position: fixed;
  left: 0;
  right: 0;
  height: 66px;
  line-height: 66px;
  color: #fffbf0;
  z-index:99;
}
.header.sticky {
    background-color: #121212;
    transition: all .5s ease;
}
.header__logo {
  padding: 0 25px;
  float: left;
  text-transform: uppercase;
  font-family: 'Monoton', cursive;
  display: none;
}
.header.sticky .header__logo { display: block; }

/* MENU */
.menu {
  float: right;
}
.menu a {
	padding: 0 10px;
	text-transform: uppercase;
	font-weight: 700;
    font-size: .8em;
}
.menu a:last-of-type { padding-right: 0;}
.menu a:hover {
  opacity: .8;
}

/* RESPONSIVE */
@media only screen and (max-width: 1023px) {  .shell { max-width: 95%; } }

@media only screen and (max-width: 768px) {
  .site-pusher,
  .site-container {
    height: 100%;
  }

  .site-container {
    overflow: hidden;
  }

  .site-pusher {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  .site-content {
    position: absolute;
    top: 66px;
    right: 0;
    left: 0;
    bottom: 0;
    padding-top: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .header {
    position: static;
	background-color: #121212;
  }

  .header__icon {
    position: relative;
    display: block;
    float: left;
    width: 50px;
    height: 66px;
    cursor: pointer;
  }
  .header__icon:after {
    content: '';
    position: absolute;
    display: block;
    width: 1rem;
    height: 0;
    top: 16px;
    left: 15px;
    box-shadow: 0 10px 0 1px #fffbf0, 0 16px 0 1px #fffbf0, 0 22px 0 1px #fffbf0;
  }

  .menu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #121212;
    /*    overflow-y: scroll;
        -webkit-overflow-scrolling: touch;*/
    width: 250px;
    -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
  }
  .menu a {
    display: block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #a91d42;
  }

  .with--sidebar .site-pusher {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  .with--sidebar .site-cache {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }
}



section {
	min-height: 100vh;
}
.top { position:relative;}

.top {
	background:url(../img/logo.png); background-size: contain; background-position: top center; background-repeat: no-repeat; border:20px solid #121212;
}
@media (max-width: 767px){
	section { min-height: inherit; }
	.top {height: 250px;}
}
#bgndVideo {height: 100vh;}

.page-title	{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
	background: rgba(0,0,0,0.25)
}

.page-title-content { display: block; color: #fffbf0; text-align: center; padding: 10px; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -75%); width:100%;}

.bg-vid-heading { font-size: 50px; line-height:1;}
.bg-vid-ctrls { display:block; }
.btn-vid { 
	display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fffbf0;
}
.btn-vid i {
    text-align: center;
    text-decoration: none;
    display: block;
    line-height: 50px;
    letter-spacing: 0;
    color: #fffbf0;
    border: 2px solid #fffbf0;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: 20px;
	width: 50px;
	height: 50px;
	font-size: 20px;
}

.main-heading .section-actions a {
    display: block;
    overflow: hidden;
    background: #a91d42;
}
.main-heading .section-actions h1 {
    position: relative;
    float: left;
    width: 60%;
    height: 50px;
    padding: 20px;
    background: #047e91;
    text-transform: uppercase;
	margin: 0;
	color: #fffbf0;
	text-align:right;
}

.main-heading .section-actions h1:after {
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 0 45px 45px;
    border-color: transparent transparent transparent #047e91;
    content: '';
}

.main-heading .btn-white {
    float: left;
    padding: 5px 15px 5px;
    border: none;
    margin: 26px 0 0 75px;
    font-size: 20px;
}

@media (max-width: 767px){
	.main-heading .section-actions a { text-align: center; }
	.main-heading .section-actions h1 {
		text-align: center;
		float: none;
		display: block;
		width: 100%;
		height: auto;
		padding: 10px 0;
	}
	.main-heading .section-actions h1:after {
		content: none;
	}
	.main-heading .btn-white {
		float: none;
		margin: 20px auto;
	}
}

/*
Audio Player
*/

.audio-player { color: #121212; }

.left { float:left; }
.right { float:right; }
.center { text-align:center; }


/* Custom Styles
================================================== */

/* Highlight Styles */
::selection { background-color:#262223; color:#444; }


/* Audio Player Styles
================================================== */

/* Default / Desktop / Firefox */
audio { width:100%; }
#mainwrap { box-shadow:0 0 6px 1px rgba(0,0,0,.25); }
#audiowrap { background-color:#231F20; margin:0 auto; }
#plwrap { margin:0 auto; }
#tracks { position:relative; text-align:center; }
#nowPlay { display:inline; }
#npTitle { margin:0; padding:21px; text-align:right; }
#npAction { padding:21px; position:absolute; }
#plList { margin:0; padding: 0;}
#plList li { background-color:#231F20; cursor:pointer; display:block; margin:0; padding:21px 0; }
#plList li:hover { background-color:#262223; }
.plItem { position:relative; }
.plTitle { left:50px; overflow:hidden; position:absolute; right:65px; text-overflow:ellipsis; top:0; white-space:nowrap; }
.plNum { padding-left:21px; width:25px; }
.plLength { padding-left:21px; position:absolute; right:21px; top:0; }
.plSel,.plSel:hover { background-color:#262223!important; cursor:default!important; }
a[id^="btn"] { background-color:#231F20; color:#C8C7C8; cursor:pointer; display:inline-block; font-size:50px; margin:0; padding:21px 27px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active { background-color:#262223; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }

/* IE 9 
html[data-useragent*="MSIE 9.0"] audio { margin-left:9px; outline:none; width:680px; }
html[data-useragent*="MSIE 9.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 9.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] .plSel,
html[data-useragent*="MSIE 9.0"] .plSel:hover { background-color:#080808!important; }
*/
/* IE 10 
html[data-useragent*="MSIE 10.0"] audio { margin-left:6px; width:687px; }
html[data-useragent*="MSIE 10.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 10.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] .plSel,
html[data-useragent*="MSIE 10.0"] .plSel:hover { background-color:#080808!important; }
*/
/* IE 11 
html[data-useragent*="rv:11.0"] audio { margin-left:2px; width:695px; }
html[data-useragent*="rv:11.0"] #audiowrap { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] #plList li { background-color:#000; }
html[data-useragent*="rv:11.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] .plSel,
html[data-useragent*="rv:11.0"] .plSel:hover { background-color:#080808!important; }
*/
/* All Apple Products 
html[data-useragent*="Apple"] audio { margin:0; width:100%; }
html[data-useragent*="Apple"] #audiowrap { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="Apple"] #plList li { background-color:#000; }
html[data-useragent*="Apple"] #plList li:hover { background-color:#080808; }
html[data-useragent*="Apple"] .plSel,
html[data-useragent*="Apple"] .plSel:hover { background-color:#080808!important; }
*/
/* IOS 7 
html[data-useragent*="OS 7"] body { color:#373837; }
html[data-useragent*="OS 7"] audio { margin-left:3px; width:690px; }
html[data-useragent*="OS 7"] #audiowrap { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] a[id^="btn"] { background-color:#e6e6e6; color:#373837; }
html[data-useragent*="OS 7"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 7"] #plList li { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 7"] .plSel,
html[data-useragent*="OS 7"] .plSel:hover { background-color:#eee!important; }
*/
/* IOS 8 
html[data-useragent*="OS 8"] body { color:#373837; }
html[data-useragent*="OS 8"] audio { margin-left:6px; width:694px; }
html[data-useragent*="OS 8"] #audiowrap { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] a[id^="btn"] { background-color:#e4e4e4; color:#373837; }
html[data-useragent*="OS 8"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 8"] #plList li { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 8"] .plSel,
html[data-useragent*="OS 8"] .plSel:hover { background-color:#eee!important; }
*/
/* IOS 9 
html[data-useragent*="OS 9"] body { color:#373837; }
html[data-useragent*="OS 9"] audio { margin-left:6px; width:694px; }
html[data-useragent*="OS 9"] #audiowrap { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] a[id^="btn"] { background-color:#d5d5d5; color:#373837; }
html[data-useragent*="OS 9"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 9"] #plList li { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 9"] .plSel,
html[data-useragent*="OS 9"] .plSel:hover { background-color:#eee!important; }
*/
/* Chrome 
html[data-useragent*="Chrome"] body { color:#5a5a5a; }
html[data-useragent*="Chrome"] audio { width:100%; }
html[data-useragent*="Chrome"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"] a[id^="btn"] { background-color:#fafafa; color:#5a5a5a; }
html[data-useragent*="Chrome"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { background-color:#eee!important; }
*/
/* Chrome / Android / Tablet 
html[data-useragent*="Chrome"][data-useragent*="Android"] body { color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:689px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"] { background-color:#fafafa; color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel,
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel:hover { background-color:#eee!important; }
*/

.audio-player { color:#5a5a5a; }
.audio-player audio { width:100%; }
.audio-player #audiowrap { background-color:#fafafa; }
.audio-player a[id^="btn"] { background-color:#fafafa; color:#5a5a5a; }
.audio-player a[id^="btn"]:hover { background-color:#eee; }
.audio-player #plList li { background-color:#fafafa; }
.audio-player #plList li:hover { background-color:#eee; }
.audio-player .plSel,
.audio-player .plSel:hover { background-color:#eee!important; }


/* Audio Player Media Queries
================================================== */

/* Tablet Portrait 
@media only screen and (min-width: 768px) and (max-width: 959px) {
audio { width:526px; }
html[data-useragent*="MSIE 9.0"] audio { width:536px; }
html[data-useragent*="MSIE 10.0"] audio { width:543px; }
html[data-useragent*="rv:11.0"] audio { width:551px; }
html[data-useragent*="OS 7"] audio { width:546px; }
html[data-useragent*="OS 8"] audio { width:550px; }
html[data-useragent*="OS 9"] audio { width:550px; }
html[data-useragent*="Chrome"] audio { width:533px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:545px; }
}
*/
/* Mobile Landscape
@media only screen and (min-width: 480px) and (max-width: 767px) {
audio { width:390px; }
html[data-useragent*="MSIE 9.0"] audio { width:400px; }
html[data-useragent*="MSIE 10.0"] audio { width:407px; }
html[data-useragent*="rv:11.0"] audio { width:415px; }
html[data-useragent*="OS 7"] audio { width:410px; }
html[data-useragent*="OS 8"] audio { width:414px; }
html[data-useragent*="OS 9"] audio { width:414px; }
html[data-useragent*="Chrome"] audio { width:397px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:410px; }
#npTitle { width:245px; }
}
 */
/* Mobile Portrait
@media only screen and (max-width: 479px) {
audio { width:270px; }
html[data-useragent*="MSIE 9.0"] audio { width:280px; }
html[data-useragent*="MSIE 10.0"] audio { width:287px; }
html[data-useragent*="rv:11.0"] audio { width:295px; }
html[data-useragent*="OS 7"] audio { width:290px; }
html[data-useragent*="OS 8"] audio { width:294px; }
html[data-useragent*="OS 9"] audio { width:294px; }
html[data-useragent*="Chrome"] audio { width:277px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:290px; }
#npTitle { width:167px; }
}
 */


.btn {
    -webkit-transition: background 0.4s, opacity 0.4s;
    -o-transition: background 0.4s, opacity 0.4s;
    transition: background 0.4s, opacity 0.4s;
    display: inline-block;
    vertical-align: top;
	font-weight: 700;
}

.btn-block { display: block; }
.btn-white {
    padding: 2px 17px 4px 14px;
    border: 3px solid #047e91;
    border-radius: 6px;
    background: #fffbf0;
    font-size: 19px;
    color: #047e91;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.btn-color {
	background: #a91d42;
	transition: all 0.3s ease;
	border-radius: 6px;
	padding: 5px 30px;
	text-align: center;
	text-transform: uppercase;
	color: #fffbf0;
	margin-bottom: 20px;
}
.btn-color:hover {
	background: #047e91;
}
.main-heading .section-actions a:hover {
    background: #047e91;
}
.main-heading .section-actions a:hover h1 {
    background: #a91d42;
}
.main-heading .section-actions:hover h1:after {
    border-color: transparent transparent transparent #a91d42;
}

.intro, .songlist { position: relative; }

.intro, .contact { background-color: #121212; color: #fffbf0; }

.songlist { text-align: center; background: #fffbf0; }
.intro, .content, .songlist .content {padding-top: 30px; padding-bottom: 30px; }

.contact p { text-align:center;}

.section-light { text-align: center; background: #fffbf0; padding: 50px 0; }

.p-feature { color: #047e91; font-size:2em;}

.banner {
    position: relative;
    color: #fffbf0;
	padding-top: 66px;
}
.banner .shell { min-height: 30vh;
	background: url(../img/logo.png);
	background-size: contain;
    background-repeat: no-repeat;
}
.banner h2 {
	text-align: right;
	font-size: 3em;
	font-family: 'Monoton', cursive;
	font-weight: 400;
	margin-top: 0;
}

.page-desc { min-height: 60vh; background-color: #121212; color: #fffbf0; padding: 50px 0; max-width: 95%; margin: 0 auto;}

.content h3 { text-align: center; color: #047e91; font-size: 1.75em; text-transform: uppercase; margin-top: 0; }

@media (min-width:768px){
	.intro .content {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width:100%;
  	}
}

@media (max-width:767px){
	.intro .content, .songlist .content {
	  text-align: center;
	  padding: 20px 0 20px;
  	}
	.banner .shell { background-position-x: center; }
	.banner h2 {
		position: absolute;
    	top: -10px;
    	right: 0;
		left: 0;
		text-align: center;
	}
	.p-feature { font-size: 1.2em;}
}


.box {margin: 0 15px;}
  
h1 { font-size: 2em; font-weight: 700; text-align: center; }
.heading, .bg-vid-heading {
	font-family: 'Monoton', cursive;
	font-weight: 400;
	letter-spacing: 5px;
	font-size: 4em;
	text-align: center;
	margin-bottom: 0;
}

@media (max-width:767px){
	.heading, .bg-vid-heading {
	  font-size: 2em;
  	}
}

.member { background: #a91d42; color: #fffbf0; }
.member > div { width: 50%; float: left;}
.member .member-image { height: 50vh; background-size: cover; background-position: center center;}
.member-right { background: #047e91; }
.member-right .member-image { float: right; }
.member-content { padding: 20px; max-width: 500px; }
.member-right .member-content { float: right; }

@media (max-width:480px){
	.member > div { width: 100%; display:block; }
}

.footer-menu { text-align: center; display: flex; justify-content: space-around; color: #fffbf0; padding: 20px 0;}
.footer-menu li {}

.footer-bar { background-color: #121212; color: #fffbf0; text-align: center; }
.footer-bar p { margin: 0 auto; padding: 10px; font-size: .75em; }

audio::-internal-media-controls-download-button {
    display:none;
}

audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

.contact-info i { margin-right: 10px; }