/*
#e8edf3 - White
#e6cf8b - Yellow
#b56969 - Red
#22264b - Blue

font-family: 'Rock Salt', cursive;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Great Vibes', cursive;
*/






/* Desktop
================================================== */

.container { position:relative; margin:0 auto; width:700px; }
.column { width:inherit; }


/* Tablet (Portrait)
================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width:556px; }
}


/* Mobile (Portrait)
================================================== */

@media only screen and (max-width: 767px) {
.container { width:300px; }
}


/* Mobile (Landscape)
================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width:420px; }
}


/* CSS Reset
================================================== */

html,body,div,span,h1,h6,p,a,ul,li,audio {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}

body { line-height:1; }
ul { list-style:none; }


/* Basic Styles
================================================== */

html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
background: #704141 url('../img/background.png');
background-size: contain;
color: #22264b;
font:20px/24px;
font-family: 'Josefin Sans', sans-serif;
font-weight:300;
padding:5px 0;
}

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


/* Typography
================================================== */

h1,h6,p { color:#e8edf3; font-weight:200; }
h1 { font-size:42px; line-height:44px; margin:20px 0 0; }
h6 { font-size:18px; line-height:20px; margin:4px 0 20px; }
p { font-size:18px; line-height:20px; margin:0 0 2px; }



h1 {
  color: #e8edf3;
  font-family: 'Great Vibes', cursive!important;
  margin-bottom: 30px;
}

p {
  color: #e8edf3;
  font-family: 'Josefin Sans', sans-serif;
  margin-bottom: 30px;
}

.blue-box {
  background-color: #22264b;
  color: #e8edf3;
  border-radius: 35px;
  padding:20px;
  margin-bottom:20px;
  -webkit-box-shadow: 0px 14px 67px -5px rgba(0,0,0,0.81);
-moz-box-shadow: 0px 14px 67px -5px rgba(0,0,0,0.81);
box-shadow: 0px 14px 67px -5px rgba(0,0,0,0.81);
}

.blue-box ul {
  margin-bottom: 50px;
}
.blue-box li {
  margin-bottom: 5px;
}

.blue-box img {
  width: 100px;
}
img.hero {
  float: left;
    width: 20%;
    margin-bottom: 20px;
  }
@media only screen and (max-width: 959px) {
  img.hero {
    float: none;
    width: 60%;
    margin-bottom: 20px;
  }
}


/* Links
================================================== */

a,a:visited { color:#ddd; outline:0; text-decoration:underline; }
a:hover,a:focus { color:#bbb; }
p a,p a:visited { line-height:inherit; }


/* Misc.
================================================== */

.add-bottom { margin-bottom:20px !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }


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

/* CSS Transitions */
/** {
-moz-transition:all 100ms ease;
-o-transition:all 100ms ease;
-webkit-transition:all 100ms ease;
transition:all 100ms ease;
}*/

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


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

/* Default / Desktop / Firefox */
audio { margin:0 15px 0 14px; width:670px; }
#mainwrap {
  -webkit-box-shadow: 0px 14px 67px -5px rgba(0,0,0,0.81);
-moz-box-shadow: 0px 14px 67px -5px rgba(0,0,0,0.81);
box-shadow: 0px 14px 67px -5px rgba(0,0,0,0.81);

border-radius: 35px;
 }
#audiowrap { border-top-left-radius: 35px; border-top-right-radius: 35px; background-color:#ffdbaa; margin:0 auto; }
#plwrap { margin:0 auto; }
#tracks { min-height:65px; position:relative; text-align:center; text-decoration:none; top:13px; }
#nowPlay { display:inline; }
#npTitle { margin:0; padding:21px; text-align:right; }
#npAction { padding:21px; position:absolute; }
#plList { margin:0; }
#plList li { background-color:#ffdbaa; cursor:pointer; margin:0; padding:21px 0;font-weight: bold; }
#plList li:hover { background-color:#b56969; color: #e8edf3;}
.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:#b56969!important; cursor:default!important; color: #e8edf3!important;}
a[id^="btn"] { color:#22264b; cursor:pointer; font-size:50px; margin:0; padding:0 27px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active {color: #b56969}
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }




/* 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:543px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:5*/45px; }
}

/* 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:407px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:410px; }*/
#npTitle { width:245px; }
}

audio {
  width: 95%;
  display: block;
  margin:0 auto;
}

@media only screen and (max-width: 479px) {
  html,body {

    background-image: none;
  }
}

/* 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:287px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:290px; }
#npTitle { width:167px; }
}*/