/* Space out content a bit */
html,body{
    height: 100%;
}

body {

}

#demo{
    width: 98%;
    position: absolute;
    bottom: 0;
    left:0;
    right:0;
}

.play-button{
    /*background-image: url("http://irwnetwork.com/assets/images/play.png");
    width: 60px;*/
}

.song-title .tag{
     background-color: #000;
     color: #fff;
     text-decoration: none;
     padding: 2px;
     margin-bottom: 2px;
 }

.song-title .title{
    position: absolute;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 2px;
    margin-top: 2px;
}

.song-title .tag:hover, .song-title .title:hover{
    text-decoration: underline;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
    padding-left: 15px;
    padding-right: 15px;
}

/* Custom page header */
.header {
    border-bottom: 1px solid #e5e5e5;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px;
}

/* Custom page footer */
.footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}



.container-narrow > hr {
    margin: 30px 0;
}

/* Supporting marketing content */
.marketing {
    margin: 40px 0;
}

.marketing p + h4 {
    margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    /* Remove the padding we set earlier */
    .header,
    .marketing,
    .footer {
        padding-left: 0;
        padding-right: 0;
    }
    /* Space out the masthead */
    .header {
        margin-bottom: 30px;
    }
}

.controls {
    padding: 10px 0 10px;
    float: left;
}

.controls .btn {
    margin-bottom: 15px;
}

@media screen and (min-width: 990px) {
    .controls .mark-controls {
        display: inline;
    }
}

.lead {
    text-align: center;
    padding: 20px;
}

#waveform {
    position: relative;
}

#progress-bar {
    position: absolute;
    z-index: 10;
    top: 50%;
    margin-top: -10px;
    left: 5%;
    width: 90%;
}

#drop {
    border: 3px dashed #ddd;
    padding: 30px;
}

#drop.wavesurfer-dragover {
    border-color: #333;
}

.heart-icon,.share-button{
	border: 1px solid transparent;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    padding: 3px;
    margin-top: 2px;
	
}

.share-button{
	
	margin-left:0px;
	
}

.player-logo{
/*position: absolute;
    float: right;
    left: 95%;
    top: 25%;
    z-index: 9999;*/
	padding-top: 10px;
	
}

#Container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#Container video {
    position: absolute;
    left: 50%;
    top: 50%;
    /* The following will size the video to fit the full container. Not necessary, just nice.*/
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}
  
@media (max-width: 1024px) {
    .container {
        max-width: 900px;
    }
}


@media only screen and (max-width: 1200px){
    #demo{
        width: 98%;
    }
}

@media only screen and (max-width: 1200px){
    #demo{
        width: 96%;
    }
}

@media only screen and (max-width: 479px){
    #demo{
        width: 88%;
    }

    .song-title .title{
        font-size: 12px;
        margin-top: 10px;
    }
}