/* =========================================================
   HelloWorld.pk Music
   Bootstrap-compatible responsive overrides
   ========================================================= */

/*
 * This stylesheet does not replace your existing design.
 * It only overrides fixed dimensions at smaller screen sizes.
 */


/* =========================================================
   GLOBAL
   ========================================================= */

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

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
}

audio {
    max-width: 100%;
}


/* =========================================================
   MAIN PAGE CONTAINER
   ========================================================= */

.d0 {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   TOP NAVIGATION
   ========================================================= */

.d1 {
    width: 100%;
    min-height: 30px;
    overflow: hidden;
}

.d1Left,
.d1Right {
    box-sizing: border-box;
}

.d1Left {
    max-width: 80%;
}

.d1Right {
    max-width: 20%;
}


/* =========================================================
   HEADER
   ========================================================= */

.d2 {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.d2Logo {
    max-width: 100%;
}

.d2bnr {
    max-width: 100%;
    overflow: hidden;
}

.d2bnr img {
    display: block;
    max-width: 100%;
    width: 728px;
    height: auto;
}


/* =========================================================
   AD AREA
   ========================================================= */

.d4 {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.adsbygoogle {
    max-width: 100%;
}


/* =========================================================
   THREE COLUMN CONTENT
   ========================================================= */

.d5 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/*
 * Keep the existing desktop layout.
 * These values are only used if your original CSS doesn't
 * already define them.
 */

.d5Left,
.d5Center,
.d5Right {
    box-sizing: border-box;
}


/* =========================================================
   CENTER CONTENT
   ========================================================= */

.d5Center {
    min-width: 0;
}

.dC0 {
    max-width: 100%;
    box-sizing: border-box;
}

.dC1 {
    box-sizing: border-box;
}


/* =========================================================
   SEARCH
   ========================================================= */

.searchbox {
    max-width: 100%;
    box-sizing: border-box;
}

.searchbox form {
    max-width: 100%;
}

.searchbox .input {
    max-width: 100%;
    box-sizing: border-box;
}

.searchbox .button {
    box-sizing: border-box;
}


/* =========================================================
   CONTENT BOXES
   ========================================================= */

.CBox,
.SLBox {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.SLBody {
    max-width: 100%;
    box-sizing: border-box;
}

.SLBody ul {
    max-width: 100%;
    box-sizing: border-box;
}

.SLBody li {
    max-width: 100%;
    overflow-wrap: anywhere;
}


/* =========================================================
   SONG PLAYLIST
   ========================================================= */

#playlist {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
}

#playlist li {
    max-width: 100%;
    overflow-wrap: anywhere;
}

#playlist h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
}


/* =========================================================
   AUDIO PLAYER
   ========================================================= */

#onair {
    width: 350px;
    max-width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   FACEBOOK COMMENTS
   ========================================================= */

.fb-comments,
.fb-comments iframe {
    max-width: 100% !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

.copyrights {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.copyrights:after {
    content: "";
    display: table;
    clear: both;
}


/* =========================================================
   TABLETS
   Bootstrap md breakpoint: 768px
   ========================================================= */

@media (max-width: 991.98px) {

    .d0 {
        width: 100%;
        max-width: 100%;
    }

    .d1,
    .d2,
    .d3,
    .d4,
    .d5 {
        width: 100%;
        max-width: 100%;
    }

    /*
     * Allow the three existing columns to become flexible.
     */
    .d5Left,
    .d5Center,
    .d5Right {
        box-sizing: border-box;
        max-width: 100%;
    }

    /*
     * Header banner becomes fluid.
     */
    .d2bnr img {
        width: 100%;
        max-width: 728px;
        height: auto;
    }

    /*
     * Large Google ads become responsive where possible.
     */
    .d4 ins.adsbygoogle {
        max-width: 100%;
    }

    /*
     * Statistics/icons section.
     */
    .dC0 {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .dC1 {
        max-width: 50%;
    }

    /*
     * Search input.
     */
    .searchbox {
        width: 100%;
    }

    .searchbox form {
        width: 100%;
        max-width: 100%;
    }

}


/* =========================================================
   MOBILE
   Bootstrap sm breakpoint: 576px
   ========================================================= */

@media (max-width: 767.98px) {

    body {
        font-size: 14px;
    }

    .d0 {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }


    /* -----------------------------------------------------
       TOP BAR
       ----------------------------------------------------- */

    .d1 {
        width: 100%;
        min-height: 0;
        height: auto;
        overflow: hidden;
    }

    .d1Left,
    .d1Right {
        float: none !important;
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 6px 5px;
        box-sizing: border-box;
    }

    .d1Left {
        line-height: 22px;
    }

    .d1Right {
        padding-top: 3px;
        padding-bottom: 7px;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .d2 {
        width: 100%;
        text-align: center;
    }

    .d2Logo {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .d2bnr {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        overflow: hidden;
    }

    .d2bnr img {
        display: block;
        width: 100%;
        max-width: 728px;
        height: auto;
        margin: 0 auto;
    }


    /* -----------------------------------------------------
       ADVERTISEMENT AREA
       ----------------------------------------------------- */

    .d4 {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-align: center;
    }

    .d4 ins.adsbygoogle {
        max-width: 100% !important;
        width: 100% !important;
    }


    /* -----------------------------------------------------
       MAIN THREE-COLUMN LAYOUT
       ----------------------------------------------------- */

    .d5 {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    /*
     * Existing desktop columns become full-width blocks.
     */
    .d5Left,
    .d5Center,
    .d5Right {
        float: none !important;
        clear: both;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /*
     * Center content appears first on mobile.
     */
    .d5Center {
        order: 1;
    }

    .d5Left {
        order: 2;
    }

    .d5Right {
        order: 3;
    }


    /* -----------------------------------------------------
       SIDE BOXES
       ----------------------------------------------------- */

    .SLBox {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .SLBody {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .SLBody ul {
        width: 100%;
        max-width: 100%;
    }

    .SLBody li {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        line-height: 24px;
    }


    /* -----------------------------------------------------
       STATISTICS
       ----------------------------------------------------- */

    .dC0 {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
    }

    .dC1 {
        width: 50% !important;
        max-width: 50% !important;
        box-sizing: border-box;
        text-align: center;
    }

    .dC1 img {
        display: block;
        width: 75px;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       SEARCH
       ----------------------------------------------------- */

    .searchbox {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .searchbox form {
        width: 100%;
        max-width: 100%;
        display: flex;
        box-sizing: border-box;
    }

    .searchbox .input {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
    }

    .searchbox .button {
        flex: 0 0 auto;
    }


    /* -----------------------------------------------------
       MAIN CONTENT
       ----------------------------------------------------- */

    .CBox {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .CBox .Body {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       FEATURED SONGS
       ----------------------------------------------------- */

    .CBox p {
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }


    /* -----------------------------------------------------
       AUDIO PLAYER
       ----------------------------------------------------- */

    #onair {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px;
    }

    /*
     * Existing inline width:350px is overridden here.
     */
    div[style*="width:350px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }


    /* -----------------------------------------------------
       SONG TITLE
       ----------------------------------------------------- */

    #status {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #status h1 {
        font-size: 22px;
        line-height: 30px;
        overflow-wrap: anywhere;
    }


    /* -----------------------------------------------------
       GOOGLE CUSTOM SEARCH
       ----------------------------------------------------- */

    .gcse-searchresults-only {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       FACEBOOK COMMENTS
       ----------------------------------------------------- */

    .fb-comments {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       AUTORELAXED ADS
       ----------------------------------------------------- */

    div[style*="height:700px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .copyrights {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 0;
        overflow: hidden;
        text-align: center;
        box-sizing: border-box;
    }

    .copyrights > div {
        float: none !important;
        width: 100%;
        max-width: 100%;
        margin: 5px 0 !important;
        padding: 5px 10px;
        box-sizing: border-box;
        text-align: center;
    }


    /* -----------------------------------------------------
       DEVELOPER FOOTER
       ----------------------------------------------------- */

    body > table,
    .d0 + table {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 575.98px) {

    body {
        font-size: 13px;
    }

    .d1Left {
        font-size: 13px;
    }

    .SLTitle {
        font-size: 14px;
    }

    .SLBody li {
        font-size: 13px;
        line-height: 22px;
    }

    .dC1 {
        width: 50% !important;
        max-width: 50% !important;
        font-size: 13px;
    }

    .dC1 img {
        width: 60px;
        height: 60px;
    }

    .CBox .Title {
        font-size: 16px;
    }

    #status h1 {
        font-size: 18px;
        line-height: 26px;
    }

    #playlist {
        padding-left: 15px;
    }

    #playlist h2 {
        font-size: 17px;
        line-height: 24px;
    }

    .copyrights {
        font-size: 11px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .dC1 {
        width: 50% !important;
        max-width: 50% !important;
    }

    .dC1 img {
        width: 55px;
        height: 55px;
    }

    .searchbox {
        padding-left: 5px;
        padding-right: 5px;
    }

    #playlist h2 {
        font-size: 15px;
    }

}