/* AUDIO PLAYER 
----------------------------------------------------------- */
.all-audio-container {
	box-sizing: border-box;
	padding:0;
	margin:0;
}

.all-audio-a {
	box-sizing: border-box;	
}

.all-audio-b {
	box-sizing: border-box;
	text-align: center;
}

h3.audio{margin: 10px 0;}

.months-opt-list, .years-opt-list {
	width: 100%;
	font-size:16px;
	margin:10px;
}

.months-opt-list:hover, .years-opt-list:hover {
	cursor:pointer;
	padding-left:10px;
}

.audio-player-wrap {
	position: relative;
	width: 80%;
	margin: 0 auto;
	box-sizing: border-box;
	background-color: #000;
	padding: 10px; padding-top: 0;	
	background: #45484d;
	background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); 
	background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%);
	background: linear-gradient(to bottom,  #45484d 0%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );

}

.audio-player-title-bar {
	color: #fff;
	font-size: 12px;
	line-height: 30px;
	
}

.audio-title, .recent-audio-title{
	width: 75%;
	float: left;
	font-size: 18px;
	text-align: left;
}

.placeHolder{
	text-align:center;
}
.audio-img-wrap {}

.audio-img-wrap img {
	border: 1px solid #000;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	-webkit-box-shadow: 0px 0px 6px #000000;
	-moz-box-shadow: 0px 0px 6px #000000;
	box-shadow: 0px 0px 6px #000000;
}

.exhorter, .recent-exhorter {
	text-align: center;
	font-size: 14px;
	padding: 3px;
	color: #fff;
}

.now-playing, .recent-now-playing {
	font-size: 14px;
	padding: 0;
	color: rgba(136,191,234,1);
}

.audio-player {
	width: 100%;	
	box-sizing: border-box;
	border: 1px solid #000;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	-webkit-box-shadow: 0px 0px 6px #000000;
	-moz-box-shadow: 0px 0px 6px #000000;
	box-shadow: 0px 0px 6px #000000;
	
	
}

.audio-player audio {
	width: 100%;
	background-color: #f1f3f4;
	
}

.view-list, .toggle-recents {
	width: 22%;
	float: right;
	text-align: right;
}

.view-list:hover, .bible-listToView:hover, .toggle-recents:hover {
	color: #6993B5;
	cursor:pointer;
}

.listToView, .bible-listToView, .recentlistToView{
	position: relative;
	display: none;
	width: 100%;
	max-height: 200px;
	overflow-y: scroll;
	position: relative;
	background: #606c88;
	background: -moz-linear-gradient(top,  #606c88 0%, #3f4c6b 100%);
	background: -webkit-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
	background: linear-gradient(to bottom,  #606c88 0%,#3f4c6b 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
	-webkit-box-shadow: 0px 0px 6px #000000;
	-moz-box-shadow: 0px 0px 6px #000000;
	box-shadow: 0px 0px 6px #000000;
}

ul.play-list {
	color: #f5f5f5;
	list-style-type: square;
}

ul.play-list li {
	color: #f5f5f5;
	text-align: left;
	font-size: 13px;
	line-height: 20px;
	padding-bottom: 5px;	
}


ul.play-list li:hover {
	color: #6993B5;
	cursor: pointer;
	
}

/* custom querries 
----------------------------------------------------------- */		

/* desktop up
----------------------------------------------------------- */
@media all and (min-width: 1024px) {}

 /* tablet - landscape
----------------------------------------------------------- */
@media all and (min-width: 769px) and (max-width: 1023px) {
	p.audio-text{font-size: 16px;line-height:20px;}
	
}

/* tablet - protrait
----------------------------------------------------------- */
@media all and (min-width: 481px) and (max-width: 768px) {
	.audio-player-wrap {	width: 100%;}
	p.audio-text{font-size: 16px;line-height:20px;}
	
}

/* phone - landscape
----------------------------------------------------------- */
@media all and (min-width: 361px) and (max-width: 480px) {
	.audio-player-wrap {	width: 100%;}
	p.audio-text{font-size: 16px;line-height:20px;}
	
}

/*phone - portrait
----------------------------------------------------------- */
@media all and (max-width: 360px) {
	.audio-player-wrap {	width: 100%;}
	p.audio-text{font-size: 16px;line-height:20px;}
	.audio-title, .recent-audio-title{font-size: 13px;}
}

/* RESPONSIVE GRID
------------------------------------------------- */
.s8w-grid{max-width:88%; margin:0 auto; padding: 0;}
.s8w-grid .s8w-max{width:100%; max-width:100%; margin:0 auto;}
.s8w-row{display:block; overflow:hidden; clear:both;}

.s8w-alpha{margin-left:0;}
.s8w-omega{margin-right:0;}
 
.s8w-col_1  { width: 6.6666666666667%; }
.s8w-col_2  { width: 15%; }
.s8w-col_3  { width: 23.333333333333%; }
.s8w-col_4  { width: 31.666666666667%; }
.s8w-col_5  { width: 40%; }
.s8w-col_6  { width: 48.333333333333%; }
.s8w-col_7  { width: 56.666666666667%; }
.s8w-col_8  { width: 65%; }
.s8w-col_9  { width: 73.333333333333%; }
.s8w-col_10 { width: 81.666666666667%; }
.s8w-col_11 { width: 90%; }
.s8w-col_12 { width: 98.333333333333%; }

.s8w-col_1,.s8w-col_2,.s8w-col_3,.s8w-col_4,.s8w-col_5,.s8w-col_6,
.s8w-col_7,.s8w-col_8,.s8w-col_9,.s8w-col_10,.s8w-col_11,.s8w-col_12 {
	margin: 4px 0.83333333333333% 4px 0.83333333333333%;
	float: left;
	display: block;
}

@media all and (max-width: 480px) {
	
	.s8w-col_1,.s8w-col_2,.s8w-col_3,.s8w-col_4,.s8w-col_5,.s8w-col_6,
	.s8w-col_7,.s8w-col_8,.s8w-col_9,.s8w-col_10,.s8w-col_11,.s8w-col_12 {
		float:none;
		width:auto;
		clear:both;
		display:block;
	}
}

/* visibility classes	
 -------------------------------------------------------------------------------------- */
 
/* HIDE/SHOW
------------------------------------------------- */
.s8w-hide {display: none}
.s8w-show {display: block;}
.hidden {display: none;}		
.visible {display: block;}



@media all and (min-width: 1024px) {
	
	/*  desktop 
	--------------------------------------- */
	.show-desktop-only	{display:block;}
	.show-desktop-dn	{display:block;}	
	.hide-desktop-only	{display:none;}
	
	/*  tablet - landscape 
	--------------------------------------- */
	.show-tab-l-only   	{display:none;}
	.show-tab-l-up 		{display:block;}
	.show-tab-l-dn 		{display:none;}	
	.hide-tab-l-only  	{display:block;}
	.hide-tab-l-dn  	       {display:block;}
	
	/*  tablet - protrait 
	--------------------------------------- */
	.show-tab-p-only	{display:none;}
	.show-tab-p-up 		{display:block;}
	.show-tab-p-dn 		{display:none;}	
	.hide-tab-p-only	{display:block;}
	.hide-tab-p-dn   		{display:block;}
	
	/*  phone - landscape 
	--------------------------------------- */
	.show-phone-l-only	{display:none;}
	.show-phone-l-up 	{display:block;}
	.show-phone-l-dn	{display:none;}	
	.hide-phone-l-only	{display:block;}
	.hide-phone-l-dn	{display:block;}
	
	/*  phone - portrait 
	--------------------------------------- */
	.show-phone-p-only	{display:none;}
	.show-phone-p-up	{display:block;}	
	.hide-phone-p-only	{display:block;}
	
}


 /* @media all and (min-width: 769px)
	>> tablet - landscape
----------------------------------------------------------- */
@media all and (min-width: 769px) and (max-width: 1023px) {
	
	/*  desktop 
	--------------------------------------- */
	.show-desktop-only	{display:none;}
	.show-desktop-dn	{display:block;}	
	.hide-desktop-only	{display:block;}
	
	/*  tablet - landscape 
	--------------------------------------- */
	.show-tab-l-only   	{display:block;}
	.show-tab-l-up 		{display:block;}
	.show-tab-l-dn 		{display:block;}	
	.hide-tab-l-only  	{display:none;}
	.hide-tab-l-dn  	        {display:none;}
	
	/*  tablet - protrait 
	--------------------------------------- */
	.show-tab-p-only	{display:none;}
	.show-tab-p-up 		{display:block;}
	.show-tab-p-dn 		{display:none;}	
	.hide-tab-p-only	{display:block;}
	.hide-tab-p-dn   		{display:block;}
	
	/*  phone - landscape 
	--------------------------------------- */
	.show-phone-l-only	{display:none;}
	.show-phone-l-up 	{display:block;}
	.show-phone-l-dn	{display:none;}	
	.hide-phone-l-only	{display:block;}
	.hide-phone-l-dn	{display:block;}
	
	/*  phone - portrait 
	--------------------------------------- */
	.show-phone-p-only	{display:none;}
	.show-phone-p-up	{display:block;}	
	.hide-phone-p-only	{display:block;}
	
}

/* @media all and (min-width: 481px) and (max-width: 768px)
	>> tablet - protrait
----------------------------------------------------------- */
@media all and (min-width: 481px) and (max-width: 768px) {	
	
	.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,
	.col_7,.col_8,.col_9,.col_10,.col_11,.col_12 {
		float:none;
		width:auto;
		clear:both;
		display:block;
	}
	
	/*  desktop 
	--------------------------------------- */
	.show-desktop-only	{display:none;}
	.show-desktop-dn	{display:block;}	
	.hide-desktop-only	{display:block;}
	
	/*  tablet - landscape 
	--------------------------------------- */
	.show-tab-l-only   	{display:none;}
	.show-tab-l-up 		{display:none;}
	.show-tab-l-dn 		{display:block;}	
	.hide-tab-l-only  	{display:block;}
	.hide-tab-l-dn  	        {display:none;}
	
	/*  tablet - protrait 
	--------------------------------------- */
	.show-tab-p-only	{display:block;}
	.show-tab-p-up 		{display:block;}
	.show-tab-p-dn 		{display:block;}	
	.hide-tab-p-only	{display:none;}
	.hide-tab-p-dn   	        {display:none;}
	
	/*  phone - landscape 
	--------------------------------------- */
	.show-phone-l-only	{display:none;}
	.show-phone-l-up 	{display:block;}
	.show-phone-l-dn	{display:none;}	
	.hide-phone-l-only	{display:block;}
	.hide-phone-l-dn	{display:block;}
	
	/*  phone - portrait 
	--------------------------------------- */
	.show-phone-p-only	{display:none;}
	.show-phone-p-up	{display:block;}	
	.hide-phone-p-only	{display:block;}
	
}

/* @media all and (min-width: 361px) and (max-width: 480px)
	>> phone - landscape
----------------------------------------------------------- */
@media all and (min-width: 361px) and (max-width: 480px) {
	
	.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,
	.col_7,.col_8,.col_9,.col_10,.col_11,.col_12 {
		float:none;
		width:auto;
		clear:both;
		display:block;
	}
	
	/*  desktop 
	--------------------------------------- */
	.show-desktop-only	{display:none;}
	.show-desktop-dn	{display:block;}	
	.hide-desktop-only	{display:block;}
	
	/*  tablet - landscape 
	--------------------------------------- */
	.show-tab-l-only   	{display:none;}
	.show-tab-l-up 		{display:none;}
	.show-tab-l-dn 		{display:block;}	
	.hide-tab-l-only  	{display:block;}
	.hide-tab-l-dn  	        {display:none;}
	
	/*  tablet - protrait 
	--------------------------------------- */
	.show-tab-p-only	{display:none;}
	.show-tab-p-up 		{display:none;}
	.show-tab-p-dn 		{display:block;}	
	.hide-tab-p-only	{display:block;}
	.hide-tab-p-dn   		{display:none;}
	
	/*  phone - landscape 
	--------------------------------------- */
	.show-phone-l-only	{display:block;}
	.show-phone-l-up 	{display:block;}
	.show-phone-l-dn	{display:block;}	
	.hide-phone-l-only	{display:none;}
	.hide-phone-l-dn	{display:none;}
	
	/*  phone - portrait 
	--------------------------------------- */
	.show-phone-p-only	{display:none;}
	.show-phone-p-up	{display:block;}	
	.hide-phone-p-only	{display:block;}
	
}

/* @media all and (max-width: 360px)
	>> phone - portrait
----------------------------------------------------------- */
@media all and (max-width: 360px) {
	
	.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,
	.col_7,.col_8,.col_9,.col_10,.col_11,.col_12 {
		float:none;
		width:auto;
		clear:both;
		display:block;
	}
	
	/*  desktop 
	--------------------------------------- */
	.show-desktop-only	{display:none;}
	.show-desktop-dn	{display:block;}	
	.hide-desktop-only	{display:block;}
	
	/*  tablet - landscape 
	--------------------------------------- */
	.show-tab-l-only   	{display:none;}
	.show-tab-l-up 		{display:none;}
	.show-tab-l-dn 		{display:block;}	
	.hide-tab-l-only  	{display:block;}
	.hide-tab-l-dn  	        {display:none;}
	
	/*  tablet - protrait 
	--------------------------------------- */
	.show-tab-p-only	{display:none;}
	.show-tab-p-up 		{display:none;}
	.show-tab-p-dn 		{display:block;}	
	.hide-tab-p-only	{display:block;}
	.hide-tab-p-dn    	{display:none;}
	
	/*  phone - landscape 
	--------------------------------------- */
	.show-phone-l-only	{display:none;}
	.show-phone-l-up 	{display:none;}
	.show-phone-l-dn	{display:block;}	
	.hide-phone-l-only	{display:block;}
	.hide-phone-l-dn	{display:none;}
	
	/*  phone - portrait 
	--------------------------------------- */
	.show-phone-p-only	{display:block;}
	.show-phone-p-up	{display:block;}	
	.hide-phone-p-only	{display:block;}
	
}

/* 	S8W TABS 
------------------------------------------------------------------ */
ul.s8w-tabs {
	padding: 0; margin:0;
	position: relative;
	list-style: none;
	font-size: 14px;
	z-index: 1000;
	float: left;
}

ul.s8w-tabs li.s8w-tab-link {
	border: 1px solid #E7E9F6;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	line-height: 28px;
	height: 38px;
	font-size: 150%;
	padding: 5px 10px 10px 10px; 
	margin: 0 5px 0 0;
	position: relative;
	background: #fff;
	overflow: hidden;
	float: left;
	color: #0273BC;
	cursor:pointer;	
}

.terms{
	height: 45px;
	background-color: #E6E7E8;
	border: 1px solid #999;
	font-size: 25px;
	padding-left: 15px;
	color: #0273BC;
}

.s8w-tab-container {
	background: #fff;
	position: relative;
	margin: 0 0 0 0;
	border: 1px solid #E7E9F6;	
	border-bottom-left-radius: 5px;	
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	z-index: 999;
	float: left;
	width: 100%;
	top: -1px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.s8w-tab-content {
	padding: 7px 15px 15px 15px;
	padding-top: 10px;
}



/* @media all and (min-width: 1024px)
	>> Desktop
 ---------------------------------------------------------- */
@media all and (min-width: 1024px) {
	
	
}


 /* @media all and (min-width: 769px)
	>> tablet - landscape
----------------------------------------------------------- */
@media all and (min-width: 769px) and (max-width: 1023px) {

	
}

/* @media all and (min-width: 481px) and (max-width: 768px)
	>> tablet - protrait
----------------------------------------------------------- */
@media all and (min-width: 481px) and (max-width: 768px) {
	ul.s8w-tabs{float:none; text-align:center; margin-bottom: 2px;}
	ul.s8w-tabs li.s8w-tab-link {
		text-align: center;
		width: 100%;
		margin: 2px 0;
		font-size: 130%;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		line-height: 28px;
		height: 38px;
		padding: 5px 10px 10px 10px; 


	}

	
}

/* @media all and (min-width: 361px) and (max-width: 480px)
	>> phone - landscape
----------------------------------------------------------- */
@media all and (min-width: 361px) and (max-width: 480px) {
	ul.s8w-tabs{float:none; text-align:center; margin-bottom: 2px;}
	ul.s8w-tabs li.s8w-tab-link {
		text-align: center;
		width: 100%;
		margin: 2px 0;
		font-size: 130%;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	
}

/* @media all and (max-width: 360px)
	>> phone - portrait
----------------------------------------------------------- */
@media all and (max-width: 360px) {
	ul.s8w-tabs{float:none; text-align:center; margin-bottom: 2px;}
	ul.s8w-tabs li.s8w-tab-link {
		text-align: center;
		width: 100%;
		margin: 2px 0;
		font-size: 120%;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		
	}
	
}