@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/small-pages/whitediamond-black-48w3.png) repeat;}

* {-moz-box-sizing: border-box; box-sizing: border-box;}
 
 body {
	 margin: 0 auto;
	 padding: 0;
	 position: relative;
	 color: #040404;}
 
img {max-width: 100%;}
h1 {font-size: 64px; font-size: 4rem;}
p {position: relative;}
/* =============================================================================
Begin MAIN NAV
   ========================================================================== */
.main-nav>a {font-size: 16px; font-size: 1rem; border-bottom: none;}   
/* =============================================================================
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;}}

.chroma {
  font-family: "delittle-chromatic", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  position: relative;
  margin-bottom: 0;
}
.chroma h2 {font-family: "delittle-chromatic", "Palatino Linotype", "Book Antiqua", Palatino, serif;}
.chroma:before {
  color: rgba(255,255,255,.6);
  content: attr(data-content);
  display: block;
  font-family: "delittle-chromatic-inlay", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  position: absolute;
  text-shadow: none;
  width: 100%;}
.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: 600 20px/1.5 "chaparral-pro-caption", "sirba-web", Georgia, "Times New Roman", Times, serif;
	font: 600 1.25rem/1.5 "chaparral-pro-caption", "sirba-web", Georgia, "Times New Roman", Times, serif;
	margin: 2rem auto 0 auto;
	color: #BFBFBF;}
.quote-1st-letters, .hanging-punctuation-start {
	font-size: 48px;
	font-size: 3rem;
	line-height: .75;}
.hanging-punctuation-start {
	position: absolute;
	right: 100%;}
.quote-text-area h1 {
	text-align: center;
	color: #676F78;}
@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*/
.quote-text a, .quote-text a:visited {
	outline : none;
	color : #676F78;
	text-decoration : none;
	transition: all 1s ease-in-out;}
.quote-text a:hover{ 
	color : #D7E7F9; 
	text-decoration : none;
	border-bottom: 1px dotted #D7E7F9;}