@charset "utf-8";
/*
This CSS file belongs to - page-name and it's by Eric Miner and The Miner Bits - eric@minerbits.com
*/

/* =============================================================================
Begin THE TOP OF THE TREE
   ========================================================================== */
html {font-size: 16px;}

* {
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
	}
 
 body {
	 margin: 0 auto;
	 padding: 0;
	 position: relative;
	 background: #000;
	 color: #56443B;}
 
 
 #container {
	 width: 100%;
	 margin: 0 auto;
	 position: relative; 
}

.group:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
	
img {
	max-width: 100%;
	border-radius: .25rem;
	border: none;
	}

h1, h2, h3, h4, h5, h6 {
	position: relative;
	font-weight: 400;
	}
h1 {
	font-size: 48px;
	font-size: 3rem;} 
.h-one-header {
	font-size: 80px;
	font-size: 5rem;}
   .h-one-A {
	font-size: 80px;
	font-size: 5rem;
	margin-top: -1rem;
	}
h2 {
	font-size: 32px;
	font-size: 2rem;}
.h-two-header {
   font-size: 56px; /*workaround for IE9&10 REM (IE bug id 772679)*/
   font-size: 3.5rem;}
.h-two-A {
   font-size: 40px; /*workaround for IE9&10 REM (IE bug id 772679)*/
   font-size: 2.5rem;
   margin-top: 1rem;
   }
h3 {
	font-size: 24px; /*workaround for IE9&10 REM (IE bug id 772679)*/
	font-size: 1.5rem;}
h1, h2, h3, a {
  -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;}
p {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
  -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;}
.h-three {
   font-size: 40px; /*workaround for IE9&10 REM (IE bug id 772679)*/
   font-size: 2.5rem;}

h2, h3 {font-family: "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;}

p {margin: 1.5rem 0 2rem;}
@media screen and (max-width: 1050px) {p {padding: 0 6rem;}}	
@media screen and (max-width: 1441px) {p {padding: 0 6rem;}}	

cite {
	position: relative;
	font-size: 13px;
	font-size: .8rem;
	text-align: left;
	padding-left: 2rem;}
.not-cite {
	font-size: 13px;
	font-size: .8rem;}
ul {
	width: 100%;
	position: relative;
	margin: 0 auto;}		
li {
	list-style: none;
	padding: 1rem 12rem 0;}
@media screen and (max-width: 1441px) {li {padding: 0 6rem;}}

@media screen and (max-width: 1050px) {li {padding: 0 6rem;}}

.center-image {
	display: block;
    margin: 0 auto;
    position: relative;}
	
.small-header-font {
	font-size: 16px;
	font-size: 1rem;}
.small-word {
	font-size: 16px;
	font-size: 1rem;}

.image-at-95pcnt {max-width: 95%;}

@media screen and (max-width: 1441px) {.image-at-95pcnt-rwd {max-width: 95%;}}
/* =============================================================================
Begin PAGE HEADER
   ========================================================================== */
.head-nav {
	width: 60%;
	margin: 0 auto;
	border-left: .75rem double #FAF4E8;
	border-right: .75rem double #FAF4E8;}

.page-header {
	width: 100%; 
	height: 12rem;
	position: relative;
	background: url(../images/stereo/header-bg-4images-1.png) repeat; 
	font: 16px/1.5 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font: 1rem/1.5 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #594639;
	text-align: center;
	padding-top: 1.5rem;}
  
  @media screen and (max-width: 1441px) {
	 .page-header {
		 font-size: 40px;
		 font-size: 2.5rem;
		 padding-top: 1.5rem;}}
 .page-header 
	
.page-header h1{
	margin: 0 auto;
	padding-top: 1.5rem;
	-webkit-text-stroke: 1px #E3E6E5;}

 @media screen and (max-width: 1441px) {
	 .page-header h1 {margin: 0;}}

.page-header-small-text {
   position: relative;
   font-size: 24px;
   font-size: 1.5rem; 
   z-index: 3;}
 
  @media screen and (max-width: 1441px) {
	 .page-header {
		 font-size: 40px;
		 font-size: 2.5rem;
		 padding-top: 1.5rem;}}
  
.page-header h1{padding-top: 1.5rem;}


/* =============================================================================
Begin MAIN NAV
   ========================================================================== */
.main-nav {
	display: flex;
	justify-content: center;
	height: 2.75rem;
	font: 400 24px/0 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font: 400 1.5rem/0 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #E8CDAF;   
	background: #BF4F45; 
	border-bottom: 6px double #FAF4E8;}
.main-nav a {
	margin: auto;
	padding-top: 2rem;
	}	
/* ============================================================================================================================================
Begin MAIN CONTENT
   ========================================================================== */
.main-content {
	font: 16px/1.5 "abril-text", Georgia, "Times New Roman", Times, serif;
	font: 1rem/1.5 "abril-text", Georgia, "Times New Roman", Times, serif;
	}
.wrapper-1 {background: #FAF4E8;}

.wrapper-2 {
	background: #F0EBDF;
	border-top: .75rem double #FAF4E8;
	border-bottom: .75rem double #FAF4E8;}
.head-wrap {border-top: none;}
.intro {
	width: 60%;
	position: relative;
	padding: 2rem 0;
	margin: 0 auto;
	background: #F0EBDF;
	border-left: .75rem double #FAF4E8;
	border-right: .75rem double #FAF4E8;
	color: #56443B;}
	
	@media screen and (max-width: 1050px) {.intro {width: 70%;}}
h6 {
	font: 700 28px/1 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif; /*workaround for IE9&10 REM (IE bug id 772679)*/
	font: 700 1.75rem/1 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #3C3029;
	text-align: center;	}
.intro-wrapper {
	width: 80%;
	margin: 0 auto;}

@media screen and (max-width: 1441px) {
	.intro-wrapper {
	width: 90%;
	margin: 0 auto;}}
.intro-wrapper p {
	width: 80%;
	font: 16px/1.5 "abril-text", Georgia, "Times New Roman", Times, serif;
	font: 1rem/1.5 "abril-text", Georgia, "Times New Roman", Times, serif;
	padding: 0 4rem;
	margin: 0 auto;}
@media screen and (max-width: 1050px) {
	.intro-wrapper p {width: 100%;}}
	
@media screen and (max-width: 1441px) {
	.intro-wrapper p {width: 95%;}}
	
.intro-wrapper ul {
	width: 95%;
	margin-top: 2rem;
	}
@media screen and (min-width: 1020px) and (max-width: 1441px) {
	.intro-wrapper ul {
	width: 95%;
	margin-top: 2rem;
	margin-left: 0;
	}}
@media screen and (max-width: 1050px) {
	.intro-wrapper li {
		width: 100%;
		padding: 0 4rem;
		}}
@media screen and (max-width: 1441px) {
	.intro-wrapper li {
	width: 90%;
	list-style: none;
	padding: 0 2rem;
	margin: 0 auto;
	margin-bottom: 1.5rem;
	}}	
.intro-wrapper p:first-letter {
	font-size: 64px;
	font-size: 4em;
	line-height: 1em;
	font-weight: 400;
	float: left;
	margin: 0 0 0 -0.1em;
	}
.intro-wrapper p +.intro p:first-letter {
	font-size: 1em;
	line-height: 1.5em;
	float: none;
	margin: 0;
	}
.intro-wrapper p +.intro p:first-line {
	font-weight: 400;
	font-variant: normal;
	}

.intro-wrapper span {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 700;
	}
.intro-wrapper h6 {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 1rem 0;
	}
.gallery {
	width: 60%;
	position: relative;
	padding: 2rem 0;
	color: #56443B;
	margin: 0 auto;
	}
@media screen and (max-width: 1050px) {
	.gallery {
	width: 70%;}}
		
/*@media screen and (max-width: 1441px) {
	.gallery {height: 68rem;}}*/
	
.gallery h2, h3 {text-align: center;}

.gallery-1 {
	background: #FAF4E8;
	border-left: .75rem double #F0EBDF;
	border-right: .75rem double #F0EBDF;
	}
.gallery-2 {
	background: #F0EBDF;
	border-left: .75rem double #FAF4E8;
	border-right: .75rem double #FAF4E8;
	}
	
.thumb-box-frame {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 80%;
	margin: auto;	}	

@media screen and (max-width: 1441px) {
	.thumb-box-frame {
	width: 90%;
	}}
.gallery-rows {}

.thumb-box h4 {
	font-size: 16px;
	font-size: 1rem;
	text-align: center;
	margin: 1rem 0 0 0;
	margin: 0 auto;
	color: #56443B;}

/* =============================================================================
Gallery Images
   ========================================================================== */
/*Note - Use #E5E1D5 for darker thum-box - use #FAF4E8 for lighter thumbs-box*/
/*.gallery-1>.thumb-box-frame>.thumb-box {background: white;} This works! */
.thumb-box {
	width: 11.875rem;
	display: inline-block;
	position: relative;
	margin: 1rem;
	padding: 1rem 1rem 2rem 1rem;
	background: #DCD7CA; 
	color: #827362; 
	border: 4px double #CFCBC0;  
	border-radius: 8px;
	text-align: center;
	font-family: "ff-tisa-web-pro", Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-size: 1rem;}
@media screen and (max-width: 1050px) {
	.thumb-box {
		padding: 1rem 1.5rem;
		}}	
@media screen and (max-width: 1441px) {
	.thumb-box {
		padding: 1rem 1.4rem;
		}}

/* =============================================================================
Begin PAGE FOOTER
   ========================================================================== */
.foot-wrap {border-bottom: none;}
.page-footer {
	height: 8rem;
	display: flex;
	justify-content: center;
	font: 16px/1.5 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font: 1rem/1.5 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	background: #FAF4E8;
	border-left: .75rem double #F0EBDF;
	border-right: .75rem double #F0EBDF;}
.page-footer a {
	margin: auto;
	font-size: 24px;
	font-size: 1.5rem;
	color: #56443B;}
.page-footer a:hover {
	text-decoration: underline;
	color: #56443B;}
/* =============================================================================
Begin EXTRAS! EXTRAS! EXTRAS! 
   ========================================================================== */
/* Andy Clarke's LINKS Treatment with modifications by Eric Miner */
a, a:visited {
outline : none;
text-decoration : underline;
}
 
a:hover { 
transition: all 0.5s ease-in-out; 
color : rgba(0,0,0, .4); 
text-decoration : underline; }
 
a:active, a:focus { 
position : relative; 
color : #000; }

a.action {
padding : .5em 20px;
background-color : rgb(143,58,58); 
color : rgb(255,255,255);
text-shadow : 0 1px 1px rgb(0,0,0); }

a.action:hover {
background-color : rgb(119,48,48); 
text-decoration : none; }

a.action:active,
a.action:focus {
background-color : rgb(44,18,18); 
color : rgb(255,255,255); 
text-decoration : none; }
/*End of Andy's Links*/

.main-nav a, .main-nav a:visited {
  outline : none;
  color : #E8CDAF;
  text-decoration : none;
  margin-top: -1rem;
}
.main-nav a:hover {
  color: #FDF4D4; 
  text-decoration :underline;
 /* border-bottom: 1px dotted #FDF4D4;*/
   } 
.main-nav a:active, .main-nav a:focus { 
  position : relative; 
  top : 2px; 
  }

.main-nav a.action {
  padding : .5em 20px;
  background-color : rgb(143,58,58); 
  font-size: 14px; /*workaround for IE9&10 REM (IE bug id 772679)*/
  font-size : .875em;  
  text-shadow : 0 1px 1px rgb(0,0,0); 
}

.main-nav a.action:hover {
  background-color : rgb(119,48,48); 
  text-decoration : underline; 
}

.main-nav a.action:active, .main-nav a.action:focus {
  background-color : rgb(44,18,18); 
  text-decoration : underline;
}

.intro a {
	font-size: 20px; /*workaround for IE9&10 REM (IE bug id 772679)*/
	font-size: 1.25rem;
	color: #56443B;}
	
.intro-wrapper a {
	font-size: 24px; /*workaround for IE9&10 REM (IE bug id 772679)*/
	font-size: 1.5rem;
	font-weight: 700;
    }
.intro-wrapper a:hover {text-decoration: none;}


/*Links in Introduction & Image Descriptions*/
.intro a, .intro a:visited{
outline : none;
color : #3C3029; 
text-decoration : underline;
font-weight: 400;
}

.tooltip a:hover { 
text-decoration: underline;}

.tooltip-container {
	position:relative;	/* Forces tooltip to be relative to the element, not the page */
	cursor:help;		/* Makes your cursor have the help symbol */
	text-align: center;
    }

.tooltip-container:hover .tooltip, a:hover .tooltip {
	/* Makes the Tooltip slightly transparent, Lets the barely see though it */
	opacity:1;
	/* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}

 
hr.stereo-colors {
	width: 90%; 
	border: 0; 
	border-bottom: 2px dashed #BFB8A4; 
	background: #FAF4E8;
	width: 90%; 
	margin: 0 auto;  
	margin-bottom: -.2rem; 
	margin-top: 2px;
	}

/*Links in Introduction & Image Descriptions*/
.tooltip a, .tooltip a:visited, .intro a, .intro a:visited{
outline : none;
color : #3C3029;
color: #56443B; 
text-decoration : underline;
font-weight: 400;
}

.tooltip a:hover { 
text-decoration: underline;}

.tooltip-container {
	position:relative;	/* Forces tooltip to be relative to the element, not the page */
	cursor:help;		/* Makes your cursor have the help symbol */
	font-size: 12px; /*workaround for IE9&10 REM (IE bug id 772679)*/
	font-size: .75rem;
    }

.tooltip {
	display:block;
	position:absolute;
	z-index: 1;
	min-width: 27rem;
	padding:5px 15px;
	left:50%;
	bottom:25px;
	margin-left:-195px;
	color:#56443B;
	border:2px solid rgba(153,147,131,0.9);
	background:rgba(51,51,51,0.9);
	background-color: #D9D1BA;
	text-align:center;
	border-radius:8px;
	opacity:0;
	box-shadow:8px 6px 4px rgba(112,108,96,.7);
	-webkit-transition:all 0.8s ease-in-out;
	-moz-transition:all 0.8s ease-in-out;
	-o-transition:all 0.8s ease-in-out;
	-ms-transition:all 0.8s ease-in-out;
	transition:all 0.8s ease-in-out;
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	/* reset tooltip, to not use container styling */
	font: 24px/1 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif; /*workaround for IE9&10 REM (IE bug id 772679)*/
	font: 1.5rem/1 "livory", "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.tooltip p {
	font: 20px/1.24 "abril-text", Georgia, "Times New Roman", Times, serif;
	font: 1rem/1.25 "abril-text", Georgia, "Times New Roman", Times, serif;
	text-align: left; 
	} 

@media screen and (min-width: 800px) and (max-width: 1442px) {	
	.tooltip p {
		padding: 0;
		}}
.tooltip-container:hover .tooltip, a:hover .tooltip {
	/* Makes the Tooltip slightly transparent, Lets the barely see though it */
	opacity:1;
	/* Changes the scale from 0 to 1 - This is what animtes our tooltip! */
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}