@charset "utf-8";
/* CSS Document */

/*
This CSS file belongs to - chuck-close-quote.html and it's by Eric Miner and The Miner Bits - eric@minerbits.com
It's a "working" index page of The Miner Bits" designed as a list of pages that have been completed or are almost there. Once the homepage is finalized it will replace this page.
*/
/* Code for Hanging Puncuation - Sample Uses Opening Quotation Mark.
<span class="hanging-punctuation-start">&#8220;</span>
.hanging-punctuation-start {position: absolute; right: 100%;}
*/
/* =============================================================================
Begin THE TOP OF THE TREE
   ========================================================================== */
html {font-size: 16px; /*background: url(../images/front/whitediamond-black-48w3.png) repeat;*/ /*background: #000*/;}

* {-moz-box-sizing: border-box; box-sizing: border-box;}
 
 body {
	 /*background: url(../images/small-pages/paper_fibers-2A.jpg) repeat;*/
	 background: #EBECE7;
	 margin: 0 auto;
	 padding: 0;
	 position: relative;
	 color: #040404;}

img {max-width: 100%;}
h1 {
	font-family: "double-pica", "Palatino Linotype", "Book Antiqua", Palatino, serif; 
	font-size: 64px; 
	font-size: 4rem;}
p {margin: 0 0 0.5rem;}
/* =============================================================================
Begin MAIN NAV
   ========================================================================== */
.main-nav {font-family: "de-walpergens-pica-sc", "Palatino Linotype", "Book Antiqua", Palatino, serif; display: flex; justify-content: space-between; font-size: 20px; margin-top: 2rem;}
/* =============================================================================
Begin MAIN CONTENT
   ========================================================================== */

.main-content {margin: 0 auto;}
	@media only screen and (max-width: 1550px) and (min-width: 801px){
		.main-content  {width: 88%;}}
		
	@media only screen and (max-width: 800px) and (min-width: 700px){
		.main-content {
			width: 90%;
			padding: 1rem 5rem;}}

.quote-text-area {
	padding: 0 14rem;}
	
	@media only screen and (min-width: 750px) and (max-width: 1550px) {
		.quote-text-area {
			width: 100%;
			padding: 4rem;}}
	@media only screen and (min-width: 1551px) and (max-width: 1690px) {
		.quote-text-area {padding: 4rem 8rem;}}

.quote-text {
	width: 45%;
	font: 400 24px/1.5 "double-pica", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font: 400 1.5rem/1.5 "de-walpergens-pica", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	margin: 2rem auto 0 auto;}
.quote-1st-letters, .hanging-punctuation-start {
	font-size: 48px;
	font-size: 3rem;
	line-height: .75;
	text-indent: 1rem;}
p:first-line {font-family: "de-walpergens-pica-sc", "Palatino Linotype", "Book Antiqua", Palatino, serif;}
p:first-of-type {text-indent: 1rem;}

.hanging-punctuation-start {
	position: absolute;
	right: 100%;}
.quote-text-area h1 {text-align: center;}
@media screen and (min-width: 800px) and (max-width: 1050px) {
	.quote-text-area h1 {
		font-size: 3.3rem;
		margin-top: 0;}
	.quote-text-area {margin-top:0;}
	.quote-text {width: 84%;}}
		
@media screen and (min-width: 1051px) and (max-width: 1450px) {
	.quote-text {width: 70%}}
/* =============================================================================
Begin EXTRAS! EXTRAS! EXTRAS! 
   ========================================================================== */
/* LINKS */
/*Eric Meyer's recommended order - link-visited-focus-hover-active*/
a {
	outline : none;
	color: #6C6C6C;
	/*text-decoration : none;*/
	/*transition: all 1s ease-in-out;*/}

a:hover{ 
	color : #040404; 
	text-decoration : none;
	border-bottom: 1px dotted #040404;
	transition: all 1s ease-in-out;}
/*a+a {font-size: 12px; font-size: 1rem;}*/