/*!
 * Start Bootstrap - Grayscale v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/grayscale)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/master/LICENSE)
 */

body {
    font-family: 'Circular-Book',Arial,sans-serif;
    position: relative;
    width: 100%;
    height: 100%;
    color: rgba(0, 0, 0, 0.6);
    background: url(../img/45complossy.jpg) no-repeat top left fixed;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
    
}

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(../img/45complossy.jpg) top left;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

html {
    width: 100%;
    height: 100%
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Circular-Book',Arial,sans-serif;
    font-weight: 700;
    margin: 0 0 35px;
    letter-spacing: 1px;
    text-transform: uppercase
}

h3 {
    text-transform: none;
    font-size: 1.5rem;
}

p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 25px
    text-align: left;
}
@media (min-width: 768px) {
    p {
        font-size: 18px;
        line-height: 1.6;
        margin: 0 0 35px;
      }

      .content-section {
        background: rgba(0,0,0,.3);
        color: white;      	
      }
}
a {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    color: #ffffff;
/*color: #7c00ba*/
}
a:focus,
a:hover {
    text-decoration: none !important;
    color: #ffffff;
}

a #underline-link {
    text-decoration: underline !important;
}
a:focus, a:hover #underline-link {
    text-decoration: none !important;
}

#r {
    max-width: 350px;
    margin-top: 40px;
    margin-bottom: 60px;
}




#mainNav {
    font-family: Cabin,'Circular-Book',Arial,sans-serif;
    margin-bottom: 0;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    background-color: rgba(77, 77, 77, 0.9)
}

#mainNav .navbar-toggler {
    font-size: 14px;
    padding: 11px;
    color: #fff;
    border: 1px solid #ffffff
}



    #mainNav .navbar-brand a {
        color: transparent;
    }

    #mainNav.navbar-shrink a {
        color: #ffffff;
    }

    #mainNav.navbar-shrink {
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 0px solid rgba(255, 255, 255, .3);
        background-color: rgba(77, 77, 77, 0.9);
    }



#mainNav .navbar-brand {
    font-weight: 700
}
#mainNav .navbar-nav a {
    color: #ffffff
}
#mainNav .navbar-nav .nav-item {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out
}
#mainNav .navbar-nav .nav-item:hover {
    color: fade(white, 80%);
    outline: 0;
    background-color: transparent
}
#mainNav .navbar-nav .nav-item:active,
#mainNav .navbar-nav .nav-item:focus {
    outline: 0;
    background-color: transparent
}


.nav-link {
    font-weight: bold;
    font-size: 0.95rem;
}

#nowrap {
    white-space: nowrap;
}


#lang {
    text-transform: lowercase !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}


@media (min-width: 992px) {
    #mainNav {
        padding-top: 20px;
        padding-bottom: 20px;
        -webkit-transition: background .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s;
        -moz-transition: background .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s;
        transition: background .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s;
        letter-spacing: 1px;
        border-bottom: none;
        background: 0 0

    }

    #mainNav .navbar-nav a {
        color: rgba(0, 0, 0, 0.5);
    }

    #mainNav .navbar-brand a {
        color: transparent;
    }

    #mainNav.navbar-shrink a {
        color: #ffffff;
    }

    #mainNav.navbar-shrink {
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 0px solid rgba(255, 255, 255, .3);
        background-color: rgba(77, 77, 77, 0.9);
    }
    #mainNav .nav-link.active {
        outline: 0;
        background-color: rgba(255, 255, 255, .3)
    }
    #mainNav .nav-link.active:hover {
        color: #fff
    }


}
.masthead {
    display: table;
    width: 100%;
    height: auto;
    padding: 200px 0 0 0;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);


}

.masthead .name {
    font-size: 2.5rem;
    color: #ffffff
}

body #page-top .navbar-brand {
    color: #ffffff !important;
}

.masthead .intro-body {
    display: table-cell;
    vertical-align: bottom
}
.masthead .intro-body .brand-heading {
    font-size: 30px
}
.masthead .intro-body .brand-heading a {
    /*text-transform: lowercase;*/
    /*color: #7c00ba;*/
    color: rgba(0, 0, 0, 0.5);
}
.masthead .intro-body .intro-text {
    font-size: 18px
}
@media (min-width: 768px) {
    .masthead {
        height: 100%;
        padding: 0
    }
    .masthead .intro-body .brand-heading {
        font-size: 30px
    }
    .masthead .intro-body .intro-text {
        font-size: 18px;
        background: rgba(0,0,0,.3);
        padding: 5px;
        color: white;
    }

}

.content-section {
    padding-top: 150px;
    padding-bottom: 150px
    
}

.content-section {
        background: rgba(0,0,0,.3);
        color: white;       
      }


.compositions-section {
    background-color: none
}

@media (min-width: 992px) {
    .content-section {
        padding-top: 200px;
        padding-bottom: 200px
	}        
      .content-section {
        background: rgba(0,0,0,.3);
        color: white;      	
      }
}









.btn {
    font-family: Cabin, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-transform: uppercase;
    border-radius: 0
}
.btn-default {
    color: #8f00d6;
    border: 1px solid #8f00d6;
    background-color: transparent
}
.btn-default:focus,
.btn-default:hover {
    color: #ffffff;
    border: 1px solid #8f00d6;
    outline: 0;
    background-color: #8f00d6
}






ul.banner-social-buttons {
    margin-top: 0
}
@media (max-width: 1199px) {
    ul.banner-social-buttons {
        margin-top: 15px
    }
}
@media (max-width: 767px) {
    ul.banner-social-buttons li {
        display: block;
        margin-bottom: 20px;
        padding: 0
    }
    ul.banner-social-buttons li:last-child {
        margin-bottom: 0
    }

    .masthead .name {
        padding: 0 5px;
    }
}

/*
.carousel-item {
  height: 100vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-item p {
    text-align: left;
}
*/








footer {
    padding: 50px 0;
    background: rgba(0,0,0,.3);
    color: white;
}
footer p {
    font-size: 14px;
    margin: 0
}
::-moz-selection {
    background: #fcfcfc;
    background: rgba(255, 255, 255, .2);
    text-shadow: none
}
::selection {
    background: #fcfcfc;
    background: rgba(255, 255, 255, .2);
    text-shadow: none
}
img::selection {
    background: 0 0
}
img::-moz-selection {
    background: 0 0
}
body {
    -webkit-tap-highlight-color: rgba(255, 255, 255, .2)
}



















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

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


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

audio {
margin:0 15px 0 14px;
width:670px;
}

#mainwrap {}

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

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

#nowPlay {
display:inline;
}

#npAction {
padding:21px;
position:absolute;
}

#npTitle {
padding:21px;
}

#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;
text-align: left;
}

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

a[id^="btn"] {
border-radius:3px;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:2rem;
height:35px;
line-height:.8;
margin:0 20px 20px;
padding:10px;
text-decoration:none;
transition:background .3s ease;
width:35px;
}

/*a #btn {
    text-decoration:none;
}*/

a[id^="btn"]:last-child {
margin-left:-4px;
}

a[id^="btn"]:hover,
a[id^="btn"]:active {
background-color:rgba(0,0,0,.1);
color:#fff;
}

a[id^="btn"]::-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-play {
    color: #7f39fb;
}

#plyr-pause {
    color: #7f39fb;
}

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


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

@media only screen and (max-width:850px) {
    #nowPlay { display:none; }
}


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



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



.player-section {
    padding-top: 0px;
    padding-bottom:10px
    
}

.player-section {
        background: rgba(0,0,0,.3);
        color: white;       
}

.column-player {
    padding: 50px 0 0 0;
}




@media (min-width: 768px) {
.player-section {
    padding-top: 0px;
    padding-bottom:10px
    
}

.player-section {
        background: rgba(0,0,0,.3);
        color: white;       
}
}


@media (min-width: 992px) {
.player-section {
    padding-top: 0px;
    padding-bottom:10px
    
}

.player-section {
        background: rgba(0,0,0,.3);
        color: white;       
}
}


#plList {
    padding-left: 0 !important;
}