@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 {margin: 0 auto; padding: 0; background: #000; color: #CCC;}
 
img {max-width: 100%;}
h1 {font-weight: 700; font-size: 64px; font-size: 4rem; margin-bottom: 0; text-indent: 4rem;}
h2 {margin: -2rem 0 0 28rem;}
p {-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	 -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
     -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
          font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
	}
/* =============================================================================
Begin PAGE HEADER
   ========================================================================== */	
.main-header {
	/*display: flex;
	justify-content: flex-start;
	align-items: baseline;*/
	/*height: 12rem;*/
	font: 700 16px/2 "clavo", Georgia, "Times New Roman", Times, serif;
	font: 700 1rem/2 "clavo", Georgia, "Times New Roman", Times, serif;
	color: #D9D9D9;} 
/* =============================================================================
Begin MAIN NAV
   ========================================================================== */
.main-nav>a {font-size: 16px; font-size: 1rem; border-bottom: none;}   
/* =============================================================================
Begin MAIN CONTENT
   ========================================================================== */

.main-content {margin-top: -4rem;}
	@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 {width: 32%; margin: 4rem;}
	
	@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 {
	font: 300 1.25rem/1.7 "prenton", "ratio", Tahoma, Geneva, sans-serif;
	text-align: justify;
	/*margin: 0 auto;*/}
.is-for {font-style: italic; letter-spacing: 2px;}
.quote-1st-letters, .hanging-punctuation-start {
	font-size: 64px;
	font-size: 4rem;
	line-height: .75;
	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%; margin-left: -4rem;}}
		
@media screen and (min-width: 1051px) and (max-width: 1450px) {
	.quote-text {width: 70%; margin-left: -4rem;}}
/* =============================================================================
Begin EXTRAS! EXTRAS! EXTRAS! 
   ========================================================================== */
/* LINKS */
/*Eric Meyer's recommended order - link-visited-focus-hover-active*/
a {
	outline : none;
	color : #676F78;
	text-decoration : none;
	transition: all .5s ease-in-out;}
a:hover{ 
	color : #D7E7F9; 
	text-decoration : none;
	border-bottom: 1px dotted #D7E7F9;}