.gen_artist {
    float: left;
    width: 15%;
    height: auto;
    margin: 10px .8%
}

.img_artist {
    width: 100%;
    float: left;
    opacity: 1;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px
}

.img_artist:hover {
    -webkit-filter: contrast(1.3);
    -moz-filter: contrast(1.3);
    -o-filter: contrast(1.3);
    filter: contrast(1.3)
}

.cont_artist {
    float: left;
    width: 100%;
    position: relative
}

.cont_genartist {
    width: 90%;
    height: 50px;
    float: left;
    padding: 10px 5%;
    position: relative
}

.nom_genartist {
    color: #3E3E3E;
    font-family: century;
    font-size: 18px
}

.nom_gen_artist {
    font-style: italic;
    color: #999;
    font-family: century;
    font-size: 14px
}

.genopc_artist {
    position: absolute;
    top: 40px;
    width: 100%;
    height: 48px;
    left: 0;
    display: none;
    z-index: 4
}

ul.posts-list li.post {
    width: 33.3333%;
    padding: 12px 8px
}

#content .simpleList li {
    float: none;
    width: 100%
}

@media (max-width: 650px) {
  .letrapage .lyricbody {
        font: 1.8rem / 0.9 "Inter", Arial, sans-serif;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 12px;
  }

    ul.posts-list li.post {
        width: 50%
    }

    .gen_artist {
        float: left;
        width: 48%;
        height: auto;
        margin: 5px .8%
    }

    .img_artist {
        width: 100%;
        float: left;
        opacity: 1;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px
    }

    .img_artist:hover {
        -webkit-filter: contrast(1.3);
        -moz-filter: contrast(1.3);
        -o-filter: contrast(1.3);
        filter: contrast(1.3)
    }

    .cont_artist {
        float: left;
        width: 100%;
        position: relative
    }

    .cont_genartist {
        width: 90%;
        height: 50px;
        float: left;
        padding: 10px 5%;
        position: relative
    }

    .nom_genartist {
        color: #3E3E3E;
        font-family: century;
        font-size: 16px !important
    }

    .nom_gen_artist {
        font-style: italic;
        color: #999;
        font-family: century;
        font-size: 12px !important
    }
}

.mas-musica {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    padding: 16px;
    max-width: 100%;
    margin: 0 auto;
}


.img-artist {
    margin-bottom: 8px
}

.img-artist img {
    border-radius: 50%;
    width: 30px
}

@media only screen and (max-width: 380px) {
    ul.posts-list li.post {
        width: 100%
    }
}

@media screen and (max-width: 768px) {
    div.t-title {
        margin: 1.4em .5em 0;
        text-align: left
    }

    div.t-title>span {
        padding: 0 14px 0 0
    }

    #searchbar {
        width: 345px
    }

    .autocomplete-container {
        display: none;
        position: static;
        top: 0;
        z-index: 0;
        right: 0;
        min-width: 100%;
        overflow: hidden
    }

    .ashboard-banner {
        padding-top: 3px;
        padding-bottom: 28px
    }

    .dashboard-banner .dashboard-banner__content {
        max-width: 93%
    }

    .dashboard-banner .dashboard-banner__content>h1 {
        margin-bottom: 23px;
        font-size: 1.6em;
        font-weight: 700
    }

    .s-bar {
        width: 100%
    }

    .s-bar input[type="text"] {
        width: 67%
    }

    #player-container {
        height: 110px
    }

    #player-container .controls {
        width: 100%;
        height: 50px;
        font-size: 10px
    }

    #player-container .controls button {
        height: 50px
    }

    #player-container .display {
        margin-left: 0;
        height: 50px
    }

    #player-container .display .display-panel {
        margin-left: 5px;
        display: block;
        clear: both;
        width: 100%;
        z-index: 9999
    }

    .lado-left .img {
        max-height: none;
        float: left;
        width: 40%;
        margin-right: 4%
    }

    .lado-left .img img {
        width: 100%;
        min-width: 90px
    }

    .lado-left .info {
        float: left;
        width: 56%;
        text-align: left
    }

    .nav-user.open {
        display: inherit !important
    }

    .nav-user .dropdown>a {
        display: block;
        text-align: center;
        font-size: 18px;
        padding-bottom: 10px
    }

    .nav-user .avatar {
        width: 160px !important;
        float: none !important;
        display: block;
        margin: 20px auto;
        padding: 5px;
        background-color: rgba(255, 255, 255, 0.1);
        position: relative
    }

    .nav-user .dropdown-menu {
        display: block;
        position: static;
        float: none;
        background-color: #232222
    }

    .sharer_box a {
        background-position: center center
    }

    .sharer_box a span {
        display: none
    }

    .art_rec {
        float: left;
        width: 48%;
        height: auto;
        margin: 10px 1%
    }

    .cont_imgart1,
    .cont_imgart2,
    .cont_imgart3,
    .cont_imgart4,
    .cont_imgart5,
    .cont_imgart6 {
        float: left;
        width: 100%;
        overflow: hidden;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        position: relative
    }

    .cont_art1,
    .cont_art2,
    .cont_art3,
    .cont_art4,
    .cont_art5,
    .cont_art6 {
        width: 90%;
        height: auto;
        float: left;
        padding: 10px 5%;
        position: relative
    }

    .img_artrecom1,
    .img_artrecom2,
    .img_artrecom3,
    .img_artrecom4,
    .img_artrecom5,
    .img_artrecom6 {
        width: 100%;
        float: left;
        height: 100%;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px)
    }

    .img_circ1,
    .img_circ2,
    .img_circ3,
    .img_circ4,
    .img_circ5,
    .img_circ6 {
        position: absolute;
        width: 70%;
        left: 15%;
        top: 15%;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        -o-border-radius: 100%;
        -webkit-transition-duration: .4s;
        -moz-transition-duration: .4s;
        -o-transition-duration: .4s;
        transition-duration: .4s
    }

    .img_cuadr1,
    .img_cuadr2,
    .img_cuadr3,
    .img_cuadr4,
    .img_cuadr5,
    .img_cuadr6 {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        -o-border-radius: 0;
        -webkit-transition-duration: .4s;
        -moz-transition-duration: .4s;
        -o-transition-duration: .4s;
        transition-duration: .4s
    }

    .nom_can1,
    .nom_can2,
    .nom_can3,
    .nom_can4,
    .nom_can5,
    .nom_can6 {
        color: #3E3E3E;
        font-family: century;
        font-size: 14px
    }

    #artistax {
        min-height: 600px
    }

    .player {
        height: calc(100% - 127px);
        top: calc(100% - 127px);
        min-width: 276px
    }

    .plays {
        padding: 10px 20px
    }

    .plays:before {
        display: none
    }

    .player .img-play {
        margin: 0 auto 20px;
        display: block;
        width: 80px;
        display: none
    }

    .top {
        width: 140%
    }

    .controls {
        text-align: center;
        margin: auto;
        width: 140%
    }

    .progress {
        display: none
    }

    .player .title-1,
    .player .title-2 {
        text-align: center
    }

    .player .title-2 {
        margin-bottom: 20px
    }

    .likes a {
        -webkit-border-radius: 0 0 0 15px;
        -moz-border-radius: 0 0 0 15px;
        border-radius: 0 0 0 15px
    }

    .likes a.thumbsDown {
        -webkit-border-radius: 0 0 15px 0;
        -moz-border-radius: 0 0 15px;
        border-radius: 0 0 15px 0
    }

    .home-destaque img {
        display: block;
        width: 100%;
        height: auto
    }

    .home-destaque .bt-ouvir {
        position: absolute;
        bottom: 2px;
        left: 1px;
        width: 100%;
        z-index: 1;
        line-height: 0;
        font-size: 11px
    }

    .albums-a .album a img {
        width: 79px
    }

    .albums-a .escuchar {
        margin-top: 2px;
        visibility: visible
    }

    .albums-a .album a h2 {
        font-size: 15px
    }

    .albums-a .album a span {
        font-size: .8em
    }
}


/* Ajuste para móvil */
@media (max-width: 480px) {
  .titleDivider {
    width: 40px;
    margin: 6px auto 8px;
  }
}