@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 {
	 /*font-family: "dapifer", Georgia, "Times New Roman", Times, serif;*/
	 background: url(../images/front/az_subtle.png);
	 margin: 0 auto;
	 padding: 0;
	 position: relative;
	 color: #040404;}
 
img {max-width: 100%;}
h1 {
	font-family: "postino-std", "Comic Sans MS", cursive; 
	font-weight: 400; 
	font-size: 96px; 
	font-size: 6rem; 
	margin-bottom: 0;
	margin-top: 2rem;}
p {margin: 0 0 0.5rem;}
/* =============================================================================
Begin MAIN NAV
   ========================================================================== */
.main-nav {display: flex; justify-content: space-between; font-size: 18px; font-size: 1.25rem; margin-top: 2rem;}   
/* =============================================================================
Begin MAIN CONTENT
   ========================================================================== */
.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;}}
.pinline-h2 {width: 50%; margin: 0 auto;}
.quote-text {
	width: 45%;
	font: 500 1.25rem/1.5 "dapifer", 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;
	text-indent: 0rem;}
/*.quote-text p {text-indent: 1rem;}*/
/*p:first-of-type {text-indent: 1rem;}*/

.hanging-punctuation-start {
	position: absolute;
	right: 100%;}
.quote-text-area h1 {
	text-align: center;
	/*color: #676F78;
	color: #7D8691;*/}
@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%}}
	
h2.pinline {
  text-align: center;
  display: block;
  overflow: hidden;
  font-size: 24px;
  font-size: 1.5rem;
  /*font-weight: 100;*/
  margin: 20px 0;
  font-family: "postino-std", "Comic Sans MS", cursive; 
  font-weight: 400;
  text-transform: uppercase;
}
h2.pinline span {
  position: relative;
  display: inline-block;
  line-height: 1;
}
h2.pinline span:before,
h2.pinline span:after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: #000;
  width: 99999px;
}
h2.pinline span:before {
  left: 100%;
  margin-left: 20px;
}
h2.pinline span:after {
  right: 100%;
  margin-right: 20px;
}

/* =============================================================================
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: #6C6C6C;
	text-decoration : none;
	transition: all 1s ease-in-out;}

.quote-text a:hover{ 
	color : #040404; 
	text-decoration : none;
	border-bottom: 1px dotted #040404;}
a+a {font-size: 12px; font-size: 1rem;}