@charset "utf-8";
/* CSS Document */
/*This CSS file belongs to - index-splash-1.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: #FFF;}
* {box-sizing: border-box;}
 body {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 width: 90%;
	 margin: 0 auto;
	 font-family: "jubilat", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	 color: #040404;
	 border-radius: .5rem;}
.wrapper {
	 height: 168rem;
	 /*margin: 0 auto;*/ /*sept 12*/
	 padding: 8rem 0 0 0;
	 position: relative;
	 top: 6rem;
	 background: #F9F9F9;
	 background-image: url(../images/front/whitediamond.png);
	 color: #040404;
	 border: 1rem double #FFF;
	 border-radius: 1rem;
	}
img {max-width: 100%;}
i {font-style: italic;}
p {font-size: 18px;	font-size: 1.125rem;}
h1 {font-size: 48px; font-size: 3rem; margin: 0; /*-webkit-text-stroke: 2px #F9F9F9;*/}
h2, h3, h4 {font-weight: 500;}

  @media only screen and (max-width: 1450px) {h2 {font-size: 29px; font-size: 1.8rem;}}
  @media only screen and (max-width: 1450px) {h3 {font-size: 24px; font-size: 1.5rem;}}
h4 {width: 80%; font-size: 16px; font-size: 1rem; font-weight: 400; margin: 0; text-align: center;}
h5 {font-size: 18px; font-size: 1.125rem; margin-top: -1.5rem; text-indent: .5rem;}	
ul>ul {margin: 0; margin-left: -6rem;}
strong {font-weight: 600; font-size: 16px; font-size: 1rem;}
strong>p {margin-top: 1.5rem; font-size: 1rem; font-weight: 400; width: 80%;}
/* =============================================================================
Begin PAGE HEADER
   ========================================================================== */
.page-header {
	/*height: 40rem;*/ /*sept 12*/
	/*position: relative;*/ /*sept 12*/
	margin: 0 auto;
	text-align: center;
	margin-top: -20rem;
	height: 50rem;
	font-family: "superclarendon", "Palatino Linotype", "Book Antiqua", Palatino, serif;}
.logo-area {
	width: 62rem;
	height: 40rem;
	position: relative;
	margin: 0 auto;
	animation: FF-logo-area-grayscale 16s ease-in 1;
	-webkit-animation: logo-area-grayscale 16s ease-in 1;}
.logo-area>span {
	
	}

.page-header h2, h3 {font-family: "superclarendon", "Palatino Linotype", "Book Antiqua", Palatino, serif;}
.page-header h2 {margin: -13rem 0 0 0; font-size: 48px; font-size: 3rem;}

	
.page-header h3 {margin-top: 0; font-size: 24px; font-size: 1.5rem;}
.page-header p {font-family: "jubilat", "Palatino Linotype", "Book Antiqua", Palatino, serif;}	
.logo-area h1 {
	display: flex;
	width: 125%;
	position: relative;
	z-index: 9;
	top: 12rem;
	left: -7rem;
	font: 700 128px "superclarendon", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font: 700 10rem "superclarendon", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-shadow: 2px 2px 0 #E5E5E5, -2px -2px 0 #E5E5E5, -2px 2px 0 #E5E5E5, 2px -2px 0 #E5E5E5;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {.logo-area h1 {font-size: 128px; font-size: 8rem; left: -1rem;}}
@media only screen and (min-width: 700px) and (max-width: 800px) {.logo-area h1 {font-size: 80px; font-size: 5rem; left: -1rem;}}

sup {
	position: relative;
	top: -1.7rem;
	font-size: 58px;
	font-size: 3rem;
	left: 1.5rem;}

.title-word-1, .title-word-2, .title-word-3 {
	display: flex;
	color: #040404;}
.title-word-1 {font-size: 3rem; margin: 2rem 0 0 2rem; -webkit-text-stroke: 0px #F9F9F9;}
.title-word-3 {margin-left: 2rem;}


.yellow-box-3 {
	position: absolute;
	left: 10%;
	top:14%;
	z-index: 8;
	-webkit-animation: yellow-box-anima-3 3.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 5;
	animation: yellow-box-anima-3 3.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) 5;}
.yellow-box-shadow {
	position: absolute;
	left: 9%;
	top: 19%;
	z-index: 4;}
.blue-box-3, .blue-box-shadowUP {
	position: absolute;
	left: 34%;
	top: 22%;
	z-index: 7;
	-webkit-animation: blue-box-anima-3 2550ms cubic-bezier(0.105, 0.240, 0.670, 1.650) .125s 7 alternate-reverse;
	animation: blue-box-anima-3 2550ms cubic-bezier(0.105, 0.240, 0.670, 1.650) .125s 7 alternate-reverse;}
.blue-box-shadowUP {
	z-index: 3;
	top: 33%;
	left: 36%;}
.green-box-3A, .green-box-shadow {
	position: absolute;
	left: 55%;
	top: 30%;
	z-index: 6;
	-webkit-animation: blue-box-anima-3 2s .25s 9 alternate-reverse;
	-webkit-transition-timing-function: cubic-bezier(0.600, -0.600, 0.030, 3);
	animation: blue-box-anima-3 2s .25s 9 alternate-reverse;
	transition-timing-function: cubic-bezier(0.600, -0.600, 0.030, 3);}
.green-box-shadow {
	z-index: 2;
	left: 52%;
	top: 38%;}
.red-box-3 {
	position: absolute;
	left: 70%;
	top: 33%;
	z-index: 5;
	-webkit-animation: red-box-anima-3 3600ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .5s 5;
	animation: red-box-anima-3 3600ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .5s 5;}
.red-box-shadow {
	position: absolute;
	z-index: 1;
	left: 67%;
	top: 40%;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {
	/*.logo-area {width: 100%;}*/
	.logo-area h1 {width: 100%;}
	.yellow-box-3 {left: 6%;}
	.yellow-box-shadow {left: 5.4%;}
	.blue-box-3 {left: 30%;}
	.blue-box-shadowUP {left: 32%;}
	.green-box-3A {left: 52%;}
	.green-box-shadow {left: 50%;}
	.red-box-3 {}
	.red-box-shadow {}}


@-webkit-keyframes logo-area-grayscale {0% {-webkit-filter: grayscale(1); } 100%   {-webkit-filter: grayscale(0); }}
@keyframes FF-logo-area-grayscale {0% { filter: grayscale(1); } 100%   { filter: grayscale(0); }}
@-webkit-keyframes logo-area-desaturate {0% {-webkit-filter: grayscale(1);} /*10% {filter: saturate(0%);}*/ 100% {-webkit-filter: grayscale(0);}}
@keyframes logo-area-desaturate {0% {filter: grayscale(1);} /*10% {filter: saturate(0%);}*/ 100% {filter: grayscale(0);}}
@keyframes title-text {0% {z-index: 1;} 100% {z-index: 9}}
@-webkit-keyframes yellow-box-anima-3 {from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);}}
@keyframes yellow-box-anima-3 {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
@-webkit-keyframes blue-box-anima-3 {from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);}}
@keyframes blue-box-anima-3 {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
@-webkit-keyframes green-box-anima-3 {from {-webkit-transform: rotate(0deg);} 50% {-webkit-transform: rotate(180deg);} to {-webkit-transform: rotate(360deg);}}
@keyframes green-box-anima-3 {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
@-webkit-keyframes red-box-anima-3 {from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);}}
@keyframes red-box-anima-3 {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}	

.header-divider {margin-top: 14rem;}
.header-divider {margin-top: 8rem;}
.header-divider-2 {text-align: center;}

.header-para-1 {width: 34%; margin: 0 auto; text-align: left;}
.header-para-more {width: 34%; margin: 1rem auto; text-align: left;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {.header-para-1 {width: 67%; margin: 0 auto; text-align: left;}}	
 /*style="width: 35%; margin: 0 auto; text-align: left;"*/
/* =============================================================================
Begin MAIN NAV
   ========================================================================== */
.main-nav {
	width: 627px;
	/*margin: 0 auto;*/
	margin: 10rem auto 0 auto;
	padding-bottom: 4rem;}
.main-nav-img-1 {padding-top: 4rem;}
.main-nav-img-2 {padding-top: 1rem;}
.main-nav h3 {
	font-size: 32px;
	font-size: 2rem;
	text-indent: -6rem;
	text-align: center;}
.nav-list {
	width: 100%;
	font-size: 24px;
	font-size: 1.5rem;
	margin: 0;}
  @media only screen and (min-width: 1051px) and (max-width: 1299px) {.nav-list {padding-left: 6rem;}}
.nav-list a {font-style: italic; font-weight: 500;}
.nav-list p {
	font-size: 20px;
	font-size: 1.25rem;
	text-indent: -3.5rem;
	margin: 0;
	color: #444444;}
.nav-list p {font-size: 18px; font-size: 1.125rem;}
.main-nav li {margin-bottom: .75rem;}
.mi>li {
	font-size: 20px;
	font-size: 1.25rem;
	padding-left: 6rem;}
.nav-list h2{
	text-align: left;
	margin: .5rem 0;}
.nav-list h1 {margin: 0 0 0 -4rem;}
.main-TOC {
	width: 40%;
	position: relative;
	margin: 0 auto;
	margin-top: -12rem;}
/* =============================================================================
Begin MAIN CONTENT
   ========================================================================== */
.main-content {
	width: 40%;
	position: relative;
	margin: 0 auto;}
.main-content p {padding: 0 4rem;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {.main-content {width: 65%;} .main-content p {padding: 0 3.5rem;}}
	
@media only screen and (min-width: 1051px) and (max-width: 1281px) {.main-content {width: 57%;} .main-content p {padding: 0 3.5rem;}}

@media only screen and (min-width: 1282px) and (max-width: 1460px) {.main-content {width: 52%;}}
	
.first-line:first-line {font-size: 32px; font-size: 2rem; font-weight: 500;}
.first-line:first-letter {font-size: 8rem; line-height: 1rem; font-weight: 400; }
first-line p + first-line p:first-letter {
	font-size: 1rem;
	line-height: 1.25rem;
	float: none;
	margin: 0;}
first-line p + first-line p:first-line {font-weight: 400; font-variant: normal;}
.signature p {
	margin: -1rem 0 0 0;
	font-size: 14px;
	font-size: .875rem;
	font-weight: 500;}
.sign-date p {
	margin: 0;
	font-size: 14px;
	font-size: .875rem;
	font-weight: 500;}
h2[class] {
	text-indent: -1rem; 
	position: relative; 
	z-index: 7;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {h2[class] {margin-top: 2rem;}}

.b-n-b {margin: 8rem auto; position: relative;}
.b-n-b p {font-size: 20px; font-size: 1.25rem;}
.b-n-b h3 {
	color: #AD0000; 
	text-align: center; 
	text-indent: -1rem;}
.b-n-b-anima {}
.black-hand-R-1 {
	position: absolute;
	top: 90%;
	right: 3.5rem;
	-webkit-animation: right-mid 1500ms cubic-bezier(0.100, 0.890, 0.645, 1.650) infinite;
	animation: right-mid 1500ms cubic-bezier(0.100, 0.890, 0.645, 1.650) infinite;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {.black-hand-R-1 {right: 1rem;}}
@media only screen and (min-width: 1051px) and (max-width: 1460px) {.black-hand-R-1 {right: 2rem;}}
@media only screen and (min-width: 1461px) and (max-width: 1681px) {.black-hand-R-1 {top: 92%; right: 9rem;}}

@-webkit-keyframes right-mid {from {-webkit-transform: translateX(3.5rem);} 50% {-webkit-transform: translateX(1rem);} to {-webkit-transform: translateX(3.5rem);}}
@keyframes right-mid {from {transform: translateX(3.5rem);} 50% {transform: translateX(1rem);} to {transform: translateX(3.5rem);}}


.FGB-frame {
	width: 37.5rem;
	height: 556px;
	position: relative;
	margin: 18rem auto;
	background: url(../images/front/FGB-BG-2A.svg) center no-repeat;}
.FGB-frame p{
   width: 90%;
   position: absolute;
   bottom: 0;
   font-size: 12px;
   font-size: .75rem;
   margin: 0 4rem;
   padding: 0;}
.FGB {
	position: relative;
	left: 45%;
	z-index: 2;
	-webkit-animation: FGB-up-down 1250ms ease-in-out infinite;
	animation: FGB-up-down 1250ms ease-in-out infinite;}
@-webkit-keyframes FGB-up-down {from {-webkit-transform: translateY(220px);} 50% {-webkit-transform: translateY(230px);} to {-webkit-transform: translateY(220px);}}
@keyframes FGB-up-down {from {transform: translateY(220px);} 50% {transform: translateY(230px);} to {transform: translateY(220px);}}

.shadow {
	position: absolute;
	left: 25%;
    top: 77%;
    z-index: 1;
	-webkit-animation: shadow-bounce 1250ms ease-in-out infinite;
	animation: shadow-bounce 1250ms ease-in-out infinite;}
@-webkit-keyframes shadow-bounce {from {-webkit-transform: scale(.84);} 50% {-webkit-transform: scale(1);} to {-webkit-transform: scale(.84);}}	
@keyframes shadow-bounce {from {transform: scale(.84);} 50% {transform: scale(1);} to {transform: scale(.84);}}

.page-footer {width: 100%; background: transparent; /*outline: 1px dotted red;*/ padding: 6rem 0 0 0;} 
/* =============================================================================
Begin EXTRAS! EXTRAS! EXTRAS! 
   ========================================================================== */
/*BEGIN Links Styling*/
/*Eric Meyer's recommended order - link-visited-focus-hover-active*/
a:link, a:visited {
	outline : none;
	color: #444;
	/*border-bottom: 1px dotted #444;*/
	/*text-decoration : none;*/
	-moz-text-decoration-style: wavy; /*I used the moz becasue chrome/weblit makes the underline far too bold that thick no matter font-weight*/}
/*.contact>p {
	margin-bottom: 0;
	text-indent: 2rem;}*/
.contact>p>a:link {font-weight: 500; font-style: italic;}
a:hover { 
	color: #ad0000;
	/*border-bottom: 1px dotted #ad0000;*/
	text-decoration: underline;
	-moz-text-decoration-style: wavy;
	-webkit-transition: color .5s ease-in-out;
	transition: color .5s ease-in-out;}
.b-n-b a {font-size: 24px; font-size: 1.5rem; font-weight: 500;}
.red-talk a {color: #C10000; /*border-bottom: 1px dotted #C10000;*/}
.red-talk a:hover {color: #BC7C8A; /*border-bottom: 1px dotted #BC7C8A;*/}
.green-talk a {color: #0AD42F;/*border-bottom: 1px dotted #0AD42F;*/}
.green-talk a:hover {color: #84AA7D;/*border-bottom: 1px dotted #84AA7D;*/}
.blue-talk a {color: #4705D6; /*border-bottom: 1px dotted #4705D6;*/}
.blue-talk a:hover {color: #616D99; /*border-bottom: 1px dotted #616D99;*/}
.yellow-talk a {color: #E4E235; /*border-bottom: 1px dotted #C7B36B;*/}
.yellow-talk a:hover {color: #F7E9BB; /*border-bottom: 1px dotted #F7E9BB;*/}
/*End of Links Styling*/

/*Begin Specials Styling*/
.strike-through {text-decoration: line-through;}
.diamonds-bottom {
	width: 627px;
	height: 56px;
	margin: 1rem auto;
	background: transparent url(../images/front/diamonds-n-bar-2CAAnima.png) 0 0 no-repeat;
	animation: diamonds-bottom 2s steps(15) 3s infinite  alternate;
	-webkit-animation: diamonds-bottom 2s steps(15) 3s infinite  alternate;}
.diamonds-top {
	width: 627px;
	height: 56px;
	margin: 1rem auto;
	background: transparent url(../images/front/diamonds-n-bar-2CAnima.png) 0 0 no-repeat;
	animation: diamonds-top 2s steps(15) 2s infinite  alternate;
	-webkit-animation: diamonds-top 2s steps(15) 2s infinite  alternate;}
@-webkit-keyframes diamonds-bottom {0% {background-position: 0 0;} 100% {background-position: 0 -840px;}}
@keyframes diamonds-bottom {0% {background-position: 0 0;} 100% {background-position: 0 -840px;}}
@-webkit-keyframes diamonds-top {0% {background-position: 0 0;} 100% {background-position: 0 -840px;}}
@keyframes diamonds-top {0% {background-position: 0 0;} 100% {background-position: 0 -840px;}}
/*End of Specials Styling*/