@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');
 html,body {
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  background-color:#0665a2;
  color:white;
  font-size:1.05rem;
  font-family:"Oxygen", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300;
  letter-spacing:.025rem;
  line-height:1.618;
}

*,::before,::after {
  box-sizing:border-box;
}

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


    /* Setup
    ================================================== */

    .container { position:relative; margin:0 auto; max-width:800px; width:100%; }
    .column { width:inherit; }


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

    p { color:#fff; display:block; font-size:.9rem; font-weight:400; margin:0 0 2px; }

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


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

    .add-bottom { margin-bottom:2rem !important; }
    .left { float:left; }
    .right { float:right; }
    .center { text-align:center; }
    .hidden { display:none; }

    .no-support {
      margin:2rem auto;
      text-align:center;
      width:90%;
    }


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

    audio {
      display:none;
    }

    #audiowrap,
    #plwrap {
      margin:0 auto;
    }

    #tracks {
      font-size:0;
      position:relative;
      text-align:center;
    }

    #nowPlay {
      display:block;
      font-size:0;
    }

    #nowPlay span {
      display:inline-block;
      font-size:1.05rem;
      vertical-align:top;
    }

    #nowPlay span#npAction {
      padding:21px;
      width:30%;
    }

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

    #plList li {
      cursor:pointer;
      display:block;
      margin:0;
      padding:21px 0;
    }

    #plList li:hover {
      background-color:rgba(0,0,0,.1);
    }

    .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:rgba(0,0,0,.1);
      color:#fff;
      cursor:default !important;
    }

    #tracks a {
      border-radius:3px;
      color:#fff;
      cursor:pointer;
      display:inline-block;
      font-size:2rem;
      height:35px;
      line-height:.175;
      margin:0 5px 30px;
      padding:10px;
      text-decoration:none;
      transition:background .3s ease;
    }

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

    #tracks a:hover,
    #tracks a:active {
      background-color:rgba(0,0,0,.1);
      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:20px 20px 20px 13px;
      width:100%;
    }

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

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



    /* Header */

    #header {
      position: fixed;
      z-index: 10000;
      left: 0;
      top: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      height: 3em;
      line-height: 3em;
      box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
    }

    #header img {
      float: left;
      width: 50px;
      height: 50px;
    }

    #header h1 {
      position: relative;
      color: #000;
      left: 3em;
      top: 0;
      height: 3em;
      line-height: 3em;
      cursor: default;
    }

    #header h1 a {
      font-size: 1.25em;
    }

    #header nav {
      position: absolute;
      right: 0.5em;
      top: 0;
      height: 3em;
      line-height: 3em;
    }

    #header nav ul {
      margin: 0;
    }

    #header nav ul li {
      display: inline-block;
      margin-left: 0.5em;
      font-size: 0.9em;
    }

    #header nav ul li a {
      display: block;
      color: #000;
      text-decoration: none;
      height: 3em;
      line-height: 3em;
      padding: 0 0.5em 0 0.5em;
      outline: 0;
    }

    @media screen and (max-width: 736px) {

      #header {
        height: 2.5em;
        line-height: 2.5em;
      }


      #header img {
        width: 35px;
        height: 35px;
      }

      #header h1 {
        text-align: center;
        position: absolute;
        left: 4em;
        top: 0;
        height: 2.5em;
        line-height: 2.5em;
      }

      #header h1 a {
        font-size: 1em;
      }

    }

    body {
      padding-top: 3em;
    }

    @media screen and (max-width: 736px) {

      body {
        padding-top: 2.5em;
      }

    }


    /* Media Queries
    ================================================== */

    @media only screen and (max-width:600px) {
      #nowPlay span#npAction { display:none; }
      #nowPlay span#npTitle { display:block; text-align:center; width:100%; }
    }





    /* Footer */



    #footer {
      display: -moz-flex;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -moz-align-items: center;
      -webkit-align-items: center;
      -ms-align-items: center;
      align-items: center;
      -moz-justify-content: space-between;
      -webkit-justify-content: space-between;
      -ms-justify-content: space-between;
      justify-content: space-between;
      position: relative;
      margin: 0;
      line-height: 1em;
      padding: 1.5em;
      background: #39454b;
      color: rgba(185, 186, 187, 0.5);
      overflow: hidden;
    }

    #footer > * {
      margin-bottom: 0;
    }

    #footer a {
      color: inherit;
    }

    #footer a:hover {
      color: #b9babb;
    }

    #footer ul.menu {
      margin: 0;
    }

    #footer ul.menu li {
      border-left-color: rgba(185, 186, 187, 0.2);
      font-size: 0.9em;
    }

    @media screen and (max-width: 1000px) {

      #footer {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
        position: relative;
        margin: 0;
        line-height: 1em;
        padding: 1.5em;
        background: #39454b;
        color: #fff;
        overflow: hidden;
      }

      #footer > * {
        margin: 0 0 1em 0;
      }

    }

    @media screen and (max-width: 736px) {

      #footer ul.menu li {
        border-left: none;
        display: block;
        line-height: inherit;
        margin: 0.25em 0 0 0;
        padding: 0.25em 0 0 0;
      }

      #footer ul.menu li:first-child {
        margin-top: 0;
        padding-top: 0;
      }

    }
    ul.icons {
      cursor: default;
    }

    ul.icons li {
      display: inline-block;
    }

    ul.icons a {
      display: inline-block;
      width: 2em;
      height: 2em;
      line-height: 2em;
      text-align: center;
      border: 0;
    }


    .icon {
      text-decoration: none;
    }

    .icon:before {
      display: inline-block;
      font-family: FontAwesome;
      font-size: 1.25em;
      text-decoration: none;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .icon > .label {
      display: none;
    }


    .topnav {
      overflow: hidden;
    }

    .topnav a {
      float: left;
      display: block;
      color: #000;
      text-align: center;
      padding: 0px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: #444;
    }

    .active {
      background-color: #4CAF50;
      color: black;
    }

    .topnav .icon {
      display: none;
    }

    @media screen and (max-width: 600px) {
      .topnav a:not(:last-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
    }

    @media screen and (max-width: 600px) {
      .topnav.responsive {
        position: relative;
        background-color: #fff;
        
      }
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }
    html,body {
      -webkit-font-smoothing:antialiased;
      -webkit-text-size-adjust:100%;
      background-color:#0665a2;
      color:white;
      font-size:1.05rem;
      font-family:"Oxygen", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight:300;
      letter-spacing:.025rem;
      line-height:1.618;
    }

    *,::before,::after {
      box-sizing:border-box;
    }

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


    /* Setup
    ================================================== */

    .container { position:relative; margin:0 auto; max-width:800px; width:100%; }
    .column { width:inherit; }


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

    p { color:#fff; display:block; font-size:.9rem; font-weight:400; margin:0 0 2px; }

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


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

    .add-bottom { margin-bottom:2rem !important; }
    .left { float:left; }
    .right { float:right; }
    .center { text-align:center; }
    .hidden { display:none; }

    .no-support {
      margin:2rem auto;
      text-align:center;
      width:90%;
    }


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

    audio {
      display:none;
    }

    #audiowrap,
    #plwrap {
      margin:0 auto;
    }

    #tracks {
      font-size:0;
      position:relative;
      text-align:center;
    }

    #nowPlay {
      display:block;
      font-size:0;
    }

    #nowPlay span {
      display:inline-block;
      font-size:1.05rem;
      vertical-align:top;
    }

    #nowPlay span#npAction {
      padding:21px;
      width:30%;
    }

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

    #plList li {
      cursor:pointer;
      display:block;
      margin:0;
      padding:21px 0;
    }

    #plList li:hover {
      background-color:rgba(0,0,0,.1);
    }

    .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:rgba(0,0,0,.1);
      color:#fff;
      cursor:default !important;
    }

    #tracks a {
      border-radius:3px;
      color:#fff;
      cursor:pointer;
      display:inline-block;
      font-size:2rem;
      height:35px;
      line-height:.175;
      margin:0 5px 30px;
      padding:10px;
      text-decoration:none;
      transition:background .3s ease;
    }

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

    #tracks a:hover,
    #tracks a:active {
      background-color:rgba(0,0,0,.1);
      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:20px 20px 20px 13px;
      width:100%;
    }

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

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



    /* Header */

    #header {
      position: fixed;
      z-index: 10000;
      left: 0;
      top: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      height: 3em;
      line-height: 3em;
      box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
    }

    #header img {
      float: left;
      width: 50px;
      height: 50px;
    }

    #header h1 {
      position: relative;
      color: #000;
      left: 3em;
      top: 0;
      height: 3em;
      line-height: 3em;
      cursor: default;
    }

    #header h1 a {
      font-size: 1.25em;
    }

    #header nav {
      position: absolute;
      right: 0.5em;
      top: 0;
      height: 3em;
      line-height: 3em;
    }

    #header nav ul {
      margin: 0;
    }

    #header nav ul li {
      display: inline-block;
      margin-left: 0.5em;
      font-size: 0.9em;
    }

    #header nav ul li a {
      display: block;
      color: #000;
      text-decoration: none;
      height: 3em;
      line-height: 3em;
      padding: 0 0.5em 0 0.5em;
      outline: 0;
    }

    @media screen and (max-width: 736px) {

      #header {
        height: 2.5em;
        line-height: 2.5em;
      }


      #header img {
        width: 35px;
        height: 35px;
      }

      #header h1 {
        text-align: center;
        position: absolute;
        left: 4em;
        top: 0;
        height: 2.5em;
        line-height: 2.5em;
      }

      #header h1 a {
        font-size: 1em;
      }

    }

    body {
      padding-top: 3em;
    }

    @media screen and (max-width: 736px) {

      body {
        padding-top: 2.5em;
      }

    }


    /* Media Queries
    ================================================== */

    @media only screen and (max-width:600px) {
      #nowPlay span#npAction { display:none; }
      #nowPlay span#npTitle { display:block; text-align:center; width:100%; }
    }





    /* Footer */



    #footer {
      display: -moz-flex;
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      -moz-align-items: center;
      -webkit-align-items: center;
      -ms-align-items: center;
      align-items: center;
      -moz-justify-content: space-between;
      -webkit-justify-content: space-between;
      -ms-justify-content: space-between;
      justify-content: space-between;
      position: relative;
      margin: 0;
      line-height: 1em;
      padding: 1.5em;
      background: #39454b;
      color: rgba(185, 186, 187, 0.5);
      overflow: hidden;
    }

    #footer > * {
      margin-bottom: 0;
    }

    #footer a {
      color: inherit;
    }

    #footer a:hover {
      color: #b9babb;
    }

    #footer ul.menu {
      margin: 0;
    }

    #footer ul.menu li {
      border-left-color: rgba(185, 186, 187, 0.2);
      font-size: 0.9em;
    }

    @media screen and (max-width: 1000px) {

      #footer {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
        position: relative;
        margin: 0;
        line-height: 1em;
        padding: 1.5em;
        background: #39454b;
        color: #fff;
        overflow: hidden;
      }

      #footer > * {
        margin: 0 0 1em 0;
      }

    }

    @media screen and (max-width: 736px) {

      #footer ul.menu li {
        border-left: none;
        display: block;
        line-height: inherit;
        margin: 0.25em 0 0 0;
        padding: 0.25em 0 0 0;
      }

      #footer ul.menu li:first-child {
        margin-top: 0;
        padding-top: 0;
      }

    }
    ul.icons {
      cursor: default;
    }

    ul.icons li {
      display: inline-block;
    }

    ul.icons a {
      display: inline-block;
      width: 2em;
      height: 2em;
      line-height: 2em;
      text-align: center;
      border: 0;
    }


    .icon {
      text-decoration: none;
    }

    .icon:before {
      display: inline-block;
      font-family: FontAwesome;
      font-size: 1.25em;
      text-decoration: none;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .icon > .label {
      display: none;
    }


    .topnav {
      overflow: hidden;
    }

    .topnav a {
      float: left;
      display: block;
      color: #000;
      text-align: center;
      padding: 0px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .topnav a:hover {
      background-color: #ddd;
      color: #444;
    }

    .active {
      background-color: #4CAF50;
      color: black;
    }

    .topnav .icon {
      display: none;
    }

    @media screen and (max-width: 600px) {
      .topnav a:not(:last-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
    }

    @media screen and (max-width: 600px) {
      .topnav.responsive {
        position: relative;
        background-color: #fff;
        
      }
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }