::selection { background-color: #000000; color: #DFDFDF; }
::-moz-selection { background-color: #000000; color: #DFDFDF; }
html,body {
  font-size: 1rem;
  font-family: 'Roboto Condensed', sans-serif;
  color: #444444;
}
a {
  color: #555555;
}
.left {
  background: #FAFAFA;
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.right {
  background: #F6F6F6;
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.row {
  margin: 0;
}
.container {
  max-width: 94%;
}
.popover {
  border-radius: 0.2rem;
}
.popover-body {
  padding: 0.4rem;
}
h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}
h5 {
  font-size: 0.8rem;
  margin: 0;
}
.carousel-item  {
  max-height: 480px;
}
.carousel-item h1, .carousel-item h5 {
  font-size: 2.0rem;
  font-weight: 600;
  text-shadow: 1px 1px 2px #000000;
}
.carousel-item p {
  text-shadow: 1px 1px 2px #000000;
}
.carousel-item a {
  color: #FFFFFF;
  text-decoration: none;
}
.carousel-caption {
  bottom: 2rem;
  text-align: left;
}
.no-padding {
  font-size: 0;
}
.figure-img {
  margin-bottom: .2rem;
  border-radius: .1rem;
}
.cover-item {
  width: 25%;
  padding: .1rem;
  padding-bottom: .2rem;
  border-radius: .15rem;
}
.cover-item:hover {
  background: #EFEFEF;
}
.cover-item img {
  width: 100%;
}
.cover-item a{
  text-decoration: none;
}
.cover-des {
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
}
.list-side {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}
.list-side li{
  font-size: 0.9rem;
  line-height: 1rem;
  padding: .3rem 0;
}
.list-side a{
  border-bottom: 1px solid #DFDFDF;
  text-decoration: none;
}
.tooltip-img {
  width: 108px;
  border-radius: .15rem;
}
.list-foot {
  list-style: none;
  padding: .3rem 0;
}
.list-group a{
  padding: .4rem .8rem;
  font-size: .9rem;
}
.pagination {
  margin-top: 2rem;
}
.text-muted {
  font-size: 0.8rem;
  padding: .1rem;
}
.sort-item, .audio-button, .share {
  cursor: pointer;
}
.share {
  color: #000;
  border: none;
  outline: 0 none;
}
.track-head {
  border-top: 1px solid #F0F0F0;
  border-bottom: 1px solid #F0F0F0;
  background: #F5F5F5;
}
.sort-item {
  border-right: 1px solid #F0F0F0;
  color: #666666;
  text-decoration: none;
}
.track-item {
  padding: 0;
  border-bottom: 1px solid #E9E9E9;
}
.track-item:hover {
  background: #ECECEC;
}
.track-play {
  width: 48px;
  height: 48px;
}
.track-info {
  width: calc(100% - 310px);
  padding: .5rem;
  max-height: 6.6rem;
  overflow: hidden;
}
.track-info h5 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6rem;
  overflow: hidden;
  white-space: nowrap;
}
.track-info p {
  margin: 0;
  font-size: .8rem;
  line-height: 1rem;
  margin-bottom: .3rem;
}
.track-link {
  width: 262px;
}
.track-img {
  height: 38px;
}
.track-item img:hover, .track-img:hover {
  opacity: .7;
}
p.scene-des {
  color: #808080;
  font-size: .9rem;
}
p.scene-des a{
  color: #FF9933;
  font-size: .8rem;
}
.toast-top-center {
  top: 1rem;
}
.all-item {
  list-style: none;
  padding: .4rem 0;
  width: 33%;
  font-size: 1.1rem;
}
footer {
  background: #ECECEC;
  padding: 2rem;
  padding-top: 4rem;
  font-size: 0.9rem;
}
@media (max-width:768px){
  .cover-item{width: 50%;}
  .all-item{width: 49%;}
  .track-link{width: 30%;}
  .track-info{width: calc(70% - 48px);}
  .container-fluid{padding: 0;}
}
@media (max-width:376px){
  .cover-item{width: 100%;}
  .all-item{width: 99%;}
  .scene-des, .track-link{width: 100%;clear: both;padding: 3px 0;}
  .track-info{width: calc(100% - 48px);}
  .container-fluid{padding: 0;}
  .track-img {height: 24px;width: 66px;}
}