/* Ilya leoshko (c) 2017 */

/* fonts */
@font-face { font-family:"UbuntuRegular"; src:url("/assets/fonts/Ubuntu-R.ttf") format('truetype'); }
@font-face { font-family:"UbuntuBold"; src:url("/assets/fonts/Ubuntu-B.ttf") format('truetype'); }
@font-face { font-family:"UbuntuMedium"; src:url("/assets/fonts/Ubuntu-M.ttf") format('truetype'); }
@font-face { font-family:"UbuntuLight"; src:url("/assets/fonts/Ubuntu-L.ttf") format('truetype'); }

@font-face {
  font-family: 'icomoon';
  src:  url('/assets/fonts/icomoon.eot?lb1gpv');
  src:  url('/assets/fonts/icomoon.eot?lb1gpv#iefix') format('embedded-opentype'),
    url('/assets/fonts/icomoon.ttf?lb1gpv') format('truetype'),
    url('/assets/fonts/icomoon.woff?lb1gpv') format('woff'),
    url('/assets/fonts/icomoon.svg?lb1gpv#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-star-empty:before {
  content: "\e9d7";
}
.icon-star-full:before {
  content: "\e9d9";
}
.icon-heart:before {
  content: "\e9da";
}
.icon-heart-broken:before {
  content: "\e9db";
}
.icon-share:before {
  content: "\ea7d";
}
.icon-share2:before {
  content: "\ea82";
}

::-webkit-scrollbar{width:10px;height:10px;background:#2B2B2B;}::-webkit-scrollbar:hover{background:#2E2E2E}::-webkit-scrollbar-thumb{background:#434343;}::-webkit-scrollbar-thumb:hover{background:#00b5e5;}::-webkit-scrollbar-corner{background:#2B2B2B;}

/* ILYAs css reset */
* { -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none; }
*:before,*:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }
a { text-decoration:none; }

/* ILYAs Styles */
body { margin: 0; padding: 0; font-family:"UbuntuRegular"; }
.auto_theme { background: #1d1d1d; color: #fff; }
.dark_theme { background: #1d1d1d; color: #fff; }
.light_theme { background: #d8d8d8; color: #000; }
.auto_theme a { color: #fff; }
.dark_theme a { color: #fff; }
.light_theme a { color: #000; }
.auto_theme .mainbg>div { background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; }
.dark_theme .mainbg>div { background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; }
.light_theme .mainbg>div { background: rgba(255, 255, 255, 0.3); width: 100%; height: 100%; }
.mainbg { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px); position: fixed; top: 0; left: 0; z-index: 1; background-position: center; transition: -webkit-transition: background 1s ease-in-out; -moz-transition: background 1s ease-in-out; -o-transition: background 1s ease-in-out; -ms-transition: background 1s ease-in-out; transition: background 1s ease-in-out; background-image: url(/assets/images/blank.png); }
.no_cover .mainbg { background-image: none !important; -webkit-filter: initial; -moz-filter: initial; -o-filter: initial; -ms-filter: initial; filter: initial; }
.controls { position: fixed; width: 100vw; bottom: 0; height: 55px; z-index: 6; }
.auto_theme .controls { background: rgba(0, 0, 0, 0.7); color: #fff; }
.dark_theme .controls { background: rgba(0, 0, 0, 0.7); color: #fff; }
.auto_theme .controls a { color: #fff; }
.dark_theme .controls a { color: #fff; }
.light_theme .controls { background: rgba(255, 255, 255, 0.7); color: #000; }
.light_theme .controls a { color: #000; }
.controls_ui { padding: 0;  margin: 0 auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: center; }
.button_ui { width: 55px; height: 55px; line-height: 55px; text-align: center; position: relative; margin: 0 10px; transition: all 0.2s ease-in-out; cursor: pointer; }
.button_ui_l { position: absolute; right: 15px; margin: 0; }
.auto_theme .button_ui path, .auto_theme .button_ui polygon { fill:#fff; }
.dark_theme .button_ui path, .dark_theme .button_ui polygon { fill:#fff; }
.light_theme .button_ui path, .light_theme .button_ui polygon { fill:#000; }
.button_ui svg { display: inline-block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 35px; height: 25px; }
#reqtag {display: none;}
#islive {display: none;}
.controls .messagebar { position: absolute; bottom: 0; margin-bottom: 55px; padding: 10px; min-height: 55px; width: 100%; display: flex; justify-content: center; align-items: center;}
.controls .messagebar p { margin: 0; line-height: 24px; text-align: center; }
.controls .messagebar .reqlabel { padding: 5px; margin-right: 10px; background:#f00; font-family:"UbuntuLight"; color: #fff; text-transform: uppercase; font-size: 14px; }
.auto_theme .messagebar { background: rgba(0, 0, 0, 0.6); color: #fff; }
.dark_theme .messagebar { background: rgba(0, 0, 0, 0.6); color: #fff; }
.auto_theme .messagebar a { color: #fff; }
.dark_theme .messagebar a { color: #fff; }
.light_theme .messagebar { background: rgba(255, 255, 255, 0.6); color: #000; }
.light_theme .messagebar a { color: #000; }
#mesname {font-weight:600;}

.controls .mlogo { position: absolute; text-transform: uppercase; font-size: 24px; font-family:"UbuntuLight"; top: 0; left: 15px; }
.controls .mlogo span { font-family:"UbuntuMedium"; }
.controls .mlogo a { display: inline-block; height: 55px; line-height: 55px; }
.controls .settings_b  { position: absolute; top: 0; right: 15px; display: inline-block; width: 55px; height: 55px; line-height: 55px;  }
.wrp { display: flex; justify-content: center; align-items: center; height: 100%; position: absolute; overflow: hidden; width: 100%; }
.wrp .closefull { display: none; }
#song_id { display: inline-block;  vertical-align: middle; z-index: 2; position: relative; max-width: 560px; margin-top: -55px; }
#song_id img, #song_id>span { width: 254px; height: 254px; border-radius: 100%; display: block; margin: 0 auto; margin-bottom: 40px; }
#song_id p { margin: 0; font-size: 18px; font-family:"UbuntuLight"; text-align: center; text-transform: uppercase; line-height: 1.3em; }
#song_id h1, #song_id h2 { margin: 0; font-size: 18px; font-family:"UbuntuLight"; text-align: center; text-transform: uppercase; line-height: 1.3em; font-weight:400;}
#song_id #artist { font-family:"UbuntuMedium"; margin-bottom: 5px; cursor: pointer; }
#song_id #song { font-size: 16px; text-transform: initial; }
#song_id>span { margin-bottom: -254px; position: relative; opacity: 0; transition: all 0.3s ease-in; }
#song_id>span:hover { opacity: 1; cursor: pointer; }
.auto_theme #song_id>span { background: rgba(0, 0, 0, 0.8); }
.dark_theme #song_id>span { background: rgba(0, 0, 0, 0.8); }
.light_theme #song_id>span { background: rgba(255, 255, 255, 0.8); }
.light_theme #song_id>span path, .light_theme #song_id>span polygon  { fill: #000; }
.auto_theme #song_id>span path, .auto_theme #song_id>span polygon  { fill: #fff; }
.dark_theme #song_id>span path, .dark_theme #song_id>span polygon  { fill: #fff; }
#song_id>span svg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 40%; max-height: 40%; padding: 4px; opacity: 0.5; }
.wrp2 { display: none; height: 100%; width: 100%; position: absolute; z-index: 3; top: 0; }
.wrp2>div { display: flex; justify-content: center; align-items: center; height: auto; width: auto; min-height: 100%; position: initial; padding: 25px 0 }
.auto_theme .wrp2>div { background: rgba(0, 0, 0, 0.8); }
.dark_theme .wrp2>div { background: rgba(0, 0, 0, 0.8); }
.light_theme .wrp2>div { background: rgba(255, 255, 255, 0.8); }
.NHSdata-pic {border-radius: 50%; height: 70px; width: 70px;}
.NHSdata-p {margin: 7px 0px 7px 0px;}
.wrp2 table { max-width: 650px; }
.wrp2 table tr td, .wrp2 table tr th { padding: 10px 10px; }
.wrp2 table tr th { font-weight: 100; font-size: 20px; font-family:"UbuntuMedium"; text-transform: uppercase; padding-bottom: 25px; padding-top: 0;  }
.wrp2 table tr td span { font-size: 18px; text-transform: uppercase; font-family:"UbuntuMedium"; padding-right: 5px; }
.wrp2 table tr td { font-family:"UbuntuLight"; }
.wrp2 table tr:last-child td { text-transform: none; padding-top: 25px; }
.wrp2 table tr:nth-last-child(2)  { display: none; }
.wrp2 #NHSdata_id tr:nth-child(2) td:first-child { width: 100px; }
.wrp2 #NHSdata_id tr:nth-child(2) td:nth-child(2) { width: 80%; }
.wrp2 #NHSdata_id tr:nth-child(2) td:nth-child(3) { width: 20%; }
.wrp2 #NHSdata_id tr td:last-child { text-align: right; }
.wrp2 #NHSdata_id tr:last-child td { text-align: left; }
.menu_button { position: fixed; width: 44px; height: 44px; top: 20px; left: 20px; z-index: 5; border-radius: 100%; cursor: pointer; }
.menu_button svg { width: 46px; height: 46px; margin-top: -1px; margin-left: -1px; }
.auto_theme .menu_button path, .auto_theme .menu_button polygon { fill: #fff; }
.dark_theme .menu_button path, .dark_theme .menu_button polygon { fill: #fff; }
.light_theme .menu_button path, .light_theme .menu_button polygon { fill: #000; }
.auto_theme .menu_button { background: rgba(0, 0, 0, 0.7); }
.dark_theme .menu_button { background: rgba(0, 0, 0, 0.7); }
.light_theme .menu_button { background: rgba(255, 255, 255, 0.7); }
#jp-pause { display:none; }
#unmute_mute { display:none; }
#volume_container { display: none; position: absolute; width: 55px; padding-left: 0px; padding-top: 25px; height: 149px; top: -149px; left: 0px;}
.jp-volume-bar { left:26px; }
.auto_theme #volume_container { background: rgba(0, 0, 0, 0.7); }
.dark_theme #volume_container { background: rgba(0, 0, 0, 0.7); }
.light_theme #volume_container { background: rgba(255, 255, 255, 0.7); }
.auto_theme .ui-widget-content, .light_theme .ui-widget-content { background: #474747; }
.dark_theme .ui-widget-content, .light_theme .ui-widget-content { background: #474747; }
.auto_theme .ui-widget-header { background: #fff; }
.dark_theme .ui-widget-header { background: #fff; }
.light_theme .ui-widget-header { background: #000; }
.auto_theme .ui-state-default { background: #fff; }
.dark_theme .ui-state-default { background: #fff; }
.light_theme .ui-state-default { background: #000; }
.close { cursor: pointer; position: absolute; width: 25px; height: 25px; top: 20px; right: 20px; z-index: 5; }
.close svg { width: 100%; height: 100%; }
.auto_theme .close path, .auto_theme .close polygon  { fill: #fff; }
.dark_theme .close path, .dark_theme .close polygon  { fill: #fff; }
.light_theme .close path, .light_theme .close polygon  { fill: #000; }
.mainsidebar { position: absolute; max-width: 420px; width: 50%; height: 100%; z-index: 5; left: -421px; top: 0;  }
.auto_theme .mainsidebar { background: rgba(0, 0, 0, 0.8); }
.dark_theme .mainsidebar { background: rgba(0, 0, 0, 0.8); }
.light_theme .mainsidebar { background: rgba(255, 255, 255, 0.8); }
.mainsidebar .in { display: flex; justify-content: center; align-items: center; height: 100%; }
.mainsidebar .in>div { width: 100%; padding: 40px 15px; overflow: auto; max-height: 100%; }
.mainsidebar .in>div .mmenu { text-align: center; list-style: none; margin: 0; padding: 0; }
.mainsidebar .in>div .mmenu li:hover { opacity: 0.7; }
.mainsidebar .in>div .mmenu li a { text-decoration: none; font-size: 18px; text-transform: uppercase; font-family:"UbuntuLight"; display: inline-block; padding: 15px 0; }
.mainsidebar .in>div p { text-align: center; margin: 0; font-family:"UbuntuLight"; }
.mainsidebar .in>div .logo { margin: 0; margin-bottom: 15px }
.mainsidebar .in>div .logo svg { width: 50px; height: 50px }
.mainsidebar .in>div .social { margin-top: 40px; }
.mainsidebar .in>div .social svg { width: 22px; height: 22px; }
.mainsidebar .in>div .social a { margin: 15px 5px 0 5px; display: inline-block; }
.auto_theme .mainsidebar path, .auto_theme .mainsidebar polygon  { fill: #fff; }
.dark_theme .mainsidebar path, .dark_theme .mainsidebar polygon  { fill: #fff; }
.light_theme .mainsidebar path, .light_theme .mainsidebar polygon  { fill: #000; }
#song_id .finfo { display: none; }
.settingssidebar { position: absolute; max-width: 420px; width: 50%; height: 100%; z-index: 5; right: -421px; top: 0;  }
.auto_theme .settingssidebar { background: rgba(0, 0, 0, 0.8); }
.dark_theme .settingssidebar { background: rgba(0, 0, 0, 0.8); }
.light_theme .settingssidebar { background: rgba(255, 255, 255, 0.8); }
.settingssidebar .in { display: flex; justify-content: center; align-items: center; height: 100%; }
.settingssidebar .in>div { width: 80%; padding: 20px 15px; overflow: auto; max-height: 100%; }
@media (max-width:350px){
	.settingssidebar .in>div { width: 90%;}
}
.settingssidebar .in>div h2 { font-weight: 100; font-size: 20px; font-family:"UbuntuLight"; padding-left: 40px; position: relative; line-height: 30px; }
.settingssidebar .in>div h2 svg { width: 30px; height: 30px; position: absolute; left: 0; }
.settingssidebar .smassage { position: absolute; top: 23px; right: 70px; }
.settingssidebar .SaveLangPromptT {  font-family:"UbuntuLight"; padding-left: 40px; opacity: 0.7; font-size: 12px; }
.auto_theme .settingssidebar .in>div path, .auto_theme .settingssidebar .in>div polygon { fill: #fff; }
.dark_theme .settingssidebar .in>div path, .dark_theme .settingssidebar .in>div polygon { fill: #fff; }
.light_theme .settingssidebar .in>div path, .light_theme .settingssidebar .in>div polygon { fill: #000; }
.settingssidebar .in>div p { position: relative; font-family:"UbuntuLight"; }
.settingssidebar .in .box { padding-left: 40px; }
.settingssidebar .in .box.langs, .settingssidebar .in .box.qlt, .settingssidebar .in .box.be { display: flex; justify-content: flex-start; }
.settingssidebar .in .box.langs>div, .settingssidebar .in .box.qlt>div, .settingssidebar .in .box.be>div { margin-right: 20px; }
@media (max-width:390px){
	.settingssidebar .in .box.langs>div, .settingssidebar .in .box.qlt>div, .settingssidebar .in .box.be>div { margin-right: 15px; }	
}
#song_id.fullinfo { display: flex; justify-content: center; align-items: center; }
#song_id.fullinfo { max-width: 100%; padding: 0 15px; }
#song_id.fullinfo>span { display: none; }
#song_id.fullinfo .finfo { display: block; margin-left: 30px; }
#song_id.fullinfo img { margin-bottom: 0; border-radius: 0; }
#song_id.fullinfo #artist, #song_id.fullinfo #song { display: none; }
#song_id.fullinfo .finfo p { text-align: left; font-family:"UbuntuMedium"; text-transform: uppercase; line-height: initial; margin-bottom: 5px; }
#song_id.fullinfo .finfo p span { font-family:"UbuntuLight"; text-transform: none; }
.minwrp .closefull { display: inline-block; }
.minwrp { z-index: 2; }
.auto_theme .minwrp { background: rgba(0, 0, 0, 0.8); }
.dark_theme .minwrp { background: rgba(0, 0, 0, 0.8); }
.light_theme .minwrp { background: rgba(255, 255, 255, 0.8); }


/* background animations */
.glow_up_down { animation-name: glow_up_down;animation-duration: 60s;animation-timing-function: linear;animation-delay: 1s;animation-iteration-count: infinite;animation-direction: alternate; }

/* gradients */
.auto_theme .controls.grad { 
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */
}
.dark_theme .controls.grad { 
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */
}
.light_theme .controls.grad { 
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#b3ffffff',GradientType=0 ); /* IE6-9 */
}

/* toggles */
.toggle { display: inline-block; -webkit-tap-highlight-color: transparent; float: right; }
.toggle input { visibility: hidden; opacity: 0; position: absolute; }
.toggle input:focus + span { text-decoration: underline; }
.toggle > span { display: block; cursor: pointer; border-radius: 20px; width: 46px; height: 20px; border: 1px solid black; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; -webkit-transition: 200ms ease-out; transition: 200ms ease-out; font-size: 0; }
.auto_theme .toggle > span { border: 1px solid #fff; }
.dark_theme .toggle > span { border: 1px solid #fff; }
.light_theme .toggle > span { border: 1px solid #000; }
.toggle > span:before { will-change: translate; display: block; position: absolute; top: 2px; left: 2px; content: ''; width: 14px; height: 14px; border-radius: 100%; -webkit-transition: 200ms; transition: 200ms; }
.auto_theme .toggle > span:before { background: #fff; }
.dark_theme .toggle > span:before { background: #fff; }
.light_theme .toggle > span:before { background: #000; }
.toggle > span:after { font-size: 1rem; position: absolute; left: -35px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: attr(data-off); pointer-events: none; }
.toggle input:checked + span { background: #008eff; }
.toggle input:checked + span:before { color: #008eff; -webkit-transform: translateX(26px); transform: translateX(26px); background: white; }
.auto_theme .toggle input:checked + span:before { background: #fff; }
.dark_theme .toggle input:checked + span:before { background: #fff; }
.light_theme .toggle input:checked + span:before { background: #000; }
.toggle input:checked + span:after { content: attr(data-on); }

/* radio */
.radio-btn { position: relative; padding-left: 20px; margin-bottom: 10px; }
.radio-btn input[type="checkbox"], .radio-btn input[type="radio"] { position: absolute; opacity: 0; z-index: 1; }
.radio-btn label { display: inline-block; line-height: 20px; vertical-align: middle; position: relative; padding-left: 5px; cursor: pointer; user-select: none; font-family: "UbuntuLight"; }
.radio-btn label::after { position: absolute; content: ""; width: 20px; height: 20px; left: 0; top: 0; margin-left: -20px;  -webkit-border-radius: 3px; border-radius: 3px; background-clip: padding-box; cursor: pointer; }
.auto_theme label::after { border: 1px solid #fff; }
.dark_theme label::after { border: 1px solid #fff; }
.light_theme label::after { border: 1px solid #000; }
.radio-btn label::before { position: absolute; content: ""; width: 10px; height: 5px; top: 4px; left: 4px; margin-left: -20px; border-top: none; border-right: none; background: transparent; -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; -webkit-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; z-index: 1; }
.radio-btn label:active::before { opacity: 0.3; }
.light_theme .radio-btn input[type="checkbox"]:checked+label::after, .light_theme .radio-btn input[type="radio"]:checked+label::after { border: 1px solid #000; background-color: #008eff; }
.auto_theme .radio-btn input[type="checkbox"]:checked+label::after, .auto_theme .radio-btn input[type="radio"]:checked+label::after { border: 1px solid #fff; background-color: #008eff; }
.dark_theme .radio-btn input[type="checkbox"]:checked+label::after, .dark_theme .radio-btn input[type="radio"]:checked+label::after { border: 1px solid #fff; background-color: #008eff; }
.radio-btn input[type="checkbox"]:checked+label::before, .radio-btn input[type="radio"]:checked+label::before { opacity: 1; }
.radio-btn input[type="checkbox"]:disabled+label, .radio-btn input[type="radio"]:disabled+label { cursor: default; opacity: 0.5; }
.radio-btn input[type="checkbox"]:disabled+label::after, .radio-btn input[type="radio"]:disabled+label::after { opacity: 0.5; }
.radio-btn input[type="checkbox"]:disabled+label::before, .radio-btn input[type="radio"]:disabled+label::before { display: none; }
.radio-btn label::after { -webkit-border-radius: 50%;  border-radius: 50%; background-clip: padding-box; }
.radio-btn label::before { width: 12px; height: 12px; border: none; top: 4px; left: 4px; -webkit-border-radius: 50%; border-radius: 50%; background-clip: padding-box;  -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.auto_theme .radio-btn label::before  { background-color: #fff; }
.dark_theme .radio-btn label::before  { background-color: #fff; }
.light_theme .radio-btn label::before  { background-color: #000; }

@keyframes glow_up_down {
      0%   { -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px); background-position: top; }
      20%   { -webkit-filter: blur(80px); -moz-filter: blur(80px); -o-filter: blur(80px); -ms-filter: blur(80px); filter: blur(80px); }
      40%   { -webkit-filter: blur(40px); -moz-filter: blur(40px); -o-filter: blur(40px); -ms-filter: blur(40px); filter: blur(40px); }
      50%   { background-position: bottom; }
      60%   { -webkit-filter: blur(100px); -moz-filter: blur(100px); -o-filter: blur(100px); -ms-filter: blur(100px); filter: blur(100px); }
      80%   { -webkit-filter: blur(70px); -moz-filter: blur(70px); -o-filter: blur(70px); -ms-filter: blur(70px); filter: blur(70px); }
      100%   { -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px); background-position: top; }

    }

.glow { animation-name: glow;animation-duration: 30s;animation-timing-function: linear;animation-delay: 1s;animation-iteration-count: infinite;animation-direction: alternate; }
@keyframes glow {
      0%   { -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px); }
      20%   { -webkit-filter: blur(80px); -moz-filter: blur(80px); -o-filter: blur(80px); -ms-filter: blur(80px); filter: blur(80px); }
      40%   { -webkit-filter: blur(40px); -moz-filter: blur(40px); -o-filter: blur(40px); -ms-filter: blur(40px); filter: blur(40px); }
      60%   { -webkit-filter: blur(100px); -moz-filter: blur(100px); -o-filter: blur(100px); -ms-filter: blur(100px); filter: blur(100px); }
      80%   { -webkit-filter: blur(70px); -moz-filter: blur(70px); -o-filter: blur(70px); -ms-filter: blur(70px); filter: blur(70px); }
      100%   { -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px); }

    }

/* likes */
.bg-green{ background-color: #559900;}
.bg-red{background-color: #c9231a;}
.like-btn, .fav-btn, .dislike-btn, .share-btn {
	width: auto; height: 34px; padding: 0 20px 0 20px; 
	float: left; margin-top: 12px;
	cursor: pointer; font-size: 18px; line-height: 34px;
	-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; /* border radius */
}
.dislike-btn, .share-btn, .fav-btn  { margin-left: 10px; }
.auto_theme .like-btn, .auto_theme .fav-btn, .auto_theme .dislike-btn, .auto_theme .share-btn{
	border:#fff 1px solid;
	background-color: rgba(0, 0, 0, 0.7);
}
.dark_theme .like-btn, .dark_theme .fav-btn, .dark_theme .dislike-btn, .dark_theme .share-btn{
	border:#fff 1px solid;
	background-color: rgba(0, 0, 0, 0.7);
}
.light_theme .like-btn, .light_theme .fav-btn, .light_theme .dislike-btn, .light_theme .share-btn{
	border:#000 1px solid;
	background-color: rgba(255, 255, 255, 0.7);
}
.like-btn:hover, .like-h{
	color: #c9231a;
}
.fav-btn:hover, .fav-h{
	color: #ffca00;
}
.auto_theme .dislike-btn:hover, .auto_theme .share-btn:hover, .auto_theme .dislike-h{
	color: #000;
}
.dark_theme .dislike-btn:hover, .dark_theme .share-btn:hover, .dark_theme .dislike-h{
	color: #000;
}
.light_theme .dislike-btn:hover, .light_theme .share-btn:hover, .light_theme .dislike-h{
	color: #fff;
}
.auto_theme .like-btn:hover, .auto_theme .fav-btn:hover, .auto_theme .like-h, .auto_theme .fav-h, .auto_theme .dislike-btn:hover, .auto_theme .dislike-h, .auto_theme .share-btn:hover{
	background-color: rgba(204, 204, 204, 0.4);
}
.dark_theme .like-btn:hover, .dark_theme .fav-btn:hover, .dark_theme .like-h, .dark_theme .fav-h, .dark_theme .dislike-btn:hover, .dark_theme .dislike-h, .dark_theme .share-btn:hover{
	background-color: rgba(204, 204, 204, 0.4);
}
.light_theme .like-btn:hover, .light_theme .fav-btn:hover, .light_theme .like-h, .light_theme .fav-h, .light_theme .dislike-btn:hover, .light_theme .dislike-h, .light_theme .share-btn:hover{
	background-color: rgba(0, 0, 0, 0.7);
}
.stat-cnt{ 	width: 120px; height: 60px; float: right;}
.stat-bar{	width: 120px; height: 3px;	margin-bottom: 5px;}
.rate-count{ font-size: 20px; color: #333; text-align: right; font-weight: bold; }
.stat-bar div{height: 3px; float: left;}
.like-count{background: url(../img/like-ico2.png) 0% 50% no-repeat;}
.dislike-count{background: url(../img/dislike-ico2.png) 0% 50% no-repeat; margin-left: 15px;}
.like-count, .dislike-count{
	width: auto; height: 18px; 
	float: right; 
	font-size: 12px; line-height: 18px; color: #666;
	padding-left: 15px;
}	
	
/* breakpoints */
/* width */
@media (max-width:640px){
	.controls_ui .vol { display: none; }
	.button_ui { margin: 0; }
	.button_ui_l { position: relative; right: 0; }
	.controls .mlogo { display: none; }
	#song_id { padding: 0 30px; }
	#song_id.fullinfo img { width: 390px; height: 390px; }
	#song_id.fullinfo .titles { max-width: 390px; }
	#song_id img, #song_id>span { width: 230px; height: 230px; }
	#song_id>span { margin-bottom: -230px; }
	.mainsidebar { width: 100%; max-width: 100%; left: -100%; }
	.settingssidebar { width: 100%; max-width: 100%; right: -100%; }
	#song_id.blurredM { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }
	.auto_theme .mainsidebar, .auto_theme .settingssidebar { background: rgba(0, 0, 0, 0.9); }
	.dark_theme .mainsidebar, .dark_theme .settingssidebar { background: rgba(0, 0, 0, 0.9); }
	.light_theme .mainsidebar, .light_theme .settingssidebar { background: rgba(255, 255, 255, 0.9); }
	#song_id.fullinfo { display: block; padding: 60px 15px 30px 15px; margin-top: 30px; }
	#song_id.fullinfo img { margin-bottom: 15px; }
	#song_id.fullinfo .finfo { margin-left: 0; }
	.LikesButtons {
		position: absolute;
		top: 54px;
		left: 20px;
		z-index: 5;
	}	
}
@media (max-width:420px){
	#song_id.fullinfo { margin-top: 15px; }
	#song_id.fullinfo img { width: 100%; height: 100%; }
	.wrp2>div table tr td span { font-size: initial; }
	.wrp2 table tr th { font-size: 18px; }
	.mainsidebar .in>div .social a { margin: 8px 5px 0 5px; }
	.wrp2 #NHSdata_id tr:nth-child(2) td:first-child { width: 68px; }
	.wrp2 #NHSdata_id tr td img { width: 48px; height: 48px; }
}
@media (max-width:420px){
	#song_id.fullinfo { margin-top: 0; }
	.settingssidebar .in .box, .settingssidebar #SaveLangPrompt { padding-left: 0; }
}

/* height */
@media screen and (max-height: 667px) {
	.settingssidebar .in>div { width: 100%; padding: 20px 45px; }
	#song_id.fullinfo { padding: 60px 15px 30px 15px; margin-top: 0; }
	.minwrp { /*display: initial;*/ overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; }
	.mainsidebar .in>div .mmenu li a { padding: 10px 0; }
	.mainsidebar .in>div .social { margin-top: 15px; }
}
@media screen and (max-height: 533px) {
	.mainsidebar .in>div .logo { margin-bottom: 5px; }
	.mainsidebar .in>div .mmenu li a { padding: 10px 0; font-size: 16px; }
	.mainsidebar .in>div .social { margin-top: 15px;  }
}
@media screen and (max-height: 500px) {
	.mainsidebar .in>div .logo { margin-bottom: 0px; }
	.mainsidebar .in>div .mmenu li a { padding: 8px 0; font-size: 16px; }
	.mainsidebar .in>div .social { margin-top: 10px;  }
}
@media screen and (max-height: 440px) {
	.NHSdata-pic {border-radius: 50%; height: 50px; width: 50px;}
	.wrp2 table tr td, .wrp2 table tr th { padding: 5px 10px; }
	.wrp { display: initial; overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; }
	#song_id { height: auto; display: block; position: relative; padding-top: 25px; padding-bottom: 60px; max-width: none; margin-top: 0; }
	.mainsidebar { height: 100%; }
}

#snowfall {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1000;
}

.fa-tree {
	-webkit-animation: color-change 10s infinite;
	-moz-animation: color-change 10s infinite;
	-o-animation: color-change 10s infinite;
	-ms-animation: color-change 10s infinite;
	animation: color-change 10s infinite;
}

@-webkit-keyframes color-change {
	0% { color: white; }
	25% { color: blue; }
	50% { color: green; }
	75% { color: orange; }
	100% { color: red; }
}
@-moz-keyframes color-change {
	0% { color: white; }
	25% { color: blue; }
	50% { color: green; }
	75% { color: orange; }
	100% { color: red; }}
}
@-ms-keyframes color-change {
	0% { color: white; }
	25% { color: blue; }
	50% { color: green; }
	75% { color: orange; }
	100% { color: red; }
}
@-o-keyframes color-change {
	0% { color: white; }
	25% { color: blue; }
	50% { color: green; }
	75% { color: orange; }
	100% { color: red; }
}
@keyframes color-change {
	0% { color: white; }
	25% { color: blue; }
	50% { color: green; }
	75% { color: orange; }
	100% { color: red; }
}

.blinklive {
  -webkit-animation: blinklive 3s linear infinite;
  animation: blinklive 3s linear infinite;
}
@-webkit-keyframes blinklive {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@keyframes blinklive {
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}