body {
/*		font-family: Avenir, Helvetica, Arial, Sans-serif;
		margin: 0px;
		overflow: hidden;*/
	}


	

	#trackTitle{
		display: inline-block;
		position: relative;
		white-space: nowrap;

	}

	.embedtxt{
		position: absolute;
		font-weight: bold;
		right: 78px;
		top: 12px;
		z-index:2000000;
		-webkit-animation: embedtxt  6s linear ;
	}

	@-webkit-keyframes embedtxt {

		  0%   { opacity:1 }
		  2%   { opacity:1 }
		 99%  { opacity:1 }
	}


	.marquee{
		-webkit-animation: marquee  8s linear infinite;
				animation: marquee  8s linear infinite;
	}

	.no-marquee{

	}
	@-webkit-keyframes marquee {
		  0%   { text-indent: 0%}
		  0%   { opacity:0 }
		  20%  { opacity:1 }
		 50%   { text-indent: 0% }
		 95%  { opacity:1 }
		 99%  { opacity:0 }
		100% { text-indent: -200% }
	}
	@keyframes marquee {
		 0%   { text-indent: 0%}
		 0%   { opacity:0 }
		 20%  { opacity:1 }
		 50%   { text-indent: 0% }
		 95%  { opacity:1 }
		 99%  { opacity:0 }
		100% { text-indent: -200% }
	}
	.download-button,
    .embed-button,
    .volume-button {
		/*background-image: url(download.svg);*/
		/*background-size: contain;*/
		/*background-repeat: no-repeat;*/
        width: 25px;
        height: 25px;
        float: left;
        margin: 0 2px;
	}

    .download-button {
		/*background-image: url(download.svg);*/
	}
	.embed-button {
		/*background-image: url(embed.svg);*/
		color: #282828;
	}

    .embed-button,
    .download-button,
    .volume {
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        filter:alpha(opacity=100);
    }

    .embed-button:hover,
    .download-button:hover,
    .volume:hover {
        -moz-opacity: 0.70;
        -khtml-opacity: 0.70;
        opacity: 0.70;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        filter:alpha(opacity=70);
    }


	@font-face {
	  font-family: 'fontello';
	  src: url('../font/fontello2.eot?53853670');
	  src: url('../font/fontello2.eot?53853670#iefix') format('embedded-opentype'),
	       url('../font/fontello2.woff?53853670') format('woff'),
	       url('../font/fontello2.ttf?53853670') format('truetype'),
	       url('../font/fontello2.svg?53853670#fontello') format('svg');
	  font-weight: normal;
	  font-style: normal;
	}
	.dl{
		width: 30px;
	}

	/* .button:hover {
		-moz-opacity: 0.70;
        -khtml-opacity: 0.70;
        opacity: 0.70;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        filter:alpha(opacity=70);
	} */

	.button {
	    padding: 0em;
	    margin-top: 5px;
	    background: rgba( 0, 0, 0, 0.0 );
	    border: solid 0px #000;

	    cursor: pointer;
	}
	.button img {
	    width: 100px;
	}
	#icons{
	    position: fixed;
	    right: 0;
	    bottom: 0;
	    z-index: 10000000;
	}
	#audioplayer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 61px;
	overflow: hidden;
	/*border-top: thick double #ff0000;*/
	/*background: -webkit-linear-gradient(top, #000000 99%, #191919 99%, #333333 99%);
	background: linear-gradient(to top, #000000 99%, #191919 99%, #333333 99%); */
	background-color: black;
    font-family: Avenir, Helvetica, Arial, sans-serif;
	z-index: 2;
	/*-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;*/
	border: 2px red;
		/*margin: 50px auto auto auto;*/

/*		-webkit-filter: contrast(75%);
		-o-filter: contrast(75%);
		filter: contrast(75%);*/
		/*border-top: */
	}
	#pButton{
	height:60px;
	width: 60px;
	border: none;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	background-position: center;
	float:left;
	outline:none;
	position: fixed;
	bottom : 15;
	left: 0;
	z-index: 100000000;
	display: none;
	cursor: pointer;

	}

	.play{background: url('play.png') ;}
	.pause{background: url('pause.png') ;}
	.loadingbutton{background: url('loading.gif') ;}
	#timeline{

		/*
		width: calc(100vw - 150px);
		*/
		height: 60px;
		float: left;
		margin-left :60px;
		cursor: pointer;
		background: blue;

	}
	.timelinePlaylist{
		/*
		width: calc(100vw - 210px) !important;
		*/
		margin-left :90px !important;

	}
	.next{
	    display: block;
	    position: fixed;
	    width: 45px;
	    z-index: 100;
	    height: 60px;

	    left: 45px;
	    border: none;
	    bottom: 0;
	    background-size: 30px 30px;
	    background-color: -webkit-linear-gradient(top, #000000 99%, #191919 99%, #333333 99%);

	    background: url('fwd.svg') no-repeat;
	    background-position: center;
      outline: none;
      cursor: pointer;

	}

	.next: hover{
		-moz-opacity: 0.70;
        -khtml-opacity: 0.70;
        opacity: 0.70;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        filter:alpha(opacity=70);
	}
	#playhead{
		/*width: 100%;*/
		width: auto;
		height: 60px;
		/*border-radius: 50%;*/
		cursor: pointer;
		/*margin-top: 1px;*/
		border-left: solid 1px #e3e3e;
		/*background: -webkit-linear-gradient(top, #000000 99%, #191919 99%, #333333 99%);
		background: linear-gradient(to top, #000000 99%, #191919 99%, #333333 99%); */
		background: black;
	}
	#title{
		color: white;
		width: 100vw;
		text-align: center;
		position: absolute;
		margin: 0;
		line-height: 60px;
		font-weight: bold;
	}

	    #credits{
      height: 60px;
      color: rgba(255,255,255,0.7);
      list-style: none;
      padding: 0;
      margin: 0;
      /*margin-left: 60px;*/
      position: absolute;
      z-index: 100;
      bottom: 0;
      white-space: nowrap;
      /*pointer-events:none;*/
      /*display: none;*/
    }
    .left{
    	float: left;
    	margin-left: 15px;
    }
    #credits li{
      display: table-cell;
      vertical-align: middle;
      height: 60px;
      width: 100vw;
      font-size: 8px;
      -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;


    }
	    #credits a:link {
					text-decoration: none;
					color: rgba(255,255,255,0.7);
				}
		#credits a:hover {
					text-decoration: underline;
				}
		#credits a:visited {
					text-decoration: none;
					color: rgba(255,255,255,0.7);
				}
.demo-icon {
}
#volumeContainer,
#muteContainer,
#halfContainer{
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-user-select: none;
    cursor: pointer;
    float: right;
    height: 40px;
    outline: medium none;
    right: 0;
    text-align: center;
    bottom: 0;
    z-index: 1;
    border-left: solid 1px #282828;
}
#muteContainer, #halfContainer{
	display: none;
	border-left: solid 1px #282828;

}
.download-icn,
.embed-icn,
.volume-icn {
	cursor: pointer;
    float: left;
    margin: 0;
    width: 100%;
    height: auto;
}

#titleContainer{
	display: inline-block;
	width: 200px;
	overflow: hidden;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
}
@media screen and (orientation:landscape) {
	body{
		color: red;
	}
}
@media (max-width: 420px) {
	#credits li{
		font-size: 8px;
	}
	.icon-volume-up, .icon-mute, .icon-half, .icon-download{
		font-size: 20px;
	}
	#volumeContainer,#muteContainer, #halfContainer{
		display: none !important;
		width: 0;
	}
	#timeline{
		width: calc(100vw - 60px);
	}
	.timelinePlaylist{
		width: calc(100vw - 90px) !important;
	}
	.icon-download{
		display: none;
	}
	#embed{
		display: none;
		width: 0;
	}
	.embedtxt{
		display: none;
		width: 0;
	}
	.show{
	   display: none;
	}

}

@media (max-width: 300px){
#credits{
		display: none;
		width: 0;
	}}

//------custom------//
h1 {
    margin: 0;
}

#volumeContainer, #muteContainer, #halfContainer {
   /* background: -webkit-linear-gradient(top, #000000 99%, #191919 99%, #333333 99%);
    background: linear-gradient(to top, #000000 99%, #191919 99%, #333333 99%); */
    background-color: black;
}

#pButton {
    width: 60px;
    height: 60px;
    padding: 15px;
    display: block;
    left: 0;
    bottom: 0;
    background-size: 30px 30px;
    /*background-color: -webkit-linear-gradient(top, #000000 99%, #191919 99%, #333333 99%);*/
    background-color: black;

}

#pButton:hover, .next:hover {
        -moz-opacity: 0.70;
        -khtml-opacity: 0.70;
        opacity: 0.70;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        filter:alpha(opacity=70);
}

#pButton:active, .next:active {
        -moz-opacity: 0.20;
        -khtml-opacity: 0.20;
        opacity: 0.20;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=20);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
        filter:alpha(opacity=70);
}
/*.next:hover{
        -moz-opacity: 0.70;
        -khtml-opacity: 0.70;
        opacity: 0.70;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
        filter:alpha(opacity=70);
    }*/


.container-share-embed {
    bottom: 0;
    position: fixed;
    transition: all .3s ease-out 0s;
    color: #fff;
    right:-120px;
    background-color: #282828;
    height: 60px;
    z-index: -1;
    width: 0;
}

.show {
    padding-right:120px;
    right: 0;
    width: 90%;
    transition: all .3s ease-out 0s;
}

.embed-button {

}

.block-embed {
    display: block;
    float: none;
    padding: 10px;
    width: 60%;
    margin: auto;
}

#btn-input-embed {
    float: right;
    display: block;
    width: 85%;
}

.block-embed-form label {
    color: #fff;
    font-size: 12px;
    padding-right: 2%;
    text-align: right;
    width: 13%;
    float: left;
}

div#volumeContainer, #muteContainer, #halfContainer{
    padding-top: 20px;
}

#volumeContainer a:first-child,
#halfContainer a:first-child,
#muteContainer a:first-child {
	padding-left: 16px;
}

#volumeContainer a:last-child,
#halfContainer a:last-child,
#muteContainer a:last-child {
	padding-right: 16px;
}



/*Media Queries*/

/*1024px*/
@media (max-width: 1024px) {

    .show {
        width: 85%;
    }

}

/*768px*/
@media (max-width: 768px) {

    .show {
        width: 75%;
    }

    .block-embed {
        width: 50%;
    }

    .block-embed-form label {
        width: 30%;
    }

    #btn-input-embed {
        width: 65%;
    }
}

/*480px*/
@media (max-width: 480px) {

    .show {
        width: 60%;
    }

    .block-embed {
        width: 70%;
    }

    .block-embed-form label {
        width: 30%;
    }

    #btn-input-embed {
        width: 60%;
    }

}