/**************
 *  ANIMACIA  *
 **************/
@keyframes jump {
    0%   {top:0px;}
    50%  {top:-3px;}
    100% {top:0px;}
}

/*******************
 *  FONTY a IKONY  *
 *******************/
@font-face {
  font-family: 'fontello';
  src: url(font/fontello.eot);
  src: url(font/fontello.eot#iefix) format('embedded-opentype'),
       url(font/fontello.woff) format('woff'),
       url(font/fontello.ttf) format('truetype'),
       url(font/fontello.svg#fontello) format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
.icon-menu:before { content: '\e800'; } /* '' */
.icon-search:before { content: '\e801'; } /* '' */
.icon-note-beamed:before { content: '\e802'; } /* '' */
.icon-globe:before { content: '\e803'; } /* '' */
.icon-right-open-big:before { content: '\e804'; } /* '' */
.icon-left-open-big:before { content: '\e805'; } /* '' */
.icon-cancel:before { content: '\e806'; } /* '' */
.icon-user:before { content: '\e807'; } /* '' */
.icon-home:before { content: '\e808'; } /* '' */


/****************
 *  STYLOVANIE  *
 ****************/
html { 
    height:100%;
}
body { 
    min-height:100%;
}
.hidden{
	display:none;
	visibility:hidden;
}
.right{
	float:right !important;
}

.wrapper{
	width:100%;
	height:100vh;
	position:relative;
}
#mobile .mobile-button{
	display:block;
}
#mobile .clear{
	
}
#mobile div{
	box-sizing: border-box;
}
#mobile #right-col,
#mobile #right-col #left-side,
#mobile #right-col #left-side .search,
#mobile #right-col #left-side .content,
#mobile #right-col #left-side .pager,
#mobile #right-col #left-side .pager .inner,
#mobile #statistics{
	width:100%;
	float:none;
}
#mobile,
#mobile .pager,
#mobile #player{
	overflow:hidden;
}
#mobile #radio-container,
#mobile #content .row:hover{
	width:100% !important;
}
.mobile-content{
    position: absolute;
    top:0;
    background: #fff;
    width:100%;
}
.mobile-content.active{
	right:-100%;
}
.mobile-content,
.sidebar,
#mobile .mobile-search{
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
}
#mobile .google-ad{
	padding-top:60px;
}

/** sidebar  **/
.sidebar{
    position: fixed;
    background: #197686;
    background: #138FA5;
    top: 0;
    bottom:0;
    z-index: 999;
    height: 100%;
    width: 100%;
    display: block;
    padding:0;
    height:100vh;
    width:100vw;
    overflow:auto;
    box-sizing: border-box;
}
.sidebar-left{
	left:-100%;
	right:auto;
}
.sidebar-right{
	left:auto;
	right:-100%;
}
.sidebar-left.active{
	left:0;
}
.sidebar-right.active{
	right:0;
}
.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.sidebar li {
    margin: 0;
    padding: 0;
}
.sidebar .toolbar a{
	color:#fff;
	text-decoration:none;
	width:100%;
	display: block;
    box-sizing: border-box;
}
.sidebar-left a {
    width: 100%;
    display: block;
    font-size: 16px;
    box-sizing: border-box;
    padding: 20px;
    color: #fff;
    text-decoration: none;
}
.sidebar-right .detail{
	margin-right:10px;
}
.sidebar a.cancel-link{
	font-size: 1em;
    text-transform: uppercase;
    padding: 20px 20px;
    margin-bottom: 10px;
    background: #0B515D;
    background: #197686;
}

/** navigacia **/
.nav-top{
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    padding:0 10px;
    height:60px;
    display:flex;
}
.nav-top.fixed{
	position:fixed;
	top:0;
	background:#fff;
	z-index: 998;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.nav-item{
	display:block;
	float:left;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:24px;
    flex:1;
}
.nav-link{
	width: 100%;
    display: block;
    text-align: center;
    line-height: 60px;
    text-decoration:none;
    padding:0;
}
a.nav-link,
a.nav-link:hover,
a.nav-link:visited,
a.nav-link:active{
	color:#0884F6;
	text-decoration:none;
}
.nav-item.menu{
	text-align:left;
}
.nav-item .nav-link.active{
	background:#197686;
	color:#fff;
}
.nav-item.nadpis{
	font-weight:bold;
}
.nav-item.hudba,
.nav-item.jazyk,
.nav-item.user{

}
.nav-item.hudba .icon-note-beamed{
	position:relative;
	top:0;
}
.nav-item.hudba .icon-note-beamed.active{
	animation:jump 1.5s infinite;
}


/** radio **/
.mobile-radio{
	visibility: hidden;
    height: 1px;
    position: relative;
    overflow:hidden;
}
.mobile-radio #player{
	width:340px;
}
.mobile-radio.active{
	height:auto;
	visibility:visible;
	margin:0 auto;
	width: 340px;
}
.sidebar-right .mobile-radio a{
	color:darkblue;
}

/** search **/
#mobile .mobile-search{
	width: 100%;
    display: block;
    position: fixed;
    top: -60px;
    left: 0;
    height: 60px;
    background: #fff;
    z-index: 1;
    box-sizing: border-box;
    padding: 15px 10px;
    background:#138FA5;
}
#mobile .mobile-search.active{
	top:0;
}
#mobile .mobile-search form{
	display:flex;
}
#mobile .mobile-search .mobile-button{
	flex:1;
	text-align:center;
	color:#fff;
}
#mobile .mobile-search .search-box{
	flex:8;
	padding: 0 5px;
	border: none;
    color: #197686;
    box-sizing: border-box;
}
#mobile #right-col #left-side .search{
	padding: 0 10px;
    width: 100%;
    max-width: 100%;
    display: block;
    overflow: hidden;
}
#mobile #main-body .search {
    display: none !important;
}
#mobile #right-col #left-side .search-box{
    width: 70% !important;
    margin: 0 5% 0 0 !important;
    box-sizing: border-box;
    padding: 0 5px;
}
#mobile #right-col #left-side .search .button{
	width: 22% !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    min-width: 80px;
    height: 30px;
}
#mobile #right-col #left-side .search .left-corner{
	padding-right:0 !important;
}
/** pager **/
#mobile .left_buttons{
	width:20% !important;
}
#mobile .middle_buttons{
	width:60% !important;
}
#mobile .right_buttons{
	width:20% !important;
}
#mobile .middle_buttons .centred-ul{
	margin:0 !important;
}
/** content **/
#mobile .logo{
	margin-top:15px;
	text-align:center;
}
#mobile .slogan{

}
#mobile .slogan h2{
	color: #0884F6;
    line-height: 1.3em;
    text-align: center;
    font-size:14px;
    margin:0 0 5px;
}
#mobile #content{
	box-sizing:border-box;
}
.mobile-content #song-filter{
	margin: 10px 0 0 0;
    width: 100%;
    display:block;
    overflow: hidden;
    padding: 0 10px;
}
.mobile-content .all-songs a, 
.mobile-content .downloadable-songs a {
    width: 80%;
    float: left;
    margin: 0 0 0 0;
    padding: 0 0 0 25px;
    box-sizing: border-box;
    display: block;
    line-height: 24px;
}
.mobile-content .downloadable-songs a {
	width: 60%;
}
.mobile-content .downloadable-songs img{
	background:#77C100;
}
#mobile #content .row{
	margin-bottom:10px;
	padding:0 10px !important;
}

#mobile #content .header .row{
	margin-bottom:0;
}
#mobile .header{
	background: #D5EBFF;
    color: darkblue !important;
    margin: 10px 0;
    padding: 2px 0;
}
#mobile .header .check{
	width:5% !important;
}
#mobile .check img{
	margin:0 !important;
}
#mobile .header .type{
	width: 20% !important;
    margin: 0 !important;
}
#mobile #ranklist .header .type{
	width:25% !important
}
#mobile .header .song-details{
	display: block;
    float: left;
    overflow: hidden;
    width: 75% !important;
}
#mobile #ranklist .header .song-details{
	width: 70% !important;
}
#mobile .header .song-details .song,
#mobile .block-body .song{
	width: 70% !important;
    margin: 0 !important;
    padding: 0 0 0 5px !important;
}
#mobile .header .song-details .song .middle{
	padding: 8px 0 0 0;
}
#mobile .header .song-details .user{
	width: 20% !important;
    margin: 0 !important;
}
#mobile .header .song-details .views{
	width: 10% !important;
    word-wrap: break-word;
    display:none !important;
}
#mobile #ranklist .number{
	width:5% !important;
}
#mobile .block-body .inner-block{
	width:25% !important;
}
#mobile .block-body .inner-block .check{
	width:25% !important;
}
#mobile .block-body .inner-block .type{
	width: 75% !important;
    margin: 0 !important;
    background-position: center center !important;
}
#mobile .block-body .song-details{
	width:75% !important;
	display: block;
    overflow: hidden;
}
#mobile #ranklist .song-details{
	width:70% !important;
}
#mobile .block-body .middle{
	max-width:100%;
}
#mobile .block-body .user{
	width: 20% !important;
	margin: 0 !important;
}
#mobile .block-body .user a{
	font-size:10px;
}
#mobile .block-body .views,
#mobile .block-body .download{
	width: 10% !important;
}
#mobile .block-body .views{
	display:none !important;
}
#mobile .block-body .download a{
	margin: 0;
}
#mobile #language-block{
	margin: 18px 0 0 8px;
}
#mobile #lang_arrow{
	display:none;
}
#mobile #lang_msdd{
	margin:0 auto;
}
#mobile #lang_title{
	width: auto !important;
	height: auto !important;
}
#mobile #lang_title img{
	max-width:100%;
}
#mobile #regular-page .header{
	box-sizing: border-box;
    width: 100%;
    padding: 5px 10px;
    display: block;
    height: auto;
}
#mobile #messages{
	width:100%;
	max-width:100%;
}
#mobile #messages .messages-table{
	max-width: 100%;
	width:100%;
    overflow: hidden;
    box-sizing: border-box;
    display: block;
}
#mobile #messages .footer,
#mobile #messages .header,
#mobile #message-add,
#mobile #message-page h1,
#mobile #message-add .footer,
#mobile #message-page input,
#mobile #message-page .textarea-box,
#mobile #message-page textarea,
#mobile #message-page #choose-song,
.dialog_buttons,
#mobile #message-added h1,
#mobile #message-added .footer,
#mobile #login-page,
#mobile #login-page h2,
#mobile .warning-message,
#mobile #login-page .log-in,
#mobile #login-page .footer,
#mobile .under-login-line,
#mobile #login-page .inner,
#mobile #registration-page,
#mobile #registration-page h2,
#mobile #registration-page .footer,
#mobile #registration-successfull h2,
#mobile #registration-successfull .footer,
#mobile #registration-successfull .inner,
#mobile #rank-list-page,
#mobile .playlists,
#mobile .playlists h2,
#mobile .songs,
#mobile .songs h2,
#mobile #time-list,
#mobile #song-detail,
#mobile #comments,
#mobile #comments .comment,
#mobile #comments .comment .text,
#mobile #forgotten-password h1,
#mobile #forgotten-password .footer,
#mobile #forgotten-password #my-email,
#mobile .profil-page-view,
#mobile .profil-page-view h2,
#mobile .profil-page-view .footer,
#mobile #category-page,
#mobile .category-name,
#mobile .add-song-page,
#mobile .add-song-page h2,
#mobile .add-song-page .footer,
#mobile .add-song-page #title,
#mobile .add-song-page textarea,
#mobile .profil-page-edit,
#mobile .profil-page-edit h2,
#mobile .profil-page-edit .footer,
#mobile .profil-page-edit input[type="text"],
#mobile input[type="text"],
#mobile input[type="password"],
#mobile textarea,
#mobile input[type="file"],
#mobile .art-profil-request,
#mobile .art-profil-request h2,
#mobile .art-profil-request .footer,
#mobile .art-profil-request input[type="text"],
#mobile .art-profil-request textarea,
#mobile .art-profil-request .upload-file,
#mobile .art-profil-request .agreement,
#mobile #fav-playlists h2,
#mobile .viral,
#mobile .add-song-page .upload-file,
#mobile .profil-page-edit .phone,
#mobile .profil-page-edit .upload-file,
#mobile #message-detail,
#mobile #message-detail .title-box,
#mobile #message-page #message-detail h2,
#mobile #message-page .footer{
	width:100% !important;
	box-sizing:border-box;
	float:none !important;
	overflow:hidden;
}
#mobile #message-page .messages-table .left-col{
	width:25% !important;
}
#mobile #message-page .messages-table .right-col{
	width:75% !important;
}
#mobile #message-page .header,
#mobile #message-page h1,
#mobile #message-added h1,
#mobile #login-page h2,
#mobile #registration-page h2,
#mobile #registration-successfull h2,
#mobile .playlists h2,
#mobile .songs h2,
#mobile #forgotten-password h1,
#mobile .profil-page-view h2,
#mobile .category-name,
#mobile .add-song-page h2,
#mobile .profil-page-edit h2,
#mobile .art-profil-request h2,
#mobile #fav-playlists h2{
	background-image: none !important;
    border-radius: 6px 6px 0 0;
    height: auto !important;
    width: 100% !important;
    white-space: normal;
}
#mobile #message-page .footer,
#mobile #message-added .footer,
#mobile #login-page .footer,
#mobile #registration-page .footer,
#mobile #registration-successfull .footer,
#mobile #forgotten-password .footer,
#mobile .profil-page-view .footer,
#mobile .add-song-page .footer,
#mobile .profil-page-edit .footer,
#mobile .art-profil-request .footer{
    background-image: none;
    border-radius: 0 0 6px 6px;
    height: auto;
}
#mobile #upload_form #message-left,
#mobile #upload_form #message-right{
	float: none;
    margin: 0 auto;
}
#mobile #upload_form .upload-image{
	margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}
#mobile #upload_form .image{
	width: 100%;
    text-align: center;
    margin:0 auto;
}
#mobile #chosen_song{
	text-align: center;
}
#mobile .float-center{
	width: 100%;
    text-align: center;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}
#mobile .request{
	text-align: center;
    margin: 0 auto;
    position: relative;
    display: block;
    overflow: hidden;
    float: none;
}
#simplemodal-container {
	width:90% !important;
	top:10px !important;
	max-height: 90%;
    overflow: auto;
	
}
#simplemodal-container .upload-file{
	width: 100%;
	text-align:center;
}
#simplemodal-container #fileName{
	margin: 0 auto;
    float: none;
}
#simplemodal-container .request{
	text-align: center;
    float: none;
    margin: 0 auto;
    position:relative;
}
#simplemodal-container .request .file_input_hidden,
#mobile .button .file_input_hidden{
	height: 200%;
    top: -100%;
    width: 100% !important;
}
#simplemodal-container .col-01,
#simplemodal-container .col-03,
#simplemodal-container .col-04{
	display:none !important;
}
#simplemodal-container #choose-song,
#simplemodal-container .search,
#simplemodal-container .message-pager{
	width:100% !important;
	float:none;
	overflow:hidden;
	height:auto !important;
}
#simplemodal-container .search input{
	float:none;
}
#simplemodal-container .left-button,
#simplemodal-container .pages,
#simplemodal-container .right-button,
#simplemodal-container .table,
#simplemodal-container .header,
#simplemodal-container .col-02{
	width:100% !important;
	display:block;
	float: none !important;
	text-align:left !important;
	height: auto !important;
    overflow: hidden;
}
#simplemodal-container .col-02{
	padding:0 5px;
}
#simplemodal-container .pages ul{
	margin:0;
	padding:0;
	text-align:left !important;
}
#simplemodal-container .modalCloseImg.simplemodal-close{
	top:0 !important;
	right:5px !important;
}
#simplemodal-container #pop-inner{
	display: block;
    overflow: hidden;
}
#mobile .thank-you-message > div {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
#mobile #login_form .name,
#mobile #login_form .pass{
	height:30px;
}
#mobile #login_form input{
	width:260px !important;
	max-width:100%;
}
#mobile #login_form .login{
	margin-top:15px;
}
#mobile .under-login-line{
	text-align: left;
    overflow: hidden;
    width: 100%;
    height: auto !important;
}
#mobile .under-login-line .register,
#mobile .under-login-line .lost-pass{
	float:none !important;
	text-align:left;
}
#mobile #registration-page .footer{
	padding-top:15px;
}
#mobile #registration-page .footer .register{
	margin-top:0 !important;
}
#mobile #playlist{
	padding:0 !important;
}
#mobile #time-list{
	padding: 0;
    height: auto !important;
    border: none;
}
#mobile .folder {
   	width: 100%;
    background-image: none !important;
    border: none !important;
    display: block;
    float: none !important;
    overflow: hidden;
    padding: 0 !important;
}
#mobile .folder a{
	width: 100%;
    background-image: none !important;
    border-top: 1px solid #0D6131;
    padding: 3px 5px !important;
}
#mobile .download-song {
    text-align: left;
    margin: 0 0 20px !important;
}
#mobile #stars{
	float:none !important;
}
#mobile #add-comment{
	margin-bottom:25px;
}
#mobile #add-comment textarea,
#mobile .add-song-page #file_url{
	width: 100% !important;
    box-sizing: border-box;
}
#mobile #add-comment .button,
#mobile .profil-page-edit .upload-file .button{
	float:left !important;
}
#mobile .mark-wrong-song{
	width:100% !important;
	height:auto !important;
}
#mobile .art-profil-request .upload-file .button{
	margin: 0 auto !important;
    float: none !important;
}
#mobile .add-song-page #fileName{
	width: 100% !important;
    box-sizing: border-box;
    float: none !important;
}
#mobile .add-song-page .upload-file .button{
	float:none !important;
}
#mobile #message-detail .plain-header {
    width: 100% !important;
    background-image: none !important;
    border-radius: 6px 6px 0 0;
}
#mobile #message-detail #message-left, 
#mobile #message-detail #message-right {
    float: none;
    margin: 0 auto;
}
#mobile #message-right .row{
	padding:0;
}
#mobile #message-right #chosen_song {
    width: 235px !important;
}
#mobile #right-col #left-side .pager .centred-scalable-button{
	display: inline-block;
    padding: 0;
}
#mobile #right-col #left-side .pager .middle_buttons .centred-ul{
	padding:0 !important;
}
#mobile #right-col #left-side .pager .centred-scalable-button > a, 
#mobile #right-col #left-side .pager .centred-scalable-button > span,
#mobile #right-col #left-side .pager .scalable-button > a {
    border-radius:4px;
    display: inline-block;
    height: 30px;
    box-sizing: border-box;
    background: #01bff3; /* Old browsers */
	background: -webkit-linear-gradient(#01bff3 0%, #04a2e6 100%);
	background: -moz-linear-gradient(#01bff3 0%, #04a2e6 100%);
	background: -o-linear-gradient(#01bff3 0%, #04a2e6 100%);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#01bff3), to(#04a2e6));
	background: linear-gradient(#01bff3 0%, #04a2e6 100%); /* FF3.6-15 */
	box-shadow:inset 0px 0 0 1px #0E68BD;
}
#mobile .centred-scalable-button .corner,
#mobile .scalable-button .corner{
	visibility:hidden;
}
/*#mobile .dd .ddChild{
	top:-189px !important;
	left:-6px;
}
#mobile .dd .ddChild.noBorderTop{
	top:47px !important;
}
#mobile .dd{
	box-sizing: content-box;
    margin: 0;
    width: 100%;
    text-align: center;
    height: 100%;
}
#mobile #lang_title{
	padding: 19px 0;
    z-index: 99 !important;
    border: none;
    background: none;
}
*/
#mobile #login-page .log-in .inner{
	height: auto !important;
}
#mobile #message-page #message-add .choose-song .button, 
#mobile #message-page #message-detail .no-song{
	margin-top:10px;
}
/**********
 *  Grid  *
 **********/
.container {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
.row{
	width:100% !important;
	display:block;
	overflow:hidden;
	padding:0 10px;
}
.column,
.columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}
.one.column,
.one.columns{ width: 4.66666666667%; }
.two.columns{ width: 13.3333333333%; }
.three.columns{ width: 22%;            }
.four.columns{ width: 30.6666666667%; }
.five.columns{ width: 39.3333333333%; }
.six.columns{ width: 48%;            }
.seven.columns{ width: 56.6666666667%; }
.eight.columns{ width: 65.3333333333%; }
.nine.columns{ width: 74.0%;          }
.ten.columns{ width: 82.6666666667%; }
.eleven.columns{ width: 91.3333333333%; }
.twelve.columns{ width: 100%; margin-left: 0; }

.one-third.column{ width: 30.6666666667%; }
.two-thirds.column{ width: 65.3333333333%; }

.one-half.column { width: 48%; }

.container:after,
.row:after {
	content: "";
	display: table;
	clear: both; 
}

#mobile .content .block-body .date{
	display:none !important;
}
#mobile .check img {
	width:25px !important;
	height:25px;
}
#message-detail  .gallery img{
	height: 192px;
}

#message-detail .image{
	width:202px !important;
	height:202px !important;
}

#message-page #message-detail .no-song {
	height:202px !important;
}

#mobile .message-text {
	width: 100%;
}

#regular-page .all-songs{
	clear:both;
	width:80%;
	float:left;
}
#popup .dialog_body {
	width:90%;
}

#popup .uiButtonConfirm{
	position:relative;
	float:left;
	margin-bottom:15px;
}
#popup .dialog_buttons{
	height:auto !important;
}