@charset "utf-8";

        @import url("https://fonts.googleapis.com/css2?family=Roboto");

        @font-face {
            font-family: 'la';
            font-display: fallback;
            src: local('la'), url('../images/font/la2.eot?1');
            src: local('la'), url('../images/font/la2.eot?1#iefix') format('embedded-opentype'), url('../images/font/la2.woff2?1') format('woff2'), url('../images/font/la2.woff?1') format('woff'), url('../images/font/la2.ttf?1') format('truetype'), url('../images/font/la2.svg?1#la') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
         :root {
            --width: 748px;
            --bg-color: #fefeff;
            --bg-firm-color: #68c7ce;
            --bg-firm-color-und: rgba(104, 199, 206, 0.5);
            --bg-firm-color-dark: #019799;
            --inactive-color: #9e9e9e;
            --active-color: #ffffff;
            --font-color: #000000;
            --line-color: rgba(104, 199, 206, 0.2);
            --item-padding: 10px;
            --item-height: 70px;
            --item-height-off: calc(70px - (10px * 2));
        }
        
        * {
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
            font-weight: 400;
        }
        
        html,
        body {
            direction: ltr;
            background-color: #fefeff;
            font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
            -webkit-font-smoothing: subpixel-antialiased;
            font-size: 16px;
            line-height: 160%;
            font-weight: 600;
            margin: 0;
            padding: 0;
            top: 0;
            min-width: 320px;
            color: #000000;
        }
        
        html {
            -webkit-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -moz-text-size-adjust: none;
            text-size-adjust: none;
        }
        
        body {
            overflow-y: scroll !important;
        }
        
        strong,
        b,
        h1,
        h2,
        h3 {
            font-weight: 600;
            line-height: 120%;
			word-wrap: break-word;
			word-break: break-all;
        }
        
        h1 {
            font-size: 150%;
        }
        h1 > i {
            font-style: normal;
            color: rgb(0, 0, 0);
            opacity: 0.4;
        }
        
        a {
            text-decoration: none;
            transition: all .3s ease 0s;
        }
        
        a:link,
        a:hover,
        a:active,
        a:visited {
            color: #019799;
            
            border-bottom: 1px solid rgba(104, 199, 206, 0.3);
        }
        
        a:hover {
            /*color: #68c7ce;*/
            color: #126f71;
            border-bottom: 1px solid rgba(1, 151, 153, 0.7);
        }
        a.rbt_btn {
            border-bottom:none !important;
        }
        
        #head {
            display: block;
            width: 100%;
            height: 70px;
            padding: 10px 0;
            background: #68c7ce;
        }
        
        .inhead {
            display: table;
            overflow: hidden;
            width: 100%;
            max-width: 748px;
            margin: 0 auto;
            padding: 0 10px;
        }
        
        .inhead>div {
            display: table-row;
        }
        
        div.logo {
            display: table-cell;
            width: 170px;
            min-width: 170px;
        }
        
        a.logo {
            display: block;
            float: left;
            height: 50px;
            background-image: url("/images/logo-white.png");
            background-repeat: no-repeat;
            background-position: 0 10px;
            background-size: 30px;
        }
        
        .logo:hover {
            border: none;
        }
        
        .logo img {
            display: block;
            float: left;
            visibility: hidden;
            width: 30px;
            height: 30px;
            margin: 10px 0;
        }
        
        .logo:link,
        .logo:visited,
        .logo:active,
        .logo:hover {
            color: #ffffff !important;
            text-decoration: none;
        }
        
        .logo span {
            /*display: block;*/
            float: left;
            font-size: 140%;
            margin-left: 10px;
            margin-right: 10px;
            line-height: 50px;
            vertical-align: middle;
        }
        
        form.search {
            display: table-cell;
            position: relative;
            margin: 0;
            vertical-align: middle;
            width: 100%;
        }
        
        form.search * {
            font-size: 14px;
        }
        
        form.search input {
            font-size: 16px;
            width: 100%;
            max-width: 400px;
            float: right;
            outline: none;
            height: 40px;
            margin: 0;
            padding: 10px;
            padding-left: 25px;
            padding-right: 50px;
            border: none;
            background: #f1feff;
            color: #000000;
            border-bottom: 1px solid #ffffff;
            border-radius: 10px;
            transition: all 0.3s ease 0s;
            -webkit-transition: all 0.3s ease 0s;
            -moz-transition: all 0.3s ease 0s;
            -ms-transition: all 0.3s ease 0s;
            -o-transition: all 0.3s ease 0s;
            -webkit-appearance: none;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
        }
        
        input[type="search"]::-webkit-input-placeholder {
            color: #9e9e9e;
            user-select: none;
        }
        
        input[type="search"]:-ms-input-placeholder {
            color: #9e9e9e;
            user-select: none;
        }
        
        input[type="search"]::-ms-input-placeholder {
            color: #9e9e9e;
            user-select: none;
        }
        
        input[type="search"]::placeholder {
            color: #9e9e9e;
            user-select: none;
        }
        
        input[type="search"]:focus::-webkit-input-placeholder {
            color: #9e9e9e;
        }
        
        input[type="search"]:focus:-ms-input-placeholder {
            color: #9e9e9e;
        }
        
        input[type="search"]:focus::-ms-input-placeholder {
            color: #9e9e9e;
        }
        
        input[type="search"]:focus::placeholder {
            color: #9e9e9e;
        }
        
        form.search input:focus {
            border-radius: 10px;
            outline: none;
            background: #ffffff;
            color: #000000;
            border-bottom: 1px solid #ffffff;
        }
        
        form.search button {
            outline: none;
            padding: 0;
            border: none;
            font-family: 'la';
            font-weight: normal;
            color: #68c7ce;
            position: absolute;
            display: block;
            background: transparent;
            width: 20px;
            height: 20px;
            font-size: 20px;
            top: 15px;
            left: calc(100% - 50px + 10px);
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease 0s;
            -webkit-transition: all 0.3s ease 0s;
            -moz-transition: all 0.3s ease 0s;
            -ms-transition: all 0.3s ease 0s;
            -o-transition: all 0.3s ease 0s;
            text-indent: -200px;
            overflow: hidden;
        }
        
        form.search button::after {
            display: block;
            position: absolute;
            content: "\e8b3";
            width: 20px;
            height: 20px;
            font-size: 20px;
            top: 0;
            left: 0;
            text-indent: 0;
        }
        
        form.search button:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
        }
        
        form.search button:active {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
            -moz-transform: scale(1.0);
            -ms-transform: scale(1.0);
            -o-transform: scale(1.0);
        }
        
        form.search input:focus+button {
            color: #68c7ce;
        }
        
        #nprogress {
            pointer-events: none;
        }
        
        #nprogress .bar {
            background: #019799;
            position: absolute;
            z-index: 1031;
            top: 70px;
            left: 0;
            width: 100%;
            height: 5px;
        }
        
        #nprogress .peg {
            display: block;
            position: absolute;
            right: 0px;
            width: 100px;
            height: 100%;
            /*box-shadow: 0 0 15px #019799, 0 0 10px #019799, 0 0 10px #019799, 0 0 5px #019799;*/
            opacity: 1.0;
            transform: rotate(3deg) translate(0px, -4px);
            -webkit-transform: rotate(3deg) translate(0px, -4px);
            -moz-transform: rotate(3deg) translate(0px, -4px);
            -ms-transform: rotate(3deg) translate(0px, -4px);
            -o-transform: rotate(3deg) translate(0px, -4px);
        }
        
        #onmain {
            display: block;
            max-width: 748px;
            margin: 0 auto 0 auto;
            padding: 0 10px;
            position: relative;
            pa
        }
        #onmain  .ya-share2 {
            float:right;
        }
        #main {
            display: block;
            max-width: 748px;
            margin: 0 auto;
            padding: 0 10px;
            position: relative;
        }
        
        .nav {
            display: block;
            height: 40px;
            line-height: 40px;
            color: #9e9e9e;
            border-bottom: 1px solid rgba(104, 199, 206, 0.2);
            white-space: nowrap;
            overflow: hidden;
        }
        
        .nav i {
            font-family: 'la';
            font-style: normal;
            color: #68c7ce;
            margin-right: 10px;
            user-select: none;
        }
        
        .nav i::after {
            font-family: 'la';
            color: #68c7ce;
            content: '\e878';
            font-weight: normal;
        }
        
        .nav>a {
            color: #9e9e9e;
        }
        
        .nav>a:hover {
            color: #68c7ce;
        }
        
        .nav span {
            margin: 0 10px;
        }
        
        #result {
            display: block;
            width: 100%;
            max-width: 748px;
        }
        
        .item {
            display: table;
            table-layout: fixed;
            width: 100%;
            max-width: 748px;
            /*overflow: hidden;*/
            height: 70px;
            /*cursor: pointer;*/
            padding: 10px 0;
            border-top: 1px solid rgba(104, 199, 206, 0.2);
        }
        
        .select {
            background: #68c7ce;
        }
        
        .select-loading {
            background: #68c7ce;
        }
        
        .select-pause {
            background: #68c7ce;
        }
        
        .item:first-child {
            border-color: transparent;
        }
 /*       
        .item:hover+.item {
            border-color: transparent;
        }
        
        .item:hover, */
        .select,
        .select-pause,
        .select-loading {
            padding: 10px;
            width: calc(100% + 10px * 2);
            margin-left: -10px;
            border-color: transparent;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
        }
        
        .select a.play::after,
        .select-loading a.play::after {
            content: "\e88b" !important;
            z-index: 5 !important;
            text-indent: 1px !important;
        }
/*
        .item:hover {
            box-shadow: 0 0 10px rgba(104, 199, 206, 0.4);
        }
*/        
        .item>div {
            display: table-row;
            padding: none;
            overflow: hidden;
        }
        
        .item a.play {
            display: table-cell;
            vertical-align: top;
            overflow: hidden;
            position: relative;
            width: 50px;
            height: 50px;
            min-width: 50px;
            border: none;
            border-radius: 5px;
            background: #68c7ce;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
			cursor: pointer;
        }
        
        .item a.play * {
            display: block;
            width: 50px;
            height: 50px;
        }
        
        .item a.play img {
            position: relative;
            z-index: 3;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }
        
        .item a.play::before {
            display: none;
        }
        .item a.play::before {
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            top: 0;
            left: 0;
			
            content: "";
            z-index: 4;
        }


		/*       
        .item:hover a.play::before {
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            top: 0;
            left: 0;
            background: rgba(104, 199, 206, 0.5);
            content: "";
            z-index: 4;
        }
        
        .item:hover a.down::before {
            display: block;
            position: absolute;
            width: 50px;
            height: 50px;
            top: 0;
            left: 0;
            background: rgba(104, 199, 206, 1);
            content: "";
            z-index: 1;
        }
   */     
        .item a.play:hover::before,
        .item a.down:hover::before {
            background: rgba(34, 225, 239, 0.5);
        }
        
        .item a.play::after {
            display: block;
            position: absolute;
            top: 11px;
            left: 11px;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            -ms-border-radius: 30px;
            -o-border-radius: 30px;
            border: 2px solid transparent;
            color: #ffffff;
            background: rgba(104, 199, 206, 0.6);;
            content: "\f00f";
            font-family: "la";
            font-size: 13px;
            font-weight: bold;
            text-indent: 3px;
            z-index: 5;
        }
        
        .item:hover a.play::after {
            z-index: 5;
        }
        
        .item a.down {
            display: table-cell;
            vertical-align: top;
            overflow: hidden;
            position: relative;
            width: 50px;
            height: 50px;
            min-width: 50px;
            border: none;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            background: #68c7ce;
        }
        
        .item a.down::after {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            /*color: #ddd;*/
            color: #fff;
            content: "\e849";
            font-family: "la";
            font-size: 14px;
            font-weight: normal;
            text-indent: 1px;
            z-index: 2;
        }
        
        .item:hover a.down::after {
            color: #fff;
        }
        
        .item a.down:hover {
            background: rgba(34, 225, 239, 0.5);
            color: #fff;
        }
        
        .item a.down:hover::after {
            color: #fff;
        }
        
        .select a.down::after,
        .select-pause a.down::after,
        .select-loading a.down::after,
        .select:hover a.down::after,
        .select-pause:hover a.down::after,
        .select-loading:hover a.down::after {
            color: #fff;
        }
        
        .item div.title {
            display: table-cell;
            vertical-align: middle;
            height: 50px;
            width: 100%;
            overflow: hidden;
        }
        
        .item .m {
            display: none;
        }
        
        .item .d {
            display: table-cell;
            vertical-align: middle;
            height: 50px;
            width: 50px;
            padding-right: 10px;
            padding-left: 10px;
            color: #9e9e9e;
        }
        
        .item span.title {
            display: block;
            position: relative;
            float: left;
            width: 50%;
            padding-left: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin:0 0 -2px 0;
        }
        
        .item span.title i {
            font-style: normal;
            color: #9e9e9e;
        }
        
        .item span.autor {
            display: block;
            position: relative;
            float: left;
            width: 50%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #9e9e9e;
           
        }
        
        .item span.title::after,
        .item span.autor::after {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 40px;
            background: -moz-linear-gradient(left, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(left, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00fefeff', endColorstr='#fefeff', GradientType=1);
            /* IE6-9 */
        }
        
        .select span.title::after,
        .select span.autor::after,
        .select-pause span.title::after,
        .select-pause span.autor::after,
        .select-loading span.title::after,
        .select-loading span.autor::after {
            background: -moz-linear-gradient(left, rgba(104, 199, 206, 0) 0%, rgba(104, 199, 206, 0.01) 1%, rgba(104, 199, 206, 1) 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(left, rgba(104, 199, 206, 0) 0%, rgba(104, 199, 206, 0.01) 1%, rgba(104, 199, 206, 1) 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, rgba(104, 199, 206, 0) 0%, rgba(104, 199, 206, 0.01) 1%, rgba(104, 199, 206, 1) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0068c7ce', endColorstr='#68c7ce', GradientType=1);
        }
      
        .select span.title,
        .select-pause span.title,
        .select-loading span.title,
        .select span.autor,
        .select-pause span.autor,
        .select-loading span.autor,
        .select span.title i,
        .select-pause span.title i,
        .select-loading span.title i,
       .select span.d,
        .select-pause span.d,
        .select-loading span.d,
        .select span.autor a:link,
        .select-pause span.autor a:link,
        .select-loading span.autor a:link {
            color: #fff;
        }
        
        .select span.autor a:visited,
        .select-pause span.autor a:visited,
        .select-loading span.autor a:visited {
            color: #fff;
        }
        
        .select span.autor a:hover,
        .select-pause span.autor a:hover,
        .select-loading span.autor a:hover {
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        a.sbzv {
            display:block;
            position:absolute;
            left:-50px;
            overflow:visible;
            width:50px;
            height:50px;
            font-style: normal;
            
            cursor: pointer;
            text-decoration:none;
            border: none;
        }
        a.sbzv:hover::after {
            text-decoration:none;
            border: none;
            transform: scale(1.2);
            
        }

        a.sbzv::after {
            display: block;
            position: absolute;
            top: 10px;
            left: 10px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            -ms-border-radius: 30px;
            -o-border-radius: 30px;
            
            color: #ffffff;

            /* Created with https://www.css-gradient.com */
            background: rgba(91, 177, 255, 1.0);
            background: -webkit-linear-gradient(top left, rgba(91, 177, 255, 1.0), rgba(255, 61, 139, 1.0));
            background: -moz-linear-gradient(top left, rgba(91, 177, 255, 1.0), rgba(255, 61, 139, 1.0));
            background: linear-gradient(to bottom right, rgba(91, 177, 255, 1.0), rgba(255, 61, 139, 1.0));


            content: "\f00f";
            font-family: "la";
            font-size: 13px;
            
            font-weight: bold;
            text-indent: 3px;
            z-index: 5;
            text-decoration:none;
            border: none;											
        }
        a.sbzv:hover::after {
            text-decoration:none;
            border: none;
        }

        .pagination {
            display: block;
            height: 70px;
            padding: 10px 5px;
        }
        
        .pagination a {
            display: block;
            float: left;
            width: 40px;
            height: 40px;
            line-height: 34px;
            margin-right: 10px;
            text-align: center;
            border-radius: 20px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            -ms-border-radius: 20px;
            -o-border-radius: 20px;
            border: 3px solid #fff;
        }
        
        .pagination a:hover {
            border: 3px solid #68c7ce;
            background: #68c7ce;
            color: #fff;
        }
        
        .pagination a.this {
            border: 3px solid #68c7ce;
        }
        
        #foot {
            width: 100%;
            max-width: 748px;
            overflow: hidden;
            margin: 0 auto 0 auto;
            border-top: 1px solid rgba(104, 199, 206, 0.2);
        }
        
        #foot div {
            display: block;
            float: left;
            width: 50%;
            min-height: 70px;
            margin: 0 0 0 0;
            padding: 10px 0;
            line-height: 25px;
        }
		#foot p {
            margin: 0 0 70px 0;

		}
        
        #foot .left {
            
        }
        
        #foot .right {
            text-align: right;
        }
        
        #pleer {
            display: block;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 90px;
            padding: 30px 10px 10px 10px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            box-shadow: 0 0 10px rgba(104, 199, 206, 0.2);
            z-index: 10;

        }
        
        #pleer>div {
            display: block;
            position: relative;
            width: 100%;
            max-width: 780px;
            margin: 0 auto;
        }
        
        #pleer div.table {
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        
        #pleer div.row {
            display: table-row;
        }
        
        .progressbar {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            margin-top: -30px;
            width: 100%;
            height: 20px;
            background: #ececec;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
       }
        
        .load {
            display: block;
            width: 70%;
            height: inherit;
            background: #d1d1d1;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;

        }
        
        .progress {
            display: block;
            width: 50%;
            height: inherit;
            background: #68c7ce;
            margin-top: -20px;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
       }
        
        #pleer div.cover,
        #pleer div.title,
        #pleer div.controls,
        #pleer div.sound,
        #pleer div.settings {
            display: table-cell;
            vertical-align: top;
        }
        
        #pleer div.cover {
            width: 50px;
            height: 50px;
            vertical-align: top;
        }
        
        #pleer div.cover img {
            display: inline;
            width: 50px;
            height: 50px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }
        
        #pleer div.title {
            overflow: hidden;
            padding: 0 0 0 20px;
        }
        
        #pleer span.title {
            margin-top: 0px;
            display: block;
            position: relative;
            width: 100%;
            padding-left: 0;
            white-space: nowrap;
            overflow: hidden;
        }
        
        #pleer span.artist {
            margin-top: -1px;
            display: block;
            position: relative;
            width: 100%;
            padding-left: 0;
            white-space: nowrap;
            overflow: hidden;
        }
        /*
        #pleer span.title::after,
        #pleer span.artist::after {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 40px;
            background: -moz-linear-gradient(left, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            background: -webkit-linear-gradient(left, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            background: linear-gradient(to right, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00fefeff', endColorstr='#fefeff', GradientType=1);
        }
        */
        #pleer .controls {
            padding-top: 5px;
            width: 120px;
            word-wrap: none;
            height: 50px;
            min-width: 120px;
        }
        
        #pleer .settings {
            padding-top: 5px;
            width: 120px;
            word-wrap: none;
            height: 50px;
            min-width: 120px;
        }
        
        #pleer .backward,
        #pleer .play,
        #pleer .pause,
        #pleer .forward,
        #pleer .shuffle,
        #pleer .repeat,
        #pleer .download {
            display: block;
            float: left;
            position: relative;
            width: 40px;
            height: 40px;
            font-family: 'la';
            border: none !important;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }
        
        #pleer .backward::after,
        #pleer .forward::after,
        #pleer .shuffle::after,
        #pleer .repeat::after,
        #pleer .download::after {
            display: block;
            position: absolute;
            text-align: center;
            vertical-align: middle;
            font-size: 20px;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-family: 'la';
            cursor: pointer;
            color: #9e9e9e;
            font-weight: normal;
        }
        
        #pleer .play::after,
        #pleer .pause::after {
            display: block;
            position: absolute;
            text-align: center;
            vertical-align: middle;
            font-size: 20px;
            top: 0;
            left: 0;
            width: 34px;
            height: 34px;
            line-height: 34px;
            font-family: 'la';
            cursor: pointer;
            color: #ffffff;
            font-weight: normal;
        }
        
        #pleer .play::after {
            text-indent: 3px;
        }
        
        #pleer .backward::after {
            content: "\e88d";
        }
        
        #pleer .play::after,
        #pleer .pause::after {
            border: 3px solid transparent;
            color: #ffffff;
            background: rgba(104, 199, 206, 1);
            border-radius: 25px;
            content: "\f00f";
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -ms-border-radius: 25px;
            -o-border-radius: 25px;
            transition: all 0.2s ease 0s;
            -webkit-transition: all 0.2s ease 0s;
            -moz-transition: all 0.2s ease 0s;
            -ms-transition: all 0.2s ease 0s;
            -o-transition: all 0.2s ease 0s;
      }
        
        #pleer .pause::after {
            content: "\e88b";
        }
        
        #pleer .forward::after {
            content: "\e88a";
        }
        
        #pleer .shuffle::after {
            content: "\e88f";
        }
        
        #pleer .repeat::after {
            content: "\e889";
        }
        
        #pleer .download::after {
            content: "\e849";
            font-size: 15px;
        }
        
        #pleer .controls a:hover,
        #pleer .settings a:hover {
            border: none;
        }
        
        #pleer .controls a:hover::after,
        #pleer .settings a:hover::after {
            color: #68c7ce;
            border: none;
        }
        
        #pleer a.play:hover::after,
        #pleer a.pause:hover::after {
            border: 3px solid transparent;
            background: rgba(104, 199, 206, 1);
            color: #ffffff;
            transform: scale(1.05);
            transition: all 0.2s ease 0s;
            -webkit-transition: all 0.2s ease 0s;
            -moz-transition: all 0.2s ease 0s;
            -ms-transition: all 0.2s ease 0s;
            -o-transition: all 0.2s ease 0s;
        }
        
        #pleer a.mute-max,
        #pleer a.mute-mid,
        #pleer a.mute-min,
        #pleer a.mute-off {
            display: block;
            float: left;
            width: 30px;
            height: 30px;
            position: relative;
        }
        
        #pleer .sound {
            width: 150px;
            padding: 10px 0 0 20px;
        }
        
        #pleer .sound a {
            color: #9e9e9e;
            cursor: pointer;
        }
        
        #pleer .sound a:hover {
            color: #68c7ce;
            border: none;
        }
        
        #pleer .sound a::after {
            font-family: 'la';
            font-size: 20px;
            text-align: left;
            position: absolute;
            width: 30px;
            height: 30px;
            line-height: 30px;
            top: 0;
            left: 0;
            font-weight: normal;
        }
        
        #pleer a.mute-max::after {
            content: "\e808";
        }
        
        #pleer a.mute-mid::after {
            content: "\e80a";
        }
        
        #pleer a.mute-min::after {
            content: "\e809";
        }
        
        #pleer a.mute-off::after {
            content: "\e80b";
        }
        
        #pleer .volume {
            display: block;
            float: left;
            width: 95px;
            height: 50px;
            margin-top: 5px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
       }
        
        #pleer .volume .bar {
            display: block;
            width: 95px;
            height: 20px;
            background: #ececec;
            padding-top: 10px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
       }
        #pleer .volume .progress {
            margin-top: -10px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
       }
        #pleer .volume .amplitude-volume-slider {
            width: 95px;
            height: 20px !important;
            margin-top: 15px;
        }
        
        #pleer .select {
            margin-left: 0 !important;
            background: transparent;
            font-weight: bold !important;
        }
        
        #pleer .select::after {
            color: #68c7ce;
        }
        
        .album_table {
            display: table;
            margin: 20px 0 15px 0;
        }
        
        .album_cover {
            display: table-row;
            width: 100%;
            min-width: 320px;
        }
        
        .album_cover .cover {
            display: table-cell;
            border-collapse: collapse;
            vertical-align: top;
            background-color: #eee;
            border-radius: 20px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            -ms-border-radius: 20px;
            -o-border-radius: 20px;
        }
        
        .album_cover .cover a:hover {
            margin: 0;
            padding: 0;
            border: none;
        }
        
        .album_cover .cover img {
            display: block;
        }
        
        .album_cover .info {
            display: table-cell;
            padding-left: 20px;
        }
        
        .album_cover .info h1 {
            margin: 5px 0 0 0;
        }

        p.foundnum {
            margin-top:-10px;
        }
        
        .album_cover .info h3 {
            margin: 5px 0 10px 0;
        }
        
        .album_cover .info strong {
            color: #9e9e9e;
        }
        
        .album_cover .info span.i {
            color: #9e9e9e;
        }
        
        .album_cover .cover img {}
        
        .onalbums {
            display: block;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            /*height:280px;*/
            margin-bottom: 10px;
        }
        
        .oaright::after {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 100%;
            background: -moz-linear-gradient(left, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(left, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00fefeff', endColorstr='#fefeff', GradientType=1);
            /* IE6-9 */
            pointer-events: none;
        }
        
        .oaleft::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 100%;
            background: -moz-linear-gradient(right, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(right, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to left, rgba(254, 254, 255, 0) 0%, rgba(254, 254, 255, 1) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fefeff', endColorstr='#00fefeff', GradientType=1);
            /* IE6-9 */
            z-index: 2;
            pointer-events: none;
        }
        
        .albums {
            display: block;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            /*height:280px;*/
            margin-bottom: 10px;
            /*scroll-behavior: smooth;*/
        }
        
        .album {
            display: inline-block;
            margin-right: 10px;
            width: 135px;
            vertical-align: top;
        }
        
        .album span {
            width: 100%;
            display: block;
            float: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            color: #9e9e9e;
            margin-top: 5px;
        }
        
        .album a {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .album a.acov {
            display: block;
            margin: 0;
            padding: 0;
            border-bottom: none;
        }
        
        .album a.acov:hover {}
        
        .album a b {
            font-weight: 700;
        }
        
        .album img {
            display: block;
            width: 135px;
            height: 135px;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            transform: scale(0.97);
            -webkit-transform: scale(0.97);
            -moz-transform: scale(0.97);
            -ms-transform: scale(0.97);
            -o-transform: scale(0.97);
        }
        
        .album img:hover {
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
        }
        
        .album img:active {
            transform: scale(0.97);
            -webkit-transform: scale(0.97);
            -moz-transform: scale(0.97);
            -ms-transform: scale(0.97);
            -o-transform: scale(0.97);
        }
        
        .rbt_btn {
            display: table-cell;
            vertical-align: top;
            overflow: hidden;
            position: relative;
            width: 50px;
            height: 50px;
            min-width: 50px;
            border: none;
            background-image: url(/images/phone_icon.svg);
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
        }
        
        .rbt_btn:hover {
            background-image: url(/images/phone_icon-up.svg);
            background-color: #68c7ce;
        }
        
        @media screen and (max-width:10000px) {
            .item span.title {
                margin-top: 3px;
                width: 100% !important;
                padding-left: 10px;
            }
            .item span.autor {
                margin-top: -1px;
                width: 100%;
                padding-left: 10px;
                overflow: hidden;
            }
            #pleer div.title {
                padding: 0 0 0 10px;
            }
        }
        
        @media screen and (max-width:900) {
            .item:hover,
            .select,
            .select-pause,
            .select-loading {
                border-radius: none !important;
                -webkit-border-radius: none !important;
                -moz-border-radius: none !important;
                -ms-border-radius: none !important;
                -o-border-radius: none !important;
            }
        }
        
        @media screen and (max-width:900px) {
            #foot .left {
                padding-left: 10px;
            }
            #foot .right {
                padding-right: 10px;
            }
        }
        
        @media screen and (max-width:870px) {
            .sbzv {
                display:none !important;
            }
        }
        @media screen and (max-width:720px) {
            .album_cover .cover img {
                width: 150px;
                height: 150px;
            }
        }
        
        @media screen and (max-width:640px) {
            .sound {
                display: none !important;
            }
        }

        
        @media screen and (max-width:500px) {
            div.logo {
                width: 40px;
                min-width: 40px;
            }
            div.logo span {
                display: none;
            }
            .settings {
                display: none !important;
            }
            .album_cover .cover img {
                width: 90px;
                height: 90px;
            }
        }

        @media screen and (max-width:370px) {
            body {
                font-size: 12px !important;
            }
        }