@charset "UTF-8";
/* CSS Document */

html, body {height:100%; width:100%; padding:0; margin:0; overflow-x:hidden; background:rgba(0,0,0,0.7);}

header {width:100%; background:rgba(0,0,0,0.7); position:fixed; left:0; top:0; z-index:10; color:#fff; padding:5px 0 5px 0;}
header h1 {padding:0 10% 0 10%; margin:0; font:normal 72px/96px 'Prompt', sans-serif; text-align:center;}
header h2 {padding:0 0 0 50px; margin:0; font:normal 22px/30px 'Prompt', sans-serif;}
header h3 {padding:0 10% 0 10%; margin:0; font:normal 36px/40px 'Prompt', sans-serif; text-align:center;}

/* menu */
header ul {padding:10px 0 0 0; margin:0; list-style:none; width:100%; position:relative; text-align:center;}
header ul li {display:inline-block; margin:0px; position:relative; background:rgba(15,10,15,0.6); color:#fefff8;
}
header ul li a {display:block; width:140px; font:20px/24px 'Prompt', sans-serif; letter-spacing: 1px; text-decoration:none; color: #666664;}
header ul li a:hover {color:#fefff8;}

/* menu background */
header li:nth-of-type(1) {background:rgba(15,10,15,0.7);}
header li:nth-of-type(2) {background:rgba(15,10,15,0.7);}
header li:nth-of-type(3) {background:rgba(15,10,15,0.7);}
header li:nth-of-type(4) {background:rgba(15,10,15,0.7);}
header li:nth-of-type(5) {background:rgba(15,10,15,0.7);}
header li:nth-of-type(6) {background:rgba(15,10,15,0.7);}
header li:nth-of-type(7) {background:#f90; margin-right:30px;}
/* end menu */  

section {display:block; width:100%; position:relative; background:#333333;}
section article {width:90%; max-width:1020px; min-width:300px; margin:0 auto; text-align:center; padding:60px 0;}
section article h1 {padding:0; margin:0; font:normal 54px/64px 'Prompt', sans-serif;}
section article h2 {padding:0; margin:0; font:normal 28px/42px 'Prompt', sans-serif;}
section article h3 {padding:0; margin:0; font:22px/32px 'Prompt', sans-serif;}
section article h4 {padding:0; margin:0; font:18px/24px 'Prompt', sans-serif;}
section article p {padding:0; margin:0, 1em, 0, 0; font:normal 18px/32px 'Prompt', sans-serif;}
section article a {padding:0; margin:0, 1em, 0, 0; font:normal 18px/32px 'Prompt', sans-serif; text-decoration:underline; color: inherit;}
section article a:hover {color:aaaaaa;}

section article .flex-container {
    margin:15px 5px 25px 5px;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;}
    
section article .flex-container h3 {padding:0; margin:0; font:22px/32px 'Prompt', sans-serif;}
section article .flex-container h4 {padding:0; margin:0; font:18px/24px 'Prompt', sans-serif;}
section article .flex-container p {padding:0; margin:0; color: fff; font:18px/24px 'Prompt', sans-serif;}
section article .flex-container a {padding:0; margin:0; font:inherit; text-decoration:none; color: inherit;}

section article .c-container {margin:auto; display:flex; flex-flow:row wrap; justify-content: flex-start;}

section article .flex-item {padding: 15px 5px 20px 5px; margin:0 auto; min-height:160px; width:300px;}
section article .item-c {padding:5px; margin:auto; align-self:center;}

section article .column {display:inline-block; width:42%; margin:30px 3%; vertical-align:top; text-align:left; justify-content:center;}
section article .column h3 {padding:0; margin:0; font:normal 22px/54px 'Prompt', sans-serif;}
section article .column h4 {padding:0; margin:0; font:normal 18px/42px 'Prompt', sans-serif;}
section article .column p {padding:0; margin:0; color: fff; font:normal 16px/36px 'Prompt', sans-serif;}

.pad {height:80px;}
.bottom {position:absolute; bottom:0; left:0;}

/* backgrounds for sections */
/* initial section - optional */
#a1 {background:url(media/images/pattern_blue.png); background-repeat: repeat; color:#fff;}
/* shows - pic */
#a2 {min-height:100%; background:url(media/images/pic2.png) no-repeat center center fixed; background-size:cover; position:relative; color:#fff;}
/* recordings - pic */
#a3 {background:url(media/images/turntable.png) no-repeat center center fixed; background-size:cover; color:#fff;}
#a4 {background:url(media/images/pic31.jpg) no-repeat center center fixed; background-size:cover; color:#fff;}
#a5 {background:url(media/images/pattern_blue.png); background-repeat: repeat; color:#fff;}
/* video - color pattern */
#a6 {background:url(media/images/oldcam.png) no-repeat center center fixed; background-size:cover; color:#fff;}
/*#a6 {background:url(media/images/pattern_blue.png) no-repeat center center fixed; background-repeat:repeat; color:#fff;}
*/
#a7 {background:#67497b;}
/* bio-pic */
#a8 {background:url(media/images/jct_cover_art.png) no-repeat center center fixed; background-color;#040404; background-size:cover; color:#fff;}
/* contact - color */
#a9 {background:url(media/images/pattern_blue.png); background-repeat: repeat; color:#fff;}
#a10 {background:url(media/images/pic2.jpg) no-repeat center center fixed; background-size:cover; color:#fff;}
#a11 {background:#67497b;}
#a12 {background:#3a88c9; color:#fff;}

footer {width:100%; background:#3a88c9; padding:30px 0; color:#fff;}
footer h2 {padding:0 0 0 50px; margin:0; font:normal 15px/15px 'Prompt', arial, sans-serif;}

/* fade between section colors - callouts go in the adjacent sections */
.fade {width:100%; height:40px; background:transparent;}

.bluein {background-image: linear-gradient(to bottom, transparent, #3a88c9 100%);}
.blueout {background-image: linear-gradient(to top, transparent, #3a88c9 100%);}

.yellowin {background-image: linear-gradient(to bottom, transparent, #c2a361 100%);}
.yellowout {background-image: linear-gradient(to top, transparent, #c2a361 100%);}

.purplein {background-image: linear-gradient(to bottom, transparent, #67497b 100%);}
.purpleout {background-image: linear-gradient(to top, transparent, #67497b 100%);}


.yelblue {background-image: linear-gradient(to bottom, #faaa00 100%, #022366 100%);}



/* audio player */
/* Audio Player Styles
================================================== */
.ap-wrapper {
  display: block;
  position: relative;
  margin: 0 auto;
  max-width: 740px;
  background-color:#2f79b3;
}

/* We tell all items to be 100% width, via flex-basis */
.ap-wrapper > * {
  flex: 1 100%; }

.ap-column { width:inherit; }

* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
}

audio { margin:4px auto; }

mainwrap {}

#audiowrap {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    margin: auto -2%;    
    padding:0;
    background-color:rgba(0,0,0,0); }
    
/* song list */
#plwrap {
margin:0 0 0 0;
background-color:rgba(0,0,0,0); }

#audio0 {
    margin: 0;
    width:96%;
    align-self: center;}

#tracks {
margin: 0;
align-self: center}

#nowPlay {
display:block;
font:19px/24px 'Prompt', arial, sans-serif; }

#nowPlay span {
display:inline-block;
vertical-align:top; }

#nowPlay span#npAction {
padding:4px 0px 4px 2px;
width:28%;
text-align:left; }

#nowPlay span#npTitle {
padding:4px 0;
text-align:right;
width:70%; }

#plList li {
cursor:pointer;
display:flex;
flex-flow: column no-wrap;
justify-content: center;
padding: 6px auto;
margin: 0 auto 2px -40px;
}

#plList li:hover {
background-color:rgba(4,40,120,0.4); }

.plItem {
display: flex;
flex-flow: row no-wrap;
justify-content: flex-start;
font:18px/28px 'Prompt', arial, sans-serif; }

.plTitle {
display: inline-block;
margin-left: 12px;
padding-right: 3px;
width:550px;
overflow:hidden;
text-overflow:ellipsis;
text-align:left;
top:0;
white-space:nowrap; }

.plNum {
display: inline-block;
width: 35px;
position:relative; }

.plLength {
margin-right: 10px;
align-self: flex-end;
width:30px;
top:0; }

/* selected track */
.plSel,
.plSel:hover {
background-color:rgba(2,40,130,.7);
color:#fff;
cursor:default !important; }


#tracks a {
border-radius:3px;
cursor:pointer;
display:inline-block;
text-align:center;
font-size: 1.4rem;
font-weight: bolder
margin:-8px auto 0 0;
padding:7px 10px 7px 10px;
text-decoration:none;
transition:background .4s ease; }

#tracks a:last-child {
margin-left:0; }

/* previous,next buttons */
#tracks a:hover,
#tracks a:active {
background-color:rgba(5,30,200,0);
color:#fff; }

#tracks a::-moz-focus-inner {
border:0;
padding:0; }


/* Plyr Overrides
================================================== */

.plyr--audio .plyr__controls {
background-color:transparent;
border:none;
color:#fff;
padding:5px 0px 5px 0px;
width:auto; }

.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr--audio .plyr__controls button:hover,
.plyr__play-large {
background:rgba(0,0,0,.2); }

.plyr__progress--played,
.plyr__volume--display {
color:rgba(0,0,0,.1); }

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
background:rgba(0,0,0,.1); }

.plyr--audio .plyr__progress--buffer {
color:rgba(0,0,0,.1); }

/* end of audio player */


/* for iPad */
@media only screen and (max-width: 768px) {
header h1 {padding:0 0 0 30px; margin:0; font:normal 44px/48px 'Prompt', arial, sans-serif;}
header h2 {padding:0 0 0 30px; margin:0; font:normal 16px/19px 'Prompt', arial, sans-serif;}
header ul li a {width:95px; font:14px/16px 'Prompt', sans-serif;}
section article h1 {padding:0; margin:0; font:normal 48px/48px 'Prompt', arial, sans-serif;}
section article h2 {padding:0; margin:0; font:normal 26px/34px 'Prompt', arial, sans-serif;}
section article p {padding:5px 0; margin:0; font:normal 16px/22px 'Prompt', arial, sans-serif;}
section article .column h3 {padding:0; margin:0; font:normal 20px/28px 'Prompt', arial, sans-serif;}
section article .column h4 {padding:0; margin:0; font:normal 18px/24px 'Prompt', arial, sans-serif;}
section article .column p {padding:0; margin:0; color: fff; font:normal 16px/22px 'Prompt', arial, sans-serif;}
#a8 {background-size:160%;}
.pad {height:80px;}
section article .column {width:80%; margin:20px auto 0 auto; vertical-align:top; text-align:left;}
.plItem {font:16px/24px 'Prompt', arial, sans-serif;}
.plTitle {margin-left:12px; width:400px;}
}


/* for small tablet */
@media only screen and (max-width: 480px) {
header h1 {padding:0 0 0 20px; margin:0; font:normal 36px/38px 'Prompt', arial, sans-serif;}
header h2 {padding:0 0 0 20px; margin:0; font:normal 13px/13px 'Prompt', arial, sans-serif;}
header ul li a {width:90px; font:12px/13px 'Prompt', sans-serif;}
section article h1 {padding:0; margin:0; font:normal 44px/48px 'Prompt', arial, sans-serif;}
section article h2 {padding:0; margin:0; font:normal 24px/30px 'Prompt', arial, sans-serif;}
section article p {padding:3px 0; margin:0; font:normal 14px/18px 'Prompt', arial, sans-serif;}
section article .column h3 {padding:0; margin:0; font:normal 18px/24px 'Prompt', arial, sans-serif;}
section article .column h4 {padding:0; margin:0; font:normal 16px/20px 'Prompt', arial, sans-serif;}
section article .column p {padding:0; margin:0; color: fff; font:normal 14px/18px 'Prompt', arial, sans-serif;}
#a1 {background-size:200%;}
#a3 {background-size:240%;}
#a4 {background-size:150%;}
#a8 {background-size:160%;}
.pad {height:70px;}
header a {width:20px;}
#nowPlay {font:16px/22px 'Prompt', arial, sans-serif; }
.plItem {font:16px/22px 'Prompt', arial, sans-serif;}
.plTitle {margin-left:15%; width:400px;}
.plNum {display:none;}
.plLength {display: none;}
}

/* for phone */
@media only screen and (max-width: 320px) {
header h1 {padding:0 0 0 10px; margin:0; font:normal 22px/30px 'Prompt', arial, sans-serif;}
header h2 {padding:0 0 0 10px; margin:0; font:normal 11px/11px 'Prompt', arial, sans-serif;}
section article h1 {padding:0; margin:0; font:normal 42px/44px 'Prompt', arial, sans-serif;}
section article h2 {padding:0; margin:0; font:normal 22px/30px 'Prompt', arial, sans-serif;}
section article p {padding:0; margin:0; font:normal 13px/18px 'Prompt', arial, sans-serif;}
section article .column h3 {padding:0; margin:0; font:normal 16px/22px 'Prompt', arial, sans-serif;}
section article .column h4 {padding:0; margin:0; font:normal 14px/18px 'Prompt', arial, sans-serif;}
section article .column p {padding:0; margin:0; color: fff; font:normal 12px/16px 'Prompt', arial, sans-serif;}
#a1 {background-size:200%;}
#a3 {background-size:240%;}
#a4 {background-size:150%;}
#a8 {background-size:160%;}
.pad {height:60px;}
#nowPlay {font:12px/18px 'Prompt', arial, sans-serif; }
.plItem {justify-content: center; font:10px/14px 'Prompt', arial, sans-serif;}
.plTitle {margin-left:15%; width:280px;}
.plNum {display: none;}
.plLength {display: none;}
}

@media (min-device-width:320px) and (max-device-width:768px) {
section#a1,
section#a3,
section#a4,
section#a8,
section#a9
{background-attachment:scroll;}
}

/* end of standard formatting */