/* -----------------------
        Base styles
        ------------------------*/
 
 * {
     box-sizing: border-box;
 }
 
 body {
     margin: 0;
     padding: 0;
     color: #fff;
     background-color: #000;
     font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin: 1em 0;
     font-weight: 500;
     font-family: OswaldRegular;
     line-height: 1.1;
     text-align: center;
 }
 
 .ornament-top {
     background-image: url(../images/ornament-top.png);
     background-position: center;
 }
 
 h1 {
     font-size: 2.25em;
 }
 /* 36px */
 
 h2 {
     font-size: 1.75em;
 }
 /* 28px */
 
 h3 {
     font-size: 1.375em;
 }
 /* 22px */
 
 h4 {
     font-size: 1.125em;
 }
 /* 18px */
 
 h5 {
     font-size: 1em;
 }
 /* 16px */
 
 h6 {
     font-size: .875em;
 }
 /* 14px */
 
 p {
     margin: 0 0 1.5em;
     line-height: 1.5;
 }
 
 blockquote {
     padding: 1em 2em;
     margin: 0 0 2em;
     border-left: 5px solid #eee;
 }
 
 hr {
     height: 0;
     margin-top: 1em;
     margin-bottom: 2em;
     border: 0;
     border-top: 1px solid #ddd;
 }
 
 table {
     background-color: transparent;
     border-spacing: 0;
     border-collapse: collapse;
     border-top: 1px solid #ddd;
 }
 
 th,
 td {
     padding: .5em 1em;
     vertical-align: top;
     text-align: left;
     border-bottom: 1px solid #ddd;
 }
 
 a:link {
     color: #fff;
 }
 
 a:visited {
     color: #eee;
 }
 
 a:focus {
     color: #fff;
 }
 
 a:hover {
     color: #eee
 }
 
 a:active {
     color: #eee;
 }
 /* -----------------------
        Layout styles
        ------------------------*/
 
 .container {
     max-width: 80em;
     margin: 0 auto;
 }
 
 .header {
     background: #000;
     padding: 1em 1.25em;
 }
 
 .header-heading {
     margin: 0;
 }
 
 .nav-bar {
     background: #400;
     padding: 0;
 }
 
 .content {
     padding: 1em 1.25em;
 }
 
 .footer {
     padding: 1em 1.25em;
 }
 /* -----------------------
        Nav
        ------------------------*/
 
 .nav {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 
 .nav li {
     display: inline;
     margin: 0;
 }
 
 .nav a {
     display: block;
     padding: .7em 1.25em;
     color: #fff;
     text-decoration: none;
     border-bottom: 1px solid gray;
 }
 
 .nav a:link {
     color: white;
 }
 
 .nav a:visited {
     color: white;
 }
 
 .nav a:focus {
     color: black;
     background-color: white;
 }
 
 .nav a:hover {
     color: white;
     background-color: #600;
 }
 
 .nav a:active {
     color: white;
     background-color: red;
 }
 /* -----------------------
        Single styles
        ------------------------*/
 
 .w-100 {
     width: 100%;
 }
 
 .img-responsive {
     max-width: 100%;
 }
 
 .btn {
     color: #fff !important;
     background-color: royalblue;
     border-color: #222;
     display: inline-block;
     padding: .5em 1em;
     margin-bottom: 0;
     font-weight: 400;
     line-height: 1.2;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     cursor: pointer;
     border: 1px solid transparent;
     border-radius: .2em;
     text-decoration: none;
 }
 
 .btn:hover {
     color: #fff !important;
     background-color: green;
 }
 
 .btn:focus {
     color: #fff !important;
     background-color: black;
 }
 
 .btn:active {
     color: #fff !important;
     background-color: red;
 }
 
 .table {
     width: 100%;
     max-width: 100%;
     margin-bottom: 20px;
 }
 
 .list-unstyled {
     padding-left: 0;
     list-style: none;
 }
 
 .list-inline {
     padding-left: 0;
     margin-left: -5px;
     list-style: none;
 }
 
 .list-inline>li {
     display: inline-block;
     padding-right: 5px;
     padding-left: 5px;
 }
 
 .alert {
     padding: 15px;
     margin-bottom: 20px;
     border: 1px solid transparent;
     border-radius: 4px;
 }
 
 .alert-info {
     color: #31708f;
     border-color: #ccc;
 }
 
 .text-align-center {
     text-align: center;
 }
 /**/
 
 .socicon {
     position: relative;
     top: 1px;
     font-size: 28px;
     display: inline-block;
     font-family: 'socicon';
     font-style: normal;
     font-weight: normal;
     line-height: 1;
     letter-spacing: 5px;
     -webkit-font-smoothing: antialiased;
     padding: 5px;
 }
 
 .song-title {
     font-size: 110%;
 }
 
 .song-album {
     opacity: .8;
 }
 
 .youtube {
     margin: auto;
     max-width: 1090px;
     padding: 0;
     list-style: none;
 }
 
 .youtube li {
     display: inline;
     margin: 0;
     padding: 20px;
 }
 
 .youtube iframe {
     width: 300px;
     height: 225px;
 }
 /* -----------------------
Wide styles
------------------------*/
 
 @media (min-width: 42em) {
     .header {
         padding: 1.5em 3em;
     }
     .nav-bar {
         padding: 1em 3em;
     }
     .content {
         padding: 2em 3em;
     }
     .footer {
         padding: 2em 3em;
     }
     .nav li {
         display: inline;
         margin: 0 1em 0 0;
     }
     .nav a {
         display: inline;
         padding: 0;
         border-bottom: 0;
     }
     .youtube iframe {
         width: 500px;
         height: 375px;
     }
 }
 
 .position-relative {
     position: relative;
 }
 
 .center {
     width: 80%;
     margin: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }
 
 .clearfix::after {
     content: "";
     clear: both;
     display: table;
 }
 
 .p-1 {
     padding: 5px;
 }
 
 .pt-1 {
     padding-top: 5px
 }
 
 .pl-1 {
     padding-left: 5px
 }