/* 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%; }


@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: 85px;
	}

	.mobile-option
	{
		display: block;
	}

	.desktop-option
	{
		display: none;
	}

	.desktop-column
	{
		display: none;
	}

	div.page-row.page-header .menu-toggle
	{
		display: block;
		font-size: 160%;
		padding: 0 0 0 32px;
		float: right;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAALUlEQVR4AWOgPfj/9P8nEuBThv8kApI1kOEkXtIg7UOVZCeNxgPVwGg80BwAAAiTmnPZ8c/1AAAAAElFTkSuQmCC);
		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%;
	}

	/* 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
	{
		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 all and (max-width: 700px) and (orientation:landscape) 
{
	html, body
	{
		font-size: 90%;
		line-height: 1.2em;
	}

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