/* RESET ------- */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, output, section, summary, time, mark, audio, video { position: relative; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; font-size: 100%; vertical-align: baseline; border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; }



/* FONTS ------- */

@font-face {
	font-family: 'titillium';
	src: url('/assets/titillium-web-regular-webfont.woff2') format('woff2'),
	url('/assets/titillium-web-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap; }

@font-face {
	font-family: 'trueno';
	src: url('/assets/trueno.woff2') format('woff2'),
	url('/assets/trueno.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap; }

/* NOTES
COLORS
background dark grey 	- 2b2a32
gold									- fab723

::before STAR = \2605
*/



/* BODY AND GENERAL STYLES ------- */

html {
	font: normal 16px/1 'titillium', sans-serif;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body {
	flex-wrap: nowrap;
	padding-bottom: 250px;
	min-height: 100vh;
	background-color: #27262e;
	overflow-x: hidden; }

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
body::-webkit-scrollbar-thumb {
	min-height: 50px;
	background-color: #fab723;
	border-radius: 24px;
	outline: 0 solid slategrey; }

body.show-modal {
	overflow: hidden;
	pointer-events: none; }

body.show-modal:before {
	content: '';
	display: block;
	position: absolute; top: 0; left: 0; z-index: 76;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0, .77);
	pointer-events: all; }

h1, h2, h3, .logo {
	font-family: 'trueno', sans-serif;
	color: #fab81e;
	text-transform: uppercase; }

h1, h2, h3 { width: 100%; }

h1 {
	margin: 0;
	padding: 18px 0 0;
	font-size: 1.85rem;
	line-height: 1;
	color: #fab81e;
	letter-spacing: -.0025em; }


h1 a {
		display: block;
		width: 100%;
		color: #fff;
		letter-spacing: -.025em;
		text-decoration: none;
		-webkit-transition: all .25s ease-in-out;
		-o-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out; }

h1 a:hover,
h1 a:focus { color: #fab81e; }

h2 { font-size: 1.5rem; }

p {
	margin: 0 0 20px;
	line-height: 1.4; }

.question {
	margin-bottom: 5px;
	font-weight: bold; }

a { color: #fab81e; }
a:focus { border: 0; outline: 0; }


/* FLEX CLASSES ------- */

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-row, .fr { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.flex-column, .fc { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.justify-center, .jc { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.justify-around, .ja { -ms-flex-pack: distribute; justify-content: space-around; }
.justify-between, .jb { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.justify-end, .je { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.align-start, .as { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.align-center, .ac { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.align-stretch, .astretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.flex-wrap, .fw { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.fb > div { flex-basis: 0; flex-grow: 1; min-width: 300px; } 
img { flex-shrink: 0; }

/* LAYOUT ------- */


header {
	background: #27262e;
	width: 100%;
	box-shadow: 0 2px 5px rgba(0,0,0, 0.5); }

.inner {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	margin: 0 auto;
	padding: 15px 30px;
	max-width: 960px; }

.inner > div { min-width: 244px; }

.logo {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
	-ms-flex-wrap: nowrap; flex-wrap: nowrap;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	text-decoration: none; }
	
.logo a, .logo img {
	display: block;  
	width: 100%; max-width: 400px;
	height: auto; 
}

.awesome, .cm {
	display: block;
	transition: all .25s ease-in-out;	}

.awesome {
	padding-top: .5rem;
	font-size: 3.2rem;
	line-height: .7;
	color: #fff; }

.cm {
	font-size: 1.9rem;
	line-height: 1;
	color: #fab81e;
	letter-spacing: .0075em;
	white-space: nowrap; }



/* NAV ------- */

.topnav { margin: 0; }

.topnav li {
	list-style: none;
	margin: 0;
	padding: 15px;
	white-space: nowrap; }

.topnav a {
	font-weight: bold;
	line-height: 1;
	color: #fff;
	text-decoration: none; }

.topnav a:hover,
.topnav a:focus { color: #fab81e; }

.navwrap {
	height: 100px;
	width: calc(100% - 244px); }

.nav-soc {
	display: block;
	padding: 0;
	width: 100%;
	text-align: center; }

.topnav li.nav-soc { padding: 0; }

.nav-soc a {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	border-radius: 5px; }

.topnav .fb img,
.topnav .tw img 
 {
	width: 24px; 
	color: #fff;
}

.topnav .fb img:hover,
.topnav .tw img:hover 
 {
	color: #fab81e;
}




.wrap {
	margin: 20px auto 0;
	padding-bottom: 50px;
	width: 960px; }



/* BIGVID ------- */

.yt-player {
	padding-top: 56.25%;
	height: 0;
	width: 100%;
	border-radius: 10px 10px 0 0;
	overflow: hidden; 
}

.yt-player.classic { padding-top: 56.25%; }

.yt-player.cinema { padding-top: 42.5%; }

.bigvid .editors-pick {
	padding: 7px 0 5px;
	background-color: #fab723;
	font: bold 1.25rem/1 'Trueno', sans-serif;
	color: #2b2a32;
	text-align: center;
	text-transform: uppercase;
	border-radius: 5px 5px 0 0; }

.editors-pick + .yt-player { border-radius: 0; }

.lyrics .yt-player iframe { border-radius: 0; }

.yt-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; }

.vid-nav {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	position: relative;
	padding: 15px 20px;
	background: #191919;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 2px 5px -2px rgba(0,0,0, 1); }

.vid-nav > div { width: 50%; }
.vid-nav > div a { min-width: 74px; max-width: 100%; text-align: center; }
.nav-options { justify-content: flex-end; }

.autoplay-shuffle {
	position: absolute; left: -160px; top: -36px;
}
#autoplay { margin-left: 0; }

.skip-around {
	position: absolute; right: -160px; top: -36px;
}

.vid-overlay { display: none;
	position: absolute; bottom: calc(1rem + 36px); left: 25%;
	margin: 0 auto;
	padding: 10px;
	width: 50%;
	font: normal .75rem/1 'Trueno', sans-serif;
	text-align: center;
	background: #191919;
	border-radius: 10px 10px 0 0;
}

.id-nav a,
a.tn,
.tns a {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	margin: 0 5px;
	padding: 7px 10px 5px;
	background: #ddd;
	font-size: .75rem;
	color: #27262e;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	border: 0;
	border-radius: 3px;
	transition: box-shadow ease-in-out .125s;
	cursor: pointer;
	white-space: nowrap; }

#revsong { padding-left: 20px; }
#extsong { padding-right: 20px; }

#prevsong:before,
#nextsong:before {
	display: block;
	position: absolute; top: .45rem; left: 5px;
	padding: 0;
	height: 1ch;
	width: 1ch;
	font-size: 20px;
	color: #444;
	line-height: 1;
	-webkit-transform: rotate(-90deg);
	 -ms-transform: rotate(-90deg);
				transform: rotate(-90deg); }
				
#prevsong, #nextsong { display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; line-height: 1.2; }
#prevsong img, #nextsong img { height: 12px; }
#prevsong img { transform: scaleX(-1); }

#nextsong:before {
	top: .43rem; left: 42px;
	-webkit-transform: rotate(90deg);
	 -ms-transform: rotate(90deg);
	 transform: rotate(90deg); }

#share {
	argin-left: auto;
	padding-left: 7px;
}

#share img {
	top: -.025rem;
	margin-right: 10px;
	height: 12px;
}

.vid-nav a.on { background-color: #fab81e; }
.vid-nav:not(.playlist).shuffle ~ #next-up-shuffle { display: block; }
.vid-nav:not(.playlist):not(.shuffle) ~ #next-up-noshuffle { display: block; }
.vid-nav.playlist ~ #next-up-playlist { display: block; }

.next-up {
	display: none;
	margin: 0 6% 30px;
	padding: 10px 10px 16px;
	background: #171717;
	color: #fff;
	line-height: 1;
	text-align: center;
	border-top: 2px solid rgba(0,0,0, .5);
	border-radius: 0 0 10px 10px; }

.lyrics a {
	padding: 0 3px;
	background-color: #fab81e;
	color: #000;
	text-decoration: none;
	border-radius: 3px; }

.lyrics a:hover {
	background: #27262e;
	color: #fff; }

.lyrics a em { padding-right: 3px; }

.credits {
	font-style: italic;
	font-size: .85rem; }

.player-controls {
	width: 100% !important;
	background-color: #191919;
	text-transform: uppercase;
}
.player-controls > div { gap: 5px; }

.player-controls a {
	position: relative;
	margin: 0;
	padding: 5px 10px;
	max-height: 22px;
	background-color: #ddd;
	font: normal .75rem/1 'titillium web', sans-serif;
	color: #27262e;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 3px;
	cursor: pointer;
	user-select: none;
}
#share img {
	height: 12px;
}
#share,
#prevsong {
	argin-left: auto;
}
#share,
#shuffle {
	margin-right: 0;
}
#share {
	z-index: 2; 
	padding-left: 26px;
}
#share img {
	position: absolute; top: 5px; left: 7px;
}
#prevsong,
#nextsong {
	text-align: justify;
}
.player-controls a span {
	top: 1px;
	font-weight: bold;
	font-size: 1rem;
	line-height: .5rem;
	color: #666;
}



/* MODAL ------- */


.share-modal {
	display: none;
	position: fixed; top: calc(50vh - 100px); left: calc(50vw - 150px); z-index: 77;
	margin: 0 auto 30px;
	padding: 10px 10px 5px;
	width: 300px;
	background: #191919;
	color: #fff;
	border: 2px solid rgba(255,255,255, .7);
	border-radius: 5px;
	pointer-events: all; }

.show-modal .share-modal { display: -webkit-box; display: -ms-flexbox; display: flex; }

.share-grid {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	margin-top: 5px; }

.share-grid > a {
	display: inline-block;
	margin: 0 0 10px;
	padding: 0;
	width: 50px;
	height: 50px;
	background-color: #ddd;
	background-image: url(/images/web.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
	color: #fff;
	text-indent: -999999px;
	border: 0;
	border-radius: 3px;
	transition: transform .3s ease;
}

.share-grid a[href*=facebook] { background-color: #4267b2; 	background-image: url(/images/fb.svg); }
.share-grid a[href*=twitter] 	{ background-color: #1b9ff1; 	background-image: url(/images/tw.svg); }
.share-grid a[href*=reddit] 	{ background-color: #f50; 		background-image: url(/images/re.svg); background-size: 50px 50px; }
.share-grid a[href*=tumblr] 	{ background-color: #303d4d; 	background-image: url(/images/tu.svg); }

.share-grid a:hover,
.share-grid a:focus { border: 0; }

.share-grid > div {
	padding: 3px;
	width: 100%;
	background: #777;
	border-radius: 3px; }

.share-modal h2 { font-size: 1.77rem; }

.share-grid > div input {
	margin: 0 3px 0 0;
	padding: 0 2px;
	height: 30px;
	width: 219px;
	font-size: .8rem;
	border: 0;
	border-radius: 3px 0 0 3px; }

.share-grid > div a {
	left: 3px;
	padding: 4px 6px;
	height: 30px;
	width: 41px;
	background: #191919;
	font-size: .75rem;
	line-height: 27px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	border-radius: 3px;
	cursor: pointer; }

.modal-close {
	position: absolute; top: -12px; right: -12px; z-index: 78;
	padding: 3px;
	height: 24px;
	width: 24px;
	background: #191919;
	line-height: .8;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer; }



/* ARTIST DETAILS ------- */

.artist-tags {
	margin-bottom: 40px;
	border-radius: 10px; }

.artist-tags h2 {
	margin: 0 0 5px;
	font-size: 1.5rem;
	color: #fab81e;
	letter-spacing: 0uh;
	text-transform: uppercase; }

.artist, .tags {
	padding: 20px 20px 15px;
	min-width: 260px;
	width: 49%;
	background: #191919;
	color: #fff;
	border-radius: 10px; }

.artist { background-color: #191919; }

.feat {
	margin: 0 0 5px;
	padding-left: 3px;
	font-size: 1rem;
	color: #fab81e;
	letter-spacing: 1px; }

.bigvid .feat { color: #fff; }

.artist h2 a {
	font: normal 1.5rem/1 'trueno', sans-serif;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase; }

.artist h2 a:hover,
.artist h2 a:focus { color: #fab81e; }

.artist-social a {
	display: inline-block;
	margin: 0 5px 6px 0;
	width: 50px;
	height: 50px;
	background: #ddd url(/images/web.svg) center center / 32px 32px no-repeat;
	color: #fff;
	text-indent: -999999px;
	border: 0;
	border-radius: 3px;
	-webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }

.artist-social a					 	{ background-color: #639; 		background-image: url(/images/icon-home.svg); }
.artist-social a[href*=wikipedia]		{ background-color: #fff; 		background-image: url(/images/wi.svg); }
.artist-social a[href*=youtube] 		{ background-color: #f00; 		background-image: url(/images/yt.svg); }
.artist-social a[href*=facebook] 		{ background-color: #4267b2; 	background-image: url(/images/fb.svg); }
.artist-social a[href*=twitter] 		{ background-color: #1b9ff1; 	background-image: url(/images/tw.svg); }
.artist-social a[href*=soundcloud] 		{ background-color: #f50; 		background-image: url(/images/sc.svg); }
.artist-social a[href*=instagram] 		{ background-color: #eee; 		background-image: url(/images/ig.svg); }

.artist-social a:hover,
.artist-social a:focus { border: 0; border-radius: 50%; }

.artist-social a:before {
 content: '';
 background-color: #fff;
 border-radius: 5px;
 display: block;
 position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;
 -webkit-transform: scale(0.001, 0.001); -ms-transform: scale(0.001, 0.001); transform: scale(0.001, 0.001); }

.artist-social a:hover:before { -webkit-animation: boink 0.8s ease-out; animation: boink 0.8s ease-out; }

@-webkit-keyframes boink {
	50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; }
	99% { -webkit-transform: scale(2, 2); transform: scale(2,2); opacity: 0; }
	100% { -webkit-transform: scale(3,3); transform: scale(3,3); opacity: 1; }
}
@keyframes boink {
	50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); opacity: 0; }
	99% { -webkit-transform: scale(0.05, 0.05); transform: scale(0.05, 0.05); opacity: 0; }
	100% { -webkit-transform: scale(0.05, 0.05); transform: scale(0.05, 0.05); opacity: 1; }
}



/* TAGS ------- */

.tags ul {
	list-style: none;
	margin: 0; }

.tags li {
	margin: 0 4px 4px 0;
	padding: 3px 7px;
	background: #555;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(255,255,255, 0); }

.tags li.genre {
	background: #000;
	box-shadow: 0px 2px 2px #000; }

.tags li:hover,
.tags li:focus {
	background: #000;
	box-shadow: none; }

.tags a {
	font-size: .8rem;
	color: #fff;
	text-decoration: none; }

.tag-cloud {
	opacity: 0;
	height: 0;
	overflow: hidden;
	transition: all .5s ease-in-out; }

.tag-cloud h2 { margin: 0 0 20px; }

.tag-cloud-toggle { cursor: pointer; }

.tag-cloud.shown {
	opacity: 1;
	margin: 0 0 60px;
	height: auto;
	transition: all .5s ease-in-out; }
	
.tag-cloud > div { gap: 15px 10px; }

.tag-cloud h3 {
	font-size: 20px; 
	color: #fff; 
}

.sort a.create-playlist { padding: 10px 10px 10px 30px !important; }

.song-grid {
	content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

.song-grid .create-playlist img {
	position: absolute; top: 7px; left: 9px;
	margin: 0 5px 0 0;
	height: 16px;
	width: auto !important;
}

.song-grid .create-playlist:hover img {
	box-shadow: none; 
}

.sort a.create-playlist::after {
	content: "New! Make a Playlist!";
  display: block;
  position: absolute; bottom: -1.5em; left: 20px;
	width: auto;
  font-family: trueno;
	font-size: 11px;
	color: #fab81e;
}

.tc-genres { margin: 0 0 30px; }

.tag-cloud a {
	display: inline-block;
	margin: 0;
	padding: 5px 9px;
	background: #555;
	font-size: 1rem;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;	}

.tag-cloud a:hover {
	background-color: #000;
	color: #fff; }

.tc-genres a,
.tc-topics a {
	margin: 0; 
	background-color: #000;
	color: #fff; }

.tc-genres a:hover { color: #fff; }

.tc-topics a { background-color: #555; }


/* HOME PAGE */

.intro {
	margin-top: 10px;
	padding: 10px;
	background: rgba(25,25,25, .5);
	border-radius: 10px; }

.intro h2, .intro p {
	display: inline-block;
	margin: 0;
	width: 49%; }

.intro h2 {
	font-size: 2rem;
	text-align: center; }

.intro p {
	padding: 20px;
	background: #191919;
	color: #fff;
	border-radius: 10px; }

.home .intro:last-of-type p { text-align: center; }

.home h1 { margin-top: 30px; }

.home .yt-player:after {
	ontent: 'NEW!';
	display: inline-block;
	position: absolute; bottom: -20px; left: -10px;
	margin: 0;
	padding: 10px 27px 28px 30px;
	background: #fff;
	font-size: .95rem;
	line-height: 1;
	color: #191919;
	letter-spacing: 0;
	text-align: center;
	border-top-right-radius: 10px; }

.home .song-list { margin-top: 0; }

.footer-intro {
	margin-top: 40px;
	padding: 10px;
	width: 100%;
	background: rgba(25,25,25, .5);
	border-radius: 10px; }


/* VIDGRID -------*/

h2.home-grid { font-size: 2rem; }

.song-grid h1 {
	margin: 20px 0 0;
	font-size: 2rem; }

.related a,
.song-grid > a,
.sort a,
.loadbtn {
	display: block; z-index: 1;
	margin: 0 0 60px;
	width: 300px;
	font-size: 1rem;
	color: #fff;
	text-align: left;
	text-decoration: none;
	text-shadow: 0 1px 1px #000;
	text-transform: uppercase; }

.song-grid span { display: block; }

.related a:hover,
.song-grid > a:hover,
.related a:focus,
.song-grid > a:focus { color: #fab81e; }

.related a:hover img, .song-grid a:hover img { box-shadow: 0 0 8px #000; }
.song-grid .artist { width: 100%; margin: -15px 0 30px; }

.loadbtn {
	display: block;
	width: 30%;
	margin: 0 auto;
	padding: 5px 20px;
	border: 1px solid #fff;
	border-radius: 10px;
	text-align: center;
	cursor: pointer;
}
.loadbtn:hover,
.loadbtn:focus { color: #fab81e; border-color: #fab81e; }

.ep:before {
	content: "\2605  Editors' Pick \2605";
	position: absolute; top: calc(164px - 1em); z-index: 9;
	padding: 3px 0 2px;
	width: 100%;
	background-color: #fab723;
	font-weight: bold;
	line-height: 1;
	color: #444;
	text-align: center;
	text-shadow: none; }

/* EVERYTHING PAGE ------- */

.sorted { width: 100%; }

.sort {	margin: 0 0 30px; }

.sort a {
	margin: 0 20px 20px 0;
	padding: 10px;
	width: auto;
	background: #ddd;
	font-size: .8rem;
	line-height: .7rem;
	color: #27262e;
	text-shadow: none;
	border-radius: 5px; }

.sort a:nth-last-child(2) {
	margin-left: 30px;
	padding: 10px; }
.sort a:last-child {
	padding: 10px; }

.sort a.desc,
.sort a.asc { background: #fab81e; }

.sort a.asc:after,
.sort a.desc:after {
	content: '\25b2';
	display: inline-block;
	margin-left: 10px;
	color: #000; }

.sort a.desc:after { content: '\25bc'; }

.sort a:hover,
.sort a:focus {
	background: #fab81e;
	color: #27262e; }

.sorter {
	margin: 10px auto 30px;
	padding: 40px;
	width: 100%; }

.sorter input {
	margin-bottom: 0;
	font-size: 1.25rem; }

.song-grid a.filter-hidden { display: none; }

.sort-options { margin: 0 auto; }

.sort-options h2 {
	margin: 0 0 10px;
	font: normal 1.25rem/1 'Titillium', sans-serif;
	color: #fff;
	text-align: center;
	text-transform: initial; }



/* LYRICS and ASIDE ------- */

.contentwrap { margin: 30px 0 0; }

.contentwrap h2:not(.home-grid) {
	font-size: 1.4rem;
	color: #fab81e; }



/* LYRICS ------- */

.lyrics {
	padding: 20px;
	background: #fff;
	width: calc(100% - 320px); min-width: 350px;
	font-size: 1rem;
	color: #000;
	line-height: 1.4; }

.words { padding: 10px 20px; }

.thank-you .lyrics { margin-top: 50px; }

.thank-you .lyrics h1 { padding-top: 0; }

.error.lyrics {
	margin-top: 40px;
	width: 100%;
	border-radius: 10px; }

.suggestedby {
	font-size: .7rem;
	text-align: right;
	text-transform: uppercase; }


.bts {
	margin: 30px 0 0;
	padding: 20px; }

.pick {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	position: absolute; top: 20px; right: 10px;
	margin: 0 0 auto 20px;
	width: 85px; }

.pick p {
	position: absolute;
	margin: 0;
	padding: 1px 2px;
	background: #000;
	font-size: .8rem;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 2px; }

.pick br { display: none; }

.about-the-song {
	margin-bottom: 10px;
	padding: 20px;
	background: #ddd;
	font-size: .85rem;
	border-bottom: 5px solid #aaa; }

.about-the-song cite {
	font-weight: bold;
	font-style: normal; }

.about-the-song p:last-of-type { margin-bottom: 0; }

div.about-the-song:empty { display: none; }

.suggestedby {
	float: right; 
	margin: 20px 0 0;
	padding: 10px 10px 7px 10px;
	width: 100px; 
	background: #ddd;
	text-align: center;
	border-bottom: 5px solid #aaa;
	border-radius: 10px; 
}


/* ASIDE ------- */

aside {
	margin-top: -2px;
	width: 300px; }

aside h3 {
	z-index: 2;
	font-size: 1.2rem; }

.related { margin: 0 0 50px; }

.related a { margin: 0 0 30px; }

.btns h3 { margin-bottom: 10px; }

.btns a {
	margin: 0 0 5px;
	padding: 10px 30px; 
	background: #fab81e;
	font-weight: bold; 
	color: #444; 
	text-decoration: none; 
	border-radius: 5px; }

.btns a:hover,
.btns a:focus { background: #fab81e; color: #444; }



/* CONTACT FORMS */

form {
	min-width: 50%; max-width: 600px; }

input, textarea {
	margin-bottom: 20px;
	padding: 10px;
	width: calc(100% - 22px);
	background: #ddd;
	font: bold 1rem/1 'titillium', sans-serif;
	border: 1px solid #ccc;
	border-radius: 3px; }

input:focus, textarea:focus { background: #fff; }

textarea { height: 150px; }

form button, a.btn { 
	padding: 10px 20px;
	background: #fab81e;
	width: auto;
	font-family: titillium, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #27262E;
	text-decoration: none;
	border: 0;
	border-radius: 3px;
	transition: all .2s ease-in-out;
	cursor: pointer; 
}

form button:hover, a.btn:hover {
	transform: scale(1.1); 
}

form button:active,
form button:focus {
	background: #fab81e;
	color: #27262E;
	border: 0; }


/* ERRORS ------- */

.whoops { width: 60%; }

.error-verse {
	padding: 10px;
	width: 39%;
	min-width: 165px;
	background: #ddd;
}

.verse-cite {
	margin: auto 0 0;
	font-size: .7rem; }



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

footer {
	position: absolute; bottom: 0;
	width: 100%;
	box-shadow: 0 -2px 5px rgba(0,0,0, 0.5); }

.copy {
	margin: 0 auto;
	padding: 40px;
	font-size: .75rem;
	color: #fff;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase; }

.copy span { white-space: nowrap; }

.copy a { color: #fab81e; text-decoration: none; }
.copy a:hover,
.copy a:focus { color: #fff; }

/* ADMIN BAR -------------- */

.admin-bar {
	position: fixed;
	top: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background-color: #333;
	border-radius: 0 10px 10px 0;
	box-shadow: 2px 0 10px 0px rgba(0,0,0, .15);
	z-index: 1;
}

.admin-bar a {
	display: grid;
	place-items: center;
	width: 35px;
	height: 50px;
	color: #fff;
  border-radius: 50%;
}

.admin-bar a svg {
	max-width: 25px;
	max-height: 35px;
}

.admin-bar a[href*="cpanel"] svg { color: #fff; }

.admin-bar a[href*="Twitter"] svg { max-width: 20px; }



.admin-bar hr {
	width: 40%;
	opacity: .3;
}
.admin-bar hr:last-child { display: none; }


/* UTILITY CLASSES ----------- */

b, strong, .bold { font-weight: bold; }
i, em { font-style: italic; }
.red { font-weight: bold; color: #c00; letter-spacing: 1.3px; }
.center { text-align: center; }
.gap-24 { gap: 24px; }
[hidden] { visibility: hidden; }

ul { margin: 20px 0 40px 40px; }
a { cursor: pointer; }

.chrome { display: none; margin: 0 0 30px; padding: 12px; background: #171717; text-align: center; border: 0px solid #fab81e; border-radius: 10px; cursor: pointer; box-shadow: 0 0 10px 5px #fab81e; }
.hrome:after { content: 'X'; float: right; }

ytplayer { display: block; padding: 10px 0; }

/* MOBILE STYLES ------- */

@media (max-width: 1000px) {
	.wrap { padding: 0 20px; }
}
@media (max-width: 950px) {
	.pop-grid { justify-content: center; }
	.pop-grid a { margin: 0 10px 60px; }
}
@media (max-width: 770px) {
	header .inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
	.inner > div { min-width: 100%; }
	.song-grid h1 { text-align: center; }
}

@media (max-width: 710px) {
	.thumb, .thumb img,
	.song-grid a, .song-grid img { width: 100% !important; }
	.song-grid { -webkit-box-pack: center;-ms-flex-pack: center; justify-content: center; }
	.related a, .song-grid a { margin: 0 5px 40px; }
	.lyrics, aside { margin-bottom: 30px; width: 100%; }
	.song aside { margin: 30px auto; max-width: 300px; }
	.related { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
	.related h3 { margin-bottom: 5px; padding: 10px; background: #191919; border-radius: 10px; text-align: center; }
	.sort a { margin-bottom: 10px; }
	.sort a:nth-last-child(2) { margin-left: 5px; }
}


@media (max-width: 640px) {
	.artist-tags { background-color: #191919; }
}
@media (max-width: 600px) {
	.vid-nav { flex-direction: column; }
	.vid-nav > div { margin-bottom: 10px; width: 100%; text-align: center; }
}
@media (max-width: 577px) {
	.play-options { margin-bottom: 10px; }
	.player-controls > div { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}

@media (max-width: 559px) {
	.artist-tags > div { width: 100%; }
} 

@media (max-width: 550px) {
	.inner > div { margin: 0 auto; width: 100%; text-align: center; }
	.navwrap { justify-content: center; height: auto; }
	.topnav { margin-top: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
	.topnav li { width: auto; margin-bottom: 0; text-align: center; }
	h1 { font-size: 1.25rem; }
	.whoops, .error-verse { width: 100%; }
	.ep:before { top: 0; }
}

@media (max-width: 450px) {
	.intro h2, .intro p { width: 100%; }
	.intro h2 { margin-bottom: 5px; }
	.lyrics { min-width: 0; max-width: 100%; }
	.sort a { margin-bottom: 10px; }
}

@media (max-width: 350px) {
	.awesome { font-size: 2.8rem; }
	.cm { font-size: 1.5rem; }
	.inner { padding: 15px; }
	h2.home-grid { font-size: 1.7rem; }
}
@media (max-width: 332px) {
	.vid-nav > div { flex-direction: column; text-align: center; }
	.vid-nav > div a { margin-bottom: 5px; width: 100%; text-align: center; }
	#share { width: 100%; -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
	#nextsong { text-align: right;
}

@media (max-width: 300px) {
	.topnav li,
	.topnav li.nav-soc { width: 100%; }

}
