/*
*
*    [Table of contents]
*
*    [&. Content / #key]
*    [Let press Ctrl + f and type of paste the key, then press Enter to search the content ]
*
*    Summary: Audio
*
*    1. Audio Mejs
*    2. Audio Style 1
*    3. Audio Album
*    4. Audio Album No Playlist
*    5. Responsive
*
*
*/



/*----------  1. Audio Mejs  ----------*/
    .mejs-container {
        height: 100% !important;
        background: transparent;
    }

    .mejs-container .mejs-playlist {
        position: relative;
        top: 0 !important;
        height: 100% !important;
        background: transparent;
        overflow: hidden;
        opacity: 1;
    }

    .mejs-container .mejs-playlist ul {
        padding: 0;
        counter-reset: number;
        max-height: 420px;
    }

    .mejs-container .mejs-playlist ul .mCSB_inside > .mCSB_container {
        margin-right: 0;
    }

    .mejs-container .mejs-playlist ul li {
        margin: 0;
        padding: 23px 30px;
        font-size: 16px;
        color: #4a5664;
        text-transform: capitalize;
        height: auto;
        background-color: #ededed;
        display: table;
        width: 100%;
    }

    .mejs-container .mejs-playlist ul li .playlist-name {
        display: table-cell;
        width: 88%;
    }

    .mejs-container .mejs-playlist ul li .playlist-duration {
        padding-right: 15px;
        border-right: 2px solid #bfc5cd;
        display: table-cell;
        width: 1%;
    }

    .mejs-container .mejs-playlist ul li a {
        padding-left: 15px;
        display: table-cell;
        width: 1%;
    }

    .mejs-container .mejs-playlist ul li:nth-child(even) {
        background-color: #f7f7f7;
    }

    .mejs-container .mejs-playlist ul li:before {
        counter-increment: number;
        content: counter(number) '.';
        padding-right: 15px;
        display: table-cell;
        width: 1%;
    }

    .mejs-container .mejs-playlist ul li:nth-child(-n + 9):before {
        content: '0' counter(number) '.';
    }

    .mejs-container .mejs-playlist ul li.current {
        font-weight: 400;
        color: #d32eb2;
    }

    .mejs-container .mejs-controls {
        position: relative;
        height: 110px;
        background: #0d2e43;
        left: auto;
        bottom: auto;
        padding: 0 30px;
    }

    .mejs-container .mejs-playlist ul .mCSB_scrollTools {
        width: 5px;
    }

    .mejs-container .mejs-controls > div {
        width: 33px;
        height: 34px;
        margin: 38px 0;
        display: inline-block;
        vertical-align: top;
        float: none;
    }

    .mejs-container .mejs-controls > div:first-child {
        margin-left: 0;
    }

    .mejs-container .mejs-controls > div:last-child {
        margin-right: 0;
    }

    .mejs-container .mejs-controls .mejs-horizontal-volume-slider {
        height: 34px;
        margin: 38px 0;
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
        border-radius: 0;
        height: 5px;
        -webkit-border-radius: 0;
        background: #464646;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
        border-radius: 0;
        height: 5px;
        -webkit-border-radius: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        background: #d32eb2;
        background: -moz-linear-gradient(left, #d32eb2 0%, #0c72c7 100%);
        background: -webkit-linear-gradient(left, #d32eb2 0%, #0c72c7 100%);
        background: linear-gradient(to right, #d32eb2 0%, #0c72c7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d32eb2', endColorstr='#0c72c7',GradientType=1 );
    }

    .mejs-container .mejs-controls .mejs-button {
        margin-left: 10px;
        margin-right: 10px;
        position: relative;
    }

    .mejs-container .mejs-controls .mejs-button button {
        margin: 0;
        width: 100%;
        height: 100%;
        background: transparent url(../../../../../static/img/theme-img/solala-controler.svg) no-repeat;
    }

    .mejs-container .mejs-controls .mejs-button button:focus {
        outline: 0;
    }

    .mejs-container .mejs-controls .mejs-button.mejs-shuffle-button {
        margin-left: 20px;
        margin-right: 20px;
    }

    .mejs-container .mejs-controls .mejs-prevtrack {
        margin-left: 0;
    }

    .mejs-container .mejs-controls .mejs-prevtrack button {
        background-position: 0 0;
    }

    .mejs-container .mejs-controls .mejs-play button {
        background-position: -38px 0;
    }

    .mejs-container .mejs-controls .mejs-pause button {
        background-position: -76px 0;
    }

    .mejs-container .mejs-controls .mejs-nexttrack button {
        background-position: -114px 0;
    }

    .mejs-container .mejs-controls .mejs-loop-off button {
        background-position: -152px 0;
    }

    .mejs-container .mejs-controls .mejs-loop-on button {
        background-position: -228px 0;
    }

    .mejs-container .mejs-controls .mejs-mute button {
        background-position: -266px 0;
    }

    .mejs-container .mejs-controls .mejs-unmute button {
        background-position: -305px 0;
    }

    .mejs-container .mejs-controls .mejs-shuffle-on button {
        background-position: -344px 0;
    }

    .mejs-container .mejs-controls .mejs-shuffle-off button {
        background-position: -381px 0;
    }

    .mejs-container .mejs-controls .mejs-time {
        padding: 0;
        font-size: 18px;
        width: 50px;
        height: 34px;
        line-height: 34px;
        display: inline-block;
        vertical-align: top;
        margin-left: 5px;
        margin-right: 5px;
    }

    .mejs-container .mejs-controls .mejs-time .mejs-duration {
        color: #9692a2;
    }

    .mejs-container .mejs-controls .mejs-time-rail {
        padding-top: 0;
    }

    .mejs-container .mejs-controls .mejs-time-rail span,
    .mejs-container .mejs-controls .mejs-time-rail a {
        border-radius: 0;
        height: 5px;
    }

    .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
        margin: 13px 8px;
        height: 5px;
        background: #464646;
    }

    .mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
        background: #a5abb4;
    }

    .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
        background: #d32eb2;
        background: -moz-linear-gradient(left, #d32eb2 0%, #0c72c7 100%);
        background: -webkit-linear-gradient(left, #d32eb2 0%, #0c72c7 100%);
        background: linear-gradient(to right, #d32eb2 0%, #0c72c7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d32eb2', endColorstr='#0c72c7',GradientType=1 );
    }

    .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current:before {
        position: absolute;
        content: '\f111';
        font-family: 'FontAwesome';
        font-size: 15px;
        top: 50%;
        right: 0;
        width: 22px;
        height: 22px;
        color: #d92db0;
        border: 5px solid rgba(217, 45, 176, 0.4);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        transform: translate(50%, -50%);
        -webkit-transform: translate(50%, -50%);
        -moz-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
        -o-transform: translate(50%, -50%);
    }

    .mejs-container .mejs-controls .mejs-time-rail .mejs-time-float {
        border-radius: 2px;
        height: 17px;
    }

    .vc_col-sm-6 .mejs-container .mejs-controls {
        height: 60px;
        padding: 0 20px;
    }

    .vc_col-sm-6 .mejs-container .mejs-controls > div,
    .vc_col-sm-6 .mejs-container .mejs-controls .mejs-horizontal-volume-slider {
        margin-left: 0;
        margin-right: 0;
        margin-top: 13px;
        margin-bottom: 13px;
    }

    .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-shuffle-button {
        margin-left: 0;
        margin-right: 0;
    }

    .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button button {
        -webkit-transform: scale(0.65);
        -ms-transform: scale(0.65);
        -o-transform: scale(0.65);
        transform: scale(0.65);
    }

    .vc_col-sm-6 .mejs-container .mejs-controls .mejs-time {
        font-size: 14px;
    }

    .vc_col-sm-6 .mejs-container .mejs-playlist ul {
        max-height: 100px;
    }

    .vc_col-sm-6 .mejs-container .mejs-playlist ul li {
        padding: 13px 20px;
        font-size: 14px;
    }

    .vc_col-sm-8 .mejs-container .mejs-playlist ul li .playlist-name,
    .vc_col-sm-6 .mejs-container .mejs-playlist ul li .playlist-name {
        width: 78%;
    }

    .vc_col-sm-6 .slz-album-01 .bar-wrapper {
        height: 60px;
    }

/*----------  2. Audio Style 1  ----------*/
    .sc-audio-style-1 {
        width: 50%;
        padding: 40px 75px;
        margin: 0 auto;
        text-align: center;
        background: rgba(211, 46, 178, 0.95);
        background: -moz-linear-gradient(left, rgba(211, 46, 178, 0.95) 0%, rgba(12, 114, 199, 0.95) 100%);
        background: -webkit-linear-gradient(left, rgba(211, 46, 178, 0.95) 0%,rgba(12, 114, 199, 0.95) 100%);
        background: linear-gradient(to right, rgba(211, 46, 178, 0.95) 0%, rgba(12, 114, 199, 0.95) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(211, 46, 178, 0.95)', endColorstr='rgba(12, 114, 199, 0.95)',GradientType=1 );
    }

    .sc-audio-style-1 .title {
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
    }

    .sc-audio-style-1 .description {
        color: #fff;
        margin-top: 15px;
    }

    .sc-audio-style-1 .audio-container {
        margin-top: 20px;
    }

    .sc-audio-style-1 .audio-container .mejs-container {
        width: 100% !important;
    }

    .sc-audio-style-1 .audio-container .mejs-container .mejs-controls {
        background: rgba(4, 2, 17, 0.65);
        height: 40px;
        padding: 0 20px;
    }
    
    .sc-audio-style-1 .mejs-container .mejs-controls > div,
    .sc-audio-style-1 .mejs-container .mejs-controls .mejs-horizontal-volume-slider {
        margin: 3px 0;
    }

    .sc-audio-style-1 .mejs-container .mejs-controls .mejs-button {
        -webkit-transform: scale(0.65);
        -ms-transform: scale(0.65);
        -o-transform: scale(0.65);
        transform: scale(0.65);
    }

    .sc-audio-style-1 .mejs-container .mejs-controls .mejs-time {
        font-size: 14px;
    }
    
/*----------  3. Audio Album  ----------*/
    .slz-album-01 .bar-wrapper {
        width: 100%;
        height: 110px;
        background-color: #f7f7f7;
    }

    .slz-album-01 .bar-wrapper canvas {
        width: 100%;
        height: 100%;
    }

/*----------  4. Audio Album No Playlist  ----------*/
    .sc-audio-style-3 .mejs-layers,
    .sc-audio-style-3 .bar-wrapper {
        display: none;
    }

    .sc-audio-style-3 .mejs-container .mejs-controls {
        background: rgba(2, 4, 17, 0.65);
    }


/*=====================================
=            5. Responsive            =
=====================================*/

    @media screen and (max-width: 1024px) {
        .sc-audio-style-1 {
            padding: 40px;
        }
    }

    @media screen and (max-width: 768px) {
        .sc-audio-style-1 {
            width: 75%;
        }

        .vc_col-sm-6 .mejs-container .mejs-controls {
            height: 110px;
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button {
            position: absolute;
            margin: 0;
            top: 60px;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-loop-button {
            left: calc(0% + 60px);
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-prevtrack {
            left: calc(25% + 30px);
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-playpause-button {
            left: 50%;
        }
        
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-nexttrack {
            left: calc(75% - 30px);
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-shuffle-button {
            left: calc(100% - 60px);
            margin: 0;
        }
    }

    @media screen and (max-width: 767px) {
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button {
            position: relative;
            margin: 38px 10px;
            top: auto;
            -webkit-transform: none;
            -ms-transform: none;
            -o-transform: none;
            transform: none;
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-loop-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-playpause-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-prevtrack,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-nexttrack {
            left: auto;
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-shuffle-button {
            left: auto;
            margin: 38px 10px;
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button button {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-time {
            font-size: 18px;
        }

        .vc_col-sm-6 .mejs-container .mejs-controls > div, 
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-horizontal-volume-slider {
            margin: 38px 0;
        }

        .vc_col-sm-6 .mejs-container .mejs-playlist ul {
            max-height: 420px;
        }

        .vc_col-sm-6 .mejs-container .mejs-playlist ul li {
            padding: 23px 30px;
            font-size: 16px;
        }

        .mejs-container .mejs-playlist ul li .playlist-duration {
            display: none;
        }

    }

    @media screen and (max-width: 600px) {
        .sc-audio-style-1 .mejs-container .mejs-controls .mejs-playpause-button {
            position: relative;
            top: auto;
            left: auto;
        }

        .mejs-container .mejs-controls,
        .vc_col-sm-6 .mejs-container .mejs-controls {
            height: 150px;
        }

        .mejs-container .mejs-controls .mejs-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button {
            position: absolute;
            margin: 0;
            top: 90px;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .mejs-container .mejs-controls .mejs-button.mejs-loop-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-loop-button {
            left: calc(0% + 60px);
        }

        .mejs-container .mejs-controls .mejs-prevtrack,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-prevtrack {
            left: calc(25% + 30px);
        }

        .mejs-container .mejs-controls .mejs-playpause-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-playpause-button {
            left: 50%;
        }
        
        .mejs-container .mejs-controls .mejs-nexttrack,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-nexttrack {
            left: calc(75% - 30px);
        }

        .mejs-container .mejs-controls .mejs-button.mejs-shuffle-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-shuffle-button {
            left: calc(100% - 60px);
            margin: 0;
        }       

    }

    @media screen and (max-width: 480px) {
        .sc-audio-style-1 {
            width: 90%;
            padding: 30px 20px;
        }

        .slz-album-01 .bar-wrapper {
            height: 75px;
        }
    }

    @media screen and (max-width: 414px) {
        .mejs-container .mejs-controls {
            padding: 0 15px;
        }

        .mejs-container .mejs-controls .mejs-button.mejs-loop-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-loop-button {
            left: calc(0% + 40px);
        }

        .mejs-container .mejs-controls .mejs-prevtrack,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-prevtrack {
            left: calc(25% + 20px);
        }

        .mejs-container .mejs-controls .mejs-playpause-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-playpause-button {
            left: 50%;
        }
        
        .mejs-container .mejs-controls .mejs-nexttrack,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-nexttrack {
            left: calc(75% - 20px);
        }

        .mejs-container .mejs-controls .mejs-button.mejs-shuffle-button,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button.mejs-shuffle-button {
            left: calc(100% - 40px);
            margin: 0;
        }

        .mejs-container .mejs-controls .mejs-time,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-time {
            font-size: 14px;
        }

        .mejs-container .mejs-controls > div,
        .mejs-container .mejs-controls .mejs-horizontal-volume-slider,
        .vc_col-sm-6 .mejs-container .mejs-controls > div,
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-horizontal-volume-slider {
            margin: 15px 0;
        }

        .mejs-container .mejs-controls .mejs-button, 
        .vc_col-sm-6 .mejs-container .mejs-controls .mejs-button {
            top: 60px;
        }

        .mejs-container .mejs-controls, 
        .vc_col-sm-6 .mejs-container .mejs-controls {
            height: 110px;
        }
    
        .mejs-container .mejs-playlist ul li,
        .vc_col-sm-6 .mejs-container .mejs-playlist ul li {
            padding: 13px 20px;
        }

        .mejs-container .mejs-playlist ul li,
        .vc_col-sm-6 .mejs-container .mejs-playlist ul li {
            font-size: 14px;
        }
    }


    @media screen and (max-width: 320px) {
        .sc-audio-style-1 {
            width: 100%;
            padding: 30px 15px;
        }

        .sc-audio-style-1 .audio-container .mejs-container .mejs-controls {
            padding: 0 15px;
        }
    }

/*=====  End of 5. Responsive  ======*/