.topHImage {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 0;
  top:0;
  margin-top: 0 !important;
}


.whiteLogo .topHImage:before {
  content: ''; z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 37%, rgba(0,0,0,0) 100%);
}
	

.topHImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	/* object-position:  center top;*/
	object-position: center var(--v-pos-desktop, top);
}


.topHImage__content {
    position: relative;
    z-index: 1;
}

h1.venueName {
position: absolute;
bottom: 12vh;
left: 0;
right: 0;
margin: 0 auto;
color: #fff;
text-align: center;
text-transform: uppercase;
z-index:1;
}

.topHImage {position:relative; z-index:0}
.whiteHeadlines .topHImage {background:#333; }
.topHImage .whiteHeadlines, .topHImage .whiteHeadlines h1 { color:#fff}
.darkHeadlines {color:#333}
.darkHeadlines h1, .darkHeadlines .is-style-eyebrow {color:var(--wp--preset--color--custom-dark-blue);}

.heroHeadings { 
position: absolute;
bottom: 12vh;
left: 0;
right: 0;
margin: 0 auto;
color: #fff;
text-align: center;
text-transform: uppercase;
z-index: 1;
padding: 0 1rem;
	}
	
.whiteHeadlines.heroHeadings {text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); } 

@media (max-width: 767px) {
    .topHImage img {
        /* 2. Switch to the mobile variable on small screens */
        object-position: center var(--v-pos-mobile, top);
    }
}

/* down arrow  */

.hero-scroll-arrow {
    position: absolute;
    /* right: 6%; */
   left:0;
	right:0;
	text-align:center;
	margin:auto;
    bottom: 22px;
    z-index: 3;
    font-size: 2rem;
    text-decoration: none;
    transition: transform 0.3s ease;

}

.hero-scroll-arrow:hover {
    transform: translateY(-5px);
	opacity:.7; 
}

.hero-scroll-arrow svg {fill:#fff; opacity:.5; width:32px; height:32px}
.darkHeadlines .hero-scroll-arrow svg {fill:#000 !important; opacity:.4; width:32px; height:32px}

/* Ensure the anchor doesn't cause a layout shift */
#content-start {
    position: absolute;
	height:1px;
	width:1px;
    z-index:3;
	top:88vh;
}