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

	body{
		background-color: #fff;
		text-align: center;
		font-size: 16px;
		font-family: arial, sans-serif;
		background-attachment: fixed;
		background-size: cover;
		overflow-x: hidden;
		margin: 0 0 10px;
		
	}
	
	br{
		display: block;
		margin: 5px;
		line-height: 5px;
	}

	h1{
		font-size: 18px;
		color: #000;
		text-align: center;
		margin: 3px;
	}
	
	h6{
		font-size: 14px;
		color: #000;
		text-align: center;
		margin: 3px;
		font-weight: normal;
	}

	#container{
		width: 100%;
		margin: 0 auto;
		margin-top: 50px;	
		overflow: hidden;	
		position: relative;	
		background-color: #fff;	
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;	
		padding: 0;
		
	}
	
	#container 	h1{
		font-size: 18px;
		color: #000;
		text-align: center;
		margin: 3px;
		font-family: arial;
	}
	
	#homeH1{
		font-size: 20px; 
		color: #009dde; 
		margin-bottom: 5px;
		display: inline-block;
		font-weight: bold;
	}
	
	#homeIntro{
		margin: 0 2.5% 5px;
		cursor:pointer;
		border:0;
		background-color: #fff !important;
		width: 95%;
		position: relative;
		padding: 0;
	}
	
	#hiMoveDown{

	}
	
	#homeIntroBottom{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0;
		background-image: url("/css/images/hibbg.png");
		background-position: bottom left;
		background-repeat: repeat-x;
	}
	
	#homeIntroBottom h6{
		font-size: 12px;
		font-weight: bold;
		color: #fff;
		margin: 0;
		text-align: center;
		text-shadow: 0 0 5px #000;
		display: none;
	}
	
	
	#homeIntroL1{
		color: #fff;
		text-align: center;
		font-weight: bold;
		text-decoration: none;
		font-size: 14px;
		padding: 6px 0;
		border-radius: 20px;
		background-color: #000;
		border: 2px solid #2fc9a7;
		margin: 0 15% 10px;
		width: 55%;
		display: inline-block;
	}
	
	#homeIntroL2{
		color: #fff;
		text-align: center;
		font-weight: bold;
		text-decoration: none;
		font-size: 14px;
		padding: 6px 0;
		border-radius: 20px;
		background-color: #000;
		border: 2px solid #ff01f4;
		margin: 0 2.5% 10px;
		width: 55%;
		display: inline-block;
	}

	#homeIntroL3{
		color: #fff;
		text-align: center;
		font-weight: bold;
		text-decoration: none;
		font-size: 14px;
		padding: 6px 0;
		border-radius: 20px;
		background-color: #044571;
		border: 2px solid #044571;
		margin: 0 2.5%;
		width: 25%;
		display: inline-block;
	}
	
	#masthead{
		width: 100%;
		padding: 0;
		margin: 0 0 10px;
		text-align: center;
	}
	
	#masthead h1{
		font-size: 10vw;
		margin: 0;
		font-family: Times, "Times New Roman";
	}
	
	#masthead h6{
		font-size: 3vw !important;
		font-weight: normal !important;
	}
	
	#masthead a, #masthead a:active, #masthead a:visited{
		margin: 3px 7px;
		color: #666;
		text-decoration: none;
	}
	
	#masthead a:hover{
		margin: 3px 10px;
		color: #06c;
		text-decoration: none;
	}
	
	.mastheadSocial{
		border:0; 
		margin: 4px; 
		width: 6.5%;
		text-align: center;
	}
	
	#mastheadSocialContainer{
		text-align: center;
		width: 100%;
		margin: 0 0 10px;
	}
	
	#mastheadSocialLeft{
		width: 100%;
		margin: 5px 0;
		float: left;
	}
	
	#mastheadSocialRight{
		width: 100%;
		margin: 10px 0 5px;
		float: right;
	}
	
	#latestPodcastHome{
		width: 75%;
		height: 90px;
		margin: 0 12.5%;
	}
	
	#homeShopButton{
		width: 25%;
		border: 0;
	}
	
	#homeMain{
		width: 100%;
		padding-bottom: 70%;
		position: relative;
	}

	.hmlGuide{
		color: #4a9;
		text-decoration:none; 
		margin: 10px 2%; 
		font-size: 14px;
	}
	
	.hmFrontM{
		border: 0; 
		position: absolute; 
		bottom: 0; 
		left: -200%; 
		width: 18%; 
		z-index:2;
	}
	
	.hmFrontC{
		border: 0;
		position: absolute;
		bottom: 0;
		right: -200%;
		width: 34.7%;
		z-index:2;
		display: none;
	}
	
	.homeSelect{
		width: 40%;
		margin: 5px 2.5%;
		border: 0;
		cursor: pointer;
	}

	.homeSocial{
		border:0;
		margin: 5px 1%;
		width: 12.5%;
	}
	
	.homeShow{
		width: 100%;
		margin: 5px 0% 50px;
		display: inline-block;
		position: relative;
		vertical-align: top !important;
	}
	
	.homeShow h1{
		color: #333 !important;
		font-size: 16px !important;
		text-align: center !important;
		margin: 5px 1% !important;
	}
	
	.homeShow h6{
		color: #666 !important;
		font-size: 14px !important;
		text-align: justify !important;
		margin: 5px 5% !important;
	}
	
	.homeShowWatch{
		border: 1px solid #666;
		padding: 10px;
		font-size: 16px;
		color: #666;
		text-decoration: none;
		margin-top: 15px;
		font-weight: bold;
		cursor:pointer;
	}
	
	.homeShowImage{
		width: 100%;
		margin: 0 0 5px;
	}
	
	#login{
		width: 100%;
		color: #000;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 5px;
	}
	
	#login h1{
		color: #333;
		margin: 5px;
	}
	
	#login input{
		font-size: 18px;
		color: #4c4d65 !important;
		text-align: left;
		border-radius: 5px;
		border: 2px solid #4c4d65 !important;
	}

	.content{
		width: 100%;
		color: #000;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 5px;
	}
	
	.content h1{
		color: #333;
		margin: 5px;
		font-size: 18px;
		text-align: center;
	}
	
	.content h6{
		color: #333;
		margin: 5px;
		font-size: 12px;
		text-align: center;
	}

	.youTubeContainer {
		width: 100%;
	  position: relative;
	  padding-bottom: 56.25%;
	}

	.youTubeContainer iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	
	#featuredArticle{
		width: 100%;
		color: #000;
		aspect-ratio: 16 / 9; 
		max-height: 600px;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 5px;
		font-size: 14px;
		text-align: center;
		overflow: hidden;
		background-position: center;
		background-size: cover;
	}
	
	#featuredArticle h6{
		color: #000;
		font-size: 16px !important;
		text-align: justify;
		margin: 5px 5%;
		font-weight: normal;
		font-family: arial;
	}
		
	#featuredArticleImage{
		float: none; 
		width: 100%; 
		margin: 0 0 5px;
		border:0; 
	}
	
	.featuredArticlePodcast{
		border-radius: 5px; 
		width: 20%; 
		margin: 5px 1%;
	}
	
	#featuredArticleText{
		display: none !important;
		margin-top: 10px;
	}

	#featuredArticleMobile{
		color: #000;
		font-size: 16px;
		text-align: justify;
		margin: 5px;
		font-weight: normal;
		font-family: arial;
	}
	
	#chapters{
		float: right;
		color: #ccc;
		font-size: 16px;
		margin: 5px;
		border: 0;
	}
	
	#chapters select{
		color: #333;
		background-color: #ccc;
		font-size: 18px;
		border: 0;
		border: #06005e;
	}

	#listDescription{
		background-color: #ccc;
		padding: 5px;
		border-radius: 10px;
		width: 95%;
		float: left;
		margin: 5px 2%;
	}
	
	#listDescription h1{
		color: #000;
	}
	
	#listDescription h6{
		color: #000;
	}

	.newEpisode{
		display: inline-block;
		vertical-align:top;
		width: 93%; 
		margin: 5px 1% 15px;
		position: relative;
	}

	.newEpisode a, .newEpisode a:active, .newEpisode a:visited{
		text-decoration: none;
		color: #333;
	}

	.newEpisode a:hover{
		text-decoration: none;
		color: #666;
	}
	
	.newEpisode h1{
		font-family: arial;
		font-size: 16px;
	}
	
	.newEpisode h6{
		font-family: arial;
		font-size: 12px;
		text-align: justify;
		margin: 5px 5%;
	}

	.newBlogHome{
		display: inline-block;
		vertical-align:top;
		width: 100%; 
		margin: 0;
		cursor:pointer;
		position: relative;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat; 
	}
	
	.newBlogHome:after {
	  content: "";
	  display: inline-block;
	  padding-bottom: 100%;
	}
	
	.newBlogHome a, .newBlogHome a:active, .newBlogHome a:visited{
		text-decoration: none;
		color: #333;
	}

	.newBlogHome a:hover{
		text-decoration: none;
		color: #666;
	}
	
	.newBlogHome h1{
		font-family: arial;
		font-size: 1.5rem;
	}
	
	.newBlogHome h6{
		font-family: arial;
		font-size: 12px;
		text-align: justify;
		margin: 5px 5%;
	}
	
	#episodeList{
		background-color: #ccc;
		padding: 5px;
		border-radius: 10px;
		width: 95%;
		float: left;
		margin: 5px 2%;
	}

	#episodeList h1{
		font-size: 16px;
		font-weight: bold;
		color: #333;
		text-align: left;
		margin: 0 5px 10px;
		margin: 5px 5px 10px;
		background-color: #fff !important;
		padding: 3px;
		border-radius: 3px;
	}

	#episodeList h6{
		font-size: 13px;
		font-weight: normal;
		color: #000;
		text-align: left;
		margin: 0 7px;
	}

	#episodeList a{
		color: #06c;
	}
	
	.showEpisode{
		background-color: #fff;
		width: 95%;
		margin: 5px 2.5% 10px;
		border-radius: 5px;
		overflow: hidden;
	}
	
	.episodeImage{
		width: 100px;
		height: 100px;
		float: left;
		margin: 5px;
	}
	
	#cstar{
		width: 100%;
		color: #000;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 5px;
		font-size: 14px;
	}
	
	#cstar h1{
		color: #06c;
		font-size: 22px;
		text-align: center;
		margin: 5px;
	}
	
	#cstar h6{
		color: #000;
		font-size: 16px !important;
		text-align: justify;
		margin: 5px 5%;
		font-weight: normal;
	}
	
	.cstar_trans_begin{
		color: #06c;
		font-weight: bold;
	}

	.cstar_trans_end{
		color: #900;
		font-weight: bold;
	}

	#truestory{
		width: 100%;
		color: #000;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 5px;
		font-size: 14px;
	}
	
	#truestory h1{
		color: #900;
		font-size: 22px;
		text-align: center;
		margin: 5px;
	}
	
	#truestory h6{
		color: #000;
		font-size: 16px !important;
		text-align: justify;
		margin: 5px 5%;
		font-weight: normal;
	}

	#artwork{
		width: 100%;
		color: #333;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 5px;
		font-size: 14px;
	}
	
	#artwork h1{
		color: #666;
		font-size: 22px;
		text-align: center;
		margin: 5px;
	}
	
	#artwork h6{
		color: #333;
		font-size: 16px !important;
		text-align: justify;
		margin: 5px 5%;
		font-weight: normal;
	}
	
	
	#fivebest{
		width: 100%;
		color: #000;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 5px;
		font-size: 14px;
	}
	
	#fivebest h1{
		color: #333;
		font-size: 22px;
		text-align: center;
		margin: 5px;
	}
	
	#fivebest h6{
		color: #000;
		font-size: 16px !important;
		text-align: justify;
		margin: 5px 5%;
		font-weight: normal;
	}
	
	.fivebestImage{ 
		margin: 5px 0 5px 5px; 
		float: right;
		width: 60%;
	}

	#periodicals{
		width: 100%;
		color: #000;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 5px;
		font-size: 14px;
	}
	
	#periodicals h1{
		color: #333;
		font-size: 22px;
		text-align: center;
		margin: 5px;
		font-family: arial;
	}
	
	#periodicals h6{
		color: #000;
		font-size: 16px !important;
		text-align: justify;
		margin: 5px 5%;
		font-weight: normal;
		font-family: arial;
	}
	
	.periodicalsImage{ 
		margin: 5px 0 5px 5px; 
		float: right;
		width: 60%;
		border: 0;
	}


#colexions_header{
		width:100%;
		padding-bottom: 25%;
		margin: 0; 
		font-size: 12px; 
		text-align:left; 
		overflow:hidden; 
		background-color: #ccc;
		border-radius: 5px;
		overflow: hidden;
		background-image: url(images/profile_header.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
	}
	
	#colexions_header_avatar{
		width: 25%;
		padding: 0px;
		overflow: hidden;
		margin: 3px .5%;
		background-color:#000;
		display: inline-block;
		position: relative;
		border-radius: 10px;
		border: 2px solid #000;
		position: absolute;
		top: 7%;
		left: 1%;
	}

	#colexions_header_avatar_image{
		width: 100%;
		padding-bottom: 100%;
		overflow: hidden;
		margin: 0;
		background-color:#000;
		background-position: center;
		cursor:pointer;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	
	#colexions_header h1{
		background-color: #fafafa;
		font-size: 16px;
		border-bottom: 2px solid #333;
		color: #333!important;
		text-align: right;
		text-indent: 5px;
	}

	#follow_box{
		width: 98%;
		margin: 5px 1% 2px;
		font-size: 14px; 
		color: #333;
		text-align: left;
	}
	
	#follow_box a{
		color: #666;
		margin: 5px;
		text-decoration: none;
	}
	
	#follow_box a:link{
		color: #666;
		margin: 5px;
		text-decoration: none;
	}
	
	#follow_box a:active{
		color: #666;
		margin: 5px;
		text-decoration: none;
	}
	
	#follow_box a:visited{
		color: #666;
		margin: 5px;
		text-decoration: none;
	}
	
	#follow_box a:hover{
		color: #333;
		margin: 5px;
		text-decoration: underline;
	}

	.follow_show{
		width: 90%;
		margin: 5px 2.5%;
		position: relative;
		display: inline-block;
		border: 2px solid #dfdfdf;
		text-align: left;
		font-size: 12px;
	}
	
	.follow_show_right{
		float: right;
		margin: 5px;
		width: 95px;
		margin: 0;
	}
	
	.follow_show_left{
		float: left;
		margin: 5px;
		width: 55px;
		margin: 0;
	}

	.follow_show a{
		margin: 25px 10px 5px;
		color: #000;
		text-decoration: none;
		font-weight: bold;
	}
	
	.follow_page_action{
		border: 1px solid #666;
		border-radius: 5px;
		padding: 3px;
		color: #333;
		cursor:pointer;
		font-size: 10px;
	}
	
	#profile_header{
		width: 98%;
		padding: 0px;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		margin: 5px auto;
	}

	.profile_follow{
		padding: 5px;
		font-size: 20px;
		float: right;
		color: <?php echo '#' . $css_hex;?>;
		margin: 5px;
		background-color: #fff;
		box-shadow: 0 0 10px #fff;
		border-radius: 3px;
		width: 100px;
		border: 2px solid #ccc;
	}

	.rightNav{
		color: #000;
		padding: 5px;
		border-radius: 5px;
		background-color: #fff;
		font-size: 14px;
		border: 2px solid #ccc;
		margin: 5px;
		float: right;
	}

	a.rightNav{
		color: #333;
		text-decoration: none;
		cursor:pointer;
		width: 110px;
		font-weight:bold;
		text-align: center;
	}

	#contactButton1{
		color: #000;
		padding: 5px;
		border-radius: 5px;
		background-color: #fff;
		font-size: 15px;
		border: 2px solid #ccc;
		margin: 5px;
		float: right;
	}

	#contactButton1 a{
		color: <?php echo '#' . $css_hex;?>;
		text-decoration: underline;
		cursor:pointer;
	}

	#contactButton2{
		color: #000;
		padding: 5px;
		border-radius: 5px;
		background-color: #dfdfdf;
		font-size: 15px;
		border: 2px solid #ccc;
		margin: 5px;
		float: right;
	}

	#contactButton2 a{
		color: #000;
		text-decoration: underline;
		cursor:pointer;
	}

	.communityPreviewRight{
		width: 94%;
		margin: 10px 2%;
		background-color: #fff;
		border: 1px solid #dfdfdf;
		border-radius: 3px;
		padding: 5px;
		position: relative;
		font-size: 13px;
	}
	
	.communityPreviewLeft{
		width: 94%;
		margin: 10px 2%;
		background-color: #dfdfdf;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 5px;
		position: relative;
		font-size: 13px;
	}
	
	.communityPreviewRightTopper,.communityPreviewLeftTopper{
		width: 95%;
		margin: 0 2% -5px;
		padding: 5px;
		font-size: 12px;
		text-align: left;
		color: #666;
	}

	
	.communityPreviewRight a, .communityPreviewLeft a{
		text-decoration: none;
		font-weight: bold;
		color: #000;
	}

	.avatar{
		border: 2px solid #000;
		cursor:pointer; 
		overflow:hidden; 
		background-color: #000; 
		background-repeat: no-repeat; 
		background-position:center; 
		background-size:cover; 
		display: inline-block;
	}
	
	#showMessages{
		background-color: #fff !important;
		margin-bottom: 100px;
	}

	.messagePreview{
		width: 80%;
		border-radius: 10px;
		padding: 10px;
		text-align: left;
		font-size: 18px;
		box-shadow: 0 0 5px #333;
		background-color: #fff;
		border: 2px solid #ccc;
		position: relative;
	}

	#messageSend{
		width: 90%;
		height: 100px;
		text-align: left;
		font-size: 14px;
		color: #333;
		border: 2px solid #333;
		border-radius: 10px;
		box-shadow: 0 0 5px #333;
		float: left;
		margin: 5% 10px;
	}

	#sendMsgBox{
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0 0 50px #fff;
	}

	#sendMsgButton{
		width: 20%;
		float: right;
		margin: 5px 5%;
	}

	.readMsgRight{
		width: 60%;
		border-radius: 3px;
		padding: 10px;
		text-align: left;
		font-size: 18px !important;
		background-color: #fafafa;
		border: 1px solid #dfdfdf;
		position: relative;
		float: right;
		color: #333;
		margin: 10px;
	}

	.readMsgLeft{
		width: 60%;
		border-radius: 3px;
		padding: 10px;
		text-align: left;
		font-size: 18px !important;
		background-color: #dfdfdf;
		border: 1px solid #ccc;
		position: relative;
		float: left;
		color: #000;
		margin: 10px;
	}

	#infoCard{
			width: 90%;
			padding: 5px;
			background-color: #fafafa;
			border: 1px solid #ccc;
			box-shadow: 0 0 5px #ccc;
			margin: 0 auto;
			position: relative;
	}
	
	.infoCardNum{
		float: right;
		margin: 0;
		padding: 5px;
		border-radius: 5px;
		background-color: #dfdfdf;
		color: #333;
		font-size: 12px;
	}
	
	#footer{
		color: #000;
		font-size: 12px;
		width: 100%;
		margin: 10px 0 0;
		padding-bottom: 20px;
	}
	
	#loadingGif{
		width: 300px; 
		position: fixed; 
		top: 50%; 
		left: 50%;  
		margin-top:  -150px; 
		margin-left: -150px; 
	}

}