/*  баннер в шапке... скрывал на время разработки, а нужен он или нет - понятия не имею.  Возможность скрыть его есть.*/
/* попросили скрыть */
#adfox_159060066472441599,
#adfox_31339995244,
#adfox_12797392454,
#yandex_rtb_2251270359{display:none;}
.container  {margin-bottom:0px !important;}
.container > div:not(.footer__info-wrapper) {width:0px !important;height:0px !important;margin-bottom:0px !important;}

body  {
    background: #fff;
}

html, body {
  font-family: 'Montserrat', sans-serif;
  color: #272727;
  font-size: 16px;
}

.umor__chart{
    width: 100%;
    display: border-box;
    margin-bottom:150px
}

/* Шапка чарта */
/* Шапка чарта */
.umor__chart_header{
    background:url('/design/images/actions/2022/umor_chart/1920.png') top center no-repeat;
    background-size:cover;
    height:640px;
    max-width: 1920px;
    position: relative;
}
    @media (max-width: 1680px){
        .umor__chart_header {
            background: url('/design/images/actions/2022/umor_chart/1920.png') top center no-repeat;
            height: 560px !important;
            background-size: contain !important;
        }
    }
    @media (max-width: 1024px){
        .umor__chart_header{
            background:url('/design/images/actions/2022/umor_chart/1024.png') top center no-repeat;
            height:527px;
        }
    }
    @media (max-width: 768px){
        .umor__chart_header{
            background:url('/design/images/actions/2022/umor_chart/375(1).png') right top no-repeat;
            height:627px;
            background-size: contain !important;
        }
    }
    @media (max-width: 412px){
        .umor__chart_header{
            height: 520px !important;
        }
    }
    
    @media (max-width: 375px){
        .umor__chart_header{
            height:490px !important;
            background-size: contain !important;
        }
    }


























.umor__chart_booble{
    width: 1053px;
    height: 316px;
    background: url('/design/images/actions/2022/umor_chart/track_booble.png') top center no-repeat;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: baseline;
	align-content: stretch;
	margin:0 auto ;
    position: relative;
    bottom:-610px;
}

    @media (max-width: 1680px){
        .umor__chart_booble{
            bottom:-530px;
        }
    }
    @media (max-width: 1440px){
        .umor__chart_booble{
            bottom:-450px;
        }
            
    }
    @media (max-width: 1480px){
        .umor__chart_booble{
            bottom:-471px;
        }
            
    }
    @media (max-width: 1280px){
        .umor__chart_booble{
            bottom:-400px;
        }
            
    }
    @media (max-width: 1080px){
        .umor__chart_booble{
            bottom:-340px;
        }
    }
    @media (max-width: 1024px){
        .umor__chart_booble{
            bottom:-490px;
            width: 818px;
            height: 245px;
            background: url('/design/images/actions/2022/umor_chart/track_booble1024.png') top center no-repeat;
            font-size: 18px;
            line-height: 22px;
            padding:10px 20px 0 20px;
        }
    }
    
    @media (max-width: 810px){
    .umor__chart_booble {
           bottom: -390px;
          width: 798px;
          height: 245px;
          background: url('/design/images/actions/2022/umor_chart/track_booble1024.png') top center no-repeat;
          font-size: 18px;
          line-height: 22px;
          padding: 10px 20px 0 20px;
        }
    }
    @media (max-width: 768px){
    .umor__chart_booble {
          bottom: -540px;
          width: 668px;
          height: 245px;
          background: url('/design/images/actions/2022/umor_chart/track_booble1024.png') top center no-repeat;
          background-size: contain;
        }
    }
     @media (max-width: 580px){
        .umor__chart_booble {
          width: 100%;
          background: url('/design/images/actions/2022/umor_chart/track_booble375.png') top center no-repeat;
          bottom: -290px;
          background-size: contain;
        }
    }
    @media (max-width: 428px){
        .umor__chart_booble {
            bottom: -297px;
        }
    }
    @media (max-width: 412px){
        .umor__chart_booble {
         bottom: -286px;
           height: 216px;
        }
    }
    
     @media (max-width: 390px){
        .umor__chart_booble {
         bottom: -272px;
        }
    }
     @media (max-width: 384px){
        .umor__chart_booble {
         bottom: -266px;
        }
    }
    @media (max-width: 375px){
    .umor__chart_booble {
          bottom: -260px;
          background: url('/design/images/actions/2022/umor_chart/track_booble375.png') top center no-repeat;
            background-size: auto;
          background-size: contain !important;
          height: 216px;
          width: 100%;
        }
    }
    @media (max-width: 360px){
        .umor__chart_booble {
          bottom: -250px;
        }
    }
.umor__chart_info{
	font-size: 22px;
    line-height: 33px;
    font-weight: bold;
    text-align: center;
    color: #000000;
    padding:92px 40px 0 40px;
}


    @media (max-width: 1024px){
        .umor__chart_info{
            font-size: 18px;
            line-height: 22px;
            padding:60px 5px 0 5px;
        }
    }
    
    @media (max-width: 768px){
        .umor__chart_info {
          font-size: 16px;
          line-height: 22px;
          padding: 30px 5px 0 5px;
        }
    }    
    @media (max-width: 412px){
        .umor__chart_info {
          font-size: 13px;
          line-height: 18px;
          padding: 32px 5px 0 5px;
        }
    }
    @media (max-width: 375px){
        .umor__chart_info {
          font-size: 11px;
          line-height: 22px;
          padding: 19px 5px 0 5px;
        }
    }
 .umor__chart_booble span{
    text-transform:uppercase;
}

/*Сам чарт*/
.umor__chart_wrap{
    width: 100%;
    background:url('/design/images/actions/2022/umor_chart/track_back_right.png?v=1') top right repeat-y,
                url('/design/images/actions/2022/umor_chart/track_back_left.png?v=1') top left repeat-y;
}
    @media (max-width: 1080px){
        .umor__chart_wrap{
            background-size: 20%;
        }
    }
    @media (max-width: 1024px){
        .umor__chart_wrap{
            background: url('/design/images/actions/2022/umor_chart/track_back_1024.png') top center no-repeat;
            font-size: 18px;
            line-height: 22px;
        }
    }
    @media (max-width: 810px){
        .umor__chart_wrap {
          background: none;
        }
    }
    @media (max-width: 768px){
        .umor__chart_wrap {
          font-size: 16px;
          line-height: 22px;
        }
    }
.umor__chart_block{
    margin:0 auto;
    width: 720px;
}    
    @media (max-width: 768px){
        .umor__chart_block {
          margin: 0 auto;
          width: 95%;
          
        }
    }
    @media (max-width: 375px){
        .umor__chart_block {
          width: 100%;
        }
    }
.umor__chart_title{
    font-size: 32px;
    line-height: 39px;
    text-align: center;
    color: #000000;
    padding:300px 0 40px 0;
    font-weight: bold;
}
    @media (max-width: 1024px){
        .umor__chart_title {
          padding-top: 250px;
        }
    }
    
    @media (max-width: 810px){
        .umor__chart_title {
          padding-top: 125px;
        }
    }
    @media (max-width: 768px){
        .umor__chart_title {
          padding-top: 170px;
        }
    }
    @media (max-width: 580px){
        .umor__chart_title {
          padding-top: 5px;
        }
    }
     @media (max-width: 412px){
        .umor__chart_title {
          font-size: 23px;
          line-height: 39px;
          font-weight: bold;
        }
    }
     @media (max-width: 375px){
        .umor__chart_title {
          padding-top: 0px;
          font-size: 18px;
            line-height: 22px;
        }
    }
    
.umor__chart_subtitle{
    width: 90%;
    background: rgb(245,0,150);
    background: linear-gradient(138deg, rgba(245,0,150,1) 0%, rgba(180,0,230,1) 100%, rgba(180,0,230,1) 100%);
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
	font-size: 22px;
    line-height: 29px;
    text-align: center;
    border-radius:40px;
    color: #fff;
    padding:20px 0 20px 0;
    margin:auto auto 40px auto;
    animation: pulse 0.9s infinite;
}    

@keyframes pulse {
	0% {
		transform: scale(0.97);
	}
	20% {
		transform: scale(0.80);
	}
	70% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.97);
	}
}



    
/*  Список треков  */
.umor__chart_list{
    /*margin:0 0 160px 0;*/
}
.umor__chart_item{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	width: 720px;
    height: 140px;
    background: #FBFBFB;
    border: 5px solid #EFEFEF;
    border-radius: 18px;
    margin-bottom:20px;
}
    
    @media (max-width: 768px){
        .umor__chart_item{
            width: 95%;
            height: 70px;
            margin:0 auto 10px auto;
        }
    }
    
    @media (max-width: 375px){
        .umor__chart_item{
            width: 95%;
            height: 70px;
            margin:0 auto 10px auto;
        }
    }

.umor__chart_item_img{
    width: 17%;
    padding:0 0 0 20px;
}

    @media (max-width: 768px){
        .umor__chart_item_img{
            padding:0 0 0 4px;
            width: 9%;
        }
    }
    @media (max-width: 428px){
        .umor__chart_item_img{
            width: 19%;
        }
    }
    @media (max-width: 414px){
        .umor__chart_item_img{
            width: 19%;
        }
    }
    @media (max-width: 412px){
        .umor__chart_item_img{
            width: 18%;
        }
    }
    @media (max-width: 375px){
        .umor__chart_item_img{
            padding:0 0 0 6px;
        }
    }

.umor__chart_item_player{
    width: 5%;
}
    @media (max-width: 412px){
        .umor__chart_item_img{
            width: -5%;
        }
    }

.umor__chart_item_name{
    width: 50%;
}
    
    @media (max-width: 428px){
        .umor__chart_item_name{
            margin-left:10px;
        }
    }
    @media (max-width: 375px){
        .umor__chart_item_name{
            width: 50%;
            margin-left:10px;
        }
    }
.umor__chart_item_trackname{
    font-weight:bold;
    font-size: 22px;
    line-height: 27px;
    white-space: nowrap;
}
    @media (max-width: 428px){
        .umor__chart_item_trackname{
            font-size: 16px;
            line-height: 20px;
            font-weight:bold;
        }
    }

    @media (max-width: 375px){
        .umor__chart_item_trackname{
            font-size: 14px;
            line-height: 20px;
            font-weight:bold;
        }
    }
.umor__chart_item_trackartist{
    font-style: normal;
    font-size: 22px;
    line-height: 27px;    
}
    @media (max-width: 768px){
        .umor__chart_item_trackartist{
            font-size: 18px;
            line-height: 18px;
        }
    }
    @media (max-width: 428px){
        .umor__chart_item_trackartist{
            font-size: 12px;
            line-height: 16px;
        }
    }
   @media (max-width: 375px){
        .umor__chart_item_trackartist{
            font-size: 16px;
            line-height: 20px;
        }
    }
.umor__chart_item_vote{
    width: 15%;
}
    @media (max-width: 375px){
        .umor__chart_item_vote{
            font-size: 16px !important;
            line-height: 20px;
            font-weight:bold;
        }
    }
.umor__chart_item_imgpath{
    border-radius: 17.2744px;
    box-shadow: 1px 2.93333px 4px rgba(0, 0, 0, 0.28);
}
    @media (max-width: 768px){
        .umor__chart_item_imgpath{
            width: 55px;
            height: 55px;
        }
    }

    @media (max-width: 375px){
        .umor__chart_item_imgpath{
            width: 50px;
            height: 50px;
        }
    }


/* Плеер  */

.umor__chart_item_player .play,
.umor__chart_item_player .pause{
    width: 40px;
    height: 40px;
    border:none;
    outline:none;
}
    @media (max-width: 428px){
        .umor__chart_item_player .play,
        .umor__chart_item_player .pause{
            width: 30px;
            height: 30px;
        }
    }
    @media (max-width: 375px){
        .umor__chart_item_player .play,
        .umor__chart_item_player .pause{
            width: 20px;
            height: 20px;
        }
    }

.umor__chart_item_player .play{
    background:url('/design/images/actions/2022/umor_chart/track_play.png') center center no-repeat;
    background-size:contain;
}
.umor__chart_item_player .pause{
    background:url('/design/images/actions/2022/umor_chart/track_pause.png') center center no-repeat;
    background-size:contain;
}

.umor__chart_item_player .play:hover,
.umor__chart_item_player .pause:hover{
    border:none;
    outline:none;
}

[type="button"]:not(:disabled), 
button:not(:disabled) {
  cursor: pointer;
  outline: none !important;
  background-color: none !important;
  border: none !important;
}




/* Голосование за треки  */
.like-block__img{
    width: 50px;
    height: 50px;
    background:url('/design/images/actions/2022/umor_chart/like_i.png') center center no-repeat;
    transition: all 0.2s ease-in-out;
    cursor:pointer;
}
    @media (max-width: 768px){
        .like-block__img {
          width: 35px;
          height: 35px;
          background-size: contain;
        }
    }
    
    @media (max-width: 412px){
        .like-block__img {
          width: 30px;
          height: 30px;
          background-size: contain;
        }
    }
.like-block__img:hover,
.like-block__img:active{
    width: 50px;
    height: 50px;
    background:url('/design/images/actions/2022/umor_chart/like_a.png') center center no-repeat;
    animation: up 0.3s;
    transition: all 0.2s ease-in-out;
}
@keyframes up {
	0% {
		transform: scale(1.0);
	}
	50% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(-15deg);
	}
}
    @media (pointer: fine) {
      .like-block__img:hover {
        background:url('/design/images/actions/2022/umor_chart/like_a.png') center center no-repeat;
        animation: up 0.3s;
        transition: all 0.2s ease-in-out;
      }
    }

/* Кол-во голосов */
.umor__item_result{
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
    color: #000000;
    text-align:center;
}
    @media (max-width: 412px){
        .umor__item_result{
            font-size: 16px;
            line-height: 20px;
        }
    }
    @media (max-width: 375px){
        .umor__item_result{
            font-size: 14px;
            line-height: 20px;
        }
    }


/*Подвал*/
.footer{
    margin-top:100px;
}
    @media (max-width: 375px){
        .footer{
             margin-top:0px;
        }
    }
    
    
.systemAlert{
    width: 1px;
    height: 1px;
    opacity: 0;
}


.umor__chart_menu {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    height: 123px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 32px;
    padding-right: 32px;
}

.container-menu {
    max-width: 1552px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}


.umor__chart_menu ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}
.umor__chart_menu ul li a {
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #000000;
}

.umor__chart_menu ul li:first-child {
    margin-right: 40px;
}

.umor__chart_menu .logo {
    max-width: 140px;
    width: 100%;
    transition: 300ms;
}

.umor__chart_menu.active {
    background: rgba(255, 255, 255, 0.5);
    height: 70px;
    transition: 300ms;
    
}
.umor__chart_menu.active ul li a {
    color: rgba(0, 0, 0, 0.5);
}

.umor__chart_menu.active .logo {
    max-width: 74px;
    transition: 300ms;
}

.umor__chart.active {
    margin-top: -70px;
    transition: 300ms;
}

@media (max-width: 1024px) {
    .umor__chart_menu.active .logo {
        max-width: 87px;
    }
    .umor__chart_menu .logo {
        max-width: 87px;
    }
    
    .container-menu {
        max-width: 960px;
    }
    
    .umor__chart_menu {
        height: 97px; 
    }
    
    .umor__chart_menu.active{
        height: 97px;
    }
}



@media (max-width: 768px) {
    .umor__chart_menu.active .logo {
        display: none;
    }
    .umor__chart_menu .logo {
        display: none;
    }
    
    .container-menu {
       height: 100%;
       justify-content: center;
        
    }
    
    .umor__chart_menu {
        height: 50px; 
        padding-left: 0;
        padding-right: 0;
    }
    
    .umor__chart_menu ul {
        align-items: center;
        display: flex;
        justify-content: center;
    }
    
    .umor__chart_menu ul li a {
        font-size: 16px;
        line-height: 20px;
    }
    
    .umor__chart_menu ul li:first-child {
        margin-right: 92px;
    }
    
    .umor__chart_menu.active {
        background: rgb(255, 255, 255, 255);
        height: 50px;
    }
    
    .umor__chart.active {
        margin-top: 0;
    }
    
    .umor__chart_menu.active ul li a {
        color: rgb(0, 0, 0 );
    }
}