style.css

@import url(https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700&subset=latin);
html{ margin: 0; padding: 0; position: relative;}
body {background: #f4f6f8; font-family: "roboto"; font-size: 14px; font-weight: normal; color: #333;margin: 0px;padding: 0px; -webkit-text-size-adjust: none; position: relative;}
h1, h2, h3, h4, h5, h6{ font-weight: bold;}
a {color: #333; text-decoration:none !important; outline:none; -moz-outline: none; }
a:hover {color: #ff7800; text-decoration: none; }
a:focus, a:hover{ color: #ff7800;}
a:active, a:focus{outline:none;}
.mt5 {margin-top: 5px !important; }
.mt10 {margin-top: 10px !important; }
.mt20 {margin-top: 20px !important; }
.mt30 { margin-top: 30px !important;}
.mb10{ margin-bottom: 10px !important;}
.mb20{ margin-bottom: 20px !important;}
.mb15{ margin-bottom: 15px !important;}
.mb5 {margin-bottom: 5px; }
.mr5{ margin-right: 5px; }
.mr10{ margin-right: 10px; }
.mr20{ margin-right: 20px; }
.ml10{ margin-left: 10px !important;}
.ml5{ margin-left: 5px;}
.dlb{ display: block; }
.dib{ display: inline-block; }
.fll{ float: left; }
.flr{ float: right; }
.nonestyle, .nonestyle li{ list-style: none; padding: 0; margin: 0;}
.highlight{ color: #ff7800;}
.xline{ height: 5px; width: 100%; display: inline-block; text-align: center;}
.xline span{ height: 5px; width: 33%; display: inline-block; background: #47c2dc; float: left;}
.xline:before, .xline:after{ content:""; width: 32.5%; float: left; height: 5px; background:#ff7800; margin-right: 1%;}
.xline:after{ float: right; background: #e43746; margin-right: 0; margin-left: 1%;}
.more{ padding: 5px 5px; background: #ff7800; color: #fff !important; line-height: 1em; font-size: 10px; border-radius: 3px;}
.more, .btn, #pagination .pagination li a{box-shadow: 0 5px 5px 0px rgba(0,0,0,0.03)}
.thumb-circle{ border-radius: 50%;}
.time{ color: #bbb; font-size: 11px; line-height: 1.1em;}
strong{ font-weight: 500;}
body.modal-force{ overflow: visible !important; padding-right: 0 !important;}
.no-data{margin-left: 5px;margin-top: 20px;font-size: 14px;font-style: italic;}
/* button */
.btn-orange, .btn-flat.btn-active{ background: #ff7800 !important; color: #fff !important;}
.btn-success{ background: #57B65A !important; color: #fff !important;}
.btn-primary{ background: #00A999 !important; color: #fff !important;}
.btn-info{ background: #0FB2FC !important; color: #fff !important;}
.btn-danger{ background: #F55549 !important; color: #fff !important;}
.btn-warning{ background: #FF6635 !important; color: #fff !important;}
.btn-default{ background: #E4E4E4 !important; color: #333 !important;}
.btn-flat{ background: #f4f6f8 !important; color: #333 !important; box-shadow: none !important;}
.btn{ opacity: 1; border: none !important; text-transform: uppercase; padding: 10px 20px;}
.btn-sm{ padding: 5px 10px;}
.btn-lg{ font-size: 15px; padding: 14px 30px;}
.btn:hover{ opacity: 0.8 !important;}
.btn-follow{ background: none !important; border: 1px solid #333 !important; color: #333 !important; box-shadow: none !important;}
.btn-follow:hover{ border: 1px solid #ff7800 !important; color: #ff7800 !important;}
.btn-following{ background: #ccc !important; border: none !important; color: #fff !important;}
.btn-following:hover{ border: none !important; color: #fff !important;}
.alert{ border: none !important; text-shadow: none !important; font-size: 12px; border-radius: 3px; padding: 10px 15px;}
/* layout */
/*.container{ width: 1200px;}*/
/*.xcontainer{ padding-left: 30px; padding-right: 30px;}*/
#wrapper{}
header{/*background: #ff7800;*/width: 100%; position: relative;background-image: linear-gradient(to right, #ff592b 0%, #ff8500 100%);}
header .container{ position: relative; font-size: 13px;}
header .trick-menu{ position: absolute; left: -20px; top: 8px; width: 40px; height: 40px; cursor: pointer;}
header .trick-menu i{ color: #fff; font-size: 40px; line-height: 40px;}
header #logo{display: inline-block; position: relative; z-index: 2; background-color: #1b1b1b; padding: 5px 15px; float: left; margin-right: 10px; color: #fff !important;}
header #logo img{ width: auto; height: 50px; float: left; margin-right: 10px;}
header #logo span.sitename{ font-size: 16px; font-weight: 600; line-height: 1.4em; padding:0; margin: 0;}
header #logo h1{ font-size: 13px; font-weight: 300; margin: 2px; white-space:nowrap; letter-spacing: -0.1px; line-height: 1em;}
header #my-music{ float: right; height: 60px; line-height: 60px; color: #fff; padding: 0 10px; margin-right: 10px; display: inline-block;}
header #header-login{ float: right;}
header #header-login.guest a{ color: #fff; cursor: pointer; height: 60px; line-height: 60px; padding: 0 10px; display: inline-block;}
header #header-login.guest a:hover, header #my-music:hover{ background: rgba(0,0,0,0.05);}
header #header-login.guest a i{ font-size: 10px;}
header #m-menu, header #m-search{ display: none;}
/* logged */
/*.logged{ position: relative; margin: 15px 0;}
.logged .logged-user{ float: right; position: relative; height: 30px;}
.logged .avatar{ margin-left: 10px; position: relative; padding-right: 20px; display: inline-block; overflow: hidden;}
.logged .avatar img{ width: 30px; height: 30px; border: 2px solid #fff;}
.logged .avatar .fa{ font-size: 12px; color: #fff; width: 16px; height: 16px; border-radius: 50%; position: absolute; top: 50%; margin-top: -8px; right: 0; text-align: center; line-height: 12px;}
.logged.open .avatar .fa{ color: #fff;}
.logged .dropdown-menu{ left: auto; right: -1px !important; padding: 0; overflow: hidden; width: 180px;}
.logged .logged-user .dropdown-menu > li > a{ padding: 5px 12px 5px 12px; font-size: 12px; white-space: normal; position: relative;}
.logged .logged-user .dropdown-menu > li{ border-bottom: 1px solid #eee;}
.logged .logged-user .dropdown-menu > li:last-of-type{ border-bottom: none;}
.logged .logged-user .dropdown-menu > li > a > i{ text-align: left; width: 20px; display: inline-block;}
.logged .logged-user .dropdown-menu > li > a > i:before{ font-size: 12px;}*/
/* header home*/
header.header-home .container:before{ content: ""; width: 65px; left: -35px; bottom: 0; top: 0; background-color: #1b1b1b; position: absolute; display: inline-block;}
header.header-home #logo{ padding-left: 0; padding-right: 20px; margin-right: 20px;}
header.header-home .hh-bottom{ position: relative; background: #1b1b1b; padding-top: 5px; height: 317px; margin-right: -30px;}
header.header-home .hh-top{ margin-right: -30px;}
header.header-home #logo .xline{ position: absolute; bottom: -5px; left: 0;}
/* menu */
#menu{ position: relative; float: left;}
#menu ul.top-menu{ display: block; list-style: none; margin: 0; padding: 0;}
#menu ul.top-menu li{ float: left; margin-right: 0px; position: relative;z-index: 9;}
#menu ul.top-menu li a{ color: #fff; height: 60px; line-height: 60px; padding: 0 15px; font-size: 13px; display: inline-block;}
#menu ul.top-menu li:hover a{ background: rgba(0,0,0,0.05);}
#menu .sub-container{ position: absolute; top: 60px; left: 0px; width: 200px; background: #fff; border: none; z-index: 5; box-shadow: 0 20px 20px 0px rgba(0,0,0,0.1);}
#menu .sub-container ul.sub-menu{ padding: 10px 10px 20px 10px; overflow: hidden; list-style: none; margin: 0;}
#menu .sub-container ul.sub-menu li{ width: 100%; float: left; margin: 0;}
#menu .sub-container.three-col{ width: 600px;}
#menu .sub-container.three-col ul.sub-menu li{ width: 30%; margin: 0 1.65%;}
#menu .sub-container ul.sub-menu li a{ height: 30px; color: #333; background: none; line-height: 30px; font-size: 13px; padding: 0 10px; display: block; border-bottom: none !important; border: none; min-width: inherit; text-align: left;}
#menu .sub-container ul.sub-menu li a:before{ display: none;}
#menu .sub-container ul.sub-menu li:hover a{ background: #Fafafa; color: #FF7800 !important;}
/*search */
#search{ float: right; width:250px; margin-top: 15px; position: relative; margin-right: 15px;}
#search input.search-input{ padding-right: 30px; height: 30px; font-size: 12px; background: #fff; border: none; border-radius: 3px; box-shadow: none !important;}
#search .search-submit{ display: inline-block; font-size: 18px; position: absolute; top: 0; right: 0; height: 30px; width: 30px; text-align: center;}
#search .search-submit i{ line-height: 30px; color: #333; font-size: 14px;}
#search .search-content{ position: relative;}
#search .search-suggest{ background:#fff; width:320px; display:block; position:absolute; top:32px; left: 0; border-radius:3px; box-shadow: 0 20px 20px 0px rgba(0,0,0,0.2); z-index: 9; overflow: hidden;}
#search .search-suggest ul {list-style:none; padding:0; position:relative;}
#search .search-suggest ul li{padding:10px;display:block; width:100%; overflow:hidden; color:#333; border-bottom:1px solid #eee; line-height: 1.2em;}
#search .search-suggest ul li:hover{ background: #fafafa;}
#search .search-suggest ul li .thumb{ float: left; width: 40px; margin-right: 12px;}
#search .search-suggest ul li .ss-name{ margin-bottom: 2px; font-size: 14px; color: #333 !important; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; overflow: hidden;}
#search .search-suggest ul li .ss-singer{ color: #888; font-size: 12px; margin-bottom: 0;}
#search .search-suggest ul li.ss-bottom{width:100%;}
#search .search-suggest ul li.ss-bottom a{ width:100%; display:block; text-align:center; height:40px; line-height:40px; text-align:center; color: #ff7800;}
#search .search-suggest ul li.ss-title{ background: #eee;}
/* slider */
/*#slider{ width: 820px; height: 312px; overflow: hidden; float: left; display: inline-block;}
#slider .swiper-slide{ background-size: cover; background-position: 50% 25%;}
#slider .swiper-slide:before{ content:""; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; right: 0; background: url(https://3.bp.blogspot.com/-I_eXZlS77vY/WUDfEsDFHmI/AAAAAAAAB_c/4NqqVbNhgEQQFrL6_4z5Ahf3t_dlCJ0MwCLcBGAs/s1600/shadow-s.png) bottom left repeat-x;}
#slider .slide-link{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;}
#slider .slide-caption{ color: #fff; width: 550px; position: absolute; left: 30px; bottom: 30px; line-height: 1.2em;}
#slider .slide-caption .sc-name{ font-size: 30px; font-weight: 300; margin-bottom: 20px; line-height: 34px;}
#slider .slide-caption .sc-desc{ font-size: 13px; font-style: italic; margin-bottom: 20px;}
#slider .slide-caption .sc-btn{ margin-bottom: 0; padding-left: 0; color: #FF7900}
#slider .slide-caption .sc-btn i{ font-size: 10px;}
#slider .swiper-pagination{ left: -40px; right: 0px; width: 16px; text-align: center;}
#slider .swiper-pagination .swiper-pagination-bullet{ margin: 2px 4px;}
#slider .swiper-pagination-bullet-active{ width: 12px; height: 12px; margin: 0 0px !important;}*/
/* headline */
#headline{ padding: 5px 20px 0 840px}
#headline .highlight{ font-size: 16px; display: block; float: left; margin-bottom: 8px;}
#headline .hl-btn{ float: right; margin-top: 2px;}
#headline .hl-btn a{ color: #fff; margin-left: 5px;}
#headline .hl-news{ width: 100%; display: block; overflow: hidden;}
#headline .hl-news li{ display: block; margin-bottom: 15px !important;}
#headline .hl-news li .thumb{ float: left; float: left; margin-right: 10px; display: inline-block;}
#headline .hl-news li .thumb img{ width: 82px; height: 54px;}
#headline .hl-news li .title{ font-size: 12px; color: #aaa; display: block; max-height: 54px; overflow: hidden;}
#headline .hl-news li .title:hover{ color: #ff7800;}
/* main */
#main{}
#main .container{ padding-bottom: 20px; background: #fff;}
#main .main-content{ width: 738px; float: left;}
#main .sidebar{ width: 300px; float: right;}
.main-home h1{margin: 10px 0 0 0;padding: 0;font-size: 20px;text-align: center;font-weight: 100;display: none}
/* item */
.type-list{ margin-left: -0.75%; margin-right: -0.75%;}
.type-list .item{ float: left; line-height: 1.2em; margin: 0 0.75% 2.5%; position: relative; display: inline-block;}
.type-list .item .thumb{ overflow: hidden; position: relative; display: inline-block; width: 100%; padding-bottom: 100%;}
.type-list .item .thumb img{ width: 100%; height: auto; min-height: 100%; position: absolute; top: 0; left: 0;}
.type-list .item .thumb:before, .type-list .item .thumb:after{ opacity: 0; z-index: 3;}
.type-list .item .thumb:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);transition: all 0.3s ease-in-out;}
.type-list .item .thumb:after{ position: absolute; width: 50px; height: 50px; line-height: 50px; text-align: center; left: 50%; margin-left: -25px; top: 50%; margin-top: -25px; font-size: 50px; color: #fff; font-family: 'FontAwesome'; content: "\f144";transition: all 0.3s ease-in-out;}
.type-list .item .thumb:hover:before, .type-list .item .thumb:hover:after{ opacity: 0.8;}
.type-list .item p.singer{ margin-bottom: 0; color: #888; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.type-list .item .singer a{ font-size: 12px; color: #888; font-weight: 300;}
.type-list .item .singer a:hover{ color: #ff7800;}
.type-shadow-list .item .item-caption{ position: absolute; bottom: 0; left: 0; width: 100%;background: url(/images/shadow-s.png) top repeat-x; color: #fff; padding: 15px 10px 10px;text-align: center; z-index: 4;}
.type-shadow-list .item .item-caption h4{ margin: 0; line-height: 1.2em; font-size: 13px; font-weight: 400;}
.type-col-list .item .thumb{ width: 50px; height: 50px; padding-bottom: 0; float: left;}
.type-col-list .item .item-caption{ padding-left: 60px;}
.type-col-list .item .item-caption h3{ font-size: 14px; font-weight: 400; margin: 0; line-height: 1.1em;}
.type-col-list .item .thumb:after{ font-size: 23px;}
.type-col-list .item .item-tools{ display: none; position: absolute; top: 20px; right: 0px;}
.type-col-list .item.item-active .item-tools{ display: block;}
.type-col-list .item.item-active .item-action{ display: none;}
.type-col-list .item .item-tools i{ font-size: 10px; line-height: 24px;}
.type-col-list .item .item-tools i.icon-s{ font-size: 9px;}
.type-col-list .item .item-tools a{ margin: 0 0 0 4px; color: #222 !important; width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 50%; background: #f5f5f5; display: inline-block; position: relative; font-size: 0; float: left;}
.type-col-list .item .item-tools a.active{ color: #FF7800 !important;}
.type-col-list .item .item-tools a:hover{ background: #eee;}
.type-col-list .item .item-tools .it-remove{ background: #ddd !important;}
.type-col-list .item .item-tools .it-remove i{ font-size: 9px;}
.type-col-list .item .item-tools .it-remove:hover i{ color: #333 !important;}
.type-col-list .item:hover .item-tools{ display: inline-block;}
.item .view_listen{position: absolute;color: #c7c7c7;right: 0;font-size: 10px;background: url(https://1.bp.blogspot.com/-DKuj1ROXm1w/WUDfPTpH3WI/AAAAAAAAB_g/lGr0AxKn3-AYaH4O-14T9uPjwG8oyRAugCLcBGAs/s1600/bg_view_listen.png) left top;padding: 0 3px 0 15px;line-height: 22px;display: block;z-index: 1;}
.item .view_listen i{margin-right: 3px}
/* home */
.home-artist-list, .home-album-list, .home-song-list, .sb-follow, .sb-listened, .sb-billboard, .sb-suggestion, .sb-suggestion-album, .sb-hotnews, .sb-topalbum{ margin-bottom: 20px;}
.sb-suggestion .xtitle, .sb-billboard .xtitle, .sb-topalbum .xtitle{ margin-bottom: 0;}
/* cut string */
.type-shadow-list .item .item-caption h4, .type-col-list .item .item-caption h3, .album-list .item h3 a, .song-list .item h3, .song-cate-list .item .item-caption, .cate-filter .cate-filter-content .cfc-genre li a, .billboard-artist-list .item .item-caption h4, .dashboard-about .da-name .name{overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; display: inline-block;}
.type-col-list .item .item-caption h3{ display: block;}
/* album list */
.music-player {position: relative;background-image: url(../images/player-cover.jpg);background-size: cover;background-position: 50% 25%;min-height: 100px;overflow: hidden;
}
.album-list .item{ width: 23.5%;}
.album-list-small .item, .album-list-small_full .item{ width: 18.5%;}
.album-list .item .thumb{ display: inline-block; position: relative; width: 100%; margin-bottom: 3px;}
.album-list .item .thumb img{ width: 100%; height: auto;}
.album-list .item h3{ margin-top: 0; margin-bottom: 0; line-height: 1.2em;}
.album-list .item h3 a{ font-size: 14px; font-weight: 400; line-height: 1.2em; display: block;}
.album-hot-single{ background: #f8e714; position: relative; margin: 10px 0 30px;}
.album-hot-single .item{ position: relative; display: block;}
.album-hot-single .item .thumb{ width: 205px; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden;}
.album-hot-single .item .thumb img{ width: 100%;}
.album-hot-single .item .item-caption{ padding: 20px 230px 20px 20px; text-align: right; min-height: 205px;}
.album-hot-single .item .item-caption h3{ line-height: 1.2em; margin: 0; font-size: 20px;}
.album-hot-single .item .item-caption p.desc{ font-size: 13px; font-weight: 300; font-style: italic; max-height: 74px; overflow: hidden;}
.album-hot-single .item .item-caption .singer{ font-style: normal; font-size: 14px;}
.album-hot-single .item .item-caption .item-btn i{ font-size: 10px; margin-left: 2px;}
/* artist list */
.artist-list{ margin-left: -0.25%; margin-right: -0.25%; position: relative;}
.artist-list .item{ width: 16.16%; margin: 0 0.25% 0.5%; font-size: 0;}
.artist-list.focus-3 .item:nth-child(2){ position: absolute; top: 0; left: 0;}
.artist-list.focus-3 .item:nth-child(9){ position: absolute; bottom: 0; left: 0;}
.artist-list.focus-3 .item:nth-child(1){ width: 32.82%; margin-left: 16.91%;}
.artist-list.focus-3 .item:nth-child(1) .item-caption{ background: url(https://1.bp.blogspot.com/-GFCyu3j2mwg/WUDfbjkmbbI/AAAAAAAAB_k/9v6yi6gXs6UpbwNbZbBsR_FKDV8ZBFgZACLcBGAs/s1600/shadow-m.png) top repeat-x; padding-top: 30px;}
.artist-list.focus-3 .item:nth-child(1) .item-caption h4{ font-size: 14px;}
.artist-list.focus-3 .item:nth-child(1) .thumb:after{ font-size: 50px;}
.artist-list.focus-3 .item:nth-child(10){ display: none;}
.artist-list .item .thumb{ width: 100%;}
.artist-list .item .thumb img{ width: 100%; height: auto;}
.artist-list .item .thumb:after, .artist-cate-list .item .thumb:after, .mu-artist .item .thumb:after{ font-family:'FontAwesome'; content: "\f05a";}
.artist-cate-list{}
.artist-cate-list .item{ width: 18.5%; margin-bottom: 2%;}
.artist-cate-list .item .item-caption h4{ font-size: 14px; font-weight: 400; margin: 5px 0; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.artist-letter{ display: block; padding: 6px 15px; border: 2px solid #111; font-size: 18px; font-weight: 300; margin-bottom: 20px;}
.artist-letter a{ display: inline-block; padding: 6px; font-weight: 500;}
.artist-letter a.active{ color: #ff7800;}
/* song lits */
.home-songs-2col .home-songs-list{ width: 50%; float: left; position: relative;}
.home-songs-2col .home-songs-list:nth-child(1){ padding-right: 5%;}
.home-songs-2col .home-songs-list:nth-child(2){ padding-left: 5%;}
.home-songs-2col .home-songs-list:nth-child(1):before{ content: ""; width: 1px; position: absolute; right: 0; top: 50px; bottom: 0px; background: #ddd; display: inline-block;}
.home-songs-list{}
.home-songs-list .xtitle{ margin-bottom: 5px;}
.home-songs-list .song-list{ position: relative;}
.home-songs-list .song-list .item{ width: 98.5%; margin: 0 0.75%;}
.home-songs-list .song-list .item .item-caption h3{ margin-bottom: 5px;}
.song-list .item{ width: 48.5%; padding: 10px 0; border-bottom: 1px solid #eee; margin-bottom: 0;}
.song-list .item .thumb{ width: 40px; height: 40px; margin: 5px 0;}
.song-list .item .item-caption{ padding-left: 55px; padding-top: 2px; padding-right: 70px; margin-top: 5px;}
.song-list .item:hover .item-caption{ padding-right: 90px;}
.song-list .item .item-caption h3{ margin: 0; font-size: 14px; font-weight: 400; line-height: 1.1em; display: block;}
.song-list .item .item-caption .singer{ font-size: 11px;}
.song-list .item .item-action{ position: absolute; top: 25px; right: 0; font-size: 11px; opacity: 0.6;}
.song-list .item .item-action i{ font-size: 10px; margin-right: 3px;}
.song-list .item:hover .item-action{ display: none;}
.song-cate-list .item{ width: 98.5%; padding: 15px 0;}
.song-cate-list .item .item-caption{ padding-left: 0; padding-top: 0; padding-right: 200px !important; display: block !important; white-space:normal;}
.song-cate-list .item .item-caption h3{ font-size: 14px; display: inline; line-height: normal}
.song-cate-list .item .item-caption h3 a{ white-space: normal !important;}
.song-cate-list .item .item-caption .singer{ font-size: 14px; line-height: normal; color: #aaa; font-weight: 300;}
.song-cate-list .item .item-caption .singer:before{ content: "-"; margin-left: 5px; margin-right: 5px;}
.song-cate-list .item .item-caption .singer a{ font-size: 13px; line-height: normal; color: #aaa;}
.song-cate-list .item .item-caption .singer a:hover{ color: #ff7800;}
.song-cate-list .item .item-action{ display: inline-block !important; right: 120px; top: 16px;}
.song-cate-list .item .item-tools{ display: inline-block !important; top: 12px;}
.home-album-list .album-list .item{ width: 18%; margin: 0 1% 2.5%;}
.home-album-list .album-list{ margin-left: -1%; margin-right: -1%;}
/* cate filter */
.cate-filter{ display: block; margin-bottom: 10px; overflow: hidden;}
.cate-filter .cate-filter-content{ border: 2px solid #111; padding: 15px 20px 20px; width: 100%; margin-top: 2px;}
.cate-filter ul{ list-style: none; padding: 0; margin: 0;}
.cate-filter .cate-filter-content .cfc-top li{ float: left; margin-right: 30px; padding-bottom: 5px;}
.cate-filter .cate-filter-content .cfc-top li.active{ border-bottom: 2px solid #ff7800;}
.cate-filter .cate-filter-content li.active a{ color: #ff7800;}
.cate-filter .cate-filter-content .cfc-genre{ margin-top: 15px;}
.cate-filter .cate-filter-content .cfc-genre li{ float: left; width: 24%; margin-right: 1%; font-size: 13px;}
.album-cate-filter{ margin-bottom: 30px;}
#pagination{ margin: 20px 0;text-align: center;}
#pagination .pagination li a{ margin: 0 5px; padding: 8px 15px !important; display: inline-block; border-radius: 3px !important; background: #eee !important; border: none !important; color: #333 !important;}
#pagination .pagination li a:hover{ opacity: 0.8;}
#pagination .pagination li.active a{ color: #fff !important; background-color: #ff7800 !important;}
/* xtitle */
.xtitle{ height: 36px; padding: 6px 0; position: relative; margin: 8px 0; display: block;}
.xtitle h1, .xtitle .xtitle-name{ font-size: 20px; line-height: 1.2em; margin: 0; font-weight: 300; display: inline-block; float: left; text-transform: uppercase;}
.xtitlehome h2, .xtitlehome .xtitle-name{ padding-left: 15px; border-left: 3px solid #ff7800;}
.xtitle .more{ float: right; margin-top: 4px;}
.xtitle .nav-tabs{ display: inline-block; margin: 0 0 0 60px; border: none; position: relative}
.xtitle .nav-tabs:before{ content: "//"; font-size: 20px; font-weight: 300; position: absolute; left: -35px; top: -2px; color: #bbb;}
.xtitle .nav-tabs > li > a{ padding: 3px 5px !important; border: none !important; background: none !important; position: relative; margin-right: 15px;}
.xtitle .nav-tabs > li.active > a{ color: #ff7800;}
.xtitle .nav-tabs > li.active > a:before{ content: ""; width: 5px; height: 5px; border-radius: 50%; display: inline-block; background: #ff7800; position: absolute; top: 11px; left: -4px;}
.xtitlebg{ background: #f2f4f6; padding: 0 0 0 15px; position: relative; border-left: 2px solid #ff7800;}
.xtitlebg h2, .xtitlebg .xtitle-name{ font-size: 16px !important; line-height: 36px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.xtitlebg .more{ margin: 0; border-radius: 0; height: 36px; line-height: 36px; padding: 0 15px; background: #70c2eb;}
.sr-artist-list .artist-cate-list .item{ width: 15.16%;}
.cate-desc{ font-size: 13px; font-weight: 300; font-style:italic;}
/* movies */
.movies-list-wrap{ margin-top: 50px;}
.movies-list .item{ width: 11%; padding-bottom: 16%; position: relative;}
.movies-list .item .thumb{ height: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-bottom: 0;}
/* listened */
.sb-listened{ padding: 15px 10px; border-top: 2px solid #FF7800; background: #F6F8FA;}
.sb-listened .xtitle{ padding: 0; margin: 0; height: auto; display: block; margin-bottom: 15px; text-align: center;}
.sb-listened .xtitle h2{ font-size: 12px; text-transform: uppercase; float: none;}
.listened-list{ padding: 0; margin: 0; list-style: none; display: block;}
.listened-list .item{ width: 98.5%; margin-bottom: 12px; font-size: 0;}
.listened-list .item .thumb{ width: 30px; height: 30px;}
.listened-list .item .item-caption{ padding-left: 40px; position: relative;}
.listened-list .item .item-caption .feed-txt{ font-size: 12px; font-weight: 300; line-height: 1.4em; background: #fff; padding: 4px 8px; border-bottom: 1px solid #eee;}
.listened-list .item .item-caption .feed-txt .label{ font-size: 10px; padding: 0px 3px; margin-right: 4px; background: #FF7800; color: #fff; font-weight: 300 !important;}
.listened-list .item .item-caption .feed-txt strong{ font-weight: 400;}
.listened-list .item .item-caption .time{ margin-top: 3px; font-weight: 300; font-size: 10px; display: none; padding: 0 3px; height: 16px; line-height: 16px; background: rgba(0,0,0,0.5); position: absolute; bottom: 0px; right: 0px;}
.listened-list .item:hover .item-caption .time{ display: inline-block;}
.listened-list .item .thumb:before, .listened-list .item .thumb:after{ display: none !important;}
/* billboard */
.xtabs{ border-bottom: none; margin: 0; padding: 0; background: #1B1B1B;}
.xtabs li a{ border: none !important; color: #fff; background: none !important; position: relative;}
.xtabs li.active a{ color: #ff7800 !important;}
.xtabs li.active a:before{ content: ""; width: 100%; position: absolute; bottom: 0; left: 0; height: 2px; background: #ff7800; display: inline-block;}
.billboard-list .item{ padding: 10px 0; border-bottom: 1px solid #eee; width: 98.8%; margin-bottom: 0;}
.billboard-list .item .item-caption{ padding-right: 40px; padding-top: 3px;}
.billboard-list .item .item-caption h3{ font-size: 14px; margin-bottom: 3px;}
.billboard-list .item .item-position{ position: absolute; top: 12px; right: 0; font-size: 16px; font-weight: 700; opacity: 0.5;}
.billboard-list .item:hover .item-position{ display: none;}
.billboard-list .item:hover .item-caption{ padding-right: 90px;}
.sb-billboard-songs .billboard-list .item:hover .item-caption{ padding-right: 90px;}
.billboard-list .item-big .item-caption{ padding-left: 80px; padding-right: 40px !important;}
.billboard-list .item-big .item-caption h3{ font-size: 16px; font-weight: 400;}
.billboard-list .item-big .item-caption .stats{ margin-top: 15px;}
.billboard-list .item-big .thumb{ width: 70px; height: 70px;}
.billboard-list .item-big .item-position{ width: 30px; height: 30px;line-height: 30px; text-align: center; background: #FF7800; opacity: 1; border-radius: 50%; color: #fff; display: inline-block !important;}
.billboard-list .item-big.item-active .item-position{ display: block !important;}
.billboard-list .item-big:hover .item-tools{ top: auto; bottom: 10px;}
.billboard-list .item-big.item-active .item-tools{ top: auto; bottom: 10px;}
/* sb billboard */
.sb-billboard-songs .billboard-list .item .thumb{ display: none;}
.sb-billboard-songs .billboard-list .item .item-caption{ padding-right: 0px; padding-left: 50px;}
.sb-billboard-songs .billboard-list .item .item-position{ top: 21px; left: 15px; font-size: 18px; font-weight: 400; opacity: 1;}
.sb-billboard-songs .billboard-list .item:hover .item-position{ display: inline-block;}
.sb-billboard-songs .billboard-list .item-big{ padding-top: 0; position: relative; border-bottom: none; padding-bottom: 0;  font-size: 0; overflow: hidden;}
.sb-billboard-songs .billboard-list .item-big .item-caption{ position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.4); padding: 8px 12px; z-index: 1; color: #fff; padding-left: 50px;}
.sb-billboard-songs .billboard-list .item-big .item-caption a{ color: #fff;}
.sb-billboard-songs .billboard-list .item-big .item-caption h3{ font-size: 16px; font-weight: 400; margin-bottom: 5px;}
.sb-billboard-songs .billboard-list .item-big .item-caption .singer{ line-height: 12px;}
.sb-billboard-songs .billboard-list .item-big .item-caption .stats{ position: absolute; bottom: 12px; right: 6px;}
.sb-billboard-songs .billboard-list .item-big .thumb{ width: 100%; position: relative; padding-bottom: 50%; float: none; display: inline-block;}
.sb-billboard-songs .billboard-list .item-big .thumb img{ position: absolute; width: 100%; left: 0; right: 0; top: -15px;}
.sb-billboard-songs .billboard-list .item-big .thumb:after, .billboard-list .item-big .thumb:before{ display: none;}
.sb-billboard-songs .billboard-list .item-big .item-position{ width: 30px; height: 30px; background: none; border-bottom: 2px solid #fff; line-height: 20px; text-align: center; color: #fff; top: auto; bottom: 12px; z-index: 10; left: 8px; border-radius: 0;}
.sb-billboard-songs .billboard-list .item-big.item-active .item-position{ display: block !important;}
.sb-billboard-songs .billboard-list .item-big:hover .item-caption .stats, .sb-billboard-songs .billboard-list .item-big.item-active .item-caption .stats{ display: none;}
.sb-billboard-songs .billboard-list .item-big:hover .item-tools{ top: auto; bottom: 15px; right: 12px; z-index: 10;}
.sb-billboard-songs .billboard-list .item-big.item-active .item-tools{ top: auto; bottom: 15px; right: 12px; z-index: 10;}

.billboard-artist-list .item{ width: 98.5%; margin-bottom: 15px;}
.billboard-artist-list .item .item-caption{ padding-left: 115px; padding-right: 0;}
.billboard-artist-list .item .item-caption h4{ margin: 0; font-size: 16px; font-weight: 400; padding: 0; padding-bottom: 10px; position: relative; margin-bottom: 8px;}
.billboard-artist-list .item .item-caption h4:before{ content: ""; width: 30px; height: 1px; background: #111; position: absolute; bottom: 0; left: 0;}
.billboard-artist-list .item .item-caption p{ margin-bottom: 0; font-size: 11px; opacity: 0.6;}
.billboard-artist-list .item .item-caption .stats{ margin-top: 10px;}
.billboard-artist-list .item .thumb{ width: 100px; height: 100px; padding: 0;}
/* top album */
.sb-topalbum{}
.sb-topalbum .item .thumb{ width: 70px; height: 70px; border-radius: 50%; display: inline-block;}
.sb-topalbum .item-big .thumb{ width: 100%; padding-bottom: 50%; border-radius: 0;}
.sb-topalbum .item .item-caption{ padding-left: 80px; margin-top: 10px;}
.sb-topalbum .item .item-position{ top: 35px; left: auto; right: 0; display: none;}
.sb-topalbum .item:hover .item-position{ display: none;}
.sb-topalbum .item .item-tools{ top: 30px;}
.sb-topalbum .item{}
.main-billboard-list{}
.main-billboard-list .xtitle-name{ color: #ff7800;float: left;}
.main-billboard-list .mbb-ul{ display: block; margin: 20px -2%;}
.main-billboard-list .mbb-ul .mu-li{ width: 29.33%; margin: 0 2%; float: left; position: relative;}
.main-billboard-list .mbb-ul .mu-li:before{ content: ""; width: 1px; position: absolute; top: 15px; bottom: 0; right: -25px; background: #eee; display: inline-block;}
.main-billboard-list .mbb-ul .mu-li.mu-artist:before{ display: none;}
.billboard-cate-list .item-big{ padding-left: 5px;}
.billboard-cate-list .item-big .item-position{ background: none;font-size: 16px; font-weight: 400; border-radius: 0; height: auto; width: 30px; color: #aaa; top: 30px; left: 0; right: auto;}
.billboard-cate-list .item-big .item-caption{ padding-right: 0 !important;}
.billboard-cate-list .item-big .item-caption h3{ font-size: 14px; line-height: 1.2em;}
.billboard-cate-list .item-big .item-caption .stats{ margin-top: 5px;}
.billboard-cate-list .item-big .item-caption .country{ color: #888; font-size: 11px; margin-bottom: 0;}
.billboard-cate-list .item-big .item-caption i.icon-files{ color: #000 !important; font-size: 11px;}
.billboard-cate-list .item.item-big:first-of-type .item-position{ color: #ff7800; opacity: 1;}
.top-songs .billboard-cate-list .item-big .stats{ margin-top: 0 !important; position: absolute; top: 20px; right: 120px;}
.top-songs .billboard-cate-list .item-big .thumb{ width: 40px; height: 40px;}
.top-songs .billboard-cate-list .item-big .item-caption{ padding-left: 50px; padding-right: 200px;}
.top-songs .billboard-cate-list .item-big .item-position{ top: 14px;}
.top-songs .billboard-cate-list .item-big .item-tools{ position: absolute; top: 15px !important; right: 0; display: inline-block;}
.top-album .billboard-cate-list .item-big .stats{ right: 80px; top: 40px;}
.top-album .billboard-cate-list .item-big .item-caption{ padding-right: 160px; padding-left: 95px; padding-top: 20px;}
.top-album .billboard-cate-list .item-big .thumb{ width: 80px; height: 80px;}
.top-album .billboard-cate-list .item-big .item-position{ top: 34px;}
.top-album .billboard-cate-list .item-big .item-tools{ top: 35px !important;}
.topalbum-list{ padding: 0 10px; border: 6px solid #eee;}
.topalbum-list .item:last-of-type{ border-bottom: none;}
.topalbum-list .item .thumb{ border-radius: 50%; overflow: hidden;}
.mbb-tabs{ margin: 20px 0 10px;}
.mbb-tabs .btn{ font-size: 14px; text-transform: none;}
.mbb-tabs .pull-left .btn{ margin-right: 10px;}
.stats{font-size: 11px;color: #aaaaaa;}
.stats span{ margin-right: 15px;}
.stats span i{ font-size: 10px; margin-right: 2px;}
.sb-suggestion .item{ width: 98.5%;}
.sb-suggestion-album .item-big{ padding-left: 0 !important;}
.sb-suggestion-album .item-big .item-caption{ padding-right: 0 !important;}
.normal-billboard .item .thumb{ display: inline-block; width: 50px; height: 50px;}
.normal-billboard .item .item-caption{ padding-left: 65px;}
.normal-billboard .item .item-caption h3{ margin-bottom: 2px;}
.normal-billboard .item .item-caption .singer{ margin-bottom: 5px;}
.sb-suggestion-album .normal-billboard .item .thumb{ width: 60px; height: 60px;}
.sb-suggestion-album .normal-billboard .item .item-caption{ padding-left: 75px; padding-right: 0 !important;}
/* follow */
.sb-follow{ margin-bottom: 15px;}
.tweet-txt{ float: left; font-size: 11px; margin-right: 10px; line-height: 28px;}
.tweet-btn{ float: right;}
/* policy */
.ic-article{}
.ic-article p{ margin-bottom: 0; line-height: 1.3em; font-size: 16px; font-weight: 300; min-height: 1.3em;}
.ic-article strong, .ic-article b{ font-weight: 500;}
/* artist page */
.artist-about, .dashboard-about{ display: block; padding: 30px 30px 0; position: relative; margin-left: -15px; margin-right: -15px; overflow: hidden;}
.artist-about:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 2}
.artist-about h1{ margin: 0; font-size: 26px; margin-bottom: 15px; padding-bottom: 15px; margin-right: 100px; line-height: 1.1em; font-weight: 500; position: relative}
.artist-about h1:before{ content: ""; width: 70px; height: 2px; background: #ff7800; display: inline-block; position: absolute; bottom: 0; left: 0;}
.artist-about .thumb{ float: left; width: 214px; height: 214px; position: relative; overflow: hidden; z-index: 3;}
.artist-about .thumb img{ width: 100%; min-height: 100%;}
.artist-about .info{ position: relative; z-index: 3; padding-left: 234px; color: #fff;}
.artist-about .info a{ cursor: pointer; color: #fff;}
.artist-about .info .info-other span{ margin-right: 20px;}
.artist-about .info .about{ color: rgba(255,255,255,0.7); font-style: italic; font-weight: 300; font-size: 13px; max-height: 61px; overflow: hidden; margin-bottom: 5px;}
.artist-about .info .about.active{ max-height: none;}
.artist-about .info .about-more{ margin-bottom: 15px;}
.artist-about .info .about-more a{ display: inline-block; font-size: 10px; padding: 2px 5px; background: rgba(255,255,255,0.2); border-radius: 2px; border: 1px solid #fff; line-height: 1em;}
.artist-about .info .about-more a:hover{ border-color: #ff7800; background-color: #ff7800; color: #fff;}
.artist-about .info .stats{ font-size: 12px; margin-bottom: 0;}
.artist-about .info .stats i{ font-size: 12px;}
.artist-about .info .btn-follow{ border: 1px solid #fff !important; color: #fff !important;}
.artist-about .info .btn-following{ border: none !important;}
#cover{ position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; background-size: cover; background-position: 50% 25%;}
#cover svg{ height: 1200px !important; margin-top: -750px;}
.artist-about .artist-menu{ z-index: 3; background: rgba(0,0,0,0.4); margin: 30px -30px 0 -30px; padding: 0 30px; position: relative;}
.artist-about .artist-menu ul li, .dashboard-menu ul li{ float: left; margin-right: 40px;}
.artist-about .artist-menu ul li a, .dashboard-menu ul li a{ height: 50px; line-height: 50px; color: #fff; display: inline-block;}
.artist-about .artist-menu ul li.active a, .dashboard-menu ul li.active a{ border-bottom: 2px solid #ff7800; color: #ff7800;}
.artist-song-list .item-listened{ position: absolute; top: 23px; right: 110px; height: 5px; width: 150px;}
.artist-song-list .item-listened span{ display: block; position: absolute; top: 0; left: 0; height: 3px; background: #ccc;}
.artist-song-list .item .item-caption{ padding-right: 300px !important;}
/* news */
.news-list{}
.news-list-ul{ border-top: 2px solid #222;}
.news-list-ul .nlu-item{ padding: 20px 0; border-bottom: 1px solid #eee;}
.news-list-ul .nlu-item .thumb{ width: 250px; max-height: 170px; overflow: hidden; float: left;}
.news-list-ul .nlu-item .thumb img{ width: 100%; height: auto;}
.news-list-ul .nlu-item .info{ padding-left: 270px;}
.news-list-ul .nlu-item .info h3{ margin-top: 0; margin-bottom: 10px; font-size: 20px; line-height: 1.2em; font-weight: 400;}
.news-list-ul .nlu-item .info .desc{ font-weight: 300;}
.news-list-ul .nlu-item-right{ padding: 20px; border: 3px solid #eee; border-top-width: 2px;}
.news-list-ul .nlu-item-right .thumb{ float: right;}
.news-list-ul .nlu-item-right .info{ padding-left: 0; padding-right: 270px;}
.sb-hotnews{ border-bottom: 2px solid #222; padding-bottom: 10px;}
.sb-hotnews .hotnews-ul .hnu-item{ display: block; margin-bottom: 15px;}
.sb-hotnews .hotnews-ul .hnu-item .thumb{ width: 100px; max-height: 70px; overflow: hidden; float: left;}
.sb-hotnews .hotnews-ul .hnu-item .thumb img{ width: 100%; height: auto;}
.sb-hotnews .hotnews-ul .hnu-item .info{ padding-left: 110px;}
.sb-hotnews .hotnews-ul .hnu-item .info h3{ font-weight: 400; font-size: 13px; line-height: 1.2em; margin: 0;}
.sb-hotnews .hotnews-ul .hnu-item-big{ margin-bottom: 10px;}
.sb-hotnews .hotnews-ul .hnu-item-big .thumb{ width: 100%; max-height: 200px; float: none;}
.sb-hotnews .hotnews-ul .hnu-item-big .info{ padding-left: 0;}
.sb-hotnews .hotnews-ul .hnu-item-big .info h3{ font-size: 18px; margin-top: 5px; font-weight: 500;}
.news-view{ font-weight: 300;}
.news-view .xtitle{ height: auto; overflow: hidden;}
.news-view .xtitle-name{ font-size: 32px; font-weight: 300; text-transform:none;}
.news-view .time{ font-size: 14px; font-weight: 300;}
.news-view .desc{ font-size: 16px; font-weight: 400;}
.news-view .article{ font-size: 16px; font-weight: 300; text-align: justify;}
.news-view .article p{ margin-bottom: 0; line-height: 1.4em; min-height: 1em;}
.news-view .article img{ max-width: 100%; min-width: 50%; margin: 0 auto; display: block;}
.news-view .article iframe{ width: 60%; height: 280px; display: block; margin: 0 auto;}
.news-view .breadcrumb{ margin-top: 15px; margin-bottom: 0px; padding: 0; background: none; font-size: 12px; font-weight: 400;}
.news-view .article-img{ width: 100%; padding-bottom: 50%; overflow: hidden; position: relative; background-position: 50% 25%; background-size: cover; margin: 20px 0;}
.related-news{ margin-top: 20px; border-top: 3px solid #eee; border-bottom: 3px solid #eee; padding-bottom: 20px;}
.related-news .related-news-ul{ margin-left: -1%; margin-right: -1%;}
.related-news .rnu-item{ float: left; width: 23%; margin: 0 1%;}
.related-news .rnu-item .thumb{ width: 100%; padding-bottom: 60%; position: relative; display: inline-block; overflow: hidden;}
.related-news .rnu-item .thumb img{ width: 100%; height: auto; min-height: 100%; position: absolute; top: 0; left: 0; right: 0;}
.related-news .rnu-item h4{ font-size: 14px; line-height: 1.2em; font-weight: 400; margin: 5px 0;}
/* dashboard */
.dashboard-about{ height: 280px; background: #363636; position: relative;}
.dashboard-about .da-name{ width: 235px; position: absolute; top: 103px; left: 0px; color: #fff; text-align: right; padding: 8px 45px 8px 15px; background: #363636; z-index: 2;}
.dashboard-about .da-name .name{ display: block; font-size: 22px; position: relative; padding-bottom: 10px; margin-bottom: 7px; line-height: 1em;}
.dashboard-about .da-name .name:before{ content: ""; width: 60px; height: 2px; position: absolute; bottom: 0; right: 0; background: #ff7800;}
.dashboard-about .da-name .joined{ font-size: 11px; color: #ccc;}
.dashboard-about .avatar{ width: 110px; height: 110px; border-radius: 50%; position: absolute; top: 50%; margin-top: -55px; left: 200px; overflow: hidden; z-index: 4;}
.dashboard-about .avatar img{ width: 100%; min-height: 100%;}
.dashboard-about .da-signal span{ display: inline-block; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); width: 270px; height: 270px; position: absolute; top: 50%; left: 120px; margin-top: -135px;}
.dashboard-about .da-signal span.das-1{ background:rgba(255,255,255,0.05);}
.dashboard-about .da-signal span.das-2{ width: 500px; height: 500px; left: 05px; margin-top: -250px; background:rgba(255,255,255,0.05);}
.dashboard-about .da-signal span.das-3, .dashboard-about .da-signal span.das-4, .dashboard-about .da-signal span.das-5{ width: 760px; height: 760px; left: -125px; margin-top: -380px; border-left: none;}
.dashboard-about .da-signal span.das-4{ left: 35px;}
.dashboard-about .da-signal span.das-5{ left: 215px;}
.dashboard-about .da-recent a{ display: inline-block; position: absolute; width: 50px; height: 50px; border-radius: 50%; overflow: hidden;}
@keyframes roll { 0% {transform: rotate(0);} 100% {transform: rotate(360deg);}}
.dashboard-about .da-recent a img{ width: 100%; min-height: 100%;}
.dashboard-about .da-recent a:hover:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 2px solid #fff; border-radius: 50%;}
.dashboard-about .da-recent .dar-1{ top: 30px; left: 330px;}
.dashboard-about .da-recent .dar-2{ top: 180px; left: 470px;}
.dashboard-about .da-recent .dar-3{ top: 90px; left: 603px; width: 60px; height: 60px;}
.dashboard-about .da-recent .dar-4{ top: 140px; left: 760px; width: 70px; height: 70px;}
.dashboard-about .da-recent .dar-5{ top: 60px; left: 930px; width: 80px; height: 80px;}
.dashboard-menu{z-index: 3; background: #1C1C1C; margin: 0 -30px 0 -30px; padding: 0 30px; position: relative;}
.song-thumb-list .item{ width: 98.5%;}
.song-thumb-list .item .item-tools{ display: inline-block;}
.song-thumb-list .item .item-action{ top: 23px; right: 110px; display: block !important;}
.song-thumb-list .item .item-caption{ padding-right: 170px !important;}
.both-list .item-album .thumb{ width: 80px; height: 80px;}
.both-list .item-album .item-caption{ padding-left: 90px; padding-right: 210px !important; padding-top: 20px;}
.both-list .item-album .item-tools{ top: 35px;}
.both-list .item-album .item-action{ top: 38px;}
.playlist-list .item .item-caption .time{ line-height: 1.5em;}
.playlist-list .item .item-caption .badge{ font-size: 10px; font-weight: 400; padding: 2px 6px; float: right;}
.album-list .item:hover .xtools{ display: block;}
.btn-xsm{ padding: 3px 4px; font-size: 10px; line-height: 1em;}
.main-play .song-list .item .item-caption{ margin-top: 0;}
/* edit playlist */
.ple-wrap{ width: 100%; display: block;}
.ple-wrap .plew-left{ width: 190px; float: left;}
.ple-wrap .plew-left .plewl-thumb{ width: 100%; height: 100%; position: relative;}
.ple-wrap .plew-left .plewl-thumb img{ width: 100%; height: auto;}
.ple-wrap .plew-left .plewl-thumb .thumb-change{ position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.6); display: block; width: 100%; text-align: center; color: #fff; font-size: 10px; padding: 5px 10px;}
.ple-wrap .plew-left .plewl-thumb .thumb-change i{ font-size: 14px; vertical-align: sub; margin-right: 5px;}
.ple-wrap .plew-left .plewl-thumb input[type=button]{ position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 3;}
.ple-wrap .plew-right{ padding-left: 210px;}
.ple-wrap .plew-right label{ font-weight: 500;}
.ple-wrap .plew-right textarea{ resize: none;}
.ple-wrap .playlist-fix{ margin-top: 10px; margin-bottom: 30px; position: relative;}
.ple-wrap .playlist-fix ol{ list-style: none; padding: 0; margin: 0; position: relative;}
.ple-wrap .playlist-fix .song-cate-list .item .it-drag{ cursor: move;}
.ple-wrap .playlist-fix .song-cate-list .item .item-caption{ padding-right: 80px !important; padding-left: 30px;}
.ple-wrap .playlist-fix .song-cate-list .item .item-position{ position: absolute; top: 16px; left: 0; color: #ccc; font-weight: 500;}
.ple-wrap .playlist-fix .song-cate-list .item .it-delete{ cursor: pointer !important;}
.item.dragged {position: absolute;z-index: 2000;opacity: 0.5;left: 0 !important;background: #fff;}
ol.dragitem li.placeholder {position: relative;}
ol.dragitem li.placeholder:before {position: absolute; left: 0 !important;}

/* xtools */
.xtools{ position: absolute; top: 0px; left: 0px; width: 100%; z-index: 6; display: none;}
.xtools a{ display: inline-block; padding: 4px 10px; font-size: 11px; color: #fff; line-height: 1.2em; width: auto; float: left; text-align: center; background: rgba(0,0,0,0.6);}
.xtools a.xtt-delete{ background: #fff; color: #333; float: right; padding: 4px 6px;}
.xtools a.xtt-delete:hover{color: #dd4b39;}
.xtools a.xtt-play{ background: #FF7800;}
.xtools a.xtt-play:after{ content: "Play"; margin-left: 5px;}
.xtools a.xtt-edit:after{ content: "Edit"; margin-left: 5px;}
.xtools a i:before{ font-size: 10px;}
/* play page */
.play-album-list .album-cate-list div.item:nth-child(6){ display: none;}
.artist-block{ background: #fff; box-shadow: 0 5px 15px 0px rgba(0,0,0,0.1); margin-bottom: 20px; margin-top: 0;}
.artist-block .thumb{ right: auto; left: 0;}
.artist-block .item .item-caption{ padding-left: 230px; padding-right: 20px; text-align: left;}
.artist-block .item .item-caption h3{ margin-bottom: 8px;}
.artist-block .item .item-caption h3 a{ color: #ff7800;}
.artist-block .item .item-caption .info-about{ font-size: 12px; font-style: normal;}
.artist-block .item .item-caption .stats{ margin-bottom: 0;}
.play-about .xtitle{ font-size: 20px; color: #aaa; font-weight: 300; height: auto; line-height: 1.2em; margin-bottom: 3px;}
.play-about .xtitle .xtitle-name{ color: #333; line-height: 1.2em; margin-right: 10px; text-transform: none;}
.play-about .xtitle .singer{ color: #aaa;}
.play-about .xtitle .singer:hover{ color: #ff7800;}
.pa-st{ margin-bottom: 10px; overflow: hidden;}
.pa-st .others{ display: inline-block; float: left; line-height: 24px; margin-right: 10px;}
.pa-st .pa-rating{ float: left; display: inline-block;}
.pa-st .pa-rating .par-count{ float: left; font-size: 10px; line-height: 18px; margin: 3px 10px 3px 0px; padding: 0 5px; background: #fff; border-radius: 3px; border: 1px solid #929496; color: #929496;}
.pa-st .pa-rating form{ float: left;}
.star-rating .caption{ display: none !important;}
.music-player{ position: relative; background-image: url(/images/player-cover.jpg); background-size: cover; background-position: 50% 25%; min-height: 100px; overflow: hidden;}
.music-player:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5);}
.mp-sound{ position: relative; z-index: 3; padding: 40px 30px 20px; color: #fff;}
.mp-sound a{ color: #fff;}
.mp-sound .about-sound{ font-size: 11px; position: absolute; top: 10px; left: 10px;}
.mp-sound .mps-title{ font-size: 14px; float: left; text-align: right; margin-top: 5px; margin-left: 30px; margin-right: 20px; line-height: 18px; padding-bottom: 20px; position: relative;}
.mp-sound .mps-title span{ display: block; font-size: 23px; font-weight: 300;}
.mp-sound .mps-title:before{ content: ""; width: 60px; height: 2px; background: #ff7800; display: inline-block; position: absolute; bottom: 0; right: 0;}
.mp-sound .mps-list{ float: left; margin-right: 10px;}
.mp-sound .mps-list li{ float: left; margin-right: 8px; position: relative;}
.mp-sound .mps-list li a{ display: inline-block; padding: 10px 3px; text-align: center; width: 65px; border-radius: 3px; background: rgba(0,0,0,0.3); cursor: pointer;}
.mp-sound .mps-list li.active a{ background: #fff !important; box-shadow: 0 0px 15px 0px rgba(0,0,0,0.1); color: #ff7800;}
.mp-sound .mps-list li a span{ display: block; font-size: 12px;}
.mp-sound .mps-list li a i{ font-size: 20px; display: inline-block; height: 32px; line-height: 32px;}
.mp-sound .mps-list li a i.icon-cricket, .mp-sound .mps-list li a i.icon-cheeper{ font-size: 24px;}
.mp-sound .mps-list li a.sound-close{ display: none; line-height: 1em; cursor: pointer;}
.mp-sound .mps-list li.active a.sound-close{ display: inline-block; width: 20px !important; height: 20px; text-align: center; position: absolute; top: -10px; right: -10px; background: #fff; color: #333; box-shadow: 0 0px 10px 0px rgba(0,0,0,0.3); border-radius: 50%; padding: 0; z-index: 3;}
.mp-sound .mps-list li.active a.sound-close i{ font-size: 8px; line-height: 20px; height: 20px;}
.mp-sound .mps-balance{ float: left; margin-top: 10px;}
.mp-sound .mps-balance .mpsb-title{ display: block; font-size: 12px; margin-bottom: 10px;}
.mp-sound .mps-balance .balance-sound span{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.4); margin-right: 5px; cursor: pointer}
.mp-sound .mps-balance .balance-sound span:hover{ background: rgba(255,255,255,0.6);}
.mp-sound .mps-balance .balance-sound span.active{ background: #ff7800 !important;}
.play-lyric{ background: #fff; margin-bottom: 20px; padding: 20px 30px;border: 1px solid #efefef;}
.play-lyric .play-lyric-content{ display: block; overflow: hidden; font-weight: 300; margin-bottom: 10px; max-height: 230px;}
.play-lyric .play-lyric-content.active{ max-height:none;}
.play-lyric .play-lyric-content p{ margin-bottom: 0; min-height: 1.2em; line-height: 1.4em;}
.play-lyric .play-lyric-content .lyric-name{ font-size: 18px; font-weight: 500; margin-bottom: 10px; display: block;border-bottom: 1px solid #e2dfdf;padding-bottom: 10px;}
.play-lyric .toggle-lyric{ cursor: pointer;}
#lyrics-content{line-height: 28px;background: transparent url(https://1.bp.blogspot.com/-nhcv_T17JRI/WUDfmqTrGAI/AAAAAAAAB_o/T4VrvPgFkNUUyp65WKn2bAvipalek6MdACLcBGAs/s1600/line_lyric.png) left -5px;}
.play-tools{margin-top: -3px;padding: 10px 15px; background: #fff; box-shadow: 0 0px 15px 0px rgba(0,0,0,0.15); margin-bottom: 20px;}
.play-tools .btn{ margin-right: 8px; text-transform: none;}
.play-tools .btn i{ margin-right: 3px;}
.play-tools .pt-like.active i:before{ content: "\e97c"; color: #ff7800}
.play-tools .pull-right{ padding: 5px 0;font-size: 12px;}
.play-album-info{ margin-bottom: 20px;}
.play-album-info .thumb{ width: 120px; height: 120px; float: left;}
.play-album-info .thumb img{ width: 100%; min-height: 100%;}
.play-album-info .info{ padding-left: 140px;}
.play-album-info .info .desc{ font-size: 12px; font-weight: 300; font-style: italic;}
.play-list{ background: #151515; margin: 0; border-top: 1px solid #555; max-height: 250px; overflow: hidden; position: relative;}
.play-list .item{ margin: 0; width: 100%; padding-left: 20px; padding-right: 20px; color: #ddd; border-bottom: 1px solid #333; cursor: pointer;}
.play-list .item:hover, .play-list .item.active{ background: rgba(255,255,255,0.03);}
.play-list .item a{ color: #ddd;}
.play-list .item .item-tools{ right: 20px;}
.play-list .item .item-caption{ padding-left: 46px;}
.play-list .item .item-position{ position: absolute; top: 16px; left: 25px; font-weight: 400; color: #888;}
.play-list .item .item-tools a{ background: none !important; color: #ddd !important;}
.play-list .item .item-tools a:hover{ background: rgba(255,255,255,0.1) !important;}
.play-list .item.active .item-position{ font-size: 0;}
.play-list .item.active .item-position:before{ content:""; display:block; width: 14px; height: 10px; background: url(/images/onair.gif) left center;position: absolute; top: 2px; left: 0px}
/* popover */
.popover{ padding: 0;}
.popover-lg{ min-width: 480px;}
.popover-md{ min-width: 350px;}
.popover > .close{ float: right;margin: 7px 9px 7px 7px;}
.popover.top-right > .arrow, .popover.bottom-right > .arrow{ left: 90%;}
.popover.top-left > .arrow, .popover.bottom-left > .arrow{ left: 10%;}
.popover.left-top > .arrow, .popover.right-top > .arrow{ top: 10%;}
.popover.left-bottom > .arrow, .popover.right-bottom > .arrow{ top: 90%;}
/*.popover-default.bottom > .arrow:after{ border-bottom-color: #f7f7f7;}*/
.popover-primary.bottom > .arrow:after{ border-bottom-color: #428bca;}
.popover-success.bottom > .arrow:after{ border-bottom-color: #dff0d8;}
.popover-danger.bottom > .arrow:after{ border-bottom-color: #f2dede;}
.popover-warning.bottom > .arrow:after{ border-bottom-color: #fcf8e3;}
.popover-info.bottom > .arrow:after{ border-bottom-color: #d9edf7;}
.popover-default.left-top > .arrow:after{ border-left-color: #f7f7f7;}
.popover-default.right-top > .arrow:after{ border-right-color: #f7f7f7;}
.popover-primary.left-top > .arrow:after{ border-left-color: #428bca;}
.popover-primary.right-top > .arrow:after{ border-right-color: #428bca;}
.popover-success.left-top > .arrow:after{ border-left-color: #dff0d8;}
.popover-success.right-top > .arrow:after{ border-right-color: #dff0d8;}
.popover-danger.left-top > .arrow:after{ border-left-color: #f2dede;}
.popover-danger.right-top > .arrow:after{ border-right-color: #f2dede;}
.popover-warning.left-top > .arrow:after{ border-left-color: #fcf8e3;}
.popover-warning.right-top > .arrow:after{ border-right-color: #fcf8e3;}
.popover-info.left-top > .arrow:after{ border-left-color: #d9edf7;}
.popover-info.right-top > .arrow:after{ border-right-color: #d9edf7;}
.popover-default > .popover-title{ color: #333; background-color: #f7f7f7;}
.popover-primary > .popover-title{ color: #fff; background-color: #428bca; border: 2px solid #428bca;}
.popover-success > .popover-title{ color: #3c763d; background-color: #dff0d8; border-bottom: 1px solid #d6e9c6;}
.popover-info > .popover-title{ color: #31708f; background-color: #d9edf7; border-bottom: 1px solid #bce8f1;}
.popover-warning > .popover-title{ color: #8a6d3b; background-color: #fcf8e3; border-bottom: 1px solid #faebcc;}
.popover-danger > .popover-title{ color: #a94442; background-color: #f2dede; border-bottom: 1px solid #ebccd1;}
.popover-footer{ padding: 4px; background-color: #fbfbfb; text-align: right; border-top: 1px solid #ebebeb; border-radius: 0 0 5px 5px;}
.popover-footer .btn + .btn{ margin-bottom: 0; margin-left: 4px;}
.popover-footer .btn-group .btn + .btn{ margin-left: -1px;}
.popover-footer .btn-block + .btn-block{ margin-left: 0;}
.popover.has-footer.top > .arrow:after, .has-footer.popover.top > .arrow:after{ border-top-color: #fbfbfb;}
.popover.has-footer.left-bottom > .arrow:after{ border-top-color: transparent; border-left-color: #fbfbfb;}
.popover.has-footer.right-bottom > .arrow:after{ border-top-color: transparent; border-right-color: #fbfbfb;}
.popover-loading{ padding: 30px;}
#pop-download{ padding-right: 0 !important;}
.popover-content{ padding: 15px !important;}
/* tools song */
#this-share{margin-top: 15px;padding-top: 15px;border-top: 1px solid #efefef;}
#this-share .desc{font-size: 13px;font-style: italic;}
.this-block{ display: none;}
.this-block.block-active{ display: block;}
.this-block .this-block-container{ position: relative; z-index: 2; margin: 0 0 20px; padding: 20px; background: #F5F6F8;}
.this-block .desc{ font-weight: 300; font-size: 16px;}
.this-block .btn{ text-transform: none;}
.this-block .xclose{ background: #fff !important; opacity: 1 !important; position: absolute; top: 0px; right: 10px; margin: 0;}
#this-share .social a{ margin: 10px 5px;}
#this-share .social .fa-facebook-square{ color: #4769a5;}
#this-share .social .fa-twitter-square{ color: #1b95e0;}
#this-share .social .fa-google-plus-square{ color: #bf3727;}
/* my playlist */
.mine-playlist{}
.mine-playlist ul{ margin: 0; padding: 0; background: #fff; max-height: 270px; overflow: hidden; position: relative; border: 5px solid #eee;}
.mine-playlist ul li{ width: 100%; border-bottom: 1px solid #eee; position: relative; padding: 7px 15px;}
.mine-playlist ul li:hover:before{ content: ""; background: #ff7800; position: absolute; top: 0; left: 0; width: 2px; height: 100%; display: inline-block;}
.mine-playlist ul li .btn-mpt{ position: absolute; top: 10px; right: 15px; width: 50px; text-align: center;}
.mine-playlist ul li .btn-mpt i{ display: none;}
.mine-playlist ul li .btn-mpt.btn-active{ font-size: 0;}
.mine-playlist ul li .btn-mpt.btn-active i{ display: inline-block; font-size: 16px;}
.mine-playlist ul li .mpt-number{ font-size: 12px; color: #aaa;}
.mine-playlist ul li .mpt-name{ padding-right: 80px;}
.mine-playlist .mpt-creat{ margin: 20px 0 0; position: relative; padding-right: 90px;}
.mine-playlist .mpt-creat .form-control{ border: none; border-radius: 0;}
.mine-playlist .mpt-creat .btn{ width: 80px; text-align: center; position: absolute; top: 0; right: 0; padding: 8px 10px !important;}
.mine-playlist .ps-container .ps-scrollbar-y-rail{ opacity: 0.1 !important; margin-top: 10px; margin-bottom: 10px;}
.dashboard-playlist-list-edit .song-cate-list{ margin-top: 20px;}
.dashboard-playlist-list-edit .song-cate-list .item{ padding: 10px 10px; position: relative; border: 1px solid #eee; margin-bottom: 10px; background: #f2f4f6;}
.dashboard-playlist-list-edit .song-cate-list .item .item-position{ display: none;}
.dashboard-playlist-list-edit .song-cate-list .item .item-caption{ margin-top: 0; padding-left: 0 !important;}
.dashboard-playlist-list-edit .song-cate-list .item .item-tools{ top: 6px; right: 10px;}
.dragitem{ overflow: hidden; padding: 0;}
.dragitem li{ cursor: move;}
/* modal */
.modal-backdrop.in{ opacity: 0.8;}
.modal-cuz{}
.modal-cuz .modal-dialog{ width: 700px; margin: 60px auto;}
.modal-cuz .modal-dialog .modal-content{ border-radius: 0;}
.modal-cuz .modal-body{ padding: 20px 30px 30px;}
.modal-cuz .close{ position: absolute; top: -20px; right: 0; font-size: 12px; font-weight: 300; color: #fff; text-shadow: none; opacity: 1;}
.modal-cuz .close i{ font-size: 10px; margin-right: 3px;}
#pop-login .modal-dialog{ width: 960px;}
#pop-login .modal-content{ position: relative; padding-left: 450px; min-height: 410px;}
#pop-login .modal-content a{ cursor: pointer;}
#pop-login .modal-content .modal-body{ padding-top: 30px;}
#pop-login .modal-content .login-cover{ position: absolute; top: 0; left: 0; bottom: 0; width: 480px; background-image: url(/images/login-cover.jpg); background-size: cover; background-position: 50% 25%; overflow: hidden;}
#pop-login .modal-content .login-cover i.icon-logo{ font-size: 160px; position: absolute; top: -30px; left: -20px;}
#pop-login .modal-content .login-cover .caption{ font-size: 18px; font-weight: 300; position: absolute; top: 30px; left: 120px; width: 200px; line-height: 18px;}
#pop-login .modal-content .login-cover .caption strong{ display: block; font-size: 20px;}
#pop-login h6{ margin: 0; padding: 0; font-size: 26px; font-weight: 400; display: inline-block;}
#pop-login .desc{ font-size: 14px; font-weight: 300; margin-top: 15px; margin-bottom: 30px;}
#pop-login .login-via{ line-height: 30px; font-weight: 300; margin-top: 40px;}
#pop-login .login-via .pull-right span{ display: inline-block; vertical-align: top;}
#pop-login .login-via .pull-right a{ margin-left: 3px; display: inline-block; font-size: 0; line-height: 1em;}
#pop-login .login-via .pull-right a i{ font-size: 30px;}
.social-color i.icon-facebook{ color: #2d6bc8;}
.social-color i.icon-twitter{ color: #21c3cd;}
.social-color i.icon-google-plus{ color: #dc5b15;}
.form-material .form-control{ border: none !important; border-bottom: 1px solid #ddd !important; padding-left: 0; padding-right: 0; border-radius: 0; box-shadow: none !important;}
.form-material .form-control:focus{ border-bottom: 1px solid #06F !important;}
.form-material .form-control[readonly]{ border-bottom: none !important; padding-left: 10px !important; padding-right: 10px !important;}
/* xbar */
#xbar{ position: fixed; left: -343px; top: 0; width: 320px; bottom: 0; background: #F4F6F8; display: block; z-index: 12; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; box-shadow: 0 0 60px 30px rgba(0,0,0,0.5); opacity: 0}
#xbar.xmove{ left: 0; opacity: 1;}
#xbar .xbar-close{ position: absolute; top: 0px; right: 0px; padding: 7px 10px; z-index: 10; cursor: pointer;}
.xbar-title{ font-size: 16px; padding: 6px 10px; color: #FF7800; background: #fff; border-left: 3px solid #FF7800; box-shadow: 0 0 30px rgba(0,0,0,0.2); position: relative; z-index: 9;}
.xbar-list-default{ padding: 0; margin: 0;}
.xbar-list-default .item{ width: 100%; padding: 10px; border-bottom: 1px solid rgba(0,0,0,0.08); margin: 0;}
.xbar-list-default .item:hover{ background: #fff;}
.xbar-list-default .item .thumb{ float: left; width: 30px; height: 30px; padding-bottom: 0;}
.xbar-list-default .item .thumb:after{ font-size: 14px;}
.xbar-list-default .item .thumb img{ width: 100%; height: 100%;}
.xbar-list-default .item .item-caption{ padding-left: 40px; margin-top: -2px;}
.xbar-list-default .item .item-caption .xb-title{ line-height: 1.3em; font-size: 13px; display: block;}
.xbar-list-default .item .item-caption .number{ color: #555; font-size: 11px; display: block; margin-bottom: 0;}
.xbar-playlist, .xbar-listened{ height: 40%; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 60%;}
.xbar-playlist .item .thumb{ width: 60px; height: 60px; border-radius: 50%; float: left; overflow: hidden;}
.xbar-playlist .item .thumb:before{ border-radius: 50%; overflow: hidden;}
.xbar-playlist .thumb{ position: relative; border-radius: 50%; overflow: hidden;}
.xbar-playlist .item{ border-left: 3px solid #bbb;}
.xbar-playlist .item:hover .thumb img{ animation: 2s linear 0s normal none infinite running fa-spin;}
.xbar-playlist .xbar-list-default .item-caption{ padding-left: 70px; padding-top: 10px; padding-right: 40px;}
.xbar-playlist .xbar-list-default .item-caption .xb-title{ font-size: 14px; font-weight: 500;}
.xbar-listened{ top: 40%; bottom: 0; height: 60%;}
.xbar-listened .thumb{ border-radius: 50%; overflow: hidden;}
.xbar-listened .item:nth-child(1){ text-align: center; padding: 0; border-bottom: none; position: relative;}
.xbar-listened .item:nth-child(1) .thumb{ width: 320px; height: 200px; float: none; display: block; margin: 0 auto; border-radius: 0;}
.xbar-listened .item:nth-child(1) .thumb:after{ font-size: 30px; margin-top: -50px;}
.xbar-listened .item:nth-child(1) .thumb img{ margin-top: -50px; height: 320px;}
.xbar-listened .item:nth-child(1) .item-caption{ padding: 0; position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background: rgba(22,22,22,0.3); z-index: 4;}
.xbar-listened .item:nth-child(1) .item-caption .xb-title{ font-size: 16px; font-weight: 500;}
.xbar-listened .item:nth-child(1) .item-caption a{ color: #fff;}
.xbar-list-default{ position: absolute; top: 0px; left: 0; right: 0; overflow: hidden; height: 100%; padding-top: 35px;}
/* main search */
.main-search .main-content .xtitle .xtitle-name{ padding-left: 20px; border-left: 3px solid #FF7800;}
.main-search .main-content .xtitle{ background: #f2f4f6; padding-right: 10px; margin-bottom: 15px;}
.search-artist-list .artist-cate-list .item{ width: 15.15%;}
.search-artist-list{ border-bottom: 1px solid #eee; padding-bottom: 20px;}
.search-songs-list .song-cate-list .item .item-caption h3{ font-size: 16px;}
.search-songs-list .song-cate-list .item .item-caption .singer{ font-size: 16px;}
.search-songs-list .song-cate-list .item .item-caption .singer a{ font-size: 16px;}
.search-songs-list .song-cate-list .item .p-extra{ margin-top: 10px;}
.search-songs-list .song-cate-list .item .p-extra div{ display: inline-block; color: #333; font-size: 12px; font-weight: 300;}
.search-songs-list .song-cate-list .item .p-extra div a{ color: #333;}
.search-songs-list .song-cate-list .item .p-extra div.pe-space{ width: 4px; height: 4px; border-radius: 50%; margin: 2px 10px; background: #aaa;}
.search-songs-top{ margin-bottom: 20px;}
.search-top{ display: block; margin-top: 15px; line-height: 36px; border-bottom: 2px solid #eee;}
.search-top .st-tabs{ list-style: none; padding: 0;}
.search-top .st-tabs li{ float: left; margin-right: 25px;}
.search-top .st-tabs li a{ font-size: 14px; font-weight: 300; display: inline-block; line-height: 36px; margin-bottom: -2px;}
.search-top .st-tabs li.active a{ border-bottom: 2px solid #FF7800; font-weight: 400; color: #FF7800;}
/* 404 */
.main-404{ background: #fff; width: 100%; padding-bottom: 50%; background-image: url(/images/404-bg.jpg); background-size: cover; background-position: 50% 25%; position: relative;}
.main-404-text{ width: 60%; text-align: center; position: absolute; top: 10%; color: #fff; left: 20%; font-weight: 300; font-size: 1.5em;}
.main-404-text h2{ font-size: 3em; font-weight: 300;}
/* one col */
.one-col{ width: 100%; display: block; padding-top: 10px;}
.one-col h1.title{ font-size: 28px; margin: 10px 0; font-weight: 300;}
.one-col .oc-desc{ font-size: 14px; font-weight: 300; font-style: italic; line-height: 1.3em;}
/* my music */
.my-music{ background-image: url(/images/my-music.jpg); background-size: cover; background-position: 50% 25%; color: #fff;}
.my-music .container{ background: none !important;}
#m-playlist{ display: none;}
.main-my-music h2.title{ font-size: 22px; margin-bottom: 20px;}
.main-my-music .mmm-wrap{ background: rgba(25,25,25,0.8); margin-bottom: 30px; overflow: hidden;}
.mmm-wrap{ position: relative;}
.mmm-wrap .ps-container > .ps-scrollbar-y-rail{ display: none !important;}
.mmm-wrap .ps-container:hover > .ps-scrollbar-y-rail{ display: block !important;}
.mmm-wrap ul{ list-style: none; margin: 0; padding: 0;}
.mmm-wrap a{ color: #ccc;}
.mmm-wrap a:hover{ color: #fff;}
.mmm-wrap .mmm-left{ width: 280px; position: absolute; top: 0; left: 0; bottom: 0; border-right: 1px solid rgba(255,255,255,0.1);}
.mmm-wrap .mmm-left ul{ margin: 0; position: absolute; top: 8px; bottom: 8px; left: 0; right: 0; overflow: hidden; max-height: 100%;}
.mmm-wrap .mmm-left ul li{ padding: 0 20px; position: relative;}
.mmm-wrap .mmm-left ul li:first-of-type a{ padding-top: 6px;}
.mmm-wrap .mmm-left ul li:first-of-type a.edit{ top: 4px;}
.mmm-wrap .mmm-left ul li:last-of-type a{ padding-bottom: 10px; border-bottom: none;}
.mmm-wrap .mmm-left ul li a{ font-size: 13px; padding: 14px 0; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1em; border-bottom: 1px solid rgba(255,255,255,0.05); padding-right: 30px;}
.mmm-wrap .mmm-left ul li.active a{color: #ff7800;}
.mmm-wrap .mmm-left ul li.active i:before{ color: #ff7800;}
.mmm-wrap .mmm-left ul li i:before{ font-size: 16px; vertical-align: middle; color: #888;}
.mmm-wrap .mmm-left ul li a.edit{ display: inline-block; padding: 3px 5px; font-size: 10px; color: #aaa !important; width: auto; height: 18px; text-align: center; border-radius: 3px; border: 1px solid #333; border-radius: 20px; position: absolute; top: 13px; right: 20px; opacity: 0; z-index: 5;}
.mmm-wrap .mmm-left ul li a.edit i:before{ font-size: 10px; color: #fff; line-height: 18px;}
.mmm-wrap .mmm-left ul li:hover a.edit{ opacity: 1;}
.mmm-wrap .mmm-center{ margin-left: 280px; min-height: 500px; position: relative; margin-top: 179px;}
.mmm-wrap .mmm-center .mmmc-player{ position: absolute; top: -179px; left: 0; right: 0; width: 100%;}
.mmm-wrap .mmm-center .mmmc-player .music-player{ background: #333;}
.mmm-wrap .mmm-center .mmmc-player .mp-sound .mps-list li a{ background: rgba(255,255,255,0.1);}
.mmm-center .mmmc-list{ width: 50%; position: absolute; top: 0; left: 0; bottom: 0; border-right: 1px solid rgba(255,255,255,0.1);}
.mmm-center .mmmc-list .play-list{ max-height: 100%; border-top: none; font-size: 13px; background: none;}
.mmm-center .mmmc-list .play-list .item{ border-bottom: 1px solid rgba(255,255,255,0.05); padding: 13px 20px;}
.mmm-center .mmmc-list .play-list .item:last-of-type{ border-bottom: none;}
.mmm-center .mmmc-list .play-list .item .item-caption{ padding-right: 0 !important; padding-left: 25px; white-space: nowrap;}
.mmm-center .mmmc-list .play-list .item .item-caption h3{ font-size: 13px;}
.mmm-center .mmmc-list .play-list .item .item-caption .singer a{ font-size: 13px;}
.mmm-center .mmmc-list .play-list .item .item-position{ left: 15px; top: 15px;}
.mmm-center .mmmc-lyric{ width: 46%; position: absolute; top: 2%; right: 2%; bottom: 2%; max-height: 100%; color: #999;}
.mmm-center .mmmc-lyric .lyric-content{ font-size: 13px; font-weight: 300;}
.mmm-center .mmmc-lyric p{ margin-bottom: 0; line-height: 1.8em;}
.mmm-center .mmmc-lyric .lyric-title{ font-size: 15px; margin-bottom: 10px; font-weight: 500;}
/* player */
#xplayer, #xplayer .xplayer-bar, .music-player{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#xplayer{ background: #0F0F0F; display: block; width: 100%; position: relative; height: 50px; color: #ccc; padding-top: 5px;}
#xplayer a{ color: #ccc;}
#xplayer .active, .pcqt-item:hover{ color: #FF7800;}
#xplayer .xplayer-bar{ height: 2px; width: 100%; background: #333; position: absolute; top: 0; left: 0; cursor: pointer; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; overflow: visible !important;}
#xplayer:hover .xplayer-bar{ height: 6px; top: -2px;}
#xplayer .xplayer-bar .xplayer-buffer, #xplayer .xplayer-bar .xplayer-barload{ position: absolute; top: 0; left: 0; bottom: 0; background: #666; display: inline-block;}
#xplayer .xplayer-bar .xplayer-barload{ background: #FF7800; z-index: 3;}
#xplayer .xplayer-bar .xplayer-btn{ border-radius: 50% ; height: 16px; width: 16px; margin-top: -8px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); display: inline-block; cursor: pointer; position: absolute; top: 50% ;z-index: 4; visibility:hidden; -moz-transition-property: visibility;-moz-transition-duration: 2s;-webkit-transition-property: visibility;-webkit-transition-duration: 2s;transition-property: visibility;transition-duration: 2s;}
#xplayer .xplayer-bar:hover .xplayer-btn{  visibility: visible;}
#xplayer .xplayer-container{ padding: 10px 15px;}
#xplayer .pc-small{ padding: 3px;}
#xplayer .pc-small i{ font-size: 12px;}
#xplayer .pc-normal i{ font-size: 16px;}
#xplayer .pc-large i{ font-size: 20px;}
#xplayer .pc-normal{ margin-top: 2px;}
#xplayer .pause .player-play:before{ content: "\e910";}
#xplayer .pc-btn{ float: left; display: inline-block; cursor: pointer; margin-right: 12px; font-size: 0;}
#xplayer .pc-btn:hover i:before, #xplayer .pc-btn.active i:before{ color: #FF7800;}
#xplayer .xplayer-container .pc-timer{ padding: 0; font-weight: 300; font-size: 12px; margin-left: 10px; margin-top: 2px; float: left;}
#xplayer .xplayer-container .pc-quality{ float: right; font-size: 12px; position: relative; margin-right: 20px;}
#xplayer .xplayer-container .pc-quality .pcq-show{ display: inline-block; cursor: pointer; border-radius: 2px; padding: 4px 0; margin-top: -3px; margin-bottom: -3px;}
#xplayer .xplayer-container .pc-quality .pcq-table{ position: absolute; bottom: 22px; min-width: 70px; left: -10px; background: #eee; z-index: 4; display: none;}
#xplayer .xplayer-container .pc-quality:hover .pcq-table{ display: inline-block; border-radius: 3px; overflow: hidden;}
#xplayer .xplayer-container .pc-quality .pcq-table .pcqt-item{ padding: 4px 10px; cursor: pointer; border-bottom: 1px solid #ccc; color: #333;}
#xplayer .xplayer-container .pc-quality .pcq-table .pcqt-item.active, #xplayer .xplayer-container .pc-quality .pcq-table .pcqt-item:hover{ color: #FF7800;}
#xplayer .xplayer-container .pc-quality .pcq-table .pcqt-item:last-of-type{ border-bottom: none;}
#xplayer .xplayer-container .pc-random{ float: right; margin-right: 20px;}
#xplayer .xplayer-container .pc-repeat{ float: right; margin-right: 20px; margin-top: 1px;}
#xplayer .xplayer-container .pc-volume{ float: right; margin-right: 0;}
#xplayer .xplayer-container .pc-volume .pcv-icon{ float: left; margin-right: 8px;}
#xplayer .xplayer-container .pc-volume .pcv-value{ float: left; width: 100px; height: 2px; background: #333; position: relative; margin: 8px 0; overflow: visible !important;}
#xplayer .xplayer-container .pc-volume .pcv-value .xplayer-barload{ position: absolute; top: 0; left: 0; bottom: 0; background: #FF7800;}
#xplayer .xplayer-container .pc-volume .pcv-value .xplayer-btn{ position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #FF7800; top: 50%; margin-top: -6px; cursor: pointer;}
#xplayer .xplayer-container .pc-volume .pcv-value .xplayer-buffer{ display: none;}
#xplayer .xplayer-container .pc-auto{float: right; margin-right: 20px;}
/* toggle auto */
.pc-auto *{transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;}
.pc-auto{ width: 46px; height: 20px; position: relative; border-radius: 10px; background: #FF7800; color: #fff; cursor: pointer; overflow: hidden;}
.pc-auto .pca-toggle{ position: absolute; top: 2px; left: 28px; height: 16px; width: 16px; border-radius: 50%; background: #fff;}
.pc-auto i{ position: absolute; top: 3px; left: 8px; opacity: 1; transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s;}
.pc-auto.disable{ background: #666 !important;}
.pc-auto.disable .pca-toggle{ left: 2px;}
.pc-auto.disable i{ opacity: 0;}
/* content lagu */
.content-lagu{line-height: 21px;}
.content-lagu .official {width: 100px;height: 80px;float: left;background: url(https://4.bp.blogspot.com/-WqUE3PmtR-w/WUDfy6vgeCI/AAAAAAAAB_s/upxV5Qpj5nw9PjnXRy_jmLZn_KEvfpPigCLcBGAs/s1600/official.png) no-repeat;margin: 0 10px;}
.content-lagu a{color: #ff7800;}
.content-lagu a:hover{color:#ea872f;}
/* pop playlist */
.popover-toggle{ cursor: pointer; position: relative;}
.popover{ width: 220px;}
.popover.bottom > .arrow::after{ border-bottom-color: #f7f7f7;}
.popover-content{ padding: 0 !important;}
.popover .popover-title{ padding: 8px 12px;}
.popover .popover-title .close{ height: auto; line-height: 12px;}
.pp-mine-playlist .btn-mpt{ display: none !important;}
.pp-mine-playlist ul{ max-height: 200px; border: none; position: relative; overflow: auto !important;}
.pp-mine-playlist ul li{ padding: 7px 12px; cursor: pointer;}
.pp-mine-playlist ul li .mpt-name{ padding-right: 40px; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.pp-mine-playlist ul li:hover .mpt-name, .pp-mine-playlist ul li.active .mpt-name{ color: #FF7800;}
.pp-mine-playlist ul li .badge{ position: absolute; top: 7px; right: 6px; background: #fff; border: 1px solid #eee; color: #aaa; font-weight: 300; border-radius: 3px;}
.pp-mine-playlist ul li.active .badge{ border-color: #FF7800; background: #FF7800; color: #fff;}
.pp-mine-playlist .mpt-creat{ background: #eee; padding: 10px 12px; padding-right: 72px; border-radius: 0 0 5px 5px; font-size: 13px; margin-top: 0;}
.pp-mine-playlist .mpt-creat .btn{ width: 50px; top: 10px; right: 12px; padding: 7px 10px !important;}
.pp-mine-playlist .mpt-creat .form-control{ border: none; font-size: 13px; height: 32px; border-radius: 3px; border: 1px solid #ddd; box-shadow: none !important;}
.play-tools .popover{ width: 180px;}
.play-tools .popover-content{ padding: 15px !important;}
.play-tools .popover.bottom > .arrow::after{ border-bottom-color: #fff;}
/*paginate*/
span.inactive {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .7em;
    padding: 2px 6px 2px 6px;
    color: #1d1d1d;
    cursor: default;
}
a.current {
    background: #ff7800;
    padding: 5px 10px 5px 10px;
    cursor: default;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-radius: 3px;
}
a.paginate {
    padding: 5px 9px 5px 9px;
    text-decoration: none;
    color: #1d1d1d;
    line-height: 31px;
}
a.paginate:hover {
    background-color: #ff7800;
    color: #fff;
    border-radius: 3px;
}
/* footer */
footer{ background: #1b1b1b; color: #ccc; font-size: 13px;}
footer a{ color: #ccc;}
footer .xline{ width: 250px; position: absolute; top: 0; left: 30px;}
footer .xcontainer{ padding-top: 30px; padding-bottom: 30px; position: relative;}
footer #logo-footer{ float: left;}
footer #logo-footer img{ width: 70px; height: auto;}
footer .footer-info{ padding-left: 80px; width: 700px;}
footer .title{ font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 2px;}
footer .copyright{ font-size: 13px; margin-bottom: 0px;}
footer .disclaimer{ font-size: 12px; opacity: 0.6;}
footer .footer-right .footer-menu{ margin-top: 2px; margin-bottom: 15px;}
footer .footer-right .footer-menu a{ margin: 0 7px;}
footer .footer-right .footer-menu a:last-of-type{ margin-right: 0;}
footer .fa-my{
    font-size: 15px;
    border-radius: 64px;
    background: #454545;
    width: 28px;
    height: 28px;
    text-align: center;
    padding-top: 7px;
}
/* psbar */
/* loading */
.loading-wrap{ width: 100%; height: 100%; min-height: 60px; position: relative;}
.loading{ width: 40px; height: 10px; margin: 20px auto; position: relative;} .loading span{ display: inline-block; width: 5px; height: 100%; border-radius: 3px; background: #FFB700; -webkit-animation: load 1s ease infinite; } @-webkit-keyframes load{ 0%,100%{ height: 10px; background: #FFB700; } 50%{ height: 40px; margin: -15px 0; background: #ff7800; } } .loading span:nth-child(2){ -webkit-animation-delay:0.1s; } .loading span:nth-child(3){ -webkit-animation-delay:0.3s; } .loading span:nth-child(4){ -webkit-animation-delay:0.5s; } .loading span:nth-child(5){ -webkit-animation-delay:0.7s; }
.loading:before, .loading:after{ content: ""; display: inline-block; position: absolute; top: 7px; left: -7px; width: 5px; height: 5px; background: #FFB700; border-radius: 3px;}
.loading:after{ left: auto; right: -7px;}
.loading .loading-text{ position: absolute; bottom: -50px; width: 100px; text-align: center; left: 50%; margin-left: -50px; font-size: 10px; color: #aaa; letter-spacing: 0.5px;}
.loading-absolute{ position: absolute; top: 50%; margin-top: -20px; left: 50%; margin-left: -20px;}
.ps-container .ps-scrollbar-y-rail{ opacity: 1 !important; background: none !important; margin-top: 5px; margin-bottom: 5px; right: 5px !important;}
.ps-container .ps-scrollbar-y-rail:hover{ background: none !important;}
.ps-container .ps-scrollbar-y-rail .ps-scrollbar-y{ opacity: 1 !important; background: #444 !important; border-radius: 0 !important;}
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { opacity: 1 !important; background: #444 !important;}
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {opacity: 1 !important; background: none !important; }
.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { opacity: 1 !important; background: #999 !important;}
#xbar .ps-container > .ps-scrollbar-y-rail{ margin-top: 38px; margin-bottom: 5px; opacity: 0 !important;}
#xbar .ps-container > .ps-scrollbar-x-rail{ opacity: 0 !important;}
#slider1{ width: 100%; background: #333; height: 2px; position: relative; overflow: visible !important;}
#slider1 .slider_knob{ width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important; position: absolute !important; top: 50%; margin-top: -9px; margin-left: -9px;}
#slider1 .follow_bar{ height: 2px !important; position: absolute !important; display: inline-block !important; background: #FF7800 !important;}
.faq-div{ margin-top: -10px;}
.faq-div h3{ font-size: 1.1em; font-weight: 400; display: block; margin: 0; padding: 0 10px 0 52px; position: relative; height: 34px; display: table-cell; vertical-align: middle;}
.faq-div a h3{ color: #333;}
.faq-div span{ height: 34px; width: 34px; line-height: 32px; text-align: center; font-weight: bold; background: #fff; color: #ff7800; position: absolute; top: 10px; left: -1px; border-radius: 3px; border: 1px solid #ff7800; border-radius: 50%;}
.faq-div ul li:hover span{ background: #ff7800; color: #fff;}
.faq-div p{ padding-left: 52px;}
.faq-div ul{ list-style: none; padding: 0;}
.faq-div ul li{ padding: 10px 0; font-size: 1em; box-shadow: none; border-bottom: 1px solid #eee; margin-top: 0 !important; position: relative; min-height: 54px;}
.faq-div ul li p{ font-size: 1.1em;}
.faq-div ul li p img{ max-width: 600px; width: 100%; margin: 20px 0; display: inline-block;}
.pds-content{ padding: 15px;}
.modal-main .modal-header{ padding: 15px 20px 0; text-align: center; border-bottom: none;}
.modal-report .modal-dialog{ width: 440px;}
.modal-report .modal-dialog .modal-body{ padding: 20px 25px 25px;}
.modal-report .modal-dialog textarea{ max-width: 100%; min-width: 100%;}
.sort-cat{ display: block; border-left: 2px solid #aaa; background: #F6F8FA; padding: 8px 15px;}
.sort-cat span{ display: inline-block; margin-right: 20px;}
.sort-cat a{ display: inline-block; margin-right: 20px; color: #888;}
.sort-cat a.active{ color: #ff7800;}
.main-contact .ic-contact-form{ width: 100%; max-width: 600px; margin: 30px 0 !important;}
.main-contact .ic-contact-form .form-control{ box-shadow: none; background: #f2f4f6; border-color: #f2f4f6; border-radius: 2px;}
.main-contact .ic-contact-form .form-control:focus{ border-color: #70AFE6;}
.main-contact .ic-contact-form textarea{ resize: none; height: 250px;}
.main-contact .ic-contact-form .block-btn{ margin-top: 40px !important;}
.item-edit{ margin-top: 5px;}
.item-edit .btn{ padding: 2px 5px; font-size: 10px; text-transform: none; box-shadow: none;}
@media screen and (max-width:1249px){
    .container{ width: 1170px;}
    #main .main-content{ width: 790px;}
    #search{ width: 220px;}
    .mp-sound .mps-title{ margin-left: 0;}
}
@media screen and (max-width:1199px){
    .container{ width: 970px;}
    body{ background: #fff;}
    #headline{ display: none;}
    #slider{ width: 100%; float: none;}
    header.header-home .hh-bottom, header.header-home .hh-top{ margin-right: 0; position: relative;}
    header.header-home .hh-bottom{ padding-top: 0; height: auto; font-size: 0; overflow: hidden;}
    header .hh-top{ padding-left: 40px !important; height: 50px !important; position: relative !important;}
    header.header-home #logo .xline{ display: none;}
    header.header-home .container::before{ display: none;}
    header.header-home #logo{ padding: 5px 15px; margin-right: 10px;}
    header .trick-menu{ display: none;}
    header #logo img{ height: 40px;    margin-right: 0;}
    header #logo span.sitename{ font-size: 16px;}
    header #logo{padding: 5px 8px;}
    /*    header #logo:before{ content: "\e934"; font-family: 'music123' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-size: 90px;
                             position: absolute; top: -20px; left: -15px;}*/
    header #m-menu, header #m-search{ display: inline-block; position: absolute; top: 7px; cursor: pointer; width: 36px; height: 36px; text-align: center; line-height: 36px; font-size: 16px; background: none !important; border-radius: 3px; color: #fff; left: 0; z-index: 4;}
    header #m-menu.active{ background: rgba(0,0,0,0.1) !important;}
    header #m-menu{ font-size: 27px;}
    header #m-search{ left: auto; right: -10px;}
    header #m-search.active{ right: 5px; z-index: 10;}
    header #m-search.active:before{ content: "Close"; font-size: 14px; font-weight: 300;}
    header #m-search.active i{ display: none;}
    header #header-login.guest a, header #my-music{ width: 36px; height: 36px; text-align: center; font-size: 0; padding: 0; line-height: 36px; margin-top: 5px; background: none !important; color: #fff; border-radius: 3px;}
    header #header-login.guest a i{ margin-left: 0; line-height: 36px;}
    header #header-login.guest a i:before{ content: "\e959" !important; font-size: 20px;}
    header #my-music{ position: absolute; top: 5px; margin-top: 0; right: 80px; background: none !important; color: #fff;}
    header #my-music i{ margin-right: 0; line-height: 36px; font-size: 16px;}
    header #my-music i:before{ content: "\e92a";}
    .logged{ margin: 10px 0; margin-right: -5px;}
    .logged .avatar{ margin-left: 0; margin-top: 3px;}
    .logged .avatar img{ width: 24px; height: 24px;}
    #search .search-suggest{ width: 100%;}
    #menu, #search{ display: none;}
    #menu.active, #search.active{ display: block;}
    #menu.active{ position: absolute; top: 50px; left: 0; right: 0; z-index: 9; background: #1b1b1b; margin: 0;}
    #menu ul.top-menu li{ float: none; width: 100%; border-bottom: 1px solid #333;}
    #menu ul.top-menu li a{ height: 36px; line-height: 36px; display: block; color: #FF7800;}
    #menu ul.top-menu li:hover a{ background: rgba(255,255,255,0.05);}
    #menu .sub-container{ display: block !important; position: relative; top: auto; left: auto; box-shadow: none; background: none; width: 100% !important;}
    #menu .sub-container ul.sub-menu{ margin: 0 15px 15px;}
    #menu .sub-container ul.sub-menu li{ width: 48% !important; margin: 0 2% 0 0 !important; border-bottom: none; background: none !important;}
    #menu .sub-container ul.sub-menu li a{ color: #ddd; font-size: 12px; padding-left: 0; padding-right: 0; background: none !important;}
    #menu .sub-container ul.sub-menu li a:before{ content: "-"; margin-right: 10px; display: inline; color: #ccc; font-weight: 300;}
    #menu .sub-container ul.sub-menu li a:hover{ background: none !important; color: #FF7800;}
    #menu .sub-container ul.sub-menu{ padding: 0}
    #search{ position: absolute; left: 0px; top: 0px; right: 0px; width: auto; margin: 0; z-index: 9; background: #FF7800; padding: 10px 50px 10px 10px;}
    #slider{ width: 100%; padding-bottom: 38%; height: auto;}
    #slider .swiper-wrapper{ position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
    #slider .swiper-pagination{ display: none;}
    #slider .slide-caption{ font-size: 14px;}
    #main .sidebar{ display: none;}
    #main .main-content{ width: 100%;}
    #pop-login .modal-dialog{ width: 600px; max-width: 95%;}
    #pop-login .modal-content{ padding-left: 0;}
    #pop-login .modal-content .login-cover{ display: none;}
    footer .footer-left{ float: none !important; width: 100%; display: block;}
    footer #logo-footer{ display: none;}
    footer .footer-info{ padding-left: 0; width: 100%; text-align: center;}
    footer .footer-right{ float:none !important; width: 100%; text-align: center;}
    footer .footer-right .footer-social a{ margin: 5px !important;}
    footer .title{ display: none;}
    footer .xline{ display: none;}
    .mp-sound{ padding-left: 80px;}
    .dashboard-about .da-recent .dar-5{ display: none;}
    .mmm-wrap .mmm-left{ background: #111; width: 70px; z-index: 5;}
    .mmm-wrap .mmm-left ul{ display: none;}
    .mmm-wrap .mmm-left ul.active{ display: block; position: absolute; left: 70px; top: 0px; width: 250px; height: 100%; background: #0f0f0f; z-index: 10;}
    .mmm-wrap .mmm-center{ margin-left: 70px;}
    .mmm-wrap .mmm-left ul li:first-of-type a{ padding-top: 14px;}
    .mmm-wrap.active:before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(22,22,22,0.9); z-index: 4;}
    #m-playlist{ display: inline-block; font-size: 11px; text-align: center; display: block; padding: 3px 5px; margin: 10px; cursor: pointer;}
    #m-playlist i{ font-size: 24px; color: #FF7800;}
    #m-playlist.active{ font-size: 0;}
    #m-playlist.active:after{ content: "Close Playlist"; font-size: 11px; margin-top: 2px;}
    #m-playlist.active i:before{ content: "\e909"; font-size: 26px;}
    #xbar{ display: none !important;}
}
@media screen and (max-width: 991px){
    .container{ width: 100%;}
    .xcontainer{ padding-left: 10px; padding-right: 10px;}
    header.header-home .hh-bottom{ margin-left: -10px; margin-right: -10px; padding-left: 0px; padding-right: 0px}
    #menu.active{ left: -15px; right: -15px;}
    .mp-sound{ padding-left: 30px;}
    .artist-about, .dashboard-about{ margin-left: -15px; margin-right: -15px;}
    .mmm-center .mp-sound .mps-title{ display: none;}
    .dashboard-menu{ margin: 0 -10px; padding: 0 10px;}
    .main-404{ padding-bottom: 70%;}
}
@media screen and (max-width: 799px){
    #slider .slide-caption{ display: none;}
    #slider .swiper-slide::before{ display: none;}
    .movies-list .item:nth-child(7), .movies-list .item:nth-child(8){ display: none;}
    .movies-list .item{ width: 15.16%; padding-bottom: 23%;}
    .mp-sound .mps-title{ display: none;}
    .dashboard-about .da-recent .dar-4{ display: none;}
    .mmm-wrap .mmm-center .mp-sound .mps-list li a{ width: 56px}
    .mmm-center .mmmc-lyric{ display: none;}
    .mmm-center .mmmc-list{ width: 100%;}
    .mmm-wrap .mmm-center{ margin-top: 0;}
    .mmm-wrap .mmm-center .mmmc-player{ position: relative; top: auto; left: auto;}
    .mmm-center .mmmc-list{ position: relative; height: 400px;}
    .artist-cate-list .item{ width: 23.5%;}
    .news-view .article iframe{ height: 260px;}
    .main-billboard-list .mbb-ul{ margin: 20px 0;}
    .main-billboard-list .mbb-ul .mu-li{ width: 100%; margin: 0 0 20px; float: none;}
    .main-billboard-list .mbb-ul .mu-li:before{ display: none;}
    .main-404{ padding-bottom: 100%;}
    .modal-dialog{ margin: 10px auto;}
}
@media screen and (max-width: 640px){
    .album-list-small .item,.album-list-small_full .item{ width: 23.5%;}
    .home-album-list .album-list-small .item, .home-album-list .album-list-small_full .item{ width: 23.5%; margin: 0 0.75% 2%;}
    .home-album-list .album-list-small .item:nth-child(13),.home-album-list .album-list-small .item:nth-child(14),.home-album-list .album-list-small .item:nth-child(15){ display: none;}
    .home-playlist-list .album-list-small .item:nth-child(5){ display: none;}
    .home-artist-list .artist-list .item{ width: 24.5% !important; margin: 0 0.25% 0.5% !important; position: relative !important;}
    .artist-list.focus-3 .item:nth-child(1) .thumb:after{ font-size: 30px !important;}
    .home-artist-list .artist-list .item:nth-child(9){ display: none;}
    .xtitle{ position: relative; height: auto;}
    .xtitle h2, .xtitle .xtitle-name{ font-size: 18px; display: block;}
    .xtitle .nav-tabs::before{ display: none;}
    .xtitle .nav-tabs{ margin-left: 0px; margin-top: 5px; display: block; width: 100%; overflow: hidden;}
    .xtitle .more{ position: absolute; float: none; right: 0; top: 5px;}
    .xtitle .nav-tabs > li > a{ background: rgba(0,0,0,0.05) !important; border-radius: 0 !important; padding: 5px 15px !important; margin-right: 5px !important; font-size: 12px;}
    .xtitle .nav-tabs > li.active > a{ background: #ff7800 !important; color: #fff !important;}
    .xtitle .nav-tabs > li.active > a::before{ display: none;}
    .xtitlebg h2, .xtitlebg .xtitle-name{ float: left !important;}
    .xtitlebg .more{ position: relative !important; float: right !important; top: auto !important;}
    .sr-artist-list .artist-cate-list .item{ width: 31.83%;}
    header #logo h1,header #logo p{ display: none;}
    .main-home h1{display: block;}
    header #logo span.sitename{ line-height: 34px; display: none;}
    header .hh-top{ padding-left: 0 !important;}
    header #m-menu{ left: 70px; padding: 4px; font-size: 0; width: auto;}
    header #m-menu i{ font-size: 27px;}
    header #m-menu i:before{ float: left;font-size: 14px;margin-top: 6px;margin-right: 3px;}
    header #m-menu i:after{ content: "Menu"; font-size: 14px; float: left; font-family: "roboto"; line-height: 28px; margin-left: 3px; margin-right: 3px;}
    .home-songs-list .song-list .item{ width: 98.5%;}
    #search .search-suggest{ top: 40px; left: -20px; right: -60px; width: auto; border-radius: 0;}
    .mp-sound .mps-list li a{ width: 56px;}
    .mp-sound .mps-list li a span{ font-size: 11px;}
    .mp-sound{ padding-left: 20px; padding-right: 20px;}
    .main-play .xtitle{ font-size: 16px;}
    .main-play .xtitle .xtitle-name{ display: inline;}
    .play-album-info .thumb{ width: 50px; height: 50px;}
    .play-album-info .info{ padding-left: 60px;}
    .play-lyric{ padding: 15px;}
    .artist-block .item .item-caption p.desc{ display: none;}
    .artist-block .item .thumb{ width: 125px;}
    .artist-block .item .item-caption{ padding-left: 150px; min-height: inherit;}
    .play-list .item .item-caption h3, .song-cate-list .item .item-caption .singer{ font-size: 12px;}
    .play-list .item .item-caption{ padding-right: 120px !important;}
    .artist-about .thumb{ width: 110px; height: 110px;}
    .artist-about .info{ padding-left: 125px;}
    .artist-about h1{ font-size: 20px;}
    .artist-about, .dashboard-about{ padding: 15px 15px 0;}
    #cover{ display: none;}
    .artist-about::before{ background: #333;}
    .artist-about .info .about{ font-size: 12px; max-height: 54px;}
    .da-recent, .da-signal{ display: none;}
    .dashboard-about{ text-align: center; height: 180px;}
    .dashboard-about .avatar{ left: 50%;}
    .dashboard-about .da-name{ right: 50%; left: auto; padding-right: 15px; top: 52px;}
    .mmm-center .mmmc-lyric{ display: none;}
    .news-list-ul .nlu-item{ padding: 12px 0;}
    .news-list-ul .nlu-item .thumb{ width: 200px; max-height: 140px;}
    .news-list-ul .nlu-item .info{ padding-left: 220px;}
    .news-list-ul .nlu-item .info h3{ font-size: 16px;}
    .news-list-ul .nlu-item .info .desc{ font-size: 12px;}
    .news-list-ul .nlu-item-right{ padding: 12px;}
    .news-list-ul .nlu-item-right .info{ padding-left: 0; padding-right: 220px;}
    .news-view .article iframe{ height: 200px;}
    .news-view .breadcrumb .active{ display: none;}
    .play-album-list .album-cate-list div.item:nth-child(6){ display: inline-block;}
    .play-album-list .album-cate-list div.item{ width: 31.8%}
    .album-hot-single .item{ padding: 15px;}
    .album-hot-single .item .thumb{ position: relative; top: auto; left: auto; right: auto; bottom: auto; float: left; width: 25%;}
    .album-hot-single .item .item-caption{ padding: 0 0 0 28%; text-align: left; min-height: inherit;}
    .album-hot-single .item .item-caption p.desc{ font-size: 12px; max-height: 52px;}
    /* mobile play */
    #xplayer .xplayer-container .pc-random, #xplayer .xplayer-container .pc-auto, #xplayer .xplayer-container .pc-repeat, #xplayer .xplayer-container .pc-timer{ display: none;}
    #xplayer .xplayer-container .pc-volume .pcv-value{ width: 50px;}
}
@media screen and (max-width: 550px){
    .movies-list .item{ width: 31.83%; padding-bottom: 45%;}
    .home-album-list .album-list-small .item, .album-list .item, .home-album-list .album-list-small_full .item{ width: 31.83%;}
    .home-playlist-list .album-list-small .item{ width: 48.5%; margin-bottom: 15px;}
    .album-large-cate-list .item{ width: 48.5%;}
    .mp-sound .mps-list li{ width: 31.33%; margin: 1%;}
    .mp-sound .mps-list li a{ padding: 5px; width: 100%;}
    .mp-sound .mps-list li a span{ display: inline; margin-left: 10px;}
    .mp-sound .mps-list li a i{ vertical-align: middle;}
    .mp-sound .mps-list{ float: none; margin-right: 0; width: 100%; overflow: hidden; padding: 10px;}
    .mp-sound{ padding-left: 0; padding-right: 0; padding-top: 25px; padding-bottom: 20px;}
    .mp-sound .mps-balance{ margin-left: 15px; margin-right: 15px; float: none; margin-top: 0;}
    .mp-sound .mps-balance .mpsb-title{ display: inline-block; margin-bottom: 0; float: left; margin-right: 20px;}
    .mp-sound .mps-balance .balance-sound{ float: left; font-size: 0;}
    .mp-sound .mps-balance .balance-sound span{ width: 16px; height: 16px; margin-right: 0; margin-left: 8px;}
    .play-album-list .item{ width: 31.83%;}
    .artist-song-list .item-listened{ display: none;}
    .song-cate-list .item .item-tools, .song-cate-list .item .item-action, .cate-filter .cate-filter-content .cfc-genre{ display: none !important;}
    .dashboard-playlist-list-edit .song-cate-list .item .item-tools{ display: inline-block !important;}
    .song-cate-list .item .item-caption{ padding-right: 0 !important;}
    .song-cate-list .item .item-caption .singer a{ font-size: 12px;}
    .cate-filter .cate-filter-content .cfc-top li{ border-bottom: none !important; padding-bottom: 0;}
    .cate-filter .cate-filter-content{ padding: 10px 20px;}
    .play-list .item{ padding-left: 10px; padding-right: 10px;}
    .play-list .item .item-position{ left: 15px; top: 13px;}
    /*.play-list .item .item-caption{ padding-left: 30px;}*/
    .pai-social{ display: none;}
    /*.play-tools .pull-right{ display: none;}*/
    .play-tools .btn{ margin-right: 4px; padding: 5px 6px; margin-bottom: 5px;}
    .play-tools .btn:last-of-type{ margin-right: 0;}
    .play-social{ display: none;}
    .play-lyric .play-lyric-content{ font-size: 12px; font-weight: 400;}
    .play-lyric .play-lyric-content .lyric-name{ font-size: 14px;}
    #pop-login h6{ font-size: 20px; line-height: 28px;}
    #pop-login .modal-content{ min-height: 300px;}
    .song-thumb-list.both-list .item-tools{ display: none !important;}
    .song-thumb-list.both-list .item-action{ display: none !important;}
    .song-thumb-list.both-list .item .item-caption{ padding-right: 0 !important;}
    .mmm-wrap .mmm-center .mp-sound .mps-list li a{ width: 100%;}
    .mmm-wrap .mmm-left{ width: 100%; position: relative; top: auto; left: auto;}
    .mmm-wrap .mmm-center{ margin-left: 0;}
    #m-playlist{ margin: 0; padding: 8px 10px; font-size: 13px;}
    #m-playlist i{ font-size: 26px; vertical-align: middle; margin-right: 5px;}
    #m-playlist.active i:before{ font-size: 26px;}
    .mmm-wrap .mmm-left ul.active{ top: 50px; width: 100%; left: 0; top: 40px; right: 0; height: 300px; max-height: none;}
    #m-playlist.active:after{ display: none;}
    .mmm-wrap .mmm-left ul li a.edit{ padding-top: 3px; top: 13px !important;}
    .mmm-center .mmmc-list{ border-right: none;}
    .mmm-wrap .mmm-left ul.active{ background: #222;}
    .news-list-ul .nlu-item .thumb{ float: right;}
    .news-list-ul .nlu-item .info{ padding-left: 0; padding-right: 220px;}
    .news-list-ul .nlu-item-right{ padding: 12px 0; border: none; border-bottom: 1px solid #eee;}
    .search-artist-list .artist-cate-list .item{ width: 31.83%;}
    .main-404-text{ font-size: 1em; left: 10%; width: 80%;}
    .main-404{ padding-bottom: 150%;}
}
@media screen and (max-width: 520px){
    .related-news .rnu-item{ width: 48%; font-size: 0;}
    .related-news .rnu-item h4{ margin-bottom: 15px; font-size: 13px;}
    .home-songs-2col .home-songs-list{ width: 100%; float: none; padding: 0 !important; margin-bottom: 20px;}
    .home-songs-2col .home-songs-list:nth-child(1):before{ display: none;}
    .mbb-tabs .pull-left{ float: none !important; margin: 0 -0.5% 10px; display: block;}
    .mbb-tabs .pull-left .btn{ width: 24%; margin: 0 0.5%; padding: 10px 0; font-size: 12px;}
    .mbb-tabs .pull-right{ display: block; float: none !important;}
    .mbb-tabs .pull-right .btn{ width: 100%; border: 1px solid #ddd !important; background: #fff !important;}
    .top-songs .billboard-cate-list .item-big .stats{ display: none;}
    .top-songs .billboard-cate-list .item-big .item-tools{ display: none;}
    .xtitlehome h2, .xtitlehome .xtitle-name{ padding-left: 10px;}
}
@media screen and (max-width: 480px){
    .play-album-info .thumb{ display: none;}
    .play-album-info .info{ padding-left: 0;}
    .ple-wrap .plew-left{ width: 160px; float: none; margin-bottom: 20px;}
    .ple-wrap .plew-right{ padding-left: 0px;}
    .ple-wrap .plew-right .block-btn .btn-default{ display: none;}
    .artist-cate-list .item{ width: 31.83%;}
    .news-view .article iframe{ height: 160px;}
    .play-album-list .album-cate-list div.item{ width: 48.5%}
    #main .main-content {float: none;}
    #main .sidebar {display: block;width: 100%;float: none;}
    .sb-follow-content{margin-top: 23px}
    .nav-tabs.nav-justified>li{float: left !important;width: 33.333333%;}
    .xtabs li.active a:before{bottom:-4px}
    .billboard-list .item {width: 98.6%;}
}
@media screen and (max-width: 479px){
    .album-list-small .item, .album-list-small_full .item{ width: 48.5%;}
    .home-artist-list .artist-list .item{ width: 32.83% !important;}
    .home-artist-list .artist-list .item:nth-child(7), .home-artist-list .artist-list .item:nth-child(8){ display: none;}
    #menu .sub-container ul.sub-menu li{ width: 100% !important; margin: 0 !important;}
    .artist-block .item .thumb{ display: none;}
    .artist-block .item .item-caption{ padding-left: 20px;}
    .artist-about h1{ margin-right: 0; padding-bottom: 0; margin-bottom: 10px; font-size: 16px;}
    .artist-about h1:before{ display: none;}
    .artist-about .info .btn-follow{ margin-left: 0 !important; float: none !important; font-size: 10px; padding: 4px 6px; margin-bottom: 10px;}
    .main-play .xtitle .xtitle-name{ font-size: 16px;}
    .home-album-list .album-list-small .item, .album-list .item, .home-album-list .album-list-small_full .item{ width: 48.5%; margin-bottom: 3%;}
    .home-album-list .album-list-small .item:nth-child(11), .home-album-list .album-list-small .item:nth-child(12){ display: none;}
    #pop-login .modal-content .modal-body{ padding: 20px;}
    #pop-login .login-via{ font-size: 12px; margin-top: 20px;}
    #pop-login .desc{ font-size: 13px; font-weight: 400; margin-bottom: 15px;}
    .cate-filter .cate-filter-content{ padding: 10px 15px;}
    .cate-filter .cate-filter-content .cfc-top li{ margin-right: 20px;}
    .cate-filter .cate-filter-content .cfc-top li:last-of-type{ margin-right: 0;}
    .song-cate-list .item .item-caption h3{ font-size: 13px;}
    .song-cate-list .item{ padding: 12px 0;}
    .info-other{ font-size: 12px;}
    .artist-about .info .about, .artist-about .info .about-more{ display: none;}
    .artist-about .artist-menu{ margin-top: 15px;}
    .dashboard-menu ul li{ margin-right: 20px;}
    .dashboard-menu ul li:last-of-type{ margin-right: 0;}
    .dashboard-about .avatar{ left: 60%;}
    .dashboard-about .da-name{ right: 40%;}
    .dashboard-playlist-list-edit .ple-wrap .plew-left{ float: none; margin-bottom: 20px;}
    .dashboard-playlist-list-edit .ple-wrap .plew-right{ padding-left: 0;}
    .news-list-ul .nlu-item .thumb{ width: 100%; max-height: 180px; margin-bottom: 10px;}
    .news-list-ul .nlu-item .info{ padding-right: 0px;}
    .album-hot-single .item .thumb{ position: absolute; top: 0; left: 0; right: 0; width: 100%;}
    .album-hot-single .item .thumb:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(248,231,30,0.7);}
    .album-hot-single .item{ overflow: hidden; padding: 0; width: 100%; min-height: 250px;}
    .album-hot-single .item .item-caption{ padding: 20px; position: relative; z-index: 3;}
    .modal-report .modal-dialog{ width: auto; margin: 10px;}
    .album-hot-single .item{ min-height: auto;}
}
@media screen and (max-width: 360px){
    .artist-cate-list .item{ width: 48.5%;}
}
@media screen and (max-width: 320px){
    .cate-filter .cate-filter-content .cfc-top li{font-size: 12px;}
    .dashboard-menu ul li{ font-size: 12px; margin-right: 15px;}
}
@media screen and (max-height: 700px){
    .xbar-playlist{ display: none;}
    .xbar-listened{ top: 0; height: 100%;}
}