/* DESKTOP/PC CSS CODES
 /*This is the desktop/pc css code for all website desktop/pc view.
 Modified by: Gnax Oneboss
 Company: Merge Technology, Concept
 Contact: +2347085932089
 */body { background: #f1f3f4; background-repeat: repeat; color: #6c6b6b; font-family: ScoutLight,Arial,Helvetica,sans-serif; font-weight: 400; font-size: 17px; line-height: 28px; word-wrap: break-word; margin: 0 auto; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%; height:100%; }
img { height: auto; max-width: 100%; }


/* LINKS COLOR CSS
Css for link colors
*/
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.62em; }
h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }

/* HOMEPAGE AND POST LIST CSS
Css for styling the homepage and post list
*/
/* Post list */
.pc-gmenu { background: #fff; margin: 10px; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width: 60%; }
.pc-trending { background: #000; padding: 10px 15px; margin: 15px; color: #fff; font-size: 15px; text-align: center; text-transform: uppercase; font-weight: bold; border-radius: 4px; }
.pc-menu { position: relative; background: #fff; margin: 10px; float: left; display: inline-block; width: 46%; height: 300px; }
.pc-list-image { padding: 0; margin: 0; width: 100%; height: 190px; max-height: 190px; }
.pc-list { padding: 10px; font-size: 16px; font-weight: bold; line-height: 1.4; }
.pc-list a { color: #333; }
.pc-list-date { background: #ff0000; position: absolute; left: 0; top: 0; display: block; padding: 10px; color: #fff; font-size: 12px; }
.rmenu { background: #fff; margin: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }

/* PAGINATION AND FOOTER CSS
Css for styling the page numbers and footer
*/
/* Page Display */
.pc-no-page { background: #fff; color: #333; padding: 4px 10px; margin: 5px 5px 6px 5px; border:1px solid #fff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); display: inline-block; }
.pc-page a { background: #fff; padding: 4px 10px; margin: 5px 5px 6px 5px; color: #0167ff; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); display: inline-block; }
.pc-page-numbers { display: inline-block; color: #333; padding: 10px; margin-bottom: 8px; }
.pc-total-page { background:#fff; padding: 8px 10px; color: #333; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; border-radius: 5px; display: flex; justify-content: center; width: 30%; margin: 0px auto 10px auto; }

/* Bottom css*/
.pc-recent-board { background: #333; color: #fff; padding: 10px; margin: 10px 0px 0px 0px; float: left; }
.pc-recent { float: left; }
.pc-recent-title { color: #fff; font-size: 20px; font-weight: bold; text-transform: uppercase; padding: 0px 10px 10px 10px; border-bottom: 4px solid #fff; }
.pc-recent-group { border-right: 1px solid #fff; width: 33%; }
.pc-recent-head { color: #fff; font-size: 18px; font-weight: bold; text-transform: capitalize; border-bottom: 1px solid #fff; text-align: center; padding: 10px; }
.pc-recent-list { color: #fff; border-bottom: 1px solid #fff; padding: 10px; }
.pc-recent-image { width: 90%; height: 50px; }
.pc-recent-title-list { color: #fff; line-height: 1.3em; font-size: 13px; font-weight: bold; }
.pc-recent-title-list a { color: #fff; padding: 10px; }
.pc-recent-details j { display: inline-block; text-align: center; font-size: 12px; padding: 0px 10px; }

/* Footer css */
.pc-footer-board { background: #000; color: #fff; padding: 10px; margin: 10px 0px; float: left; }
.pc-footer { float: left; }
.pc-footer-group { width: 25%; }
.pc-footer-group ul { padding: 20px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; }
.pc-footer-title { color: #fff; font-size: 18px; font-weight: bold; text-transform: capitalize; text-align: center; padding: 10px; }
.pc-footer-list li { color: #fff; font-weight: bold; padding: 10px; }
.pc-footer-list li a { color: #fff; }
.pc-copy { background: #fff; padding: 10px; text-align: center; position: fixed; bottom: 0; left: 0; color: #333; }

/* HEADERS, DROP-DOWN AND SIDEBARS */
/* Header */
.pc-header { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background: #111; color: #fff; width: 100%; top: 0; left: 0; right:0; border-bottom:2px solid #444; z-index: 9999; display: inline-block; }
.pc-logo { display: table-cell; display: inline-block; width: auto; vertical-align: left; margin-right: 50px; margin-left: 10px; margin-top: 5px; }
.pc-logo img { max-height: none; vertical-align: left; display:inline-block; padding: 10px; margin-bottom: -5px; max-width: none; width: 250px; height: auto; min-width: 250px; min-height: 0; }
.pc-social { display: table-cell; display: inline-block; float: right; }
.pc-social a { text-align: center; padding: 10px; display: inline-block; margin: 10px; color: #fff; vertical-align: right; right:10; top: 10; bottom: 10; }
.pc-main a { color: #000; display: inline-block; padding: 10px; margin: 10px; text-align: center; font-weight: bold; text-shadow: 1px 1px 1px #bcbcbc; }
.pc-main { background: #fff; box-sizing: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-transform: capitalize; border-bottom: 1px solid #ccc; padding-left: 15px; }
.pc-search { display: inline-block; vertical-align: right; margin: 5px; background: #fff; padding: 5px; border-radius: 5px; }
input[name=submit] { display: inline-block; background: #0167ff; color: #fff; font-weight: bold; padding: 10px 20px; border: none; border-radius: 5px; }
input[name=search] { width: 70%; padding: 10px; }
.right { display: inline-block; float: right; margin-top: 2px; color: #fff; }
a.minor { background: #0167ff; color: #fff; padding: 10px; font-weight: bold; border-radius: 10px; }

/* Comment CSS code */
.comment-list { background: #fff; padding: 10px; margin: 10px; border: 1px solid #ccc; color: #414141; border-radius: 5px; font-size: 15px; }
.reply-list { background: #fff; padding: 10px; margin: 10px 8px 10px 50px; border: 1px solid #ccc; color: #414141; border-radius: 5px; font-size: 15px; }
.reply-form { display: none; color: #333; margin-left: 70px; transition: 1.5s; }
.reply { margin: 0px 8px; }
.reply-submit { padding: 6px 8px; font-size: 14px; }
.comment-little { padding: 10px 0px; font-size: 13px; color: #333; }
.comment-group { background: #eee; padding: 10px; }
.avatar { float: left; border-radius: 100%; width:35px; height:35px; margin-right: 6px; }
.comment-head { display: inline-block; }
.comment-text { padding: 10px 0px; }
.reply-textarea { border: 1px solid #ccc; height: 3em; }
.reply-name { border: 1px solid #ccc; padding: 4px; }
ul { margin: 0; }
li { color: #64707d; padding: 4px; margin-left: 8px; font-size: 15px; }
input[type=text] { margin: 4px; padding: 8px; width: 70%; }
textarea { box-shadow: #f0f0f0 0 1px 3px inset; background: #f5f5f5; margin: 4px; padding: 10px; height: 6em; width: 70%; }
input[type=submit] { background: #0167ff; padding: 8px 10px; font-weight: bold; border: none; color: #fff; font-size: 16px; }
blockquote { background: #f9f9f9; padding: 0px 10px; margin: 10px; font-size: 15px; color: #5b5b5b; border-left: 5px solid #ccc; }

/* Drop down panel */
.pc-cpbtn { background: #111; color: #fff; border: none; padding: 12px; cursor: pointer; font-size: 25px; margin: 20px; }
.pc-cp-down { position: relative; display:inline-block; float: right; margin: 0px; right: 0; }
.pc-panel { padding-right: 10px; position: absolute; display: none; background: #fff; min-width: 250px; height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; right: 0; }
.pc-panel a { color: #000; padding: 8px; text-decoration: none; display: block; font-size: 18px; border-bottom: 1px solid #ccc; }
.pc-cp-down:hover .pc-panel { display: block; }
.pc-cpbtn:hover { display: block; }

/* Sidebars */
.pc-head-title { background: #000; color: #fff; padding: 8px; margin: 0px 10px; text-align: left; font-size: 20px; font-weight: bold; text-transform: capitalize; }
.pc-group { background: #fff; color: #333; padding: 5px; margin: 0px 10px 15px 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.pc-sidebar { width: 36%; }
.pc-result1 a { background: #0167ff; color: #fff; font-size: 15px; padding: 8px; display: inline-block; margin: 6px 0px 6px 6px; }
ul.pc-result { list-style: none; margin: 0px; padding: 0px; }
ul.pc-result li a, div.pc-result span a { color: #fff; font-size: 17px; }
.pc-results a { padding: 10px; padding-right: 5px; font-family: Source Sans Pro; }
.pc-results { background: #0167ff; display: inline-block; color: #fff; margin: 6px; padding: 6px 0px; }
.pc-result-no { background: #000; color: #fff; padding: 6.5px 7px; display: inline-block; margin: -7px 0px; }
.pc-wide { float: left; }
.pc-week { position: relative; margin-bottom: 50px; }
.pc-week-title { background: #fff; color: #333; padding: 10px; margin: 0px 20px -30px 20px; position: absolute; font-weight: bold; bottom: 0; }
.pc-week-img { display: flex; justify-content: center; }
.pc-week-img img{ height: 200px; width: 95%; }
.pc-week-download a { background: #0167ff; color: #fff; padding: 8px; text-transform: uppercase; margin: 0px auto 10px auto; width: 50%; display: flex; justify-content: center; text-align: center; float: center; }
.pc-featured { background: #fff; color: #333; border-bottom: 1px solid #ccc; margin: 6px; }
.pc-featured-image { width: 90%; height: 50px; }
.pc-featured-title a { color: #333; font-size: 13px; margin: 6px; font-weight: bold; text-align: left; line-height: 1.2; padding: 10px; }

/* CSS FOR SONG CHARTS, MUSIC LIST E.T.C */
/* Song chart css */
.pc-chart-title { font-weight: bold; margin: 10px; color: #333; }
.pc-chart-date { font-weight: bold; margin: 10px; font-size: 18px; }
.pc-chart-image { width: 100%; height: 60px; border-radius: 10%; margin: auto; }
.pc-list-chart { padding: 10px; font-size: 16px; line-height: 1.4; }
.pc-chart-artist { font-size: 13px; color: #64707d; }
.pc-chart-menu { float: left; display: inline-block; padding: 0px 10px; border-bottom: 1px solid #ccc; width: 46%; }
.pc-chart-no { padding 10px; text-align: center; }
.main a { background: #fff; color: #333; border: 1px solid #ccc; padding: 6px 8px; font-size: 15px; margin: 6px 8px; display: inline-block; }
.rgroup { background: #fff; padding: 10px; }
.select { color: #333; font-size: 14px; font-weight: bold; padding: 8px; border-radius: 20px; display: inline-block; float: right; }

/* Artist Page and profile */

.artist-profile { background: #000; color: #fff; }
.artist-image { margin: 0px 0px -50px 15px; position: absolute; left: 0; bottom: 0; }
.artist-image img { border-radius: 100%; min-width: 120px; max-height: 125px; border: 5px solid #fff; }
.artist-banner { position: relative; }
.artist-banner img { width: 100%; height: 200px; }
.artist-action a { background: #333; color: #fff; padding: 4px; display: inline-block; margin: 10px; text-align: center; border: 1px solid #333; }
.artist-card { background: #fff; color: #333; padding: 20px 10px; }

/* Artist Page */

.artist-group { background: #333; }
.artist-wrap { display: flex; flex-wrap: wrap; justify-content: center; }
.artist-top { background: #fff; color: #333; padding: 10px; }
.artistimage img { padding: 0; margin: 0; width: 100%; max-width: 100%; height: 120px; max-height: 120px; border-radius: 10px; }
.artist-title { font-weight: bold; color: #333; }
.artist-list { background: #fff; width: calc(40% - 20px); /* Subtract 40px for margins */ margin: 10px; border-radius: 10px; padding: 16px; }
.alpha a { background: #000; color: #fff; display: inline-block; padding: 2px 5px; margin: 4px; }
.hot-artist { display: inline-block; margin-bottom: 10px; }
.hot-artist img { margin: 0px 2px; border-radius: 50%; width: 70px; height: 70px; }
.hot-small { text-align: center; font-size: 15px; font-weight: bold; }

/* Streamed Artist CSS code*/
.stream-artist { display: inline-block; margin: 15px 0px; }
.stream-img img { margin: 0px 4px; border-radius: 50%; width: 100px; height: 100px; }
.stream-img { position: relative; }
.stream-no { background: #fff; position: absolute; top: 10px; left: 10px; color: #000; font-weight: bold; opacity: 0.6; z-index: 1; padding: 2px 6px; border-radius: 50%; }
.stream-small { text-align: center; font-size: 15px; font-weight: bold; }
.stream-little { color: #333; font-size: 10px; text-align: center; }