﻿.mdl-highlight{

}

strong {
    font-family:LatoBold;
    font-weight:normal;
}

.mdl-highlight .song-name{
    font-size:16px;
    padding:10px 0;
    padding-bottom:0;
    position:relative;
}

.mdl-highlight .line-hot{
    text-align:center;
    padding:10px 0;
    font-size:14px;
}

.mdl-highlight .song-name .left-fade, .mdl-highlight .song-name .right-fade{
    position:absolute;
    top:0;
    height:30px;
    width:50px;
}

.mdl-highlight .song-name .left-fade{
    left:0;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}

.mdl-highlight .song-name .right-fade{
    right:0;    
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}

.mdl-highlight .song-name .text-singer{
    color:#999999;
}

.song-highlight{
    width:100%;
    position:relative;
}

.song-highlight img{
    width:100%;   
}

.song-highlight .btn-play{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:48px;
    height:48px;
    text-align:center;
    line-height:48px;
    border-radius:50%;
    background:rgba(0, 0, 0, 0.5);
    color:#fff;
    margin-left:-24px;
    margin-top:-24px;
    cursor:pointer;
}

.song-highlight .btn-play i{
    font-size:1.2em;
    position:relative;
    bottom:-4px;
}

.song-highlight .btn-play .icon-play2{
    right:-3px;
}

.song-highlight .btn-play .icon-pause2{
    right:0;
}

.song-highlight .btn-over{
    display:block;
    position:absolute;
    bottom:10px;
    border-radius:10px;
    border:0;
    padding:7px 11px;
    font-family:LatoBold;
    font-size:16px;
    text-align:center;
    cursor:pointer;
}

.song-highlight .btn-register{
    right:10px;
    background:#ffcc33;
    color:#000;
}

.song-highlight .btn-next{
    left:10px;
    background:#b3b3b3;
    color:#000;
}


@media (min-width:979px) {
    .song-highlight .btn-play .icon-pause2{
        right: -1px;
        top: 3px;
    }

    .song-highlight .btn-play .icon-play2{
        top: 3px;
    }
}

.navbar-ga {
    text-align:center;
}

.navbar-ga .navbar-brand{
    display:inline-block;
    float:none;
}

.mdl-songs .link-more-mobile img{
    position: relative;
    bottom: -10px;
    left: -3px;
}

.view-more {
    text-align: center;
}

.song-highlight .btn-next {
    text-align: center;
}

.view-more .btn-over{
    position:relative;
    left: inherit;
    max-width: 120px;
    background: #f6f6f6;
    color: #31A955;
    border-radius: 15px;
    border: 1px solid #e5e5e5;
    margin: 10px auto 10px auto;
}