/* responsive */

.halves,
.thirds,
.quarters
{
	float: left;
}

.halves
{
	width: 50%;
}

.thirds
{
	width: 33.3%;
}

.quarters
{	
	width: 25%;
}

.halves,
.thirds,
.quarters,
.left-0,
.left-1,
.left-2,
.left-3,
.left-4,
.left-5,
.left-6,
.left-7,
.width-1-col,
.width-2-col,
.width-3-col,
.width-4-col,
.width-5-col,
.width-6-col,
.width-7-col,
.width-8-col
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ie-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}


.left-0,
.left-1,
.left-2,
.left-3,
.left-4,
.left-5,
.left-6,
.left-7,
.width-1-col,
.width-2-col,
.width-3-col,
.width-4-col,
.width-5-col,
.width-6-col,
.width-7-col,
.width-8-col
{
	float: left;
	position: relative;
	z-index: 1;
	padding: 0 20px 0 20px;
}

.left-0 { margin-left: 00.0%;max-width: 100.0%; }
.left-1 { margin-left: 12.5%;max-width:  87.5%; }
.left-2 { margin-left: 25.0%;max-width:  75.0%; }
.left-3 { margin-left: 37.5%;max-width:  62.5%; }
.left-4 { margin-left: 50.0%;max-width:  50.0%; }
.left-5 { margin-left: 62.5%;max-width:  37.5%; }
.left-6 { margin-left: 75.0%;max-width:  25.0%; }
.left-7 { margin-left: 87.5%;max-width:  12.5%; }


.width-1-col { width:  12.5%; }
.width-2-col { width:  25.0%; }
.width-3-col { width:  37.5%; }
.width-4-col { width:  50.0%; }
.width-5-col { width:  62.5%; }
.width-6-col { width:  75.0%; }
.width-7-col { width:  87.5%; }
.width-8-col { width: 100.0%; }


.mobile-search
{
	position: fixed;
	bottom: -100%;
	width: 100%;
	background-color: #000;
	padding: 70px 20px 50px 20px;
	transition: all 0.2s ease-in-out;
	color: #fff;
	border-top: 2px solid #ddd;
	z-index: 14;
}

	.mobile-search.open
	{
		bottom: 0;
	}
	
	.mobile-search input[type="text"]
	{
		width: 100%;
		font-size: 120%;
	}

	.mobile-search .close
	{
		position: absolute;
	}

.mobile-menu
{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 13;
	color: #fff;
}

	.mobile-menu ul li
	{
		display: block;
		position: absolute;
		background-color: rgba(0,0,0,0.85);
		margin: 0;
		width: 33.33333%;
		height: 25%;
		top: -25%;
		right: -33.33333%;		
		transition: all 0.3s ease-in-out;
		xtransform: scale(0.5);
	}

	.mobile-menu .menu-toggle.close,
	.mobile-search .close
	{	
		font-size: 300%;
		cursor: pointer;
		z-index: 2;
		font-family: sans-serif;
		top: 0;
		right: 0;
		padding: 0px 10px 10px 10px;
	}

	.mobile-menu .menu-toggle.close
	{
		position: fixed;
		display: none;
	}

	.mobile-menu.open
	{
	}

	.mobile-menu.open ul
	{
	}

		.mobile-menu.open ul li
		{
			transform: scale(1);
			text-align: center;
		}

		.mobile-menu.open ul li:nth-child(1)
		{

			right: 66.66666%;
			top: 0;
		}
		.mobile-menu.open ul li:nth-child(2)
		{		
			right: 33.33333%;
			top: 0;
		}
		.mobile-menu.open ul li:nth-child(3)
		{		
			right: 0;
			top: 0;
		}
		.mobile-menu.open ul li:nth-child(4)
		{		
			right: 66.66666%;
			top: 25%;
		}
		.mobile-menu.open ul li:nth-child(5)
		{		
			right: 33.33333%;
			top: 25%;
		}
		.mobile-menu.open ul li:nth-child(6)
		{		
			right: 0;
			top: 25%;
		}
		.mobile-menu.open ul li:nth-child(7)
		{		
			right: 66.66666%;
			top: 50%;
		}
		.mobile-menu.open ul li:nth-child(8)
		{		
			right: 33.33333%;
			top: 50%;
		}
		.mobile-menu.open ul li:nth-child(9)
		{		
			right: 0;
			top: 50%;
		}
		.mobile-menu.open ul li:nth-child(10)
		{		
			right: 66.66666%;
			top: 75%;
		}
		.mobile-menu.open ul li:nth-child(11)
		{		
			right: 33.33333%;
			top: 75%;
		}
		.mobile-menu.open ul li:nth-child(12)
		{		
			right: 0;
			top: 75%;
		}

		.mobile-menu.open ul li a[href]
		{
			position: relative;
			color: inherit;
			display: block;
			line-height: 0.8em;
			padding-top: 116px;
		}

			.mobile-menu.open ul li a[href] .icon
			{
				position: absolute;
				top: 44px;
				width: 64px;
				height: 64px;
				left: 50%;
				transform: translateX(-50%);
			}


	.mobile-menu.open li.home .icon
	{
		background-position: -764px -110px;
	}

	.mobile-menu.open li.about .icon
	{
		background-position: -828px -110px;
	}

	.mobile-menu.open li.support .icon
	{
		background-position: -892px -110px;
	}

	.mobile-menu.open li.podcast .icon
	{
		background-position: -764px -174px;
	}

	.mobile-menu.open li.follow .icon
	{
		background-position: -828px -174px;
	}

	.mobile-menu.open li.contact .icon
	{
		background-position: -892px -174px;
	}

	.mobile-menu.open li.curated .icon
	{
		background-position: -764px -238px;
	}

	.mobile-menu.open li.archive .icon
	{
		background-position: -828px -238px;
	}

	.mobile-menu.open li.nuggets .icon
	{
		background-position: -892px -238px;
	}

	.mobile-menu.open li.greatest .icon
	{
		background-position: -764px -302px;
	}

	.mobile-menu.open li.random .icon
	{
		background-position: -828px -302px;
	}

	.mobile-menu.open li.search .icon
	{
		background-position: -892px -302px;
	}


@media screen and (max-width: 1110px)
{
	#read-more-arrow
	{
		left: -50px;
		color: #000;
	}
}


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

	/* act like 4 cols */
	.left-1 { margin-left: 00.0%;max-width: 100.0%; }
	.left-3 { margin-left: 25.0%;max-width:  75.0%; }
	.left-5 { margin-left: 50.0%;max-width:  50.0%; }
	.left-7 { margin-left: 75.0%;max-width:  25.0%; }

	.width-1-col { width:  25.0%; }
	.width-3-col { width:  50.0%; }
	.width-5-col { width:  75.0%; }
	.width-7-col { width: 100.0%; }

	
	.page-row.page-header .content
	{
		padding-left: 40px;
		padding-right: 40px;
	}


	/* let the top logo reach the edges */

	div.page-row.logo-list-and-page .content,
	div.page-row.logo-single .content,
	div.page-row.page-bottom .content
	{
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
	}

		div.page-row.logo-list-and-page .container-logo,
		div.page-row.logo-single .container-logo
		{
			border-radius: 0;
		}

	body.page .navigation
	{
		padding: 8px;
	}


}



@media screen and (max-width: 960px)
{
	/* act like 2 cols */

	/* body { font-size: 16px; } */

	.opacity-hover
	{
		opacity: 1;
	}

	div.content div.sidebar
	{
		display: none;
		padding-bottom: 4em;
		border-left: none;
	}

	.sidebar h4
	{
		font-size: 140%;
	}
	

	.sidebar.shared-links .link
	{
		font-size: 100%;
	}

	.mobile-options
	{
		display: block;
	}

	.left-2, .left-3, .left-4 { margin-left: 00.0%; max-width: 100.0%; }
	.left-6, .left-7 { margin-left: 50.0%;max-width:  50.0%; }

	.width-1-col,
	.width-2-col,
	.width-3-col,
	.width-4-col
	{
		width: 50%;
	}

	.width-5-col,
	.width-6-col,
	.width-7-col,
	.width-8-col
	{
		width: 100%;
	}

	/* unthird the thirds */

	.thirds
	{
		float: none;
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}	


	.quarters
	{
		width: 50%;
	}


	#article-bottom .content,
	#footer .content
	{
		padding-left: 40px;
		padding-right: 40px;
	}


	h3.column-header
	{
		display: none;
	}

	div.content div.features
	{
		border-right: none;
	}		

	.container-logo .logo-text
	{
		width: 500px;
		height: 78px;		
	}

		body.page .container-logo .logo-text
		{
			height: 90px;
		}

		div.page-row.logo-list-and-page .under-logo
		{
			font-size: 80%;
			margin-top: -21px;
		}

	.container-logo .logo-reel
	{
		top: 8px;
		left: 15px;
	}

	.entry-title:before,
	.page-title:before
	{
		background-image: none;
	}

	figure.cover .title-byline h1,
	.no-cover .title-byline h1
	{
		font-size: 300%;
		line-height: 1.2em;
	}		

	figure.cover .title-byline h2,
	.no-cover .title-byline h2
	{
		font-size: 100%;
	}

}


@media screen and (max-width: 880px)
{
	div.page-row.page-header
	{
		height: 56px;
		padding-top: 10px;
	}

		div.page-row.page-header .content
		{
			padding-left: 10px;
			padding-right: 10px;
		}

	.mobile-option
	{
		display: block;
	}

	.desktop-option
	{
		display: none;
	}

	.desktop-column
	{
		display: none;
	}

	div.page-row.page-header .menu-toggle
	{
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 50px;
		height: 45px;
		font-size: 160%;
		float: right;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAALUlEQVR4AWOgPfj/9P8nEuBThv8kApI1kOEkXtIg7UOVZCeNxgPVwGg80BwAAAiTmnPZ8c/1AAAAAElFTkSuQmCC);
		background-position: 13px 10px;
		background-color: rgba(0,0,0,0.1); 
		-webkit-border-bottom-left-radius: 9px;
		-moz-border-radius-bottomleft: 9px;
		border-bottom-left-radius: 9px;
		z-index: 13;
	}




	div.page-row.page-header .menu-container
	{
		display: none;
		/*font-size: 140%;
		background-color: #222;
		position: absolute;
		right: 0;
		top: -25px;
		padding: 80px 30px 30px 30px;*/
	}

	div.page-row.page-header ul.extra,
	div.page-row.page-header .content li
	{
		float: none;
	}
}


@media screen and (max-width: 760px)
{
	div.page-row div.content figure.entry-image.align-left,
	div.page-row div.content figure.entry-image.align-right
	{
		float: none;
		margin-left: auto;
		margin-right: auto;
	}


	.donater
	{
		float: none;
		margin-left: auto;
		margin-right: auto;
	}


	figure.cover .title-byline.cursive h1
	{
		font-size: 260%;
	}

}


@media screen and (max-width: 640px)
{
	/* act like 1 col */

	/* body { font-size: 16px; } */

	.left-0,
	.left-1,
	.left-2,
	.left-3,
	.left-4,
	.left-5,
	.left-6,
	.left-7,
	.halves
	{
		float: none;
		margin-left: 0;
		max-width: 100%;
	}

	ul.extra-features li
	{
		padding-right: 0;
	}

	/* clearfix */ 

	.halves:before,
	.halves:after
	{
	    content: " ";
	    display: table;
	}

	.halves:after
	{
	    clear: both;
	}

	/* end clearfix */ 

	.width-1-col,
	.width-2-col,
	.width-3-col,
	.width-4-col,
	.width-5-col,
	.width-6-col,
	.width-7-col,
	.width-8-col,
	.halves
	{
		width: 100%;
		/* margin-top: 20px; */
	}

	#article-bottom .width-3-col,
	#article-bottom .width-4-col
	{
		margin-top: 20px;
	}

	.container-logo .logo-text
	{
		width: 333px;
		height: 52px;		
	}

		body.page .container-logo .logo-text
		{
			height: 60px;
		}

		div.page-row.logo-list-and-page .under-logo
		{
			margin-top: 0;
		}

	.container-logo .logo-reel
	{
		top: 5px;
		left: 10px;
	}

	div.page-row.logo-single .content,
	div.page-row div.content, div.page-row div.cover-container
	{
		padding: 0;
	}
	
	figure.cover
	{
		min-height: 50vh;
	}

		figure.cover .noise-dark,
		figure.cover .title-byline
		{
			display: none;
		}

	div.content.alt-title-byline
	{
		display: block;
	}


	div.page-row div.content div.article-body
	{
		margin-top: 2em;
	}

	.donation-stats
	{
		margin: 1em auto 1em auto;
	  	max-width: 100%;
	  	float: none;
	}

	.split-page .halves.left
	{
		border-right: none;
		padding-right: 0;
	}

	.split-page .halves.right
	{
		border-left: none;
		padding-left: 0;
	}


	#donation-totals
	{
		font-size: 130%;
	}


		#donation-totals .left,
		#donation-totals .right
		{
			float: left;
			width: 50%;
		}

	.page-body #payment-form input[type='text'],
	.page-body #payment-form input[type='email']
	{
		font-size: 200%;
	}


	figure.cover .title-byline h1,
	.no-cover .title-byline h1
	{
		font-size: 200%;
	}		


}


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

	ul.mode-selector li
	{
		text-align: center;
	}

	ul.mode-selector li .icon-24
	{
		float: none;
		margin: 0 auto;
	}

	ul.mode-selector li .label
	{
		font-size: 110%;
		line-height: 1.3em;
	}

	ul.mode-selector li .description
	{
		font-size: 50%;
		margin-left: 0;
	}


	figure.cover .title-byline.cursive h1
	{
		font-size: 140%;
	}

}


@media screen and (max-width: 420px)
{
	#donation-plea
	{
		font-size: 90%;
	}

	.donate-response 
	{
	    line-height: 70px;
	    width: 70px;
	    height: 70px;	
	}
}

/* special cases */

/* handheld landscape */
@media screen and (orientation:landscape) 
{


	.mobile-menu ul li
	{
		width: 25%;
		height: 33.33333%;
		top: -33.333333%;
		right: -25%;		
	}


		.mobile-menu.open ul li:nth-child(1)
		{

			right: 75%;
			top: 0;
		}
		.mobile-menu.open ul li:nth-child(2)
		{		
			right: 50%;
			top: 0;
		}
		.mobile-menu.open ul li:nth-child(3)
		{		
			right: 25%;
			top: 0;
		}
		.mobile-menu.open ul li:nth-child(4)
		{		
			right: 0;
			top: 0;
		}
		.mobile-menu.open ul li:nth-child(5)
		{		
			right: 75%;
			top: 33.33333%;
		}
		.mobile-menu.open ul li:nth-child(6)
		{		
			right: 50%;
			top: 33.33333%;
		}
		.mobile-menu.open ul li:nth-child(7)
		{		
			right: 25%;
			top: 33.33333%;
		}
		.mobile-menu.open ul li:nth-child(8)
		{		
			right: 0;
			top: 33.33333%;
		}
		.mobile-menu.open ul li:nth-child(9)
		{		
			right: 75%;
			top: 66.66666%;
		}
		.mobile-menu.open ul li:nth-child(10)
		{		
			right: 50%;
			top: 66.66666%;
		}
		.mobile-menu.open ul li:nth-child(11)
		{		
			right: 25%;
			top: 66.66666%;
		}
		.mobile-menu.open ul li:nth-child(12)
		{		
			right: 0;
			top: 66.66666%;
		}

		.mobile-menu.open ul li a[href]
		{
			padding-top: 100px;
		}

			.mobile-menu.open ul li a[href] .icon
			{
				top: 26px;
			}


	/*
	#donation-plea
	{
		font-size: 90%;
	}
	*/
}