#hero {width:100%; height:500px; background:linear-gradient(178deg, #242424, #000)}
@media (max-width:767px){
#hero { height:90vh; max-height:700px }
}
#hero .bo-temp { background: none; display: flex; height: 100%; padding-top: 6.25rem; padding-bottom: 0;}
#hero .content { align-items:center;}
#hero .content > *:empty { display:none }
/* General Styles */
.staggered{
	display:block;
	margin-bottom:30px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.7s ease;
}
.staggered:nth-child(1) { transition-delay: 0s; }
.staggered:nth-child(2) { transition-delay: 0.15s; }
.staggered:nth-child(3) { transition-delay: 0.30s; }
.staggered:nth-child(4) { transition-delay: 0.45s; }
.staggered:nth-child(5) { transition-delay: 0.60s; }
.staggered:nth-child(6) { transition-delay: 0.75s; }
#story-sec-3 {display:none}
#story-sec-3 .visible .content { opacity: 1; }
.visible .staggered {
  opacity: 1;
  transform: translateY(0);
  display: inline-block;
}
.bo-temp {
  position: relative;
  z-index: 2;
}
/* Keyframes */
@keyframes shadowing {
  0%, 100% { filter: drop-shadow(0px 0px 25px #33a221); }
  50% { filter: drop-shadow(0px 0px 23px #206415); }
}
@keyframes animation {
  to { background-position: -200% center; }
  from { background-position: 0% center; }
}
/* Section 1 */
#story-sec-1 .bo-temp {
  padding: 50px 0 50px;
  background:black;
  //background: linear-gradient(180deg, black, black);
  z-index:2;
}
#story-sec-1 .body-copy p {
    font: 300 24px / 1.3 Roboto;
    color: #fbfbfb;
}
/* Section 2 */
#story-sec-2 .bo-temp {
  padding: 50px 0 150px;
  background: linear-gradient(180deg, #070707, #121212);
}
#story-sec-2 .content,
#story-sec-2 .subheader {
  color: #fbfbfb;
}
#story-sec-2 .subheader {
  grid-column: 2 / 12;
  margin-top: 1rem;
}
#story-sec-2 .subheader img {
  margin-bottom: 5rem;
}
/* Section 3 */
#story-sec-3 { 
	height:150vh; 
	position: relative; 
  background: #000;
z-index:2;
background: linear-gradient(180deg, rgba(18,18,18,1) 0%, rgba(0,0,0,1) 15%);
}
#story-sec-3.anim-starts{
	z-index:3!important
}
#story-sec-3 .bo-temp {
  background-color: transparent;
  height: 50vh;
  display: flex;
  align-items: flex-start;
  z-index:1!important;
	position:sticky;
	top:50vh;
	bottom:0;
	left:0;
	overflow:hidden;
}
#story-sec-3 .content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}
#story-sec-3 .content span {
  color: #44d62c;
  text-transform: uppercase;
  font: 700 80px / 1 "Titillium Web", RazerF5, Arial, Helvetica, sans-serif;
  margin-top: 2rem;
}
/* Storytelling Section */
/*.storytelling-panel .scroll-container .scroll-sticky .section-content .background-image {opacity:1!important}*/
#bs-storytelling {
  color: #fbfbfb;
}
@media (max-width: 767px) {
.storytelling-panel .scroll-container .scroll-sticky .section-content{ display:grid; }
.storytelling-panel .scroll-container .scroll-sticky .section-content .content {grid-row:1}
.storytelling-panel .scroll-container .scroll-sticky .section-content .background-image { grid-row:2}
}
.storytelling-panel .scroll-container .scroll-sticky .section-content .background-image { transition:opacity 0.2s linear;}
#bs-storytelling .first .icons-video {object-fit:contain!important}
#bs-storytelling .bo-temp{
  z-index:1;
}
#bs-storytelling .scroll-container .scroll-sticky .section-content .content .header {
  max-width: 770px;
  margin: 0 auto;
  font: 300 24px / 1.3 Roboto;
  color: #fbfbfb;
		}
#bs-storytelling .opacity {
  opacity: 0.8;
}
.isfocus{}
/* FGBG Section */
#fgbg.entering{
  //visibility:visible;
  //position: fixed;
}
#fgbg  {
  display: flex;
  align-items: center;
  background: transparent;
  position: relative;
  width: 100%;
  // height: 100vh;
  // background: linear-gradient(180deg, black, #121212);
}
#fgbg .bo-temp {
    /*z-index: 0 !important;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;*/
    width: 100%;
    background: linear-gradient(180deg, black, #0d0d0d);
}
#fgbg .content {
    display: flex;
    align-items: center;
    justify-content: center;
    height:auto;
    min-height: 500px;
}
@media (min-width: 769px) {
	#fgbg .content {
    min-height: 300px;
	}	
}
#fgbg .intro .header .orphanfixed {
  text-align: center;
  background: linear-gradient(45deg, #44d62c 10%, #e7ffe4 50%, #44d62c 90%);
  background-size: 200%;
  background-position: 0% center;
  font-weight: bolder;
  color: transparent;
  background-clip: text;
  animation: animation 2.5s ease infinite 1s;
}
#fgbg .afterall {
  display: inline-block;
  text-transform: none;
  color: #fbfbfb;
  font: 300 24px / 1.3 Roboto;
  margin-bottom: 1rem;
}
/* Notify Me Section */
#notifyme-head .bo-temp {
  padding: 0 !important;
}
#notifyme-head p{
  color: #fbfbfb;
  font: 300 24px / 1.3 Roboto;
}
#notify-me,
#notifyme-head .bo-temp {
  position: relative;
  z-index: 2;
  background: #0d0d0d;
}
#notify-me .pnx-forms-container {
  background: transparent !important;
}
#notify-me .body-copy p {color:#fbfbfb}
#notify-me form .paragraph { color: #fbfbfb; margin-top: -50px; margin-bottom: 60px;}
.huge-text { 
		display:block;
		font-weight:300;
		line-height:1;
		text-transform:uppercase;
 }
@media (min-width: 769px) {
  .huge-text { 
    font-size:60px;
	}
	#fgbg .header { 
    font-size:90px;
	}
}
@media (max-width: 768px) {
#story-sec-1 p {#fbfbfb}
#story-sec-1 .bo-temp { padding-top:3rem}
#story-sec-3 { opacity: 1 !important; height: auto !important; transform: scale(1) !important; padding-bottom: 6.25rem;}
#story-sec-3 .bo-temp {height:auto!important;}
#story-sec-3 .content {opacity:1!important;transform:scale(1)!important;}
#story-sec-3 .content span { font-size:60px;}
#bs-storytelling {margin-top:0!important;}
.huge-text,
		#fgbg .header {
				font-size:50px;
		}
    #fgbg .afterall,
    #bs-storytelling .scroll-container .scroll-sticky .section-content .content .header {
        font-size: 1.5rem!important;
        font-weight: 300;
    }
}
.video-bg-mp4 { text-align:center; margin-bottom:6.25rem;}
@media (max-width:767px){
.video-bg-mp4 {margin-bottom:2rem; }
}
.video-bg-mp4 video { margin:0 auto; max-width:atuo!important; max-height:75vh; }
 @media screen and (max-width:767px){} @media screen and (-webkit-max-device-pixel-ratio: 1) and (min-width: 1200px), screen and (min-width: 768px) and (max-width: 1200px){} @media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 1200px){} @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1200px){}