/* --- RESPONSIVE LAYOUT --- */

@media only screen

{

main, header, footer	{	width:			100%;
				min-width:		320px;			}

}

/* Tablet mode */

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

{

.search			{	order:			3;
				margin-left:		0;			}

.cart			{	order:			4;
				margin-left:		0;			}

nav			{	order:			5;
				width:			100%;
				max-width:		500px;
				flex-grow:		0;			}

.title			{	margin:			0 10px;			}

.title-img		{	width:			100%;			}

.cart-img		{	width:			32px;
				height:			32px;			}

.sidebar-left,
.sidebar-right		{	float:			none;
				display:		block;
				font-size:		14pt;
				padding:		20px 5px;
				margin:			30px auto 40px;		}

.sidebar-left		{	transform:		rotate(-1deg);		}
.sidebar-right		{	transform:		rotate(1deg);		}
	
.sidebar-left::before,
.sidebar-right::before,
.sidebar-left::after,
.sidebar-right::after	{	font-size:		22pt;			}

.media-list		{	padding:		15px 15px 50px !important; }

h1			{	margin-top:		40px;			}

}


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

{

.wide-only		{	display:		none;			}

.float-left-large	{	float:			none;
				display:		block;
				margin-left:		auto !important;
				margin-right:		auto !important;	}

}


/* Phone mode */

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

{

.title-img		{	width:			70vw;			}

h1			{	margin:			20px auto 40px;		}

.byline			{	margin:			-20px auto 40px;	}

footer			{	max-width:		320px;			}

.footer-slogan		{	font-size:		18pt;			}

.footer-donate		{	font-size:		14pt;			}


.float-left		{	float:			none;
				display:		block;
				margin-left:		auto !important;
				margin-right:		auto !important;	}

blockquote		{	padding:		15px;			}

}

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

{

.title-img		{	display:		none;			}
.title-img-mobile	{	display:		block;			}

}

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

{

/*main			{	padding:		0;			}
.content, article,
div[class|=home]	{	border-left:		0;
				border-right:		0;
				border-radius:		20px;			}
*/

.sidebar-left,
.sidebar-right		{	font-size:		13pt;
				padding:		15px 5px;
				min-width:		200px;			}

li .sidebar-left,
li .sidebar-right	{	margin-left:		-20px;			}

.sidebar-left::before,
.sidebar-right::before,
.sidebar-left::after,
.sidebar-right::after	{	font-size:		20pt;			}

}


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

{

.sidebar-left,
.sidebar-right		{	font-size:		12pt;			}

.sidebar-left::before,
.sidebar-right::before,
.sidebar-left::after,
.sidebar-right::after	{	font-size:		18pt;			}

.header-menu a		{	font-size:		11pt;			}

}