/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

main {
  overflow: hidden;
}

html {
  font-size: 100%;
}

body {
  font-size: .9rem;
  font-family: 'Prompt', sans-serif;
  color: #3d3536;
  background-color: white;
}

a {
  color: #b4d7a8;
  text-decoration: none;
}

p,
.row p {
  font-size: .9rem;
  line-height: 1.2rem;
  font-family: 'Prompt', sans-serif;
  
}

b,
.row b {
  font-size: .9rem;
  line-height: 1.2rem;
  font-weight: 600;
  font-family: 'Prompt', sans-serif;
  
}

.intro-header {
  font-size: 1.6rem!important;
  line-height: 1.4rem!important;
  font-family: 'Prompt', sans-serif;
  color: #E2C32B;
  font-weight: 800;
  text-transform: uppercase;  
}

.intro-subheader {
  font-size: 1.6rem!important;
  line-height: 1.4rem!important;
  font-family: 'Prompt', sans-serif; 
  font-weight: 800; 
  text-transform: uppercase;    
}

.block-header {
  font-size: 1.6rem!important;
  line-height: 1.4rem!important;
  font-family: 'Prompt', sans-serif;
  font-weight: 800;
  text-transform: uppercase;  
}

.block-subheader {
  font-size: .8rem!important;
  line-height: 1rem!important;
  font-family: 'Prompt', sans-serif;
  font-weight: 800;
  text-transform: uppercase;  
}

/* -------------------------------- 



-------------------------------- */

.hero-layer1 {
  position: relative;
  width: 60%;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 9999;
}

.hero-layer2 {
  position: absolute;
  width: 90%;
  top: auto;
  bottom: 0;
  left: 5%;
  z-index: 999;
}

.hero-layer3 {
  position: absolute;
  width: 100%;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 99;
}

.hero-layer4 {
  position: absolute;
  width: 25%;
  top: auto;
  bottom: 0;
  left: 10%;
  z-index: 9;
}

.hero-layer5 {
  position: absolute;
  width: 25%;
  top: auto;
  bottom: 0;
  right: 10%;
  z-index: 9;
}

.rh-fixed-bg {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}

.rh-fixed-bg__content, .rh-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 70%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  font-size: 3rem;
}

.rh-fixed-bg h1, .rh-fixed-bg h2 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
}

.rh-fixed-bg.rh-fixed-bg--1 {
  background-image: url("../img/bkgd-yellow.jpg");
}

.rh-fixed-bg.rh-fixed-bg--1960 {
  background-image: url("../img/banner-1960s.jpg");
}

.rh-fixed-bg.rh-fixed-bg--1970 {
  background-image: url("../img/banner-1970s.jpg");
}

.rh-fixed-bg.rh-fixed-bg--1980 {
  background-image: url("../img/banner-1980s.jpg");
}

.rh-fixed-bg.rh-fixed-bg--1990 {
  background-image: url("../img/banner-1990s.jpg");
}

.rh-fixed-bg.rh-fixed-bg--2000 {
  background-image: url("../img/banner-2000s.jpg");
}

@media only screen and (min-width: 768px) {
  .rh-fixed-bg h1, .rh-fixed-bg h2 {
    font-size: 3.6rem;
  }
}

@media only screen and (min-width: 1170px) {
  .rh-fixed-bg h1, .rh-fixed-bg h2 {
    font-size: 4.8rem;
    font-weight: 300;
  }
  @supports (background-attachment: fixed) {
    /* fix bug on IE11 and below */
    .rh-fixed-bg {
      background-attachment: fixed;
    }
  }
}

.rh-scrolling-bg {
  position: relative;
  min-height: 100%;
  padding: 2em 0;
  line-height: 1.6;
  z-index: 2;
}

.rh-scrolling-bg.rh-scrolling-bg--color-1 {
  background-image: url("../img/bkgd-light.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #3d3536;
  color: #342a32;
}

.rh-scrolling-bg.rh-scrolling-bg--color-2 {
  background-image: url("../img/bkgd-dark.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #99a478;
  color: #fff;
}

.rh-scrolling-bg.rh-scrolling-bg--color-3 {
  background-color: #372C35;
  color: #E2C32B;
}

.rh-scrolling-bg.rh-scrolling-bg--color-3 a {
  color: #FFFFFF;
}

.rh-scrolling-bg.rh-scrolling-bg--color-3 a:hover {
  color: #D0822A;
}

.rh-scrolling-bg__content {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .rh-scrolling-bg {
    padding: 4em 0;
    font-size: 2rem;
    line-height: 2;
    font-weight: 300;
  }
}

.space {
  padding: 80px 0;
}

.space-video {
  padding: 80px 0;
}

.mobspace {
  padding: 100px 0 200px 0;
}

.spacer {
  margin: 80px 0;
}

.endspacer {
  padding: 40px 0;
}

.tv-timeline {
position: absolute;
bottom: -1px;
height: 240px;
margin-top: 0px;
left: 0;
z-index: 4;
width: 100%;
background: url("../img/bhtt-montage-grad.png");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
}

.tear {
position: relative;
bottom: -28px;
height: 40px;
margin-top: -40px;
left: 0;
z-index: 4;
width: 100%;
background: url("../img/tear.png");
background-position: top;
background-size: contain;
background-repeat: repeat;
}


.stack-container {
  position: relative;
}

.cutout-50 {
  width: 50%;
  margin: 0 25%;
  z-index: 9999;
}

.cutout-60 {
  width: 60%;
  margin: 0 20%;
  z-index: 9999;
}

.cutout-l-60 {
  width: 60%;
  margin: 0 25% 0 0;
  z-index: 9999;
}

.cutout-70 {
  width: 70%;
  margin: 0 0 0 25%;
  z-index: 9999;
}

.cutout-70R {
  width: 70%;
  margin: 0 20% 0 0;
  z-index: 9999;
}

.cutout-80 {
  width: 80%;
  margin: 0 20% 0 0;
  z-index: 9999;
}

.cutout-50 img,
.cutout-60 img,
.cutout-70 img,
.cutout-80 img, {
  max-height: 400px;
}

.brush-right {
  position: relative;
  width: 25%;
  margin-left: 80%;
  z-index: 99;
  margin-top: 50px;
}

.brush-left {
  position: relative;
  width: 25%;
  margin-right: 80%;
  z-index: 99;
  margin-top: 50px;
}

.block {
  z-index: 9;
}

.stack {
  position: absolute;
  top: 0;
  left: 0;
  z-index: ;
}

.left-stack {
  position: absolute;
  top: 0;
  right: 0;
  z-index: ;
}

.century {
  width: auto;
  height: 200px;
  margin-top: ;
  z-index: 999;
}

.year {
  width: auto;
  height: 200px;
  margin-left: 140px;
  margin-top: ;
  z-index: 99999;
}

.yearx2 {
  width: auto;
  height: 200px;
  margin-left: 120px;
  margin-top: ;
  z-index: 99999;
}

.century-right {
  width: auto;
  height: 200px;
  top: ;
  margin-right: 140px;
  z-index: 99999;
}

.year-right {
  width: auto;
  height: 200px;
  top: ;
  z-index: 999;
}

.century-rightx2 {
  width: auto;
  height: 200px;
  top: ;
  margin-right: 120px;
  z-index: 999;
}

.century-leftx2 {
  width: auto;
  height: 200px;
  top: ;
  margin-right: 160px;
  z-index: 99999;
}


@media only screen and (max-width: 576px) {
.hero-layer1 {
  position: relative;
  width: 80%;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.hero-layer2 {
  position: absolute;
  width: 90%;
  top: auto;
  bottom: 0;
  left: 5%;
  z-index: 99;
}

.hero-layer3 {
  position: absolute;
  width: 100%;
  top: auto;
  bottom: 0;
  left: 0;
  z-index: 9;
}

.spacer {
  margin: 40px 0;
}

.rh-fixed-bg {
  position: relative;
  min-height: 50vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}

.rh-fixed-bg__content, .rh-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  font-size: 3rem;
}

.tear {
position: relative;
bottom: -14px;
height: 20px;
margin-top: -20px;
left: 0;
z-index: 4;
width: 100%;
background: url("/img/tear.png");
background-position: top;
background-size: contain;
background-repeat: repeat;
}

.tv-timeline {
position: absolute;
bottom: 0px;
height: 120px;
margin-top: 0px;
left: 0;
z-index: 4;
width: 100%;
background: url("/img/bhtt-montage-grad.png");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
}

.brush-right {
  position: relative;
  width: 30%;
  margin-left: 65%;
  z-index: 99;
  margin-top: 0;
}

.brush-left {
  position: relative;
  width: 30%;
  margin-right:65%;
  z-index: 99;
  margin-top: 0;
}

.century {
  height: 140px;
  width: auto;
  top: 50px;
}

.year {
  height: 140px;
  width: auto;
  margin-left: 100px;
  top: 60px;
}

.century-right {
  height: 140px;
  width: auto;
  margin-right: 100px;
  top: 60px;
}

.year-right {
  height: 140px;
  width: auto;
  top: 50px;
}

.yearx2 {
  width: auto;
  height: 140px;
  margin-left: 80px;
  top: 50px;
  z-index: 99999;
}

.century-leftx2 {
  width: auto;
  height: 140px;
  top: 50px;
  margin-right: 120px;
  z-index: 99999;
}

.space-video {
  padding: 120px 0 0 0;
}

.rellax { transform: translate3d(0,0,0) !important;}
.stack-container {height: 102px;} 

}

/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
@media (prefers-reduced-motion) {
  .animation {
    animation-name: dissolve;
  }
  .rellax { transform: translate3d(0,0,0) !important; }
}

 :focus {
  outline: #46773C dotted 4px;
  border-radius: 5px;
 }