*:not(svg, line){ padding: 0; margin: 0; list-style: none; box-sizing: border-box; transition: all .2s; font-family: 'Rubik'; }

bady,html{ background: #f1f1f1; }

.content{ max-width: 1000px; width: 100%; margin: 0 auto; padding: 0 30px; }

/* Bar Top */
.bartop{ background: #fff; padding: 6px 0; }
.bartop .content{ display: flex; align-items: center; }
.logo-hot-bartop{ display: block; width: 40px; margin-right: 10px; }
.bartop p a{ display: inline-block; font-size: 11px; font-weight: 700; color: #333; text-decoration: none; }
.bartop p a:hover{ text-decoration: underline; }
.bartop ul{ display: flex; margin-left: 14px; }
.bartop li{ border-left: 1px solid #cbcbcb; }
.bartop li a{ display: block; font-size: 10px; text-decoration: none; color: #333; padding: 2px 14px; }
.bartop li a:hover{ text-decoration: underline; }

/* Header */
.header{ background: #000; height: 90px; }
.header .content{ display: flex; justify-content: space-between; align-items: center; position: relative; height: 100%; }

.wrapper-locutor{ display: flex; align-items: center; }
.wrapper-locutor img{ display: block; width: 60px; height: 60px; border-radius: 50%; margin-right: 10px; }
.infos-playernow p{ font-size: 12px; color: #fff; }
.infos-playernow h5{ font-size: 16px; font-style: italic; color: #F8EE21; }
.infos-playernow h6{ display: none; font-size: 18px; font-weight: 700; color: #ED2027; }

.logo-header{ position: absolute; z-index: 20; width: 230px; top: 20px; left: 50%; margin-left: -115px; }
.logo-header a{ display: block; width: 100%; height: auto; }
.logo-header a img{ display: block; width: 100%; height: auto; }

.wrapper-miniplayer a{ display: flex; align-items: center; font-size: 14px; color: #fff; text-decoration: none; }
.wrapper-miniplayer a img{ display: block; width: 20px; height: auto; margin-right: 10px; }
.wrapper-miniplayer a:hover{ text-decoration: underline; }

/* Player */
.audio-ao-vivo{ display: none; }

.player{ position: relative; background: #f8d900 url(../imagens/background_player_hot107.png) no-repeat center; background-size: cover; padding: 50px 0; padding-top: 70px; }
.player .content{ padding: 0; }

.title-player{ display: block; text-align: center; font-size: 30px; font-weight: 800; color: #ed2027; margin-bottom: 16px; }

.noar-player{ display: flex; align-items: center; justify-content: space-between; }
.cont-music-player{ width: 250px; padding: 0 20px; }
.photo-content-music-player{ display: flex; align-items: center; justify-content: center; position: relative; width: 250px; height: 250px; padding: 12px; border: 1px solid #000; border-radius: 50%; margin: 0 auto; }
.photo-music-player{ position: relative; width: calc(100% - 12px); height: calc(100% - 12px); border: 6px solid #000; border-radius: 50%; background-color: #e31f26; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 10; }
.cont-music-player:hover .photo-music-player{ border-width: 12px; }
.photo-music-player::before{ content: ""; display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-radius: 50%; background-color: #f8d900; opacity: 0; transition: all .2s; }
.cont-music-player:hover .photo-music-player::before{ opacity: .3; }

.wave-sound{ display: none; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden; border-radius: 50%; opacity: .5; }
.wave-sound svg{ width: 100%; height: 100%; padding-top: 60px; }
.cont-music-player:hover .wave-sound{ opacity: 1; }

.label-noar{ position: absolute; top: 8px; z-index: 20; background: #e31f26; font-size: 14px; font-weight: bold; color: #fff; padding: 3px 16px; border-radius: 3px; border: 1px solid #a70e14; }

.control-player{ position: absolute; z-index: 20; bottom: -16px; color: #fff; text-align: center; }
.btn-play{ display: block; width: 80px; height: 80px; border-radius: 50%; background: #e31f26 url('../imagens/icon-play.svg') no-repeat center; background-size: 50% auto; outline: none; border: 2px solid #a70e14; cursor: pointer; }
.btn-play:hover{ border-color: #fff; }
.btn-play.pause{ background-image: url('../imagens/icon-pause.svg'); background-size: 40% auto; }

@property --opacity {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

.progress-music-player{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-radius: 50%; transform: rotate(180deg); }
.progress-music-player span{ display: block; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; background-color: transparent; background-image: conic-gradient(#e31f26, #e31f26 var(--opacity), transparent var(--opacity)); border-radius: 50%; }

@keyframes conic-gradient {
    0% {
        --opacity: 0%;
    }

    85% {
        --opacity: 100%;
    }
}

.music-previous span{ left: 13px; top: 13px; right: 13px; bottom: 13px; }
.music-next span{ left: 20px; top: 20px; right: 20px; bottom: 20px; }

.music-previous, .music-next{ display: flex !important; margin-top: -100px; transition: all .3s; }
.music-next{ justify-content: end; }
.wrapper-musics{ position: relative; left: 0px; right: auto; transition: all .3s; }
.music-previous .wrapper-musics{ left: 0px; }
.music-next .wrapper-musics{ left: 0px; }

.music-current{ display: flex !important; flex-direction: column; align-items: center; width: 350px; }
.music-current .photo-content-music-player{ width: 350px; height: 350px; }

.info-music{ text-align: center; padding-top: 8px; }
.info-music p{ font-size: 16px; font-weight: bold; }
.info-music h4{ font-size: 14px; font-weight: normal; }

.info-m-current{ padding-top: 30px; }
.info-m-current h4{ font-size: 20px; font-weight: 800; }
.info-m-current h5{ font-size: 18px; font-weight: 300; }

.social-player{ position: relative; top: -50px; height: 0; display: flex; justify-content: space-between; z-index: 30; }
.player-social-share{ position: absolute; top: 0px; left: 90px; display: flex; height: 44px; }
.icon-player-social-share{ display: block; flex-shrink: 0; width: 44px; height: 44px; border-radius: 4px; margin-right: 10px; transition: all .3s; }
.icon-share-facebook{ background: #014595 url("../imagens/icon_facebook.svg") no-repeat center top+40%; background-size: 80% auto; }
.icon-share-facebook:hover{ background-color: #0b55ad; }
.icon-share-whatsapp{ background: #1BA305 url("../imagens/icon_whatsapp.svg") no-repeat left +10px top+8px; background-size: 56% auto; }
.icon-share-whatsapp:hover{ background-color: #47b335; }

.icon-player-whatsapp{ position: absolute; top: 0px; right: 38px; padding: 6px 12px; padding-left: 36px; display: block; border-radius: 4px; background: #1BA305 url("../imagens/icon-share-whatsapp.svg") no-repeat left+10px center; background-size: auto 70%; font-size: 14px; font-weight: 500; color: #fff; text-decoration: none; transition: all .3s; }
.icon-player-whatsapp:hover{ background-color: #47b335; }

.like-m-current{ display: flex; justify-content: center; margin-bottom: 4px; }
.like-m-current span{ display: block; width: 26px; height: 26px; background-repeat: no-repeat; background-size: 90%; background-position: center; cursor: pointer; transition: all .2s; margin: 0 6px; }
.like-m-current span:hover{ background-size: 100%; }
.icon-like{ background-image: url("../imagens/icon-like.svg"); }
.icon-like.active{ background-image: url("../imagens/icon-like-active.svg"); }
.icon-deslike{ background-image: url("../imagens/icon-deslike.svg"); }
.icon-deslike.active{ background-image: url("../imagens/icon-deslike-active.svg"); }


/* Publicidade */
.publicidade{ background: #212121; padding: 30px 0; }
.content-publicidade{ background: #b9b9b9; }
.content-publicidade a{ display: block; }
.content-publicidade a img{ display: block; width: 100%; }


/* Links */
.links{ padding: 30px 0; }
.links h3{ display: block; font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.links ul{ padding-bottom: 40px; }
.links li{  }
.links li a{ display: block; width: 100%; height: auto; text-decoration: none; transition: all .3s; padding: 6px; border-radius: 8px; }
.links li a:hover{ background: #dddddd; }
.links li a img{ display: block; width: 100%; height: auto; margin-bottom: 6px; }
.swiper-pagination-bullet-active{ background: #ed2027 !important; }
.links h4{ font-size: 16px; color: #000; text-decoration: none; padding: 0 2px; margin-bottom: 4px; }
.links p{ font-size: 13px; font-weight: 300; color: #000; text-decoration: none; padding: 0 2px; }


/* Footer */
.footer{ background: #242424; border-top: 14px solid #ed2027; padding: 30px 0; }
.footer .content{ display: flex; flex-direction: column; align-items: center; }
.contet-infos-footer{ display: flex; margin-bottom: 14px; }
.logo-footer{ display: flex; align-items: center; width: 140px; margin-right: 40px; }
.logo-footer img{ display: block; width: 100%; }
.infos-footer p{ display: block; position: relative; padding-left: 14px; font-size: 12px; font-weight: 300; color: #e3e3e3; margin-bottom: 20px; }
.infos-footer a{ color: #fff; font-weight: 500; text-decoration: none; }
.infos-footer a:hover{ text-decoration: underline; }
.infos-footer p span{ font-size: 14px; color: #fff; }
.infos-footer p::before{ content: ""; display: block; width: 4px; height: 100%; position: absolute; left: 0px; top: 0px; background-color: #ed2027; border-radius: 4px; }
.footer-text{ font-size: 11px; font-weight: 300; color: #e3e3e3; }



/*
*
* MOBILE
*
*/

@media only screen and (max-width: 900px) {

    body,html{ max-width: 100%; overflow-x: hidden; }

    .bartop{ display: none; }

    .wrapper-miniplayer{ display: none; }
    .logo-header{ left: 0px; top: auto; margin-left: 0px; width: 130px; }

    .wrapper-locutor{ margin-left: 110px; }
    .infos-playernow h6{ display: block; }


    .player{ padding-top: 20px; }
    .title-player{ display: none; }

    .music-previous, .music-next{ justify-content: center; }

    .music-next .wrapper-musics{ left: -30%; }
    .music-previous .wrapper-musics{ left: 30%; }

    #active-slide0 .music-current .wrapper-musics{ left: -30%; }
    #active-slide0 .music-previous .wrapper-musics{ left: 0px; }

    #active-slide1 .music-next .wrapper-musics{ left: -30%; }
    #active-slide1 .music-previous .wrapper-musics{ left: 30%; }

    #active-slide2 .music-current .wrapper-musics{ left: 30%; }
    #active-slide2 .music-next .wrapper-musics{ left: 0px; }

    .player .swiper-pagination{ position: absolute; top: 390px !important; bottom: auto !important; height: 0px; }
    .player .swiper-pagination-bullet{ margin: 0 3px !important; }
    .player .swiper-pagination-bullet-active{ position: relative; top: 2px; background: #000 !important; width: 12px; height: 12px; }

    .social-player{ flex-direction: column; align-items: center; top: 0px; height: auto; padding: 20px 30px; justify-content: center; } 
    .player-social-share{ position: static; margin-bottom: 20px; }
    .icon-player-social-share{ position: static; margin-right: 20px; }
    .icon-share-whatsapp{ margin-right: 0px; }
    .icon-player-whatsapp{ position: static; padding: 10px; padding-left: 70px; font-size: 20px; width: 230px; }

    .info-m-current{ padding-top: 50px; }

    .music-current .info-music h4{ font-size: 26px; }

    .contet-infos-footer{ display: block; text-align: center; padding: 0 20px; }
    .logo-footer{ margin-right: 0px; width: 180px; margin: 0 auto; margin-bottom: 20px; }
    .infos-footer p{ padding-left: 0; padding-bottom: 20px; font-size: 18px; }
    .infos-footer p::before{ width: 100%; height: 4px; top: auto; bottom: 0px; }
    .infos-footer p span{ font-size: 20px; }
    .footer-text{ font-size: 14px; padding: 0 30px; text-align: center; }

    .footer_address{ font-size: 14px !important; }

}