@charset "utf-8";
/*
This CSS file belongs to - vertical-type-2AColor.html and it's by Eric Miner and The Miner Bits - eric@minerbits.com
*/

/* =============================================================================
Begin THE TOP OF THE TREE
   ========================================================================== */
html {font-size: 16px; background: #F7F9FF; height: 100%;}

* {box-sizing: border-box; }
 
body {
	font-family: "prenton", Arial, Helvetica, sans-serif; 
	color: #040404; 
	margin: 0 auto; 
	height: 100%;}

h1, h2, h3, h4, h5, h6 {}
h1 {}
h1 {
	display: flex; 
	flex-direction: column;
	align-items: center;
	font: 700 48px/1.6 "freight-micro-pro", Georgia, "Times New Roman", Times, serif;
	margin: 0;
	margin-top: 5rem;
	color: #f7f9ff;}
p {
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 1rem 0;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	-webkit-font-feature-settings: "kern" 1, "liga" 1;
    font-feature-settings: "kern" 1, "liga" 1;}
	
.quote-1st-letters {
    font-size: 3rem;
    line-height: 0.75;
	color: #C92C52; margin: 0;}
.hanging {display: inline-block; text-indent: -1.5rem}
.char4 {padding-bottom: 16px;}

.main-nav {display: flex; justify-content: space-between; font-size: 18px; font-size: 1.25rem; margin-top: 2rem;}

/* =============================================================================
Begin MAIN CONTENT
   ========================================================================== */
.main-content {
	width: 100%;
	margin: 0 auto;
	height: 100%;}


.vert-text-container {
	height: 100%;
	width: 90%;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	}
.heading-wrapper {
	width: 4rem; 
	margin-left: -12rem;
	background: #C92C52;}
@media only screen and (min-width: 750px) and (max-width: 800px) {.heading-wrapper {margin: 0 1rem 0 0;}}
	
.main-text {
	width: 37%; 
	align-self: center;
	text-align: justify;
	font-size: 18px;
	font-size: 1.25rem;
	margin-left: 3%;
	}
@media only screen and (min-width: 750px) and (max-width: 800px) {.main-text {width: 80%;}}	
@media only screen and (min-width: 801px) and (max-width: 1050px) {.main-text {width: 60%;}}
@media only screen and (min-width: 1051px) and (max-width: 1460px){.main-text {width: 48%;}}
@media only screen and (min-width: 1461px) and (max-width: 1681px){.main-text {width: 40%;}}

span[class*="char"] {margin-bottom: -.75rem;}

/* =============================================================================
Begin EXTRAS! EXTRAS! EXTRAS! 
   ========================================================================== */
/*BEGIN Links Styling*/
a, a:visited {
	outline : none;
	color: #6C6C6C;
	text-decoration : none;
	border-bottom: 1px dotted #6C6C6C;}

a:hover{ 
	color : #040404;
	text-decoration : none;
	border-bottom: 1px dotted #040404;}