body {
  height: 100%;
}
 
.page {
   min-height: 100%;
   position: relative;
}

footer {
    text-align: center;
    border-top: 1px solid #4299d8;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
}

.pleer{
   background: rgba(42, 132, 197, 0.9);
}

#radio-stream:active{
   box-shadow: none; 
}

#radio-stream {
    background: none;
    border: none;
    outline: none;
}

#random, #pleer-stream {
    border: none;
    background: none;
}

#pleer-stream img {
    width:35px;
}

#goroda {
  max-height: 250px;
  position: relative;
  overflow: hidden;
}
#goroda-open {
  overflow: visible;
  height: auto;
}
#goroda-open #toggle {
  display: none;
}
#toggle {
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20%;
}
#gorodaP, #gorodaPP {
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    color: red;
    cursor: pointer;
}
.mill p {
    font-weight:bold;
}

.block-top {
    background: #d4d4d457;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 20px;
}

.grey {
   margin-top: 15px;
   margin-bottom: 10px;
   text-align: center;
   padding-top: 10px;
}

.grey-glav {
   margin-top: 15px;
   margin-bottom: 10px;
   padding-top: 10px;
   padding-left: 50px;
   padding-bottom: 10px;
   background: #d4d4d457;
   border-radius: 20px;
   
}

.rowM {
   margin-top: 20px;
   overflow: hidden;
}

.rowM>a  {
    float: left;
    width: 148px;
    margin-right: 10px;
}

@media screen and (max-width: 480px) {	
	.rowM>a {
    float: left;
    width: 130px;
    margin-right: 10px;
}
}


.rowM>a div {
    text-align: center;
    width: 148px;
    height: 160px;
    margin-bottom: 10px;
    margin-right: 0px;
}
.rowM>a img {
    position: relative;
    margin: auto;
    width: 80px;
}

.rowM>a p {
    border-top: 1px dashed #d3d3d3;
    text-align: center;
    margin-top: 15px;
    padding-top: 7px;
    font-weight: bold;
}


.rowM>a:hover {
    text-decoration: underline;
}

.rowM>a:hover img {
    /*margin: 8px 0 11px 7px;*/
    opacity: 0.8;
    height: 90px;
    width: 90px;
}

.rowM>a:hover p {
  margin-top: 10px;
}

.rowGlavM {
   margin-top: 20px;
   overflow: hidden;
}

@media screen and (max-width: 480px) {
    .rowGlavM {
     margin-top: 40px;
     overflow: hidden;
}
}

.rowGlavM>a  {
    float: left;
    width: 148px;
    margin-right: 10px;
}

@media screen and (max-width: 480px) {	
	.rowGlavM>a {
     width: 250px;
}
}

.rowGlavM>a div {
    text-align: center;
    width: 148px;
    height: 200px;
    margin-bottom: 10px;
    margin-right: 0px;
}

@media screen and (max-width: 480px) {	
    .rowGlavM>a div {
    width: 290px;
    height: 60px;
    margin-bottom: 15px;
    margin-right: 0px;
    border-top: 1px dashed #d3d3d3;
}
}

.rowGlavM>a img {
    position: relative;
    margin: auto;
    border-radius: 10px;
}

@media screen and (max-width: 480px) {
    .rowGlavM>a img {
    position: relative;
    margin: auto;
    width: 90px;
    float: left;
    padding: 10px;
    border-radius: 20px;
}
}

.rowGlavM>a p {
    border-top: 1px dashed #d3d3d3;
    text-align: center;
    margin-top: 15px;
    padding-top: 7px;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .rowGlavM>a p {
    border-top: none;
    margin-top: 25px;
    padding-top: 7px;
    padding-left: 105px;
    font-weight: bold;
    text-align: left;
    font-size: 16px;
}
}

@media screen and (min-width: 481px) {
.rowGlavM>a:hover {
    text-decoration: underline;
}
}

@media screen and (min-width: 481px) {
.rowGlavM>a:hover img {
    /*margin: 8px 0 11px 7px;*/
    opacity: 0.8;
    height: 105px;
    width: 105px;
}
}

@media screen and (min-width: 481px) {
.rowGlavM>a:hover p {
  margin-top: 10px;
}
}

.rowMlinks {
   margin-top: 15px;
   overflow: hidden;
}

@media screen and (max-width: 480px) {
    .rowMlinks {
     margin-top: 30px;
     overflow: hidden;
}
}

.rowMlinks>a  {
    float: left;
    width: 250px;
    margin-right: 10px;
}

@media screen and (max-width: 480px) {	
	.rowMlinks>a {
     width: 250px;
}
}

.rowMlinks>a div {
    text-align: center;
    position: relative;
    width: 290px;
    height: 31px;
    margin-bottom: 20px;
    margin-right: 0px;
    border-top: 1px dashed #d3d3d3;
}

@media screen and (max-width: 480px) {	
    .rowMlinks>a div {
    width: 290px;
    height: 60px;
    margin-bottom: 31px;
    margin-right: 0px;
    border-top: 1px dashed #d3d3d3;
}
}

.rowMlinks>a img {
    position: relative;
    margin: auto;
    width: 50px;
    float: left;
    padding: 4px;
}

@media screen and (max-width: 480px) {
    .rowMlinks>a img {
    position: relative;
    margin: auto;
    width: 90px;
    float: left;
    padding: 10px;
    border-radius: 20px;
}
}

.rowMlinks>a p {
    border-top: none;
    margin-top: 9px;
    padding-top: 5px;
    padding-left: 80px;
    font-weight: bold;
    text-align: left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 480px) {
    .rowMlinks>a p {
    border-top: none;
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 100px;
    font-weight: bold;
    font-size: 15px;
}
}

@media screen and (min-width: 767px) {
    .rowMlinks>a:hover img {
    /*margin: 8px 0 11px 7px;*/
    opacity: 0.8;
    height: 52px;
    width: 52px;
}
}

    
.text-janre {
 width: 75%;
}

@media screen and (max-width: 480px) {	
	.text-janre {
    width: 100%;
}
}

.item-radio {
padding-right: 15px;

}

.range{
    -webkit-appearance: none;
    border-radius:2px;
    outline : none;
    border:1px solid #767676;
    background:-webkit-linear-gradient(left ,#767676 0%,#767676 80%,#fff 80%, #fff 100%);
    vertical-align: middle;
}
.range::-webkit-slider-thumb{
    -webkit-appearance: none;
    width:18px;
    height:18px;
    background:#D4D4D4;
    /*border-radius:18px;*/
    cursor:pointer;
    /*transition:.1s;*/
}
.range::-webkit-slider-thumb:hover, .range::-webkit-slider-thumb:active{
    width:18px;
    height:18px;
}
@-moz-document url-prefix()
{
    .range{
        width: 50%;
        cursor: pointer;
    }
    .range::-moz-range-thumb{
        -webkit-appearance: none;
        /*width:20px;
        height:18px;*/
        background:#D4D4D4;
        cursor:pointer;
        border:2px solid #d4d4d4;
        border-radius: 1px;
    }
    .range::-moz-slider-thumb:hover, .range::-moz-slider-thumb:active{
        width:18px;
        height:18px;
    }
    input[type=range]::-moz-focus-outer {
        border: 0;
    }
    .range::-moz-range-progress {
      background-color: #767676;
    }
    .range::-moz-range-track {
        background-color: #fff;
    }

}
.grey {
    background: #d4d4d457;
    border-radius: 20px;
}

@media (min-width: 500px) {
    .threecolumn {
        list-style-position: inside;
        -moz-column-count:2; /* Firefox */
        -webkit-column-count:2; /* Safari and Chrome */
        column-count:2;
        list-style-type: decimal;
    }
}  
@media (min-width: 600px) {
    .twocolumn {
        list-style-position: inside;
        -moz-column-count:2; /* Firefox */
        -webkit-column-count:2; /* Safari and Chrome */
        column-count:2;
        list-style-type: decimal;
        font-size: 15px;
    }
}    

@media (min-width: 600px) {
    .twocolumn p{
margin: 0 0 4px;
    }
} 

.twocolumn img{
        margin-right: 5px;
    }
      
@media (max-width: 767px) {
    .twocolumn img{
        padding: 0px 0px 0px;
    }
}    

.twocolumn li{
        padding-bottom: 3px;
    }

@media (max-width: 600px) {
    .twocolumn li{
        padding-bottom: 7px;
    }
}       
    
    .gray .twocolumn{
        margin: 40px 0;
        line-height: 2.5;
    }
    .twocolumn [class^="icon-"], .twocolumn [class*=" icon-"] {
        padding: 0 20px 0 0;
        vertical-align: middle;
        font-size: 21px;
    }

    .threecolumn{
    list-style-type: circle;
}
@media (min-width: 991px) {
    .threecolumn {
        list-style-position: inside;
        -moz-column-count:3; /* Firefox */
        -webkit-column-count:3; /* Safari and Chrome */
        column-count:3;
    }
}

@media (max-width: 600px) {
    .threecolumn li{
        margin-top: 7px;
    }
}

.m-btn{
    color: #fff;
background-color: #d2322d;
border: 1px solid transparent;
border-color: #ac2925;
display: inline-block;
padding: 6px 12px;
border-radius: 20px;

}
.m-btn-danger:hover, .m-btn-danger:focus, .m-btn-danger:active, .m-btn-danger.active {
    color: #4299d8;
    background-color: white;
border-color: #ac2925;
text-decoration: none;

}
.center{
 display: block;
 margin: 0 auto;
}
.content {
   padding-bottom: 100px;
}

.reiting {
    float: right;
    margin-right: 10px;
    background: #c0c5cc;
    color: white;
    width: 50px;
    text-align: center;
    line-height: 25px;
    border-radius: 26px;
    margin-top: 5px
}

.reiting-catalog {
    float: right;
    margin-right: 5px;
    margin-top: -53px;
    background: #c0c5cc;
    color: white;
    width: 35px;
    text-align: center;
    line-height: 25px;
    border-radius: 26px;
}

@media (max-device-width:481px) {
.reiting-catalog {   
  margin-top: -48px;
  }
}

.catalog-adx {
overflow: hidden;
float: right;  
width: 160px;
margin-top: 15px;
}

 @media (max-device-width:700px) {
.catalog-adx {display: none;}
}

.catalog-adx-ban {
width: 160px;
height: 600px;
}