@charset "UTF-8";
/* CSS Responsive Landing Page Peppergraphics */

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
	display: block;
}
p, h1, h2, h3, h4, h5, h6, body, html, td, th {
	margin: 0;
	padding: 0;
	border: 0 none;
}
body {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal; 
	font-size: 100%; /*16px*/
}
figure img {
	width: 100%;
}
.page-header h1, .subheading-category, .attachmentsContainer, .category-desc  {
	display: none;
}
search  {
    width: 150px;
}
/* * * * * * * * * * * * * * * * * * * * MAIN WRAPPERS - COLOR BANDS * * * * * */
.wrapper-logo, 
.wrapper-transparent,
.wrapper-red,
.wrapper-redlight,
.wrapper-nav, 
.wrapper-white, 
.wrapper-yellow, 
.wrapper-blue,
.wrapper-bluelyric, 
.wrapper-bigpic {
	width: 100%;
	text-align: center;
	position: relative;
	display: block;
	z-index: 0;
}
.wrapper-logo  {
	background-image: linear-gradient(#fc2c21, #b31a17);
	z-index: 10;
	width: 100%;
	margin: 0 auto;
}
.wrapper-red {
	background: #b31a17;
	margin: 0 auto;
}
.wrapper-redlight {
	background: #fc2c21;
	margin: 0 auto;
}
.wrapper-bigpic  {
	background: #b31a17;
}
.wrapper-nav {
	background-color: #fff;
	z-index: 10;
	width: 100%;
	margin: 0 auto;
}
.wrapper-transparent  {
	background: transparent;
	z-index: 10;
	width: 100%;
	margin: 2em auto 0;
}
.wrapper-blue  {
	background:#2c4bb0;
	z-index: 10;
	width: 100%;
	margin: 0 auto;
}
.wrapper-bluelyric  {
	background:#2c4bb0;
	z-index: 10;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
}
.wrapper-white {
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	margin: 0 auto;
}
.wrapper-yellow {
	background-color: #fff064;
	z-index: 10;
	width: 100%;
	margin: 0 auto;
}
/* * * * * * * * * * * * * * * * * * * * CONTENT PANELS * * * *  * * * */
.content {
	margin: 0 auto;
	max-width: 75em;
	text-align: left;
	z-index: 0;
	padding: 0;
	overflow: hidden;
}
.content-logo {
	background: transparent;
	margin: 0 auto;
	max-width: 75em;
	text-align: left;
	z-index: 0;
	padding: 1% 5% 0% 5%;
	overflow: hidden;
	position: relative;
}
.content-bigpic {
	background: url(../images/Red-and-Chinese-boy1280.jpg) center center no-repeat #b31a17;
	display: block; 
	z-index: 10;
	width: 100%;
	height: 40.375em;
	margin: 0 auto;
}
.content-bigpic a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
/* * * * * * * * * * * * * * * * * * * * HEADLINE H1 * * * * * * * * * * * * * * * * * * * */
h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 200;
	color: #2c4bb0;
	width: 100%;
	font-size: 2.5em;
	line-height: 1em;
	display: block;
	text-align:left;
	max-width: 50%; 
	z-index: 900;
	padding: 5% 20% 0 20%;
}
h1.bluelyric {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 200;
	color: #ffffff;
	width: 50%;
	font-size: 2.5em;
	line-height: 1em;
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
h1.pagetitle {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 600;
	color: #2c4bb0;
	font-size: 2.5em;
	line-height: 1em;
	display: block;
	text-align:center;
	max-width: 60%; 
	z-index: 900;
	padding: 2% 20%;
}
h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 200;
	color: #2c4bb0;
	font-size: 2.2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h2.blue {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 200;
	color: #2c4bb0;
	font-size: 2.2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h2.red {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 200;
	color: #b31a17;
	font-size: 2.2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h2.green {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 200;
	color: green;
	font-size: 2.2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h2.blue-fancy {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 200;
	color: #2c4bb0;
	font-size: 2.2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h2.red-fancy {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 200;
	color: #b31a17;
	font-size: 2.2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h2.green-fancy {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 200;
	color: green;
	font-size: 2.2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h2.lyricinfo {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 200;
	color: #b31a17;
	font-size: 1.6em;
	line-height: 1.2em;
	display: block;
	padding: 5px 0 0;
	text-align: center;
	z-index: 900;
}
h2.quote {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 200;
	color: #2c4bb0;
	font-size: 2em;
	line-height: 1.5em;
	display: block;
	margin: 2em 0 1em;
	text-align: center;
	z-index: 900;
}
h2.quote span {
	font-size: .8em;
	font-style: italic;
}
h2.quote-white {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 200;
	color: #fff;
	font-size: 2em;
	line-height: 1.5em;
	display: block;
	margin:	1em;
	text-align: center;
	z-index: 900;
}
h2.quote-white span {
	font-size: .8em;
	font-style: italic;
}
h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #2c4bb0;
	font-size: 2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h3.green {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: green;
	font-size: 2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h3.blue {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #2c4bb0;
	font-size: 2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h3.red {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #b31a17;
	font-size: 2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h3.green-fancy {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 500;
	color: green;
	font-size: 2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h3.blue-fancy {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 500;
	color: #2c4bb0;
	font-size: 2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h3.red-fancy {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 500;
	color: #b31a17;
	font-size: 2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}
h4 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #b31a17;
	font-size: 1.6em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
	z-index: 900;
}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
/* * * * * * * * * * * * * * * * * * * * BASIC LINKS * * * * * * * * * * * * * * * * * * * */
a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em; 
	font-weight: normal;
	color: #b31a17;
	line-height: 1.4em;
	margin: 0 auto;
	padding: 5px 0;
}
a:link, a:visited {
	font-weight: bold;
	color: #b31a17;
	text-decoration: underline;
}
a:hover, a:active {
	font-weight: bold;
	color: #b31a17;
	text-decoration: underline;
}
/* * * * * * * * * * * * * * * * * * * * LYRIC PAGES * * * * * * * * * * * * * * * * * * * */
#lyrics {
	float: left;
	margin: 20px;
	border: 1px solid #2c4bb0;
	width: 58%;
	padding: 20px;
	  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
		  text-align: left;
}
#lyrics h1 {
	color: #2c4bb0;
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 200;
	width: 80%;
	font-size: 3em;
	line-height: 1em;
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
#lyrics iframe {
	margin: 10px 0;
}

#lyrics .mejs-container:first-of-type {
  margin-top: 20px;
}

#lyrics a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em; 
	font-weight: 500;
	color: #b31a17;
	line-height: 1.4em;
	margin: 0 auto;
	padding: 5px 0;
}
#lyrics a:link, #lyrics a:visited {
	font-weight: 700;
	color: #2c4bb0;
	text-decoration: none;
}
#lyrics a:hover, #lyrics a:active {
	font-weight: 700;
	color: #b31a17;
	text-decoration: underline;
}

#lyrics table {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em; 
	font-weight: 400;
	color: #2c4bb0;
	letter-spacing: .4px;
	line-height: 1.4em;
	text-align: left;
	margin: 0 18%;
	padding: 7px 0;
  
    border: none;
}

#lyrics table td {
   border: none;
}

#lyrics table tr td:first-child:nth-last-child(2) + td {
  padding-left: 20px;
}
#related {
	float: right;
	margin: 20px;
	border: 1px solid #b31a17;
	width: 30%;
	padding: 20px;
	  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
		  text-align: left;
}
#related figure img {
	border: 1px solid #ccc;
}
#related iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* * * * * * * * * * * * * * * * * * * * BASIC P and LIST STYLES * * * * * * * * * * * * * * * * * * * */
p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em; 
	font-weight: 400;
	color: #2c4bb0;
	letter-spacing: .4px;
	line-height: 1.4em;
	text-align: left;
	margin: 0 18%;
	padding: 7px 0;
	}
p.bluelyric {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em; 
	font-weight: 300;
	color: #ffffff;
	line-height: 1.5em;
	text-align: left;
	width: 70%;
	margin: 0 15%;
	}
p.chorus {
	margin: 0 5% 0 20%;
	font-weight: bold;
	}
p.credit {
	font-size: .8em; 
	color: #2c4bb0;
	letter-spacing: .4px;
	margin: 0 5% 0 20%;
	font-weight: bold;
	}
p.bigger {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.3em; 
	font-weight: 400;
	color: #2c4bb0;
	letter-spacing: .4px;
	line-height: 1.4em;
	text-align: left;
	padding: 5px 0;
	width: 60%;
	margin: 5px auto 8px;
	}
.white {
	color:#ffffff;
}
.red{
	color:#b31a17;	
}
.blue {
	color: #2c4bb0;
}
.black {
	color: #000000;
}
.grey {
	color: grey;
}
.yellow {
	color: yellow;
}
.green {
	color: green;
}
strong, b {
	font-weight: bold;
}
em, i {
	font-style: italic;
}
.boldred {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em; font
	font-weight: bold;
	color:#b31a17;
	line-height: 1.5em;
	text-align: left;
	}
.boldblue {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em; 
	font-weight: bold;
	color: #2c4bb0;
	line-height: 1.5em;
	text-align: left;
	}

/* * * * * * * * * * * * * * * * * * * * PLAIN A LINK * *  * * * */

a.lyrics {
	font-family: "Palatino Linotype", Palatino, serif;
	font-size: 1.1em; 
	font-weight: 400;
	color: #2c4bb0;
	line-height: 1.2em;
	text-align: left;
}

a.lyrics:link, a.lyrics:visited {
	color: #b31a17;
	text-decoration: underline;
}
a.lyrics:hover, a.lyrics:active {
	color: #b31a17;
	text-decoration: underline;
}
/* * * * * * * * * * * * * * * * * * * * LYRIC LINKs * *  * * * */
.lyriclinks {
	display: block;
	clear: both;
	margin: 1em auto;
	width: 60%;
	border-bottom: 1px solid #2c4bb0;
	padding-top: 1em;
}
.lyriclinks h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #2c4bb0;
	font-size: 24px;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: left;
}

.lyriclinks ul.songs {
	list-style-type: none;
	margin: 15px 0 2em 0;
	padding: 0;
	float: left;
}
.lyriclinks ul.songs li {
	display: block;
	text-align: left;
	line-height: 1.5em;
}
.lyriclinks ul.songs a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.1em; 
	font-weight: 400;
	color: #2c4bb0;
	line-height: 1.5em;
}
.lyriclinks ul.songs a:link, .lyriclinks ul.songs a:visited {
	color: #b31a17;
	text-decoration: none;
}
.lyriclinks ul.songs a:hover, .lyriclinks ul.songs a:active {
	color: #b31a17;
	text-decoration: underline;
}
.lyriclinks .cd {
	width: 200px;
	float: left;
	margin-right: 20px;
		padding-bottom: 20px;
		margin-top: 15px;

}
.lyriclinks .cd img {
	width: 200px;
	border: 1px solid #ccc;
	vertical-align: top;


}
/* * * * * * * * * * * * * * * * * * * * Lyric Page Menu * * * * * * * * * * */
.content#curriculum {
	margin: 0 auto;
	max-width: 75em;
	text-align: center;
	z-index: 0;
	padding: 1em 0;
	overflow: hidden;
}
.links h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #2c4bb0;
	font-size: 36px;
	line-height: 1em;
	display: block;
	padding: .5em 0;
	text-align: center;
}
.links a h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #2c4bb0;
	font-size: 36px;
	line-height: 1em;
	display: block;
	margin:  0;
	text-align: center;
}
.links {
	display: inline-block;
	width: 33%;
	vertical-align: top;
}
.links ul {
	list-style-type: none;
	margin: 0 0 1em 0;
}
.links li {
	display: block;
	text-align: center;
}
.links a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.3em; 
	font-weight: 400;
	color: #2c4bb0;
	line-height: 1.4em;
}
.links a:link, .links a:visited {
	color: #b31a17;
	text-decoration: none;
}
.links a:hover, .links a:active {
	color: #b31a17;
	text-decoration: underline;

}
.links img a:hover, .links img a:active {
	color: #b31a17;
	text-decoration: none;
}
.links img {
	max-width: 180px;
	text-align: center;
	margin: 0 auto;
}
/* * * * * * * * * * * * * * * * * * * * HEADER * * * * * * * * * * */
#header {
	text-align: left;
	color: #fff;
	max-width: 75em;
	display: block;
	padding: 1% 0 2%;
	position: relative;
}
.logolyrics {
	text-align: left;
	margin-right: .5em;
	max-width: 90%;
	vertical-align: bottom;
}
.logolyrics img.photo {
	float: left;
	margin-right: 10px;
	max-width: 130px;
	height: auto;
	padding-top: 20px;
}
.logolyrics a img {
	max-width: 70%;
	height: auto;
}

.logo {
	text-align: left;
	max-width: 80%;
}
.logo img {
	max-width: 100%;
	height: auto;
}
.logo a {
	text-decoration: none;
}

/* * * * * * * * * * * * * * * * * * * * SOCIAL * * * * * */
.content-logo ul.social{
	list-style-type: none;
	position: absolute;
	top: 9em;
	right: 5em;
	max-width: 120px;
	z-index: 3000;
	display: block;
	padding: 0;
}
.content-logo ul.social-l{
	list-style-type: none;
	position: absolute;
	top: 8em;
	right: 7em;
	width: 120px;
	z-index: 3000;
	display: block;
	padding: 0;
}
.wrapper-red ul.social{
	list-style-type: none;
	position: relative;
	max-width: 220px;
	z-index: 3000;
	display: block;
	margin: 0 auto;
}
ul.social li, ul.social-l li {
	display: inline-block;
}
ul.social li img, ul.social-l li img {
	width: 44px;	
	padding: 0 5px 5px 0;
	margin: 0;
}
/* * * * * * * *  * * * * * ALL PAGES OF PIX DEFAULT * * * * * * * * * * * * * * */

figure.page-picture {
	display: block;
	padding: 0;
	width: 32%;
	margin: 1em auto;
}
figure.page-picture figcaption {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #2c4bb0;
	font-size: 1.3em;
	line-height: 1.1em;
	text-align: center;
	padding: 5px 0 0 0;
	z-index: 900;
}
figure.blog-link { /* The links from main blog to three separate blogs, not inside blogs*/
	display: inline-block;
	padding: 0;
	width: 32%;
	margin: 1em auto;
}
figure.blog-link a {
	text-decoration: none;
}
figure.blog-link figcaption {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #2c4bb0;
	font-size: 1.7em;
	line-height: 1.1em;
	text-align: center;
	padding: 5px 0 0 0;
	z-index: 900;
}
figure.chinablog-sm { 
	display: block;
	padding: 0;
	width: 150px;
	margin: 10px;
	float: left;
}
figure.chinablog-med { 
	display: block;
	padding: 0;
	width: 280px;
	margin: 10px;
	float: left;
}
figure.chinablog-rt { 
	display: block;
	padding: 0;
	width: 280px;
	margin: 10px;
	float: right;
}
figure.chinablog-center { 
	display: block;
	padding: 0;
	width: 280px;
	margin: 10px auto;
	text-align: center;
}
figure.chinablog-four { 
	display: block;
	padding: 0;
	width: 400px;
	margin: 10px;
	float: left;
}
figure.chinablog-lg { 
	display: block;
	padding: 0;
	width: 600px;
	margin: 10px;
	float: left;
}

figure.chinablog-sm figcaption, figure.chinablog-med figcaption, figure.chinablog-four figcaption, figure.chinablog-center figcaption, figure.chinablog-rt figcaption, figure.chinablog-lg figcaption {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #b31a17;
	font-size: 18px;
	line-height: 22px;
	text-align: center;
	padding: 5px;
}
figure.cd200 {
	display: block;
	padding: 0;
	width: 200px;
	margin: 1em auto;
}

.img-left {
	float: left;
	margin-right: 10px;
}
.img-right {
	float: right;
	margin-left: 10px;
}
.blog-img-left {
	float: left;
	margin: 0 20px 10px 0;
	max-width: 40%;
}
.blog-img-right {
	float: right;
	margin: 0 0 10px 10px;
	max-width: 40%;
}

/* * * * * * * *  * * * * * ROW OF PIX IN BLUE * * * * * * * * * * * * * * * */
.content#inrow {
	margin: 2em 0;
	text-align: center;
	display: inline-block;
	background: transparent;
}
.content#inrow figure {
	display: inline-block;
	padding: 0 5px 0 0;
	width: 32%;
	margin: 0;
}
.content#inrow figure figcaption {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #fff;
	font-size: 1.3em;
	line-height: 1.1em;
	text-align: center;
	padding: 5px 0 0 0;
	z-index: 900;
}
/* * * * * * * *  * * * * * RED BOX * * * * * * * * * * * * * * * */
.content#redbox {
	margin: 2em 0;
	text-align: center;
	display: inline-block;
	background: transparent;
}
.content#redbox figure {
	display: inline-block;
	padding: 20px;
	width: 25%;
	margin: 0;
	vertical-align: top;
}
.content#redbox figure figcaption {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #fff064;
	font-size: 1.1em;
	line-height: 1.1em;
	text-align: center;
	padding: 10px;
	z-index: 900;
}
.content#redbox figcaption span {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #2c4bb0;
	font-size: 1.5em;
	line-height: 2em;
	text-align: center;
	padding: 0 010px 0;
	z-index: 900;
}
/* * * * * * * *  * * * * * CONCERTS * * * * * * * * * * * * * * * */
.content#concerts {
	margin: 2em 0;
	text-align: center;
	display: inline-block;
	background: transparent;
}
.content#concerts figure {
	display: inline-block;
	padding: 10px;
	width: 90%;
	margin: 0;
}
.content#concerts figure img {
	border-radius: 15px;
}

/* * * * * * * *  * * * * * BOX MODULES * * * * * * * * * * * * * * * */

.yellownarrow {
	background: url(../images/yellowbox390x283.jpg) center center no-repeat #fff;
	background-size: contain;
	text-align: center;
}
.yellownarrow figcaption {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: #2c4bb0;
	font-size: 1.2em;
	line-height: 1.1em;
	text-align: center;
	padding: 5px 0;
	z-index: 900;
}
#smallboxes .yellownarrow  figure {
	text-align: center;
	margin: 2.7em 4.2em 3.5em;	
}
#smallboxes {
	text-align: center;
}
#smallboxes .yellownarrow  {
	display: inline-block;
	vertical-align: center;
	text-align: center;
	width: 32%;
}



/* * * * * * * * * * *  * * * * * * *  * NAV * * * * * * * * * * * * * * * * */
#nav, .nav-bottom {
	display: block;
	padding: 0;
}
#nav ul, .nav-bottom ul {
	list-style-type: none;
	text-align: center;
}
#nav li, .nav-bottom li {
	display: inline-block;
	margin: 1em;
}
#nav li a, .nav-bottom li a {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #fff;
	font-size: 1.5em;
	line-height: 1.1em;
}
#nav li a:link,  
#nav li a:visited {
	text-decoration: none;
	color: #fff;
}
#nav li a:hover,  
#nav li a:active {
	text-decoration: none;
	color: yellow;
}
/* * * * * * * * * * *  * * * * * * *  * MENU LINK 2 (to bottom) * * * * * * * * * * * * * * * * * */
.menulink2 {
	position: relative;
	top: 0;
	left: 0;
	width: 2em;
	height: 2em;
	margin: 0;
	padding:0 0 1em 0;
	z-index:500;
	/****************/ display: none;
}
.menulink2 a {
	font-weight: 300;
	font-size: 2em;
	text-decoration: none;
}
.menulink2 a.menu {
	color: #ffffff;
}
.menulink2 a.menu:link,
.menulink2 a.menu:visited  {
	text-decoration: none;
	color: #ffffff;
}
.menulink2 a.menu:hover,
.menulink2 a.menu:active  {
	text-decoration: none;
	color: #2c4bb0;
}
/* * * * * * * * * * * * * * * * * * * * MENU LINK * * * * * * * * */  
.menulink {
    position: relative;
    display: inline-block;
	font-weight: 300;
	font-size: 1.8em;
	text-decoration: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.2em;
	margin: 0;
	padding:0;
	z-index:500;
}
.menulink-content { /* * * * * * * * * * * *MENU ON * * * * * * * * */  
   	display: none;
	position: relative;
	
}
.menulink:hover .menulink-content {
    display: block;
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 10px;
	z-index:500;
	margin: 0;
	padding:0;
	vertical-align: top
}
ul.nav.mod-menu, ul.nav.mod-menu .topnav {
	display: inline-block;
	position: absolute;
	top: -28px;
	left: 0;
	width: 100%;
	height: 10px;
	vertical-align: top;
	list-style-type: none;
}
ul.nav.mod-menu li, ul.nav.mod-menu .topnav li {
	display: inline;
	margin: 0 10px;
	
}
ul.nav.mod-menu li a, ul.nav.mod-menu .topnav li a {
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: yellow;
	font-size: 18px;/*18*/
	line-height: 18px;
}

ul.nav.mod-menu li a:link, 
ul.nav.mod-menu li a:visited,
ul.nav.mod-menu .topnav li a:link, ul.nav.mod-menu .topnav li a:visited {
	text-decoration: none;
	color: #fff064;
}

ul.nav.mod-menu li a:hover, ul.nav.mod-menu .topnav li a:hover, ul.nav.mod-menu li a:active, ul.nav.mod-menu .topnav li a:active {
	text-decoration: none;
	color: #2c4bb0;
}
/* * * * * * * * * * * * * * * * * * * * STORE FRONT * * * * * * * * * * */ 
.products {
	display: inline-block;
	width: 280px;
	height: 300px;
	border: 1px solid #ccc;
	text-align: center;
}
.products p {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #b31a17;
	font-size: 1em;
	line-height: 1.3em;
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 5px 0;
	margin: 0 15%;
	
}
.products a p {
	text-decoration: none;
}
.products a img {
	height: 200px;
	margin: 20px auto 5px;
	border: 1px solid #ccc;
	text-align: center;
	text-decoration: none;
}
h4.prod {
	display: block;
	clear: both;
	width: 100%;
	text-align: center;
	padding: 15px 0 10px;
}
.prodgroup {
	text-align: center;
	margin: 10px auto;
	vertical-align: top;
}
ul.shop-products {
	list-style-type: none;
	text-align: center;
}
ul.shop-products li {
	display: inline-block;
}
ul.shop-products li a {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #2c4bb0;
	font-size: 1.2em;
	padding: .5em;
	text-align: center;
	text-decoration: none;
}
ul.shop-products li a:link, ul.shop-products li a:visited {
	text-decoration: none;
	color: #b31a17;
}
ul.shop-products li a:active, ul.shop-products li a:hover {
	text-decoration: underline;
	color: #b31a17;
}
/* * * * * * * * * * * * * * * * * * * * BLOG POSTS * * * * * * * * * * * * * */ 
p.readmore {
	text-align: left;
	padding: 0;
	margin: 0;

}
.blogbox {
	display: block;
	text-align: left;
	margin: 10px 15%;
	padding: 10px;
}
.blogbox img {
	height: 150px;
	float: left;
	margin-right: 20px;
	text-decoration: none;
}
.blogbox h4 {
	text-decoration: none;	
	text-align: left;
	padding-left: 10px;
	font-size: 1.2em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
}
.blogbox p {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #2c4bb0;
	font-size: .9em;
	line-height: 1.2em;
	padding: 5px 0;
	text-align: left;
	text-decoration: none;
	overflow: hidden;
	margin: 0 10px;
	display: block;
}
.blogbox h4 a:link, .blogbox h4 a:visited, .blogbox img a {
	text-decoration: none;
	font-weight: 400;
}
.blogbox h4 a:hover, .blogbox h4 a:active {
	text-decoration: underline;
	font-weight: 400;
}

/* * * * * * * * * * * * * * * * * * * * VIDEOS* * * * * * * * * * */ 
.center-iframe {
	margin: 0 auto;
	text-align: center;
	display: block;
	width: 560px;
	height: 315px;
}
.center-iframe iframe {
	width: 560px;
	height: 315px;
}
.videopage {
	text-align: center;
}
.videopage object {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
/* * * * * * * * * * * * * * * * * * * * SEARCH BOX * * * * * * * * * * */ 
.search {
	float: right;
	vertical-align: top;
	width: 150px;
	margin-top: -25px;
	margin-right: 0;
	padding: 0;
	z-index:1500;
	display: block;
}
#mod-search-searchword {
	width: 150px;
}
.content .search{
	width: 90%;
	display: block;
	position: relative;
	top: 0;
	left: 0;
	margin: 5%;
	line-height: 1.5em;
}
#searchForm .ordering-box, #searchForm fieldset.only {
	display: none;
}
#searchForm input#search-searchword {
	font-size: 2em;
}

/* * * * * * * * * * * BUTTON * * * * * * * * * * * * */
.button {
  background: #b31a17;
  background-image: -webkit-linear-gradient(top, #fc2c21, #b31a17);
  background-image: -moz-linear-gradient(top, #fc2c21, #b31a17);
  background-image: -ms-linear-gradient(top, #fc2c21, #b31a17);
  background-image: -o-linear-gradient(top, #fc2c21, #b31a17);
  background-image: linear-gradient(to bottom, #fc2c21, #b31a17);
  -webkit-border-radius: 22;
  -moz-border-radius: 22;
  border-radius: 22px;
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 10px 16px 10px 16px;
  text-decoration: none;
}
a.button:link, a.button:visited  {
	color: #ffffff;
	text-decoration: none;
}
.button:hover {
  background: #fc2c21;
  background-image: -webkit-linear-gradient(top, #b31a17, #fc2c21);
  background-image: -moz-linear-gradient(top, #b31a17, #fc2c21);
  background-image: -ms-linear-gradient(top, #b31a17, #fc2c21);
  background-image: -o-linear-gradient(top, #b31a17, #fc2c21);
  background-image: linear-gradient(to bottom, #b31a17, #fc2c21);
  text-decoration: none;
  color: #ffffff;
}

/* * * * * * * * * * * BLUE BUTTON * * * * * * * * * * * * */
.button {
  background: #b31a17;
  background-image: -webkit-linear-gradient(top, #fc2c21, #b31a17);
  background-image: -moz-linear-gradient(top, #fc2c21, #b31a17);
  background-image: -ms-linear-gradient(top, #fc2c21, #b31a17);
  background-image: -o-linear-gradient(top, #fc2c21, #b31a17);
  background-image: linear-gradient(to bottom, #fc2c21, #b31a17);
  -webkit-border-radius: 22;
  -moz-border-radius: 22;
  border-radius: 22px;
  font-family: Arial;
  color: #ffffff;
  font-size: 18px;
  padding: 10px 16px 10px 16px;
  text-decoration: none;
}

.button:hover {
  background: #fc2c21;
  background-image: -webkit-linear-gradient(top, #b31a17, #fc2c21);
  background-image: -moz-linear-gradient(top, #b31a17, #fc2c21);
  background-image: -ms-linear-gradient(top, #b31a17, #fc2c21);
  background-image: -o-linear-gradient(top, #b31a17, #fc2c21);
  background-image: linear-gradient(to bottom, #b31a17, #fc2c21);
  text-decoration: none;
  color: #ffffff;
}
/******************************** MEDIA QUERIES **************************************/

@media all and (max-width: 1200px)  {
.menulink-content { /* * * * * * * * * * * * TURN MENU ON * * * * * * * ********************************************** */  
   	display: block;
	position: relative; 
	top: 0;
	left: 0;
}
.menulink span { /* * * * * * * * * * * * TURN MENU burger off * * * * * * * ***************************************** */  
   	display: none;
}
ul.nav.mod-menu, ul.nav.mod-menu .topnav { /* * * * * * * * * * * * TURN MENU ON * * * * * * * ********************************************** */
	display: inline-block;
	position: absolute;
	top: -25px;
	left: 0;
	/*margin-left: 0;*/
	padding-left: 0;
	width: 100%;
	height: 10px;
	vertical-align: top;
	list-style-type: none;
}
}
@media all and (max-width: 1100px)  {
.search {
	float: right;
	vertical-align: top;
	width: 150px;
	margin-top: 15px;
	margin-right: 0;
	padding: 0;
	z-index:1500;
	display: block;
}
}
@media all and (max-width: 1000px)  {

.content-logo ul.social{
	top: 8em;
	right: 3em;
}
.content-logo ul.social-l{
	top: 7em;
	right: 3em;
}
.logolyrics img.photo {
	float: left;
	margin-right: 10px;
	max-width: 120px;
	height: auto;
	padding-top: 10px;
}
h2.quote {
	font-size: 1.7em;
	line-height: 1.5em;
}
h2.quote-white {
	font-size: 1.7em;
	line-height: 1.5em;
}
#smallboxes .yellownarrow  {
	display: inline-block;
	vertical-align: center;
	text-align: center;
	width: 32%;
}
#smallboxes .yellownarrow  figure {
	text-align: center;
	margin: 2.9em 3.7em 3.3em;	
}
.yellownarrow figcaption {
	font-size: 1.05em;
	line-height: 1em;
}
/* * * * * * * * * * * * * MENU LINK * * * * * * * * */ 
#topnav .nav.menu li a, #topnav .topnav li a {
	font-size: 14px;
	line-height: 16px;
}
#related iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 240px;
	height: 168px;
}
}
/**********************************************TABLET**************************/
@media all and (max-width: 950px)  {
.search {
	float: right;
	vertical-align: top;
	width: 150px;
	margin-top: 0px;
	margin-right: 0;
	padding: 0;
	z-index:1500;
	display: block;
}
.logolyrics img#redbannerpic {
	display: none;
}
ul.nav.mod-menu li a, ul.nav.mod-menu .topnav li a {
	font-size: 15px;
	line-height: 14px;
}	
}
/**********************************************TABLET**************************/
@media all and (max-width: 900px)  {
.search {
	float: right;
	vertical-align: top;
	width: 150px;
	margin-top: -10px;
	margin-right: 0;
	padding: 0;
	z-index:1500;
	display: block;
}
.logolyrics img#redbannerpic {
	display: none;
}	
#related iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: 135px;
}
.content-logo ul.social{
	top: 7em;
	right: 2em;
}
.content-logo ul.social-l{
	top: 6em;
	right: 2em;
}
ul.social li img, ul.social-l li img {
	width: 40px;	
	padding: 0 5px 5px 0;
	margin: 0;
}
.content-bigpic {
	background: url(../images/Red-and-Chinese-boy1000x538.jpg) center center no-repeat #b31a17;
	height: 33.625em;
}
#smallboxes .yellownarrow  figure {
	text-align: center;
	margin: 2.3em 3.2em 2.7em;	
}
.yellownarrow figcaption {
	font-size: .9em;
	line-height: 1em;
}
p.bigger {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em; 
	font-weight: 400;
	color: #2c4bb0;
	letter-spacing: .4px;
	line-height: 1.3em;
	text-align: left;
	width: 60%;
	margin: 5px auto 8px;
	}
/* * * * * * * * * * *  * * MENU LINK * * * * * * * * */  
ul.nav.mod-menu li, ul.nav.mod-menu .topnav li {
	display: inline;
	margin: 0 5px;
}
ul.nav.mod-menu li a, ul.nav.mod-menu .topnav li a {
	font-size: 15px;
	line-height: 14px;
}
.links {
	display: inline-block;
	width: 40%;
	vertical-align: top;
}
}
/**********************************************TABLET**************************/
@media all and (max-width: 880px)  {
.search {
	float: right;
	vertical-align: top;
	width: 150px;
	margin-top: -5px;
	margin-right: 0;
	padding: 0;
	z-index:1500;
	display: block;
}
.logolyrics img#redbannerpic {
	display: none;
}
ul.nav.mod-menu li a, ul.nav.mod-menu .topnav li a {
	font-size: 14px;
	line-height: 14px;
}
}
/**********************************************TABLET**************************/
@media all and (max-width: 800px)  {

.content-logo ul.social{
	top: 5em;
	right: 1em;
}
.content-logo ul.social-l{
	top: 6em;
	right: 1em;
}
/*.logolyrics img.photo {
	float: left;
	margin-right: 10px;
	max-width: 90px;
	height: auto;
}*/
.logolyrics img#redbannerpic {
	display: none;
}
.logolyrics a img {
	max-width: 70%;
	height: auto;
}
.content-bigpic {
	background: url(../images/Red-and-Chinese-boy900x484.jpg) center center no-repeat #b31a17;
	height: 30.25em;
}
h2.quote {
	font-size: 1.5em;
	line-height: 1.4em;
}
h2.quote-white {
	font-size: 1.5em;
	line-height: 1.4em;
}
#smallboxes .yellownarrow figure {
	text-align: center;
	margin: 2.5em 3em 3em;	
}

.yellownarrow figcaption {
	font-size: .8em;
	line-height: 1em;
}

.content#redbox figure {
	display: inline-block;
	padding: 15px;
	width: 40%;
	margin: 0;
	vertical-align: top;
}
p.bigger {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.1em; 
	font-weight: 400;
	color: #2c4bb0;
	letter-spacing: .4px;
	line-height: 1.4em;
	text-align: left;
	padding: 5px 0;
	width: 80%;
	margin: 5px auto 8px;
	}
}
/**********************************************TABLET**************************/
@media all and (max-width: 750px)  {
.search {
	float: right;
	vertical-align: top;
	width: 150px;
	margin-top: -35px;
	margin-right: 0;
	padding: 0;
	z-index:1500;
	display: block;
}	
#related {
	float: left;
	width: 92%;
}
#related figure {
	max-width: 300px;
	height: auto;
	margin: 1em auto;
}
	/* * *  * BLOG POSTS * * * * */ 
p.readmore {
	text-align: left;
	padding: 0;
	margin: 0;

}
.blogbox {
	display: block;
	text-align: left;
	margin: 10px 15%;
	padding: 10px;
}
.blogbox img {
	height: 150px;
	float: left;
	clear: right;
	margin-right: 20px;
	text-decoration: none;
}
.blogbox h4 {
	text-decoration: none;	
	text-align: left;
	padding-left: 10px;
	font-size: 1em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
}
.blogbox p {
	font-size: .8em;
	line-height: 1.2em;
}
figure.blog-link { /* The links from main blog to three separate blogs, not inside blogs*/
	display: inline-block;
	padding: 5px;
	width: 45%;
	margin: 1em auto;
}	
.logolyrics img#redbannerpic {
	display: none;
}
.logolyrics a img {
	max-width: 90%;
	
}
.content-logo ul.social{
	top: 7em;
	right: 0
}
.content-logo ul.social-l{
	display: none;
}
ul.social li img, ul.social-l li img {
	width: 38px;	
	padding: 0 5px 5px 0;
	margin: 0;
}

#lyrics {
	width: 92%;
}
h1 {
	font-size: 1.6em;
}
h1.bluelyric {
	font-family: "Palatino Linotype", Palatino, serif;
	font-weight: 400;
	color: #ffffff;
	width: 90%;
	font-size: 2em;
	line-height: 1em;
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
p.bluelyric {
	font-family: Helvetica, Arial, sans-serif;
	font-size: .9em; 
	line-height: 1.5em;
	text-align: left;
	width: 70%;
	margin: 0 15%;
	}
.content-bigpic {
	background: url(../images/Red-and-Chinese-boy900x484.jpg) center center no-repeat #b31a17;
	height: 30.25em;
}
h2.quote {
	font-size: 1.2em;
	line-height: 1.1em;
}
h2.quote-white {
	font-size: 1.2em;
	line-height: 1.1em;
}
#smallboxes .yellownarrow figure {
	text-align: center;
	margin: 2.2em 2.5em 2.8em;	
}

.yellownarrow figcaption {
	font-size: .7em;
	line-height: 1em;
}

.content#concerts figure {
	display: inline-block;
	padding: 5px;
	width: 90%;
	margin: 0;
}
.content-logo ul.social{
	top: 5em;
	right: 2em;
}
ul.nav.mod-menu, ul.nav.mod-menu .topnav {
	display: inline-block;
	position: absolute;
	top: -35px;
	left: 0;
	width: 100%;
	height: 10px;
	vertical-align: top;
}
/*.menulink { /*****************FIX MENU FOR TABLET******************
    position: relative;
    display: inline-block;
	font-weight: 300;
	font-size: 1em;
	text-decoration: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.2em;
	margin: 0;
	padding:0;
	z-index:500;
}*/
/* * * * * * * * * * *  * * * * * * *  * MENU LINK 2 (to bottom) * * * * * * * * * * * * * * * * * */
.menulink2 {
	position: relative;
	top: 0;
	left: 0;
	width: 2em;
	height: 2em;
	margin: 0;
	padding:0 0 1em 0;
	z-index:500;
	/****************/ display: block;
}
.menulink {
    display: none;
}
.menulink-content {
   	display: none;	
}
.links {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

#related iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 480px;
	height: 270px;
}
.blog-img-left {
	float: left;
	margin: 220px;
	max-width: 50%;
}
.blog-img-right {
	float: right;
	margin: 20px;
	max-width: 50%;
}
}
/**********************************************TABLET**************************/
@media all and (max-width: 600px)  {
#related figure {
	max-width: 280px;
	height: auto;
	margin: 1em auto;
}
#related iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	height: 225px;
}
	.videopage {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
	.videopage object {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
.content-logo ul.social, .content-logo ul.social-l {
	display: none;
}
figure.page-picture {
	display: block;
	padding: 0;
	width: 50%;
	margin: 1em auto;
}

.logolyrics img.photo {
	display: none;
}
.logolyrics a img {
	max-width: 100%;
	
}
.content-bigpic {
	background: url(../images/Red-and-Chinese-boy600x323.jpg) center center no-repeat #b31a17;
	height: 20.188em;
}
h2.quote {
	font-size: 1.1em;
	line-height: 1.2em;
}
h2.quote-white {
	font-size: 1.2em;
	line-height: 1.2em;
}
.content#row {
	margin: 2em 0;
	text-align: center;
	display: inline-block;
	background: transparent;
}
.content#inrow figure {
	display: inline-block;
	padding: 5px;
	width: 45%;
	margin: 0;
}
.content#inrow figure figcaption {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #fff;
	font-size: 1.3em;
	line-height: 1.1em;
	text-align: center;
	padding: 5px 0 0 0;
	z-index: 900;
}
figure.blog-link { /* The links from main blog to three separate blogs, not inside blogs*/
	display: block;
	padding: 0;
	width: 80%;
	margin: 1em auto;
}
#smallboxes .yellownarrow  {
	display: inline-block;
	vertical-align: center;
	text-align: center;
	width: 45%;
}
#smallboxes .yellownarrow  figure {
	text-align: center;
	margin: 1em 3em 1.2em ;	
}
.yellownarrow figcaption {
	font-size: .8em;
	line-height: 1em;
}
p.bigger {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.1em; 
	font-weight: 400;
	color: #2c4bb0;
	letter-spacing: .4px;
	line-height: 1.3em;
	text-align: left;
	padding: 5px 0;
	width: 80%;
	margin: 5px auto 8px;
	}
.links {
	display: inline-block;
	width: 80%;
	vertical-align: top;
}
.blog-img-left {
	float:left;
	margin: 20px;
	max-width: 90%;
}
.blog-img-right {
	float: right;
	margin: 20px;
	max-width: 90%;
}
}
/**********************************************PHONE**************************/
@media all and (max-width: 500px) {
#related iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	height: 225px;
}
#related figure {
	max-width: 200px;
	height: auto;
	margin: 1em auto;
}
figure.chinablog-lg { 
	display: block;
	padding: 0;
	width: 100%;
	margin: 10px;
	float: left;
}
.center-iframe {
	margin: 0 auto;
	text-align: center;
	display: block;
	width: 490px;
	height: 390px;
}
.center-iframe iframe {
	width: 490px;
	height: 390px;
}
	.videopage {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
	.videopage object {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
	/* * *  * BLOG POSTS * *  * * */ 
.blogbox {
	display: block;
	text-align: left;
	margin: 10px 10%;
	padding: 10px;
}
.blogbox img {
	height: 150px;
	float:none;
	margin: 0 auto;
	text-decoration: none;
}
.blogbox h4 {
	text-decoration: none;	
	text-align: left;
	padding-left: 10px;
	font-size: 1em;
	line-height: 1em;
	display: block;
	padding: .5em 0;
}
.blogbox p {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #2c4bb0;
	font-size: .85em;
	line-height: 1.2em;
	padding: 5px 0;
	text-align: left;
	text-decoration: none;
	overflow: hidden;
	margin: 0 10px;
	display: none;
}

/* * * * * * * * * * * * * * * * * * * * LYRIC PAGES * * * * * * * * * * * * * * * * * * * */
#lyrics {
	margin: 10px;
	width: 90%;
	padding: 10px;
}
#lyrics h1 {
	font-size: 2em;
	line-height: 1em;
	width: 90%;
}
#lyrics > p {
	width: 80%;
    margin: 0 10%;
  
    box-sizing: border-box;
}
#lyrics iframe {
	margin: 10px 0;
}
#related {
	float: left;
	margin: 10px;
	width: 92%;
	padding: 10px;
}
.lyriclinks {
	display: block;
	clear: both;
	margin: 1em auto;
	width: 80%;
	border-bottom: 1px solid #2c4bb0;
	padding-top: 1em;
}
.lyriclinks ul.songs a {
	font-family: Helvetica, Arial, sans-serif;
	font-size: .9em; 
	font-weight: 400;
	color: #2c4bb0;
	line-height: 1.2em;
}
p.bluelyric {
	font-family: Helvetica, Arial, sans-serif;
	font-size: .9em; 
	font-weight: 300;
	color: #ffffff;
	line-height: 1.5em;
	text-align: left;
	width: 90%;
	margin: 0 5%;
	}
/* * * * * * * * * * * * * * * * * * * * SEARCH BOX * * * * * * * * * * */ 
.logo {
	text-align: left;
	margin-right: .5em;
	max-width: 100%;
}
.search {
	float: right;
	vertical-align: top;
	width: 150px;
	margin-top: -35px;
	margin-right: 0;
	padding: 0;
	z-index:1500;
	display: block;
}
.content-bigpic {
	background: url(../images/Red-and-Chinese-boy500x269.jpg) center center no-repeat #b31a17;
	height: 16.813em;
}
h2.quote {
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 1em;
}
h2.quote-white {
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 1em;
}
.content#inrow {
	margin: 2em 0;
	text-align: center;
	display: inline-block;
	background: transparent;
}
.wrapper-white .content#inrow figure {
	display: none;
}
.content#inrow figure.mid, .wrapper-blue .content#inrow figure {
	display: inline-block;
	padding: 15px;
	width: 80%;
	margin: 0;
}
.content#inrow figure figcaption {
	font-size: 1.3em;
	line-height: 1.1em;
}
figure.blog-link { /* The links from main blog to three separate blogs, not inside blogs*/
	display: block;
	padding: 0;
	width: 80%;
	margin: 1em auto;
}
.content#redbox figure {
	display: inline-block;
	padding: 20px;
	width: 60%;
	margin: 0;
}
.content#concerts figure {
	display: inline-block;
	padding: 10px;
	width: 90%;
	margin: 0;
}
#smallboxes .yellownarrow  {
	display: inline-block;
	vertical-align: center;
	text-align: center;
	width: 80%;
}
#smallboxes .yellownarrow  figure {
	text-align: center;
	margin: 1.5em 4.5em 1.8em;	
}
.yellownarrow figcaption {
	font-size: 1.1em;
	line-height: 1em;
}

#nav ul {
	width: 100%;
	display: block;
	margin: 0 0 1em 0;
	padding: 0;
}
#nav li a {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.1em;
} 
/* * * * * * * * * * *  * * * * * * *  * MENU LINK 2 (to bottom) * * * * * * * * * * * * * * * * * */
.menulink2 {
	position: relative;
	top: 0;
	left: 0;
	width: 2em;
	height: 2em;
	margin: 0;
	padding:0 0 1em 0;
	z-index:500;
	/****************/ display: block;
}
.menulink {
    display: none;
}
.menulink-content {
   	display: none;	
}
.logolyrics img.photo {
	display: none;
}
.logolyrics a img {
	max-width: 100%;
	
}
	.videopage {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
	.videopage object {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
}
/**********************************************PHONE**************************/
@media all and (max-width: 400px) {
.search {
	float: right;
	vertical-align: top;
	width: 150px;
	margin-top: -35px;
	margin-right: 0;
	padding: 0;
	z-index:1500;
	display: block;
}	
	
h2, h2.red, h2.red-fancy, h2.blue, h2.blue-fancy, h2.green, h2.green-fancy {
	font-size: 1.5em;
	line-height: 1.1em;
	margin: .5em;
}
h4, h4.blue {
	font-size: 1.4em;
	line-height: 1.1em;
	margin: .5em;
}
.lyriclinks h3 {
	font-size: 1.4em;
	line-height: 1.1em;
}
#related iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 240px;
	height: 135px;
}

figure.page-picture {
	display: block;
	padding: 0;
	width: 90%;
	margin: 1em auto;
}
.content#row {
	margin: 2em 0;
	text-align: center;
	display: inline-block;
	background: transparent;
}
.content#row figure {
	display: inline-block;
	padding: 15px;
	width: 90%;
	margin: 0;
}
.content#row figure figcaption {
	font-size: 1.3em;
	line-height: 1.1em;
}
#smallboxes .yellownarrow  {
	display: inline-block;
	vertical-align: center;
	text-align: center;
	width: 90%;
}
#smallboxes .yellownarrow  figure {
	text-align: center;
	margin: 1.8em 4em;	
}
.yellownarrow figcaption {
	font-size: 1.1em;
	line-height: 1em;
}
p {
	margin: .25em 1.25em;
}
#inrow p {
	max-width: 80%;	
}
#nav ul {
	width: 100%;
	display: block;
	margin: 0 0 1em 0;
	padding: 0;
}
#nav li a {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #fff;
	font-size: 1.1em;
	line-height: 1.1em;
}
.links {
	display: inline-block;
	width: 100%;
	vertical-align: top;
} 
.content#inrow figure {
	display: none;
}
.content#inrow figure.mid {
	display: inline-block;
	padding: 15px;
	width: 80%;
	margin: 0;
}
.blog-img-left {
	float: none;
	margin: 10px 0;
	max-width: 100%;
}
.blog-img-right {
	float: none;
	margin: 10px 0;
	max-width: 100%;
}
.center-iframe {
	margin: 0 auto;
	text-align: center;
	display: block;
	width: 390px;
	height: 290px;
}
.center-iframe iframe {
	width: 390px;
	height: 290px;
}
	.videopage {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
	.videopage object {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

}
/**********************************************PHONE**************************/
@media all and (max-width: 320px) {

figure.chinablog-med { 
	display: block;
	padding: 0;
	width: 100%;
	margin: 10px auto;
	float: left;
	clear: both;
}
figure.chinablog-center { 
	display: block;
	padding: 0;
	width: 100%;
	margin: 10px auto;
	float: left;
}
figure.chinablog-rt { 
	display: block;
	padding: 0;
	width: 100%;
	margin: 10px auto;
	float: left;
	clear: both;
}
figure.chinablog-four { 
	display: block;
	padding: 0;
	width: 100%;
	margin: 10px auto;
	float: left;
}
h2.quote {
	font-size: 1.1em;
	line-height: 1.1em;
	margin: 1em;
}
h2.quote-white {
	font-size: 1.1em;
	line-height: 1.1em;
	margin: 1em;
}
.logolyrics img.photo {
	display: none;
}
.logolyrics a img {
	max-width: 100%;
	
}
.lyriclinks h3 {
	font-size: 1.4em;
	line-height: 1.1em;
}

p.bigger {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em; 
	padding: 5px 0;
	margin: 5px 5px 8px;
	}
.content#redbox figure {
	display: inline-block;
	padding: 10px;
	width: 80%;
	margin: 0;
}
.content#concerts figure {
	display: inline-block;
	padding: 10px;
	width: 80%;
	margin: 0;
}
.content#inrow {
	margin: 1em 0;
	text-align: center;
	display: inline-block;
	background: transparent;
}
.content#inrow figure figcaption {
	font-size: 1.3em;
	line-height: 1.1em;
}
.content#inrow figure {
	display: none;
}
.content#inrow figure.mid {
	display: inline-block;
	padding: 15px;
	width: 80%;
	margin: 0;
}
#smallboxes .yellownarrow  {
	display: inline-block;
	vertical-align: center;
	text-align: center;
	width: 90%;
}
#smallboxes .yellownarrow figure {
	text-align: center;
	margin: 3em 3em 3.6em;	
}
.yellownarrow figcaption {
	font-size: .9em;
	line-height: 1em;
}

#nav ul  {
	width: 100%;
	display: block;
	margin: 0 0 1em 0;
	padding: 0;
}
#nav li a {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #fff;
	font-size: 1.1em;
	line-height: 1.1em;
}
.blog-img-left {
	float: left;
	margin: 0;
	max-width: 100%;
}
.blog-img-right {
	float: right;
	margin: 0;
	max-width: 100%;
} 
.center-iframe {
	margin: 0 auto;
	text-align: center;
	display: block;
	width: 240px;
	height: 168px;
}
.center-iframe iframe {
	width: 240px;
	height: 168px;
}
.videopage {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
	.videopage object {
	max-width: 100vw;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
}


.item-pagemo-test {
  /*background-color: rgb(0, 0, 80);*/
}

.henny-penny-regular {
  font-family: "Henny Penny", serif;
  font-weight: 400;
  font-style: normal;
}

.englebert-regular {
  font-family: "Englebert", serif;
  font-weight: 400;
  font-style: normal;
}

.fontdiner-swanky-regular {
  font-family: "Fontdiner Swanky", serif;
  font-weight: 400;
  font-style: normal;
}

.lexend-regular {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lexend-bold {
  font-family: "Lexend", sans-serif;
  font-weight: 600;
  font-style: normal;
}


.hftw_dl_text, .hftw_listen_text {
  color: #fff;
  text-align: center;
  text-shadow: 2px 2px 2px #000000;
  
  width: 80% !important;
}

.hftw_listen_text {
  text-shadow: 0 0 0.9rem #000, 0 0 0.3rem #000;
}

.hftw_listen_text span {
  white-space: nowrap;
}

.item-pagehftw-listen, .item-pagehftw-download {
  background-image: url("https://redgrammer.com/images/hooray_for_the_world/HftW_Scrolling_Background.jpg");
  background-repeat: repeat-y;
  background-size: cover;
}

#hftw_dl_buttonHolder {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, 0); 
  
  display: flex;
  flex-direction: row;
  
  gap: 0.75rem;
}

.hftw_dl_button span {
  white-space: nowrap;
}

.button .hint {
  font-size: 80%;
}

.hftw_dl_button {
  padding: 3px 12px 3px 12px;
}

#hftw_cutout {
  -webkit-animation: spin 2500ms ease-in-out;
}

@-webkit-keyframes spin {
    0%  {
      -webkit-transform: scale(0.05) rotate(0deg);
  	}
    100% {
      -webkit-transform: scale(1.0) rotate(1080deg);
  	}   
}

#hftw_players {
  position: relative;
  margin-top: -10rem;
  margin-left: 7rem;
  
  width: calc(100% - 14rem);
  
  z-index: 999 !important;
  
  padding-bottom: 7rem;
}

#hftw_players table {
  width: 100%;
}

#hftw_players table tr td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#hftw_players table tr td:first-child {
  padding-right: 2rem;
  white-space: nowrap;
}

#hftw_players.songsampler table tr td:first-child {
  padding-right: 0 !important;
  white-space: nowrap;
}

#hftw_players table tr td:last-child {
  width: 99%;
}

#hftw_players table td span {
  white-space:nowrap !important;
}

#hftw_players .mejs-container {
  background: none;
}

#hftw_players .mejs-controls {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(215,215,215,1) 100%);
  border-radius: 1rem;
}

#hftw_players .mejs-controls .mejs-time span {
  color: #000;
}

#hftw_players .mejs-controls .mejs-button button {
  filter: invert(1);
}

.content:has(#lyrics.hftw-credits){
  background-image: url('https://redgrammer.com/images/hooray_for_the_world/HftW_Scrolling_Background.jpg');
  background-repeat: repeat-y;
}

.hftw-credits {
	background-color: rgba(255,255,255,0.95);
	box-shadow: 0px 0px 0.9rem 1rem rgba(255,255,255,0.95);
	border: none !important;
  
    position: relative;
    left: 50%;
    margin-left: -29% !important;
    margin-top: 3rem !important;
}

.fyc {
  color: #000;
}

.fyc_red {
  color: #f7130f;
}

.fyc_fyc {
  font-size: 2.33rem;
}
.fyc_cat {
  font-size: 2.65rem;
}

.fyc_albumTitle {
  font-size: 2.7rem;
}
.fyc_albumArtist {
  font-size: 2.2rem;
}

.fyc_fyc {
  white-space: nowrap;
}

.fyc_cat {
  white-space: nowrap;
}

#fyc_buttonHolder {
  width: 80%;
  
  display: inline-flex;
  flex-direction: row;
}

#fyc_buttonHolder a:first-child {
  margin-left: 0;
}

#fyc_buttonHolder a:last-child {
  margin-right: 0;
}

.fyc_listen_button {
	background: initial;
	background-image: none;
    background-color: #000;
    color: #fff;
    border: 1px solid #999;
	border-radius: 0.6rem;
  
  	
	width: 10rem;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
  
	padding: 0;
}

.fyc_listen_button img {
  width: 100%;
}

.fyc_listen_badge {
    background-color: transparent;
	border: none;
}

.fyc-quote {
  display: block;
  font-size: 120%;
  font-style: italic;
  font-weight: bold;
}

.fyc-quote:before, .fyc-quote:after {
  content: "\"";
}

.fyc-quotee {
  font-size: 95%;
  
  display: block;
  margin-top: 0.7rem;
  margin-bottom: 2rem;
}

.fyc-quotee:before {
  content: "\2014";
  padding-right: 0.5rem;
}

#hftw_cover {
    outline: 0.3rem solid white;
    box-shadow: 0.3rem 0.3rem 2rem 0 rgba(0,0,0,0.75);
    -webkit-box-shadow: 0.3rem 0.3rem 2rem 0 rgba(0,0,0,0.75);
	-moz-box-shadow: 0.3rem 0.3rem 2rem 0 rgba(0,0,0,0.75);
}

@media only screen and (max-width: 1200px) {
  .hftw_dl_text {
    font-size: 4.65vw !important;
  }
  
  .hftw_listen_text {
    font-size: 200% !important;
  }
  
  .hftw_songsampler_text {
    font-size: 275% !important;
  }
  
  .fyc_fyc {
    font-size: 3.127vw !important;
  }
  .fyc_cat {
    font-size: 3.551vw !important;
  }
  
  .fyc_albumTitle {
    font-size: 3.6vw !important;
  }
  .fyc_albumArtist {
    font-size: 2.95vw !important;
  }
}

@media only screen and (max-width: 999px) {
  #hftw_banner {
    width: 150% !important;
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  .hftw_dl_text {
    font-size: 5.5vw !important;
  }
  
  .hftw_listen_text {
    width: 100% !important;
    font-size: 3.8vw !important;
  }
  
  .hftw_songsampler_text {
    width: 100% !important;
    font-size: 4.25vw !important;
  }
  
  .hftw_dl_text, .hftw_listen_text {
    padding: 0 1rem;
  }
  
  #hftw_dl_buttonHolder {
    top: 49% !important;
  }
  
  #hftw_cutout {
     width: 120% !important;
	 margin-left: -10% !important;
  }
  
  #hftw_players {
    margin-top: -30vw;
    margin-left: 1rem;
    font-size: 80%;
    
    width: calc(100% - 2rem) !important;
  }
  
  #hftw_players table tr td:first-child {
    white-space: initial !important;
    line-height: 125%;
  }
}

@media only screen and (max-width: 750px) {
  .hftw_dl_button {
    font-size: 3.4vw;
  }
  
  .hftw-credits {
    width: calc(100% - 4rem) !important;
    position: relative;
    left: initial;
    margin-left: 2rem !important;
}
  
  #fycTable {
    width: calc(100% - 2rem) !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  
  .fyc_listen_button {
    width: 8rem !important;
    font-size: 90% !important;
  }
  
  #fyc_buttonHolder {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  #fyc_buttonHolder > a {
    margin: initial !important;
  }
  
  .fyc_listen_button.badge_apple {
     width: 10rem !important;
  }
  
  .fyc_fyc {
    font-size: 5.11vw !important;
  }
  .fyc_cat {
    font-size: 5.6vw !important;
  }
  
  .fyc_albumTitle {
    font-size: 5.7vw !important;
  }
  .fyc_albumArtist {
    font-size: 5vw !important;
  }
}


/*         CONTENT-BIGPIC-ADJUSTMENT            */
/*           HOORAY FOR THE WORLD!              */
.content-bigpic {
		height: 37.9rem;
		background-image: url(../images/hftw_banner.png);
		background-size: contain;
	}
	
@media (max-width: 1200px) {
	.content-bigpic {
		height: 50.5vw;
	}
}

@media (max-width: 999px) {
	.content-bigpic {
		background-image: url(../images/hftw_banner_mobile.png);
		height: 183.8vw;
	}
}