@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;
	 position: relative;
	 color: #040404;}
 
img {max-width: 100%;}
h1 {
	font: 900 192px/1 "myriad-pro-semi-condensed", Arial, Helvetica, sans-serif; 
	font: 900 12rem/1 "myriad-pro-semi-condensed", Arial, Helvetica, sans-serif; 
	margin:0; 
	text-align: center;}
h2 {
	font: 700 24pxrem/1.75 "myriad-pro-semi-condensed", Arial, Helvetica, sans-serif; 
	font: 700 1.5rem/1.75 "myriad-pro-semi-condensed", Arial, Helvetica, sans-serif;
	margin: 0 18rem 0 0;
	text-align: right;}
p {
	margin-bottom: .75rem;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;}

/*BEGIN HEADER*/

header {height: 10.75rem;}
.top-half {position: relative;
	height: 7rem;
	background: #000;
	color: #FFF;
	overflow: hidden;}
.bottom-half {position: relative; z-index: -1;
	top: -7.1rem;
	height: 12rem;
	background: #FFF;
	color: #040404;}
.top-half h1 {text-shadow: 0.5rem 0.5rem 0 #707070, 0.75rem 0.75rem 0 #505050;}
.bottom-half h1 {text-shadow: 0.5rem 0.5rem 0 #707070, 0.75rem 0.75rem 0 #505050;}
/* =============================================================================
Begin MAIN NAV
   ========================================================================== */
.main-nav {display: flex; justify-content: space-between; 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;}}

.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: 42%;
	font: 400 1.5rem/1.5 "kinesis-pro-3", Georgia, "Times New Roman", Times, serif;
	margin: 2rem auto 0 auto;
	text-align: justify;}
.quote-1st-letters, .hanging-punctuation-start {
	font-size: 48px;
	font-size: 3rem;
	line-height: .75;
	text-indent: 0rem;}
.hanging-punctuation-start {
	position: absolute;
	right: 100%;}
@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%}}
@media screen and (min-width: 800px) and (max-width: 1050px) {
	.quote-text {width: 88%}}
	
h2.pinline {
  text-align: center;
  display: block;
  overflow: hidden;
  font-size: 2rem;
  margin: 20px 0;
  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;}