/* --- GENERAL: --- */
html			{	-webkit-text-size-adjust: 100%;				}

body 			{	margin:			0;
				padding:		0;
				font-family:		arial, helvetica, sans-serif;
				font-size:		12pt;
				background-color:	hsl(33, 50%, 96%);		}

div			{	box-sizing:		border-box;			}

iframe			{	border-width:		0px;				}

a 			{	text-decoration:	none;				}
a:link			{	color:			hsl(206, 70%, 48%);		}
a:visited		{	color:			hsl(206, 85%, 35%);		}
a img			{	border:			0;				}

td			{	line-height:		1.5;				}

p			{	margin:			18pt auto;
				overflow:		auto;
				overflow-wrap:		break-word;			}

ul			{	padding-left:		18px;				}

ol			{	padding-left:		30px;				}

li			{	margin:			10px 0;				}

sup			{	line-height:		12pt;				}

form			{	margin:			0;				}

button			{	font-family:		arial, helvetica, sans-serif;	}

::placeholder		{ 	color:			hsl(0, 0%, 67%); 
				opacity:		1;				}

hr			{	border:			0;
				border-top:		3px solid hsl(212, 100%, 28%);
				margin:			50px 0;				}

blockquote		{	background-color:	hsl(20, 13%, 97%);
				margin:			50px calc(10% - 30px);
				padding:		20px;
				border-radius:		15px;
				text-align:		left;
				clear:			both;
				overflow:		auto;				}


/* --- CONTENT: --- */

main			{	display:		block;
				text-align: 		center;
				max-width:		932px;
				width:			932px;
				min-width:		320px;
				margin:			0 auto;
				padding:		0 10px;
				box-sizing:		border-box;
				line-height: 		1.5;				}

.content		{	text-align:		center;				}

.content, article	{	background-color:	white;
				max-width:		922px;
				margin:			0 auto;
				padding:		15px 15px 50px;
				border:			3px solid hsl(212, 100%, 28%);
				border-radius:		15px;
				box-sizing:		border-box;
				overflow:		auto;				}

/* Topic indexes */

.topic-header		{	font-size:		15pt;
				font-weight:		bold;
				background-color:	hsl(45, 90%, 75%);
				width:			90%;
				margin:			25px auto;
				padding:		10px;
				border-radius:		12px;
				box-sizing:		border-box;			}

.article-topics		{	max-width:		640px;
				margin:			0 auto;
				text-align:		center;				}

.article-topics
.topic-header		{	width:			100%;
				margin:			20px auto;			}

ul.topic-list		{	padding-left:		0;
				margin:			5px auto 40px;
				column-count:		2;
				column-width:		260px;				}

.topic-list li		{	display:		block;
				margin:			0px;
				padding:		10px 0px;			}

.topic-list li a	{	display:		block;
				width:			220px;
				margin:			2px auto;
				padding:		8px 12px;;
				background-color:	hsl(212, 50%, 43%);
				font-size:		14pt;
				text-align:		left;
				color:			white;
				border-radius:		12px;
				box-sizing:		border-box;
				border:			2px solid transparent;
				break-inside: 		avoid-column;			}

/* Article lists */

.article-list		{	text-align:		left;
				display:		table;
				margin:			0 auto;
				padding:		5px;
				max-width:		650px;				}

.article-list li	{	display:		block;
				margin:			0 0 20px;			}

.article-list li ul	{	margin:			16px 0 23px;			}

.article-list li a	{	font-weight:		bold;
				font-size:		13pt;				}


/* Articles */

article 		{	padding:		15px 10% 50px;	/* legacy compatibility */
				padding:		15px calc(17% - 38px) 50px;
				text-align:		left;				}

h1			{	font-size:		22pt;
				font-weight:		normal;
				line-height:		1.25;
				text-align:		center;
				margin:			50px auto 75px;			}

.subtitle		{	font-size:		18pt;
				font-weight:		normal;
				margin:			10px auto;
				line-height:		1.15;
				text-align:		center;
				display:		block;				}

.byline			{	text-align:		center;
				font-size:		13pt;
				font-weight:		bold;
				line-height:		1.3;
				margin:			-50px auto 50px;		}

h2			{	font-size:		17pt;
				font-weight:		normal;
				line-height:		1.2;
				margin:			20px 0;				}

h3			{	font-size:		14pt;
				font-weight:		bold;
				line-height:		1.25;
				margin:			10px 0;
				color:			hsl(0, 0%, 20%);		}
				
h4			{	font-size:		14pt;
				font-weight:		normal;
				line-height:		1.25;
				margin:			10px 0;				}

h5			{	font-size:		12pt;
				font-weight:		bold;
				line-height:		1.3;
				margin:			10px 0;
				color: 			hsl(0, 0%, 20%);		}

h6			{	font-size:		12pt;
				font-weight:		normal;
				line-height:		1.4;
				margin:			10px 0;
				text-decoration:	underline;			}

.article-number		{	font-size:		32pt;
				float:			left;
				line-height:		1;
				padding-right:		10px;
				color:			hsl(212, 50%, 30%)			}

/* sidebars */

.sidebar-left,
.sidebar-right		{	display:		inline-block;
				text-align:		center;
				white-space:		nowrap;
				color:			hsl(212, 70%, 35%);
				background-color:	hsl(47, 53%, 97%);
				font-size:		16pt;
				font-style:		italic;
				max-width:		380px;
				min-width:		300px;
				padding:		20px 15px;
				box-shadow: 		5px 5px 15px hsl(0, 0%, 63%);
				box-sizing:		border-box;
				overflow:		hidden;				}

.sidebar-left		{	float:			left;
				margin:			20px 50px 40px -60px;
				transform:		rotate(-2deg);			}
				
.sidebar-right		{	float:			right;
				margin:			20px -60px 40px 40px;
				transform:		rotate(2deg);			}

.sidebar-left::before,
.sidebar-right::before	{	content:		"\“";
				position:		relative;
				left:			-1px;
				top:			-2px;				}
.sidebar-left::after,
.sidebar-right::after	{	content:		"\”";
				position:		relative;
				left:			-2px;
				top:			-1px;				}

.sidebar-left::before,
.sidebar-left::after,
.sidebar-right::before,
.sidebar-right::after	{	font-family:		serif;
				font-weight:		bold;
				color:			hsl(212, 50%, 70%);
				font-size:		24pt;
				line-height:		10pt;
				vertical-align:		sub;				}

p.wrap			{	overflow:		visible;			}

/* tables */

.article-table		{	border:			2px solid hsl(208, 30%, 75%);
				border-collapse:	collapse;
				margin:			30px auto;			}

.article-table td,
.article-table th	{	border:			2px solid hsl(208, 30%, 75%);
				padding:		10px;
				vertical-align:		top;				}

.article-table th	{	font-weight:		bold;				}

.article-nav		{	width:			260px;
				margin:			50px auto 0;
				text-align:		center;				}

.article-nav-wide,
.article-nav-thin,
.article-nav-narrow	{	display:		block;
				width:			240px;
				height:			50px;
				line-height:		50px;
				text-align:		center;
				margin:			10px;
				background-color:	hsl(212, 40%, 40%);
				color:			white !important;
				border-radius:		5px;				}

.article-nav-thin	{	height:			40px;
				line-height:		40px;
				background-color:	hsl(212, 40%, 55%);		}

.article-nav-narrow	{	display:		inline-block;
				width:			110px;
				height:			40px;
				line-height:		40px;
				background-color:	hsl(212, 40%, 55%);		}

/* topic links */

.reco			{	text-align:		center;
				margin:			50px auto;			}

.reco img		{	margin:			5px auto;
				max-height:		180px;
				max-width:		160px;				}

.reco a			{	font-weight:		bold;				}

.topic-tags		{	display:		table;
				list-style-type:	none;
				margin:			50px auto 0;
				padding:		0;
				text-align:		center;				}

.topic-tags li		{	display:		inline-block;
				margin:			8px;				}

.topic-tags a		{	display:		inline-block;
				font-size:		11pt;
				color:			white !important;
				background-color:	hsl(212, 45%, 50%);
				padding:		4px 12px;
				border-radius:		10px;
				vertical-align:		middle;				}

.section-link		{	font-size:		14pt;
				font-weight:		bold;
				text-align:		center;
				display:		block;
				max-width:		300px;
				margin:			50px auto 0;
				padding:		10px;
				border:			2px solid hsl(212, 45%, 50%);
				border-radius:		5px;				}

.section-link ~
.section-link		{	margin:			20px auto 0;			}

/* Shop Buttons */

.add-to-cart		{	background-color:	hsl(0, 47%, 47%);
				color:			white;
				font-size:		12pt;
				margin:			0 0 15px;
				padding:		6px 16px;
				border:			none;
				border-radius:		20px;
				cursor:			pointer;			}

.shop-nav-button	{	display:		inline-block;
				background-color:	hsl(212, 100%, 30%);
				color:			white !important;
				margin:			20px;
				padding:		5px 16px;
				border-radius:		20px;				}

/* Media Lists */

.media-list		{	padding:		0;				}

.media-list li		{	display:		inline-block;
				vertical-align:		top;
				text-align:		center;
				margin:			22px;				}

.media-list img		{	width:			150px;
				max-width:		90%;
				height:			auto;
				margin:			5px;
				vertical-align:		top;				}

.media-list img,
.book-cover		{	box-shadow: 		0px 0px 20px hsl(0, 0%, 80%);	}



/* --- HEADER: --- */

header			{	text-align: 		center;
				width: 			932px;
				max-width:		932px;
				min-width:		320px;
				margin:			0 auto;
				padding:		5px;
				display:		flex;
				flex-wrap:		wrap;
				justify-content:	space-between;
				align-items:		center;
				box-sizing:		border-box;			}

/* Title bar */

.logo			{	width:			50px;
				display:		inline-block;			}
				
.logo-img		{	width:			30px;
				height:			54px;
				display:		block;
				margin:			0 auto;
				transition:		transform .5s;			}

.title			{	margin:			0 30px 0 20px;
				display:		inline-block;			}
				
.title-img		{	width: 			420px;
			 	max-width:		420px;
			 	height:			auto;
			 	margin:			2px auto 0;
			 	display:		block;				}

.title-img-mobile	{	width:			170px;
				margin:			5px auto 0;
				display:		none;				}

.search			{	width:			50px;
				margin-left:		15px;
				display:		inline-block;			}

.shop-page .search	{	display:		none;				}

.search-img		{	width:			32px;
				height:			32px;
				display:		block;
				margin:			0 auto;
				transition:		width .1s, height .1s;		}

.cart			{	width:			50px;
				margin-left:		15px;
				display:		none;				}
.shop-page .cart	{	display:		inline-block;			}

.cart-img		{	width:			32px;
				height:			31px;
				display:		block;
				margin:			0 auto;
				transition:		width .1s, height .1s;		}


/* Menu bar */

nav			{	display:		inline-block;
				justify-content:	center;
				align-items:		center;
				margin:			5px auto;
				flex-grow:		1;				}

nav ul			{	display:		flex;
				margin:			0;
				padding:		0;
				justify-content:	center;
				align-items:		center;
				flex-grow:		1;
				list-style-type:	none;				}



nav li			{	display:		inline-block;
				flex-grow:		1;
				margin:			5px;				}
@media only screen {

nav li			{	display:		flex;				}

}

nav a			{	flex-grow:		1;
				height:			30px;
				line-height:		25px;
				padding:		0px 5px;
				background-color:	white;
				color:			black !important;
				border:			2.5px solid transparent;
				border-radius:		15px;
				font-size:		12pt;
				font-weight:		bold;
				text-decoration:	none;
				text-align:		center;
				display:		inline-block;
				box-sizing:		border-box;			}



/* Section colors */

.shop-page .content,
.shop-page article,
.shop-page hr		{	border-color:		hsl(355, 40%, 50%);		}
a.shop-button		{	border-color:		hsl(355, 45%, 50%);		}
.shop-page
a.shop-button		{	background-color:	hsl(355, 45%, 50%);	
				color:			white !important;		}

.articles-page .content,
.articles-page article,
.articles-page hr	{	border-color:		hsl(212, 40%, 40%);		}
a.articles-button	{	border-color:		hsl(212, 50%, 40%);		}
.articles-page
a.articles-button	{	background-color:	hsl(212, 50%, 40%);
				color:			white !important;		}

.books-page .content,
.books-page article,
.books-page hr		{	border-color:		hsl(155, 25%, 35%);		}
a.books-button		{	border-color:		hsl(155, 35%, 35%);		}
.books-page
a.books-button		{	background-color:	hsl(155, 35%, 35%);
				color:			white !important;		}

.gallery-page .content,
.gallery-page article,
.gallery-page hr	{	border-color:		hsl(40, 75%, 55%);		}
a.art-button		{	border-color:		hsl(40, 80%, 55%);		}
.gallery-page
a.art-button		{	background-color:	hsl(40, 85%, 55%);
				color:			white !important;		}

.counseling-page .content,
.counseling-page article,
.counseling-page hr	{	border-color:		hsl(310, 20%, 40%);		}

.donate-page .content,
.donate-page article,
.donate-page hr		{	border-color:		hsl(40, 75%, 75%);		}

.general-page .content,
.general-page article,
.general-page hr	{	border-color:		hsl(212, 35%, 50%);		}


/* --- FOOTER: --- */

footer			{	width: 			932px;
				max-width:		932px;
				min-width:		320px;
				margin:			0 auto;
				text-align: 		center;
				clear:			both;
				box-sizing:		border-box;			}

.footer-links 		{	margin:			30px auto;
				text-align:		center;
				max-width:		700px;				}

.footer-links a		{	display:		inline-block;
				margin:			5px;				}

.footer-links img	{	width:			300px;
				height:			100px;				}

.footer-menu		{	display:		inline-block;
				margin:			0;
				padding:		0;				}

.footer-menu li		 {	display:		inline-block;
				margin:			5px;
				padding:		0;				}

.footer-menu li:nth-child(3),
.footer-menu li:nth-child(4)	{	display:	none;	}

.footer-menu a		{	height:			30px;
				line-height:		25px;
				margin:			0;
				padding:		0 10px;
				border-radius:		15px;
				font-size:		12pt;
				font-weight:		bold;
				text-decoration:	none;
				text-align:		center;
				display:		inline-block;
				border:			2.5px solid hsl(212, 35%, 50%);
				background-color:	white;
				color:			black !important;
				box-sizing:		border-box;			}

.footer-slogan		{	font-size:		20pt;
				margin:			40px 10px;			}

.footer-donate		{	font-size:		16pt;
				margin:			40px 10px;			}

.footer-copyright	{	font-size:		9pt;
				color:			hsl(0, 0%, 25%);
				margin:			50px 10px 10px;			}


/* --- CUSTOM STYLES: --- */

.center			{	text-align:		center;
				margin-left:		auto;
				margin-right:		auto;
				display:		block;				}

.nobr			{	white-space:		nowrap;				}

.float-left,
.float-left-large,
.float-left-small	{	float:			left;
				margin:			5px 15px 10px 1px;		}

.center-link		{	display:		table;
				margin:			20px auto;
				font-size:		16pt;				}

.short-quote		{	text-align:		center;
				max-width:		500px;
				margin:			30px auto;			}

.link-list		{	padding:		0;				}

.link-list li		{	display:		inline-block;
				margin:			10px 15px;
				font-weight:		bold;				}


/* --- HOVER/TAP EFFECTS: --- */

@media only screen and (min-width: 1024px), (any-hover: hover) {

a:hover			{	color:			hsl(0, 60%, 50%);		}

.section-link:hover,
.section-nav-link:hover	{	border-color:		hsl(0, 60%, 50%);		}

.article-nav-wide:hover,
.article-nav-thin:hover,
.article-nav-narrow:hover {	background-color:	hsl(0, 50%, 50%);		}


.logo-img:hover		{	transform:		rotate(-8deg);			}

.title-img:hover	{	filter:			saturate(1.2);			}

.search-img:hover	{	width:			36px;
				height:			36px;				}

.cart-img:hover		{	width:			36px;
				height:			35px;				}

nav a:hover, .footer-menu li a:hover, .topic-list li a:hover, .topic-tags li a:hover,
.home-shop h2 a:hover, .home-articles h2 a:hover, .shop-nav-button:hover,
.add-to-cart:hover	{	box-shadow:		0 0 10px hsl(50, 100%, 65%);	}

}

@media (hover: none) {

a, input		{	-webkit-tap-highlight-color: transparent;		}

a:active		{	color:			hsl(0, 60%, 50%);		}

.section-link:active,
.section-nav-link:active{	border-color:		hsl(0, 60%, 50%);		}

.article-nav-wide:active,
.article-nav-thin:active,
.article-nav-narrow:active {	background-color:	hsl(0, 50%, 50%);		}


.logo-img:active	{	transform:		rotate(-8deg);			}

.title-img-mobile:active,
.title-img:active	{	filter:			saturate(1.2);			}

.search-img:active	{	width:			36px;
				height:			36px;				}

.cart-img:active	{	width:			36px;
				height:			35px;				}

nav a:active, .footer-menu li a:active, .topic-list li a:active, .topic-tags li a:active,
.home-shop h2 a:active, .home-articles h2 a:active, .shop-nav-button:active,
.add-to-cart:active	{	box-shadow:		0 0 10px hsl(50, 100%, 65%);	}

}