/*  

   ---=== Responsive stylesheet by R.L. 2016 / infraweb@yandex.ru ===---  
   
*/

/* Fontset */

@font-face {
  font-family: 'FontAwesome';
  src: url('/style/fonts/fontawesome/fontawesome-webfont.eot?v=4.6.1');
  src: url('/style/fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'), 
       url('/style/fonts/fontawesome/fontawesome-webfont.woff2?v=4.6.1') format('woff2'), 
       url('/style/fonts/fontawesome/fontawesome-webfont.woff?v=4.6.1') format('woff'), 
       url('/style/fonts/fontawesome/fontawesome-webfont.ttf?v=4.6.1') format('truetype'), 
       url('/style/fonts/fontawesome/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
     font-family: 'PTSans';
    src: url('/style/fonts/ptsans/pts55f.eot');
    src: url('/style/fonts/ptsans/pts55f.eot?#iefix') format('embedded-opentype'),
         url('/style/fonts/ptsans/pts55f.woff') format('woff'),
         url('/style/fonts/ptsans/pts55f.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), 
         local('Roboto-Regular'), 
         url('/style/fonts/roboto/roboto.woff2') format('woff2'), 
         url('/style/fonts/roboto/roboto.woff') format('woff'), 
         url('/style/fonts/roboto/roboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Italic'), 
         local('Roboto-Italic'), 
         url('/style/fonts/roboto/robotoitalic.woff2') format('woff2'), 
         url('/style/fonts/roboto/robotoitalic.woff') format('woff'), 
         url('/style/fonts/roboto/robotoitalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Light'), 
         local('Roboto-Light'), 
         url('/style/fonts/roboto/robotolight.woff2') format('woff2'), 
         url('/style/fonts/roboto/robotolight.woff') format('woff'), 
         url('/style/fonts/roboto/robotolight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Bold'), 
         local('Roboto-Bold'), 
         url('/style/fonts/roboto/robotobold.woff2') format('woff2'), 
         url('/style/fonts/roboto/robotobold.woff') format('woff'), 
         url('/style/fonts/roboto/robotobold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed'), 
         local('RobotoCondensed-Regular'), 
         url('/style/fonts/robotocondensed/robotocondensed.woff2') format('woff2'), 
         url('/style/fonts/robotocondensed/robotocondensed.woff') format('woff'), 
         url('/style/fonts/robotocondensed/robotocondensed.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed Bold'), 
         local('RobotoCondensed-Bold'), 
         url('/style/fonts/robotocondensed/robotocondensedbold.woff2') format('woff2'), 
         url('/style/fonts/robotocondensed/robotocondensedbold.woff') format('woff'), 
         url('/style/fonts/robotocondensed/robotocondensedbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Bootstrap */

* {margin: 0; padding: 0; outline: 0;}
html, body {height: 100%;}

/* Global Colours and Fonts */

body {background: #fff; color: #333; font: normal 10pt/1.3em Roboto;}
a {color:#dd4536; transition: all 0.3s ease 0s; text-decoration: underline;}
a:hover, a:focus {color: #000;}
img {border: 0;}
header a {text-decoration: none;}
h2 {font-family: Roboto Condensed; font-weight: bold; font-size: 2.2em; line-height: 1em; text-transform: uppercase; color: #000; padding: 0.6em 0;}
h2:first-child {padding-top:1em;}
input[type="submit"], button {cursor: pointer;}

#s_desctop, #s_tablet, #s_mobile {height: 1px;}
#s_tablet, #s_mobile {display: none;}

/* Global grid */

body {min-width: 780px; padding: 0 10px;}
header {max-width: 960px; margin: 0 auto; background: #000;}
header .logo {float: left; text-align: center; display: block; text-transform: uppercase; width: 20%; font-family: Roboto Condensed; background: #f90; color: #fff; font-size: 2em; font-weight: bold; padding: 0.4em 0;}
header .logo:hover, header .logo:focus {background: #fc0; color: #fff;}
header .subtitle {width: 65%; background: #000; color: #fff; float: left;}
header .subtitle p {line-height: 1em; padding-left: 2em; margin-top: 0.3em; margin-bottom: 0.3em;}
header .addsong {background: #006699; color: #fff; float: left; padding: 0.6em 0 0.55em 0; font-family: Roboto Condensed; width: 20%; text-align: center;}
header .addsong:hover, header .addsong:focus  {background: #09c; color: #fff;}
header .b_login:hover, header .b_login:focus, header .b_menu:hover, header .b_menu:focus {color: #fff;}
header .b_login, header .b_menu {background: #000; color: #f90; font-family: FontAwesome; font-size: 1.8em;  text-align: right;  display: block; float: right; width: 45px; padding: 0.4em 0 0.5em 0; height: 16px;}
header .b_login span, header .b_menu span {display: inline-block; padding-right: 0.5em;}

#main{max-width: 960px; margin: 0 auto; background: #fff; padding: 0 10px;}
#footer{max-width: 960px; margin: 0 auto; background:#f5f5f5;}
#footer_info {padding:1em 1em 1.7em 1em; text-align:center; color:#333333; font-size: 1.2em; line-height: 1.3em;}
#menu_f {display: none;}

.up_letters_block {padding: 1.5em 0.7em; text-align:center; border-top: solid 5px #e1e1e1; margin-top: 1.3em;}
.up_lets {display: inline-block; padding: 0.3em 0.3em; margin: 0 0.15%; text-decoration: none; color: #777; font-size: 1.4em; font-weight: bold;}
.up_lets:hover, .up_lets:focus {background: #777; color: #fff;}
.up_lets.active, .up_lets.active:hover  {background: #dd4536; color: #fff;}

div.divider {height: 2.6em;}
p.divider {height: 1em;}

.searchbar {width: 73%; float: left; background: #dcdcdc; color: #989898; border-radius: 6px;}
.searchbar form {position: relative;  padding: 1em 1.5em 0.2em 1.5em}
.searchbar input[type="text"] {display: block; border-color: #dcdcdc; line-height: 1.2em; font-size: 1.1em; padding: 0.3em; width: 98%; border-radius: 6px; text-indent: 2.4em; color: #666;}
.searchbar input[type="submit"] {font-family: FontAwesome; position: absolute; top: 0.7em; left: 1.3em; border: 0; background: transparent; color: #a8a8a8; font-size: 1.5em;}
.search_naprimer {margin: 5px 0 3px 0; overflow: hidden; height: 1.3em;}

.likesbar {width: 25%; float: left; padding-top: 1em; margin-left: 1.9%;}
.likesbar > div {float: left; margin-bottom: 0.2em;}

h2.announce {font-size: 1.6em; padding: 1.5em 0 0.2em 0;}
p.announce {color: #989898; font-size: 1.1em; line-height: 1.1em;}

#content_container {max-width: 960px; margin: 0 auto;}
#content {width: 73%; float: left;}
#left_block {width: 25%; float:left; margin-left: 1.9%; padding-top: 0.7em;}
#left_block h2 {font-size: 1.7em; line-height: 1.2em; padding: 1em 0 0.4em 0;}

.leftlinks {padding: 1em 0;}
a.r_m_links_big {display: block; text-decoration: none; font-family: Roboto Condensed; padding: 0.3em 0; font-size: 1.5em; margin-bottom: 0.1em; line-height: 1.2em;}
a.r_m_links_big span {color: #e2e2e2; float: right; font-family: FontAwesome; transition: all 0.3s ease 0s;}
a.r_m_links_big:hover span, a.r_m_links_big:focus span{color: #000;}

a.r_m_links_big:nth-child(1) span {font-size: 1em;}
a.r_m_links_big:nth-child(2) span {font-size: 0.9em;}
a.r_m_links_big:nth-child(3) span {font-size: 1.2em;}
a.r_m_links_big:nth-child(4) span {font-size: 1.5em; position: relative; left: -0.12em;}
a.r_m_links_big:nth-child(5) span {font-size: 0.9em;}
a.r_m_links_big:nth-child(6) span {font-size: 1.1em;}
a.r_m_links_big:nth-child(7) span {font-size: 1.2em; position: relative; left: -0.1em;}
a.r_m_links_big:nth-child(8) span {font-size: 1.3em; position: relative; left: -0.1em;}

a.r_m_links {display: block; font-size: 1.2em; text-decoration: none; color: #000; padding: 0.2em 0; margin-bottom: 0.3em;}
a.r_m_links:hover, a.r_m_links:focus {text-decoration: underline;}
#fresher a, .fresher {
	display: block;
    color: #221f30;
    -webkit-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
    font-family: 'Roboto Condensed',Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
	text-decoration: none;
	margin-top: 5px;
	margin-bottom: 20px;
}
#fresher a:hover, .fresher:hover {
	color: #DD4536;
}

.pagination {font-weight: 300; font-size: 1.6em; padding: 0.6em; text-align: center;}
.pagination > * {display: inline-block; text-decoration: none; padding: 0.3em 0.3em; color: #000; border-radius: 4px;}
.pagination .current {color: #dd4536;}
.pagination a:hover {background: #f1f1f1;}

.vkcomms {border: 1px solid #eaeaea; padding: 5px; margin: 1em 0;}

.clear, .dtclear, .mclear {height: 1px; clear: both; width: 100%;}
.mclear {display: none;}

.blok_pesni {overflow:auto; overflow-y:hidden; padding: 1em 0; transition: all 0.3s ease 0s; border-radius: 4px;}
.blok_pesni.ds {padding-bottom: 1.3em;}
.blok_pesni.active {background: #eaeaea;}
.isint {width: 60%; float:left; margin:-2px -2px 0 9px; padding:0; font-size: 1.2em;}
.blok_pesni .play {float:left; width: 6%;}
.blok_pesni .play .ico { color: #000; font-family: FontAwesome; font-size: 1.7em; padding: 0.2em 0.2em 0.3em 0.7em; display: inline-block; cursor: pointer;}
.blok_pesni:hover {background:#eaeaea;}
.knopka_start {float:left;}
.dlist{float:left; text-align:left; width: 6%; color: #b2b2b2; padding-top: 0.5em;}
a.download_song2 {text-decoration:none; display:block; float:right; width: 14%; text-align: center; text-transform: uppercase; padding: 0.4em 0; border: solid 2px #b8b8b8; border-radius: 6px; color: #868686; margin-right: 1%;}
a.download_song2:hover,a.download_song2:focus {color:#dd4536; border-color: #dd4536;}
.topl, .topl_added, .topl_deleted{float:right; width: 4%; text-align: center; text-transform: uppercase; padding: 0.4em 0; border: solid 2px #b8b8b8; border-radius: 6px; color: #868686; margin-right: 1%; cursor: pointer;}
.topl:hover {color:#dd4536; border-color: #dd4536;}
.topl_added, .topl_deleted {display: none;}
.blok_pesni .position{float:left; width:30px; margin-top:5px; margin-left:-10px; padding-right:8px; text-align:center; font:bold 17px/2.2 'SegoeUI Bold', Tahoma, sans-serif;}
.blok_pesni .play .ico.big-song{margin-top:9px;}
.blok_pesni .play .ico.similar{margin-top:2px;}
.blok_pesni .play .ico.pause{background-position:0 -87px;}
.player-controls .timeline {height: 8px; background:#dcdcdc; cursor:pointer;}
.player-controls .timeline .progress {position:relative; height: 8px; background:#cccccc; overflow:visible; filter:none; margin:0;}
.player-controls {position:relative; margin:-5px 0 -5px 0; padding: 0.4em 40% 0.5em 7.5%; display:none; clear:both;}
.blok_pesni.active .player-controls {display:block;}
.player-controls .timeline .progress:after, .player-controls .volume .value:after{content:''; position:absolute; right: -9px; top:-3px; width:14px; height:14px; border-radius:50%; background: #b6b6b6;}
.player-controls .volume {position:absolute; right:24%; top: 0.4em; width:12%; height:8px; background:#dcdcdc; cursor:pointer;}
.player-controls .volume .value {position:relative; height:8px; background:#cccccc;}
.player-controls .volume .value:before{content:'\f026'; position:absolute; left: -15px; top: -5px; width:15px; height:13px; cursor:default; font-family: FontAwesome; font-size: 1.8em; color: #b6b6b6;}
.player-controls .control {width: 50%; float: left; opacity: 0.5; cursor: pointer;}
.player-controls .control:hover {opacity: 1;}
.download_song {float: left; width: 20%; position: relative;}
.download_song a {display: block; text-align: center; text-transform: uppercase; padding: 0.4em 0; border: solid 2px #b8b8b8; border-radius: 6px; color: #868686; text-decoration: none;}
.download_song a:hover, .download_song a:focus {color:#dd4536; border-color: #dd4536;}
.download_song > span {display: block; text-align: center; color: #666; font-size: 0.8em; width: 100%; position: absolute; top: 3em; left: 0;}

.info_block {margin-top: 2em;}
.mb_block {background: #dcdcdc; color: #5b5b5b; padding: 3em 4em; line-height: 1.1em;}
.mb_block h3 {text-align: center; color:#dd4536; text-transform: uppercase; font-size: 1.8em; font-weight: bold; line-height: 1.2em; padding: 0 0 1em 0;}
.mb_block a.bio_img {display: block; float: left; width: 40%; margin-bottom: 1.3em;}
.mb_block a.bio_img img {border: 0; width: 100%; height: auto;}
.bio_block {float: left; margin-left: 1.5em; color: #000; width: 40%; margin-bottom: 1.3em;}
.bio_block p {margin: 0 0 0.3em 0; line-height: 1em;}
.more_buttons {padding: 2.2em 0; text-align: center;}
.more_buttons a {width: 31%; display: inline-block; line-height: 1em; padding: 0.6em 0 0.5em 0; margin: 0 4%; border-radius: 6px; font-weight: bold; text-transform: uppercase; font-family: Roboto Condensed; font-size: 1.2em; text-decoration: none; background: #a8a8a8; color: #fff;}
.more_buttons a.red_btn {background: #dd4536;}
.song_info_block {font-size: 0.9em; font-weight: 300; padding-bottom: 0.2em;}
.song_info_block b {font-weight: bold; }
.song_info_likes {margin-top: 1.5em;}
.song_info_likes > div {float: left; margin-right: 1em; margin-bottom: 0.5em;}
.title {font-family: Roboto Condensed; font-weight: bold; text-transform: uppercase; font-size: 1.5em; margin: 2em 0 0.8em 0;}
.best_songs {font-weight: 300; font-size: 1.4em;}
.best_songs a {color: #000; text-decoration: none; line-height: 1.4em;}
.best_songs a:hover {color: #dd4536;}
.other_info {background: #f4f4f4; padding: 2em 4em; margin-bottom: 2em;}

.lyr {font-size: 1.2em; text-align: center; color: #000; line-height: 1.3em; font-weight: 300;}
.videoframe {margin: 1em 0 2em 0;}

#modal {display: table; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 30;}
#modal > div {display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle;}
.modalframe {display: inline-block; position: relative; background: #f1f1f1; color: #b2b2b2; padding: 1.5em 0.7em; border: solid 2px #b1b1b1; border-radius: 6px;}
#login, #register, .switch {width: 320px; padding-top: 0.5em; margin: 0 auto;}
#login, #register {height: 390px;}
.switch a {display: inline-block; width: 49%; text-align: center; padding: 0.5em 0 0.2em 0; font-size: 1.2em; text-transform: uppercase; color: #828282; }
.switch span {display: inline-block; border-color: transparent; border-style: solid; border-width: 16px 78px; height: 1px; width: 1px; transition: all 0.3s ease 0s;}
.switch a.active {color: #fff; background: #888;}
.switch span.active {border-color: #888 transparent transparent;}
#login label, #register label {display: block; margin-top: 0.3em;}
#login input[type="submit"], #register input[type="submit"] {display:inline-block; text-align: center; line-height: 1.3em; text-transform: uppercase; padding: 0.3em 0.7em 0.1em 0.7em; border: solid 2px #b2b2b2; border-radius: 6px; color: #888; transition: all 0.3s ease 0s;}
#login input[type="submit"]:hover, #register input[type="submit"]:hover {color: #000;}
#login input[type="text"], #register input[type="text"], #login input[type="password"], #register input[type="password"] {font-size: 1.1em; padding: 0.3em; border-radius: 6px; color: #666; transition: all 0.3s ease 0s;}
#login input[type="text"]:focus, #register input[type="text"]:focus, #login input[type="password"]:focus, #register input[type="password"]:focus {border-color: #888; color: #000;}
#register {display: none;}
#register span {display: inline-block; margin-right: 0.4em;}
#login form {padding: 3em 0;}
#modal #notice {color: #dd4536; margin-bottom: 0.5em;}
#notice {max-width: 300px;}
#success {max-width: 300px; margin-top: 0.5em; color: #000; font-size: 11pt; margin: 0 auto;}
#modal a.cancel {position: absolute; right: 4px; top: 3px; font-family: FontAwesome; font-size: 1.4em; color: #b2b2b2;}
#modal a.cancel:hover {color: #dd4536;}

.artists a {color: #000; display: block; width: 48%; float: left; text-decoration: none; font-size: 1.3em; padding: 0.3em 0.7%;}
.artists a:hover {color: #dd4536;}

a.download_song2 i, .topl i, .download_song a i {display: none; font-family: FontAwesome;}

a.usermenu {display: block; text-align: center; text-transform: uppercase; padding: 0.4em 0; border: solid 2px #b8b8b8; border-radius: 6px; color: #868686; text-decoration: none; width: 140px; margin: 0 auto; margin-bottom: 1em;}
a.usermenu:hover, a.usermenu:focus {color:#dd4536; border-color: #dd4536;}
.userpanel {margin: 1em 0; width: 320px;}

#wizard {padding-top: 0.9em;}
#wizard select {width: 47%; margin-right: 3%; margin-bottom: 1em; float: left; color: #868686;}
#wizard select option {color: #666;}
#wizard input[type="submit"] {width: 47%; margin-right: 3%; margin-bottom: 1em; float: left; background: #f90; color: #fff; border-color: #f90;}

#adv1, #adv2, #adv3, adv4, #adv5 {width: 100%; margin-top: 1em; overflow: hidden;}
#adv1 {margin-top: 2.5em;}

.radio_navi_bar {margin: 1.2em 0;}
.radio_days_link, .radio_days_selected {display: inline-block; font-size: 0.9em; border-radius: 6px; border: solid 1px #a1a1a1; width: 21%; margin: 0.4em 1%; text-decoration: none; text-transform: uppercase; text-align: center; padding: 0.8em 0;}
.radio_days_link {background: #f1f1f1; color: #444;}
.radio_days_selected {background: #a1a1a1; color: #fff;}

/* tablet console horisontal */

@media screen and (max-width:840px) and (min-width:640px) {
  body {min-width: 600px; padding: 0 10px; font-size: 9pt;}
  h2 {font-size: 2em;} 
  header .logo {font-size: 1.6em; padding: 0.5em 0;}
  .up_lets {font-size: 1.2em;}
  a.r_m_links_big {font-size: 1.2em;}
  .isint {width: 59%;}
  .dlist {width: 8%;}
  .download_song {width: 25%;}
  .more_buttons a {font-size: 1.1em; width: 33%;}
  .song_info_likes > div {margin-right: 0.1em;}
  #s_desctop, #s_mobile {display: none;}
  #s_tablet {display: block;}
}

/* mobile phone */

@media screen and (max-width:640px) {
  body {min-width: 300px; padding: 0 0px;}
  
  header .logo {width: 56%; height: 18px;}
  header .subtitle {width: 0px; height: 39px;}
  header .b_login, header .b_menu {max-width: 45px; min-width: 20px; height: 17px; text-align: center; text-indent: 0;}
  #menu_f {display: block;}
  header .b_login span, header .b_menu span {padding: 0;}
  
  h2 {font-size: 1.5em; padding: 1.3em 0 0.5em;}
  
  p.announce, h2.announce {display: none}
  div.divider {height: 1.7em;}
  
  #left_block {display: none; position: absolute; top: 2.9em; left: -6px; width: 99%; min-height: 90%; background: #f1f1f1; padding-bottom: 2em; z-index: 1;}
  #left_block h2 {font-size: 1.2em; padding: 0.2em 0 0.6em 0.2em;}
  a.r_m_links_big, a.r_m_links {width: 47%; padding: 0.3em 1%; display: inline-block; font-size: 1.2em;}
  a.r_m_links {font-size: 1em;}
  a.r_m_links_big span {display: none;}
  #content {width: 97%; margin: 0 1.5%;}  
  #footer_info {font-size: 0.9em;}
  
  .subtitle > * {display: none;}  
  
  .likesbar {display: none;}
  .searchbar {width: 97%; margin: 0 1.5%;}
  .pagination {font-size: 1.2em;}
  .dtclear {display: none;}
  
  .blok_pesni .play {width: 10%;}
  .blok_pesni .play .ico {font-size: 1.7em; padding: 0.1em 0.2em 0.3em 0.4em;}
  .little_genre_in_list {line-height: 1.2em; display: inline-block;}
  .little_genre_in_list br {display: none;}
  .isint {width: 50%; font-size: 0.8em;}
  .dlist {width: 11%; padding-left: 2%; font-size: 0.8em;}
  .player-controls {padding: 1.4em 5% 0.5em 12%;}
  .player-controls .volume, .player-controls .controls {visibility:hidden; opacity:0;}

  a.download_song2 {width: 9%; padding: 0.2em 0;}
  .topl, .topl_added, .topl_deleted {width: 9%; padding: 0.2em 0;}
  a.download_song2 span, .topl span {display: none;}
  a.download_song2 i, .topl i {display: inline; font-style: normal; font-size: 1.3em;}
  .download_song a span {display: none;}
  .download_song a i {display: inline; font-style: normal; font-size: 1.3em;}
  .download_song {width: 10%;}
  .topl_added {padding: 0.2em 0 0.3em 0;}
  
  .mb_block {padding: 1em;}
  .mb_block h3 {padding: 0 0 0.3em;}
  .lyr {font-size: 1em;}
  .mb_block a.bio_img {float: none; width: auto;}
  .bio_block {float: none; width: auto; margin-left: 0;}
  .more_buttons a {width: 40%;}
  .other_info {padding: 2em 1em;}
  
  .artists a {font-size: 1.1em; width: 99%;} 
  .modalframe {width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0;}
  .switch {margin-top: 2em;}
  #modal a.cancel {font-size: 2em;} 
  
  .b_menu.active {background: #f1f1f1; color: #b2b2b2;}
  .b_menu.active:hover, .b_menu.active:focus {color: #000;}
  
  #s_desctop, #s_tablet {display: none;}
  #s_mobile {display: block;}
  
  .userpanel {margin-top: 3.5em; width: 100%;}

  #wizard {margin-top: 1.5em; padding-top: 0.4em;}
  #wizard select, #wizard input[type="submit"] {width: 96%;}
  #wizard input[type="submit"] {padding: 0.5em 0;}
  
  #adv2, #adv3 {height: 0px; overflow: hidden;}
  #adv1, #adv4, #adv5 {overflow: hidden;}
  #adv1 {margin-top: 1em;}
  
  .radio_days_link, .radio_days_selected {font-size: 0.7em;}
  
}