/* CSS Document */

 /******* GENERAL RESET *******/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
  tfoot, thead, tr, th, td {
 border:0pt none; font-family:inherit; font-size: 100%;font-style:inherit;font-weight:inherit;margin:0pt; padding:0pt; vertical-align:baseline;   }

html, body { margin:0; padding:0; }

body { background: #f1f1f1; font-family: Helvetica, Arial;}


.br { clear:both; margin-bottom:0;}
.br_left { clear:left; margin-bottom:0;}
.br_right { clear:right; margin-bottom:0;}

.br_right.hide { display:none;}

i { font-style:italic; color:#777;}

a { text-decoration:none;}
a:hover { text-decoration:underline;}
a.link { color: #095B8C;}
a.link.ul { text-decoration:underline;}
a.link.big { font-size:1.1em;}

a em.artist-name { font-size:.8em; color:#555;}

ul { list-style:none;}

span.sample-ad {display:block; background: #ddd; padding:1em; color:#666;}

/*--------------------------------------------------------
  			Global settings
---------------------------------------------------------*/
header, .body-sec, #footer-sec { max-width:1070px; margin-left:auto; margin-right:auto; }


/* loading sec */
.gb-loading-screen { background: #fff; position: absolute; background: #fff; z-index: 99999; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.9;}
.gb-loading-screen { display: flex; justify-content: center; align-items: center; display: none;}
.gb-loading-screen span.wait { font-size: 1.4em; margin-bottom: 1em; font-weight: bold; display: block; text-align: center;}
.gb-loading-screen img { width: 120px; display: block; margin: 0 auto;}
.gb-loading-screen .content-sec { max-width: 300px; width: 100%; margin-top: -20%;}

/* Lyric Sec */
h3.community { color: #680b70;}
h6.community span { color: #a747d4; }

.lyric-head h3 { font-size: 1.8em; font-weight: bold; text-align: center; margin-top: 1em;  letter-spacing: .018em; text-transform: uppercase;}
.lyric-head h6 { text-transform: uppercase; font-weight: bold; font-size: .85em; color: #d7bf18; text-align: center; margin-top: .5em; letter-spacing: .25em;}


.listing_sec li a { color: #444;}
.listing_sec li a:hover { text-decoration: none;}

.listing_sec li .lyric-item.odd { background: #f5f5f5;}
.listing_sec li .lyric-item .num {color: #d7bf18}

.listing_sec li .lyric-item { padding: .5em; display: flex; align-items: center; }
.listing_sec li .lyric-item .text-sec {  flex-grow: 3; }
.listing_sec li .lyric-item .text-sec { display: flex; justify-content: space-between;}
.listing_sec li .lyric-item .img-sec {  margin-right: 3%; flex-grow: 0;}
.listing_sec li .lyric-item .img-sec img { width: 60px; height: 60px; object-fit: cover;}
.listing_sec li .lyric-item .lyric-name { font-size: 1.1em; display: block; width: 30%; color: #000;}
.listing_sec li .lyric-item .lyric-name i { font-size: .6em; }
.listing_sec li .lyric-item .artist-name { font-size: 1em;  /*border: 1px solid #1290b8*/;}
.listing_sec li .lyric-item .num {font-size: 1.5em;  display: block;  margin-right: 5%; flex-grow: 0; width: 50px; }
.listing_sec li .lyric-item .views { display: block; font-size: .7em; width: 60px;}
.listing_sec li .lyric-item .views img {width: 16px; vertical-align: middle;}
.listing_sec li .lyric-item .views span {}

.listing_sec li.heading .lyric-item .num,
.listing_sec li.heading .lyric-name,
.listing_sec li.heading .artist-name,
.listing_sec li.heading .views {font-size: .85em; font-weight: bold; color: #aaa;}

.listing_sec.community li .lyric-item .num {color: #b66ada}
.listing_sec.community li .lyric-item.odd { background: #f3e7f9;}

/* tab links*/
.rt-gb-tab-nav { padding-left:.6em;}
.rt-gb-tab-nav li { float:left; border:1px solid #ccc; border-bottom:none;  margin-right:.6em; width:100%; max-width:130px;}
.rt-gb-tab-nav li a { display:block; color:#666; font-size:.85em; padding:.7em; text-align:center;  text-decoration:none;}
.rt-gb-tab-nav li a {  background:#ddd; margin-bottom:-1px;}
.rt-gb-tab-nav li a.selected { background:#fff; color:#444; }
.rt-gb-tab-nav li a:not(.selected):hover { background: #030; color:#fff; }

/* Login popup*/
#jp-login-popup { display:none;}
#jp-login-popup.heading h5 { float: left; max-width:500px; font-family: Helvetica, Arial; color:#888; }
#jp-login-popup .heading h5 {font-size:1.4em; margin-bottom:.3em; padding-left:.5em;}
#jp-login-popup .heading h6 {font-size:.9em; color:#555; max-width:230px; float:right; padding-right:1em; }

#jp-login-popup .col.email-login a.gb-email-login { background:#333; color:#fff; padding:1em; font-size:1em; font-weight:300;}

#jp-login-popup .col em { font-size:1.1em; color: #666; font-weight:bold; margin-bottom:1em; display:block;}
#jp-login-popup .col.email-login { width:99%; max-width:290px; }
#jp-login-popup .col.email-login form  { background:#fafafa; border:1px solid #ddd; padding:1em;}
#jp-login-popup .col.email-login form {-webkit-box-shadow: 1px 1px 3px rgba(50, 50, 50, 0.3); -moz-box-shadow: 1px 1px 3px rgba(50, 50, 50, 0.3);}
#jp-login-popup .col.email-login form { box-shadow:  1px 1px 3px rgba(50, 50, 50, 0.3);}

#jp-login-popup .col.email-login label.req { display:block;  font-size:1em; margin-bottom:.7em; color: #555;}
#jp-login-popup .col.email-login label.req2 {  font-size:.8em; color: #777;}
#jp-login-popup .col.email-login label.req2.keep:hover { cursor:pointer;}
#jp-login-popup .col.email-login input.req { margin-bottom:0; display:block; width:95%; font-size:1em; border:1px solid #ddd; background:#eee; padding:.3 em; color: #060;  }
#jp-login-popup .col.email-login input.req:focus { background:#F8F7D6; border:1px solid #C8D022;}
#jp-login-popup .col.email-login input.btn {  width:130px; margin:0 auto; display:block; }


#jp-login-popup .or-line { width:99%;  background: url(../img/icons/or-horizontal-big.png) no-repeat top center; height:15px;}
#jp-login-popup .social-login img.btn { width:150px;}


/*facebook login btn*/
a.jp_facebook_login { background: #3A5BA0;  border-radius: 5px;}
a.jp_facebook_login img { width: 50px; vertical-align: middle;}
a.jp_facebook_login span { font-size: 1em; color: #fff; vertical-align: middle;}

/* Alphabet list*/
.dictionary-alphabet { }
.dictionary-alphabet li.text { width:50px;}
.dictionary-alphabet li { font-size:1em; float:left; width:20px; margin-bottom:.8em;}
.dictionary-alphabet li.popular { width:70px;}
.dictionary-alphabet li a { color:#666;}
.dictionary-alphabet li.selected { margin-right:10px;}
.dictionary-alphabet li a.selected { color:#fff; background:#444; padding:.2em .4em;}
.dictionary-alphabet li a:hover { color: #060; text-decoration:none;}

.alphabet-a-z { display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0 1em;}
.alphabet-a-z li { margin: 0 .5em 1em 0; width: 20px;}

.alphabet-a-z li.selected { margin-right:10px;}
.alphabet-a-z li a.selected { color:#fff; background:#444; padding:.2em .4em;}

/*breadcrumbs*/
.gb-breadcrumbs {/* white-space: nowrap;*/ margin: 0 0 .2em .5em; }
.gb-breadcrumbs li { display: inline-block; line-height: 26px; margin: 0 9px 0 -10px; padding: 0 15px; position: relative; z-index: 999 !important;}
.gb-breadcrumbs li::before, .gb-breadcrumbs li::after { border-right: 1px solid #666666; content: ''; display: block; height: 50%; position: absolute; }
 .gb-breadcrumbs li::before, .gb-breadcrumbs li::after { left: 0; right: 0; top: 0; z-index: -1; transform: skewX(45deg);}
.gb-breadcrumbs li::after { bottom: 0; top: auto; transform: skewX(-45deg); }

.gb-breadcrumbs li:last-of-type::before, .gb-breadcrumbs li:last-of-type::after { display: none; }
.gb-breadcrumbs li  {  font: bold .9em Sans-Serif; letter-spacing: -1px; text-decoration: none; margin-bottom:1em;  }
.gb-breadcrumbs li a { color: #999;}
.gb-breadcrumbs li span { color:#777;}

/*form */
form.form-style fieldset.hide { display:none;}

form.form-style label.req { display:block;  font-size:1.1em; margin-bottom:.7em; color: #555;}

form.form-style  input.req, form.form-style select,
form.form-style textarea { margin-bottom:.5em; display:block; width:95%; font-size:1.2em; border:1px solid #ddd; background:#eee; padding:.7em; color:#060;  }

form.form-style textarea { height:200px; font-size:.95em; font-family: Helvetica, Arial;  margin-bottom:3em;}

form.form-style .btn-sec { width:169px; margin:0 auto; text-align:center;}
form.form-style .btn-sec small { font-size:.8em; color:#bbb;}


form.form-style span.error { background:#FCE0E0; color:#C91D21; border:1px dashed #F44044; display:block; padding:.3em; font-size:.8em; margin-bottom:.5em; }


/*radio buttons*/
form.form-style ul.radio-sec li{ color: #AAAAAA; display: block; position: relative; float: left; width: 180px; }
form.form-style ul.radio-sec li input[type=radio] { position: absolute; visibility: hidden; }
form.form-style ul.radio-sec li label { display: block; position: relative; font-weight: 300; font-size: 1.1em; padding: 25px 5px 25px 80px; margin: 10px auto; }
form.form-style ul.radio-sec li label {  height: 30px; z-index: 9; cursor: pointer;  -webkit-transition: all 0.25s linear;}
form.form-style ul.radio-sec li:hover label {	color: #333;}

form.form-style ul.radio-sec li .check{ display: block; position: absolute; border: 5px solid #AAAAAA; border-radius: 100%;  height: 25px; width: 25px; }
form.form-style ul.radio-sec li .check{ top: 30px; left: 20px; z-index: 5;	transition: border .25s linear; -webkit-transition: border .25s linear; }

form.form-style ul.radio-sec li:hover .check {  border: 5px solid #333;}

form.form-style ul.radio-sec li .check::before {  display: block;  position: absolute; content: '';  border-radius: 100%;  height: 15px;  width: 15px; }
form.form-style ul.radio-sec li .check::before {  top: 5px; left: 5px;  margin: auto; transition: background 0.25s linear;	-webkit-transition: background 0.25s linear; }

form.form-style input[type=radio]:checked ~ .check {  border: 5px solid #538655; }
form.form-style input[type=radio]:checked ~ .check::before { background: #538655; }
form.form-style input[type=radio]:checked ~ label{ color: #538655; }

/* sidebar*/
aside .item.social { background:#fff; border:1px solid #ccc;}

aside .item #tab-nav { list-style:none; background:#eee; margin:0; }
aside .item #tab-nav li { float:left;}
aside .item #tab-nav li a { display:block; color:#666; font-size:.85em;}
aside .item #tab-nav li a:hover { background:#ddd; text-decoration:none;}
aside .item #tab-nav li a.selected { background:#fff; color:#444; }

aside .item #tab-nav li a span { background: url(../img/icons/social-links.png) no-repeat 6px 6px; display:block;  }
aside .item #tab-nav li a span { padding:.8em; padding-left:2.72em;}

aside .item #tab-nav #twitter-con-nav span { background: url(../img/icons/social-links.png) no-repeat 6px -38px; }
aside .item #tab-nav #google-con-nav span { background: url(../img/icons/social-links.png) no-repeat 6px -84px; }
aside .item .content-sec .tab-content { display:none ;}
aside .item .content-sec #facebook-con { display:block;}
/*
aside.dictionary-sidebar .item.categories {border:1px solid #cdcdcd; background:#f4f4f4; padding: .8em;}
aside.dictionary-sidebar .item.categories h6 { font-family: 'cartogothic_stdbold', Helvetica, Arial; color:#777; font-size:1em; margin-bottom:1em; }
aside.dictionary-sidebar .item.categories h6 { padding-bottom:.5em; border-bottom:1px dashed #aaa;}
aside.dictionary-sidebar .item.categories li  { float:left; font-size:.82em; width:135px; margin-bottom:.7em;}
aside.dictionary-sidebar .item.categories li a { color:#555;}
*/
/* pagination */
div.global-pagination {font-size:.8em; margin-top:2em;}
div.global-pagination a { border:1px solid #bbb; padding:.3em .5em .3em .5em;  background: #ddd; text-decoration:none; color:#444;}
div.global-pagination a:hover { background:#444; color:#fff; border:1px solid #333; }
div.global-pagination strong { border:1px solid #bbb; color:#555; padding:.3em .5em .3em .5em; background:#fff;}

/* error*/
.gb-error  { background:#FCE0E0; color:#C91D21; border:1px dashed #F44044; display:block; padding:.6em; font-size:.1.2em; margin-bottom:2em; text-align:center;}

/* error-success msg*/
span.gb-success  { background: #E0FCCF; color: #367621; border:1px dashed #4B9F13; display:block; padding:.6em; font-size:.1.2em; margin-bottom:2em; text-align:center;}


/* visitor msg*/
.gb-visitor-msg { background:#E7FDD9; color:#305831; font-family:  Helvetica, Arial; padding:1em; text-align:center; font-size:.95em;}
.gb-visitor-msg em { font-weight:bold;}
.gb-visitor-msg p { margin-right:2.2em;}
.gb-visitor-msg a.msg { font-weight:bold; color:#256489; text-decoration:underline;}
.gb-visitor-msg a.hide { color:#256489; position:absolute; top:1em; right:1em; }


/*ad sizes*/
.gb-ad-300, .gb-ad-728, .gb-ad-300x600 {/*border: 1px solid #000;*/}
.gb-ad-300 {  width:300px; margin: 0 auto 0 auto;}


/*adult content warning*/
 .adult-warning { border:1px solid #D5C71E; padding:.9em; font-size:.75em; background:#FDFEE2; color:#999; margin-top:1em;}


 /*breadcrumbs*/
 .gb-breadcrumbs {/* white-space: nowrap;*/ margin: 0 0 .2em .5em; }

 .inner-margin { max-width:1070px; margin-left:auto; margin-right:auto; }

 /*become_contributor*/
 .become_contributor { background: #444; color: #ddd;}
 .become_contributor .inner-margin { max-width:1070px; margin-left:auto; margin-right:auto; padding: 1em;}
 .become_contributor h4 { font-size: 1.35em; color: #ded243; font-variant: small-caps; margin-bottom: .5em;}
 .become_contributor p {  font-size: .9em;}
 .become_contributor p a { color: #8dbfe4; text-decoration: underline;}
 .become_contributor .action-sec a { font-size: .95em; color: #8dbfe4; text-decoration: underline;}
 .become_contributor .action-sec a.add {font-size: 1.2em; }


 /*qna ASK A Questions*/
 .gb-ask-question {padding: 1em;}
 .gb-ask-question em { color: #444; font-size: 1.3em; font-weight: bold; display: block; margin-bottom: 1em;}
 .gb-ask-question p { font-size: .9em; margin-bottom: 1em; color: #888;}
 .gb-ask-question a.link { color: #3c7595;}
 .gb-ask-question .ask-sec { display: flex;}
 .gb-ask-question .ask-sec input {display: block; height: 40px; font-size: 1em; padding-left: 1em; width: 100%; border: 1px solid #ddd;}
 .gb-ask-question .ask-sec input {background: #efefef;}
 .gb-ask-question .ask-sec button { font-size: 1em;  width: 80px; background: #0f61ac; width: 80px; display: block;}
 .gb-ask-question .ask-sec button { color: #fff; text-align: center; border:1px solid #999;}
 .gb-ask-question .ask-sec button img { width: 22px;}


/*header*/
#header-container { background:#242125; padding-top:.7em;}

header .logo-sec { float:left; width:270px; margin-left: -100%;  }
header .logo-sec h2 { font-size:.75em; color:#aaa; margin-left:.5em;}

header .action-sec { float:left; width:100%;   }
header .action-sec-inner {margin-left:270px; padding:.7em .5em 0 0;   }

header .action-sec ul { list-style:none; font-size:.95em; color: #bbb;}
header .action-sec ul li { margin-right:.7em;}
header .action-sec ul li a {color: #bbb;}

header .action-sec ul.small-nav { display:none;}

header .action-sec nav { float:left; width:73%;  }
header .action-sec nav li { float:left; margin-right:2.3em;}
header .action-sec nav li a:hover { color: #9BC61A; text-decoration:none;}
header .action-sec nav li.last { margin-right:0;  }

header .action-sec div.account-sec { float:right; width:26%;   }
header .action-sec div.account-sec li { float:right; margin-right:.5em;}
header .action-sec div.account-sec li:first-child { margin-right:0; }



header .action-sec div.account-sec.myc {  width:190px; }
header .action-sec div.account-sec.myc li { float:none;}

/*notification section*/
header .mobile-notification-area { display:none;}

header .action-sec .notify-icon { float:left; width:43px; padding-top:.2em; position:relative;}
header .action-sec .notify-icon .img-bell { width:27px;}
header .action-sec .acc-ul.notify-icon a { display:block; position:relative;}
header .action-sec .acc-ul.notify-icon a span.notify-num { color:#fff;  font-size:.7em; display:block; border:1px solid #B52225; border-radius: 30%;}
header .action-sec .acc-ul.notify-icon a span.notify-num { position:absolute; top:-5px; left:14px;  background:#E42929; padding:.2em .3em; }

header .action-sec .acc-ul.notify-icon .notify-dropdown-bg { position:absolute; left:-380px; top:31px; width:400px; display:none; z-index:99999;  }
header .action-sec .acc-ul.notify-icon .notify-dropdown { background:#fff; border:1px solid #ccc; margin-top:-9px; overflow-y:auto; max-height:400px;}
header .action-sec .acc-ul.notify-icon .notify-dropdown {box-shadow: 2px 6px 5px -3px rgba(0,0,0,0.75); font-size:.9em;}

header .action-sec .acc-ul.notify-icon .notify-dropdown .empty { font-size:1em; display:block; text-align:center; color:#999; padding:1em;}

header .acc-ul.notify-icon .arrow-up {  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #fff; }
header .acc-ul.notify-icon .arrow-up { width: 0; height: 0; float:right;}

header .acc-ul.notify-icon .notify-dropdown h6 { font-weight:bold; padding: 1em; border-bottom:1px solid #ccc; color:#333; }
header .acc-ul.notify-icon .notify-dropdown li { border-bottom:1px solid #ccc; padding:.7em; display:block;   }
header .acc-ul.notify-icon .notify-dropdown li:hover { background:#F4FAFD;}
header .acc-ul.notify-icon .notify-dropdown li.unread { background: #F5FFF4;}
header .acc-ul.notify-icon .notify-dropdown li .img-icon { float:left; margin-right:1em; width:25px;}
header .acc-ul.notify-icon .notify-dropdown li .notify-content { float:left;  width:310px; color:#666;}
header .acc-ul.notify-icon .notify-dropdown li .notify-content em { font-weight:bold; font-size:.9em; }
header .acc-ul.notify-icon .notify-dropdown li .notify-content p { font-size:.89em; margin-top:.5em;}
header .acc-ul.notify-icon .notify-dropdown li .notify-content p em { font-size:1em;}
header .acc-ul.notify-icon .notify-dropdown li .notify-content .date { color:#999; font-size:.8em;}
header .acc-ul.notify-icon .notify-dropdown a.link { display:block; text-align:center; font-size:.85em; font-weight:bold; padding:.7em;}
 header .acc-ul.notify-icon .notify-dropdown a.link:hover {background: #F4FAFD;}

/* account dropdown*/
header .action-sec .account-link-part { float:left; width:140px;}


header .action-sec div.account-sec.myc ul.my li.main {background:#111; width:100%; }
header .action-sec div.account-sec.myc ul.my li.main a { display:block;  background: url(../img/header/arrow.png) no-repeat; border:#222 1px solid;}
header .action-sec div.account-sec.myc ul.my li.main a { padding:.5em 0 .5em .9em; background-position:115px -26px; font-size:.85em;}
header .action-sec div.account-sec.myc ul.my li.main a.arrow {background-position:115px 10px;}

header .action-sec div.account-sec.myc ul.my li.dropdown ul { position:absolute; display: none; z-index:1999999; }
header .action-sec div.account-sec.myc ul.my li.dropdown ul li { /*display:block; float:none; */ }
header .action-sec div.account-sec.myc ul.my li.dropdown ul li a { display:block; width:140px; text-align:center; padding:.5em 0; background: #000; border-bottom:1px #222 solid;     }
header .action-sec div.account-sec.myc ul.my li.dropdown ul li a:hover {color: #9BC61A;}

header .action-sec div.account-sec ul.my li a:hover { text-decoration:none;}


header .action-sec form { margin-top:1em;}
header .action-sec form .search-text-con-bg {  width:100%;  float: right; }
header .action-sec form .search-text-con { margin-right:117px; background:#999;}

header .action-sec form .search-btn-con { width:96px; float: right; margin-right: -100%; }

header .action-sec form input.text { vertical-align:middle; width:100%; padding:.39em .5em; font-size:1.2em; border:1px solid #333; margin-top:-.1em;}
header .action-sec form input.text { -webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 1); -moz-box-shadow:    1px 1px 2px rgba(50, 50, 50, 1);}
header .action-sec form input.text { box-shadow:         1px 1px 2px rgba(50, 50, 50, 1);}

header .action-sec form input.btn { vertical-align:middle; margin:-.1em 0 0 -.1em; width:100%; }

header ::-webkit-input-placeholder {color: #999; }
header :-moz-placeholder {color: #999; }
header :-ms-input-placeholder { color:#999; }




/*footer*/
footer { background:#242125; padding: 0 .3em;}

footer img.footer-logo { display:block; margin:0 auto 1em auto;}

footer .f-alphabet { border-bottom:1px solid #444; padding-bottom:1em; margin-bottom: 1em;}
footer .f-alphabet li { float:left; width:3.7%;}
footer .f-alphabet li a { color:#aaa;}
footer .f-alphabet li a:hover { color:#9BC61A; text-decoration:none;}

footer .footer-nav {  padding-top:1em; display: flex; justify-content: space-between; max-width: 600px;}
footer .footer-nav .item { padding-right: 1em;}
footer .footer-nav .item .title { color: #aaa; font-weight: bold; font-size: .96em; display: block; margin-bottom: 1em;}
footer .footer-nav .item li { font-size: .9em; margin-bottom: .7em;}
footer .footer-nav .item li a { color: #888;}
footer .footer-nav .item li a.add { color: #9e9a16;}

footer .social-links { display: flex; justify-content: center;}
footer .social-links ul { display: flex; max-width: 220px; width: 100%; justify-content: space-between;}

footer .footnote { display:block; text-align:center; color:#555; font-size:.8em; margin-top:1em;}


/*--------------------------------------------------------
  			Small Screen
---------------------------------------------------------*/
@media screen and (max-width: 700px) {

  .listing_sec li .lyric-item {  }
  .listing_sec li .lyric-item .text-sec { flex-wrap: wrap; }

  .listing_sec.members li .lyric-item .text-sec { flex-wrap: nowrap; }

  .listing_sec li .lyric-item .text-sec { }
  .listing_sec li .lyric-item .img-sec { }
  .listing_sec li .lyric-item .img-sec img { }
  .listing_sec li .lyric-item .lyric-name { flex-basis: 100%; }
  .listing_sec li .lyric-item .lyric-name i { }
  .listing_sec li .lyric-item .artist-name { color: #777; font-size: .8em;}
  .listing_sec li .lyric-item .views { font-size: .6em; margin-top: 1em;}
  .listing_sec li .lyric-item .views img {width: 13px;}

.listing_sec li .lyric-item .views.hide { display: none;}

.listing_sec li .lyric-item .lyric-name { font-size: .95em; }
.listing_sec li .lyric-item .lyric-name i { font-size: .5em; }
.listing_sec li .lyric-item .artist-name { font-size: .7em;  /*border: 1px solid #1290b8*/;}
}

@media screen and (max-width: 600px) {


/* Alphabet list*/
.dictionary-alphabet li.popular { width:80px;}
.dictionary-alphabet li { width:40px; margin-bottom:1.1em; font-size:1em; }

header .logo-sec {  width:190px; padding-left: .7em; }
header .logo-sec img.logo { width:110px;}
header .action-sec-inner {margin-left:0; padding-right:0;  }

header .logo-sec img { width:150px; }
header .logo-sec  h2{ display:none;}

/*nav sec*/
header .action-sec ul.small-nav { display: block; float:right; margin: 1em 0 0 0;}
header .action-sec ul.small-nav li { float:left; margin: 0 .5em 0 1.3em;}
header .action-sec ul.small-nav li:first-child { margin: 0 .5em 0 1em;}

/*notification area*/
header .action-sec ul.small-nav li.notify-area {}
header .action-sec ul.small-nav li.notify-area img.img-bell { width:29px;}
header .action-sec ul.small-nav li.notify-area a { display:block; position:relative;}
header .action-sec ul.small-nav li.notify-area a span.notify-num { color:#fff;  font-size:.7em; display:block; border:1px solid #B52225; border-radius: 30%;}
header .action-sec ul.small-nav li.notify-area a span.notify-num { position:absolute; top:-5px; left:14px;  background:#E42929; padding:.2em .3em;}

header .mobile-notification-area {}
header .mobile-notification-area .notify-dropdown { background:#fff; border:1px solid #ccc; font-size:.9em;}
header .mobile-notification-area .notify-dropdown .empty { font-size:1em; display:block; text-align:center; color:#999; padding:1em;}

header .mobile-notification-area .notify-dropdown h6 { font-weight:bold; padding: 1em; border-bottom:1px solid #ccc; color:#333; }
header .mobile-notification-area .notify-dropdown li { border-bottom:1px solid #ccc; padding:.7em; display:block;   }
header .mobile-notification-area .notify-dropdown li:hover { background:#F4FAFD;}
header .mobile-notification-area .notify-dropdown li.unread { background: #F5FFF4;}
header .mobile-notification-area .notify-dropdown li .img-icon { float:left; margin-right:1em; width:25px;}
header .mobile-notification-area .notify-dropdown li .notify-content { float:left;  width:100%; max-width:340px;  color:#666;}
header .mobile-notification-area .notify-dropdown li .notify-content em { font-weight:bold; font-size:.9em; }
header .mobile-notification-area .notify-dropdown li .notify-content p { font-size:.89em; margin-top:.5em;}
header .mobile-notification-area .notify-dropdown li .notify-content p em { font-size:1em;}
header .mobile-notification-area .notify-dropdown li .notify-content .date { color:#999; font-size:.8em; display:block; margin-top:.5em;}
header .mobile-notification-area .notify-dropdown a.link { display:block; text-align:center; font-size:.85em; font-weight:bold; padding:.7em;}
header .mobile-notification-area .notify-dropdown a.link:hover {background: #F4FAFD;}


header .action-sec nav { float: none; width:100%; margin-top:.5em; display:none; }
header .action-sec nav li { float: none; margin-right:0;}
header .action-sec nav li a { display:block; background:#111; border-bottom:1px solid #333; padding:1em .3em; }

/* searchs sec*/
header .action-sec form { margin:1em 0; display:none;}
header .action-sec form .search-btn-con { width:87px}
header .action-sec form .search-text-con { margin-right:105px; }
header .action-sec form input.text { font-size:1.06em;}


/* my account sec*/
header .action-sec div.account-sec { margin:-1.6em 0 0 0; width:120px; background:#1c1c1c; border:1px solid #444; padding: .2em .6em; font-size:.9em; }

header .action-sec div.account-sec.loreg {padding: .6em .6em; width:140px; }
header .action-sec div.account-sec.loreg li.or { margin:0 1.2em;}

header .action-sec div.account-sec.myc { margin:-1.6em 0 0 0; width:145px; background: none; border: none; padding:0; font-size:.9em; }
header .action-sec div.account-sec.myc ul.my li.main a {padding:.8em 0 .8em .9em; }
header .action-sec div.account-sec.myc ul.my li.dropdown ul li a {  width:139px;  padding:.9em 0 .9em 0;   }

header .action-sec .br_right.hide { display: block;}

header br.small-hide { display:none;}


/*notification section*/
header .action-sec .notify-icon { display:none;}


/*footer*/
footer img.footer-logo {  margin:0 auto 0 auto;}
footer .f-alphabet ul { display:none;}




}


@media screen and (max-width:470px) {


/* logo sec*/
header .logo-sec {  width:150px;   }
header .logo-sec img { width:130px;}

/*nav sec*/
header .action-sec ul.small-nav {}

header .action-sec form .search-text-con-bg { margin-left:.5em;}

/*notification section*/
header .mobile-notification-area .notify-dropdown li .notify-content {  max-width:240px;  }

/* nav */
footer .footer-nav { padding-left: 1em;}
footer .footer-nav .item .title {  font-size: .9em; }
footer .footer-nav .item li { font-size: .79em; margin-bottom: .85em; }
}


/*--------------------------------------------------------
  			Medium Screen
---------------------------------------------------------*/
@media screen and (min-width: 601px) and (max-width:840px) {

header .logo-sec {  width:210px;  }
header .action-sec-inner {margin-left:210px;  }

/*nav sec*/
header .action-sec nav { float: none; width:100%; margin-top:.5em; }
header .action-sec nav li { margin-right:0; width:20%;  text-align:center;}

/* my account sec*/
header .action-sec div.account-sec { margin:-1.6em 0 1em 0; width:130px; background:#1c1c1c; border:1px solid #444; padding: .2em .4em; font-size:.9em; }

header .action-sec div.account-sec.loreg {padding: .6em .6em; width:140px; }
header .action-sec div.account-sec.loreg li.or { margin:0 1.2em;}

header .action-sec div.account-sec.myc { margin:-1.6em 0 1em 0; width:190px; background: none; border: none; padding:0; font-size:.9em; }
header .action-sec div.account-sec.myc ul.my li.dropdown ul li a {  padding:.9em 0 .9em 0;   }

header .action-sec .br_right.hide.one { display: block;}

/* searchs sec*/

header .action-sec form { margin-top:0}

header .action-sec form .search-btn-con { width:87px}
header .action-sec form .search-text-con { margin-right:105px; }


header .action-sec form input.text { font-size:1.06em;}
}

@media screen and (min-width: 601px) and (max-width:693px) {

footer img.footer-logo {  margin:0 auto 0 auto;}
footer .f-alphabet ul { display:none;}

/* footer .left { max-width:100%; float: none; margin-bottom:2em; }
footer .left ul.first { margin-bottom:1em;}
footer .left ul.first li { width:24%; text-align:center; margin:0;}

footer .left ul.sec li { width:25%; text-align:center; margin:0;} */

/* footer .right { width:250px;  float: none; margin:0 auto; } */

}